Renaming SPE references to OC (Optimized Checkout) (#4284)

* Smart Checkout design updates

* Fix tests

* Readme and changelog entries

* Renaming SPE references to OC

* Replacing references in tests

* Replacing references on the frontend

* Changelog and readme entries

* Deprecating feature flag methods instead of removing them

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.5.0 - xxxx-xx-xx =
+* Dev - Renames all references to "Smart Checkout" and "Single Payment Element" (and "SPE") to "Optimized Checkout" (and "OC"), following the feature rebranding.
 * Tweak - Updates the "Smart Checkout" setting name to "Optimized Checkout", and the description accordingly.
 * Fix - Checks for the existence of the WC_Stripe_Feature_Flags class before including it during extension initialization.
 * Dev - Implements the new Stripe order class into the new checkout experience files.

client/blocks/upe/index.js

@@ -45,7 +45,7 @@ const methodsToFilter = [
 ];
 
 // Register UPE Elements.
-if ( getBlocksConfiguration()?.isSPEEnabled ) {
+if ( getBlocksConfiguration()?.isOCEnabled ) {
 	registerPaymentMethod(
 		upeElement( PAYMENT_METHOD_CARD, api, paymentMethodsConfig.card )
 	);

client/blocks/upe/upe-deferred-intent-creation/payment-elements.js

@@ -135,7 +135,7 @@ const PaymentElements = ( {
 			},
 		};
 
-		if ( getBlocksConfiguration()?.isSPEEnabled ) {
+		if ( getBlocksConfiguration()?.isOCEnabled ) {
 			options = {
 				...options,
 				...{

client/blocks/upe/upe-deferred-intent-creation/payment-processor.js

@@ -26,9 +26,9 @@ import {
 	PAYMENT_METHOD_BLIK,
 	PAYMENT_METHOD_CASHAPP,
 } from 'wcstripe/stripe-utils/constants';
-import { handleDisplayOfPaymentInstructions } from 'wcstripe/smart-checkout/handle-display-of-payment-instructions';
-import { applyStyles } from 'wcstripe/smart-checkout/apply-styles';
-import { handleDisplayOfSavingCheckbox } from 'wcstripe/smart-checkout/handle-display-of-saving-checkbox';
+import { handleDisplayOfPaymentInstructions } from 'wcstripe/optimized-checkout/handle-display-of-payment-instructions';
+import { applyStyles } from 'wcstripe/optimized-checkout/apply-styles';
+import { handleDisplayOfSavingCheckbox } from 'wcstripe/optimized-checkout/handle-display-of-saving-checkbox';
 
 const noop = () => null;
 
@@ -82,7 +82,7 @@ const getStripeElementOptions = () => {
 		}
 	}
 
-	if ( getBlocksConfiguration()?.isSPEEnabled ) {
+	if ( getBlocksConfiguration()?.isOCEnabled ) {
 		options = {
 			...options,
 			layout: {
@@ -334,7 +334,7 @@ const PaymentProcessor = ( {
 			removeCashAppLimitNotice();
 		}
 		// Apply single payment element styles if the selected payment method is card and SPE is enabled.
-		if ( getBlocksConfiguration()?.isSPEEnabled ) {
+		if ( getBlocksConfiguration()?.isOCEnabled ) {
 			applyStyles();
 		}
 	}, [ selectedPaymentMethodType ] );
@@ -359,7 +359,7 @@ const PaymentProcessor = ( {
 	const onSelectedPaymentMethodChange = ( { value, complete } ) => {
 		setSelectedPaymentMethodType( value.type );
 		setIsPaymentElementComplete( complete );
-		if ( getBlocksConfiguration()?.isSPEEnabled ) {
+		if ( getBlocksConfiguration()?.isOCEnabled ) {
 			handleDisplayOfPaymentInstructions( value.type );
 			handleDisplayOfSavingCheckbox( value.type );
 		}

client/blocks/upe/upe-element.js

@@ -101,7 +101,7 @@ export const upeElement = ( paymentMethod, api, upeConfig ) => {
  * @return {JSX.Element|null} The icon element.
  */
 const getUpeElementIcon = ( paymentMethod ) => {
-	if ( getBlocksConfiguration()?.isSPEEnabled ) {
+	if ( getBlocksConfiguration()?.isOCEnabled ) {
 		return null;
 	}
 

client/classic/upe/payment-processing.js

@@ -26,8 +26,8 @@ import {
 	PAYMENT_METHOD_MULTIBANCO,
 	PAYMENT_METHOD_WECHAT_PAY,
 } from 'wcstripe/stripe-utils/constants';
-import { handleDisplayOfPaymentInstructions } from 'wcstripe/smart-checkout/handle-display-of-payment-instructions';
-import { handleDisplayOfSavingCheckbox } from 'wcstripe/smart-checkout/handle-display-of-saving-checkbox';
+import { handleDisplayOfPaymentInstructions } from 'wcstripe/optimized-checkout/handle-display-of-payment-instructions';
+import { handleDisplayOfSavingCheckbox } from 'wcstripe/optimized-checkout/handle-display-of-saving-checkbox';
 
 const gatewayUPEComponents = {};
 const paymentMethodsConfig = getStripeServerData()?.paymentMethodsConfig;
@@ -143,7 +143,7 @@ async function createStripePaymentElement( api, paymentMethodType ) {
 			amount,
 		};
 
-		if ( getStripeServerData()?.isSPEEnabled ) {
+		if ( getStripeServerData()?.isOCEnabled ) {
 			options = {
 				...options,
 				paymentMethodConfiguration: getStripeServerData()
@@ -176,8 +176,8 @@ async function createStripePaymentElement( api, paymentMethodType ) {
 		},
 	};
 
-	// Set the layout to accordion if SPE is enabled.
-	if ( getStripeServerData()?.isSPEEnabled ) {
+	// Set the layout to accordion if OC is enabled.
+	if ( getStripeServerData()?.isOCEnabled ) {
 		paymentElementOptions = {
 			...paymentElementOptions,
 			layout: {
@@ -343,9 +343,9 @@ export async function mountStripePaymentElement( api, domElement ) {
 		// Setting the flag to true to prevent the form from being submitted.
 		gatewayUPEComponents[ paymentMethodType ].hasLoadError = true;
 	} );
-	if ( getStripeServerData()?.isSPEEnabled ) {
+	if ( getStripeServerData()?.isOCEnabled ) {
 		upeElement.on( 'change', ( { value } ) => {
-			// If the SPE is enabled, we need to handle the display of the saving checkbox.
+			// If the OC is enabled, we need to handle the display of the saving checkbox.
 			handleDisplayOfPaymentInstructions( value.type );
 
 			// Bind the create account checkbox to the save card info container display function.

client/data/settings/__tests__/hooks.js

@@ -22,7 +22,7 @@ import {
 	useAmazonPayLocations,
 	useAmazonPayButtonSize,
 	useSepaTokensForOtherMethods,
-	useIsSPEEnabled,
+	useIsOCEnabled,
 } from '../hooks';
 import { STORE_NAME } from '../../constants';
 import {
@@ -335,9 +335,9 @@ describe( 'Settings hooks tests', () => {
 			testedValue: [ 'checkout', 'cart' ],
 			fallbackValue: [],
 		},
-		useIsSPEEnabledSettings: {
-			hook: useIsSPEEnabled,
-			storeKey: 'is_spe_enabled',
+		useIsOCEnabledSettings: {
+			hook: useIsOCEnabled,
+			storeKey: 'is_oc_enabled',
 			testedValue: true,
 			fallbackValue: false,
 		},

client/data/settings/hooks.js

@@ -206,8 +206,8 @@ export const useIsShortAccountStatementEnabled = makeSettingsHook(
 );
 export const useDebugLog = makeSettingsHook( 'is_debug_log_enabled' );
 export const useIsUpeEnabled = makeSettingsHook( 'is_upe_enabled' );
-export const useIsSPEEnabled = makeSettingsHook( 'is_spe_enabled' );
-export const useSPETitle = makeSettingsHook( 'spe_title', 'Stripe' );
+export const useIsOCEnabled = makeSettingsHook( 'is_oc_enabled' );
+export const useOCTitle = makeSettingsHook( 'oc_title', 'Stripe' );
 
 export const useIndividualPaymentMethodSettings = makeSettingsHook(
 	'individual_payment_method_settings',

client/smart-checkout/__tests__/apply-styles.test.js renamed to client/optimized-checkout/__tests__/apply-styles.test.js

@@ -1,4 +1,4 @@
-import { applyStyles } from 'wcstripe/smart-checkout/apply-styles';
+import { applyStyles } from 'wcstripe/optimized-checkout/apply-styles';
 
 describe( 'applyStyles', () => {
 	it( 'Correctly apply the required styles to HTML elements', () => {
@@ -24,14 +24,14 @@ describe( 'applyStyles', () => {
 			'radio-control-wc-payment-method-options-stripe__content'
 		);
 		expect(
-			stripeContent.classList.contains( 'single-payment-element' )
+			stripeContent.classList.contains( 'optimized-checkout-element' )
 		).toBe( true );
 
 		const stripeLabel = document.getElementById(
 			'radio-control-wc-payment-method-options-stripe__label'
 		);
 		expect(
-			stripeLabel.classList.contains( 'single-payment-element' )
+			stripeLabel.classList.contains( 'optimized-checkout-element' )
 		).toBe( true );
 
 		const stripeIframe = document.querySelector(

client/smart-checkout/__tests__/handle-display-of-payment-instructions.test.js renamed to client/optimized-checkout/__tests__/handle-display-of-payment-instructions.test.js

@@ -1,4 +1,4 @@
-import { handleDisplayOfPaymentInstructions } from 'wcstripe/smart-checkout/handle-display-of-payment-instructions';
+import { handleDisplayOfPaymentInstructions } from 'wcstripe/optimized-checkout/handle-display-of-payment-instructions';
 
 describe( 'handleDisplayOfPaymentInstructions', () => {
 	document.body.innerHTML = `