Add feature flag for the dynamic Google/Apple pay button and setttings on the admin

changelog/add-feature-flag-for-incremental-work-dynamic-checkout-place-order

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add new feature flag for the dynamic checkout place order button, and new option on payment settings.

client/data/settings/__tests__/actions.test.js

@@ -7,7 +7,11 @@ import { apiFetch } from '@wordpress/data-controls';
 /**
  * Internal dependencies
  */
-import { saveSettings, updateIsSavingSettings } from '../actions';
+import {
+	saveSettings,
+	updateIsSavingSettings,
+	updateIsAppleGooglePayInPaymentMethodsOptionsEnabled,
+} from '../actions';
 
 jest.mock( '@wordpress/data' );
 jest.mock( '@wordpress/data-controls' );
@@ -160,4 +164,32 @@ describe( 'Settings actions tests', () => {
 			);
 		} );
 	} );
+
+	describe( 'updateIsAppleGooglePayInPaymentMethodsOptionsEnabled()', () => {
+		test( 'returns action with correct payload for enabled state', () => {
+			const action = updateIsAppleGooglePayInPaymentMethodsOptionsEnabled(
+				true
+			);
+
+			expect( action ).toEqual( {
+				type: 'SET_SETTINGS_VALUES',
+				payload: {
+					is_apple_google_pay_in_payment_methods_options_enabled: true,
+				},
+			} );
+		} );
+
+		test( 'returns action with correct payload for disabled state', () => {
+			const action = updateIsAppleGooglePayInPaymentMethodsOptionsEnabled(
+				false
+			);
+
+			expect( action ).toEqual( {
+				type: 'SET_SETTINGS_VALUES',
+				payload: {
+					is_apple_google_pay_in_payment_methods_options_enabled: false,
+				},
+			} );
+		} );
+	} );
 } );

client/data/settings/__tests__/hooks.test.js

@@ -15,6 +15,7 @@ import {
 	useTestMode,
 	usePaymentRequestEnabledSettings,
 	usePaymentRequestLocations,
+	useAppleGooglePayInPaymentMethodsOptionsEnabledSettings,
 	useWooPayEnabledSettings,
 	useWooPayCustomMessage,
 	useWooPayStoreLogo,
@@ -233,6 +234,34 @@ describe( 'Settings hooks tests', () => {
 		} );
 	} );
 
+	describe( 'useAppleGooglePayInPaymentMethodsOptionsEnabledSettings()', () => {
+		test( 'returns Apple Google Pay in payment methods options settings from selector', () => {
+			actions = {
+				updateIsAppleGooglePayInPaymentMethodsOptionsEnabled: jest.fn(),
+			};
+
+			selectors = {
+				getIsAppleGooglePayInPaymentMethodsOptionsEnabled: jest.fn(
+					() => true
+				),
+			};
+
+			const [
+				isAppleGooglePayInPaymentMethodsOptionsEnabled,
+				updateIsAppleGooglePayInPaymentMethodsOptionsEnabled,
+			] = useAppleGooglePayInPaymentMethodsOptionsEnabledSettings();
+
+			updateIsAppleGooglePayInPaymentMethodsOptionsEnabled( false );
+
+			expect( isAppleGooglePayInPaymentMethodsOptionsEnabled ).toEqual(
+				true
+			);
+			expect(
+				actions.updateIsAppleGooglePayInPaymentMethodsOptionsEnabled
+			).toHaveBeenCalledWith( false );
+		} );
+	} );
+
 	describe( 'usePaymentRequestLocations()', () => {
 		test( 'returns and updates payment request locations', () => {
 			const locationsBeforeUpdate = [];

client/data/settings/__tests__/selectors.test.js

@@ -10,6 +10,7 @@ import {
 	isSavingSettings,
 	getPaymentRequestLocations,
 	getIsPaymentRequestEnabled,
+	getIsAppleGooglePayInPaymentMethodsOptionsEnabled,
 	getAccountBusinessSupportEmail,
 	getAccountBusinessSupportPhone,
 	getIsWooPayEnabled,
@@ -179,6 +180,33 @@ describe( 'Settings selectors tests', () => {
 		} );
 	} );
 
+	describe( 'getIsAppleGooglePayInPaymentMethodsOptionsEnabled()', () => {
+		test( 'returns the value of state.settings.data.is_apple_google_pay_in_payment_methods_options_enabled', () => {
+			const state = {
+				settings: {
+					data: {
+						is_apple_google_pay_in_payment_methods_options_enabled: true,
+					},
+				},
+			};
+
+			expect(
+				getIsAppleGooglePayInPaymentMethodsOptionsEnabled( state )
+			).toBeTruthy();
+		} );
+
+		test.each( [
+			[ undefined ],
+			[ {} ],
+			[ { settings: {} } ],
+			[ { settings: { data: {} } } ],
+		] )( 'returns false if missing (tested state: %j)', ( state ) => {
+			expect(
+				getIsAppleGooglePayInPaymentMethodsOptionsEnabled( state )
+			).toBeFalsy();
+		} );
+	} );
+
 	describe( 'getPaymentRequestLocations()', () => {
 		test( 'returns the value of state.settings.data.payment_request_enabled_locations', () => {
 			const state = {

client/data/settings/actions.js

@@ -62,6 +62,14 @@ export function updateIsPaymentRequestEnabled( isEnabled ) {
 	return updateSettingsValues( { is_payment_request_enabled: isEnabled } );
 }
 
+export function updateIsAppleGooglePayInPaymentMethodsOptionsEnabled(
+	isEnabled
+) {
+	return updateSettingsValues( {
+		is_apple_google_pay_in_payment_methods_options_enabled: isEnabled,
+	} );
+}
+
 export function updateEnabledPaymentMethodIds( methodIds ) {
 	return updateSettingsValues( {
 		enabled_payment_method_ids: [ ...methodIds ],

client/data/settings/hooks.js

@@ -368,6 +368,27 @@ export const usePaymentRequestEnabledSettings = () => {
 	return [ isPaymentRequestEnabled, updateIsPaymentRequestEnabled ];
 };
 
+/**
+ * @return {import('wcpay/types/wcpay-data-settings-hooks').GenericSettingsHook<boolean>}
+ */
+export const useAppleGooglePayInPaymentMethodsOptionsEnabledSettings = () => {
+	const {
+		updateIsAppleGooglePayInPaymentMethodsOptionsEnabled,
+	} = useDispatch( STORE_NAME );
+
+	const isAppleGooglePayInPaymentMethodsOptionsEnabled = useSelect(
+		( select ) =>
+			select(
+				STORE_NAME
+			).getIsAppleGooglePayInPaymentMethodsOptionsEnabled()
+	);
+
+	return [
+		isAppleGooglePayInPaymentMethodsOptionsEnabled,
+		updateIsAppleGooglePayInPaymentMethodsOptionsEnabled,
+	];
+};
+
 /**
  * @return {import('wcpay/types/wcpay-data-settings-hooks').GenericSettingsHook<string[]>}
  */

client/data/settings/selectors.js

@@ -121,6 +121,13 @@ export const getIsPaymentRequestEnabled = ( state ) => {
 	return getSettings( state ).is_payment_request_enabled || false;
 };
 
+export const getIsAppleGooglePayInPaymentMethodsOptionsEnabled = ( state ) => {
+	return (
+		getSettings( state )
+			.is_apple_google_pay_in_payment_methods_options_enabled || false
+	);
+};
+
 export const getIsDebugLogEnabled = ( state ) => {
 	return getSettings( state ).is_debug_log_enabled || false;
 };

client/globals.d.ts

@@ -32,6 +32,7 @@ declare global {
 			isDisputeIssuerEvidenceEnabled: boolean;
 			multiCurrency?: boolean;
 			isFRTReviewFeatureActive: boolean;
+			isDynamicCheckoutPlaceOrderButtonEnabled: boolean;
 		};
 		accountFees: Record< string, any >;
 		fraudServices: unknown[];

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

@@ -22,6 +22,9 @@ jest.mock( '../../../data', () => ( {
 	usePaymentRequestLocations: jest
 		.fn()
 		.mockReturnValue( [ [ true, true, true ], jest.fn() ] ),
+	useAppleGooglePayInPaymentMethodsOptionsEnabledSettings: jest
+		.fn()
+		.mockReturnValue( [ false, jest.fn() ] ),
 	useWooPayEnabledSettings: jest.fn().mockReturnValue( [ true, jest.fn() ] ),
 	useWooPayCustomMessage: jest.fn().mockReturnValue( [ 'test', jest.fn() ] ),
 	useWooPayStoreLogo: jest.fn().mockReturnValue( [ 'test', jest.fn() ] ),
@@ -108,6 +111,7 @@ describe( 'ExpressCheckoutSettings', () => {
 			restUrl: 'http://example.com/wp-json/',
 			featureFlags: {
 				woopayExpressCheckout: true,
+				isDynamicCheckoutPlaceOrderButtonEnabled: true,
 			},
 		};
 	} );

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

@@ -18,6 +18,7 @@ import {
 	usePaymentRequestButtonSize,
 	usePaymentRequestButtonTheme,
 	useWooPayEnabledSettings,
+	useAppleGooglePayInPaymentMethodsOptionsEnabledSettings,
 } from '../../../data';
 import WCPaySettingsContext from 'wcpay/settings/wcpay-settings-context';
 
@@ -31,6 +32,7 @@ jest.mock( '../../../data', () => ( {
 	usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
 	useWooPayEnabledSettings: jest.fn(),
 	useWooPayShowIncompatibilityNotice: jest.fn().mockReturnValue( false ),
+	useAppleGooglePayInPaymentMethodsOptionsEnabledSettings: jest.fn(),
 } ) );
 
 jest.mock( '../payment-request-button-preview' );
@@ -51,6 +53,11 @@ const getMockPaymentRequestEnabledSettings = (
 
 const getMockWooPayEnabledSettings = ( isEnabled ) => [ isEnabled ];
 
+const getMockAppleGooglePayInPaymentMethodsOptionsEnabledSettings = (
+	isEnabled,
+	updateIsAppleGooglePayInPaymentMethodsOptionsEnabledHandler
+) => [ isEnabled, updateIsAppleGooglePayInPaymentMethodsOptionsEnabledHandler ];
+
 const getMockPaymentRequestLocations = (
 	isCheckoutEnabled,
 	isProductPageEnabled,
@@ -102,6 +109,15 @@ const renderWithSettingsProvider = ( ui ) =>
 
 describe( 'PaymentRequestSettings', () => {
 	beforeEach( () => {
+		// Mock the global wcpaySettings
+		global.wcpaySettings = {
+			accountStatus: {},
+			restUrl: 'http://example.com/wp-json/',
+			featureFlags: {
+				isDynamicCheckoutPlaceOrderButtonEnabled: true,
+			},
+		};
+
 		usePaymentRequestEnabledSettings.mockReturnValue(
 			getMockPaymentRequestEnabledSettings( true, jest.fn() )
 		);
@@ -113,6 +129,13 @@ describe( 'PaymentRequestSettings', () => {
 		useWooPayEnabledSettings.mockReturnValue(
 			getMockWooPayEnabledSettings( true )
 		);
+
+		useAppleGooglePayInPaymentMethodsOptionsEnabledSettings.mockReturnValue(
+			getMockAppleGooglePayInPaymentMethodsOptionsEnabledSettings(
+				false,
+				jest.fn()
+			)
+		);
 	} );
 
 	it( 'renders enable settings with defaults', () => {
@@ -121,9 +144,36 @@ describe( 'PaymentRequestSettings', () => {
 		);
 
 		// confirm checkbox groups displayed
-		const [ enableCheckbox ] = screen.queryAllByRole( 'checkbox' );
+		const checkboxes = screen.queryAllByRole( 'checkbox' );
 
-		expect( enableCheckbox ).toBeInTheDocument();
+		expect( checkboxes ).toHaveLength( 5 ); // Apple/Google Pay in payment methods, express buttons, and 3 location checkboxes
+	} );
+
+	it( 'renders Apple Pay / Google Pay in payment methods checkbox when feature flag is enabled', () => {
+		renderWithSettingsProvider(
+			<PaymentRequestSettings section="enable" />
+		);
+
+		expect(
+			screen.getByLabelText(
+				'Enable Apple Pay / Google Pay as options in the payment methods list'
+			)
+		).toBeInTheDocument();
+	} );
+
+	it( 'does not render Apple Pay / Google Pay in payment methods checkbox when feature flag is disabled', () => {
+		// Mock the feature flag as disabled
+		global.wcpaySettings.featureFlags.isDynamicCheckoutPlaceOrderButtonEnabled = false;
+
+		renderWithSettingsProvider(
+			<PaymentRequestSettings section="enable" />
+		);
+
+		expect(
+			screen.queryByLabelText(
+				'Enable Apple Pay / Google Pay as options in the payment methods list'
+			)
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'triggers the hooks when the enable setting is being interacted with', async () => {
@@ -148,12 +198,61 @@ describe( 'PaymentRequestSettings', () => {
 		expect( screen.getByLabelText( 'Show on product page' ) ).toBeChecked();
 		expect( screen.getByLabelText( 'Show on cart page' ) ).toBeChecked();
 
-		await userEvent.click( screen.getByLabelText( /Enable Apple Pay/ ) );
+		await userEvent.click(
+			screen.getByLabelText( /Enable Apple Pay.*express payment buttons/ )
+		);
 		expect( updateIsPaymentRequestEnabledHandler ).toHaveBeenCalledWith(
 			false
 		);
 	} );
 
+	it( 'triggers the Apple Pay / Google Pay in payment methods hook when the checkbox is interacted with', async () => {
+		const updateIsAppleGooglePayInPaymentMethodsOptionsEnabledHandler = jest.fn();
+
+		useAppleGooglePayInPaymentMethodsOptionsEnabledSettings.mockReturnValue(
+			getMockAppleGooglePayInPaymentMethodsOptionsEnabledSettings(
+				true,
+				updateIsAppleGooglePayInPaymentMethodsOptionsEnabledHandler
+			)
+		);
+
+		renderWithSettingsProvider(
+			<PaymentRequestSettings section="enable" />
+		);
+
+		expect(
+			updateIsAppleGooglePayInPaymentMethodsOptionsEnabledHandler
+		).not.toHaveBeenCalled();
+
+		await userEvent.click(
+			screen.getByLabelText(
+				'Enable Apple Pay / Google Pay as options in the payment methods list'
+			)
+		);
+		expect(
+			updateIsAppleGooglePayInPaymentMethodsOptionsEnabledHandler
+		).toHaveBeenCalledWith( false );
+	} );
+
+	it( 'displays the correct checked state for Apple Pay / Google Pay in payment methods checkbox', () => {
+		useAppleGooglePayInPaymentMethodsOptionsEnabledSettings.mockReturnValue(
+			getMockAppleGooglePayInPaymentMethodsOptionsEnabledSettings(
+				true,
+				jest.fn()
+			)
+		);
+
+		renderWithSettingsProvider(
+			<PaymentRequestSettings section="enable" />
+		);
+
+		expect(
+			screen.getByLabelText(
+				'Enable Apple Pay / Google Pay as options in the payment methods list'
+			)
+		).toBeChecked();
+	} );
+
 	it( 'renders general settings with defaults', () => {
 		renderWithSettingsProvider(
 			<PaymentRequestSettings section="general" />