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] 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.
 	 *