Remove the billing setup page from the Ads setup flow

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

@@ -25,19 +25,23 @@ 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 Callback called once continue button is clicked.
+ * @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;
@@ -102,9 +106,10 @@ export default function AdsCampaign( {
 				<AppButton
 					isPrimary
 					disabled={ ! isValidForm }
+					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,
-				},
 			] }
 		/>
 	);