From fdcee7be6fd4b2b2d98ed84bb2b15eb0b8a0e6e0 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Thu, 22 Aug 2024 12:50:12 +0400
Subject: [PATCH 1/7] Move FreeAdCredit to src/components folder.

---
 .../country-modal/country-amount.js           |  0
 .../free-ad-credit/country-modal/index.js     |  0
 .../free-ad-credit/country-modal/index.scss   |  0
 .../free-ad-credit/index.js                   |  0
 .../free-ad-credit/index.scss                 |  0
 .../ads-stepper/setup-accounts/index.js       |  2 +-
 .../paid-ads-features-section.js              | 61 +++++++++++--------
 tests/e2e/utils/mock-requests.js              | 17 ++++++
 8 files changed, 53 insertions(+), 27 deletions(-)
 rename js/src/{setup-ads/ads-stepper/setup-accounts => components}/free-ad-credit/country-modal/country-amount.js (100%)
 rename js/src/{setup-ads/ads-stepper/setup-accounts => components}/free-ad-credit/country-modal/index.js (100%)
 rename js/src/{setup-ads/ads-stepper/setup-accounts => components}/free-ad-credit/country-modal/index.scss (100%)
 rename js/src/{setup-ads/ads-stepper/setup-accounts => components}/free-ad-credit/index.js (100%)
 rename js/src/{setup-ads/ads-stepper/setup-accounts => components}/free-ad-credit/index.scss (100%)

diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/free-ad-credit/country-modal/country-amount.js b/js/src/components/free-ad-credit/country-modal/country-amount.js
similarity index 100%
rename from js/src/setup-ads/ads-stepper/setup-accounts/free-ad-credit/country-modal/country-amount.js
rename to js/src/components/free-ad-credit/country-modal/country-amount.js
diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/free-ad-credit/country-modal/index.js b/js/src/components/free-ad-credit/country-modal/index.js
similarity index 100%
rename from js/src/setup-ads/ads-stepper/setup-accounts/free-ad-credit/country-modal/index.js
rename to js/src/components/free-ad-credit/country-modal/index.js
diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/free-ad-credit/country-modal/index.scss b/js/src/components/free-ad-credit/country-modal/index.scss
similarity index 100%
rename from js/src/setup-ads/ads-stepper/setup-accounts/free-ad-credit/country-modal/index.scss
rename to js/src/components/free-ad-credit/country-modal/index.scss
diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/free-ad-credit/index.js b/js/src/components/free-ad-credit/index.js
similarity index 100%
rename from js/src/setup-ads/ads-stepper/setup-accounts/free-ad-credit/index.js
rename to js/src/components/free-ad-credit/index.js
diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/free-ad-credit/index.scss b/js/src/components/free-ad-credit/index.scss
similarity index 100%
rename from js/src/setup-ads/ads-stepper/setup-accounts/free-ad-credit/index.scss
rename to js/src/components/free-ad-credit/index.scss
diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/index.js b/js/src/setup-ads/ads-stepper/setup-accounts/index.js
index 27133451b2..c797bf65f4 100644
--- a/js/src/setup-ads/ads-stepper/setup-accounts/index.js
+++ b/js/src/setup-ads/ads-stepper/setup-accounts/index.js
@@ -13,7 +13,7 @@ import StepContentFooter from '.~/components/stepper/step-content-footer';
 import VerticalGapLayout from '.~/components/vertical-gap-layout';
 import { ConnectedGoogleAccountCard } from '.~/components/google-account-card';
 import GoogleAdsAccountCard from '.~/components/google-ads-account-card';
-import FreeAdCredit from './free-ad-credit';
+import FreeAdCredit from '.~/components/free-ad-credit';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus';
 import useGoogleAccount from '.~/hooks/useGoogleAccount';
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
index 3be1cd6664..64a8e6388e 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
@@ -13,6 +13,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 FreeAdCredit from '.~/components/free-ad-credit';
+import useFreeAdCredit from '.~/hooks/useFreeAdCredit';
+import VerticalGapLayout from '.~/components/vertical-gap-layout';
 import './paid-ads-features-section.scss';
 
 function FeatureList( { hideBudgetContent } ) {
@@ -68,6 +71,8 @@ export default function PaidAdsFeaturesSection( {
 	skipButton,
 	continueButton,
 } ) {
+	const hasFreeAdCredit = useFreeAdCredit();
+
 	return (
 		<Section
 			className="gla-paid-ads-features-section"
@@ -103,32 +108,36 @@ export default function PaidAdsFeaturesSection( {
 		>
 			<Section.Card>
 				<Section.Card.Body>
-					<Flex
-						className="gla-paid-ads-features-section__content"
-						align="center"
-						gap={ 9 }
-					>
-						<FlexBlock>
-							<Section.Card.Title>
-								{ __(
-									'Drive more sales with Performance Max',
-									'google-listings-and-ads'
-								) }
-							</Section.Card.Title>
-							<div className="gla-paid-ads-features-section__subtitle">
-								{ __(
-									'Reach more customers by advertising your products across Google Ads channels like Search, YouTube and Discover. Set up your campaign now so your products are included as soon as they’re approved.',
-									'google-listings-and-ads'
-								) }
-							</div>
-							<FeatureList
-								hideBudgetContent={ hideBudgetContent }
-							/>
-						</FlexBlock>
-						<FlexItem>
-							<CampaignPreview />
-						</FlexItem>
-					</Flex>
+					<VerticalGapLayout size="medium">
+						<Flex
+							className="gla-paid-ads-features-section__content"
+							align="center"
+							gap={ 9 }
+						>
+							<FlexBlock>
+								<Section.Card.Title>
+									{ __(
+										'Drive more sales with Performance Max',
+										'google-listings-and-ads'
+									) }
+								</Section.Card.Title>
+								<div className="gla-paid-ads-features-section__subtitle">
+									{ __(
+										'Reach more customers by advertising your products across Google Ads channels like Search, YouTube and Discover. Set up your campaign now so your products are included as soon as they’re approved.',
+										'google-listings-and-ads'
+									) }
+								</div>
+								<FeatureList
+									hideBudgetContent={ hideBudgetContent }
+								/>
+							</FlexBlock>
+							<FlexItem>
+								<CampaignPreview />
+							</FlexItem>
+						</Flex>
+
+						{ hasFreeAdCredit && <FreeAdCredit /> }
+					</VerticalGapLayout>
 				</Section.Card.Body>
 				<Section.Card.Footer hidden={ hideFooterButtons }>
 					{ skipButton }
diff --git a/tests/e2e/utils/mock-requests.js b/tests/e2e/utils/mock-requests.js
index 8cb320cc6f..942b48d988 100644
--- a/tests/e2e/utils/mock-requests.js
+++ b/tests/e2e/utils/mock-requests.js
@@ -541,6 +541,23 @@ export default class MockRequests {
 		await this.fulfillAdsAccounts( [] );
 	}
 
+	/**
+	 * Mock Google Ads account as connected.
+	 *
+	 * @param {number} [id=12345]
+	 * @return {Promise<void>}
+	 */
+	async mockAdsSubAccountConnected( id = 12345 ) {
+		await this.fulfillAdsConnection( {
+			id,
+			sub_account: true,
+			created_timestamp: Date.now(),
+			currency: 'TWD',
+			symbol: 'NT$',
+			status: 'connected',
+		} );
+	}
+
 	/**
 	 * Mock MC as connected.
 	 *

From 06feea2121d58d6793e1880bb6a4f3dbc2fc7ef1 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Thu, 22 Aug 2024 15:39:35 +0400
Subject: [PATCH 2/7] Add e2e tests.

---
 .../setup-mc/step-4-complete-campaign.test.js | 21 +++++++++++++++++++
 tests/e2e/utils/mock-requests.js              |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
index 53b2a4a497..e5d81a2cf5 100644
--- a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
+++ b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
@@ -140,6 +140,27 @@ test.describe( 'Complete your campaign', () => {
 		).toBeVisible();
 	} );
 
+	test.describe( 'Free Ad Credit', () => {
+		test( 'shoud not see the Free Ad Credit section if the account is not eligible', async () => {
+			await expect(
+				page.getByText(
+					'Spend $500 to get $500 in Google Ads credits!'
+				)
+			).not.toBeVisible();
+		} );
+
+		test( 'should see the Free Ad Credit section if the account is eligible', async () => {
+			await setupAdsAccountPage.mockAdsSubAccountConnected();
+			await completeCampaign.goto();
+
+			await expect(
+				page.getByText(
+					'Spend $500 to get $500 in Google Ads credits!'
+				)
+			).toBeVisible();
+		} );
+	} );
+
 	test.describe( 'FAQ panels', () => {
 		test( 'should see five questions in FAQ', async () => {
 			const faqTitles = getFAQPanelTitle( page );
diff --git a/tests/e2e/utils/mock-requests.js b/tests/e2e/utils/mock-requests.js
index 942b48d988..92063852f5 100644
--- a/tests/e2e/utils/mock-requests.js
+++ b/tests/e2e/utils/mock-requests.js
@@ -547,7 +547,7 @@ export default class MockRequests {
 	 * @param {number} [id=12345]
 	 * @return {Promise<void>}
 	 */
-	async mockAdsSubAccountConnected( id = 12345 ) {
+	async mockAdsSubAccountConnected( id = 123456 ) {
 		await this.fulfillAdsConnection( {
 			id,
 			sub_account: true,

From 02537c218b8c0be21c1d5d62f5bb39f3dce71474 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Fri, 23 Aug 2024 18:10:53 +0400
Subject: [PATCH 3/7] Add goto campaign.

---
 tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
index e5d81a2cf5..9f86c320e0 100644
--- a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
+++ b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
@@ -141,7 +141,8 @@ test.describe( 'Complete your campaign', () => {
 	} );
 
 	test.describe( 'Free Ad Credit', () => {
-		test( 'shoud not see the Free Ad Credit section if the account is not eligible', async () => {
+		test( 'should not see the Free Ad Credit section if the account is not eligible', async () => {
+			await completeCampaign.goto();
 			await expect(
 				page.getByText(
 					'Spend $500 to get $500 in Google Ads credits!'

From 4b83445aa4e669581599a6c0d22288d615e2d85e Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 27 Aug 2024 18:19:56 +0400
Subject: [PATCH 4/7] Change condition to display the coupon banner.

---
 .../paid-ads-features-section.js              | 22 +++----------------
 .../setup-mc/step-4-complete-campaign.test.js | 12 +++++-----
 tests/e2e/utils/mock-requests.js              | 17 --------------
 3 files changed, 10 insertions(+), 41 deletions(-)

diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
index 64a8e6388e..46e08963a6 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import { Pill } from '@woocommerce/components';
 import GridiconCheckmark from 'gridicons/dist/checkmark';
-import GridiconGift from 'gridicons/dist/gift';
 
 /**
  * Internal dependencies
@@ -14,11 +13,10 @@ import Section from '.~/wcdl/section';
 import AppDocumentationLink from '.~/components/app-documentation-link';
 import CampaignPreview from '.~/components/paid-ads/campaign-preview';
 import FreeAdCredit from '.~/components/free-ad-credit';
-import useFreeAdCredit from '.~/hooks/useFreeAdCredit';
 import VerticalGapLayout from '.~/components/vertical-gap-layout';
 import './paid-ads-features-section.scss';
 
-function FeatureList( { hideBudgetContent } ) {
+function FeatureList() {
 	const featuresItems = [
 		{
 			Icon: GridiconCheckmark,
@@ -29,16 +27,6 @@ function FeatureList( { hideBudgetContent } ) {
 		},
 	];
 
-	if ( ! hideBudgetContent ) {
-		featuresItems.push( {
-			Icon: GridiconGift,
-			content: __(
-				'Claim $500 in ads credit when you spend your first $500 with Google Ads. Terms and conditions apply.',
-				'google-listings-and-ads'
-			),
-		} );
-	}
-
 	return (
 		<div className="gla-paid-ads-features-section__feature-list">
 			{ featuresItems.map( ( { Icon, content }, idx ) => (
@@ -71,8 +59,6 @@ export default function PaidAdsFeaturesSection( {
 	skipButton,
 	continueButton,
 } ) {
-	const hasFreeAdCredit = useFreeAdCredit();
-
 	return (
 		<Section
 			className="gla-paid-ads-features-section"
@@ -127,16 +113,14 @@ export default function PaidAdsFeaturesSection( {
 										'google-listings-and-ads'
 									) }
 								</div>
-								<FeatureList
-									hideBudgetContent={ hideBudgetContent }
-								/>
+								<FeatureList />
 							</FlexBlock>
 							<FlexItem>
 								<CampaignPreview />
 							</FlexItem>
 						</Flex>
 
-						{ hasFreeAdCredit && <FreeAdCredit /> }
+						{ ! hideBudgetContent && <FreeAdCredit /> }
 					</VerticalGapLayout>
 				</Section.Card.Body>
 				<Section.Card.Footer hidden={ hideFooterButtons }>
diff --git a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
index 9f86c320e0..2474206b3a 100644
--- a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
+++ b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
@@ -141,24 +141,26 @@ test.describe( 'Complete your campaign', () => {
 	} );
 
 	test.describe( 'Free Ad Credit', () => {
-		test( 'should not see the Free Ad Credit section if the account is not eligible', async () => {
+		test( 'should see the Free Ad Credit section if the account is eligible', async () => {
+			await setupAdsAccountPage.mockAdsAccountConnected();
 			await completeCampaign.goto();
+
 			await expect(
 				page.getByText(
 					'Spend $500 to get $500 in Google Ads credits!'
 				)
-			).not.toBeVisible();
+			).toBeVisible();
 		} );
 
-		test( 'should see the Free Ad Credit section if the account is eligible', async () => {
-			await setupAdsAccountPage.mockAdsSubAccountConnected();
+		test( 'should not see the Free Ad Credit section if the account is not eligible', async () => {
+			await setupAdsAccountPage.mockAdsAccountDisconnected();
 			await completeCampaign.goto();
 
 			await expect(
 				page.getByText(
 					'Spend $500 to get $500 in Google Ads credits!'
 				)
-			).toBeVisible();
+			).not.toBeVisible();
 		} );
 	} );
 
diff --git a/tests/e2e/utils/mock-requests.js b/tests/e2e/utils/mock-requests.js
index 92063852f5..8cb320cc6f 100644
--- a/tests/e2e/utils/mock-requests.js
+++ b/tests/e2e/utils/mock-requests.js
@@ -541,23 +541,6 @@ export default class MockRequests {
 		await this.fulfillAdsAccounts( [] );
 	}
 
-	/**
-	 * Mock Google Ads account as connected.
-	 *
-	 * @param {number} [id=12345]
-	 * @return {Promise<void>}
-	 */
-	async mockAdsSubAccountConnected( id = 123456 ) {
-		await this.fulfillAdsConnection( {
-			id,
-			sub_account: true,
-			created_timestamp: Date.now(),
-			currency: 'TWD',
-			symbol: 'NT$',
-			status: 'connected',
-		} );
-	}
-
 	/**
 	 * Mock MC as connected.
 	 *

From 24c93287e63381abdf77640e6e071418407d14c5 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 27 Aug 2024 18:50:49 +0400
Subject: [PATCH 5/7] Fix E2E tests.

---
 .../setup-mc/step-4-complete-campaign.test.js | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
index 2474206b3a..fb1d1bb2f4 100644
--- a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
+++ b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
@@ -140,30 +140,6 @@ test.describe( 'Complete your campaign', () => {
 		).toBeVisible();
 	} );
 
-	test.describe( 'Free Ad Credit', () => {
-		test( 'should see the Free Ad Credit section if the account is eligible', async () => {
-			await setupAdsAccountPage.mockAdsAccountConnected();
-			await completeCampaign.goto();
-
-			await expect(
-				page.getByText(
-					'Spend $500 to get $500 in Google Ads credits!'
-				)
-			).toBeVisible();
-		} );
-
-		test( 'should not see the Free Ad Credit section if the account is not eligible', async () => {
-			await setupAdsAccountPage.mockAdsAccountDisconnected();
-			await completeCampaign.goto();
-
-			await expect(
-				page.getByText(
-					'Spend $500 to get $500 in Google Ads credits!'
-				)
-			).not.toBeVisible();
-		} );
-	} );
-
 	test.describe( 'FAQ panels', () => {
 		test( 'should see five questions in FAQ', async () => {
 			const faqTitles = getFAQPanelTitle( page );
@@ -467,4 +443,28 @@ test.describe( 'Complete your campaign', () => {
 			}
 		} );
 	} );
+
+	test.describe( 'Free Ad Credit', () => {
+		test( 'should not see the Free Ad Credit section if the account is not eligible', async () => {
+			await setupAdsAccountPage.mockAdsAccountDisconnected();
+			await completeCampaign.goto();
+
+			await expect(
+				page.getByText(
+					'Spend $500 to get $500 in Google Ads credits!'
+				)
+			).not.toBeVisible();
+		} );
+
+		test( 'should see the Free Ad Credit section if the account is eligible', async () => {
+			await setupAdsAccountPage.mockAdsAccountConnected();
+			await completeCampaign.goto();
+
+			await expect(
+				page.getByText(
+					'Spend $500 to get $500 in Google Ads credits!'
+				)
+			).toBeVisible();
+		} );
+	} );
 } );

From 90fd7e771ed1158b1b4a2d54981a27cf2b6b1710 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Thu, 5 Sep 2024 20:38:00 +0400
Subject: [PATCH 6/7] Fix E2E tests.

---
 .../setup-paid-ads/paid-ads-features-section.js   |  7 ++++---
 .../setup-paid-ads/setup-paid-ads.js              |  1 -
 .../setup-mc/step-4-complete-campaign.test.js     | 15 +++++++++++++--
 tests/e2e/utils/mock-requests.js                  |  4 +++-
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
index 46e08963a6..63244ecd3c 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
@@ -14,6 +14,7 @@ import AppDocumentationLink from '.~/components/app-documentation-link';
 import CampaignPreview from '.~/components/paid-ads/campaign-preview';
 import FreeAdCredit from '.~/components/free-ad-credit';
 import VerticalGapLayout from '.~/components/vertical-gap-layout';
+import useFreeAdCredit from '.~/hooks/useFreeAdCredit';
 import './paid-ads-features-section.scss';
 
 function FeatureList() {
@@ -48,17 +49,17 @@ function FeatureList() {
  * 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.
  */
 export default function PaidAdsFeaturesSection( {
-	hideBudgetContent,
 	hideFooterButtons,
 	skipButton,
 	continueButton,
 } ) {
+	const hasFreeAdCredit = useFreeAdCredit();
+
 	return (
 		<Section
 			className="gla-paid-ads-features-section"
@@ -120,7 +121,7 @@ export default function PaidAdsFeaturesSection( {
 							</FlexItem>
 						</Flex>
 
-						{ ! hideBudgetContent && <FreeAdCredit /> }
+						{ hasFreeAdCredit && <FreeAdCredit /> }
 					</VerticalGapLayout>
 				</Section.Card.Body>
 				<Section.Card.Footer hidden={ hideFooterButtons }>
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..6233c7ffa6 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
@@ -170,7 +170,6 @@ export default function SetupPaidAds() {
 				) }
 			/>
 			<PaidAdsFeaturesSection
-				hideBudgetContent={ ! hasGoogleAdsConnection }
 				hideFooterButtons={
 					! hasGoogleAdsConnection || showPaidAdsSetup
 				}
diff --git a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
index fb1d1bb2f4..5c1e31b9bc 100644
--- a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
+++ b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
@@ -445,10 +445,18 @@ test.describe( 'Complete your campaign', () => {
 	} );
 
 	test.describe( 'Free Ad Credit', () => {
+		test.beforeAll( async () => {
+			await setupAdsAccountPage.mockAdsAccountConnected();
+		} );
+
 		test( 'should not see the Free Ad Credit section if the account is not eligible', async () => {
-			await setupAdsAccountPage.mockAdsAccountDisconnected();
 			await completeCampaign.goto();
 
+			// Check we are on the correct page.
+			await expect(
+				page.getByText( 'Create a campaign to advertise your products' )
+			).toBeVisible();
+
 			await expect(
 				page.getByText(
 					'Spend $500 to get $500 in Google Ads credits!'
@@ -457,7 +465,10 @@ test.describe( 'Complete your campaign', () => {
 		} );
 
 		test( 'should see the Free Ad Credit section if the account is eligible', async () => {
-			await setupAdsAccountPage.mockAdsAccountConnected();
+			await setupAdsAccountPage.mockAdsAccountConnected( 12345, {
+				sub_account: true,
+				created_timestamp: Math.floor( Date.now() / 1000 ),
+			} );
 			await completeCampaign.goto();
 
 			await expect(
diff --git a/tests/e2e/utils/mock-requests.js b/tests/e2e/utils/mock-requests.js
index 8cb320cc6f..04d3198f8a 100644
--- a/tests/e2e/utils/mock-requests.js
+++ b/tests/e2e/utils/mock-requests.js
@@ -513,14 +513,16 @@ export default class MockRequests {
 	 * Mock Google Ads account as connected.
 	 *
 	 * @param {number} [id=12345]
+	 * @param {Object} [args={}] - Additional properties to customize the account connection details.
 	 * @return {Promise<void>}
 	 */
-	async mockAdsAccountConnected( id = 12345 ) {
+	async mockAdsAccountConnected( id = 12345, args = {} ) {
 		await this.fulfillAdsConnection( {
 			id,
 			currency: 'TWD',
 			symbol: 'NT$',
 			status: 'connected',
+			...args,
 		} );
 	}
 

From 9a612d3d0ba0e4506880f16da88f1bb8c3f26904 Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Wed, 18 Sep 2024 16:32:52 +0400
Subject: [PATCH 7/7] Wait for ads connection response.

---
 .../setup-mc/step-4-complete-campaign.test.js      |  7 +++----
 .../utils/pages/setup-ads/setup-ads-accounts.js    | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
index 76dd7d8da2..080379f6c0 100644
--- a/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
+++ b/tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js
@@ -358,12 +358,10 @@ test.describe( 'Complete your campaign', () => {
 	);
 
 	test.describe( 'Free Ad Credit', () => {
-		test.beforeAll( async () => {
-			await setupAdsAccountPage.mockAdsAccountConnected();
-		} );
-
 		test( 'should not see the Free Ad Credit section if the account is not eligible', async () => {
+			await setupAdsAccountPage.mockAdsAccountConnected();
 			await completeCampaign.goto();
+			await setupAdsAccountPage.awaitAdsConnectionResponse();
 
 			// Check we are on the correct page.
 			await expect(
@@ -383,6 +381,7 @@ test.describe( 'Complete your campaign', () => {
 				created_timestamp: Math.floor( Date.now() / 1000 ),
 			} );
 			await completeCampaign.goto();
+			await setupAdsAccountPage.awaitAdsConnectionResponse();
 
 			await expect(
 				page.getByText(
diff --git a/tests/e2e/utils/pages/setup-ads/setup-ads-accounts.js b/tests/e2e/utils/pages/setup-ads/setup-ads-accounts.js
index a84a70f63f..8577686b5a 100644
--- a/tests/e2e/utils/pages/setup-ads/setup-ads-accounts.js
+++ b/tests/e2e/utils/pages/setup-ads/setup-ads-accounts.js
@@ -228,4 +228,18 @@ export default class SetupAdsAccount extends MockRequests {
 		const button = this.getConnectDifferentAccountButton();
 		await button.click();
 	}
+
+	/**
+	 * Await the response for ads connection.
+	 *
+	 * @return {Promise<import('@playwright/test').Response>} The response.
+	 */
+	async awaitAdsConnectionResponse() {
+		return this.page.waitForResponse( ( response ) => {
+			return (
+				response.url().includes( '/gla/ads/connection' ) &&
+				response.status() === 200
+			);
+		} );
+	}
 }