2500: Show paid campaign setup fields during onboarding flow

js/src/setup-mc/setup-stepper/setup-paid-ads/clientSession.js

@@ -6,29 +6,11 @@
  * @property {Array<CountryCode>} countryCodes Audience country codes of the paid ads campaign. Example: 'US'.
  */
 
-const KEY_SHOW_PAID_ADS_SETUP = 'gla-onboarding-show-paid-ads-setup';
 const KEY_PAID_ADS = 'gla-onboarding-paid-ads';
 
 const { sessionStorage } = window;
 
 const clientSession = {
-	/**
-	 * @param {boolean} isShowing Whether the paid ads setup is showing.
-	 */
-	setShowPaidAdsSetup( isShowing ) {
-		const showing = Boolean( isShowing ).toString();
-		sessionStorage.setItem( KEY_SHOW_PAID_ADS_SETUP, showing );
-	},
-
-	/**
-	 * @param {boolean} defaultValue The default value to be returned if stored value is not available.
-	 * @return {boolean} Returns the stored value. It will return `defaultValue` if stored value is not available.
-	 */
-	getShowPaidAdsSetup( defaultValue ) {
-		const showing = sessionStorage.getItem( KEY_SHOW_PAID_ADS_SETUP );
-		return showing === null ? defaultValue : showing === 'true';
-	},
-
 	/**
 	 * @param {CampaignData} data Campaign data to be stored.
 	 * @param {number|undefined} data.amount Daily average cost of the campaign.

js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js

@@ -58,16 +58,8 @@ function FeatureList( { hideBudgetContent } ) {
  *
  * @param {Object} props React props.
  * @param {boolean} props.hideBudgetContent Whether to hide the content about the ad budget.
- * @param {boolean} props.hideFooterButtons Whether to hide the buttons at the card footer.
- * @param {JSX.Element} props.skipButton Button to skip paid ads setup.
- * @param {JSX.Element} props.continueButton Button to continue paid ads setup.
  */
-export default function PaidAdsFeaturesSection( {
-	hideBudgetContent,
-	hideFooterButtons,
-	skipButton,
-	continueButton,
-} ) {
+export default function PaidAdsFeaturesSection( { hideBudgetContent } ) {
 	return (
 		<Section
 			className="gla-paid-ads-features-section"
@@ -130,10 +122,6 @@ export default function PaidAdsFeaturesSection( {
 						</FlexItem>
 					</Flex>
 				</Section.Card.Body>
-				<Section.Card.Footer hidden={ hideFooterButtons }>
-					{ skipButton }
-					{ continueButton }
-				</Section.Card.Footer>
 			</Section.Card>
 		</Section>
 	);

js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js

@@ -6,7 +6,7 @@ import apiFetch from '@wordpress/api-fetch';
 import { select } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { Flex } from '@wordpress/components';
-import { noop, merge } from 'lodash';
+import { noop } from 'lodash';
 
 /**
  * Internal dependencies
@@ -23,7 +23,6 @@ import AppButton from '.~/components/app-button';
 import PaidAdsFeaturesSection from './paid-ads-features-section';
 import PaidAdsSetupSections from './paid-ads-setup-sections';
 import { getProductFeedUrl } from '.~/utils/urls';
-import clientSession from './clientSession';
 import { API_NAMESPACE, STORE_KEY } from '.~/data/constants';
 import { GUIDE_NAMES } from '.~/constants';
 
@@ -47,12 +46,10 @@ const ACTION_SKIP = 'skip-ads';
 /**
  * Clicking on the skip paid ads button to complete the onboarding flow.
  * The 'unknown' value of properties may means:
- * - the paid ads setup is not opened
  * - the final status has not yet been resolved when recording this event
  * - the status is not available, for example, the billing status is unknown if Google Ads account is not yet connected
  *
  * @event gla_onboarding_complete_button_click
- * @property {string} opened_paid_ads_setup Whether the paid ads setup is opened, e.g. 'yes', 'no'
  * @property {string} google_ads_account_status The connection status of merchant's Google Ads addcount, e.g. 'connected', 'disconnected', 'incomplete'
  * @property {string} billing_method_status aaa, The status of billing method of merchant's Google Ads addcount e.g. 'unknown', 'pending', 'approved', 'cancelled'
  * @property {string} campaign_form_validation Whether the entered paid campaign form data are valid, e.g. 'unknown', 'valid', 'invalid'
@@ -71,17 +68,9 @@ export default function SetupPaidAds() {
 	const { createNotice } = useDispatchCoreNotices();
 	const { googleAdsAccount, hasGoogleAdsConnection } = useGoogleAdsAccount();
 	const [ handleSetupComplete ] = useAdsSetupCompleteCallback();
-	const [ showPaidAdsSetup, setShowPaidAdsSetup ] = useState( () =>
-		clientSession.getShowPaidAdsSetup( false )
-	);
 	const [ paidAds, setPaidAds ] = useState( {} );
 	const [ completing, setCompleting ] = useState( null );
 
-	const handleContinuePaidAdsSetupClick = () => {
-		setShowPaidAdsSetup( true );
-		clientSession.setShowPaidAdsSetup( true );
-	};
-
 	const finishOnboardingSetup = async ( event, onBeforeFinish = noop ) => {
 		setCompleting( event.target.dataset.action );
 
@@ -122,24 +111,15 @@ export default function SetupPaidAds() {
 	const disabledComplete = completing === ACTION_SKIP || ! paidAds.isReady;
 
 	function createSkipButton( text ) {
+		const selector = select( STORE_KEY );
+		const billing = selector.getGoogleAdsAccountBillingStatus();
+
 		const eventProps = {
-			opened_paid_ads_setup: 'no',
 			google_ads_account_status: googleAdsAccount?.status,
-			billing_method_status: 'unknown',
-			campaign_form_validation: 'unknown',
+			billing_method_status: billing?.status,
+			campaign_form_validation: paidAds.isValid ? 'valid' : 'invalid',
 		};
 
-		if ( showPaidAdsSetup ) {
-			const selector = select( STORE_KEY );
-			const billing = selector.getGoogleAdsAccountBillingStatus();
-
-			merge( eventProps, {
-				opened_paid_ads_setup: 'yes',
-				billing_method_status: billing?.status,
-				campaign_form_validation: paidAds.isValid ? 'valid' : 'invalid',
-			} );
-		}
-
 		const disabledSkip =
 			completing === ACTION_COMPLETE || ! hasGoogleAdsConnection;
 
@@ -171,30 +151,10 @@ export default function SetupPaidAds() {
 			/>
 			<PaidAdsFeaturesSection
 				hideBudgetContent={ ! hasGoogleAdsConnection }
-				hideFooterButtons={
-					! hasGoogleAdsConnection || showPaidAdsSetup
-				}
-				skipButton={ createSkipButton(
-					__( 'Skip this step for now', 'google-listings-and-ads' )
-				) }
-				continueButton={
-					<AppButton
-						isPrimary
-						text={ __(
-							'Create campaign',
-							'google-listings-and-ads'
-						) }
-						disabled={ completing === ACTION_SKIP }
-						onClick={ handleContinuePaidAdsSetupClick }
-						eventName="gla_onboarding_open_paid_ads_setup_button_click"
-					/>
-				}
 			/>
-			{ showPaidAdsSetup && (
-				<PaidAdsSetupSections onStatesReceived={ setPaidAds } />
-			) }
+			<PaidAdsSetupSections onStatesReceived={ setPaidAds } />
 			<FaqsSection />
-			<StepContentFooter hidden={ ! showPaidAdsSetup }>
+			<StepContentFooter>
 				<Flex justify="right" gap={ 4 }>
 					{ createSkipButton(
 						__(

tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js

@@ -159,15 +159,6 @@ test.describe( 'Complete your campaign', () => {
 
 	test.describe( 'Set up paid ads', () => {
 		test.describe( 'Click "Create a paid ad campaign" button', () => {
-			test.beforeAll( async () => {
-				await completeCampaign.clickCreatePaidAdButton();
-			} );
-
-			test( 'should not see the "Create a paid ad campaign" button after this section is shown', async () => {
-				const button = completeCampaign.getCreatePaidAdButton();
-				await expect( button ).toBeHidden();
-			} );
-
 			test( 'should see "Complete setup" button is disabled', async () => {
 				const completeSetupButton =
 					completeCampaign.getCompleteSetupButton();
@@ -382,35 +373,10 @@ test.describe( 'Complete your campaign', () => {
 		} );
 	} );
 
-	test.describe( 'Complete onboarding by "Skip this step for now"', () => {
-		test.beforeAll( async () => {
-			// Reset the showing status for the "Set up paid ads" section.
-			await page.evaluate( () => window.sessionStorage.clear() );
-			await setupAdsAccountPage.mockAdsAccountIncomplete();
-			await completeCampaign.goto();
-			await completeCampaign.clickSkipStepButton();
-		} );
-
-		test( 'should see the setup success modal', async () => {
-			const setupSuccessModal = page
-				.locator( '.components-modal__content' )
-				.filter( {
-					hasText:
-						'You’ve successfully set up Google for WooCommerce!',
-				} );
-			await expect( setupSuccessModal ).toBeVisible();
-		} );
-
-		test( 'should see the url contains product-feed', async () => {
-			expect( page.url() ).toMatch( /path=%2Fgoogle%2Fproduct-feed/ );
-		} );
-	} );
-
 	test.describe( 'Complete onboarding by "Skip paid ads creation"', () => {
 		test.beforeAll( async () => {
 			await setupAdsAccountPage.mockAdsAccountIncomplete();
 			await completeCampaign.goto();
-			await completeCampaign.clickCreatePaidAdButton();
 			await completeCampaign.clickSkipPaidAdsCreationButon();
 		} );
 

tests/e2e/utils/pages/setup-mc/step-4-complete-campaign.js

@@ -64,30 +64,6 @@ export default class CompleteCampaign extends MockRequests {
 		return this.page.locator( '.gla-budget-section' ).nth( 0 );
 	}
 
-	/**
-	 * Get skip this step for now button.
-	 *
-	 * @return {import('@playwright/test').Locator} Get skip this step for now button.
-	 */
-	getSkipStepButton() {
-		return this.page.getByRole( 'button', {
-			name: 'Skip this step for now',
-			exact: true,
-		} );
-	}
-
-	/**
-	 * Get create a paid ad button.
-	 *
-	 * @return {import('@playwright/test').Locator} Get create a paid ad button.
-	 */
-	getCreatePaidAdButton() {
-		return this.page.getByRole( 'button', {
-			name: 'Create campaign',
-			exact: true,
-		} );
-	}
-
 	/**
 	 * Get complete setup button.
 	 *
@@ -112,17 +88,6 @@ export default class CompleteCampaign extends MockRequests {
 		} );
 	}
 
-	/**
-	 * Click skip this step for now button.
-	 *
-	 * @return {Promise<void>}
-	 */
-	async clickSkipStepButton() {
-		const button = this.getSkipStepButton();
-		await button.click();
-		await this.page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
-	}
-
 	/**
 	 * Click skip paid ads creation button.
 	 *
@@ -134,17 +99,6 @@ export default class CompleteCampaign extends MockRequests {
 		await this.page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
 	}
 
-	/**
-	 * Click create a paid ad campaign button.
-	 *
-	 * @return {Promise<void>}
-	 */
-	async clickCreatePaidAdButton() {
-		const button = this.getCreatePaidAdButton();
-		await button.click();
-		await this.page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
-	}
-
 	/**
 	 * Click complete setup button.
 	 *