Merge pull request #2558 from woocommerce/feature/2499-banner-coupon

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,19 @@ 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 useFreeAdCredit from '.~/hooks/useFreeAdCredit';
 import './paid-ads-features-section.scss';
 
-function FeatureList( { hideBudgetContent } ) {
+function FeatureList() {
 	const featuresItems = [
 		{
 			Icon: GridiconCheckmark,
@@ -26,16 +28,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 ) => (
@@ -55,11 +47,10 @@ function FeatureList( { hideBudgetContent } ) {
 /**
  * Renders a section layout to elaborate on the features of paid ads and show the buttons
  * 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.
  */
-export default function PaidAdsFeaturesSection( { hideBudgetContent } ) {
+export default function PaidAdsFeaturesSection() {
+	const hasFreeAdCredit = useFreeAdCredit();
+
 	return (
 		<Section
 			className="gla-paid-ads-features-section"
@@ -95,32 +86,34 @@ export default function PaidAdsFeaturesSection( { hideBudgetContent } ) {
 		>
 			<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>
+
+						{ hasFreeAdCredit && <FreeAdCredit /> }
+					</VerticalGapLayout>
 				</Section.Card.Body>
 			</Section.Card>
 		</Section>

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

@@ -168,9 +168,7 @@ export default function SetupPaidAds() {
 					'google-listings-and-ads'
 				) }
 			/>
-			<PaidAdsFeaturesSection
-				hideBudgetContent={ ! hasGoogleAdsConnection }
-			/>
+			<PaidAdsFeaturesSection />
 			<PaidAdsSetupSections
 				onStatesReceived={ setPaidAds }
 				countryCodes={ countryCodes }

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

@@ -356,4 +356,38 @@ 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.mockAdsAccountConnected();
+			await completeCampaign.goto();
+			await setupAdsAccountPage.awaitAdsConnectionResponse();
+
+			// 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!'
+				)
+			).not.toBeVisible();
+		} );
+
+		test( 'should see the Free Ad Credit section if the account is eligible', async () => {
+			await setupAdsAccountPage.mockAdsAccountConnected( 12345, {
+				sub_account: true,
+				created_timestamp: Math.floor( Date.now() / 1000 ),
+			} );
+			await completeCampaign.goto();
+			await setupAdsAccountPage.awaitAdsConnectionResponse();
+
+			await expect(
+				page.getByText(
+					'Spend $500 to get $500 in Google Ads credits!'
+				)
+			).toBeVisible();
+		} );
+	} );
 } );

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,
 		} );
 	}
 

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
+			);
+		} );
+	}
 }