Limit WooPay theme-ing availability to shortcode entrypoint (#9867)

Automattic · Dec 4, 2024 · 1fc7a8a · 1fc7a8a
1 parent 0d80007
commit 1fc7a8a
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 47 deletions.
diff --git a/changelog/add-limit-woopay-themeing-to-shortcode-checkout b/changelog/add-limit-woopay-themeing-to-shortcode-checkout
@@ -0,0 +1,5 @@
+Significance: patch
+Type: add
+Comment: Updates the availability criteria of WooPay Global theme-ing feature. This feature is unreleased and behind a feature flag.
+
+
diff --git a/client/checkout/woopay/email-input-iframe.js b/client/checkout/woopay/email-input-iframe.js
@@ -13,6 +13,7 @@ import {
 	appendRedirectionParams,
 	shouldSkipWooPay,
 	deleteSkipWooPayCookie,
+	isSupportedThemeEntrypoint,
 } from './utils';
 import { getAppearanceType } from '../utils';
 
@@ -180,6 +181,11 @@ export const handleWooPayEmailInput = async (
 		// Set the initial value.
 		iframeHeaderValue = true;
 		const appearanceType = getAppearanceType();
+		const appearance =
+			isSupportedThemeEntrypoint( appearanceType ) &&
+			getConfig( 'isWooPayGlobalThemeSupportEnabled' )
+				? getAppearance( appearanceType, true )
+				: null;
 
 		if ( getConfig( 'isWoopayFirstPartyAuthEnabled' ) ) {
 			request(
@@ -189,9 +195,7 @@ export const handleWooPayEmailInput = async (
 					order_id: getConfig( 'order_id' ),
 					key: getConfig( 'key' ),
 					billing_email: getConfig( 'billing_email' ),
-					appearance: getConfig( 'isWooPayGlobalThemeSupportEnabled' )
-						? getAppearance( appearanceType, true )
-						: null,
+					appearance: appearance,
 				}
 			).then( ( response ) => {
 				if ( response?.data?.session ) {

diff --git a/client/checkout/woopay/express-button/express-checkout-iframe.js b/client/checkout/woopay/express-button/express-checkout-iframe.js
@@ -14,6 +14,7 @@ import {
 	getTargetElement,
 	validateEmail,
 	appendRedirectionParams,
+	isSupportedThemeEntrypoint,
 } from '../utils';
 import { getTracksIdentity } from 'tracks';
 import { getAppearance } from 'wcpay/checkout/upe-styles';
@@ -100,6 +101,11 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
 		// Set the initial value.
 		iframeHeaderValue = true;
 		const appearanceType = getAppearanceType();
+		const appearance =
+			isSupportedThemeEntrypoint( appearanceType ) &&
+			getConfig( 'isWooPayGlobalThemeSupportEnabled' )
+				? getAppearance( appearanceType, true )
+				: null;
 
 		if ( getConfig( 'isWoopayFirstPartyAuthEnabled' ) ) {
 			request(
@@ -109,9 +115,7 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
 					order_id: getConfig( 'order_id' ),
 					key: getConfig( 'key' ),
 					billing_email: getConfig( 'billing_email' ),
-					appearance: getConfig( 'isWooPayGlobalThemeSupportEnabled' )
-						? getAppearance( appearanceType, true )
-						: null,
+					appearance: appearance,
 				}
 			).then( ( response ) => {
 				if ( response?.data?.session ) {

diff --git a/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js b/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js
@@ -70,37 +70,6 @@ describe( 'WoopayExpressCheckoutButton', () => {
 	const mockRequest = jest.fn().mockResolvedValue( true );
 	const mockAddToCart = jest.fn().mockResolvedValue( true );
 	const api = new WCPayAPI( {}, mockRequest );
-	const mockAppearance = {
-		rules: {
-			'.Block': {},
-			'.Input': {},
-			'.Input--invalid': {},
-			'.Label': {},
-			'.Tab': {},
-			'.Tab--selected': {},
-			'.Tab:hover': {},
-			'.TabIcon--selected': {
-				color: undefined,
-			},
-			'.TabIcon:hover': {
-				color: undefined,
-			},
-			'.Text': {},
-			'.Text--redirect': {},
-			'.Heading': {},
-			'.Button': {},
-			'.Container': {},
-			'.Link': {},
-		},
-		theme: 'stripe',
-		variables: {
-			colorBackground: '#ffffff',
-			colorText: undefined,
-			fontFamily: undefined,
-			fontSizeBase: undefined,
-		},
-		labels: 'above',
-	};
 
 	beforeEach( () => {
 		expressCheckoutIframe.mockImplementation( () => jest.fn() );
@@ -198,7 +167,7 @@ describe( 'WoopayExpressCheckoutButton', () => {
 				case 'order_id':
 					return 1;
 				case 'appearance':
-					return mockAppearance;
+					return null;
 				default:
 					return 'foo';
 			}
@@ -224,7 +193,7 @@ describe( 'WoopayExpressCheckoutButton', () => {
 				order_id: 1,
 				key: 'testkey',
 				billing_email: 'test@test.com',
-				appearance: mockAppearance,
+				appearance: null,
 			} );
 			expect( expressCheckoutIframe ).not.toHaveBeenCalled();
 		} );

diff --git a/client/checkout/woopay/express-button/woopay-express-checkout-button.js b/client/checkout/woopay/express-button/woopay-express-checkout-button.js
@@ -19,6 +19,7 @@ import interpolateComponents from '@automattic/interpolate-components';
 import {
 	appendRedirectionParams,
 	deleteSkipWooPayCookie,
+	isSupportedThemeEntrypoint,
 } from 'wcpay/checkout/woopay/utils';
 import WooPayFirstPartyAuth from 'wcpay/checkout/woopay/express-button/woopay-first-party-auth';
 import { getAppearance } from 'wcpay/checkout/upe-styles';
@@ -221,6 +222,11 @@ export const WoopayExpressCheckoutButton = ( {
 			setIsLoading( true );
 
 			const appearanceType = getAppearanceType();
+			const appearance =
+				isSupportedThemeEntrypoint( appearanceType ) &&
+				getConfig( 'isWooPayGlobalThemeSupportEnabled' )
+					? getAppearance( appearanceType, true )
+					: null;
 
 			if ( isProductPage ) {
 				const productData = getProductDataRef.current();
@@ -242,11 +248,7 @@ export const WoopayExpressCheckoutButton = ( {
 					}
 					WooPayFirstPartyAuth.getWooPaySessionFromMerchant( {
 						_ajax_nonce: getConfig( 'woopaySessionNonce' ),
-						appearance: getConfig(
-							'isWooPayGlobalThemeSupportEnabled'
-						)
-							? getAppearance( appearanceType, true )
-							: null,
+						appearance: appearance,
 					} )
 						.then( async ( response ) => {
 							if (
@@ -290,9 +292,7 @@ export const WoopayExpressCheckoutButton = ( {
 					order_id: getConfig( 'order_id' ),
 					key: getConfig( 'key' ),
 					billing_email: getConfig( 'billing_email' ),
-					appearance: getConfig( 'isWooPayGlobalThemeSupportEnabled' )
-						? getAppearance( appearanceType, true )
-						: null,
+					appearance: appearance,
 				} )
 					.then( async ( response ) => {
 						if ( response?.blog_id && response?.data?.session ) {

diff --git a/client/checkout/woopay/utils.js b/client/checkout/woopay/utils.js
@@ -94,3 +94,13 @@ export const deleteSkipWooPayCookie = () => {
 	document.cookie =
 		'skip_woopay=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
 };
+
+/**
+ * Determine Global theming availability for the entrypoint based on the appearanceType.
+ *
+ * @param {string} appearanceType entrypoint identifier.
+ * @return {boolean} True if Global theming should be enabled for the entrypoint.
+ */
+export const isSupportedThemeEntrypoint = ( appearanceType ) => {
+	return appearanceType === 'woopay_shortcode_checkout';
+};