2499: Add coupon banner

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';

js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js

@@ -5,17 +5,18 @@ 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
  */
 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 VerticalGapLayout from '.~/components/vertical-gap-layout';
 import './paid-ads-features-section.scss';
 
-function FeatureList( { hideBudgetContent } ) {
+function FeatureList() {
 	const featuresItems = [
 		{
 			Icon: GridiconCheckmark,
@@ -26,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 ) => (
@@ -103,32 +94,34 @@ 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 />
+							</FlexBlock>
+							<FlexItem>
+								<CampaignPreview />
+							</FlexItem>
+						</Flex>
+
+						{ ! hideBudgetContent && <FreeAdCredit /> }
+					</VerticalGapLayout>
 				</Section.Card.Body>
 				<Section.Card.Footer hidden={ hideFooterButtons }>
 					{ skipButton }

tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js

@@ -443,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();
+		} );
+	} );
 } );