Show Ads value prop in Paid Campaign performance card

js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js

@@ -14,10 +14,9 @@
 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() {
 	const featuresItems = [
 		{
 			Icon: GridiconCheckmark,
@@ -48,9 +47,7 @@
  * 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.
  */
 export default function PaidAdsFeaturesSection() {
-	const hasFreeAdCredit = useFreeAdCredit();
-
 	return (
 		<Section
 			className="gla-paid-ads-features-section"
@@ -111,8 +108,7 @@
 								<CampaignPreview />
 							</FlexItem>
 						</Flex>
-
-						{ hasFreeAdCredit && <FreeAdCredit /> }
+						<FreeAdCredit />
 					</VerticalGapLayout>
 				</Section.Card.Body>
 			</Section.Card>

js/src/dashboard/summary-section/paid-campaign-promotion-card.js

@@ -1,51 +1,20 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Spinner } from '@woocommerce/components';
 
 /**
  * Internal dependencies
  */
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
-import AddPaidCampaignButton from '.~/components/paid-ads/add-paid-campaign-button';
-import { GOOGLE_ADS_ACCOUNT_STATUS } from '.~/constants';
-
-const PromotionContent = ( { adsAccount } ) => {
-	const showFreeCredit =
-		adsAccount.sub_account ||
-		adsAccount.status === GOOGLE_ADS_ACCOUNT_STATUS.DISCONNECTED;
-
-	return (
-		<>
-			<p>
-				{ showFreeCredit
-					? __(
-							'Create your first campaign and get $500 in ad credit*',
-							'google-listings-and-ads'
-					  )
-					: __(
-							'Create your first campaign',
-							'google-listings-and-ads'
-					  ) }
-			</p>
-			<AddPaidCampaignButton
-				eventProps={ { context: 'add-paid-campaign-promotion' } }
-			/>
-		</>
-	);
-};
+import PaidFeatures from './paid-features';
 
 function PaidCampaignPromotionCard() {
 	const { googleAdsAccount } = useGoogleAdsAccount();
 
 	return (
 		<div className="gla-summary-card__body">
-			{ googleAdsAccount ? (
-				<PromotionContent adsAccount={ googleAdsAccount } />
-			) : (
-				<Spinner />
-			) }
+			{ googleAdsAccount ? <PaidFeatures /> : <Spinner /> }
 		</div>
 	);
 }

js/src/dashboard/summary-section/paid-features/index.js

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+import { Flex, FlexBlock, FlexItem, Card } from '@wordpress/components';
+import GridiconCheckmark from 'gridicons/dist/checkmark';
+
+/**
+ * Internal dependencies
+ */
+import { ContentLink } from '.~/components/guide-page-content';
+import CampaignPreview from '.~/components/paid-ads/campaign-preview';
+import AddPaidCampaignButton from '.~/components/paid-ads/add-paid-campaign-button';
+import FreeAdCredit from '.~/components/free-ad-credit';
+import VerticalGapLayout from '.~/components/vertical-gap-layout';
+import './index.scss';
+
+function FeatureList() {
+	const featuresItems = [
+		{
+			Icon: GridiconCheckmark,
+			content: __(
+				'Reach more customer by advertising your products across Google Ads channels like Search, YouTube and Discover.',
+				'google-listings-and-ads'
+			),
+		},
+		{
+			Icon: GridiconCheckmark,
+			content: __(
+				'Set a daily budget and only pay when people click on your ads.',
+				'google-listings-and-ads'
+			),
+		},
+		{
+			Icon: GridiconCheckmark,
+			content: createInterpolateElement(
+				__(
+					"Performance Max uses the best of Google's AI to show the most impactful ads for your products at the right time and place. <link>Learn more about Performance Max technology.</link>",
+					'google-listings-and-ads'
+				),
+				{
+					link: (
+						<ContentLink
+							href="https://support.google.com/google-ads/answer/10724817"
+							context="campaign-creation-performance-max"
+						/>
+					),
+				}
+			),
+		},
+	];
+
+	return (
+		<div className="gla-paid-features-section__feature-list">
+			{ featuresItems.map( ( { Icon, content }, idx ) => (
+				<Flex key={ idx } align="flex-start">
+					<Icon size="18" />
+					<FlexBlock>{ content }</FlexBlock>
+				</Flex>
+			) ) }
+		</div>
+	);
+}
+
+/**
+ * Returns a Card with the given content.
+ *
+ * @return {Card} Card with title and content.
+ */
+const PaidFeatures = () => {
+	return (
+		<VerticalGapLayout size="medium" className="gla-paid-features-section">
+			<Flex
+				align="center"
+				gap={ 9 }
+				className="gla-paid-features-section__content"
+			>
+				<FlexItem>
+					<CampaignPreview />
+				</FlexItem>
+				<FlexBlock>
+					<FeatureList />
+				</FlexBlock>
+			</Flex>
+			<FreeAdCredit />
+			<AddPaidCampaignButton
+				isPrimary
+				isSecondary={ false }
+				isSmall={ false }
+				eventProps={ {
+					context: 'add-paid-campaign-promotion',
+				} }
+			>
+				{ __( 'Create Campaign', 'google-listings-and-ads' ) }
+			</AddPaidCampaignButton>
+		</VerticalGapLayout>
+	);
+};
+
+export default PaidFeatures;

js/src/dashboard/summary-section/paid-features/index.scss

@@ -0,0 +1,30 @@
+.gla-paid-features-section {
+	@media (max-width: $break-small) {
+		&__content {
+			flex-direction: column;
+			gap: $grid-unit-20;
+		}
+	}
+
+	&__feature-list {
+		display: flex;
+		flex-direction: column;
+		gap: $grid-unit-20;
+		margin: $grid-unit-30 0 $grid-unit-20;
+		line-height: $gla-line-height-smaller;
+		color: $gray-800;
+		text-align: left;
+
+		.gridicon {
+			fill: #5ec862;
+		}
+	}
+
+	.gla-free-ad-credit {
+		text-align: left;
+	}
+
+	.components-button {
+		align-self: flex-end;
+	}
+}

js/src/setup-ads/ads-stepper/setup-accounts/index.js

@@ -18,7 +18,6 @@ import FreeAdCredit from '.~/components/free-ad-credit';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus';
 import useGoogleAccount from '.~/hooks/useGoogleAccount';
-import useFreeAdCredit from '.~/hooks/useFreeAdCredit';
 import AppSpinner from '.~/components/app-spinner';
 import Section from '.~/wcdl/section';
 
@@ -27,7 +26,6 @@ const SetupAccounts = ( props ) => {
 	const { google } = useGoogleAccount();
 	const { googleAdsAccount, hasGoogleAdsConnection } = useGoogleAdsAccount();
 	const { hasAccess, step } = useGoogleAdsAccountStatus();
-	const hasFreeAdCredit = useFreeAdCredit();
 
 	if ( ! google || ( google.active === 'yes' && ! googleAdsAccount ) ) {
 		return <AppSpinner />;
@@ -72,7 +70,7 @@ const SetupAccounts = ( props ) => {
 						) }
 					/>
 					<GoogleAdsAccountCard />
-					{ hasFreeAdCredit && <FreeAdCredit /> }
+					<FreeAdCredit />
 				</VerticalGapLayout>
 			</Section>
 			<StepContentFooter>

tests/e2e/specs/add-paid-campaigns/add-paid-campaigns.test.js

@@ -80,16 +80,37 @@ test.describe( 'Set up Ads account', () => {
 	} );
 
 	test( 'Dashboard page contains Add Paid campaign buttons', async () => {
-		//Add page campaign in the Performance (Paid Campaigns) section
-		await expect(
-			dashboardPage.getAdsConnectionAllProgramsButton( 'summary-card' )
-		).toBeEnabled();
-
 		//Add page campaign in the programs section.
 		adsConnectionButton = dashboardPage.getAdsConnectionAllProgramsButton();
 		await expect( adsConnectionButton ).toBeEnabled();
 	} );
 
+	test( 'Dashboard page contains Paid Features section with feature list and Create Campaign button', async () => {
+		await expect(
+			page.getByText(
+				'Reach more customer by advertising your products across Google Ads channels like Search, YouTube and Discover.'
+			)
+		).toBeVisible();
+
+		await expect(
+			page.getByText(
+				'New to Google Ads? Get $500 in ad credit when you spend $500 within your first 60 days.'
+			)
+		).toBeVisible();
+
+		await expect( dashboardPage.getCreateCampaignButton() ).toBeEnabled();
+		await dashboardPage.getCreateCampaignButton().click();
+		await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+		await expect(
+			page.getByRole( 'heading', {
+				name: 'Set up your accounts',
+			} )
+		).toBeVisible();
+
+		await dashboardPage.goto();
+		await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+	} );
+
 	test.describe( 'Set up your accounts page', async () => {
 		test.beforeAll( async () => {
 			await setupAdsAccounts.mockAdsAccountsResponse( [] );

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

@@ -9,6 +9,7 @@ const { test, expect } = require( '@playwright/test' );
 import SetupBudgetPage from '../../utils/pages/setup-ads/setup-budget';
 import CompleteCampaign from '../../utils/pages/setup-mc/step-4-complete-campaign';
 import SetupAdsAccountPage from '../../utils/pages/setup-ads/setup-ads-accounts';
+import DashboardPage from '../../utils/pages/dashboard';
 import {
 	checkFAQExpandable,
 	getFAQPanelTitle,
@@ -35,6 +36,11 @@ let completeCampaign = null;
  */
 let setupAdsAccountPage = null;
 
+/**
+ * @type {import('../../utils/pages/dashboard.js').default} dashboardPage
+ */
+let dashboardPage = null;
+
 /**
  * @type {import('@playwright/test').Page} page
  */
@@ -44,6 +50,7 @@ test.describe( 'Complete your campaign', () => {
 	test.beforeAll( async ( { browser } ) => {
 		page = await browser.newPage();
 		setupBudgetPage = new SetupBudgetPage( page );
+		dashboardPage = new DashboardPage( page );
 		completeCampaign = new CompleteCampaign( page );
 		setupAdsAccountPage = new SetupAdsAccountPage( page );
 		await Promise.all( [
@@ -321,16 +328,16 @@ test.describe( 'Complete your campaign', () => {
 			test( 'should see buttons on Dashboard for Google Ads onboarding', async () => {
 				await page.keyboard.press( 'Escape' );
 				await page.getByRole( 'tab', { name: 'Dashboard' } ).click();
+				const addPaidCampaignButton =
+					await dashboardPage.getAdsConnectionAllProgramsButton();
 
-				const buttons = page.getByRole( 'button', {
-					name: 'Add paid campaign',
-				} );
+				await expect( addPaidCampaignButton ).toBeVisible();
+				await expect( addPaidCampaignButton ).toBeEnabled();
 
-				await expect( buttons ).toHaveCount( 2 );
-				for ( const button of await buttons.all() ) {
-					await expect( button ).toBeVisible();
-					await expect( button ).toBeEnabled();
-				}
+				const createCampaignButton =
+					await dashboardPage.getCreateCampaignButton();
+				await expect( createCampaignButton ).toBeVisible();
+				await expect( createCampaignButton ).toBeEnabled();
 			} );
 		} );
 
@@ -360,7 +367,7 @@ 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 () => {
+		test( 'should see the Free Ad Credit section always', async () => {
 			await setupAdsAccountPage.mockAdsAccountConnected();
 			await completeCampaign.goto();
 			await setupAdsAccountPage.awaitAdsConnectionResponse();
@@ -370,21 +377,6 @@ test.describe( 'Complete your campaign', () => {
 				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!'