Show Ads value prop in Paid Campaign performance card

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

@@ -14,7 +14,6 @@ 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() {
@@ -49,8 +48,6 @@ function FeatureList() {
  * 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 @@ export default function PaidAdsFeaturesSection() {
 								<CampaignPreview />
 							</FlexItem>
 						</Flex>
-
-						{ hasFreeAdCredit && <FreeAdCredit /> }
+						<FreeAdCredit />
 					</VerticalGapLayout>
 				</Section.Card.Body>
 			</Section.Card>

js/src/dashboard/index.scss

@@ -26,6 +26,7 @@
 		margin-bottom: var(--main-gap);
 
 		@include break-medium {
+			align-items: flex-start;
 			flex-direction: row;
 		}
 

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-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/free-ad-credit.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import GridiconGift from 'gridicons/dist/gift';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import AppDocumentationLink from '.~/components/app-documentation-link';
+
+/**
+ * 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 component.
+ */
+const FreeAdCredit = () => {
+	return (
+		<div className="gla-free-ad-credit-claim">
+			<GridiconGift />
+			<div>
+				{ createInterpolateElement(
+					__(
+						'Claim $500 in ads credit when you spend your first $500 with Google Ads. <termLink>Terms and conditions apply</termLink>.',
+						'google-listings-and-ads'
+					),
+					{
+						termLink: (
+							<AppDocumentationLink
+								context="dashboard"
+								linkId="free-ad-credit-terms"
+								href="https://www.google.com/ads/coupons/terms/"
+							/>
+						),
+					}
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default FreeAdCredit;

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 } 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 './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__feature-list">
+			{ featuresItems.map( ( { Icon, content }, idx ) => (
+				<Flex key={ idx } align="flex-start">
+					<Icon size="18" />
+					<FlexBlock>{ content }</FlexBlock>
+				</Flex>
+			) ) }
+		</div>
+	);
+}
+
+/**
+ * Returns a div with paid features content.
+ *
+ * @return {JSX.Element} Paid Features component.
+ */
+const PaidFeatures = () => {
+	return (
+		<VerticalGapLayout size="medium" className="gla-paid-features">
+			<Flex
+				align="center"
+				gap={ 9 }
+				className="gla-paid-features__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,40 @@
+.gla-paid-features {
+	@media (max-width: $break-small) {
+		&__content {
+			flex-direction: column;
+			gap: $grid-unit-20;
+		}
+	}
+
+	&__feature-list {
+		display: flex;
+		flex-direction: column;
+		gap: $grid-unit-20;
+		line-height: $gla-line-height-smaller;
+		color: $gray-800;
+		text-align: left;
+
+		.gridicon {
+			fill: #5ec862;
+		}
+	}
+
+	.gla-free-ad-credit-claim {
+		text-align: left;
+		background-color: $white;
+		display: flex;
+		align-items: center;
+		gap: calc(var(--main-gap) / 3 * 2);
+		padding: 16px 12px;
+		color: #1e1e1e;
+		font-size: $gla-font-base;
+
+		.gridicon {
+			fill: #5ec862;
+		}
+	}
+
+	.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>