Introduce a test drive mode into the onboarding process

changelog/add-test-drive-mode

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Enhance Sandbox mode onboarding by skipping KYC and making it fully automated for all supported countries.

client/connect-account-page/index.tsx

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { render } from '@wordpress/element';
 import {
 	Button,
@@ -15,6 +15,7 @@ import {
 } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
+import { Loader } from '@woocommerce/onboarding';
 
 /**
  * Internal dependencies
@@ -30,13 +31,41 @@ import strings from './strings';
 import './style.scss';
 import InlineNotice from 'components/inline-notice';
 import { WooPaymentMethodsLogos } from 'components/payment-method-logos';
+import WooPaymentsLogo from 'assets/images/logo.svg?asset';
+import { __ } from '@wordpress/i18n';
+
+interface AccountData {
+	status: string;
+}
 
 const SandboxModeNotice = () => (
 	<BannerNotice icon status="warning" isDismissible={ false }>
 		{ strings.sandboxModeNotice }
 	</BannerNotice>
 );
 
+const TestDriveLoader: React.FunctionComponent< {
+	progress: number;
+} > = ( { progress } ) => (
+	<Loader className="connect-account-page__preloader">
+		<img src={ WooPaymentsLogo } alt="" />
+		<Loader.Layout>
+			<Loader.Title>
+				{ __(
+					'Creating your sandbox account',
+					'woocommerce-payments'
+				) }
+			</Loader.Title>
+			<Loader.ProgressBar progress={ progress ?? 0 } />
+			<Loader.Sequence interval={ 0 }>
+				{ __(
+					'In just a few moments, you will be ready to test payments on your store.'
+				) }
+			</Loader.Sequence>
+		</Loader.Layout>
+	</Loader>
+);
+
 const ConnectAccountPage: React.FC = () => {
 	const firstName = wcSettings.admin?.currentUserData?.first_name;
 	const incentive = wcpaySettings.connectIncentive;
@@ -47,9 +76,23 @@ const ConnectAccountPage: React.FC = () => {
 		wcpaySettings.errorMessage
 	);
 	const [ isSubmitted, setSubmitted ] = useState( false );
-	const [ isSandboxModeClicked, setSandboxModeClicked ] = useState( false );
+	const [ isTestDriveModeSubmitted, setTestDriveModeSubmitted ] = useState(
+		false
+	);
+	const [ isTestDriveModeModalShown, setTestDriveModeModalShown ] = useState(
+		false
+	);
+	const [ testDriveLoaderProgress, setTestDriveLoaderProgress ] = useState(
+		5
+	);
+
+	// Create a reference object.
+	const loaderProgressRef = useRef( testDriveLoaderProgress );
+	loaderProgressRef.current = testDriveLoaderProgress;
+
 	const {
 		connectUrl,
+		overviewUrl,
 		connect: { availableCountries, country },
 		devMode,
 	} = wcpaySettings;
@@ -74,6 +117,131 @@ const ConnectAccountPage: React.FC = () => {
 		return source;
 	};
 
+	const updateLoaderProgress = ( maxPercent: number, step: number ) => {
+		if ( loaderProgressRef.current < maxPercent ) {
+			const newProgress = loaderProgressRef.current + step;
+			setTestDriveLoaderProgress( newProgress );
+		}
+	};
+
+	const checkAccountStatus = () => {
+		// Fetch account status from the cache.
+		apiFetch( {
+			path: `/wc/v3/payments/accounts`,
+			method: 'GET',
+		} ).then( ( account ) => {
+			// Simulate the update of the loader progress bar by 4% per check.
+			// Limit to a maximum of 15 checks or 30 seconds.
+			updateLoaderProgress( 100, 4 );
+
+			// If the account status is complete or progress percentage is above 95, redirect to the overview page.
+			// Otherwise, schedule another check after 2 seconds.
+			if (
+				( account as AccountData ).status === 'complete' ||
+				loaderProgressRef.current > 95
+			) {
+				setTestDriveLoaderProgress( 100 );
+				const redirectUrl = addQueryArgs( overviewUrl, {
+					'sandbox-onboarded': true,
+				} );
+				window.location.href = redirectUrl;
+			} else {
+				setTimeout( checkAccountStatus, 2000 );
+			}
+		} );
+	};
+
+	const trackConnectAccountClicked = ( sandboxMode: boolean ) => {
+		recordEvent( 'wcpay_connect_account_clicked', {
+			wpcom_connection: wcpaySettings.isJetpackConnected ? 'Yes' : 'No',
+			is_new_onboarding_flow: isNewFlowEnabled,
+			...( incentive && {
+				incentive_id: incentive.id,
+			} ),
+			sandbox_mode: sandboxMode,
+			path: 'payments_connect_v2',
+			source: determineTrackingSource(),
+		} );
+	};
+
+	const handleSetupTestDriveMode = async () => {
+		setTestDriveLoaderProgress( 5 );
+		setTestDriveModeSubmitted( true );
+		trackConnectAccountClicked( true );
+
+		// Scroll the page to the top to ensure the logo is visible.
+		window.scrollTo( {
+			top: 0,
+		} );
+
+		const url = addQueryArgs( connectUrl, {
+			test_mode: true,
+			test_drive: true,
+		} );
+
+		const updateProgress = setInterval( updateLoaderProgress, 2500, 40, 5 );
+
+		// If Jetpack is connected, we should proceed with AJAX onboarding.
+		// Otherwise, redirect to the Jetpack connect screen.
+		if ( wcpaySettings.isJetpackConnected ) {
+			setTestDriveModeModalShown( true );
+			fetch( url, {
+				method: 'GET',
+				redirect: 'follow',
+				credentials: 'same-origin',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+			} ).then( ( response ) => {
+				clearInterval( updateProgress );
+				setTestDriveLoaderProgress( 40 );
+
+				// Check the response url for the `wcpay-connection-success` parameter,
+				// indicating a successful connection.
+				const urlParams = new URLSearchParams( response.url );
+				const connected =
+					urlParams.get( 'wcpay-connection-success' ) || '';
+
+				// The account has been successfully onboarded.
+				// Start checking the account status every 2 seconds.
+				// Once the status is complete, redirect to the Overview page.
+				if ( connected === '1' ) {
+					checkAccountStatus();
+				} else {
+					// Set the error message.
+					setErrorMessage(
+						__(
+							'An error occurred while creating a sandbox account. Please try again!',
+							'woocommerce-payments'
+						)
+					);
+
+					// Scroll window to the top
+					window.scrollTo( {
+						top: 0,
+					} );
+
+					// Hide loader.
+					setTestDriveModeModalShown( false );
+					setTestDriveModeSubmitted( false );
+				}
+			} );
+		} else {
+			window.location.href = url;
+		}
+	};
+
+	const forceOnboardTestDrive = () => {
+		const urlParams = new URLSearchParams( window.location.search );
+		const forceOnboard = urlParams.get( 'force-test-onboard' ) || false;
+
+		// If the force test onboard is present and Jetpack is connected
+		// we should start onboarding Test Drive account automatically.
+		if ( forceOnboard && wcpaySettings.isJetpackConnected ) {
+			handleSetupTestDriveMode();
+		}
+	};
+
 	useEffect( () => {
 		recordEvent( 'page_view', {
 			path: 'payments_connect_v2',
@@ -82,6 +250,8 @@ const ConnectAccountPage: React.FC = () => {
 			} ),
 			source: determineTrackingSource(),
 		} );
+
+		forceOnboardTestDrive();
 		// We only want to run this once.
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
@@ -116,19 +286,6 @@ const ConnectAccountPage: React.FC = () => {
 		document.body.appendChild( container );
 	};
 
-	const trackConnectAccountClicked = ( sandboxMode: boolean ) => {
-		recordEvent( 'wcpay_connect_account_clicked', {
-			wpcom_connection: wcpaySettings.isJetpackConnected ? 'Yes' : 'No',
-			is_new_onboarding_flow: isNewFlowEnabled,
-			...( incentive && {
-				incentive_id: incentive.id,
-			} ),
-			sandbox_mode: sandboxMode,
-			path: 'payments_connect_v2',
-			source: determineTrackingSource(),
-		} );
-	};
-
 	const handleSetup = async () => {
 		setSubmitted( true );
 
@@ -158,18 +315,6 @@ const ConnectAccountPage: React.FC = () => {
 		window.location.href = connectUrl;
 	};
 
-	const handleEnableSandboxMode = async () => {
-		setSandboxModeClicked( true );
-
-		trackConnectAccountClicked( true );
-
-		const url = addQueryArgs( connectUrl, {
-			test_mode: true,
-			create_builder_account: true,
-		} );
-		window.location.href = url;
-	};
-
 	return (
 		<Page isNarrow className="connect-account-page">
 			{ errorMessage && (
@@ -272,16 +417,19 @@ const ConnectAccountPage: React.FC = () => {
 							</InlineNotice>
 							<Button
 								variant="secondary"
-								isBusy={ isSandboxModeClicked }
-								disabled={ isSandboxModeClicked }
-								onClick={ handleEnableSandboxMode }
+								isBusy={ isTestDriveModeSubmitted }
+								disabled={ isTestDriveModeSubmitted }
+								onClick={ handleSetupTestDriveMode }
 							>
 								{ strings.button.sandbox }
 							</Button>
 						</PanelBody>
 					</Panel>
 				</>
 			) }
+			{ isTestDriveModeModalShown && (
+				<TestDriveLoader progress={ testDriveLoaderProgress } />
+			) }
 		</Page>
 	);
 };

client/connect-account-page/style.scss

@@ -237,4 +237,23 @@
 			}
 		}
 	}
+
+	&__preloader {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		background: #fff;
+		z-index: 999999;
+		text-align: center;
+
+		img {
+			position: absolute;
+			height: 44px;
+			width: 167px;
+			top: 18px;
+			left: calc( 50% - 84px );
+		}
+	}
 }

client/globals.d.ts

@@ -8,6 +8,7 @@ declare global {
 	const wcpaySettings: {
 		version: string;
 		connectUrl: string;
+		overviewUrl: string;
 		isSubscriptionsActive: boolean;
 		featureFlags: {
 			customSearch: boolean;

client/overview/index.js

@@ -7,6 +7,7 @@ import React, { useState } from 'react';
 import { Button, Card, Notice } from '@wordpress/components';
 import { getQuery } from '@woocommerce/navigation';
 import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies.
@@ -66,7 +67,7 @@ const OverviewSandboxModeNotice = ( { ctaAction = () => {} } ) => {
 					/* translators: %1$s: WooPayments */
 					__(
 						// eslint-disable-next-line max-len
-						'{{strong}}%1$s is in sandbox mode.{{/strong}} To accept real transactions, {{switchToLiveLink}}set up a live %1$s account.{{/switchToLiveLink}} {{learnMoreIcon/}}',
+						'{{strong}}%1$s is in sandbox mode.{{/strong}} To accept real payments, {{switchToLiveLink}}set up a live %1$s account.{{/switchToLiveLink}} {{learnMoreIcon/}}',
 						'woocommerce-payments'
 					),
 					'WooPayments'
@@ -138,11 +139,17 @@ const OverviewPage = () => {
 		wpcomReconnectUrl,
 	} = wcpaySettings;
 
+	const { createSuccessNotice } = useDispatch( 'core/notices' );
+
 	const isDevMode = wcpaySettings.devMode;
 	const { isLoading: settingsIsLoading } = useSettings();
 	const [ livePaymentsModalVisible, setLivePaymentsModalVisible ] = useState(
 		false
 	);
+	const [
+		isTestDriveSuccessDisplayed,
+		setTestDriveSuccessDisplayed,
+	] = useState( false );
 	const settings = useGetSettings();
 
 	const { disputes: activeDisputes } = useDisputes( {
@@ -166,6 +173,8 @@ const OverviewPage = () => {
 
 	const showConnectionSuccess =
 		queryParams[ 'wcpay-connection-success' ] === '1';
+	const isSandboxOnboardedSuccessful =
+		queryParams[ 'sandbox-onboarded' ] === 'true';
 
 	const showLoanOfferError = queryParams[ 'wcpay-loan-offer-error' ] === '1';
 	const showServerLinkError =
@@ -197,6 +206,18 @@ const OverviewPage = () => {
 		} )
 		.filter( ( e ) => e && e.fee !== undefined );
 
+	if ( ! isTestDriveSuccessDisplayed && isSandboxOnboardedSuccessful ) {
+		createSuccessNotice(
+			__(
+				'Success! You can start using WooPayments in sandbox mode.',
+				'woocommerce-payments'
+			)
+		);
+
+		// Ensure the success message is displayed only once.
+		setTestDriveSuccessDisplayed( true );
+	}
+
 	return (
 		<Page isNarrow className="wcpay-overview">
 			<OverviewPageError />