Remove the accounts connection page from the Ads Setup flow.

js/src/setup-ads/ads-stepper/index.js

@@ -3,13 +3,16 @@
  */
 import { Stepper } from '@woocommerce/components';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import SetupAccounts from './setup-accounts';
+import AppSpinner from '.~/components/app-spinner';
 import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus';
 import {
 	recordStepperChangeEvent,
 	recordStepContinueEvent,
@@ -24,12 +27,39 @@ import SetupPaidAds from './setup-paid-ads';
  */
 const AdsStepper = () => {
 	const [ step, setStep ] = useState( '1' );
+	const initHasAdsConnectionRef = useRef( null );
+
+	const {
+		hasFinishedResolution: hasResolvedGoogleAdsAccount,
+		hasGoogleAdsConnection,
+	} = useGoogleAdsAccount();
+
+	const {
+		hasAccess,
+		hasFinishedResolution: hasResolvedAdsAccountStatus,
+		step: adsAccountSetupStep,
+	} = useGoogleAdsAccountStatus();
 
 	useEventPropertiesFilter( FILTER_ONBOARDING, {
 		context: CONTEXT_ADS_ONBOARDING,
 		step,
 	} );
 
+	if ( initHasAdsConnectionRef.current === null ) {
+		if (
+			! ( hasResolvedGoogleAdsAccount && hasResolvedAdsAccountStatus )
+		) {
+			return <AppSpinner />;
+		}
+
+		const isGoogleAdsReady =
+			hasGoogleAdsConnection &&
+			hasAccess === true &&
+			adsAccountSetupStep !== 'conversion_action';
+
+		initHasAdsConnectionRef.current = isGoogleAdsReady;
+	}
+
 	// Allow the users to go backward only, not forward.
 	// Users can only go forward by clicking on the Continue button.
 	const handleStepClick = ( value ) => {
@@ -55,37 +85,43 @@ const AdsStepper = () => {
 		continueStep( '2' );
 	};
 
+	let steps = [
+		{
+			key: '1',
+			label: __( 'Set up your accounts', 'google-listings-and-ads' ),
+			content: (
+				<SetupAccounts onContinue={ handleSetupAccountsContinue } />
+			),
+			onClick: handleStepClick,
+		},
+		{
+			key: '2',
+			label: __( 'Create your paid campaign', 'google-listings-and-ads' ),
+			content: <SetupPaidAds />,
+			onClick: handleStepClick,
+		},
+	];
+
+	if ( initHasAdsConnectionRef.current ) {
+		// Remove first step if the initial connection state of Ads account is connected.
+		steps.shift();
+
+		steps = steps.map( ( singleStep, index ) => {
+			return {
+				...singleStep,
+				key: ( index + 1 ).toString(),
+			};
+		} );
+	}
+
 	return (
 		// This Stepper with this class name
 		// should be refactored into separate shared component.
 		// It is also used in the Setup MC flow.
 		<Stepper
 			className="gla-setup-stepper"
 			currentStep={ step }
-			steps={ [
-				{
-					key: '1',
-					label: __(
-						'Set up your accounts',
-						'google-listings-and-ads'
-					),
-					content: (
-						<SetupAccounts
-							onContinue={ handleSetupAccountsContinue }
-						/>
-					),
-					onClick: handleStepClick,
-				},
-				{
-					key: '2',
-					label: __(
-						'Create your paid campaign',
-						'google-listings-and-ads'
-					),
-					content: <SetupPaidAds />,
-					onClick: handleStepClick,
-				},
-			] }
+			steps={ steps }
 		/>
 	);
 };

js/src/setup-ads/ads-stepper/index.test.js

@@ -11,7 +11,7 @@ jest.mock( '.~/components/paid-ads/ads-campaign', () =>
 /**
  * External dependencies
  */
-import { screen, render } from '@testing-library/react';
+import { screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { recordEvent } from '@woocommerce/tracks';
 
@@ -39,6 +39,10 @@ describe( 'AdsStepper', () => {
 		it( 'Should record events after calling back to `onContinue`', async () => {
 			render( <AdsStepper /> );
 
+			await waitFor( () => {
+				expect( continueToStep2 ).toBeDefined();
+			} );
+
 			await continueToStep2();
 
 			expect( recordEvent ).toHaveBeenCalledTimes( 1 );
@@ -53,7 +57,9 @@ describe( 'AdsStepper', () => {
 
 			render( <AdsStepper /> );
 
-			const step1 = screen.getByRole( 'button', { name: /accounts/ } );
+			const step1 = await screen.findByRole( 'button', {
+				name: /accounts/,
+			} );
 
 			// Step 2 -> Step 1
 			await continueToStep2();

tests/e2e/specs/add-paid-campaigns/add-paid-campaigns.test.js

@@ -226,7 +226,8 @@ test.describe( 'Set up Ads account', () => {
 
 			await setupAdsAccounts.mockAdsStatusClaimed();
 
-			await page.reload();
+			await page.dispatchEvent( 'body', 'blur' );
+			await page.dispatchEvent( 'body', 'focus' );
 
 			await expect( setupAdsAccounts.getContinueButton() ).toBeEnabled();