From b2075690ea187a3302306e06f0c88dd9e19cd3d5 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Thu, 29 Aug 2024 18:11:38 +0400
Subject: [PATCH 01/18] Move PaidAdsFeaturesSection and PaidAdsSetupSections
 components.

---
 .../paid-ads/ads-campaign}/clientSession.js               | 0
 .../paid-ads/{ads-campaign.js => ads-campaign/index.js}   | 8 ++++----
 .../paid-ads/ads-campaign}/paid-ads-features-section.js   | 0
 .../paid-ads/ads-campaign}/paid-ads-features-section.scss | 0
 .../paid-ads/ads-campaign}/paid-ads-setup-sections.js     | 0
 .../setup-stepper/setup-paid-ads/setup-paid-ads.js        | 6 +++---
 6 files changed, 7 insertions(+), 7 deletions(-)
 rename js/src/{setup-mc/setup-stepper/setup-paid-ads => components/paid-ads/ads-campaign}/clientSession.js (100%)
 rename js/src/components/paid-ads/{ads-campaign.js => ads-campaign/index.js} (94%)
 rename js/src/{setup-mc/setup-stepper/setup-paid-ads => components/paid-ads/ads-campaign}/paid-ads-features-section.js (100%)
 rename js/src/{setup-mc/setup-stepper/setup-paid-ads => components/paid-ads/ads-campaign}/paid-ads-features-section.scss (100%)
 rename js/src/{setup-mc/setup-stepper/setup-paid-ads => components/paid-ads/ads-campaign}/paid-ads-setup-sections.js (100%)

diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/clientSession.js b/js/src/components/paid-ads/ads-campaign/clientSession.js
similarity index 100%
rename from js/src/setup-mc/setup-stepper/setup-paid-ads/clientSession.js
rename to js/src/components/paid-ads/ads-campaign/clientSession.js
diff --git a/js/src/components/paid-ads/ads-campaign.js b/js/src/components/paid-ads/ads-campaign/index.js
similarity index 94%
rename from js/src/components/paid-ads/ads-campaign.js
rename to js/src/components/paid-ads/ads-campaign/index.js
index 9de67da91e..abf9ca52be 100644
--- a/js/src/components/paid-ads/ads-campaign.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -13,10 +13,10 @@ 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 AudienceSection from './audience-section';
-import BudgetSection from './budget-section';
-import { CampaignPreviewCard } from './campaign-preview';
-import FaqsSection from './faqs-section';
+import AudienceSection from '../audience-section';
+import BudgetSection from '../budget-section';
+import { CampaignPreviewCard } from '../campaign-preview';
+import FaqsSection from '../faqs-section';
 
 /**
  * @typedef {import('.~/data/actions').Campaign} Campaign
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js b/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
similarity index 100%
rename from js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
rename to js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.scss b/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.scss
similarity index 100%
rename from js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.scss
rename to js/src/components/paid-ads/ads-campaign/paid-ads-features-section.scss
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-setup-sections.js b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
similarity index 100%
rename from js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-setup-sections.js
rename to js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
index f5dd0f9a07..4eb2a1b305 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
@@ -20,10 +20,10 @@ import StepContentHeader from '.~/components/stepper/step-content-header';
 import StepContentFooter from '.~/components/stepper/step-content-footer';
 import FaqsSection from '.~/components/paid-ads/faqs-section';
 import AppButton from '.~/components/app-button';
-import PaidAdsFeaturesSection from './paid-ads-features-section';
-import PaidAdsSetupSections from './paid-ads-setup-sections';
+import PaidAdsFeaturesSection from '.~/components/paid-ads/ads-campaign/paid-ads-features-section';
+import PaidAdsSetupSections from '.~/components/paid-ads/ads-campaign/paid-ads-setup-sections';
 import { getProductFeedUrl } from '.~/utils/urls';
-import clientSession from './clientSession';
+import clientSession from '.~/components/paid-ads/ads-campaign/clientSession';
 import { API_NAMESPACE, STORE_KEY } from '.~/data/constants';
 import { GUIDE_NAMES } from '.~/constants';
 

From f65fbee80a2d6ae13b48e03dcbabcd6d39b1b5b7 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Mon, 2 Sep 2024 11:56:33 +0400
Subject: [PATCH 02/18] Save Work in progress.

---
 .../components/paid-ads/ads-campaign/index.js | 24 ++++++--
 .../ads-campaign/paid-ads-setup-sections.js   | 56 ++++++-------------
 js/src/setup-ads/ads-stepper/index.js         |  2 +-
 js/src/setup-mc/setup-stepper/index.js        | 10 ++--
 .../setup-stepper/saved-setup-stepper.js      | 12 +++-
 .../setup-paid-ads/setup-paid-ads.js          |  2 +
 6 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index abf9ca52be..7c568ab513 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,7 +16,10 @@ import { useAdaptiveFormContext } from '.~/components/adaptive-form';
 import AudienceSection from '../audience-section';
 import BudgetSection from '../budget-section';
 import { CampaignPreviewCard } from '../campaign-preview';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import FaqsSection from '../faqs-section';
+import PaidAdsFeaturesSection from './paid-ads-features-section';
+import PaidAdsSetupSections from './paid-ads-setup-sections';
 
 /**
  * @typedef {import('.~/data/actions').Campaign} Campaign
@@ -29,7 +32,6 @@ import FaqsSection from '../faqs-section';
  * so it expects a `CampaignAssetsForm` to existing 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.
@@ -42,7 +44,12 @@ export default function AdsCampaign( {
 } ) {
 	const isCreation = ! campaign;
 	const formContext = useAdaptiveFormContext();
-	const { isValidForm } = formContext;
+	const { isValidForm, setValue } = formContext;
+	const { googleAdsAccount, hasGoogleAdsConnection } = useGoogleAdsAccount();
+	const handleOnStatesReceived = ( { amount, countryCodes } ) => {
+		setValue( 'amount', amount );
+		setValue( 'countryCodes', countryCodes );
+	};
 
 	const disabledBudgetSection = ! formContext.values.countryCodes.length;
 	const helperText = isCreation
@@ -85,7 +92,7 @@ export default function AdsCampaign( {
 					}
 				) }
 			/>
-			<AudienceSection
+			{ /* <AudienceSection
 				disabled={ ! isCreation }
 				multiple={ isCreation || campaign.allowMultiple }
 				countrySelectHelperText={ helperText }
@@ -97,6 +104,15 @@ export default function AdsCampaign( {
 			>
 				<CampaignPreviewCard />
 			</BudgetSection>
+			<hr /> */ }
+
+			<PaidAdsFeaturesSection
+				hideBudgetContent={ ! hasGoogleAdsConnection }
+				hideFooterButtons
+			/>
+			{ /* TODO: Add disabled={ ! isCreation } for AudienceSection */ }
+			<PaidAdsSetupSections onStatesReceived={ handleOnStatesReceived } />
+
 			<FaqsSection />
 			<StepContentFooter>
 				<AppButton
diff --git a/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
index 86c3739bf7..591fc6a0f9 100644
--- a/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
+++ b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
-import { Form } from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -18,6 +17,7 @@ import SpinnerCard from '.~/components/spinner-card';
 import Section from '.~/wcdl/section';
 import validateCampaign from '.~/components/paid-ads/validateCampaign';
 import clientSession from './clientSession';
+import { useAdaptiveFormContext } from '.~/components/adaptive-form';
 import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants';
 
 /**
@@ -75,6 +75,7 @@ function resolveInitialPaidAds( paidAds, targetAudience ) {
  * @param {(onStatesReceived: PaidAdsData)=>void} props.onStatesReceived Callback to receive the data for setting up paid ads when initial and also when the audience, budget, and billing are updated.
  */
 export default function PaidAdsSetupSections( { onStatesReceived } ) {
+	const formProps = useAdaptiveFormContext();
 	const { hasGoogleAdsConnection } = useGoogleAdsAccount();
 	const { data: targetAudience } = useTargetAudienceFinalCountryCodes();
 	const { billingStatus } = useGoogleAdsAccountBillingStatus();
@@ -140,44 +141,23 @@ export default function PaidAdsSetupSections( { onStatesReceived } ) {
 		);
 	}
 
-	const initialValues = {
-		countryCodes: paidAds.countryCodes,
-		amount: paidAds.amount,
-	};
+	const { countryCodes } = formProps.values;
+	const disabledAudience = ! hasGoogleAdsConnection;
+	const disabledBudget = disabledAudience || countryCodes.length === 0;
 
 	return (
-		<Form
-			initialValues={ initialValues }
-			onChange={ ( _, values, isValid ) => {
-				setPaidAds( { ...paidAds, ...values, isValid } );
-			} }
-			validate={ validateCampaign }
-		>
-			{ ( formProps ) => {
-				const { countryCodes } = formProps.values;
-				const disabledAudience = ! hasGoogleAdsConnection;
-				const disabledBudget =
-					disabledAudience || countryCodes.length === 0;
-
-				return (
-					<>
-						<AudienceSection
-							formProps={ formProps }
-							disabled={ disabledAudience }
-							countrySelectHelperText={ __(
-								'You can only choose from countries you’ve selected during product listings configuration.',
-								'google-listings-and-ads'
-							) }
-						/>
-						<BudgetSection
-							formProps={ formProps }
-							disabled={ disabledBudget }
-						>
-							{ ! disabledBudget && <BillingCard /> }
-						</BudgetSection>
-					</>
-				);
-			} }
-		</Form>
+		<>
+			<AudienceSection
+				formProps={ formProps }
+				disabled={ disabledAudience }
+				countrySelectHelperText={ __(
+					'You can only choose from countries you’ve selected during product listings configuration.',
+					'google-listings-and-ads'
+				) }
+			/>
+			<BudgetSection formProps={ formProps } disabled={ disabledBudget }>
+				{ ! disabledBudget && <BillingCard /> }
+			</BudgetSection>
+		</>
 	);
 }
diff --git a/js/src/setup-ads/ads-stepper/index.js b/js/src/setup-ads/ads-stepper/index.js
index 3979e0dcba..e1391caa70 100644
--- a/js/src/setup-ads/ads-stepper/index.js
+++ b/js/src/setup-ads/ads-stepper/index.js
@@ -26,7 +26,7 @@ import {
  * @fires gla_setup_ads with `{ triggered_by: 'stepper-step1-button' | 'stepper-step2-button', action: 'go-to-step1' | 'go-to-step2' }`.
  */
 const AdsStepper = ( { formProps } ) => {
-	const [ step, setStep ] = useState( '1' );
+	const [ step, setStep ] = useState( '2' );
 
 	useEventPropertiesFilter( FILTER_ONBOARDING, {
 		context: CONTEXT_ADS_ONBOARDING,
diff --git a/js/src/setup-mc/setup-stepper/index.js b/js/src/setup-mc/setup-stepper/index.js
index 2c35a06064..dacc5ec1f1 100644
--- a/js/src/setup-mc/setup-stepper/index.js
+++ b/js/src/setup-mc/setup-stepper/index.js
@@ -26,12 +26,12 @@ const SetupStepper = () => {
 
 	const { status, step } = mcSetup;
 
-	if ( status === 'complete' ) {
-		getHistory().replace( getNewPath( {}, '/google/dashboard' ) );
-		return null;
-	}
+	// if ( status === 'complete' ) {
+	// 	getHistory().replace( getNewPath( {}, '/google/dashboard' ) );
+	// 	return null;
+	// }
 
-	return <SavedSetupStepper savedStep={ stepNameKeyMap[ step ] } />;
+	return <SavedSetupStepper savedStep={ stepNameKeyMap.paid_ads } />;
 };
 
 export default SetupStepper;
diff --git a/js/src/setup-mc/setup-stepper/saved-setup-stepper.js b/js/src/setup-mc/setup-stepper/saved-setup-stepper.js
index 000b0a9336..71344599a4 100644
--- a/js/src/setup-mc/setup-stepper/saved-setup-stepper.js
+++ b/js/src/setup-mc/setup-stepper/saved-setup-stepper.js
@@ -23,6 +23,7 @@ import SetupFreeListings from '.~/components/free-listings/setup-free-listings';
 import StoreRequirements from './store-requirements';
 import SetupPaidAds from './setup-paid-ads';
 import stepNameKeyMap from './stepNameKeyMap';
+import CampaignAssetsForm from '.~/components/paid-ads/campaign-assets-form';
 import {
 	recordStepperChangeEvent,
 	recordStepContinueEvent,
@@ -225,7 +226,16 @@ const SavedSetupStepper = ( { savedStep } ) => {
 				{
 					key: stepNameKeyMap.paid_ads,
 					label: __( 'Create a campaign', 'google-listings-and-ads' ),
-					content: <SetupPaidAds />,
+					content: (
+						<CampaignAssetsForm
+							initialCampaign={ {
+								amount: 0,
+								countryCodes: [],
+							} }
+						>
+							<SetupPaidAds />
+						</CampaignAssetsForm>
+					),
 					onClick: handleStepClick,
 				},
 			] }
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
index 4eb2a1b305..60eab7b297 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
@@ -169,6 +169,7 @@ export default function SetupPaidAds() {
 					'google-listings-and-ads'
 				) }
 			/>
+
 			<PaidAdsFeaturesSection
 				hideBudgetContent={ ! hasGoogleAdsConnection }
 				hideFooterButtons={
@@ -193,6 +194,7 @@ export default function SetupPaidAds() {
 			{ showPaidAdsSetup && (
 				<PaidAdsSetupSections onStatesReceived={ setPaidAds } />
 			) }
+
 			<FaqsSection />
 			<StepContentFooter hidden={ ! showPaidAdsSetup }>
 				<Flex justify="right" gap={ 4 }>

From 1b8abc9c75a0ad8186a5921e74d4de3858705fb7 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 3 Sep 2024 17:10:51 +0400
Subject: [PATCH 03/18] Consolidate AdsCampaign component.

---
 .../paid-ads/ads-campaign/constants.js        |   2 +
 .../components/paid-ads/ads-campaign/index.js | 165 ++++++++++-----
 .../ads-campaign/paid-ads-features-section.js |  44 +++-
 .../ads-campaign/paid-ads-setup-sections.js   |  69 +++++--
 .../paid-ads/ads-campaign/skip-button.js      |  57 +++++
 .../pages/create-paid-ads-campaign/index.js   |  11 +-
 js/src/pages/edit-paid-ads-campaign/index.js  |  11 +-
 js/src/setup-ads/ads-stepper/index.js         |   9 +-
 .../setup-paid-ads/setup-paid-ads.js          | 194 ++++++++----------
 9 files changed, 363 insertions(+), 199 deletions(-)
 create mode 100644 js/src/components/paid-ads/ads-campaign/constants.js
 create mode 100644 js/src/components/paid-ads/ads-campaign/skip-button.js

diff --git a/js/src/components/paid-ads/ads-campaign/constants.js b/js/src/components/paid-ads/ads-campaign/constants.js
new file mode 100644
index 0000000000..05f0b5bb55
--- /dev/null
+++ b/js/src/components/paid-ads/ads-campaign/constants.js
@@ -0,0 +1,2 @@
+export const ACTION_COMPLETE = 'complete-ads';
+export const ACTION_SKIP = 'skip-ads';
diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index 7c568ab513..1369c3cbe4 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -3,23 +3,24 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
+import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
+import { useAdaptiveFormContext } from '.~/components/adaptive-form';
 import StepContent from '.~/components/stepper/step-content';
 import StepContentHeader from '.~/components/stepper/step-content-header';
 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 AudienceSection from '../audience-section';
-import BudgetSection from '../budget-section';
-import { CampaignPreviewCard } from '../campaign-preview';
-import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import FaqsSection from '../faqs-section';
 import PaidAdsFeaturesSection from './paid-ads-features-section';
 import PaidAdsSetupSections from './paid-ads-setup-sections';
+import SkipButton from './skip-button';
+import clientSession from './clientSession';
+import { ACTION_SKIP, ACTION_COMPLETE } from './constants';
+import { useEffect } from 'react';
 
 /**
  * @typedef {import('.~/data/actions').Campaign} Campaign
@@ -35,47 +36,92 @@ import PaidAdsSetupSections from './paid-ads-setup-sections';
  * @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 props.headerTitle
+ * @param props.hideFooterButtons
+ * @param props.paidAdsFeaturesSectionButtons
+ * @param props.showPaidAdsSetupSections
+ * @param props.buttons
+ * @param props.skipButton
+ * @param props.continueButtonProps
+ * @param props.onSkip
+ * @param props.onSkipClick
+ * @param props.continueButtonText
+ * @param props.hidePaidAdsSetupFooterButtons
+ * @param props.onboardingSetup
  * @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,
 	trackingContext,
+	headerTitle,
+	onContinue = noop,
+	onSkip = noop,
+	onboardingSetup = false,
 } ) {
-	const isCreation = ! campaign;
 	const formContext = useAdaptiveFormContext();
 	const { isValidForm, setValue } = formContext;
-	const { googleAdsAccount, hasGoogleAdsConnection } = useGoogleAdsAccount();
-	const handleOnStatesReceived = ( { amount, countryCodes } ) => {
+	console.log( formContext );
+	const [ completing, setCompleting ] = useState( null );
+	const [ paidAds, setPaidAds ] = useState( {} );
+	const [ showPaidAdsSetup, setShowPaidAdsSetup ] = useState( () =>
+		clientSession.getShowPaidAdsSetup( false )
+	);
+
+	const isCreation = ! campaign;
+
+	const handleOnStatesReceived = ( paidAdsValues ) => {
+		setPaidAds( paidAdsValues );
+
+		const { amount, countryCodes } = paidAdsValues;
 		setValue( 'amount', amount );
 		setValue( 'countryCodes', countryCodes );
 	};
 
-	const disabledBudgetSection = ! formContext.values.countryCodes.length;
-	const helperText = isCreation
-		? __(
-				'You can only choose from countries you’ve selected during product listings configuration.',
-				'google-listings-and-ads'
-		  )
-		: __(
-				'Once a campaign has been created, you cannot change the target country(s).',
-				'google-listings-and-ads'
-		  );
+	const handleCreateCampaignClick = ( event ) => {
+		setCompleting( event.target.dataset.action );
+		setShowPaidAdsSetup( true );
+
+		clientSession.setShowPaidAdsSetup( true );
+	};
+
+	const handleSkipClick = ( event ) => {
+		setCompleting( event.target.dataset.action );
+
+		onSkip( event );
+	};
+
+	const handleCompleteClick = ( event ) => {
+		setCompleting( event.target.dataset.action );
+
+		onContinue( event, paidAds );
+	};
+
+	// The status check of Google Ads account connection is included in `paidAds.isReady`,
+	// because when there is no connected account, it will disable the budget section and set the `amount` to `undefined`.
+	const disabledComplete =
+		completing === ACTION_SKIP || ! paidAds.isReady || ! isValidForm;
+	const shouldShowPaidAdsSetup = onboardingSetup || showPaidAdsSetup;
+
+	let continueButtonProps = {
+		text: __( 'Continue', 'google-listings-and-ads' ),
+	};
+
+	if ( onboardingSetup ) {
+		continueButtonProps = {
+			'data-action': ACTION_COMPLETE,
+			text: __( 'Complete setup', 'google-listings-and-ads' ),
+			eventName: 'gla_onboarding_complete_with_paid_ads_button_click',
+			eventProps: {
+				budget: paidAds.amount,
+				audiences: paidAds.countryCodes?.join( ',' ),
+			},
+		};
+	}
 
 	return (
 		<StepContent>
 			<StepContentHeader
-				title={
-					isCreation
-						? __(
-								'Create your paid campaign',
-								'google-listings-and-ads'
-						  )
-						: __(
-								'Edit your paid campaign',
-								'google-listings-and-ads'
-						  )
-				}
+				title={ headerTitle }
 				description={ createInterpolateElement(
 					__(
 						'Paid Performance Max campaigns are automatically optimized for you by Google. <link>See what your ads will look like.</link>',
@@ -92,37 +138,44 @@ export default function AdsCampaign( {
 					}
 				) }
 			/>
-			{ /* <AudienceSection
-				disabled={ ! isCreation }
-				multiple={ isCreation || campaign.allowMultiple }
-				countrySelectHelperText={ helperText }
-				formProps={ formContext }
-			/>
-			<BudgetSection
-				formProps={ formContext }
-				disabled={ disabledBudgetSection }
-			>
-				<CampaignPreviewCard />
-			</BudgetSection>
-			<hr /> */ }
 
 			<PaidAdsFeaturesSection
-				hideBudgetContent={ ! hasGoogleAdsConnection }
-				hideFooterButtons
+				hidePaidAdsSetupFooterButtons={ shouldShowPaidAdsSetup }
+				onSkipClick={ handleSkipClick }
+				onCreateCampaignClick={ handleCreateCampaignClick }
+				disableCreateButton={ completing === ACTION_SKIP }
 			/>
-			{ /* TODO: Add disabled={ ! isCreation } for AudienceSection */ }
-			<PaidAdsSetupSections onStatesReceived={ handleOnStatesReceived } />
+
+			{ shouldShowPaidAdsSetup && (
+				<PaidAdsSetupSections
+					onStatesReceived={ handleOnStatesReceived }
+					isCreation={ isCreation }
+				/>
+			) }
 
 			<FaqsSection />
-			<StepContentFooter>
-				<AppButton
-					isPrimary
-					disabled={ ! isValidForm }
-					onClick={ onContinue }
-				>
-					{ __( 'Continue', 'google-listings-and-ads' ) }
-				</AppButton>
-			</StepContentFooter>
+
+			{ shouldShowPaidAdsSetup && (
+				<StepContentFooter>
+					{ onboardingSetup && (
+						<SkipButton
+							text={ __(
+								'Skip paid ads creation',
+								'google-listings-and-ads'
+							) }
+							onClick={ handleSkipClick }
+						/>
+					) }
+
+					<AppButton
+						isPrimary
+						disabled={ disabledComplete }
+						onClick={ handleCompleteClick }
+						loading={ completing === ACTION_COMPLETE }
+						{ ...continueButtonProps }
+					/>
+				</StepContentFooter>
+			) }
 		</StepContent>
 	);
 }
diff --git a/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js b/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
index 3be1cd6664..11790098d1 100644
--- a/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
+++ b/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import { Pill } from '@woocommerce/components';
+import { noop } from 'lodash';
 import GridiconCheckmark from 'gridicons/dist/checkmark';
 import GridiconGift from 'gridicons/dist/gift';
 
@@ -13,6 +14,9 @@ import GridiconGift from 'gridicons/dist/gift';
 import Section from '.~/wcdl/section';
 import AppDocumentationLink from '.~/components/app-documentation-link';
 import CampaignPreview from '.~/components/paid-ads/campaign-preview';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import AppButton from '.~/components/app-button';
+import SkipButton from './skip-button';
 import './paid-ads-features-section.scss';
 
 function FeatureList( { hideBudgetContent } ) {
@@ -57,17 +61,27 @@ function FeatureList( { hideBudgetContent } ) {
  * for the next actions: skip or continue the paid ads setup.
  *
  * @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.
+ * @param props.buttons
+ * @param props.onSkipClick
+ * @param props.onCreateCampaignClick
+ * @param props.disableCreateButton
+ * @param props.hidePaidAdsSetupFooterButtons
  */
 export default function PaidAdsFeaturesSection( {
-	hideBudgetContent,
-	hideFooterButtons,
-	skipButton,
-	continueButton,
+	hidePaidAdsSetupFooterButtons,
+	onSkipClick = noop,
+	onCreateCampaignClick = noop,
+	disableCreateButton = false,
 } ) {
+	const { hasGoogleAdsConnection } = useGoogleAdsAccount();
+
+	const hideBudgetContent = ! hasGoogleAdsConnection;
+	const hideFooterButtons =
+		! hasGoogleAdsConnection || hidePaidAdsSetupFooterButtons;
+
 	return (
 		<Section
 			className="gla-paid-ads-features-section"
@@ -131,8 +145,24 @@ export default function PaidAdsFeaturesSection( {
 					</Flex>
 				</Section.Card.Body>
 				<Section.Card.Footer hidden={ hideFooterButtons }>
-					{ skipButton }
-					{ continueButton }
+					<SkipButton
+						text={ __(
+							'Skip this step for now',
+							'google-listings-and-ads'
+						) }
+						onClick={ onSkipClick }
+					/>
+
+					<AppButton
+						isPrimary
+						text={ __(
+							'Create campaign',
+							'google-listings-and-ads'
+						) }
+						disabled={ disableCreateButton }
+						onClick={ onCreateCampaignClick }
+						eventName="gla_onboarding_open_paid_ads_setup_button_click"
+					/>
 				</Section.Card.Footer>
 			</Section.Card>
 		</Section>
diff --git a/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
index 591fc6a0f9..c7d3f599ae 100644
--- a/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
+++ b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
+import { Form } from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -17,7 +18,6 @@ import SpinnerCard from '.~/components/spinner-card';
 import Section from '.~/wcdl/section';
 import validateCampaign from '.~/components/paid-ads/validateCampaign';
 import clientSession from './clientSession';
-import { useAdaptiveFormContext } from '.~/components/adaptive-form';
 import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants';
 
 /**
@@ -73,9 +73,12 @@ function resolveInitialPaidAds( paidAds, targetAudience ) {
  *
  * @param {Object} props React props.
  * @param {(onStatesReceived: PaidAdsData)=>void} props.onStatesReceived Callback to receive the data for setting up paid ads when initial and also when the audience, budget, and billing are updated.
+ * @param props.isCreation
  */
-export default function PaidAdsSetupSections( { onStatesReceived } ) {
-	const formProps = useAdaptiveFormContext();
+export default function PaidAdsSetupSections( {
+	onStatesReceived,
+	isCreation = false,
+} ) {
 	const { hasGoogleAdsConnection } = useGoogleAdsAccount();
 	const { data: targetAudience } = useTargetAudienceFinalCountryCodes();
 	const { billingStatus } = useGoogleAdsAccountBillingStatus();
@@ -141,23 +144,51 @@ export default function PaidAdsSetupSections( { onStatesReceived } ) {
 		);
 	}
 
-	const { countryCodes } = formProps.values;
-	const disabledAudience = ! hasGoogleAdsConnection;
-	const disabledBudget = disabledAudience || countryCodes.length === 0;
+	const helperText = isCreation
+		? __(
+				'You can only choose from countries you’ve selected during product listings configuration.',
+				'google-listings-and-ads'
+		  )
+		: __(
+				'Once a campaign has been created, you cannot change the target country(s).',
+				'google-listings-and-ads'
+		  );
+
+	const initialValues = {
+		countryCodes: paidAds.countryCodes,
+		amount: paidAds.amount,
+	};
 
 	return (
-		<>
-			<AudienceSection
-				formProps={ formProps }
-				disabled={ disabledAudience }
-				countrySelectHelperText={ __(
-					'You can only choose from countries you’ve selected during product listings configuration.',
-					'google-listings-and-ads'
-				) }
-			/>
-			<BudgetSection formProps={ formProps } disabled={ disabledBudget }>
-				{ ! disabledBudget && <BillingCard /> }
-			</BudgetSection>
-		</>
+		<Form
+			initialValues={ initialValues }
+			onChange={ ( _, values, isValid ) => {
+				setPaidAds( { ...paidAds, ...values, isValid } );
+			} }
+			validate={ validateCampaign }
+		>
+			{ ( formProps ) => {
+				const { countryCodes } = formProps.values;
+				const disabledAudience = ! hasGoogleAdsConnection;
+				const disabledBudget =
+					disabledAudience || countryCodes.length === 0;
+
+				return (
+					<>
+						<AudienceSection
+							formProps={ formProps }
+							disabled={ disabledAudience }
+							countrySelectHelperText={ helperText }
+						/>
+						<BudgetSection
+							formProps={ formProps }
+							disabled={ disabledBudget }
+						>
+							{ ! disabledBudget && <BillingCard /> }
+						</BudgetSection>
+					</>
+				);
+			} }
+		</Form>
 	);
 }
diff --git a/js/src/components/paid-ads/ads-campaign/skip-button.js b/js/src/components/paid-ads/ads-campaign/skip-button.js
new file mode 100644
index 0000000000..72bfd6aa8c
--- /dev/null
+++ b/js/src/components/paid-ads/ads-campaign/skip-button.js
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { select } from '@wordpress/data';
+import { noop, merge } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import AppButton from '.~/components/app-button';
+import { STORE_KEY } from '.~/data/constants';
+import { ACTION_COMPLETE, ACTION_SKIP } from './constants';
+
+export default function SkipButton( {
+	text,
+	paidAds,
+	showPaidAdsSetup,
+	onClick = noop,
+	completing,
+} ) {
+	const { googleAdsAccount, hasGoogleAdsConnection } = useGoogleAdsAccount();
+
+	const eventProps = {
+		opened_paid_ads_setup: 'no',
+		google_ads_account_status: googleAdsAccount?.status,
+		billing_method_status: 'unknown',
+		campaign_form_validation: 'unknown',
+	};
+
+	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;
+
+	return (
+		<AppButton
+			isTertiary
+			data-action={ ACTION_SKIP }
+			text={ text }
+			loading={ completing === ACTION_SKIP }
+			disabled={ disabledSkip }
+			onClick={ onClick }
+			eventName="gla_onboarding_complete_button_click"
+			eventProps={ eventProps }
+		/>
+	);
+}
diff --git a/js/src/pages/create-paid-ads-campaign/index.js b/js/src/pages/create-paid-ads-campaign/index.js
index e076243e6a..e1d1fe539f 100644
--- a/js/src/pages/create-paid-ads-campaign/index.js
+++ b/js/src/pages/create-paid-ads-campaign/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { Stepper } from '@woocommerce/components';
-import { useState, useRef } from '@wordpress/element';
+import { useState, useRef, createInterpolateElement } from '@wordpress/element';
 import { getHistory } from '@woocommerce/navigation';
 
 /**
@@ -20,6 +20,8 @@ import TopBar from '.~/components/stepper/top-bar';
 import HelpIconButton from '.~/components/help-icon-button';
 import CampaignAssetsForm from '.~/components/paid-ads/campaign-assets-form';
 import AdsCampaign from '.~/components/paid-ads/ads-campaign';
+import AppDocumentationLink from '.~/components/app-documentation-link';
+import AppButton from '.~/components/app-button';
 import AssetGroup, {
 	ACTION_SUBMIT_CAMPAIGN_AND_ASSETS,
 } from '.~/components/paid-ads/asset-group';
@@ -145,10 +147,17 @@ const CreatePaidAdsCampaign = () => {
 							),
 							content: (
 								<AdsCampaign
+									headerTitle={ __(
+										'Create your paid campaign',
+										'google-listings-and-ads'
+									) }
 									trackingContext={ eventContext }
 									onContinue={ () =>
 										handleContinueClick( STEP.ASSET_GROUP )
 									}
+									onClick={ () => {
+										handleContinueClick( STEP.ASSET_GROUP );
+									} }
 								/>
 							),
 							onClick: handleStepperClick,
diff --git a/js/src/pages/edit-paid-ads-campaign/index.js b/js/src/pages/edit-paid-ads-campaign/index.js
index 1d23f45666..51e8da0bcf 100644
--- a/js/src/pages/edit-paid-ads-campaign/index.js
+++ b/js/src/pages/edit-paid-ads-campaign/index.js
@@ -4,7 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Stepper } from '@woocommerce/components';
 import { getQuery, getHistory, getNewPath } from '@woocommerce/navigation';
-import { useEffect } from '@wordpress/element';
+import { useEffect, createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,6 +20,8 @@ import HelpIconButton from '.~/components/help-icon-button';
 import CampaignAssetsForm from '.~/components/paid-ads/campaign-assets-form';
 import AdsCampaign from '.~/components/paid-ads/ads-campaign';
 import AppSpinner from '.~/components/app-spinner';
+import AppDocumentationLink from '.~/components/app-documentation-link';
+import AppButton from '.~/components/app-button';
 import AssetGroup, {
 	ACTION_SUBMIT_CAMPAIGN_AND_ASSETS,
 } from '.~/components/paid-ads/asset-group';
@@ -200,6 +202,13 @@ const EditPaidAdsCampaign = () => {
 									onContinue={ () =>
 										handleContinueClick( STEP.ASSET_GROUP )
 									}
+									headerTitle={ __(
+										'Edit your paid campaign',
+										'google-listings-and-ads'
+									) }
+									onClick={ () => {
+										handleContinueClick( STEP.ASSET_GROUP );
+									} }
 								/>
 							),
 							onClick: handleStepperClick,
diff --git a/js/src/setup-ads/ads-stepper/index.js b/js/src/setup-ads/ads-stepper/index.js
index e1391caa70..e59a1855be 100644
--- a/js/src/setup-ads/ads-stepper/index.js
+++ b/js/src/setup-ads/ads-stepper/index.js
@@ -3,7 +3,7 @@
  */
 import { Stepper } from '@woocommerce/components';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,6 +12,8 @@ import SetupAccounts from './setup-accounts';
 import AdsCampaign from '.~/components/paid-ads/ads-campaign';
 import SetupBilling from './setup-billing';
 import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
+import AppDocumentationLink from '.~/components/app-documentation-link';
+import AppButton from '.~/components/app-button';
 import {
 	recordStepperChangeEvent,
 	recordStepContinueEvent,
@@ -27,6 +29,7 @@ import {
  */
 const AdsStepper = ( { formProps } ) => {
 	const [ step, setStep ] = useState( '2' );
+	const { isValidForm } = formProps;
 
 	useEventPropertiesFilter( FILTER_ONBOARDING, {
 		context: CONTEXT_ADS_ONBOARDING,
@@ -91,6 +94,10 @@ const AdsStepper = ( { formProps } ) => {
 					),
 					content: (
 						<AdsCampaign
+							headerTitle={ __(
+								'Create your paid campaign',
+								'google-listings-and-ads'
+							) }
 							trackingContext="setup-ads"
 							onContinue={ handleCreateCampaignContinue }
 						/>
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
index 60eab7b297..fc2c1fa433 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
@@ -26,6 +26,7 @@ import { getProductFeedUrl } from '.~/utils/urls';
 import clientSession from '.~/components/paid-ads/ads-campaign/clientSession';
 import { API_NAMESPACE, STORE_KEY } from '.~/data/constants';
 import { GUIDE_NAMES } from '.~/constants';
+import AdsCampaign from '.~/components/paid-ads/ads-campaign';
 
 const ACTION_COMPLETE = 'complete-ads';
 const ACTION_SKIP = 'skip-ads';
@@ -74,17 +75,9 @@ export default function SetupPaidAds() {
 	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 );
-
 		try {
 			await onBeforeFinish();
 			await apiFetch( {
@@ -92,7 +85,7 @@ export default function SetupPaidAds() {
 				method: 'POST',
 			} );
 		} catch ( e ) {
-			setCompleting( null );
+			// setCompleting( null );
 
 			createNotice(
 				'error',
@@ -108,7 +101,7 @@ export default function SetupPaidAds() {
 		window.location.href = adminUrl + getProductFeedUrl( query );
 	};
 
-	const handleCompleteClick = async ( event ) => {
+	const handleCompleteClick = async ( event, paidAds ) => {
 		const onBeforeFinish = handleSetupComplete.bind(
 			null,
 			paidAds.amount,
@@ -117,111 +110,84 @@ export default function SetupPaidAds() {
 		await finishOnboardingSetup( event, onBeforeFinish );
 	};
 
-	// The status check of Google Ads account connection is included in `paidAds.isReady`,
-	// because when there is no connected account, it will disable the budget section and set the `amount` to `undefined`.
-	const disabledComplete = completing === ACTION_SKIP || ! paidAds.isReady;
-
-	function createSkipButton( text ) {
-		const eventProps = {
-			opened_paid_ads_setup: 'no',
-			google_ads_account_status: googleAdsAccount?.status,
-			billing_method_status: 'unknown',
-			campaign_form_validation: 'unknown',
-		};
-
-		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;
-
-		return (
-			<AppButton
-				isTertiary
-				data-action={ ACTION_SKIP }
-				text={ text }
-				loading={ completing === ACTION_SKIP }
-				disabled={ disabledSkip }
-				onClick={ finishOnboardingSetup }
-				eventName="gla_onboarding_complete_button_click"
-				eventProps={ eventProps }
-			/>
-		);
-	}
-
 	return (
-		<StepContent>
-			<StepContentHeader
-				title={ __(
-					'Create a campaign to advertise your products',
-					'google-listings-and-ads'
-				) }
-				description={ __(
-					'You’re ready to set up a Performance Max campaign to drive more sales with ads. Your products will be included in the campaign after they’re approved.',
-					'google-listings-and-ads'
-				) }
-			/>
-
-			<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 } />
+		<AdsCampaign
+			headerTitle={ __(
+				'Create a campaign to advertise your products',
+				'google-listings-and-ads'
 			) }
-
-			<FaqsSection />
-			<StepContentFooter hidden={ ! showPaidAdsSetup }>
-				<Flex justify="right" gap={ 4 }>
-					{ createSkipButton(
-						__(
-							'Skip paid ads creation',
-							'google-listings-and-ads'
-						)
-					) }
-					<AppButton
-						isPrimary
-						data-action={ ACTION_COMPLETE }
-						text={ __(
-							'Complete setup',
-							'google-listings-and-ads'
-						) }
-						loading={ completing === ACTION_COMPLETE }
-						disabled={ disabledComplete }
-						onClick={ handleCompleteClick }
-						eventName="gla_onboarding_complete_with_paid_ads_button_click"
-						eventProps={ {
-							budget: paidAds.amount,
-							audiences: paidAds.countryCodes?.join( ',' ),
-						} }
-					/>
-				</Flex>
-			</StepContentFooter>
-		</StepContent>
+			onSkip={ finishOnboardingSetup }
+			onContinue={ handleCompleteClick }
+			onboardingSetup
+		/>
 	);
+
+	// return (
+	// 	<StepContent>
+	// 		<StepContentHeader
+	// 			title={ __(
+	// 				'Create a campaign to advertise your products',
+	// 				'google-listings-and-ads'
+	// 			) }
+	// 			description={ __(
+	// 				'You’re ready to set up a Performance Max campaign to drive more sales with ads. Your products will be included in the campaign after they’re approved.',
+	// 				'google-listings-and-ads'
+	// 			) }
+	// 		/>
+
+	// 		<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 } />
+	// 		) }
+
+	// 		<FaqsSection />
+
+	// 		<StepContentFooter hidden={ ! showPaidAdsSetup }>
+	// 			<Flex justify="right" gap={ 4 }>
+	// 				{ createSkipButton(
+	// 					__(
+	// 						'Skip paid ads creation',
+	// 						'google-listings-and-ads'
+	// 					)
+	// 				) }
+	// 				<AppButton
+	// 					isPrimary
+	// 					data-action={ ACTION_COMPLETE }
+	// 					text={ __(
+	// 						'Complete setup',
+	// 						'google-listings-and-ads'
+	// 					) }
+	// 					loading={ completing === ACTION_COMPLETE }
+	// 					disabled={ disabledComplete }
+	// 					onClick={ handleCompleteClick }
+	// 					eventName="gla_onboarding_complete_with_paid_ads_button_click"
+	// 					eventProps={ {
+	// 						budget: paidAds.amount,
+	// 						audiences: paidAds.countryCodes?.join( ',' ),
+	// 					} }
+	// 				/>
+	// 			</Flex>
+	// 		</StepContentFooter>
+	// 	</StepContent>
+	// );
 }

From 3f8ac233ab39987c32b97cd52cf5254e87c16ff3 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 3 Sep 2024 17:15:56 +0400
Subject: [PATCH 04/18] Revert local test changes.

---
 js/src/setup-ads/ads-stepper/index.js  |  7 ++-----
 js/src/setup-mc/setup-stepper/index.js | 10 +++++-----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/js/src/setup-ads/ads-stepper/index.js b/js/src/setup-ads/ads-stepper/index.js
index e59a1855be..60b5e95534 100644
--- a/js/src/setup-ads/ads-stepper/index.js
+++ b/js/src/setup-ads/ads-stepper/index.js
@@ -3,7 +3,7 @@
  */
 import { Stepper } from '@woocommerce/components';
 import { __ } from '@wordpress/i18n';
-import { useState, createInterpolateElement } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,8 +12,6 @@ import SetupAccounts from './setup-accounts';
 import AdsCampaign from '.~/components/paid-ads/ads-campaign';
 import SetupBilling from './setup-billing';
 import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
-import AppDocumentationLink from '.~/components/app-documentation-link';
-import AppButton from '.~/components/app-button';
 import {
 	recordStepperChangeEvent,
 	recordStepContinueEvent,
@@ -28,8 +26,7 @@ import {
  * @fires gla_setup_ads with `{ triggered_by: 'stepper-step1-button' | 'stepper-step2-button', action: 'go-to-step1' | 'go-to-step2' }`.
  */
 const AdsStepper = ( { formProps } ) => {
-	const [ step, setStep ] = useState( '2' );
-	const { isValidForm } = formProps;
+	const [ step, setStep ] = useState( '1' );
 
 	useEventPropertiesFilter( FILTER_ONBOARDING, {
 		context: CONTEXT_ADS_ONBOARDING,
diff --git a/js/src/setup-mc/setup-stepper/index.js b/js/src/setup-mc/setup-stepper/index.js
index dacc5ec1f1..2c35a06064 100644
--- a/js/src/setup-mc/setup-stepper/index.js
+++ b/js/src/setup-mc/setup-stepper/index.js
@@ -26,12 +26,12 @@ const SetupStepper = () => {
 
 	const { status, step } = mcSetup;
 
-	// if ( status === 'complete' ) {
-	// 	getHistory().replace( getNewPath( {}, '/google/dashboard' ) );
-	// 	return null;
-	// }
+	if ( status === 'complete' ) {
+		getHistory().replace( getNewPath( {}, '/google/dashboard' ) );
+		return null;
+	}
 
-	return <SavedSetupStepper savedStep={ stepNameKeyMap.paid_ads } />;
+	return <SavedSetupStepper savedStep={ stepNameKeyMap[ step ] } />;
 };
 
 export default SetupStepper;

From 101412b7f3e59b0faca3c04d1f4fcc919b1b743f Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 3 Sep 2024 17:18:55 +0400
Subject: [PATCH 05/18] Remove comments.

---
 .../setup-paid-ads/setup-paid-ads.js          | 93 +------------------
 1 file changed, 2 insertions(+), 91 deletions(-)

diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
index fc2c1fa433..22d3dfcca2 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
@@ -3,34 +3,19 @@
  */
 import { __ } from '@wordpress/i18n';
 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
  */
 import useAdminUrl from '.~/hooks/useAdminUrl';
 import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
-import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useAdsSetupCompleteCallback from '.~/hooks/useAdsSetupCompleteCallback';
-import StepContent from '.~/components/stepper/step-content';
-import StepContentHeader from '.~/components/stepper/step-content-header';
-import StepContentFooter from '.~/components/stepper/step-content-footer';
-import FaqsSection from '.~/components/paid-ads/faqs-section';
-import AppButton from '.~/components/app-button';
-import PaidAdsFeaturesSection from '.~/components/paid-ads/ads-campaign/paid-ads-features-section';
-import PaidAdsSetupSections from '.~/components/paid-ads/ads-campaign/paid-ads-setup-sections';
 import { getProductFeedUrl } from '.~/utils/urls';
-import clientSession from '.~/components/paid-ads/ads-campaign/clientSession';
-import { API_NAMESPACE, STORE_KEY } from '.~/data/constants';
+import { API_NAMESPACE } from '.~/data/constants';
 import { GUIDE_NAMES } from '.~/constants';
 import AdsCampaign from '.~/components/paid-ads/ads-campaign';
 
-const ACTION_COMPLETE = 'complete-ads';
-const ACTION_SKIP = 'skip-ads';
-
 /**
  * Clicking on the "Create a paid ad campaign" button to open the paid ads setup in the onboarding flow.
  *
@@ -70,12 +55,7 @@ const ACTION_SKIP = 'skip-ads';
 export default function SetupPaidAds() {
 	const adminUrl = useAdminUrl();
 	const { createNotice } = useDispatchCoreNotices();
-	const { googleAdsAccount, hasGoogleAdsConnection } = useGoogleAdsAccount();
 	const [ handleSetupComplete ] = useAdsSetupCompleteCallback();
-	const [ showPaidAdsSetup, setShowPaidAdsSetup ] = useState( () =>
-		clientSession.getShowPaidAdsSetup( false )
-	);
-	const [ completing, setCompleting ] = useState( null );
 
 	const finishOnboardingSetup = async ( event, onBeforeFinish = noop ) => {
 		try {
@@ -121,73 +101,4 @@ export default function SetupPaidAds() {
 			onboardingSetup
 		/>
 	);
-
-	// return (
-	// 	<StepContent>
-	// 		<StepContentHeader
-	// 			title={ __(
-	// 				'Create a campaign to advertise your products',
-	// 				'google-listings-and-ads'
-	// 			) }
-	// 			description={ __(
-	// 				'You’re ready to set up a Performance Max campaign to drive more sales with ads. Your products will be included in the campaign after they’re approved.',
-	// 				'google-listings-and-ads'
-	// 			) }
-	// 		/>
-
-	// 		<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 } />
-	// 		) }
-
-	// 		<FaqsSection />
-
-	// 		<StepContentFooter hidden={ ! showPaidAdsSetup }>
-	// 			<Flex justify="right" gap={ 4 }>
-	// 				{ createSkipButton(
-	// 					__(
-	// 						'Skip paid ads creation',
-	// 						'google-listings-and-ads'
-	// 					)
-	// 				) }
-	// 				<AppButton
-	// 					isPrimary
-	// 					data-action={ ACTION_COMPLETE }
-	// 					text={ __(
-	// 						'Complete setup',
-	// 						'google-listings-and-ads'
-	// 					) }
-	// 					loading={ completing === ACTION_COMPLETE }
-	// 					disabled={ disabledComplete }
-	// 					onClick={ handleCompleteClick }
-	// 					eventName="gla_onboarding_complete_with_paid_ads_button_click"
-	// 					eventProps={ {
-	// 						budget: paidAds.amount,
-	// 						audiences: paidAds.countryCodes?.join( ',' ),
-	// 					} }
-	// 				/>
-	// 			</Flex>
-	// 		</StepContentFooter>
-	// 	</StepContent>
-	// );
 }

From 620b1838adfe02165c5fe019d9b68b37d8d72870 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 3 Sep 2024 19:00:41 +0400
Subject: [PATCH 06/18] Clean up comments.

---
 js/src/components/paid-ads/ads-campaign/index.js      | 11 -----------
 .../ads-campaign/paid-ads-features-section.js         |  3 +--
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index 1369c3cbe4..494b2228a3 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -20,7 +20,6 @@ import PaidAdsSetupSections from './paid-ads-setup-sections';
 import SkipButton from './skip-button';
 import clientSession from './clientSession';
 import { ACTION_SKIP, ACTION_COMPLETE } from './constants';
-import { useEffect } from 'react';
 
 /**
  * @typedef {import('.~/data/actions').Campaign} Campaign
@@ -37,16 +36,7 @@ import { useEffect } from 'react';
  * @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 props.headerTitle
- * @param props.hideFooterButtons
- * @param props.paidAdsFeaturesSectionButtons
- * @param props.showPaidAdsSetupSections
- * @param props.buttons
- * @param props.skipButton
- * @param props.continueButtonProps
  * @param props.onSkip
- * @param props.onSkipClick
- * @param props.continueButtonText
- * @param props.hidePaidAdsSetupFooterButtons
  * @param props.onboardingSetup
  * @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.
  */
@@ -60,7 +50,6 @@ export default function AdsCampaign( {
 } ) {
 	const formContext = useAdaptiveFormContext();
 	const { isValidForm, setValue } = formContext;
-	console.log( formContext );
 	const [ completing, setCompleting ] = useState( null );
 	const [ paidAds, setPaidAds ] = useState( {} );
 	const [ showPaidAdsSetup, setShowPaidAdsSetup ] = useState( () =>
diff --git a/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js b/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
index 11790098d1..8d8c53b662 100644
--- a/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
+++ b/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
@@ -64,11 +64,10 @@ function FeatureList( { hideBudgetContent } ) {
  * @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.
- * @param props.buttons
+ * @param props.hidePaidAdsSetupFooterButtons
  * @param props.onSkipClick
  * @param props.onCreateCampaignClick
  * @param props.disableCreateButton
- * @param props.hidePaidAdsSetupFooterButtons
  */
 export default function PaidAdsFeaturesSection( {
 	hidePaidAdsSetupFooterButtons,

From 84879b807e7e2d8571ca4cc567cd4d70eff79ed8 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 3 Sep 2024 19:06:10 +0400
Subject: [PATCH 07/18] Remove unused imports.

---
 js/src/pages/edit-paid-ads-campaign/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/js/src/pages/edit-paid-ads-campaign/index.js b/js/src/pages/edit-paid-ads-campaign/index.js
index 51e8da0bcf..3a1b309290 100644
--- a/js/src/pages/edit-paid-ads-campaign/index.js
+++ b/js/src/pages/edit-paid-ads-campaign/index.js
@@ -4,7 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Stepper } from '@woocommerce/components';
 import { getQuery, getHistory, getNewPath } from '@woocommerce/navigation';
-import { useEffect, createInterpolateElement } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,8 +20,6 @@ import HelpIconButton from '.~/components/help-icon-button';
 import CampaignAssetsForm from '.~/components/paid-ads/campaign-assets-form';
 import AdsCampaign from '.~/components/paid-ads/ads-campaign';
 import AppSpinner from '.~/components/app-spinner';
-import AppDocumentationLink from '.~/components/app-documentation-link';
-import AppButton from '.~/components/app-button';
 import AssetGroup, {
 	ACTION_SUBMIT_CAMPAIGN_AND_ASSETS,
 } from '.~/components/paid-ads/asset-group';

From a3b50fef8c4340e45aad2c5d53a232058534ed2c Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 3 Sep 2024 19:33:03 +0400
Subject: [PATCH 08/18] Editing a campaign working.

---
 js/src/components/paid-ads/ads-campaign/index.js      |  1 +
 .../paid-ads/ads-campaign/paid-ads-setup-sections.js  | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index 494b2228a3..92d136a437 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -139,6 +139,7 @@ export default function AdsCampaign( {
 				<PaidAdsSetupSections
 					onStatesReceived={ handleOnStatesReceived }
 					isCreation={ isCreation }
+					campaign={ campaign }
 				/>
 			) }
 
diff --git a/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
index c7d3f599ae..38d469e9e6 100644
--- a/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
+++ b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
@@ -74,10 +74,12 @@ function resolveInitialPaidAds( paidAds, targetAudience ) {
  * @param {Object} props React props.
  * @param {(onStatesReceived: PaidAdsData)=>void} props.onStatesReceived Callback to receive the data for setting up paid ads when initial and also when the audience, budget, and billing are updated.
  * @param props.isCreation
+ * @param props.campaign
  */
 export default function PaidAdsSetupSections( {
 	onStatesReceived,
 	isCreation = false,
+	campaign,
 } ) {
 	const { hasGoogleAdsConnection } = useGoogleAdsAccount();
 	const { data: targetAudience } = useTargetAudienceFinalCountryCodes();
@@ -154,11 +156,18 @@ export default function PaidAdsSetupSections( {
 				'google-listings-and-ads'
 		  );
 
-	const initialValues = {
+	let initialValues = {
 		countryCodes: paidAds.countryCodes,
 		amount: paidAds.amount,
 	};
 
+	if ( campaign ) {
+		initialValues = {
+			amount: campaign.amount,
+			countryCodes: campaign.displayCountries,
+		};
+	}
+
 	return (
 		<Form
 			initialValues={ initialValues }

From a9b7f1311f76157696970bf2ca9fa28845f2a2b9 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 3 Sep 2024 19:42:10 +0400
Subject: [PATCH 09/18] Fix condition to render paid ads sections.

---
 js/src/components/paid-ads/ads-campaign/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index 92d136a437..524ddf128d 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -89,7 +89,7 @@ export default function AdsCampaign( {
 	// because when there is no connected account, it will disable the budget section and set the `amount` to `undefined`.
 	const disabledComplete =
 		completing === ACTION_SKIP || ! paidAds.isReady || ! isValidForm;
-	const shouldShowPaidAdsSetup = onboardingSetup || showPaidAdsSetup;
+	const shouldShowPaidAdsSetup = ! onboardingSetup || showPaidAdsSetup;
 
 	let continueButtonProps = {
 		text: __( 'Continue', 'google-listings-and-ads' ),

From c76a128dd32203eae9855aacaee5789cca875a9b Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 3 Sep 2024 19:52:41 +0400
Subject: [PATCH 10/18] Address linting errors.

---
 js/src/components/paid-ads/ads-campaign/index.js      |  6 +++---
 .../ads-campaign/paid-ads-features-section.js         | 11 ++++-------
 .../paid-ads/ads-campaign/paid-ads-setup-sections.js  |  8 ++++++--
 js/src/pages/create-paid-ads-campaign/index.js        |  4 +---
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index 524ddf128d..8a8d584a53 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -35,9 +35,9 @@ import { ACTION_SKIP, ACTION_COMPLETE } from './constants';
  * @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 props.headerTitle
- * @param props.onSkip
- * @param props.onboardingSetup
+ * @param {string} props.headerTitle The title of the step.
+ * @param {() => void} props.onSkip Callback called once skip button is clicked.
+ * @param {boolean} [props.onboardingSetup=false] Whether this component is used in onboarding setup.
  * @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( {
diff --git a/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js b/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
index 8d8c53b662..0430577e10 100644
--- a/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
+++ b/js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js
@@ -61,13 +61,10 @@ function FeatureList( { hideBudgetContent } ) {
  * for the next actions: skip or continue the paid ads setup.
  *
  * @param {Object} props React props.
- * @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.
- * @param props.hidePaidAdsSetupFooterButtons
- * @param props.onSkipClick
- * @param props.onCreateCampaignClick
- * @param props.disableCreateButton
+ * @param {boolean} props.hidePaidAdsSetupFooterButtons Whether to hide the buttons at the section footer.
+ * @param {() => void} props.onSkipClick Callback called when the skip button is clicked.
+ * @param {() => void} props.onCreateCampaignClick Callback called when the create campaign button is clicked.
+ * @param {boolean} [props.disableCreateButton=false] Whether to disable the create campaign button.
  */
 export default function PaidAdsFeaturesSection( {
 	hidePaidAdsSetupFooterButtons,
diff --git a/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
index 38d469e9e6..c922b9be67 100644
--- a/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
+++ b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
@@ -20,6 +20,10 @@ import validateCampaign from '.~/components/paid-ads/validateCampaign';
 import clientSession from './clientSession';
 import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants';
 
+/**
+ * @typedef {import('.~/data/actions').Campaign} Campaign
+ */
+
 /**
  * @typedef { import(".~/data/actions").CountryCode } CountryCode
  *
@@ -73,8 +77,8 @@ function resolveInitialPaidAds( paidAds, targetAudience ) {
  *
  * @param {Object} props React props.
  * @param {(onStatesReceived: PaidAdsData)=>void} props.onStatesReceived Callback to receive the data for setting up paid ads when initial and also when the audience, budget, and billing are updated.
- * @param props.isCreation
- * @param props.campaign
+ * @param {boolean} [props.isCreation=false] Whether the paid ads setup is for creating a new campaign.
+ * @param {Campaign} [props.campaign] Campaign data to be edited. If not provided, this component will show campaign creation UI.
  */
 export default function PaidAdsSetupSections( {
 	onStatesReceived,
diff --git a/js/src/pages/create-paid-ads-campaign/index.js b/js/src/pages/create-paid-ads-campaign/index.js
index e1d1fe539f..c6834bf8ff 100644
--- a/js/src/pages/create-paid-ads-campaign/index.js
+++ b/js/src/pages/create-paid-ads-campaign/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { Stepper } from '@woocommerce/components';
-import { useState, useRef, createInterpolateElement } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { getHistory } from '@woocommerce/navigation';
 
 /**
@@ -20,8 +20,6 @@ import TopBar from '.~/components/stepper/top-bar';
 import HelpIconButton from '.~/components/help-icon-button';
 import CampaignAssetsForm from '.~/components/paid-ads/campaign-assets-form';
 import AdsCampaign from '.~/components/paid-ads/ads-campaign';
-import AppDocumentationLink from '.~/components/app-documentation-link';
-import AppButton from '.~/components/app-button';
 import AssetGroup, {
 	ACTION_SUBMIT_CAMPAIGN_AND_ASSETS,
 } from '.~/components/paid-ads/asset-group';

From dcea1d642f08626beb2868b23eb96baafe207aaf Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 3 Sep 2024 20:29:06 +0400
Subject: [PATCH 11/18] Add headerDescription prop.

---
 .../components/paid-ads/ads-campaign/index.js | 37 +++++++++++--------
 .../setup-paid-ads/setup-paid-ads.js          |  4 ++
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index 8a8d584a53..fc1b76478d 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -36,14 +36,17 @@ import { ACTION_SKIP, ACTION_COMPLETE } from './constants';
  * @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 {string} props.headerTitle The title of the step.
+ * @param {string} [props.headerDescription] The description of the step.
  * @param {() => void} props.onSkip Callback called once skip button is clicked.
  * @param {boolean} [props.onboardingSetup=false] Whether this component is used in onboarding setup.
+ * @param props.headerDescription
  * @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,
 	trackingContext,
 	headerTitle,
+	headerDescription,
 	onContinue = noop,
 	onSkip = noop,
 	onboardingSetup = false,
@@ -107,25 +110,29 @@ export default function AdsCampaign( {
 		};
 	}
 
+	const description =
+		headerDescription ||
+		createInterpolateElement(
+			__(
+				'Paid Performance Max campaigns are automatically optimized for you by Google. <link>See what your ads will look like.</link>',
+				'google-listings-and-ads'
+			),
+			{
+				link: (
+					<AppDocumentationLink
+						context={ trackingContext }
+						linkId="see-what-ads-look-like"
+						href="https://support.google.com/google-ads/answer/6275294"
+					/>
+				),
+			}
+		);
+
 	return (
 		<StepContent>
 			<StepContentHeader
 				title={ headerTitle }
-				description={ createInterpolateElement(
-					__(
-						'Paid Performance Max campaigns are automatically optimized for you by Google. <link>See what your ads will look like.</link>',
-						'google-listings-and-ads'
-					),
-					{
-						link: (
-							<AppDocumentationLink
-								context={ trackingContext }
-								linkId="see-what-ads-look-like"
-								href="https://support.google.com/google-ads/answer/6275294"
-							/>
-						),
-					}
-				) }
+				description={ description }
 			/>
 
 			<PaidAdsFeaturesSection
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
index 22d3dfcca2..836c5aa934 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
@@ -96,6 +96,10 @@ export default function SetupPaidAds() {
 				'Create a campaign to advertise your products',
 				'google-listings-and-ads'
 			) }
+			headerDescription={ __(
+				'You’re ready to set up a Performance Max campaign to drive more sales with ads. Your products will be included in the campaign after they’re approved.',
+				'google-listings-and-ads'
+			) }
 			onSkip={ finishOnboardingSetup }
 			onContinue={ handleCompleteClick }
 			onboardingSetup

From 522e63572734db6e2678fc7372ee669d37efe007 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 3 Sep 2024 20:38:12 +0400
Subject: [PATCH 12/18] Remove unused comment.

---
 js/src/components/paid-ads/ads-campaign/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index fc1b76478d..7948bc0616 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -39,7 +39,6 @@ import { ACTION_SKIP, ACTION_COMPLETE } from './constants';
  * @param {string} [props.headerDescription] The description of the step.
  * @param {() => void} props.onSkip Callback called once skip button is clicked.
  * @param {boolean} [props.onboardingSetup=false] Whether this component is used in onboarding setup.
- * @param props.headerDescription
  * @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( {

From 388fddb9e3e5951124333a063537ab1c765e6ffa Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Mon, 9 Sep 2024 16:50:28 +0400
Subject: [PATCH 13/18] Remove onClick prop (?)

---
 js/src/pages/create-paid-ads-campaign/index.js | 3 ---
 js/src/pages/edit-paid-ads-campaign/index.js   | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/js/src/pages/create-paid-ads-campaign/index.js b/js/src/pages/create-paid-ads-campaign/index.js
index c6834bf8ff..534c75bcb7 100644
--- a/js/src/pages/create-paid-ads-campaign/index.js
+++ b/js/src/pages/create-paid-ads-campaign/index.js
@@ -153,9 +153,6 @@ const CreatePaidAdsCampaign = () => {
 									onContinue={ () =>
 										handleContinueClick( STEP.ASSET_GROUP )
 									}
-									onClick={ () => {
-										handleContinueClick( STEP.ASSET_GROUP );
-									} }
 								/>
 							),
 							onClick: handleStepperClick,
diff --git a/js/src/pages/edit-paid-ads-campaign/index.js b/js/src/pages/edit-paid-ads-campaign/index.js
index 3a1b309290..676d1d39c7 100644
--- a/js/src/pages/edit-paid-ads-campaign/index.js
+++ b/js/src/pages/edit-paid-ads-campaign/index.js
@@ -204,9 +204,6 @@ const EditPaidAdsCampaign = () => {
 										'Edit your paid campaign',
 										'google-listings-and-ads'
 									) }
-									onClick={ () => {
-										handleContinueClick( STEP.ASSET_GROUP );
-									} }
 								/>
 							),
 							onClick: handleStepperClick,

From 8ddde21a698ecd1226e979145fc66f537f5f29ef Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Mon, 9 Sep 2024 16:56:53 +0400
Subject: [PATCH 14/18] Show banner in create mode only.

---
 js/src/components/paid-ads/ads-campaign/index.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index 7948bc0616..44d273c923 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -134,12 +134,14 @@ export default function AdsCampaign( {
 				description={ description }
 			/>
 
-			<PaidAdsFeaturesSection
-				hidePaidAdsSetupFooterButtons={ shouldShowPaidAdsSetup }
-				onSkipClick={ handleSkipClick }
-				onCreateCampaignClick={ handleCreateCampaignClick }
-				disableCreateButton={ completing === ACTION_SKIP }
-			/>
+			{ isCreation && (
+				<PaidAdsFeaturesSection
+					hidePaidAdsSetupFooterButtons={ shouldShowPaidAdsSetup }
+					onSkipClick={ handleSkipClick }
+					onCreateCampaignClick={ handleCreateCampaignClick }
+					disableCreateButton={ completing === ACTION_SKIP }
+				/>
+			) }
 
 			{ shouldShowPaidAdsSetup && (
 				<PaidAdsSetupSections

From ff7f281505df17283f382b4cc2259f34b5d4feac Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Mon, 9 Sep 2024 19:15:12 +0400
Subject: [PATCH 15/18] Remove unused event prop

---
 .../components/paid-ads/ads-campaign/index.js | 23 ++++++++++++++-----
 .../setup-paid-ads/setup-paid-ads.js          | 13 +++++++----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index 44d273c923..71ae213ba9 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -2,7 +2,11 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createInterpolateElement, useState } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useState,
+	useEffect,
+} from '@wordpress/element';
 import { noop } from 'lodash';
 
 /**
@@ -38,6 +42,7 @@ import { ACTION_SKIP, ACTION_COMPLETE } from './constants';
  * @param {string} props.headerTitle The title of the step.
  * @param {string} [props.headerDescription] The description of the step.
  * @param {() => void} props.onSkip Callback called once skip button is clicked.
+ * @param {boolean} [props.error=false] Whether there's an error to reset the complete state.
  * @param {boolean} [props.onboardingSetup=false] Whether this component is used in onboarding setup.
  * @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.
  */
@@ -48,6 +53,7 @@ export default function AdsCampaign( {
 	headerDescription,
 	onContinue = noop,
 	onSkip = noop,
+	error = false,
 	onboardingSetup = false,
 } ) {
 	const formContext = useAdaptiveFormContext();
@@ -58,6 +64,12 @@ export default function AdsCampaign( {
 		clientSession.getShowPaidAdsSetup( false )
 	);
 
+	useEffect( () => {
+		if ( error ) {
+			setCompleting( null );
+		}
+	}, [ error ] );
+
 	const isCreation = ! campaign;
 
 	const handleOnStatesReceived = ( paidAdsValues ) => {
@@ -68,8 +80,7 @@ export default function AdsCampaign( {
 		setValue( 'countryCodes', countryCodes );
 	};
 
-	const handleCreateCampaignClick = ( event ) => {
-		setCompleting( event.target.dataset.action );
+	const handleCreateCampaignClick = () => {
 		setShowPaidAdsSetup( true );
 
 		clientSession.setShowPaidAdsSetup( true );
@@ -78,13 +89,13 @@ export default function AdsCampaign( {
 	const handleSkipClick = ( event ) => {
 		setCompleting( event.target.dataset.action );
 
-		onSkip( event );
+		onSkip();
 	};
 
 	const handleCompleteClick = ( event ) => {
 		setCompleting( event.target.dataset.action );
 
-		onContinue( event, paidAds );
+		onContinue( paidAds );
 	};
 
 	// The status check of Google Ads account connection is included in `paidAds.isReady`,
@@ -134,7 +145,7 @@ export default function AdsCampaign( {
 				description={ description }
 			/>
 
-			{ isCreation && (
+			{ onboardingSetup && (
 				<PaidAdsFeaturesSection
 					hidePaidAdsSetupFooterButtons={ shouldShowPaidAdsSetup }
 					onSkipClick={ handleSkipClick }
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
index 836c5aa934..b6e1578971 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
+import { useState } from '@wordpress/element';
 import { noop } from 'lodash';
 
 /**
@@ -56,8 +57,11 @@ export default function SetupPaidAds() {
 	const adminUrl = useAdminUrl();
 	const { createNotice } = useDispatchCoreNotices();
 	const [ handleSetupComplete ] = useAdsSetupCompleteCallback();
+	const [ error, setError ] = useState( false );
+
+	const finishOnboardingSetup = async ( onBeforeFinish = noop ) => {
+		setError( false );
 
-	const finishOnboardingSetup = async ( event, onBeforeFinish = noop ) => {
 		try {
 			await onBeforeFinish();
 			await apiFetch( {
@@ -65,7 +69,7 @@ export default function SetupPaidAds() {
 				method: 'POST',
 			} );
 		} catch ( e ) {
-			// setCompleting( null );
+			setError( true );
 
 			createNotice(
 				'error',
@@ -81,13 +85,13 @@ export default function SetupPaidAds() {
 		window.location.href = adminUrl + getProductFeedUrl( query );
 	};
 
-	const handleCompleteClick = async ( event, paidAds ) => {
+	const handleCompleteClick = async ( paidAds ) => {
 		const onBeforeFinish = handleSetupComplete.bind(
 			null,
 			paidAds.amount,
 			paidAds.countryCodes
 		);
-		await finishOnboardingSetup( event, onBeforeFinish );
+		await finishOnboardingSetup( onBeforeFinish );
 	};
 
 	return (
@@ -102,6 +106,7 @@ export default function SetupPaidAds() {
 			) }
 			onSkip={ finishOnboardingSetup }
 			onContinue={ handleCompleteClick }
+			error={ error }
 			onboardingSetup
 		/>
 	);

From 52007272c328510fccb721fc2e7aea70aef3957e Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Mon, 9 Sep 2024 19:24:20 +0400
Subject: [PATCH 16/18] Remove unecessary isCreation prop.

---
 js/src/components/paid-ads/ads-campaign/index.js       |  3 ---
 .../paid-ads/ads-campaign/paid-ads-setup-sections.js   | 10 +++-------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/js/src/components/paid-ads/ads-campaign/index.js b/js/src/components/paid-ads/ads-campaign/index.js
index 71ae213ba9..a23af5f80d 100644
--- a/js/src/components/paid-ads/ads-campaign/index.js
+++ b/js/src/components/paid-ads/ads-campaign/index.js
@@ -70,8 +70,6 @@ export default function AdsCampaign( {
 		}
 	}, [ error ] );
 
-	const isCreation = ! campaign;
-
 	const handleOnStatesReceived = ( paidAdsValues ) => {
 		setPaidAds( paidAdsValues );
 
@@ -157,7 +155,6 @@ export default function AdsCampaign( {
 			{ shouldShowPaidAdsSetup && (
 				<PaidAdsSetupSections
 					onStatesReceived={ handleOnStatesReceived }
-					isCreation={ isCreation }
 					campaign={ campaign }
 				/>
 			) }
diff --git a/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
index c922b9be67..28d86f3b86 100644
--- a/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
+++ b/js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
@@ -77,14 +77,10 @@ function resolveInitialPaidAds( paidAds, targetAudience ) {
  *
  * @param {Object} props React props.
  * @param {(onStatesReceived: PaidAdsData)=>void} props.onStatesReceived Callback to receive the data for setting up paid ads when initial and also when the audience, budget, and billing are updated.
- * @param {boolean} [props.isCreation=false] Whether the paid ads setup is for creating a new campaign.
  * @param {Campaign} [props.campaign] Campaign data to be edited. If not provided, this component will show campaign creation UI.
  */
-export default function PaidAdsSetupSections( {
-	onStatesReceived,
-	isCreation = false,
-	campaign,
-} ) {
+export default function PaidAdsSetupSections( { onStatesReceived, campaign } ) {
+	const isCreation = ! campaign;
 	const { hasGoogleAdsConnection } = useGoogleAdsAccount();
 	const { data: targetAudience } = useTargetAudienceFinalCountryCodes();
 	const { billingStatus } = useGoogleAdsAccountBillingStatus();
@@ -165,7 +161,7 @@ export default function PaidAdsSetupSections( {
 		amount: paidAds.amount,
 	};
 
-	if ( campaign ) {
+	if ( ! isCreation ) {
 		initialValues = {
 			amount: campaign.amount,
 			countryCodes: campaign.displayCountries,

From d93bc1d7a99b88215f0fcaa861b18e371ca51b6c Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Mon, 9 Sep 2024 20:05:00 +0400
Subject: [PATCH 17/18] Add countryCodes field.

---
 js/src/pages/edit-paid-ads-campaign/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/src/pages/edit-paid-ads-campaign/index.js b/js/src/pages/edit-paid-ads-campaign/index.js
index 676d1d39c7..c4bb2b41b3 100644
--- a/js/src/pages/edit-paid-ads-campaign/index.js
+++ b/js/src/pages/edit-paid-ads-campaign/index.js
@@ -135,10 +135,10 @@ const EditPaidAdsCampaign = () => {
 
 	const handleSubmit = async ( values, enhancer ) => {
 		const { action } = enhancer.submitter.dataset;
-		const { amount } = values;
+		const { amount, countryCodes } = values;
 
 		try {
-			await updateAdsCampaign( campaign.id, { amount } );
+			await updateAdsCampaign( campaign.id, { amount, countryCodes } );
 
 			if ( action === ACTION_SUBMIT_CAMPAIGN_AND_ASSETS ) {
 				let existingAssetEntityGroup = assetEntityGroup;

From 8e95434d1f14a13b8c2ee7453f427ad628737e5e Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 10 Sep 2024 20:05:19 +0400
Subject: [PATCH 18/18] Remove country code from edit screen.

---
 js/src/pages/edit-paid-ads-campaign/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/src/pages/edit-paid-ads-campaign/index.js b/js/src/pages/edit-paid-ads-campaign/index.js
index c4bb2b41b3..676d1d39c7 100644
--- a/js/src/pages/edit-paid-ads-campaign/index.js
+++ b/js/src/pages/edit-paid-ads-campaign/index.js
@@ -135,10 +135,10 @@ const EditPaidAdsCampaign = () => {
 
 	const handleSubmit = async ( values, enhancer ) => {
 		const { action } = enhancer.submitter.dataset;
-		const { amount, countryCodes } = values;
+		const { amount } = values;
 
 		try {
-			await updateAdsCampaign( campaign.id, { amount, countryCodes } );
+			await updateAdsCampaign( campaign.id, { amount } );
 
 			if ( action === ACTION_SUBMIT_CAMPAIGN_AND_ASSETS ) {
 				let existingAssetEntityGroup = assetEntityGroup;