Show Ads value prop in Paid Campaign performance card

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

@@ -8,6 +8,7 @@ import { SummaryNumber } from '@woocommerce/components';
  * Internal dependencies
  */
 import { glaData, REPORT_SOURCE_PAID, REPORT_SOURCE_FREE } from '.~/constants';
+import useAdsCampaigns from '.~/hooks/useAdsCampaigns';
 import useAdsCurrency from '.~/hooks/useAdsCurrency';
 import useCurrencyFormat from '.~/hooks/useCurrencyFormat';
 import usePerformance from './usePerformance';
@@ -106,17 +107,27 @@ const PaidPerformanceCard = () => {
 };
 
 export default function SummarySection() {
+	const { loaded, data: adsCampaignsData } = useAdsCampaigns();
 	const { adsSetupComplete } = glaData;
+	let showCampaignPromotionCard = true;
+	if ( adsSetupComplete ) {
+		if ( ! loaded ) {
+			return null;
+		}
+		if ( adsCampaignsData?.length > 0 ) {
+			showCampaignPromotionCard = false;
+		}
+	}
 
 	return (
 		<>
 			<SummaryCard
 				title={ __( 'Google Ads', 'google-listings-and-ads' ) }
 			>
-				{ adsSetupComplete ? (
-					<PaidPerformanceCard />
-				) : (
+				{ showCampaignPromotionCard ? (
 					<PaidCampaignPromotionCard />
+				) : (
+					<PaidPerformanceCard />
 				) }
 			</SummaryCard>
 			<SummaryCard

js/src/dashboard/summary-section/paid-features/free-ad-credit.js

@@ -11,14 +11,14 @@ import { createInterpolateElement } from '@wordpress/element';
 import AppDocumentationLink from '.~/components/app-documentation-link';
 
 /**
- * Render the Free Ads Credit div inside the Paid Features div.
+ * Render the Free Ads Credit inside the Paid Features component.
  *
  * @fires gla_documentation_link_click with `{ context: 'dashboard', link_id: 'free-ad-credit-terms', href: 'https://www.google.com/ads/coupons/terms/' }`
- * @return {JSX.Element} Free Ads Credit div.
+ * @return {JSX.Element} Free Ads Credit component.
  */
 const FreeAdCredit = () => {
 	return (
-		<div className="gla-free-ad-credit-div">
+		<div className="gla-free-ad-credit-claim">
 			<GridiconGift />
 			<div>
 				{ createInterpolateElement(

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

@@ -52,7 +52,7 @@ function FeatureList() {
 	];
 
 	return (
-		<div className="gla-paid-features-div__feature-list">
+		<div className="gla-paid-features__feature-list">
 			{ featuresItems.map( ( { Icon, content }, idx ) => (
 				<Flex key={ idx } align="flex-start">
 					<Icon size="18" />
@@ -66,15 +66,15 @@ function FeatureList() {
 /**
  * Returns a div with paid features content.
  *
- * @return {JSX.Element} Paid Features div.
+ * @return {JSX.Element} Paid Features component.
  */
 const PaidFeatures = () => {
 	return (
-		<VerticalGapLayout size="medium" className="gla-paid-features-div">
+		<VerticalGapLayout size="medium" className="gla-paid-features">
 			<Flex
 				align="center"
 				gap={ 9 }
-				className="gla-paid-features-div__content"
+				className="gla-paid-features__content"
 			>
 				<FlexItem>
 					<CampaignPreview />

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

@@ -1,4 +1,4 @@
-.gla-paid-features-div {
+.gla-paid-features {
 	@media (max-width: $break-small) {
 		&__content {
 			flex-direction: column;
@@ -19,14 +19,15 @@
 		}
 	}
 
-	.gla-free-ad-credit-div {
+	.gla-free-ad-credit-claim {
 		text-align: left;
-		background-color: #fff;
+		background-color: $white;
 		display: flex;
 		align-items: center;
 		gap: calc(var(--main-gap) / 3 * 2);
-		padding: calc(var(--main-gap) / 3 * 2);
-		color: $black;
+		padding: 16px 12px;
+		color: #1e1e1e;
+		font-size: $gla-font-base;
 
 		.gridicon {
 			fill: #5ec862;

tests/e2e/specs/dashboard/paid-features.test.js

@@ -47,12 +47,12 @@ test.describe( 'Paid Feature Listing', () => {
 			'Google Ads'
 		);
 
-		await expect( dashboardPage.paidFeaturesDiv ).toContainText(
+		await expect( dashboardPage.paidFeatures ).toContainText(
 			'Reach more customer by advertising your products across Google Ads channels like Search, YouTube and Discover.'
 		);
 
 		// FreeAdCredit div content visible.
-		await expect( dashboardPage.paidFeaturesDiv ).toContainText(
+		await expect( dashboardPage.paidFeatures ).toContainText(
 			'Claim $500 in ads credit when you spend your first $500 with Google Ads.'
 		);
 
@@ -76,13 +76,32 @@ test.describe( 'Paid Feature Listing', () => {
 			await clearCompletedAdsSetup();
 			await page.close();
 		} );
-		test( 'Paid Features listing is complete', async () => {
+		test( 'When no campaign present', async () => {
 			await dashboardPage.goto();
 			await expect( dashboardPage.googleAdsSummaryCard ).toContainText(
 				'Google Ads'
 			);
 
-			await expect( dashboardPage.paidFeaturesDiv ).not.toBeVisible();
+			await expect( dashboardPage.paidFeatures ).toBeVisible();
+		} );
+		test( 'When atleast one campaign present', async () => {
+			await dashboardPage.fulfillAdsCampaignsRequest( [
+				{
+					id: 111111111,
+					name: 'Test Campaign',
+					status: 'enabled',
+					type: 'performance_max',
+					amount: 1,
+					country: 'US',
+					targeted_locations: [ 'US' ],
+				},
+			] );
+			await dashboardPage.goto();
+			await expect( dashboardPage.googleAdsSummaryCard ).toContainText(
+				'Google Ads'
+			);
+
+			await expect( dashboardPage.paidFeatures ).not.toBeVisible();
 		} );
 	} );
 } );

tests/e2e/utils/pages/dashboard.js

@@ -23,10 +23,9 @@ export default class DashboardPage extends MockRequests {
 		this.googleAdsSummaryCard = this.page.locator(
 			'.gla-dashboard__performance .gla-summary-card:nth-child(1)'
 		);
-		this.paidFeaturesDiv = this.googleAdsSummaryCard.locator(
-			'.gla-paid-features-div'
-		);
-		this.createCampaignButton = this.paidFeaturesDiv.locator( 'button', {
+		this.paidFeatures =
+			this.googleAdsSummaryCard.locator( '.gla-paid-features' );
+		this.createCampaignButton = this.paidFeatures.locator( 'button', {
 			hasText: 'Create Campaign',
 		} );
 		this.addPaidCampaignButton = this.page.locator(