change variable name

woocommerce · Nov 4, 2024 · 2297982 · 2297982
1 parent 38318b2
commit 2297982
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 17 deletions.
diff --git a/js/src/dashboard/summary-section/index.js b/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,28 @@ const PaidPerformanceCard = () => {
 };
 
 export default function SummarySection() {
+	const { loaded, data: adsCampaignsData } = useAdsCampaigns();
 	const { adsSetupComplete } = glaData;
+	let showCampaignPromotionCard = true;
+	if ( adsSetupComplete ) {
+		if ( ! loaded ) {
+			return null;
+		}
+		showCampaignPromotionCard = false;
+		if ( adsCampaignsData.length === 0 ) {
+			showCampaignPromotionCard = true;
+		}
+	}
 
 	return (
 		<>
 			<SummaryCard
 				title={ __( 'Google Ads', 'google-listings-and-ads' ) }
 			>
-				{ adsSetupComplete ? (
-					<PaidPerformanceCard />
-				) : (
+				{ showCampaignPromotionCard ? (
 					<PaidCampaignPromotionCard />
+				) : (
+					<PaidPerformanceCard />
 				) }
 			</SummaryCard>
 			<SummaryCard

diff --git a/js/src/dashboard/summary-section/paid-features/free-ad-credit.js b/js/src/dashboard/summary-section/paid-features/free-ad-credit.js
@@ -11,10 +11,10 @@ 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 (

diff --git a/js/src/dashboard/summary-section/paid-features/index.js b/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 />

diff --git a/js/src/dashboard/summary-section/paid-features/index.scss b/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;

diff --git a/tests/e2e/specs/dashboard/paid-features.test.js b/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.'
 		);
 
@@ -82,7 +82,7 @@ test.describe( 'Paid Feature Listing', () => {
 				'Google Ads'
 			);
 
-			await expect( dashboardPage.paidFeaturesDiv ).not.toBeVisible();
+			await expect( dashboardPage.paidFeatures ).not.toBeVisible();
 		} );
 	} );
 } );
diff --git a/tests/e2e/utils/pages/dashboard.js b/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(