diff --git a/changelog/add-limit-woopay-themeing-to-shortcode-checkout b/changelog/add-limit-woopay-themeing-to-shortcode-checkout new file mode 100644 index 00000000000..4c089593b1f --- /dev/null +++ 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 index c5ccaceed96..1ecd86ca031 100644 --- 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 index 19d4ff54fe7..296b40aed17 100644 --- 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 index 47bf07d77fe..72e2783d3ac 100644 --- 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 index 844ff25f010..5362542eed3 100644 --- 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 index f86d3973a7a..2c1d890b478 100644 --- 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'; +};