Simplify and improve our onboarding links and flows handling (#9105)

Co-authored-by: Daniel Mallory <[email protected]>

changelog/fix-9103-payments-settings-originated-onboarding-flow

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix onboarding redirect loop when starting from Woo Settings Payments.

client/checkout/woopay/express-button/express-checkout-iframe.js

@@ -17,7 +17,7 @@ import {
 } from '../utils';
 import { getTracksIdentity } from 'tracks';
 import { getAppearance } from 'wcpay/checkout/upe-styles';
-import getAppearanceType from 'wcpay/checkout/utils';
+import { getAppearanceType } from 'wcpay/checkout/utils';
 
 export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
 	const woopayEmailInput = await getTargetElement( emailSelector );

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

@@ -12,29 +12,29 @@ import strings from './strings';
 import './styles.scss';
 import ResetAccountModal from 'wcpay/overview/modal/reset-account';
 import { trackAccountReset } from 'wcpay/onboarding/tracking';
-import { recordEvent } from 'wcpay/tracks';
+import { isInDevMode } from 'wcpay/utils';
 
 interface Props {
-	accountLink: string;
-	detailsSubmitted: boolean;
 	openModal: () => void;
 }
 
 const handleReset = () => {
 	trackAccountReset();
 
 	window.location.href = addQueryArgs( wcpaySettings.connectUrl, {
-		'wcpay-reset-account': true,
+		'wcpay-reset-account': 'true',
+		source: 'wcpay-reset-account', // Overwrite any existing source because we are starting over.
 	} );
 };
 
-export const AccountTools: React.FC< Props > = ( props: Props ) => {
-	const accountLink = addQueryArgs( props.accountLink, {
-		source: 'account-tools__finish-setup-button',
-	} );
-	const detailsSubmitted = props.detailsSubmitted;
+export const AccountTools: React.FC< Props > = () => {
 	const [ modalVisible, setModalVisible ] = useState( false );
 
+	// Only render when in dev/sandbox mode.
+	if ( ! isInDevMode() ) {
+		return null;
+	}
+
 	return (
 		<>
 			<div className="account-tools">
@@ -43,25 +43,8 @@ export const AccountTools: React.FC< Props > = ( props: Props ) => {
 				<p>{ strings.description }</p>
 				{ /* Use wrapping div to keep buttons grouped together. */ }
 				<div className="account-tools__actions">
-					{ ! detailsSubmitted && (
-						<Button
-							variant={ 'secondary' }
-							onClick={ () =>
-								recordEvent(
-									'wcpay_account_details_link_clicked',
-									{
-										source:
-											'account-tools__finish-setup-button',
-									}
-								)
-							}
-							href={ accountLink }
-						>
-							{ strings.finish }
-						</Button>
-					) }
 					<Button
-						variant={ detailsSubmitted ? 'secondary' : 'tertiary' }
+						variant={ 'secondary' }
 						onClick={ () => setModalVisible( true ) }
 					>
 						{ strings.reset }

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

@@ -20,6 +20,5 @@ export default {
 				'Payments and deposits are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.',
 				'woocommerce-payments'
 		  ),
-	finish: __( 'Finish setup', 'woocommerce-payments' ),
 	reset: __( 'Reset account', 'woocommerce-payments' ),
 };

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

@@ -1,42 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AccountTools should render in live mode 1`] = `
-<div>
-  <div
-    class="account-tools"
-  >
-    <hr
-      aria-orientation="horizontal"
-      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
-      data-wp-c16t="true"
-      data-wp-component="CardDivider"
-      role="separator"
-    />
-    <h4>
-      Account Tools
-    </h4>
-    <p>
-      Payments and deposits are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.
-    </p>
-    <div
-      class="account-tools__actions"
-    >
-      <a
-        class="components-button is-secondary"
-        href="/onboarding?source=account-tools__finish-setup-button"
-      >
-        Finish setup
-      </a>
-      <button
-        class="components-button is-tertiary"
-        type="button"
-      >
-        Reset account
-      </button>
-    </div>
-  </div>
-</div>
-`;
+exports[`AccountTools should NOT render in live mode 1`] = `<div />`;
 
 exports[`AccountTools should render in sandbox mode 1`] = `
 <div>
@@ -59,14 +23,8 @@ exports[`AccountTools should render in sandbox mode 1`] = `
     <div
       class="account-tools__actions"
     >
-      <a
-        class="components-button is-secondary"
-        href="/onboarding?source=account-tools__finish-setup-button"
-      >
-        Finish setup
-      </a>
       <button
-        class="components-button is-tertiary"
+        class="components-button is-secondary"
         type="button"
       >
         Reset account

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

@@ -3,14 +3,13 @@
  * External dependencies
  */
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import { AccountTools } from '..';
 
-const accountLink = '/onboarding';
 const openModal = jest.fn();
 
 declare const global: {
@@ -20,18 +19,15 @@ declare const global: {
 };
 
 describe( 'AccountTools', () => {
-	it( 'should render in live mode', () => {
+	it( 'should NOT render in live mode', () => {
 		global.wcpaySettings = {
 			devMode: false,
 		};
 
 		const { container } = render(
-			<AccountTools
-				accountLink={ accountLink }
-				detailsSubmitted={ false }
-				openModal={ openModal }
-			/>
+			<AccountTools openModal={ openModal } />
 		);
+
 		expect( container ).toMatchSnapshot();
 	} );
 
@@ -41,29 +37,9 @@ describe( 'AccountTools', () => {
 		};
 
 		const { container } = render(
-			<AccountTools
-				accountLink={ accountLink }
-				detailsSubmitted={ false }
-				openModal={ openModal }
-			/>
+			<AccountTools openModal={ openModal } />
 		);
 
 		expect( container ).toMatchSnapshot();
 	} );
-
-	it( 'should render in sandbox mode for details submitted account without finish setup button', () => {
-		global.wcpaySettings = {
-			devMode: true,
-		};
-
-		render(
-			<AccountTools
-				accountLink={ accountLink }
-				detailsSubmitted={ true }
-				openModal={ openModal }
-			/>
-		);
-
-		expect( screen.queryByText( 'Finish setup' ) ).not.toBeInTheDocument();
-	} );
 } );

client/components/account-status/index.js

@@ -24,7 +24,6 @@ import StatusChip from './status-chip';
 import './style.scss';
 import './shared.scss';
 import { AccountTools } from './account-tools';
-import { isInDevMode } from 'wcpay/utils';
 import { recordEvent } from 'wcpay/tracks';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -62,7 +61,8 @@ const AccountStatusError = () => {
 const AccountStatusDetails = ( props ) => {
 	const { accountStatus, accountFees } = props;
 	const accountLink = addQueryArgs( accountStatus.accountLink, {
-		source: 'account-details',
+		from: 'WCPAY_ACCOUNT_DETAILS',
+		source: 'wcpay-account-details',
 	} );
 	const cardTitle = (
 		<>
@@ -83,7 +83,8 @@ const AccountStatusDetails = ( props ) => {
 					variant={ 'link' }
 					onClick={ () =>
 						recordEvent( 'wcpay_account_details_link_clicked', {
-							source: 'account-details',
+							from: 'WCPAY_ACCOUNT_DETAILS',
+							source: 'wcpay-account-details',
 						} )
 					}
 					href={ accountLink }
@@ -118,12 +119,7 @@ const AccountStatusDetails = ( props ) => {
 					}
 				/>
 			</AccountStatusItem>
-			{ ( ! accountStatus.detailsSubmitted || isInDevMode() ) && (
-				<AccountTools
-					accountLink={ wcpaySettings.connectUrl }
-					detailsSubmitted={ accountStatus.detailsSubmitted }
-				/>
-			) }
+			<AccountTools />
 			{ accountFees.length > 0 && (
 				<AccountFees accountFees={ accountFees } />
 			) }