[ECE] Add button radius support (#9010)

changelog/add-ece-button-radius-support

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add support for configuring button radius when ECE is enabled

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

@@ -46,7 +46,14 @@ export const WoopayExpressCheckoutButton = ( {
 	const onClickCallbackRef = useRef( null );
 	const buttonRef = useRef( null );
 	const isLoadingRef = useRef( false );
-	const { type: buttonType, height, size, theme, context } = buttonSettings;
+	const {
+		type: buttonType,
+		height,
+		size,
+		theme,
+		context,
+		radius: borderRadius,
+	} = buttonSettings;
 	const [ isLoading, setIsLoading ] = useState( false );
 	const [ buttonWidthType, setButtonWidthType ] = useState(
 		buttonWidthTypes.wide
@@ -344,7 +351,10 @@ export const WoopayExpressCheckoutButton = ( {
 			data-size={ size }
 			data-theme={ theme }
 			data-width-type={ buttonWidthType }
-			style={ { height: `${ height }px` } }
+			style={ {
+				height: `${ height }px`,
+				borderRadius: `${ borderRadius }px`,
+			} }
 			disabled={ isLoading }
 			type="button"
 		>

client/checkout/woopay/style.scss

@@ -141,6 +141,7 @@
 	justify-content: center;
 	white-space: nowrap;
 	text-transform: none;
+	list-style-type: none;
 
 	&:not( :disabled ):hover {
 		background: #e0e0e0 !important;

client/data/settings/actions.js

@@ -40,6 +40,12 @@ export function updatePaymentRequestButtonTheme( theme ) {
 	return updateSettingsValues( { payment_request_button_theme: theme } );
 }
 
+export function updatePaymentRequestButtonBorderRadius( radius ) {
+	return updateSettingsValues( {
+		payment_request_button_border_radius: radius,
+	} );
+}
+
 export function updateSettings( data ) {
 	return {
 		type: ACTION_TYPES.SET_SETTINGS,

client/data/settings/hooks.js

@@ -389,6 +389,21 @@ export const usePaymentRequestButtonTheme = () => {
 	return [ paymentRequestButtonTheme, updatePaymentRequestButtonTheme ];
 };
 
+export const usePaymentRequestButtonBorderRadius = () => {
+	const { updatePaymentRequestButtonBorderRadius } = useDispatch(
+		STORE_NAME
+	);
+
+	const paymentRequestButtonBorderRadius = useSelect( ( select ) =>
+		select( STORE_NAME ).getPaymentRequestButtonBorderRadius()
+	);
+
+	return [
+		paymentRequestButtonBorderRadius,
+		updatePaymentRequestButtonBorderRadius,
+	];
+};
+
 export const useGetSavingError = () => {
 	return useSelect( ( select ) => select( STORE_NAME ).getSavingError(), [] );
 };

client/data/settings/selectors.js

@@ -4,6 +4,7 @@
  * Internal dependencies
  */
 import { ProtectionLevel } from '../../settings/fraud-protection/advanced-settings/constants';
+import { getDefaultBorderRadius } from 'wcpay/utils/express-checkout';
 
 const EMPTY_OBJ = {};
 const EMPTY_ARR = [];
@@ -184,6 +185,13 @@ export const getPaymentRequestButtonTheme = ( state ) => {
 	return getSettings( state ).payment_request_button_theme || '';
 };
 
+export const getPaymentRequestButtonBorderRadius = ( state ) => {
+	return (
+		getSettings( state )?.payment_request_button_border_radius ||
+		getDefaultBorderRadius()
+	);
+};
+
 export const getIsSavedCardsEnabled = ( state ) => {
 	return getSettings( state ).is_saved_cards_enabled || false;
 };

client/express-checkout/blocks/hooks/use-express-checkout.js

@@ -3,6 +3,7 @@
  */
 import { useCallback } from '@wordpress/element';
 import { useStripe, useElements } from '@stripe/react-stripe-js';
+
 /**
  * Internal dependencies
  */

client/express-checkout/utils/index.ts

@@ -1,4 +1,8 @@
+/**
+ * Internal dependencies
+ */
 export * from './normalize';
+import { getDefaultBorderRadius } from 'wcpay/utils/express-checkout';
 
 /**
  * An /incomplete/ representation of the data that is loaded into the frontend for the Express Checkout.
@@ -15,6 +19,7 @@ export interface WCPayExpressCheckoutParams {
 		height: string;
 		locale: string;
 		branded_type: string;
+		radius: number;
 	};
 
 	/**
@@ -116,8 +121,14 @@ export const getErrorMessageFromNotice = ( notice: string ) => {
  * Currently only configures border radius for the buttons.
  */
 export const getExpressCheckoutButtonAppearance = () => {
+	const buttonSettings = getExpressCheckoutData( 'button' );
+
 	return {
-		// variables: { borderRadius: '99999px' },
+		variables: {
+			borderRadius: `${
+				buttonSettings?.radius ?? getDefaultBorderRadius()
+			}px`,
+		},
 	};
 };
 

client/globals.d.ts

@@ -132,6 +132,7 @@ declare global {
 		};
 		isOverviewSurveySubmitted: boolean;
 		lifetimeTPV: number;
+		defaultExpressCheckoutBorderRadius: string;
 	};
 
 	const wc: {

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

@@ -4,7 +4,14 @@
  */
 import React, { useMemo } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
-import { SelectControl, RadioControl, Notice } from '@wordpress/components';
+import {
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalNumberControl as NumberControl,
+	SelectControl,
+	RadioControl,
+	Notice,
+	RangeControl,
+} from '@wordpress/components';
 import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import { useContext } from '@wordpress/element';
@@ -22,6 +29,7 @@ import {
 	usePaymentRequestButtonType,
 	usePaymentRequestButtonSize,
 	usePaymentRequestButtonTheme,
+	usePaymentRequestButtonBorderRadius,
 	usePaymentRequestEnabledSettings,
 	useWooPayEnabledSettings,
 } from 'wcpay/data';
@@ -130,10 +138,14 @@ const GeneralPaymentRequestButtonSettings = ( { type } ) => {
 	const [ buttonType, setButtonType ] = usePaymentRequestButtonType();
 	const [ size, setSize ] = usePaymentRequestButtonSize();
 	const [ theme, setTheme ] = usePaymentRequestButtonTheme();
+	const [ radius, setRadius ] = usePaymentRequestButtonBorderRadius();
 	const [ isWooPayEnabled ] = useWooPayEnabledSettings();
 	const [ isPaymentRequestEnabled ] = usePaymentRequestEnabledSettings();
 	const {
-		featureFlags: { woopay: isWooPayFeatureFlagEnabled },
+		featureFlags: {
+			woopay: isWooPayFeatureFlagEnabled,
+			isStripeEceEnabled: isEceEnabled,
+		},
 	} = useContext( WCPaySettingsContext );
 
 	const stripePromise = useMemo( () => {
@@ -210,6 +222,58 @@ const GeneralPaymentRequestButtonSettings = ( { type } ) => {
 				options={ buttonThemeOptions }
 				onChange={ setTheme }
 			/>
+			{ isEceEnabled && (
+				<>
+					<h4>{ __( 'Border radius', 'woocommerce-payments' ) }</h4>
+					<div className="payment-method-settings__border-radius">
+						<NumberControl
+							label={ __(
+								/* translators: Label for a number input, hidden from view. Intended for accessibility. */
+								'Border radius, number input',
+								'woocommerce-payments'
+							) }
+							hideLabelFromVision
+							isPressEnterToChange={ true }
+							value={ radius }
+							max={ 30 }
+							min={ 0 }
+							hideHTMLArrows
+							onChange={ ( value ) => {
+								if ( typeof value === 'string' ) {
+									setRadius( parseInt( value, 10 ) );
+								} else {
+									setRadius( value );
+								}
+							} }
+							suffix={
+								<div className="payment-method-settings__border-radius__number-control__suffix">
+									px
+								</div>
+							}
+						/>
+						<RangeControl
+							label={ __(
+								/* translators: Label for an input slider, hidden from view. Intended for accessibility. */
+								'Border radius, slider',
+								'woocommerce-payments'
+							) }
+							hideLabelFromVision
+							className="payment-method-settings__border-radius__slider"
+							value={ radius }
+							max={ 30 }
+							min={ 0 }
+							withInputField={ false }
+							onChange={ setRadius }
+						/>
+					</div>
+					<p className="payment-method-settings__option-help-text">
+						{ __(
+							'Controls the corner roundness of express payment buttons.',
+							'woocommerce-payments'
+						) }
+					</p>
+				</>
+			) }
 			<h4>{ __( 'Preview', 'woocommerce-payments' ) }</h4>
 			<div className="payment-method-settings__option-help-text">
 				{ __(

client/settings/express-checkout-settings/index.scss

@@ -335,6 +335,22 @@
 			background: #f0f0f0;
 		}
 	}
+
+	&__border-radius {
+		display: flex;
+		gap: $gap;
+		margin-block-end: 0;
+
+		&__slider {
+			flex-grow: 1;
+		}
+
+		&__number-control {
+			&__suffix {
+				padding-inline: $gap-smaller;
+			}
+		}
+	}
 }
 
 .components-notice {

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

@@ -20,6 +20,7 @@ import {
 	usePaymentRequestButtonSize,
 	usePaymentRequestButtonTheme,
 	usePaymentRequestButtonType,
+	usePaymentRequestButtonBorderRadius,
 	usePaymentRequestEnabledSettings,
 	useWooPayEnabledSettings,
 } from '../../data';
@@ -74,6 +75,7 @@ const PaymentRequestButtonPreview = () => {
 	const [ buttonType ] = usePaymentRequestButtonType();
 	const [ size ] = usePaymentRequestButtonSize();
 	const [ theme ] = usePaymentRequestButtonTheme();
+	const [ radius ] = usePaymentRequestButtonBorderRadius();
 	const [ isWooPayEnabled ] = useWooPayEnabledSettings();
 	const [ isPaymentRequestEnabled ] = usePaymentRequestEnabledSettings();
 
@@ -129,6 +131,7 @@ const PaymentRequestButtonPreview = () => {
 									buttonSizeToPxMap.medium
 								}px`,
 								size,
+								radius,
 							} }
 						/>
 					) }

client/settings/express-checkout-settings/test/index.js

@@ -26,6 +26,7 @@ jest.mock( '../../../data', () => ( {
 	usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'buy' ] ),
 	usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'small' ] ),
 	usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
+	usePaymentRequestButtonBorderRadius: jest.fn().mockReturnValue( [ 4 ] ),
 	useWooPayLocations: jest
 		.fn()
 		.mockReturnValue( [ [ true, true, true ], jest.fn() ] ),

client/settings/express-checkout-settings/test/payment-request-settings.test.js

@@ -25,6 +25,7 @@ jest.mock( '../../../data', () => ( {
 	usePaymentRequestEnabledSettings: jest.fn(),
 	usePaymentRequestLocations: jest.fn(),
 	usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'buy' ] ),
+	usePaymentRequestButtonBorderRadius: jest.fn().mockReturnValue( [ 4 ] ),
 	usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'small' ] ),
 	usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
 	useWooPayEnabledSettings: jest.fn(),

client/utils/express-checkout/index.js

@@ -22,6 +22,13 @@ export const getExpressCheckoutConfig = ( key ) => {
 	return null;
 };
 
+export const getDefaultBorderRadius = () => {
+	return parseInt(
+		wcpaySettings?.defaultExpressCheckoutBorderRadius ?? 4,
+		10
+	);
+};
+
 /**
  * Get WC AJAX endpoint URL for express checkout endpoints.
  *