Release branch for 8.1.1

changelog.txt

@@ -1,5 +1,9 @@
 *** WooPayments Changelog ***
 
+= 8.1.1 - 2024-08-29 =
+* Fix - Ensure 55px is the maximum height for Apple Pay button.
+* Fix - Fixed sandbox mode accounts being able to disable test mode for the payment gateway settings.
+
 = 8.1.0 - 2024-08-21 =
 * Add - Add button rules to appearance
 * Add - Add heading rules to appearance

client/components/account-status/account-tools/index.tsx

@@ -12,7 +12,7 @@ import strings from './strings';
 import './styles.scss';
 import ResetAccountModal from 'wcpay/overview/modal/reset-account';
 import { trackAccountReset } from 'wcpay/onboarding/tracking';
-import { isInDevMode } from 'wcpay/utils';
+import { isInTestModeOnboarding } from 'wcpay/utils';
 
 interface Props {
 	openModal: () => void;
@@ -30,8 +30,8 @@ const handleReset = () => {
 export const AccountTools: React.FC< Props > = () => {
 	const [ modalVisible, setModalVisible ] = useState( false );
 
-	// Only render when in dev/sandbox mode.
-	if ( ! isInDevMode() ) {
+	// Only render when in test/sandbox mode onboarding.
+	if ( ! isInTestModeOnboarding() ) {
 		return null;
 	}
 

client/components/account-status/account-tools/strings.tsx

@@ -7,11 +7,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { isInDevMode } from 'utils';
+import { isInTestModeOnboarding } from 'utils';
 
 export default {
 	title: __( 'Account Tools', 'woocommerce-payments' ),
-	description: isInDevMode()
+	description: isInTestModeOnboarding()
 		? __(
 				'Your account is in sandbox mode. If you are experiencing problems completing account setup, or wish to test with a different email/country associated with your account, you can reset your account and start from the beginning.',
 				'woocommerce-payments'

client/components/account-status/account-tools/test/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`AccountTools should NOT render in live mode 1`] = `<div />`;
 
-exports[`AccountTools should render in sandbox mode 1`] = `
+exports[`AccountTools should render in test/sandbox mode onboarding 1`] = `
 <div>
   <div
     class="account-tools"

client/components/account-status/account-tools/test/index.test.tsx

@@ -14,14 +14,14 @@ const openModal = jest.fn();
 
 declare const global: {
 	wcpaySettings: {
-		devMode: boolean;
+		testModeOnboarding: boolean;
 	};
 };
 
 describe( 'AccountTools', () => {
 	it( 'should NOT render in live mode', () => {
 		global.wcpaySettings = {
-			devMode: false,
+			testModeOnboarding: false,
 		};
 
 		const { container } = render(
@@ -31,9 +31,9 @@ describe( 'AccountTools', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should render in sandbox mode', () => {
+	it( 'should render in test/sandbox mode onboarding', () => {
 		global.wcpaySettings = {
-			devMode: true,
+			testModeOnboarding: true,
 		};
 
 		const { container } = render(

client/components/account-status/test/index.js

@@ -122,7 +122,7 @@ describe( 'AccountStatus', () => {
 	} );
 
 	test( 'renders account tools', () => {
-		global.wcpaySettings.devMode = true;
+		global.wcpaySettings.testModeOnboarding = true;
 
 		const { container: accountStatus } = renderAccountStatus(
 			{

client/components/sandbox-mode-switch-to-live-notice/modal/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 import { Button, Modal } from '@wordpress/components';
@@ -26,7 +26,10 @@ const SetupLivePaymentsModal: React.FC< Props > = ( {
 	source,
 	onClose,
 }: Props ) => {
+	const [ isSubmitted, setSubmitted ] = useState( false );
 	const handleSetup = () => {
+		setSubmitted( true );
+
 		recordEvent( 'wcpay_onboarding_flow_setup_live_payments', {
 			from,
 			source,
@@ -40,6 +43,8 @@ const SetupLivePaymentsModal: React.FC< Props > = ( {
 	};
 
 	const trackAndClose = () => {
+		setSubmitted( false );
+
 		recordEvent( 'wcpay_setup_live_payments_modal_exit', {
 			from,
 			source,
@@ -85,7 +90,12 @@ const SetupLivePaymentsModal: React.FC< Props > = ( {
 				<Button variant="tertiary" onClick={ trackAndClose }>
 					{ __( 'Cancel', 'woocommerce-payments' ) }
 				</Button>
-				<Button variant="primary" onClick={ handleSetup }>
+				<Button
+					variant="primary"
+					isBusy={ isSubmitted }
+					disabled={ isSubmitted }
+					onClick={ handleSetup }
+				>
 					{ __( 'Continue setup', 'woocommerce-payments' ) }
 				</Button>
 			</div>

client/components/test-mode-notice/index.tsx

@@ -26,7 +26,7 @@ interface Props {
 	currentPage: CurrentPage;
 	actions?: React.ComponentProps< typeof BannerNotice >[ 'actions' ];
 	isDetailsView?: boolean;
-	isOnboardingTestMode?: boolean;
+	isTestModeOnboarding?: boolean;
 }
 
 const nounToUse = {
@@ -50,11 +50,11 @@ const verbToUse = {
 const getNoticeContent = (
 	currentPage: CurrentPage,
 	isDetailsView: boolean,
-	isOnboardingTestMode: boolean
+	isTestModeOnboarding: boolean
 ): JSX.Element => {
 	switch ( currentPage ) {
 		case 'overview':
-			return isOnboardingTestMode ? (
+			return isTestModeOnboarding ? (
 				<>
 					{ interpolateComponents( {
 						mixedString: sprintf(
@@ -163,7 +163,7 @@ export const TestModeNotice: React.FC< Props > = ( {
 	currentPage,
 	actions,
 	isDetailsView = false,
-	isOnboardingTestMode = false,
+	isTestModeOnboarding = false,
 } ) => {
 	if ( ! isInTestMode() ) return null;
 
@@ -176,7 +176,7 @@ export const TestModeNotice: React.FC< Props > = ( {
 			{ getNoticeContent(
 				currentPage,
 				isDetailsView,
-				isOnboardingTestMode
+				isTestModeOnboarding
 			) }
 		</BannerNotice>
 	);

client/connect-account-page/index.tsx

@@ -33,7 +33,7 @@ import InlineNotice from 'components/inline-notice';
 import { WooPaymentMethodsLogos } from 'components/payment-method-logos';
 import WooPaymentsLogo from 'assets/images/logo.svg?asset';
 import { sanitizeHTML } from 'wcpay/utils/sanitize';
-import { isInDevMode } from 'wcpay/utils';
+import { isInTestModeOnboarding } from 'wcpay/utils';
 import ResetAccountModal from 'wcpay/overview/modal/reset-account';
 import { trackAccountReset } from 'wcpay/onboarding/tracking';
 import SandboxModeSwitchToLiveNotice from 'wcpay/components/sandbox-mode-switch-to-live-notice';
@@ -96,8 +96,7 @@ const ConnectAccountPage: React.FC = () => {
 	const {
 		connectUrl,
 		connect: { availableCountries, country },
-		devMode,
-		onboardingTestMode,
+		testModeOnboarding,
 		isJetpackConnected,
 		isAccountConnected,
 		isAccountValid,
@@ -467,15 +466,15 @@ const ConnectAccountPage: React.FC = () => {
 					) }
 					{
 						// Show general sandbox notice when no account is connected but sandbox mode is active.
-						! isAccountConnected && devMode ? (
+						! isAccountConnected && testModeOnboarding ? (
 							<SandboxModeNotice />
 						) : (
 							// If we already have a sandbox account connected (but in an invalid state) and
 							// a working Jetpack connection (to be able to delete the current account)
 							// show the switch to live sandbox notice.
 							isAccountConnected &&
 							! isAccountValid &&
-							onboardingTestMode &&
+							testModeOnboarding &&
 							isJetpackConnected && (
 								<SandboxModeSwitchToLiveNotice
 									from="WCPAY_CONNECT"
@@ -551,7 +550,7 @@ const ConnectAccountPage: React.FC = () => {
 								isAccountConnected &&
 									( ! wcpaySettings.accountStatus
 										.detailsSubmitted ||
-										isInDevMode() ) && (
+										isInTestModeOnboarding() ) && (
 										<Button
 											variant={ 'tertiary' }
 											onClick={ () =>

client/data/settings/hooks.js

@@ -85,6 +85,12 @@ export const useTestMode = () => {
 	return [ isTestModeEnabled, updateIsTestModeEnabled ];
 };
 
+export const useTestModeOnboarding = () =>
+	useSelect(
+		( select ) => select( STORE_NAME ).getIsTestModeOnboarding(),
+		[]
+	);
+
 export const useDevMode = () =>
 	useSelect( ( select ) => select( STORE_NAME ).getIsDevModeEnabled(), [] );
 

client/data/settings/selectors.js

@@ -153,6 +153,10 @@ export const getIsTestModeEnabled = ( state ) => {
 	return getSettings( state ).is_test_mode_enabled || false;
 };
 
+export const getIsTestModeOnboarding = ( state ) => {
+	return getSettings( state ).is_test_mode_onboarding || false;
+};
+
 export const getIsDevModeEnabled = ( state ) => {
 	return getSettings( state ).is_dev_mode_enabled || false;
 };

client/express-checkout/blocks/components/express-checkout-component.js

@@ -40,7 +40,11 @@ const adjustButtonHeights = ( buttonOptions, expressPaymentMethod ) => {
 	// Apple Pay has a nearly imperceptible height difference. We increase it by 1px here.
 	if ( buttonOptions.buttonTheme.applePay === 'black' ) {
 		if ( expressPaymentMethod === 'applePay' ) {
-			buttonOptions.buttonHeight = buttonOptions.buttonHeight + 0.4;
+			// The maximum allowed size is 55px.
+			buttonOptions.buttonHeight = Math.min(
+				buttonOptions.buttonHeight + 0.4,
+				55
+			);
 		}
 	}
 

client/express-checkout/blocks/components/express-checkout-container.js

@@ -27,9 +27,11 @@ const ExpressCheckoutContainer = ( props ) => {
 	};
 
 	return (
-		<Elements stripe={ stripePromise } options={ options }>
-			<ExpressCheckoutComponent { ...props } />
-		</Elements>
+		<div style={ { minHeight: '40px' } }>
+			<Elements stripe={ stripePromise } options={ options }>
+				<ExpressCheckoutComponent { ...props } />
+			</Elements>
+		</div>
 	);
 };
 

client/globals.d.ts

@@ -19,6 +19,7 @@ declare global {
 		};
 		fraudServices: unknown[];
 		testMode: boolean;
+		testModeOnboarding: boolean;
 		devMode: boolean;
 		isJetpackConnected: boolean;
 		isJetpackIdcActive: boolean;
@@ -97,7 +98,6 @@ declare global {
 		accountDefaultCurrency: string;
 		isFRTReviewFeatureActive: boolean;
 		frtDiscoverBannerSettings: string;
-		onboardingTestMode: boolean;
 		onboardingFieldsData?: {
 			business_types: Country[];
 			mccs_display_tree: MccsDisplayTreeItem[];

client/overview/connection-sucess-notice.tsx

@@ -21,7 +21,7 @@ const ConnectionSuccessNotice: React.FC = () => {
 			},
 			status: accountStatus,
 		},
-		onboardingTestMode,
+		testModeOnboarding,
 	} = wcpaySettings;
 
 	const DismissMenu = () => {
@@ -41,7 +41,7 @@ const ConnectionSuccessNotice: React.FC = () => {
 		);
 	};
 	const isPoDisabledOrCompleted = ! isPoEnabled || isPoComplete;
-	return ! isDismissed && ! onboardingTestMode && isPoDisabledOrCompleted ? (
+	return ! isDismissed && ! testModeOnboarding && isPoDisabledOrCompleted ? (
 		<Card className="wcpay-connection-success">
 			<DismissMenu />
 			<img src={ ConfettiImage } alt="confetti" />

client/overview/index.js

@@ -67,7 +67,7 @@ const OverviewPage = () => {
 		wpcomReconnectUrl,
 	} = wcpaySettings;
 
-	const isOnboardingTestMode = wcpaySettings.onboardingTestMode;
+	const isTestModeOnboarding = wcpaySettings.testModeOnboarding;
 	const { isLoading: settingsIsLoading } = useSettings();
 	const [
 		isTestDriveSuccessDisplayed,
@@ -175,15 +175,15 @@ const OverviewPage = () => {
 					) }
 				</Notice>
 			) }
-			{ isOnboardingTestMode ? (
+			{ isTestModeOnboarding ? (
 				<SandboxModeSwitchToLiveNotice
 					from="WCPAY_OVERVIEW"
 					source="wcpay-overview-page"
 				/>
 			) : (
 				<TestModeNotice
 					currentPage="overview"
-					isOnboardingTestMode={ isOnboardingTestMode }
+					isTestModeOnboarding={ isTestModeOnboarding }
 					actions={ [] }
 				/>
 			) }

client/overview/modal/reset-account/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { Button, CardDivider, Modal } from '@wordpress/components';
 
 /**
@@ -18,13 +18,17 @@ interface Props {
 
 const ResetAccountModal: React.FC< Props > = ( props: Props ) => {
 	const { isVisible, onDismiss, onSubmit } = props;
+	const [ isSubmitted, setSubmitted ] = useState( false );
 	if ( ! isVisible ) return null;
 
 	return (
 		<Modal
 			title={ strings.title }
 			className="wcpay-reset-account-modal"
-			onRequestClose={ onDismiss }
+			onRequestClose={ () => {
+				setSubmitted( false );
+				onDismiss();
+			} }
 		>
 			<p className="wcpay-reset-account-modal__headline">
 				{ strings.description }
@@ -40,13 +44,24 @@ const ResetAccountModal: React.FC< Props > = ( props: Props ) => {
 				<b>{ strings.confirmation }</b>
 			</div>
 			<div className="wcpay-reset-account-modal__footer">
-				<Button variant="tertiary" onClick={ onDismiss }>
+				<Button
+					variant="tertiary"
+					onClick={ () => {
+						setSubmitted( false );
+						onDismiss();
+					} }
+				>
 					{ strings.cancel }
 				</Button>
 				<Button
 					variant="primary"
 					isDestructive={ true }
-					onClick={ onSubmit }
+					isBusy={ isSubmitted }
+					disabled={ isSubmitted }
+					onClick={ () => {
+						setSubmitted( true );
+						onSubmit();
+					} }
 				>
 					{ strings.reset }
 				</Button>