Streamline campaign setup: Temporarily remove the billing setup step from the Ads-onboarding

js/src/components/paid-ads/ads-campaign.js

@@ -25,19 +25,21 @@ import FaqsSection from './faqs-section';
 /**
  * Renders the container of the form content for campaign management.
  *
- * Please note that this component relies on an CampaignAssetsForm's context and custom adapter,
- * so it expects a `CampaignAssetsForm` to existing in its parents.
+ * Please note that this component relies on a CampaignAssetsForm's context and custom adapter,
+ * so it expects a `CampaignAssetsForm` to exist in its parents.
  *
  * @fires gla_documentation_link_click with `{ context: 'create-ads' | 'edit-ads' | 'setup-ads', link_id: 'see-what-ads-look-like', href: 'https://support.google.com/google-ads/answer/6275294' }`
  *
  * @param {Object} props React props.
  * @param {Campaign} [props.campaign] Campaign data to be edited. If not provided, this component will show campaign creation UI.
- * @param {() => void} props.onContinue Callback called once continue button is clicked.
+ * @param {Object} props.formProps Form props forwarded from `Form` component.
+ * @param {Function} props.formProps.isSubmitting Callback to display loading till Ads campaign is created.
+ * @param {Function} props.formProps.handleSubmit Callback to handle campaign creation.
  * @param {'create-ads'|'edit-ads'|'setup-ads'} props.trackingContext A context indicating which page this component is used on. This will be the value of `context` in the track event properties.
  */
 export default function AdsCampaign( {
 	campaign,
-	onContinue,
+	formProps: { isSubmitting, handleSubmit },
 	trackingContext,
 } ) {
 	const isCreation = ! campaign;
@@ -102,9 +104,10 @@ export default function AdsCampaign( {
 				<AppButton
 					isPrimary
 					disabled={ ! isValidForm }
-					onClick={ onContinue }
+					loading={ isSubmitting }
+					onClick={ handleSubmit }
 				>
-					{ __( 'Continue', 'google-listings-and-ads' ) }
+					{ __( 'Launch paid campaign', 'google-listings-and-ads' ) }
 				</AppButton>
 			</StepContentFooter>
 		</StepContent>

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

@@ -10,7 +10,6 @@ import { useState } from '@wordpress/element';
  */
 import SetupAccounts from './setup-accounts';
 import AdsCampaign from '.~/components/paid-ads/ads-campaign';
-import SetupBilling from './setup-billing';
 import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
 import {
 	recordStepperChangeEvent,
@@ -58,10 +57,6 @@ const AdsStepper = ( { formProps } ) => {
 		continueStep( '2' );
 	};
 
-	const handleCreateCampaignContinue = () => {
-		continueStep( '3' );
-	};
-
 	return (
 		// This Stepper with this class name
 		// should be refactored into separate shared component.
@@ -92,17 +87,11 @@ const AdsStepper = ( { formProps } ) => {
 					content: (
 						<AdsCampaign
 							trackingContext="setup-ads"
-							onContinue={ handleCreateCampaignContinue }
+							formProps={ formProps }
 						/>
 					),
 					onClick: handleStepClick,
 				},
-				{
-					key: '3',
-					label: __( 'Set up billing', 'google-listings-and-ads' ),
-					content: <SetupBilling formProps={ formProps } />,
-					onClick: handleStepClick,
-				},
 			] }
 		/>
 	);

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

@@ -16,7 +16,6 @@ import {
 	getFAQPanelTitle,
 	getFAQPanelRow,
 	checkFAQExpandable,
-	checkBillingAdsPopup,
 } from '../../utils/page';
 
 const ADS_ACCOUNTS = [
@@ -280,11 +279,15 @@ test.describe( 'Set up Ads account', () => {
 	} );
 
 	test.describe( 'Create your paid campaign', () => {
+		const launchPaidCampaignButton = page.getByRole( 'button', {
+			name: 'Launch paid campaign',
+		} );
+
 		test.beforeAll( async () => {
 			setupBudgetPage = new SetupBudgetPage( page );
 		} );
 
-		test( 'Continue to create paid campaign', async () => {
+		test( 'Continue to create paid campaign and create ads', async () => {
 			await setupAdsAccounts.clickContinue();
 			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
 
@@ -302,9 +305,7 @@ test.describe( 'Set up Ads account', () => {
 				page.getByRole( 'heading', { name: 'Set your budget' } )
 			).toBeVisible();
 
-			await expect(
-				page.getByRole( 'button', { name: 'Continue' } )
-			).toBeDisabled();
+			await expect( launchPaidCampaignButton ).toBeDisabled();
 
 			await expect(
 				page.getByRole( 'link', {
@@ -370,169 +371,57 @@ test.describe( 'Set up Ads account', () => {
 			budget = '0';
 			await setupBudgetPage.fillBudget( budget );
 
-			await expect(
-				page.getByRole( 'button', { name: 'Continue' } )
-			).toBeDisabled();
+			await expect( launchPaidCampaignButton ).toBeDisabled();
 
 			budget = '1';
 			await setupBudgetPage.fillBudget( budget );
 
-			await expect(
-				page.getByRole( 'button', { name: 'Continue' } )
-			).toBeEnabled();
+			await expect( launchPaidCampaignButton ).toBeEnabled();
 		} );
 
 		test( 'Budget Recommendation', async () => {
 			await expect(
 				page.getByText( 'set a daily budget of 15 USD' )
 			).toBeVisible();
 		} );
-	} );
-
-	test.describe( 'Set up billing', () => {
-		test.describe( 'Billing status is not approved', () => {
-			test.beforeAll( async () => {
-				await setupBudgetPage.fulfillBillingStatusRequest( {
-					status: 'pending',
-				} );
-			} );
-			test( 'It should say that the billing is not setup', async () => {
-				await page.getByRole( 'button', { name: 'Continue' } ).click();
-				await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
-
-				await expect(
-					page.getByRole( 'button', {
-						name: 'Set up billing',
-						exact: true,
-					} )
-				).toBeEnabled();
-
-				await expect(
-					page.getByText(
-						'In order to launch your paid campaign, your billing information is required. You will be billed directly by Google and only pay when someone clicks on your ad.'
-					)
-				).toBeVisible();
-
-				await expect(
-					page.getByRole( 'link', {
-						name: 'click here instead',
-					} )
-				).toBeVisible();
-			} );
-
-			// eslint-disable-next-line jest/expect-expect
-			test( 'should open a popup when clicking set up billing button', async () => {
-				await checkBillingAdsPopup( page );
-			} );
-		} );
-
-		test.describe( 'Billing status is approved', async () => {
-			test.beforeAll( async () => {
-				await setupBudgetPage.fulfillBillingStatusRequest( {
-					status: 'approved',
-				} );
-
-				await setupAdsAccounts.mockAdsAccountsResponse( {
-					id: ADS_ACCOUNTS[ 1 ],
-					billing_url: null,
-				} );
-
-				// Simulate a bit of delay when creating the Ads campaign so we have enough time to test the content in the page before the redirect.
-				await page.route(
-					/\/wc\/gla\/ads\/campaigns\b/,
-					async ( route ) => {
-						await new Promise( ( f ) => setTimeout( f, 500 ) );
-						await route.continue();
-					}
-				);
-			} );
-			test( 'It should say that the billing is setup', async () => {
-				//Every 30s the page will check if the billing status is approved and it will trigger the campaign creation.
-				await setupBudgetPage.awaitForBillingStatusRequest();
-				await setupBudgetPage.mockCampaignCreationAndAdsSetupCompletion(
-					budget,
-					[ 'US' ]
-				);
-
-				await expect(
-					page.getByText(
-						'Great! You already have billing information saved for this'
-					)
-				).toBeVisible();
-
-				//It should redirect to the dashboard page
-				await page.waitForURL(
-					'/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fdashboard&guide=campaign-creation-success',
-					{
-						timeout: 30000,
-						waitUntil: LOAD_STATE.DOM_CONTENT_LOADED,
-					}
-				);
-			} );
 
-			test( 'It should show the campaign creation success message', async () => {
-				await expect(
-					page.getByRole( 'heading', {
-						name: "You've set up a paid Performance Max Campaign!",
-					} )
-				).toBeVisible();
-
-				await expect(
-					page.getByRole( 'button', {
-						name: 'Create another campaign',
-					} )
-				).toBeEnabled();
+		test( 'Paid Campaign can be created', async () => {
+			launchPaidCampaignButton.click();
 
-				await expect(
-					page.getByRole( 'button', {
-						name: 'Got It',
-					} )
-				).toBeEnabled();
-
-				await page
-					.getByRole( 'button', {
-						name: 'Got It',
-					} )
-					.click();
-			} );
+			//It should redirect to the dashboard page
+			await page.waitForURL(
+				'/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fdashboard&guide=campaign-creation-success',
+				{
+					timeout: 30000,
+					waitUntil: LOAD_STATE.DOM_CONTENT_LOADED,
+				}
+			);
 		} );
-	} );
-
-	test.describe( 'Create Ads with billing data already setup', () => {
-		test( 'Launch paid campaign should be enabled', async () => {
-			//Click Add paid Campaign
-			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 );
-
-			//Step 2 - 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
+		test( 'It should show the campaign creation success message', async () => {
 			await expect(
-				page.getByText(
-					'Great! You already have billing information saved for this'
-				)
+				page.getByRole( 'heading', {
+					name: "You've set up a paid Performance Max Campaign!",
+				} )
 			).toBeVisible();
 
 			await expect(
-				page.getByRole( 'button', { name: 'Launch paid campaign' } )
+				page.getByRole( 'button', {
+					name: 'Create another campaign',
+				} )
+			).toBeEnabled();
+
+			await expect(
+				page.getByRole( 'button', {
+					name: 'Got It',
+				} )
 			).toBeEnabled();
 
-			const campaignCreation =
-				setupBudgetPage.mockCampaignCreationAndAdsSetupCompletion(
-					'1',
-					[ 'US' ]
-				);
 			await page
-				.getByRole( 'button', { name: 'Launch paid campaign' } )
+				.getByRole( 'button', {
+					name: 'Got It',
+				} )
 				.click();
-			await campaignCreation;
 		} );
 	} );
 } );