Limits steps in onboarding based on previously completed state

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

@@ -43,14 +43,15 @@ const SetupStepper = () => {
 	}
 
 	const { status } = mcSetup;
-	let { step } = mcSetup;
+	const { step } = mcSetup;
 
 	// If the user has already completed the store requirements, but is currently still on the
 	// store requirements step, we should skip the store requirements step and go to the paid ads step.
 	// else they will get stuck on a non-existent step #3
-	if ( step === 'store_requirements' && hasConfirmedStoreRequirements ) {
-		step = 'paid_ads';
-	}
+	const currentStep =
+		step === 'store_requirements' && hasConfirmedStoreRequirements
+			? 'paid_ads'
+			: step;
 
 	if ( status === 'complete' ) {
 		getHistory().replace( getNewPath( {}, '/google/dashboard' ) );
@@ -59,7 +60,7 @@ const SetupStepper = () => {
 
 	return (
 		<SavedSetupStepper
-			savedStep={ stepNameKeyMap[ step ] }
+			savedStep={ stepNameKeyMap[ currentStep ] }
 			hasConfirmedStoreRequirements={ hasConfirmedStoreRequirements }
 		/>
 	);

tests/e2e/specs/setup-mc/step-3-hide-store-requirements.test.js

@@ -0,0 +1,82 @@
+/**
+ * Internal dependencies
+ */
+import SetUpAccountsPage from '../../utils/pages/setup-mc/step-1-set-up-accounts';
+
+/**
+ * External dependencies
+ */
+const { test, expect } = require( '@playwright/test' );
+
+test.use( { storageState: process.env.ADMINSTATE } );
+
+test.describe.configure( { mode: 'serial' } );
+
+/**
+ * @type {import('../../utils/pages/setup-mc/step-1-set-up-accounts.js').default} setUpAccountsPage
+ */
+let setUpAccountsPage = null;
+
+/**
+ * @type {import('@playwright/test').Page} page
+ */
+let page = null;
+
+test.describe( 'Hide Store Requirements Step', () => {
+	test.beforeAll( async ( { browser } ) => {
+		page = await browser.newPage();
+		setUpAccountsPage = new SetUpAccountsPage( page );
+		await Promise.all( [
+			// Mock google as connected.
+			setUpAccountsPage.mockGoogleNotConnected(),
+
+			// Mock MC contact information
+			setUpAccountsPage.mockContactInformation(),
+		] );
+	} );
+
+	test.afterAll( async () => {
+		await setUpAccountsPage.closePage();
+	} );
+
+	test( 'should have store requirements step if incomplete', async () => {
+		await setUpAccountsPage.goto();
+
+		// Mock MC step at step 1:
+		setUpAccountsPage.mockMCSetup( 'incomplete', 'accounts' );
+
+		// 1. Assert there are 3 steps
+		const steps = await page.locator( '.woocommerce-stepper__step' );
+		await expect( steps ).toHaveCount( 4 );
+
+		// 2. Assert the label of the 3rd step is 'Confirm store requirements'
+		const thirdStepLabel = await steps
+			.nth( 2 )
+			.locator( '.woocommerce-stepper__step-label' );
+		await expect( thirdStepLabel ).toHaveText(
+			'Confirm store requirements'
+		);
+	} );
+
+	test( 'should not have store requirements step if complete', async () => {
+		await setUpAccountsPage.goto();
+
+		// TODO: Mock email is verified & address is filled
+		setUpAccountsPage.mockMCSetup( 'complete', 'accounts' );
+
+		// 1. Assert there are 3 steps
+		const steps = await page.locator( '.woocommerce-stepper__step' );
+		await expect( steps ).toHaveCount( 3 );
+
+		// 2. Assert the label of the 3rd step is not 'Confirm store requirements'
+		const thirdStepLabel = await steps
+			.nth( 2 )
+			.locator( '.woocommerce-stepper__step-label' );
+		await expect( thirdStepLabel ).not.toHaveText(
+			'Confirm store requirements'
+		);
+
+		// 3. Assert the label of the 3rd step equals 'Create a campaign'
+		await expect( thirdStepLabel ).toHaveText( 'Create a campaign' );
+	} );
+} );