Feature/2460 google ads value prop

bin/install-wp-tests.sh

@@ -196,14 +196,14 @@ install_wc() {
   if [ ! -f "$WC_VERSION_FILE" ]; then
     # set up testing suite
     rm -rf "$WC_DIR"
-    mkdir -p "$WC_DIR"
     echo "Installing WooCommerce ($WC_VERSION)."
     # Grab the necessary plugins.
     WC_TMPDIR="${TMPDIR}/woocommerce-${WC_VERSION}"
     rm -rf "${WC_TMPDIR}"
     git clone --quiet --depth=1 --branch="${WC_VERSION}" https://github.com/woocommerce/woocommerce.git "${WC_TMPDIR}"
-    mv "${WC_TMPDIR}"/plugins/woocommerce/* "$WC_DIR"
-	touch "$WC_VERSION_FILE"
+
+    ln -s "${WC_TMPDIR}"/plugins/woocommerce "$WC_DIR"
+    touch "$WC_VERSION_FILE"
 
     # Install composer for WooCommerce
     cd "${WC_DIR}"

js/src/components/free-ad-credit/index.scss

@@ -8,7 +8,7 @@
 
 	svg {
 		flex: 0 0 auto;
-		fill: #007017;
+		fill: $gla-color-green;
 	}
 
 	&__title {

js/src/components/paid-ads/add-paid-campaign-button.js

@@ -13,15 +13,15 @@ import { getCreateCampaignUrl } from '.~/utils/urls';
 import { recordGlaEvent } from '.~/utils/tracks';
 
 /**
- * "Add paid campaign" button is clicked.
+ * "Add campaign" button is clicked.
  *
  * @event gla_add_paid_campaign_clicked
  * @property {string} context Indicate the place where the button is located.
  * @property {string} href Indicate the destination where the users is directed to, e.g. `'/google/setup-ads'`.
  */
 
 /**
- * Renders an AppButton with the text "Add Paid Campaign".
+ * Renders an AppButton with the text "Add campaign".
  * Clicking on the button will call `recordGlaEvent` and
  * redirect to Setup MC or Create New Campaign depending on
  * whether the users have completed ads setup or not.
@@ -68,7 +68,7 @@ const AddPaidCampaignButton = ( props ) => {
 
 	return (
 		<AppButton isSmall isSecondary onClick={ handleClick } { ...rest }>
-			{ children || __( 'Add paid campaign', 'google-listings-and-ads' ) }
+			{ children || __( 'Add campaign', 'google-listings-and-ads' ) }
 		</AppButton>
 	);
 };

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

@@ -62,7 +62,7 @@ export default function AdsCampaign( {
 
 	let description = createInterpolateElement(
 		__(
-			'Paid Performance Max campaigns are automatically optimized for you by Google. <link>See what your ads will look like.</link>',
+			'Performance Max campaigns are automatically optimized for you by Google. <link>See what your ads will look like.</link>',
 			'google-listings-and-ads'
 		),
 		{

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/components/paid-ads/asset-group/asset-group.js

@@ -163,10 +163,7 @@
 						onClick={ handleLaunchClick }
 					>
 						{ isCreation
-							? __(
-									'Launch paid campaign',
-									'google-listings-and-ads'
-							  )
+							? __( 'Create campaign', 'google-listings-and-ads' )
 							: __( 'Save changes', 'google-listings-and-ads' ) }
 					</AppButton>
 				</StepContentActions>

js/src/dashboard/all-programs-table-card/edit-program-button/edit-program-prompt-modal/index.js

@@ -68,7 +68,7 @@ const EditProgramPromptModal = ( { programId, onRequestClose } ) => {
 		>
 			<p>
 				{ __(
-					'Results typically improve with time with Google’s Free Listing and paid ad campaigns.',
+					'Results typically improve with time.',
 					'google-listings-and-ads'
 				) }
 			</p>

js/src/dashboard/all-programs-table-card/program-toggle/pause-program-modal/index.js

@@ -52,13 +52,13 @@ const PauseProgramModal = ( props ) => {
 		>
 			<p>
 				{ __(
-					'Results typically improve with time with Google’s paid ad campaigns. If you pause, your products won’t be shown to people looking for what you offer.',
+					'Results typically improve with time. If you pause, your products won’t be shown to people looking for what you offer.',
 					'google-listings-and-ads'
 				) }
 			</p>
 			<p>
 				{ __(
-					'Pausing a paid ad campaign will result in the loss of any optimisations learned from those campaigns.',
+					'Pausing a campaign will result in the loss of any optimisations learned from those campaigns.',
 					'google-listings-and-ads'
 				) }
 			</p>

js/src/dashboard/all-programs-table-card/remove-program-button/remove-program-modal/index.js

@@ -67,7 +67,7 @@ const RemoveProgramModal = ( props ) => {
 		>
 			<p>
 				{ __(
-					'Results typically improve with time with Google’s paid ad campaigns. Removing a paid ad campaign will result in the loss of any optimisations learned from those campaigns.',
+					'Results typically improve with time. Removing a campaign will result in the loss of any optimisations learned from those campaigns.',
 					'google-listings-and-ads'
 				) }
 			</p>

js/src/dashboard/campaign-creation-success-guide/index.js

@@ -88,7 +88,7 @@ export default function CampaignCreationSuccessGuide( {
 			</div>
 			<GuidePageContent
 				title={ __(
-					`You've set up a paid Performance Max Campaign!`,
+					`You've set up a Performance Max Campaign!`,
 					'google-listings-and-ads'
 				) }
 			>

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/index.test.js

@@ -46,7 +46,7 @@ jest.mock( '@woocommerce/navigation', () => {
 jest.mock( '.~/utils/isWCTracksEnabled', () => jest.fn() );
 
 const CAMPAIGN_CREATION_SUCCESS_GUIDE_TEXT =
-	"You've set up a paid Performance Max Campaign!";
+	"You've set up a Performance Max Campaign!";
 const CES_PROMPT_TEXT = 'How easy was it to create a Google Ad campaign?';
 
 jest.mock( '.~/components/customer-effort-score-prompt', () => () => (

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

@@ -7,7 +7,8 @@
 /**
  * Internal dependencies
  */
-import { glaData, REPORT_SOURCE_PAID, REPORT_SOURCE_FREE } from '.~/constants';
+import { 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,29 +107,30 @@
 };
 
 export default function SummarySection() {
-	const { adsSetupComplete } = glaData;
+	const { loaded, data: adsCampaignsData } = useAdsCampaigns();
+	if ( ! loaded ) {
+		return null;
+	}
+	const showCampaignPromotionCard = ! adsCampaignsData?.length;
 
 	return (
 		<>
 			<SummaryCard
-				title={ __(
-					'Performance (Free Listing)',
-					'google-listings-and-ads'
-				) }
+				title={ __( 'Google Ads', 'google-listings-and-ads' ) }
 			>
-				<FreePerformanceCard />
+				{ showCampaignPromotionCard ? (
+					<PaidCampaignPromotionCard />
+				) : (
+					<PaidPerformanceCard />
+				) }
 			</SummaryCard>
 			<SummaryCard
 				title={ __(
-					'Performance (Paid Campaigns)',
+					'Free Listings (Limited Visibility)',
 					'google-listings-and-ads'
 				) }
 			>
-				{ adsSetupComplete ? (
-					<PaidPerformanceCard />
-				) : (
-					<PaidCampaignPromotionCard />
-				) }
+				<FreePerformanceCard />
 			</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;