Add PMaxImproveAssetsBanner component #2983

asvinb · 2025-06-24T07:33:42Z

Changes proposed in this Pull Request:

Closes https://linear.app/a8c/issue/GOOWOO-184/show-notification-when-there-is-an-ads-recommendation

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

Screenshots:

Detailed test instructions:

Navigate to the plugin main dashboard.
Ensure you have some PMax campaigns.
Mock the /wp-json/wc/gla/ads/recommendations?type=IMPROVE_PERFORMANCE_MAX_AD_STRENGTH endpoint with the following in Devtools. See below in "Additional details" section for mocked response.
Update the campaign_id in the mock response to match one your highest spending PMax campaign.
Refresh the page, the banner should now be visible if the conditions are met.
The name of the highest spending campaign should be visible in the banner.
Clicking the "Improve Assets" button from the banner should redirect you to the campaign edit assets page for the specified campaign.
If there are no PMax campaigns or the ads/recommendations endpoint returns an empty array, the banner should not be displayed.
If the recommendations endpoint does not return the highest spending campaign, the banner should not be displayed.
If the ads/recommendations endpoint returns an error, the banner should not be displayed.
If the user has dismissed the banner, it should not be displayed again upon page reload until 30 days have passed since the dismissal.

Additional details:

Mocked response:

[
	{
		"id": 1,
		"type": "IMPROVE_PERFORMANCE_MAX_AD_STRENGTH",
		"resource_name": "customers/{customer_id}/recommendations/{recommendation_id}",
		"campaign_id": 22689268469,
		"campaign_name": "Spring Campaign",
		"campaign_status": "ENABLED",
		"last_synced": "2024-06-01T12:34:56Z"
	}
]

Changelog entry

codecov · 2025-06-24T07:37:31Z

Codecov Report

Attention: Patch coverage is 80.64516% with 12 lines in your changes missing coverage. Please review.

Project coverage is 66.7%. Comparing base (fe9f311) to head (c5d07d3).
Report is 1 commits behind head on feature/GOOWOO-172-pmax-assets-improvements.

Files with missing lines	Patch %	Lines
js/src/data/resolvers.js	0.0%	5 Missing ⚠️
js/src/data/reducer.js	0.0%	3 Missing ⚠️
js/src/data/actions.js	0.0%	2 Missing ⚠️
js/src/data/selectors.js	50.0%	0 Missing and 1 partial ⚠️
js/src/hooks/useRecommendedPMaxCampaign.js	96.3%	1 Missing ⚠️

Additional details and impacted files

@@                               Coverage Diff                                @@
##             feature/GOOWOO-172-pmax-assets-improvements   #2983      +/-   ##
================================================================================
+ Coverage                                           66.2%   66.7%    +0.5%     
================================================================================
  Files                                                828     340     -488     
  Lines                                              25729    5284   -20445     
  Branches                                            1276    1290      +14     
================================================================================
- Hits                                               17040    3526   -13514     
+ Misses                                              8536    1604    -6932     
- Partials                                             153     154       +1

Flag	Coverage Δ
js-unit-tests	`66.7% <80.6%> (+0.2%)`	⬆️
php-unit-tests	`?`

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

Files with missing lines	Coverage Δ
...rc/components/pmax-improve-assets-banner/banner.js	`100.0% <100.0%> (ø)`
...src/components/pmax-improve-assets-banner/index.js	`100.0% <100.0%> (ø)`
js/src/constants.js	`100.0% <100.0%> (ø)`
js/src/data/action-types.js	`100.0% <ø> (ø)`
js/src/pages/dashboard/index.js	`83.3% <ø> (ø)`
js/src/utils/urls.js	`55.3% <ø> (ø)`
js/src/data/selectors.js	`52.6% <50.0%> (-<0.1%)`	⬇️
js/src/hooks/useRecommendedPMaxCampaign.js	`96.3% <96.3%> (ø)`
js/src/data/actions.js	`15.1% <0.0%> (-0.1%)`	⬇️
js/src/data/reducer.js	`73.7% <0.0%> (-1.0%)`	⬇️
... and 1 more

... and 491 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

joemcgill

Just a few suggestions, but this is looking good.

One thing to keep in mind for the future is that any API calls that automatically get made by this component will need to either be mocked in E2E tests to avoid API errors or we need to figure out how to disable these notifications (maybe by pre-setting the preferences state) during the setup process for the Playwright tests.

joemcgill · 2025-07-02T00:44:27Z

js/src/components/pmax-improve-assets-banner/index.js

+				{ sprintf(
+					// translators: %s: The PMAX campaign name with the highest spending.
+					__(
+						'Unlock more sales for your campaign, %s, by focusing on improving your campaign assets.Better assets directly increase your ad strength, allowing for a wider variety of ad combinations to be shown across Google.',


Suggested change

'Unlock more sales for your campaign, %s, by focusing on improving your campaign assets.Better assets directly increase your ad strength, allowing for a wider variety of ad combinations to be shown across Google.',

'Unlock more sales for your campaign, %s, by focusing on improving your campaign assets. Better assets directly increase your ad strength, allowing for a wider variety of ad combinations to be shown across Google.',

🤦 Forgot to push my changes before to address this. Fixed @joemcgill

joemcgill · 2025-07-02T00:46:47Z

js/src/components/pmax-improve-assets-banner/index.js

+		set( PREFERENCES_STORE_NAMESPACE, PREFERENCE_BANNER_KEY, {
+			expiry: undefined, // Reset to undefined to show the banner again
+		} );


Should this be in a useEffect() hook to avoid unnecessary re-renders?

Yes, just updated it. When I tested there were no re-renders but just to make sure, I've used useEffect

joemcgill · 2025-07-02T00:49:01Z

js/src/components/pmax-improve-assets-banner/index.js

+	const pmaxCampaigns = adsCampaignsData.filter(
+		( { type, status } ) =>
+			type === CAMPAIGN_TYPE_PMAX && status === 'enabled'
+	);
+
+	if ( ! pmaxCampaigns.length ) {
+		return null;
+	}
+
+	const highestAmountCampaign = pmaxCampaigns.reduce(
+		( max, campaign ) => ( campaign.amount > max.amount ? campaign : max ),
+		pmaxCampaigns[ 0 ]
+	);


This logic could be sped up by wrapping it in a useMemo()

Sure! Updated @joemcgill

…OOWOO-184-pmax-notification

asvinb · 2025-07-02T09:46:37Z

@joemcgill I've noticed that although the Notice component is not rendered due to the expiry, requests to various endpoints were still being made. To address this, I introduced a new component, Banner, which is only rendered if the expiry value is expired or not set, thus preventing unnecessary requests when it’s not.

You can review the changes in this commit.

Another area for optimization is within the Banner component itself - we're currently making two separate requests:

Fetching ad campaigns
Fetching recommendations

I believe we can avoid fetching campaigns if there are no recommendations (or vice versa). To streamline this, I’m proposing a new hook: usePMaxCampaignRecommendation.

This hook would:

Use the getAdsRecommendations selector to retrieve recommendations
Bail early and return null if no recommendations exist
Otherwise, use getAdsCampaigns to fetch campaigns and return the one with the highest spend

This approach would eliminate one unnecessary request and make the logic easier to manage in a single place. Curious to hear your thoughts!

joemcgill · 2025-07-02T12:40:49Z

Thanks @asvinb I like your suggestion for the usePMaxCampaignRecommendation() hook. Do you want to make those updates in this PR?

asvinb · 2025-07-02T12:43:10Z

@joemcgill Let me handle it in the current PR. Thanks!

…OOWOO-184-pmax-notification

asvinb added 3 commits June 23, 2025 13:37

Add skeleton component.

10f9879

Add dimissal logic.

f18c74a

Add tests.

8273d2b

asvinb requested a review from joemcgill June 24, 2025 07:33

github-actions bot added type: enhancement The issue is a request for an enhancement. changelog: add A new feature, function, or functionality was added. labels Jun 24, 2025

asvinb changed the base branch from develop to feature/GOOWOO-172-pmax-assets-improvements June 24, 2025 07:33

asvinb added 2 commits June 24, 2025 11:45

Use DAY_IN_SECONDS constant.

cd89949

Add white space.

11fd3a1

joemcgill added changelog: none Skip changelog entry for this PR and removed changelog: add A new feature, function, or functionality was added. labels Jun 27, 2025

joemcgill reviewed Jul 2, 2025

View reviewed changes

asvinb added 3 commits July 2, 2025 12:39

Add mocked Ads recommendations endpoint.

de009c7

Merge branch 'feature/GOOWOO-172-pmax-assets-improvements' into add/G…

b8d7fb1

…OOWOO-184-pmax-notification

Add condition where there are no recommendations.

a512e79

asvinb added 4 commits July 3, 2025 23:08

Merge branch 'feature/GOOWOO-172-pmax-assets-improvements' into add/G…

60e3ced

…OOWOO-184-pmax-notification

Add unit tests for hook.

77e7aeb

Rename hook.

be26cbd

Remove unused hook.

c5d07d3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add PMaxImproveAssetsBanner component #2983

Add PMaxImproveAssetsBanner component #2983

Uh oh!

asvinb commented Jun 24, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jun 24, 2025 •

edited

Loading

Uh oh!

joemcgill left a comment

Uh oh!

joemcgill Jul 2, 2025

Uh oh!

asvinb Jul 2, 2025

Uh oh!

joemcgill Jul 2, 2025

Uh oh!

asvinb Jul 2, 2025

Uh oh!

joemcgill Jul 2, 2025

Uh oh!

asvinb Jul 2, 2025

Uh oh!

asvinb commented Jul 2, 2025 •

edited

Loading

Uh oh!

joemcgill commented Jul 2, 2025

Uh oh!

asvinb commented Jul 2, 2025

Uh oh!

Uh oh!

	'Unlock more sales for your campaign, %s, by focusing on improving your campaign assets.Better assets directly increase your ad strength, allowing for a wider variety of ad combinations to be shown across Google.',
	'Unlock more sales for your campaign, %s, by focusing on improving your campaign assets. Better assets directly increase your ad strength, allowing for a wider variety of ad combinations to be shown across Google.',

Add PMaxImproveAssetsBanner component #2983

Are you sure you want to change the base?

Add PMaxImproveAssetsBanner component #2983

Uh oh!

Conversation

asvinb commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Screenshots:

Detailed test instructions:

Additional details:

Changelog entry

Uh oh!

codecov bot commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

joemcgill left a comment

Choose a reason for hiding this comment

Uh oh!

joemcgill Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

asvinb Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

joemcgill Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

asvinb Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

joemcgill Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

asvinb Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

asvinb commented Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joemcgill commented Jul 2, 2025

Uh oh!

asvinb commented Jul 2, 2025

Uh oh!

Uh oh!

asvinb commented Jun 24, 2025 •

edited

Loading

codecov bot commented Jun 24, 2025 •

edited

Loading

asvinb commented Jul 2, 2025 •

edited

Loading