Fix “Continue Setup” button on the “Setup Live Payments” modal doesn’t show any action

changelog.txt

@@ -1,5 +1,8 @@
 *** WooPayments Changelog ***
 
+= 8.1.1 - 2024-08-23 =
+* 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

@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 import { Button, Modal } from '@wordpress/components';
 import { Icon, currencyDollar } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -26,12 +27,16 @@ const SetupLivePaymentsModal: React.FC< Props > = ( {
 	source,
 	onClose,
 }: Props ) => {
+	const [ isLoading, setIsLoading ] = useState( false );
+
 	const handleSetup = () => {
 		recordEvent( 'wcpay_onboarding_flow_setup_live_payments', {
 			from,
 			source,
 		} );
 
+		setIsLoading( true );
+
 		window.location.href = addQueryArgs( wcpaySettings.connectUrl, {
 			'wcpay-disable-onboarding-test-mode': 'true',
 			from,
@@ -45,6 +50,7 @@ const SetupLivePaymentsModal: React.FC< Props > = ( {
 			source,
 		} );
 
+		setIsLoading( false );
 		onClose();
 	};
 
@@ -85,7 +91,12 @@ const SetupLivePaymentsModal: React.FC< Props > = ( {
 				<Button variant="tertiary" onClick={ trackAndClose }>
 					{ __( 'Cancel', 'woocommerce-payments' ) }
 				</Button>
-				<Button variant="primary" onClick={ handleSetup }>
+				<Button
+					variant="primary"
+					onClick={ handleSetup }
+					isBusy={ isLoading }
+					disabled={ isLoading }
+				>
 					{ __( '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/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/strings.tsx

@@ -7,11 +7,11 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { isInDevMode } from 'utils';
+import { isInTestModeOnboarding } from 'utils';
 
 export default {
 	title: __( 'Reset account', 'woocommerce-payments' ),
-	description: isInDevMode()
+	description: isInTestModeOnboarding()
 		? __(
 				'In sandbox mode, you can reset your account and onboard again at any time. Please note that all current WooPayments account details, test transactions, and deposits history will be lost.',
 				'woocommerce-payments'

client/overview/task-list/tasks.tsx

@@ -19,7 +19,7 @@ import { CachedDispute } from 'wcpay/types/disputes';
 import { TaskItemProps } from './types';
 import { getAddApmsTask } from './tasks/add-apms-task';
 import { getGoLiveTask } from './tasks/go-live-task';
-import { isInDevMode } from 'wcpay/utils';
+import { isInTestModeOnboarding } from 'wcpay/utils';
 
 // Requirements we don't want to show to the user because they are too generic/not useful. These refer to Stripe error codes.
 const requirementBlacklist = [ 'invalid_value_other' ];
@@ -88,7 +88,8 @@ export const getTasks = ( {
 		detailsSubmitted &&
 		! isPoInProgress;
 
-	const isGoLiveTaskVisible = isInDevMode( false ) && showGoLiveTask;
+	const isGoLiveTaskVisible =
+		isInTestModeOnboarding( false ) && showGoLiveTask;
 
 	return [
 		isUpdateDetailsTaskVisible &&

client/settings/general-settings/index.js

@@ -9,7 +9,7 @@ import interpolateComponents from '@automattic/interpolate-components';
 /**
  * Internal dependencies
  */
-import { useDevMode, useTestMode } from 'wcpay/data';
+import { useTestMode, useTestModeOnboarding } from 'wcpay/data';
 import CardBody from '../card-body';
 import InlineNotice from 'wcpay/components/inline-notice';
 import SetupLivePaymentsModal from 'wcpay/components/sandbox-mode-switch-to-live-notice/modal';
@@ -20,15 +20,15 @@ import { recordEvent } from 'wcpay/tracks';
 const GeneralSettings = () => {
 	const [ isEnabled, updateIsTestModeEnabled ] = useTestMode();
 	const [ modalVisible, setModalVisible ] = useState( false );
-	const isDevModeEnabled = useDevMode();
+	const isTestModeOnboarding = useTestModeOnboarding();
 	const [ testModeModalVisible, setTestModeModalVisible ] = useState( false );
 
 	return (
 		<>
 			<Card>
 				<CardBody>
 					<EnableWooPaymentsCheckbox />
-					{ ! isDevModeEnabled && (
+					{ ! isTestModeOnboarding && (
 						<>
 							<h4>
 								{ __( 'Test mode', 'woocommerce-payments' ) }
@@ -82,7 +82,7 @@ const GeneralSettings = () => {
 							/>
 						</>
 					) }
-					{ isDevModeEnabled && (
+					{ isTestModeOnboarding && (
 						<InlineNotice
 							status="warning"
 							isDismissible={ false }