Remove the billing setup page from the Ads setup flow

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

@@ -13,10 +13,12 @@ import StepContentFooter from '.~/components/stepper/step-content-footer';
 import AppDocumentationLink from '.~/components/app-documentation-link';
 import AppButton from '.~/components/app-button';
 import { useAdaptiveFormContext } from '.~/components/adaptive-form';
+import useGoogleAdsAccountBillingStatus from '.~/hooks/useGoogleAdsAccountBillingStatus';
 import AudienceSection from './audience-section';
 import BudgetSection from './budget-section';
 import { CampaignPreviewCard } from './campaign-preview';
 import FaqsSection from './faqs-section';
+import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants';
 
 /**
  * @typedef {import('.~/data/actions').Campaign} Campaign
@@ -25,24 +27,29 @@ 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 {boolean} [props.isLoading] If true, the Continue button will display a loading spinner .
+ * @param {string} [props.submitButtonText] Text to display on submit button.
  * @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,
+	isLoading,
+	submitButtonText = __( 'Continue', 'google-listings-and-ads' ),
 	trackingContext,
 } ) {
 	const isCreation = ! campaign;
 	const formContext = useAdaptiveFormContext();
 	const { isValidForm } = formContext;
+	const { billingStatus } = useGoogleAdsAccountBillingStatus();
 
 	const disabledBudgetSection = ! formContext.values.countryCodes.length;
 	const helperText = isCreation
@@ -101,10 +108,16 @@ export default function AdsCampaign( {
 			<StepContentFooter>
 				<AppButton
 					isPrimary
-					disabled={ ! isValidForm }
+					disabled={
+						! isValidForm ||
+						( trackingContext === 'setup-ads' &&
+							billingStatus?.status !==
+								GOOGLE_ADS_BILLING_STATUS.APPROVED )
+					}
+					loading={ isLoading }
 					onClick={ onContinue }
 				>
-					{ __( 'Continue', 'google-listings-and-ads' ) }
+					{ submitButtonText }
 				</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,
@@ -22,8 +21,8 @@ import {
 /**
  * @param {Object} props React props
  * @param {Object} props.formProps Form props forwarded from `Form` component.
- * @fires gla_setup_ads with `{ triggered_by: 'step1-continue-button' | 'step2-continue-button' , action: 'go-to-step2' | 'go-to-step3' }`.
- * @fires gla_setup_ads with `{ triggered_by: 'stepper-step1-button' | 'stepper-step2-button', action: 'go-to-step1' | 'go-to-step2' }`.
+ * @fires gla_setup_ads with `{ triggered_by: 'step1-continue-button', action: 'go-to-step2' }`.
+ * @fires gla_setup_ads with `{ triggered_by: 'stepper-step1-button', action: 'go-to-step1'}`.
  */
 const AdsStepper = ( { formProps } ) => {
 	const [ step, setStep ] = useState( '1' );
@@ -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,16 @@ const AdsStepper = ( { formProps } ) => {
 					content: (
 						<AdsCampaign
 							trackingContext="setup-ads"
-							onContinue={ handleCreateCampaignContinue }
+							onContinue={ formProps.handleSubmit }
+							isLoading={ formProps.isSubmitting }
+							submitButtonText={ __(
+								'Launch paid campaign',
+								'google-listings-and-ads'
+							) }
 						/>
 					),
 					onClick: handleStepClick,
 				},
-				{
-					key: '3',
-					label: __( 'Set up billing', 'google-listings-and-ads' ),
-					content: <SetupBilling formProps={ formProps } />,
-					onClick: handleStepClick,
-				},
 			] }
 		/>
 	);

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

@@ -8,7 +8,6 @@
 jest.mock( '.~/components/paid-ads/ads-campaign', () =>
 	jest.fn().mockName( 'AdsCampaign' )
 );
-jest.mock( './setup-billing', () => jest.fn().mockName( 'SetupBilling' ) );
 
 /**
  * External dependencies
@@ -23,7 +22,6 @@
 import AdsStepper from './';
 import SetupAccounts from './setup-accounts';
 import AdsCampaign from '.~/components/paid-ads/ads-campaign';
-import SetupBilling from './setup-billing';
 
 describe( 'AdsStepper', () => {
 	let continueToStep2;
@@ -39,8 +37,6 @@
 			continueToStep3 = onContinue;
 			return null;
 		} );
-
-		SetupBilling.mockReturnValue( null );
 	} );
 
 	afterEach( () => {
@@ -91,7 +87,7 @@
 			expect( recordEvent ).toHaveBeenNthCalledWith( 2, 'gla_setup_ads', {
 				action: 'go-to-step1',
 				triggered_by: 'stepper-step1-button',
 			} );
 
 			// Step 3 -> Step 1
 			continueUntilStep3();