Integrate express payments buttonAttributes API from the Checkout Block (#8888)

Co-authored-by: Thomas Roberts <[email protected]>
Co-authored-by: Kristófer R <[email protected]>
Co-authored-by: Kristófer Reykjalín <[email protected]>

Author: 4 people

changelog/add-express-payment-button-styles

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add compatibility with the buttonAttributes API from Woo Blocks

client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js

@@ -128,6 +128,27 @@ describe( 'WoopayExpressCheckoutButton', () => {
 		).toBeInTheDocument();
 	} );
 
+	test( 'respect buttonAttributes API when available ', () => {
+		render(
+			<WoopayExpressCheckoutButton
+				isPreview={ false }
+				buttonSettings={ buttonSettings }
+				api={ api }
+				isProductPage={ false }
+				emailSelector="#email"
+				buttonAttributes={ {
+					height: '55',
+					borderRadius: '20',
+				} }
+			/>
+		);
+
+		const button = screen.queryByRole( 'button', { name: 'WooPay' } );
+		expect( button.getAttribute( 'style' ) ).toBe(
+			'height: 55px; border-radius: 20px;'
+		);
+	} );
+
 	test( 'does not prefetch session data by default', async () => {
 		getConfig.mockImplementation( ( v ) => {
 			switch ( v ) {

client/checkout/woopay/express-button/woopay-express-checkout-button.js

@@ -40,6 +40,7 @@ export const WoopayExpressCheckoutButton = ( {
 	api,
 	isProductPage = false,
 	emailSelector = '#email',
+	buttonAttributes,
 } ) => {
 	const buttonWidthTypes = {
 		narrow: 'narrow',
@@ -48,10 +49,9 @@ export const WoopayExpressCheckoutButton = ( {
 	const onClickCallbackRef = useRef( null );
 	const buttonRef = useRef( null );
 	const isLoadingRef = useRef( false );
-	const {
+	let {
+		height: buttonHeight,
 		type: buttonType,
-		height,
-		size,
 		theme,
 		context,
 		radius: borderRadius,
@@ -60,6 +60,18 @@ export const WoopayExpressCheckoutButton = ( {
 	const [ buttonWidthType, setButtonWidthType ] = useState(
 		buttonWidthTypes.wide
 	);
+	const buttonSizeMap = new Map();
+	buttonSizeMap.set( '40', 'small' );
+	buttonSizeMap.set( '48', 'medium' );
+	buttonSizeMap.set( '55', 'large' );
+
+	// If we are on the checkout block, we receive button attributes which overwrite the extension specific settings
+	if ( typeof buttonAttributes !== 'undefined' ) {
+		buttonHeight = buttonAttributes.height || buttonHeight;
+		borderRadius = buttonAttributes.borderRadius || borderRadius;
+	}
+
+	const buttonSize = buttonSizeMap.get( buttonHeight );
 
 	const buttonText =
 		ButtonTypeTextMap[ buttonType || 'default' ] ??
@@ -353,18 +365,18 @@ export const WoopayExpressCheckoutButton = ( {
 	return (
 		<button
 			ref={ buttonRef }
-			key={ `${ buttonType }-${ theme }-${ size }` }
+			key={ `${ buttonType }-${ theme }-${ buttonSize }` }
 			aria-label={ buttonText }
 			onClick={ ( e ) => onClickCallbackRef.current( e ) }
 			className={ classNames( 'woopay-express-button', {
 				'is-loading': isLoading,
 			} ) }
 			data-type={ buttonType }
-			data-size={ size }
+			data-size={ buttonSize }
 			data-theme={ theme }
 			data-width-type={ buttonWidthType }
 			style={ {
-				height: `${ height }px`,
+				height: `${ buttonHeight }px`,
 				borderRadius: `${ borderRadius }px`,
 			} }
 			disabled={ isLoading }

client/checkout/woopay/express-button/woopay-express-checkout-payment-method.js

@@ -25,20 +25,24 @@ const api = new WCPayAPI(
 	request
 );
 
-const WooPayExpressCheckoutButtonContainer = () => {
-	const onRefChange = useCallback( ( node ) => {
-		if ( node ) {
-			const root = ReactDOM.createRoot( node );
+const WooPayExpressCheckoutButtonContainer = ( { buttonAttributes } ) => {
+	const onRefChange = useCallback(
+		( node ) => {
+			if ( node ) {
+				const root = ReactDOM.createRoot( node );
 
-			root.render(
-				<WoopayExpressCheckoutButton
-					buttonSettings={ getConfig( 'woopayButton' ) }
-					api={ api }
-					emailSelector="#email"
-				/>
-			);
-		}
-	}, [] );
+				root.render(
+					<WoopayExpressCheckoutButton
+						buttonSettings={ getConfig( 'woopayButton' ) }
+						api={ api }
+						emailSelector="#email"
+						buttonAttributes={ buttonAttributes }
+					/>
+				);
+			}
+		},
+		[ buttonAttributes ]
+	);
 
 	return <span ref={ onRefChange } />;
 };

client/express-checkout/blocks/components/express-checkout-component.js

@@ -75,6 +75,7 @@ const ExpressCheckoutComponent = ( {
 	onClick,
 	onClose,
 	expressPaymentMethod = '',
+	buttonAttributes,
 } ) => {
 	const {
 		buttonOptions,
@@ -116,10 +117,27 @@ const ExpressCheckoutComponent = ( {
 		onReady( event );
 	};
 
+	// The Cart & Checkout blocks provide unified styles across all buttons,
+	// which should override the extension specific settings.
+	const withBlockOverride = () => {
+		const override = {};
+		if ( typeof buttonAttributes !== 'undefined' ) {
+			override.buttonHeight = Number( buttonAttributes.height );
+		}
+		return {
+			...buttonOptions,
+			...override,
+		};
+	};
+
 	return (
 		<ExpressCheckoutElement
 			options={ {
-				...adjustButtonHeights( buttonOptions, expressPaymentMethod ),
+				...withBlockOverride( buttonOptions ),
+				...adjustButtonHeights(
+					withBlockOverride( buttonOptions ),
+					expressPaymentMethod
+				),
 				...getPaymentMethodsOverride( expressPaymentMethod ),
 			} }
 			onClick={ onButtonClick }

client/express-checkout/blocks/components/express-checkout-container.js

@@ -12,7 +12,7 @@ import { getExpressCheckoutButtonAppearance } from 'wcpay/express-checkout/utils
 import '../express-checkout-element.scss';
 
 const ExpressCheckoutContainer = ( props ) => {
-	const { api, billing } = props;
+	const { api, billing, buttonAttributes } = props;
 
 	const stripePromise = useMemo( () => {
 		return api.loadStripe( true );
@@ -23,7 +23,7 @@ const ExpressCheckoutContainer = ( props ) => {
 		paymentMethodCreation: 'manual',
 		amount: billing.cartTotal.value,
 		currency: billing.currency.code.toLowerCase(),
-		appearance: getExpressCheckoutButtonAppearance(),
+		appearance: getExpressCheckoutButtonAppearance( buttonAttributes ),
 	};
 
 	return (

client/express-checkout/utils/index.ts

@@ -169,18 +169,31 @@ export const displayLoginConfirmation = (
 	}
 };
 
+type ButtonAttributesType =
+	| { height: string; borderRadius: string }
+	| undefined;
+
 /**
  * Returns the appearance settings for the Express Checkout buttons.
  * Currently only configures border radius for the buttons.
  */
-export const getExpressCheckoutButtonAppearance = () => {
+export const getExpressCheckoutButtonAppearance = (
+	buttonAttributes: ButtonAttributesType
+) => {
+	let borderRadius = getDefaultBorderRadius();
 	const buttonSettings = getExpressCheckoutData( 'button' );
 
+	// Border radius from WooPayments settings
+	borderRadius = buttonSettings?.radius ?? borderRadius;
+
+	// Border radius from Cart & Checkout blocks attributes
+	if ( typeof buttonAttributes !== 'undefined' ) {
+		borderRadius = Number( buttonAttributes?.borderRadius ) ?? borderRadius;
+	}
+
 	return {
 		variables: {
-			borderRadius: `${
-				buttonSettings?.radius || getDefaultBorderRadius()
-			}px`,
+			borderRadius: `${ borderRadius }px`,
 			spacingUnit: '6px',
 		},
 	};

client/payment-request/blocks/payment-request-express.js

@@ -9,9 +9,9 @@ import { Elements, PaymentRequestButtonElement } from '@stripe/react-stripe-js';
  * Internal dependencies
  */
 import { useInitialization } from './use-initialization';
-import { getPaymentRequestData } from '../utils';
 import { recordUserEvent } from 'tracks';
 import { useEffect, useState } from 'react';
+import { getPaymentRequestData } from '../utils/utils';
 
 /**
  * PaymentRequestExpressComponent
@@ -28,6 +28,7 @@ const PaymentRequestExpressComponent = ( {
 	onClick,
 	onClose,
 	onPaymentRequestAvailable,
+	buttonAttributes,
 } ) => {
 	// TODO: Don't display custom button when result.requestType
 	// is `apple_pay` or `google_pay`.
@@ -44,13 +45,18 @@ const PaymentRequestExpressComponent = ( {
 		onClose,
 	} );
 
-	const { type, theme, height } = getPaymentRequestData( 'button' );
+	let { type, theme, height } = getPaymentRequestData( 'button' );
+
+	// If we are on the checkout block, we receive button attributes which overwrite the extension specific settings
+	if ( typeof buttonAttributes !== 'undefined' ) {
+		height = buttonAttributes.height || height;
+	}
 
 	const paymentRequestButtonStyle = {
 		paymentRequestButton: {
 			type,
 			theme,
-			height: height + 'px',
+			height: `${ height }px`,
 		},
 	};
 

client/settings/express-checkout-settings/general-payment-request-button-settings.js

@@ -168,20 +168,31 @@ const GeneralPaymentRequestButtonSettings = ( { type } ) => {
 	return (
 		<CardBody>
 			{ showWarning && (
-				<InlineNotice
-					status="warning"
-					icon={ true }
-					isDismissible={ false }
-				>
-					{ sprintf(
-						/* translators: %s type of button to which the settings will be applied */
-						__(
-							'These settings will also apply to the %s on your store.',
-							'woocommerce-payments'
-						),
-						otherButtons
-					) }
-				</InlineNotice>
+				<>
+					<InlineNotice
+						status="warning"
+						icon={ true }
+						isDismissible={ false }
+					>
+						{ sprintf(
+							/* translators: %s type of button to which the settings will be applied */
+							__(
+								'These settings will also apply to the %s on your store.',
+								'woocommerce-payments'
+							),
+							otherButtons
+						) }
+					</InlineNotice>
+					<InlineNotice
+						status="warning"
+						icon={ true }
+						isDismissible={ false }
+					>
+						{ __(
+							'Some appearance settings may be overridden in the express payment section of the Cart & Checkout blocks.'
+						) }
+					</InlineNotice>
+				</>
 			) }
 			<h4>{ __( 'Call to action', 'woocommerce-payments' ) }</h4>
 			<SelectControl

client/utils/express-checkout/index.js

@@ -23,6 +23,12 @@ export const getExpressCheckoutConfig = ( key ) => {
 };
 
 export const getDefaultBorderRadius = () => {
+	// If wcpaySettings isn't loaded on the page where this is called we can
+	// safely return the default value of 4.
+	if ( typeof wcpaySettings === 'undefined' ) {
+		return 4;
+	}
+
 	return parseInt(
 		window?.wcpaySettings?.defaultExpressCheckoutBorderRadius || 4,
 		10