Renaming all ECE-related frontend hooks

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 10.3.0 - xxxx-xx-xx =
+* Dev - Renames all express checkout related frontend hooks
 * Dev - Removes deprecated legacy checkout settings retrieval methods
 * Dev - Removes all references to the UPE-enabled feature flag
 * Dev - Removes deprecated promotional banners (related to legacy checkout)

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

@@ -4,11 +4,11 @@ import {
 	useGetAvailablePaymentMethodIds,
 	useSettings,
 	useGetOrderedPaymentMethodIds,
-	usePaymentRequestEnabledSettings,
-	usePaymentRequestButtonTheme,
-	usePaymentRequestLocations,
-	usePaymentRequestButtonSize,
-	usePaymentRequestButtonType,
+	useExpressCheckoutEnabledSettings,
+	useExpressCheckoutButtonTheme,
+	useExpressCheckoutLocations,
+	useExpressCheckoutButtonSize,
+	useExpressCheckoutButtonType,
 	useIsStripeEnabled,
 	useTestMode,
 	useSavedCards,
@@ -184,26 +184,26 @@ describe( 'Settings hooks tests', () => {
 			testedValue: [ 'foo', 'bar' ],
 			fallbackValue: [],
 		},
-		usePaymentRequestEnabledSettings: {
-			hook: usePaymentRequestEnabledSettings,
+		useExpressCheckoutEnabledSettings: {
+			hook: useExpressCheckoutEnabledSettings,
 			storeKey: 'is_payment_request_enabled',
 			testedValue: true,
 			fallbackValue: false,
 		},
-		usePaymentRequestButtonSize: {
-			hook: usePaymentRequestButtonSize,
+		useExpressCheckoutButtonSize: {
+			hook: useExpressCheckoutButtonSize,
 			storeKey: 'payment_request_button_size',
 			testedValue: 'large',
 			fallbackValue: '',
 		},
-		usePaymentRequestButtonType: {
-			hook: usePaymentRequestButtonType,
+		useExpressCheckoutButtonType: {
+			hook: useExpressCheckoutButtonType,
 			storeKey: 'payment_request_button_type',
 			testedValue: '',
 			fallbackValue: '',
 		},
-		usePaymentRequestButtonTheme: {
-			hook: usePaymentRequestButtonTheme,
+		useExpressCheckoutButtonTheme: {
+			hook: useExpressCheckoutButtonTheme,
 			storeKey: 'payment_request_button_theme',
 			testedValue: 'dark',
 			fallbackValue: '',
@@ -262,8 +262,8 @@ describe( 'Settings hooks tests', () => {
 			testedValue: true,
 			fallbackValue: false,
 		},
-		usePaymentRequestLocations: {
-			hook: usePaymentRequestLocations,
+		useExpressCheckoutLocations: {
+			hook: useExpressCheckoutLocations,
 			storeKey: 'payment_request_button_locations',
 			testedValue: [ 'checkout', 'cart' ],
 			fallbackValue: [],

client/data/settings/hooks.js

@@ -98,22 +98,22 @@ export const useEnabledPaymentMethodIds = makeSettingsHook(
 	'enabled_payment_method_ids',
 	EMPTY_ARR
 );
-export const usePaymentRequestEnabledSettings = makeSettingsHook(
+export const useExpressCheckoutEnabledSettings = makeSettingsHook(
 	'is_payment_request_enabled'
 );
-export const usePaymentRequestButtonSize = makeSettingsHook(
+export const useExpressCheckoutButtonSize = makeSettingsHook(
 	'payment_request_button_size',
 	''
 );
-export const usePaymentRequestButtonType = makeSettingsHook(
+export const useExpressCheckoutButtonType = makeSettingsHook(
 	'payment_request_button_type',
 	''
 );
-export const usePaymentRequestButtonTheme = makeSettingsHook(
+export const useExpressCheckoutButtonTheme = makeSettingsHook(
 	'payment_request_button_theme',
 	''
 );
-export const usePaymentRequestLocations = makeSettingsHook(
+export const useExpressCheckoutLocations = makeSettingsHook(
 	'payment_request_button_locations',
 	EMPTY_ARR
 );

client/entrypoints/express-checkout-settings/__tests__/express-checkout-button-preview.test.js

@@ -25,9 +25,9 @@ jest.mock( '@stripe/react-stripe-js', () => ( {
 } ) );
 
 jest.mock( 'wcstripe/data', () => ( {
-	usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'buy' ] ),
-	usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'default' ] ),
-	usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
+	useExpressCheckoutButtonType: jest.fn().mockReturnValue( [ 'buy' ] ),
+	useExpressCheckoutButtonSize: jest.fn().mockReturnValue( [ 'default' ] ),
+	useExpressCheckoutButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
 } ) );
 
 describe( 'ExpressCheckoutButtonPreview', () => {

client/entrypoints/express-checkout-settings/__tests__/express-checkout-settings-locations.test.js

@@ -3,16 +3,16 @@ import userEvent from '@testing-library/user-event';
 import ExpressCheckoutSettingsSection from '../express-checkout-settings-section';
 import ExpressCheckoutButtonPreview from '../express-checkout-button-preview';
 import {
-	usePaymentRequestEnabledSettings,
-	usePaymentRequestLocations,
+	useExpressCheckoutEnabledSettings,
+	useExpressCheckoutLocations,
 } from 'wcstripe/data';
 
 jest.mock( 'wcstripe/data', () => ( {
-	usePaymentRequestEnabledSettings: jest.fn(),
-	usePaymentRequestLocations: jest.fn(),
-	usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'buy' ] ),
-	usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'default' ] ),
-	usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
+	useExpressCheckoutEnabledSettings: jest.fn(),
+	useExpressCheckoutLocations: jest.fn(),
+	useExpressCheckoutButtonType: jest.fn().mockReturnValue( [ 'buy' ] ),
+	useExpressCheckoutButtonSize: jest.fn().mockReturnValue( [ 'default' ] ),
+	useExpressCheckoutButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
 } ) );
 
 jest.mock( 'wcstripe/data/account/hooks', () => ( {
@@ -36,35 +36,35 @@ jest.mock( '../utils/utils', () => ( {
 } ) );
 jest.mock( '@woocommerce/blocks-checkout', () => {}, { virtual: true } );
 
-const getMockPaymentRequestEnabledSettings = (
+const getMockExpressCheckoutEnabledSettings = (
 	isEnabled,
-	updateIsPaymentRequestEnabledHandler
-) => [ isEnabled, updateIsPaymentRequestEnabledHandler ];
+	updateIsExpressCheckoutEnabledHandler
+) => [ isEnabled, updateIsExpressCheckoutEnabledHandler ];
 
-const getMockPaymentRequestLocations = (
+const getMockExpressCheckoutLocations = (
 	isCheckoutEnabled,
 	isProductPageEnabled,
 	isCartEnabled,
-	updatePaymentRequestLocationsHandler
+	updateExpressCheckoutLocationsHandler
 ) => [
 	[
 		isCheckoutEnabled && 'checkout',
 		isProductPageEnabled && 'product',
 		isCartEnabled && 'cart',
 	].filter( Boolean ),
-	updatePaymentRequestLocationsHandler,
+	updateExpressCheckoutLocationsHandler,
 ];
 
 describe( 'ExpressCheckoutSettingsSection', () => {
 	const globalValues = global.wc_stripe_payment_request_settings_params;
 
 	beforeEach( () => {
-		usePaymentRequestEnabledSettings.mockReturnValue(
-			getMockPaymentRequestEnabledSettings( true, jest.fn() )
+		useExpressCheckoutEnabledSettings.mockReturnValue(
+			getMockExpressCheckoutEnabledSettings( true, jest.fn() )
 		);
 
-		usePaymentRequestLocations.mockReturnValue(
-			getMockPaymentRequestLocations( true, true, true, jest.fn() )
+		useExpressCheckoutLocations.mockReturnValue(
+			getMockExpressCheckoutLocations( true, true, true, jest.fn() )
 		);
 
 		global.wc_stripe_payment_request_settings_params = {
@@ -95,14 +95,17 @@ describe( 'ExpressCheckoutSettingsSection', () => {
 	} );
 
 	it( 'should trigger an action to save the checked locations when un-checking the location checkboxes', async () => {
-		const updatePaymentRequestLocationsHandler = jest.fn();
-		usePaymentRequestEnabledSettings.mockReturnValue( [ true, jest.fn() ] );
-		usePaymentRequestLocations.mockReturnValue(
-			getMockPaymentRequestLocations(
+		const updateExpressCheckoutLocationsHandler = jest.fn();
+		useExpressCheckoutEnabledSettings.mockReturnValue( [
+			true,
+			jest.fn(),
+		] );
+		useExpressCheckoutLocations.mockReturnValue(
+			getMockExpressCheckoutLocations(
 				true,
 				true,
 				true,
-				updatePaymentRequestLocationsHandler
+				updateExpressCheckoutLocationsHandler
 			)
 		);
 
@@ -111,53 +114,56 @@ describe( 'ExpressCheckoutSettingsSection', () => {
 		// Uncheck each checkbox, and verify them what kind of action should have been called
 		await userEvent.click( screen.getByText( 'Product page' ) );
 
-		expect( updatePaymentRequestLocationsHandler ).toHaveBeenLastCalledWith(
-			[ 'checkout', 'cart' ]
-		);
+		expect(
+			updateExpressCheckoutLocationsHandler
+		).toHaveBeenLastCalledWith( [ 'checkout', 'cart' ] );
 
 		await userEvent.click( screen.getByText( 'Checkout' ) );
 
-		expect( updatePaymentRequestLocationsHandler ).toHaveBeenLastCalledWith(
-			[ 'product', 'cart' ]
-		);
+		expect(
+			updateExpressCheckoutLocationsHandler
+		).toHaveBeenLastCalledWith( [ 'product', 'cart' ] );
 
 		await userEvent.click( screen.getByText( 'Cart' ) );
 
-		expect( updatePaymentRequestLocationsHandler ).toHaveBeenLastCalledWith(
-			[ 'checkout', 'product' ]
-		);
+		expect(
+			updateExpressCheckoutLocationsHandler
+		).toHaveBeenLastCalledWith( [ 'checkout', 'product' ] );
 	} );
 
 	it( 'should trigger an action to save the checked locations when checking the location checkboxes', async () => {
-		const updatePaymentRequestLocationsHandler = jest.fn();
-		usePaymentRequestEnabledSettings.mockReturnValue( [ true, jest.fn() ] );
-		usePaymentRequestLocations.mockReturnValue(
-			getMockPaymentRequestLocations(
+		const updateExpressCheckoutLocationsHandler = jest.fn();
+		useExpressCheckoutEnabledSettings.mockReturnValue( [
+			true,
+			jest.fn(),
+		] );
+		useExpressCheckoutLocations.mockReturnValue(
+			getMockExpressCheckoutLocations(
 				false,
 				false,
 				false,
-				updatePaymentRequestLocationsHandler
+				updateExpressCheckoutLocationsHandler
 			)
 		);
 
 		render( <ExpressCheckoutSettingsSection /> );
 
 		await userEvent.click( screen.getByText( 'Cart' ) );
 
-		expect( updatePaymentRequestLocationsHandler ).toHaveBeenLastCalledWith(
-			[ 'cart' ]
-		);
+		expect(
+			updateExpressCheckoutLocationsHandler
+		).toHaveBeenLastCalledWith( [ 'cart' ] );
 
 		await userEvent.click( screen.getByText( 'Product page' ) );
 
-		expect( updatePaymentRequestLocationsHandler ).toHaveBeenLastCalledWith(
-			[ 'product' ]
-		);
+		expect(
+			updateExpressCheckoutLocationsHandler
+		).toHaveBeenLastCalledWith( [ 'product' ] );
 
 		await userEvent.click( screen.getByText( 'Checkout' ) );
 
-		expect( updatePaymentRequestLocationsHandler ).toHaveBeenLastCalledWith(
-			[ 'checkout' ]
-		);
+		expect(
+			updateExpressCheckoutLocationsHandler
+		).toHaveBeenLastCalledWith( [ 'checkout' ] );
 	} );
 } );

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

@@ -2,20 +2,20 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ExpressCheckoutSettingsSection from '../express-checkout-settings-section';
 import {
-	usePaymentRequestEnabledSettings,
-	usePaymentRequestLocations,
-	usePaymentRequestButtonType,
-	usePaymentRequestButtonSize,
-	usePaymentRequestButtonTheme,
+	useExpressCheckoutEnabledSettings,
+	useExpressCheckoutLocations,
+	useExpressCheckoutButtonType,
+	useExpressCheckoutButtonSize,
+	useExpressCheckoutButtonTheme,
 } from 'wcstripe/data';
 import ExpressCheckoutButtonPreview from 'wcstripe/entrypoints/express-checkout-settings/express-checkout-button-preview';
 
 jest.mock( 'wcstripe/data', () => ( {
-	usePaymentRequestEnabledSettings: jest.fn(),
-	usePaymentRequestLocations: jest.fn(),
-	usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'buy' ] ),
-	usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'default' ] ),
-	usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
+	useExpressCheckoutEnabledSettings: jest.fn(),
+	useExpressCheckoutLocations: jest.fn(),
+	useExpressCheckoutButtonType: jest.fn().mockReturnValue( [ 'buy' ] ),
+	useExpressCheckoutButtonSize: jest.fn().mockReturnValue( [ 'default' ] ),
+	useExpressCheckoutButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
 } ) );
 jest.mock( 'wcstripe/data/account/hooks', () => ( {
 	useAccount: jest.fn().mockReturnValue( { data: {} } ),
@@ -38,34 +38,34 @@ jest.mock( '../utils/utils', () => ( {
 	} ),
 } ) );
 
-const getMockPaymentRequestEnabledSettings = (
+const getMockExpressCheckoutEnabledSettings = (
 	isEnabled,
-	updateIsPaymentRequestEnabledHandler
-) => [ isEnabled, updateIsPaymentRequestEnabledHandler ];
+	updateIsExpressCheckoutEnabledHandler
+) => [ isEnabled, updateIsExpressCheckoutEnabledHandler ];
 
-const getMockPaymentRequestLocations = (
+const getMockExpressCheckoutLocations = (
 	isCheckoutEnabled,
 	isProductPageEnabled,
 	isCartEnabled,
-	updatePaymentRequestLocationsHandler
+	updateExpressCheckoutLocationsHandler
 ) => [
 	[
 		isCheckoutEnabled && 'checkout',
 		isProductPageEnabled && 'product',
 		isCartEnabled && 'cart',
 	].filter( Boolean ),
-	updatePaymentRequestLocationsHandler,
+	updateExpressCheckoutLocationsHandler,
 ];
 
 describe( 'ExpressCheckoutSettingsSection', () => {
 	const globalValues = global.wc_stripe_payment_request_settings_params;
 	beforeEach( () => {
-		usePaymentRequestEnabledSettings.mockReturnValue(
-			getMockPaymentRequestEnabledSettings( true, jest.fn() )
+		useExpressCheckoutEnabledSettings.mockReturnValue(
+			getMockExpressCheckoutEnabledSettings( true, jest.fn() )
 		);
 
-		usePaymentRequestLocations.mockReturnValue(
-			getMockPaymentRequestLocations( true, true, true, jest.fn() )
+		useExpressCheckoutLocations.mockReturnValue(
+			getMockExpressCheckoutLocations( true, true, true, jest.fn() )
 		);
 
 		global.wc_stripe_payment_request_settings_params = {
@@ -111,19 +111,22 @@ describe( 'ExpressCheckoutSettingsSection', () => {
 		const setButtonSizeMock = jest.fn();
 		const setButtonThemeMock = jest.fn();
 
-		usePaymentRequestButtonType.mockReturnValue( [
+		useExpressCheckoutButtonType.mockReturnValue( [
 			'buy',
 			setButtonTypeMock,
 		] );
-		usePaymentRequestButtonSize.mockReturnValue( [
+		useExpressCheckoutButtonSize.mockReturnValue( [
 			'default',
 			setButtonSizeMock,
 		] );
-		usePaymentRequestButtonTheme.mockReturnValue( [
+		useExpressCheckoutButtonTheme.mockReturnValue( [
 			'dark',
 			setButtonThemeMock,
 		] );
-		usePaymentRequestEnabledSettings.mockReturnValue( [ true, jest.fn() ] );
+		useExpressCheckoutEnabledSettings.mockReturnValue( [
+			true,
+			jest.fn(),
+		] );
 
 		render( <ExpressCheckoutSettingsSection /> );