Merge trunk

modules/ppcp-blocks/resources/css/gateway-editor.scss

@@ -0,0 +1,3 @@
+li[id^="express-payment-method-ppcp-"] div[class^="ppc-button-container-"] {
+		display: flex;
+}

modules/ppcp-blocks/resources/js/Components/card-fields.js

@@ -19,11 +19,9 @@ export function CardFields( {
 	config,
 	eventRegistration,
 	emitResponse,
-	components,
 } ) {
 	const { onPaymentSetup } = eventRegistration;
 	const { responseTypes } = emitResponse;
-	const { PaymentMethodIcons } = components;
 
 	const [ cardFieldsForm, setCardFieldsForm ] = useState();
 	const getCardFieldsForm = ( cardFieldsForm ) => {
@@ -95,10 +93,6 @@ export function CardFields( {
 					} }
 				>
 					<PayPalCardFieldsForm />
-					<PaymentMethodIcons
-						icons={ config.card_icons }
-						align="left"
-					/>
 					<CheckoutHandler
 						getCardFieldsForm={ getCardFieldsForm }
 						getSavePayment={ getSavePayment }

modules/ppcp-blocks/resources/js/Helper/debounce.js

@@ -1,9 +1,44 @@
 export const debounce = ( callback, delayMs ) => {
-	let timeoutId = null;
-	return ( ...args ) => {
-		window.clearTimeout( timeoutId );
-		timeoutId = window.setTimeout( () => {
-			callback.apply( null, args );
-		}, delayMs );
+	const state = {
+		timeoutId: null,
+		args: null,
 	};
+
+	/**
+	 * Cancels any pending debounced execution.
+	 */
+	const cancel = () => {
+		if ( state.timeoutId ) {
+			window.clearTimeout( state.timeoutId );
+		}
+
+		state.timeoutId = null;
+		state.args = null;
+	};
+
+	/**
+	 * Immediately executes the debounced function if there's a pending execution.
+	 * @return {void}
+	 */
+	const flush = () => {
+		// If there's nothing pending, return early.
+		if ( ! state.timeoutId ) {
+			return;
+		}
+
+		callback.apply( null, state.args || [] );
+		cancel();
+	};
+
+	const debouncedFunc = ( ...args ) => {
+		cancel();
+		state.args = args;
+		state.timeoutId = window.setTimeout( flush, delayMs );
+	};
+
+	// Attach utility methods
+	debouncedFunc.cancel = cancel;
+	debouncedFunc.flush = flush;
+
+	return debouncedFunc;
 };

modules/ppcp-blocks/resources/js/advanced-card-checkout-block.js

@@ -1,19 +1,30 @@
-import { registerPaymentMethod } from '@woocommerce/blocks-registry';
-import { CardFields } from './Components/card-fields';
+import {registerPaymentMethod} from '@woocommerce/blocks-registry';
+import {CardFields} from './Components/card-fields';
 
-const config = wc.wcSettings.getSetting( 'ppcp-credit-card-gateway_data' );
+const config = wc.wcSettings.getSetting('ppcp-credit-card-gateway_data');
 
-registerPaymentMethod( {
-	name: config.id,
-	label: <div dangerouslySetInnerHTML={ { __html: config.title } } />,
-	content: <CardFields config={ config } />,
-	edit: <CardFields config={ config } />,
-	ariaLabel: config.title,
-	canMakePayment: () => {
-		return true;
-	},
-	supports: {
-		showSavedCards: true,
-		features: config.supports,
-	},
-} );
+const Label = ({components, config}) => {
+    const {PaymentMethodIcons} = components;
+    return <>
+        <span dangerouslySetInnerHTML={{__html: config.title}}/>
+        <PaymentMethodIcons
+            icons={ config.card_icons }
+            align="right"
+        />
+    </>
+}
+
+registerPaymentMethod({
+    name: config.id,
+    label: <Label config={config}/>,
+    content: <CardFields config={config}/>,
+    edit: <CardFields config={config}/>,
+    ariaLabel: config.title,
+    canMakePayment: () => {
+        return true;
+    },
+    supports: {
+        showSavedCards: true,
+        features: config.supports,
+    },
+});

modules/ppcp-blocks/resources/js/checkout-block.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useMemo } from '@wordpress/element';
 import {
 	registerExpressPaymentMethod,
 	registerPaymentMethod,
@@ -41,6 +41,7 @@ const PayPalComponent = ( {
 	shippingData,
 	isEditing,
 	fundingSource,
+	buttonAttributes,
 } ) => {
 	const { onPaymentSetup, onCheckoutFail, onCheckoutValidation } =
 		eventRegistration;
@@ -614,6 +615,15 @@ const PayPalComponent = ( {
 		fundingSource
 	);
 
+	if ( typeof buttonAttributes !== 'undefined' ) {
+		style.height = buttonAttributes?.height
+			? Number( buttonAttributes.height )
+			: style.height;
+		style.borderRadius = buttonAttributes?.borderRadius
+			? Number( buttonAttributes.borderRadius )
+			: style.borderRadius;
+	}
+
 	if ( ! paypalScriptLoaded ) {
 		return null;
 	}
@@ -688,19 +698,46 @@ const PayPalComponent = ( {
 	);
 };
 
-const BlockEditorPayPalComponent = () => {
-	const urlParams = {
-		clientId: 'test',
-		...config.scriptData.url_params,
-		dataNamespace: 'ppcp-blocks-editor-paypal-buttons',
-		components: 'buttons',
-	};
+const BlockEditorPayPalComponent = ( { fundingSource, buttonAttributes } ) => {
+	const urlParams = useMemo(
+		() => ( {
+			clientId: 'test',
+			...config.scriptData.url_params,
+			dataNamespace: 'ppcp-blocks-editor-paypal-buttons',
+			components: 'buttons',
+		} ),
+		[]
+	);
+
+	const style = useMemo( () => {
+		const configStyle = normalizeStyleForFundingSource(
+			config.scriptData.button.style,
+			fundingSource
+		);
+
+		if ( buttonAttributes ) {
+			return {
+				...configStyle,
+				height: buttonAttributes.height
+					? Number( buttonAttributes.height )
+					: configStyle.height,
+				borderRadius: buttonAttributes.borderRadius
+					? Number( buttonAttributes.borderRadius )
+					: configStyle.borderRadius,
+			};
+		}
+
+		return configStyle;
+	}, [ fundingSource, buttonAttributes ] );
+
 	return (
 		<PayPalScriptProvider options={ urlParams }>
 			<PayPalButtons
-				onClick={ ( data, actions ) => {
-					return false;
-				} }
+				className={ `ppc-button-container-${ fundingSource }` }
+				fundingSource={ fundingSource }
+				style={ style }
+				forceReRender={ [ buttonAttributes || {} ] }
+				onClick={ () => false }
 			/>
 		</PayPalScriptProvider>
 	);
@@ -739,11 +776,8 @@ if ( cartHasSubscriptionProducts( config.scriptData ) ) {
 	features.push( 'subscriptions' );
 }
 
-if ( block_enabled && config.enabled ) {
-	if (
-		( config.addPlaceOrderMethod || config.usePlaceOrder ) &&
-		! config.scriptData.continuation
-	) {
+if ( block_enabled ) {
+	if ( config.placeOrderEnabled && ! config.scriptData.continuation ) {
 		let descriptionElement = (
 			<div
 				dangerouslySetInnerHTML={ { __html: config.description } }
@@ -791,7 +825,7 @@ if ( block_enabled && config.enabled ) {
 			placeOrderButtonLabel: config.placeOrderButtonText,
 			ariaLabel: config.title,
 			canMakePayment: () => {
-				return config.enabled;
+				return true;
 			},
 			supports: {
 				features,
@@ -804,7 +838,7 @@ if ( block_enabled && config.enabled ) {
 			name: config.id,
 			label: <div dangerouslySetInnerHTML={ { __html: config.title } } />,
 			content: <PayPalComponent isEditing={ false } />,
-			edit: <BlockEditorPayPalComponent />,
+			edit: <BlockEditorPayPalComponent fundingSource={ 'paypal' } />,
 			ariaLabel: config.title,
 			canMakePayment: () => {
 				return true;
@@ -813,7 +847,7 @@ if ( block_enabled && config.enabled ) {
 				features: [ ...features, 'ppcp_continuation' ],
 			},
 		} );
-	} else if ( ! config.usePlaceOrder ) {
+	} else if ( config.smartButtonsEnabled ) {
 		for ( const fundingSource of [
 			'paypal',
 			...config.enabledFundingSources,
@@ -836,7 +870,11 @@ if ( block_enabled && config.enabled ) {
 						fundingSource={ fundingSource }
 					/>
 				),
-				edit: <BlockEditorPayPalComponent />,
+				edit: (
+					<BlockEditorPayPalComponent
+						fundingSource={ fundingSource }
+					/>
+				),
 				ariaLabel: config.title,
 				canMakePayment: async () => {
 					if ( ! paypalScriptPromise ) {
@@ -860,6 +898,7 @@ if ( block_enabled && config.enabled ) {
 				},
 				supports: {
 					features,
+					style: [ 'height', 'borderRadius' ],
 				},
 			} );
 		}