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 23d81af90f..8abdde4e33 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 @@ -13,9 +12,12 @@ 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 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 (
{ 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 (
- - - - { __( - 'Drive more sales with Performance Max', - 'google-listings-and-ads' - ) } - -
- { __( - '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' - ) } -
- -
- - - -
+ + + + + { __( + 'Drive more sales with Performance Max', + 'google-listings-and-ads' + ) } + +
+ { __( + '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' + ) } +
+ +
+ + + +
+ + { hasFreeAdCredit && } +
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 cd5f77ac13..9a6e65b1e7 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 @@ -168,9 +168,7 @@ export default function SetupPaidAds() { 'google-listings-and-ads' ) } /> - + { } ); } ); + + 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(); + } ); + } ); } ); 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} */ - async mockAdsAccountConnected( id = 12345 ) { + async mockAdsAccountConnected( id = 12345, args = {} ) { await this.fulfillAdsConnection( { id, currency: 'TWD', symbol: 'NT$', status: 'connected', + ...args, } ); } 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} The response. + */ + async awaitAdsConnectionResponse() { + return this.page.waitForResponse( ( response ) => { + return ( + response.url().includes( '/gla/ads/connection' ) && + response.status() === 200 + ); + } ); + } }