Show Ads value prop in Paid Campaign performance card

[kt-12]

Changes proposed in this Pull Request:

Closes #2538.

Replace this with a good description of your changes & reasoning.

Screenshots:

Detailed test instructions:

1. Complete onboarding by skipping creating a campaign.
2. Go to the dashboard after the MC step. The content should be shown under the Google Ads summary section.
3. Click on the Create Campaign and see if that takes you to the Create Campaign section.
4. Create a campaign, and the section should disappear.

In this task, we have also deprecated the useFreeAdCredit() check the last point in IB.
Test clicking Add Paid Campaign, Spend $500 to get $500 should only be shown if there is no campaign.

Additional details:

We have used the common FreeAdCredit component here, which standardises the text and various links associated with that component.

Changelog entry

Add - Show promotion for Google Ads campaign on the Dashboard page.

[codecov]

Codecov Report

Attention: Patch coverage is 42.85714% with 8 lines in your changes missing coverage. Please review.

Project coverage is 63.6%. Comparing base (e7a0f64) to head (1a516c7).
Report is 43 commits behind head on feature/2460-google-ads-value-prop.

Files with missing lines	Patch %	Lines
...c/dashboard/summary-section/paid-features/index.js	16.7%	5 Missing ⚠️
js/src/dashboard/summary-section/index.js	80.0%	1 Missing ⚠️
...rd/summary-section/paid-campaign-promotion-card.js	0.0%	1 Missing ⚠️
...rd/summary-section/paid-features/free-ad-credit.js	50.0%	1 Missing ⚠️

Additional details and impacted files

@@                         Coverage Diff                          @@
##           feature/2460-google-ads-value-prop   #2650     +/-   ##
====================================================================
+ Coverage                                63.5%   63.6%   +0.1%     
====================================================================
  Files                                     331     332      +1     
  Lines                                    5214    5210      -4     
  Branches                                 1273    1265      -8     
====================================================================
+ Hits                                     3313    3315      +2     
+ Misses                                   1723    1718      -5     
+ Partials                                  178     177      -1     

Flag	Coverage Δ
js-unit-tests	63.6% <42.9%> (+0.1%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...paid-ads/ads-campaign/paid-ads-features-section.js	0.0% <ø> (ø)
js/src/dashboard/summary-section/index.js	78.9% <80.0%> (-2.3%)	⬇️
...rd/summary-section/paid-campaign-promotion-card.js	0.0% <0.0%> (-9.1%)	⬇️
...rd/summary-section/paid-features/free-ad-credit.js	50.0% <50.0%> (ø)
...c/dashboard/summary-section/paid-features/index.js	16.7% <16.7%> (ø)

[joemcgill]

Nice work! I've left a couple suggestions.

Additionally, I noticed that the heights of each card do not match the designs:

I think this will get the right effect:

diff --git a/js/src/dashboard/index.scss b/js/src/dashboard/index.scss
index c1dfa3b54..417e5efb8 100644
--- a/js/src/dashboard/index.scss
+++ b/js/src/dashboard/index.scss
@@ -26,6 +26,7 @@
 		margin-bottom: var(--main-gap);
 
 		@include break-medium {
+			align-items: flex-start;
 			flex-direction: row;
 		}
 

I also noticed that if you create a campaign and then delete it, the promo is no longer being shown. That's because the logic to display the promo relies on the adsSetupComplete global in this line, which causes this to have the same limitations as the useAdsCampaign hook that is being discussed in this conversation, so we may want to update this as well depending on how that conversation is resolved.

[joemcgill]

This looks better to me. Thanks!

[ankitguptaindia]

QA Report- ✅

Testing Environment -

• WordPress: 6.6.2
• Theme active on store: Twenty Twenty-Four Version: 1.2
• WooCommerce - Version 9.3.3
• PHP: 8.3
• Web Server: Nginx
• Browser: Chrome - Version 130
• OS: macOS Sonoma 14.6.1

Test Results: Implementation works as expected. Google Ads content appears in the Google Ads section on the dashboard when the Ad account doesn’t have any paid campaigns. The "Create Campaign" button redirects to the campaign creation flow. If the user creates a paid campaign, this new content section does not appear. ✅

Functional Demo / Screencast -

Gogole.Ads.card.mp4

[ankitguptaindia]

@kt-12 @joemcgill During testing, I noticed that when a merchant creates a new paid campaign, the new section disappears from the Google Ads screen. However, if the merchant deletes the paid campaign and there are no active paid campaigns, this screen content doesn’t reappear. Is this the expected behaviour?

[kt-12]

@kt-12 @joemcgill During testing, I noticed that when a merchant creates a new paid campaign, the new section disappears from the Google Ads screen. However, if the merchant deletes the paid campaign and there are no active paid campaigns, this screen content doesn’t reappear. Is this the expected behaviour?

@ankitguptaindia This is due to a known issue, and currently the expected behaviour, too. cc: @joemcgill

[joemcgill]

Great question @ankitguptaindia! Sine the promotion is meant to encourage someone to create their first campaign, I believe this is the expected behavior.

[eason9487]

The first Acceptance Criteria:

When the connected Ads account does not have any existing campaigns, display the Paid Ads features with a CTA to create a campaign.

Currently, the promotion is only displayed before completing the Ads Setup flow. Excluding the considerations mentioned in #2641 (comment) regarding the existence of a connected account and adsSetupComplete, it still doesn't meet this requirement.

[...] However, if the merchant deletes the paid campaign and there are no active paid campaigns, this screen content doesn’t reappear. Is this the expected behaviour?

[...] This is due to a known issue, and currently the expected behaviour, too.

I would like to emphasize again that the "issue" recognized in that comment is imprecise, and referencing it as a "known issue" is questionable. It's a flag defined by this plugin for identifying if the merchant has completed the Ads Setup flow.

The existing logic using it for determination is because those requirements are based on that definition. If a requirement couldn't be satisfied by its definition, it should not be misplaced as a "known issue" as a reason for not being able to implement the requirement.

[kt-12]

The first Acceptance Criteria:

When the connected Ads account does not have any existing campaigns, display the Paid Ads features with a CTA to create a campaign.

Currently, the promotion is only displayed before completing the Ads Setup flow. Excluding the considerations mentioned in #2641 (comment) regarding the existence of a connected account and adsSetupComplete, it still doesn't meet this requirement.

[...] However, if the merchant deletes the paid campaign and there are no active paid campaigns, this screen content doesn’t reappear. Is this the expected behaviour?

[...] This is due to a known issue, and currently the expected behaviour, too.

I would like to emphasize again that the "issue" recognized in that comment is imprecise, and referencing it as a "known issue" is questionable. It's a flag defined by this plugin for identifying if the merchant has completed the Ads Setup flow.

The existing logic using it for determination is because those requirements are based on that definition. If a requirement couldn't be satisfied by its definition, it should not be misplaced as a "known issue" as a reason for not being able to implement the requirement.

I agree here that this is definitely within the boundaries of what was defined. Calling it a "known issue" issue would be wrong; all I wanted to point to @ankitguptaindia was that this behaviour is known to us and is well within the limit of definition.

[joemcgill]

This looks very close. Left a couple suggestions, otherwise, once the Jest tests are sorted, this is working as expected.

[joemcgill]

@eason9487 I believe everything is addressed here. I've made a few additional style tweaks to get closer to the Figma designs, but as you've noted, this was designed with a different icon set than what the plugin is currently using. I've tried to match as best as possible.

[eason9487]

Hi @joemcgill

Thanks for the style adjustments!

I believe everything is addressed here.

The #2650 (comment) and #2650 (comment) are not resolved.

[kt-12]

Hi @joemcgill

Thanks for the style adjustments!

I believe everything is addressed here.

The #2650 (comment) and #2650 (comment) are not resolved.

Hi @eason9487,

I have pushed e2e changes, which will address the remaining review comments.

[eason9487]

Thanks for the work. LGTM.