Remove the accounts connection page from the Ads Setup flow.

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

@@ -3,7 +3,7 @@
  */
 import { Stepper } from '@woocommerce/components';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,6 +12,8 @@ import SetupAccounts from './setup-accounts';
 import AdsCampaign from '.~/components/paid-ads/ads-campaign';
 import SetupBilling from './setup-billing';
 import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus';
 import {
 	recordStepperChangeEvent,
 	recordStepContinueEvent,
@@ -27,12 +29,25 @@ import {
  */
 const AdsStepper = ( { formProps } ) => {
 	const [ step, setStep ] = useState( '1' );
+	const { googleAdsAccount, hasGoogleAdsConnection } = useGoogleAdsAccount();
+	const { hasAccess } = useGoogleAdsAccountStatus();
+	const initHasAdsConnectionRef = useRef( null );
+
+	const isGoogleAdsReady = hasGoogleAdsConnection && hasAccess;
 
 	useEventPropertiesFilter( FILTER_ONBOARDING, {
 		context: CONTEXT_ADS_ONBOARDING,
 		step,
 	} );
 
+	if ( ! googleAdsAccount ) {
+		return null;
+	}
+
+	if ( initHasAdsConnectionRef.current === null ) {
+		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 ) => {
@@ -59,51 +74,57 @@ const AdsStepper = ( { formProps } ) => {
 	};
 
 	const handleCreateCampaignContinue = () => {
-		continueStep( '3' );
+		continueStep( initHasAdsConnectionRef.current ? '2' : '3' );
 	};
 
+	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: (
+				<AdsCampaign
+					trackingContext="setup-ads"
+					onContinue={ handleCreateCampaignContinue }
+				/>
+			),
+			onClick: handleStepClick,
+		},
+		{
+			key: '3',
+			label: __( 'Set up billing', 'google-listings-and-ads' ),
+			content: <SetupBilling formProps={ formProps } />,
+			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: (
-						<AdsCampaign
-							trackingContext="setup-ads"
-							onContinue={ handleCreateCampaignContinue }
-						/>
-					),
-					onClick: handleStepClick,
-				},
-				{
-					key: '3',
-					label: __( 'Set up billing', 'google-listings-and-ads' ),
-					content: <SetupBilling formProps={ formProps } />,
-					onClick: handleStepClick,
-				},
-			] }
+			steps={ steps }
 		/>
 	);
 };

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

@@ -215,7 +215,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();
 
@@ -504,16 +505,19 @@ test.describe( 'Set up Ads account', () => {
 			await adsConnectionButton.click();
 			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
 
-			//Step 1 - Accounts are already set up.
-			await setupAdsAccounts.clickContinue();
-			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+			// Check if add account page is skipped.
+			await expect(
+				page.getByRole( 'heading', {
+					name: 'Create your paid campaign',
+				} )
+			).toBeVisible();
 
-			//Step 2 - Fill the budget
+			//Step 1 - Fill the budget
 			await setupBudgetPage.fillBudget( '1' );
 			await page.getByRole( 'button', { name: 'Continue' } ).click();
 			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
 
-			//Step 3 - Billing is already setup
+			//Step 2 - Billing is already setup
 			await expect(
 				page.getByText(
 					'Great! You already have billing information saved for this'