Add global theme support flag (#9276)

changelog/add-global-theme-support-flag

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add WooPay global theme support flag

client/checkout/api/index.js

@@ -465,7 +465,9 @@ export default class WCPayAPI {
 
 			return this.request( buildAjaxURL( wcAjaxUrl, 'init_woopay' ), {
 				_wpnonce: nonce,
-				appearance: getAppearance( appearanceType ),
+				appearance: getConfig( 'isWooPayGlobalThemeSupportEnabled' )
+					? getAppearance( appearanceType )
+					: null,
 				email: userEmail,
 				user_session: woopayUserSession,
 				order_id: getConfig( 'order_id' ),

client/checkout/api/test/index.test.js

@@ -78,10 +78,10 @@ describe( 'WCPayAPI', () => {
 		getConfig.mockImplementation( ( key ) => {
 			const mockProperties = {
 				initWooPayNonce: 'foo',
-				appearance: mockAppearance,
 				order_id: 1,
 				key: 'testkey',
 				billing_email: '[email protected]',
+				isWooPayGlobalThemeSupportEnabled: true,
 			};
 			return mockProperties[ key ];
 		} );
@@ -114,4 +114,25 @@ describe( 'WCPayAPI', () => {
 			foo: 'bar',
 		} );
 	} );
+
+	test( 'WooPay should not support global theme styles', async () => {
+		buildAjaxURL.mockReturnValue( 'https://example.org/' );
+		getConfig.mockImplementation( ( key ) => {
+			const mockProperties = {
+				initWooPayNonce: 'foo',
+				isWooPayGlobalThemeSupportEnabled: false,
+			};
+			return mockProperties[ key ];
+		} );
+
+		const api = new WCPayAPI( {}, request );
+		await api.initWooPay( '[email protected]', 'qwerty123' );
+
+		expect( request ).toHaveBeenLastCalledWith( 'https://example.org/', {
+			_wpnonce: 'foo',
+			appearance: null,
+			email: '[email protected]',
+			user_session: 'qwerty123',
+		} );
+	} );
 } );

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

@@ -109,7 +109,9 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
 					order_id: getConfig( 'order_id' ),
 					key: getConfig( 'key' ),
 					billing_email: getConfig( 'billing_email' ),
-					appearance: getAppearance( appearanceType ),
+					appearance: getConfig( 'isWooPayGlobalThemeSupportEnabled' )
+						? getAppearance( appearanceType )
+						: null,
 				}
 			).then( ( response ) => {
 				if ( response?.data?.session ) {

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

@@ -229,7 +229,11 @@ export const WoopayExpressCheckoutButton = ( {
 					}
 					WooPayFirstPartyAuth.getWooPaySessionFromMerchant( {
 						_ajax_nonce: getConfig( 'woopaySessionNonce' ),
-						appearance: getAppearance( appearanceType ),
+						appearance: getConfig(
+							'isWooPayGlobalThemeSupportEnabled'
+						)
+							? getAppearance( appearanceType )
+							: null,
 					} )
 						.then( async ( response ) => {
 							if (
@@ -273,7 +277,9 @@ export const WoopayExpressCheckoutButton = ( {
 					order_id: getConfig( 'order_id' ),
 					key: getConfig( 'key' ),
 					billing_email: getConfig( 'billing_email' ),
-					appearance: getAppearance( appearanceType ),
+					appearance: getConfig( 'isWooPayGlobalThemeSupportEnabled' )
+						? getAppearance( appearanceType )
+						: null,
 				} )
 					.then( async ( response ) => {
 						if ( response?.blog_id && response?.data?.session ) {

client/data/settings/actions.js

@@ -258,6 +258,12 @@ export function updateIsWooPayEnabled( isEnabled ) {
 	return updateSettingsValues( { is_woopay_enabled: isEnabled } );
 }
 
+export function updateIsWooPayGlobalThemeSupportEnabled( isEnabled ) {
+	return updateSettingsValues( {
+		is_woopay_global_theme_support_enabled: isEnabled,
+	} );
+}
+
 export function updateWooPayCustomMessage( message ) {
 	return updateSettingsValues( {
 		woopay_custom_message: message,

client/data/settings/hooks.js

@@ -418,6 +418,21 @@ export const useWooPayEnabledSettings = () => {
 	return [ isWooPayEnabled, updateIsWooPayEnabled ];
 };
 
+export const useWooPayGlobalThemeSupportEnabledSettings = () => {
+	const { updateIsWooPayGlobalThemeSupportEnabled } = useDispatch(
+		STORE_NAME
+	);
+
+	const isWooPayGlobalThemeSupportEnabled = useSelect( ( select ) =>
+		select( STORE_NAME ).getIsWooPayGlobalThemeSupportEnabled()
+	);
+
+	return [
+		isWooPayGlobalThemeSupportEnabled,
+		updateIsWooPayGlobalThemeSupportEnabled,
+	];
+};
+
 export const useWooPayCustomMessage = () => {
 	const { updateWooPayCustomMessage } = useDispatch( STORE_NAME );
 

client/data/settings/selectors.js

@@ -223,6 +223,10 @@ export const getIsWooPayEnabled = ( state ) => {
 	return getSettings( state ).is_woopay_enabled || false;
 };
 
+export const getIsWooPayGlobalThemeSupportEnabled = ( state ) => {
+	return getSettings( state ).is_woopay_global_theme_support_enabled || false;
+};
+
 export const getWooPayCustomMessage = ( state ) => {
 	return getSettings( state ).woopay_custom_message || '';
 };

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

@@ -7,6 +7,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalNumberControl as NumberControl,
+	CheckboxControl,
 	SelectControl,
 	RadioControl,
 	RangeControl,
@@ -31,6 +32,7 @@ import {
 	usePaymentRequestButtonBorderRadius,
 	usePaymentRequestEnabledSettings,
 	useWooPayEnabledSettings,
+	useWooPayGlobalThemeSupportEnabledSettings,
 } from 'wcpay/data';
 
 const makeButtonSizeText = ( string ) =>
@@ -165,6 +167,11 @@ const GeneralPaymentRequestButtonSettings = ( { type } ) => {
 		isPaymentRequestEnabled &&
 		isWooPayFeatureFlagEnabled;
 
+	const [
+		isWooPayGlobalThemeSupportEnabled,
+		updateIsWooPayGlobalThemeSupportEnabled,
+	] = useWooPayGlobalThemeSupportEnabledSettings();
+
 	return (
 		<CardBody>
 			{ showWarning && (
@@ -260,6 +267,30 @@ const GeneralPaymentRequestButtonSettings = ( { type } ) => {
 					</p>
 				</>
 			) }
+			{ wcpaySettings.isWooPayGlobalThemeSupportEligible &&
+				type === 'woopay' && (
+					<>
+						<h4>
+							{ __(
+								'WooPay Global Theme Support',
+								'woocommerce-payments'
+							) }
+						</h4>
+						<div className="test">
+							<CheckboxControl
+								disabled={ ! isWooPayEnabled }
+								checked={ isWooPayGlobalThemeSupportEnabled }
+								onChange={
+									updateIsWooPayGlobalThemeSupportEnabled
+								}
+								label={ __(
+									'Enable WooPay Global Theme Support',
+									'woocommerce-payments'
+								) }
+							/>
+						</div>
+					</>
+				) }
 			<h4>{ __( 'Preview', 'woocommerce-payments' ) }</h4>
 			<div className="payment-method-settings__option-help-text">
 				{ __(

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

@@ -27,6 +27,9 @@ jest.mock( '../../../data', () => ( {
 	usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'small' ] ),
 	usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
 	usePaymentRequestButtonBorderRadius: jest.fn().mockReturnValue( [ 4 ] ),
+	useWooPayGlobalThemeSupportEnabledSettings: jest
+		.fn()
+		.mockReturnValue( [ false, jest.fn() ] ),
 	useWooPayLocations: jest
 		.fn()
 		.mockReturnValue( [ [ true, true, true ], jest.fn() ] ),

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

@@ -31,6 +31,9 @@ jest.mock( '../../../data', () => ( {
 	useWooPayEnabledSettings: jest.fn(),
 	useExpressCheckoutShowIncompatibilityNotice: jest.fn(),
 	useWooPayShowIncompatibilityNotice: jest.fn().mockReturnValue( false ),
+	useWooPayGlobalThemeSupportEnabledSettings: jest
+		.fn()
+		.mockReturnValue( [ false, jest.fn() ] ),
 } ) );
 
 jest.mock( '../payment-request-button-preview' );

includes/admin/class-wc-payments-admin.php

@@ -898,6 +898,7 @@ private function get_js_settings(): array {
 			'trackingInfo'                       => $this->account->get_tracking_info(),
 			'lifetimeTPV'                        => $this->account->get_lifetime_total_payment_volume(),
 			'defaultExpressCheckoutBorderRadius' => WC_Payments_Express_Checkout_Button_Handler::DEFAULT_BORDER_RADIUS_IN_PX,
+			'isWooPayGlobalThemeSupportEligible' => WC_Payments_Features::is_woopay_global_theme_support_eligible(),
 		];
 
 		return apply_filters( 'wcpay_js_settings', $this->wcpay_js_settings );