Move FreeAdCredit to src/components folder.

woocommerce · Aug 22, 2024 · fdcee7b · fdcee7b
1 parent a9a9394
commit fdcee7b
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 27 deletions.
diff --git a/...ad-credit/country-modal/country-amount.js → ...ad-credit/country-modal/country-amount.js b/...ad-credit/country-modal/country-amount.js → ...ad-credit/country-modal/country-amount.js
diff --git a/...nts/free-ad-credit/country-modal/index.js → ...nts/free-ad-credit/country-modal/index.js b/...nts/free-ad-credit/country-modal/index.js → ...nts/free-ad-credit/country-modal/index.js
diff --git a/...s/free-ad-credit/country-modal/index.scss → ...s/free-ad-credit/country-modal/index.scss b/...s/free-ad-credit/country-modal/index.scss → ...s/free-ad-credit/country-modal/index.scss
diff --git a/...er/setup-accounts/free-ad-credit/index.js → js/src/components/free-ad-credit/index.js b/...er/setup-accounts/free-ad-credit/index.js → js/src/components/free-ad-credit/index.js
diff --git a/.../setup-accounts/free-ad-credit/index.scss → js/src/components/free-ad-credit/index.scss b/.../setup-accounts/free-ad-credit/index.scss → 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
@@ -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
@@ -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
@@ -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.
 	 *