Update Budget Setup Card.

[ankitrox]

Changes proposed in this Pull Request:

Closes #2502 .

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

Screenshots:

Detailed test instructions:

1. Proceed with the onboarding flow and complete first 3 steps of the onboarding flow.
2. On the 4th step, notice that Daily average cost input will have the pre-populated value with highest budget in the recommended budgets. For example:

• If UAE (14 USD), Hong Kong (6 USD)and Vietnam (5 USD) are selected, the input should be populated with 14.00

3. Go through the setup ads flow/create a new paid campaign from the dashboard, the budget input should be pre populated with the highest budget value.
4. The screenshot shows the ability of changing/updating countries but this is no longer the case now.

Additional details:

Changelog entry

Update - Change the campaign setup in the onboarding to use the recommended budget as the initial value and adjust its description.

[codecov]

Codecov Report

Attention: Patch coverage is 9.43396% with 48 lines in your changes missing coverage. Please review.

Project coverage is 60.7%. Comparing base (34c53d7) to head (7aaa968).

Files with missing lines	Patch %	Lines
js/src/data/resolvers.js	0.0%	13 Missing and 3 partials ⚠️
...paid-ads-setup-sections/paid-ads-setup-sections.js	0.0%	9 Missing and 2 partials ⚠️
js/src/utils/getHighestBudget.js	0.0%	5 Missing and 2 partials ⚠️
js/src/hooks/useFetchBudgetRecommendation.js	16.7%	5 Missing ⚠️
...ign/paid-ads-setup-sections/paid-ads-setup-form.js	0.0%	3 Missing and 1 partial ⚠️
js/src/data/selectors.js	33.3%	1 Missing and 1 partial ⚠️
js/src/data/utils.js	0.0%	2 Missing ⚠️
...-ads/budget-section/budget-recommendation/index.js	0.0%	1 Missing ⚠️

Additional details and impacted files

@@                               Coverage Diff                                @@
##           update/2535-consolidate-ad-creation-ccf-merged   #2552     +/-   ##
================================================================================
- Coverage                                            61.0%   60.7%   -0.3%     
================================================================================
  Files                                                 330     331      +1     
  Lines                                                5183    5211     +28     
  Branches                                             1254    1264     +10     
================================================================================
+ Hits                                                 3162    3165      +3     
- Misses                                               1832    1852     +20     
- Partials                                              189     194      +5     

Flag	Coverage Δ
js-unit-tests	60.7% <9.4%> (-0.3%)	⬇️

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

Files with missing lines	Coverage Δ
...-campaign/paid-ads-setup-sections/clientSession.js	33.3% <ø> (ø)
js/src/components/paid-ads/budget-section/index.js	13.3% <ø> (+2.8%)	⬆️
js/src/data/action-types.js	100.0% <ø> (ø)
js/src/data/reducer.js	83.8% <100.0%> (+0.3%)	⬆️
...-ads/budget-section/budget-recommendation/index.js	5.0% <0.0%> (+1.0%)	⬆️
js/src/data/selectors.js	47.1% <33.3%> (-0.4%)	⬇️
js/src/data/utils.js	94.1% <0.0%> (-3.8%)	⬇️
...ign/paid-ads-setup-sections/paid-ads-setup-form.js	2.9% <0.0%> (ø)
js/src/hooks/useFetchBudgetRecommendation.js	16.7% <16.7%> (ø)
js/src/utils/getHighestBudget.js	0.0% <0.0%> (ø)
... and 2 more

... and 2 files with indirect coverage changes

[joemcgill]

This is looking really good, but issues I've noted a few issues where this could be improved.

[joemcgill]

Why do we no longer need to wait for this response after the country setting is changed? It looks like when the country values change, the text that reads "Tip: Most merchants targeting similar countries set a daily budget of %d USD" does change, so we should probably ensure that is still being tested.

[ankitrox]

@joemcgill This is no longer require because we are fulfilling the budget recommendation here, so we no longer have to wait to capture the budget recommendation response.

Those assertions will still be tested with the new fulfilment.

[joemcgill]

@ankitrox I'm still unsure why we need to remove this. Could you clarify?

[ankitrox]

@joemcgill Sorry for missing this one.

Initially when we were removing country from (or updating anything in Select country/s textbox), a request to budget recommendation endpoint was triggered which we were awaiting to get fulfilled in setupBudgetPage.registerBudgetRecommendationResponse()

Now, as per our new implementation, that request will no longer trigger because we are using the countries that have been selected in step 2 which acts as a superset for step 4 data.

Please let me know if this helps or in case of any other query.

[asvinb]

@ankitrox Can you check @joemcgill 's comment please? Not sure about this one.

[ankitrox]

Thank you @joemcgill for your feedback.

I've addressed your comments and responded to one of your comments related to removing the response promise here.

Please let me know if there's anything else you want me to look into. Over to you for another round of review.

Thanks again!

[joemcgill]

@ankitrox I'm still seeing some unexpected behavior with these changes. If you go back to a previous step after after the budget recommendations have been displayed and then return to the last step, the budget recommendations are no longer showing. I've added a video to show what I'm seeing. Can you give this another look?

budget-card.mov

Could you also provide more context for this question about the e2e test changes?

[ankitrox]

@joemcgill
Thanks for the video. It helped me understand the issue well.

The issue was happening because PaidAdsSetupSections component was getting rendered before recommendationData is resolved.

There was also an issue of amount getting changed to dailyBudget even if user has entered some value previously which gets stored in sessionStorage. This has been fixed now.

[joemcgill]

Thanks @ankitrox. This looks like it's working better now. I still have a question about one of the E2E changes that you made, which would be good to clarify, but I'm going to approve and send to @ankitguptaindia for QA.

[joemcgill]

@ankitrox I'm still unsure why we need to remove this. Could you clarify?

[ankitrox]

Hi @joemcgill

Apologies for missing the comment previously.

I have responded to the query here

[ankitguptaindia]

QA/Test Report- ✅

Testing Environment -

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

Test Results -

Changes are working as expected. tested all related test scenarios and all are working well.

Functional Demo / Screencast -

Recording.812.mp4

[eason9487]

Left some suggestions, questions, and issues that need to be resolved.

In addition, if I understand correctly, post-onboarding can still select audience countries when creating a campaign via the /wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fdashboard&subpath=%2Fcampaigns%2Fcreate path.

However, there are now two issues with this page:

• The recommended budget block is not shown
• There is no API triggered to get the recommended budget after changing the audience countries.

[eason9487]

The #2551 seems to have some code conflicts with this PR and even some of the logic might need to be rewritten afterward, so it's recommended to defer adjustment of this PR and rebase this PR onto #2551 after it's approved and merged.

[asvinb]

@ankitrox I left a comment about setting the initial values. Can you let me know what you think please?
Also there'll be additional work once #2551 is merged.

[asvinb]

@ankitrox I left some more comments. Can you kindly let me know about the suggested approach about setting the default value for amount via the initialValues prop of CampaignAssetsForm.
Also you need to check when there's no recommended budget to not display the recommendation. This is what I can see on my side while testing:

[ankitrox]

@asvinb I've created the new hook useBudgetRecommendationData, but kept the useEffectin same component because if we move up to SetupAdsForm component as well as for CreatePaidAdsCampaign, it will create the network error issue for useFetchBudgetRecommendationEffect because country codes can be undefined or blank and since these are hooks, we won't be able to call them conditionally.

[asvinb]

@ankitrox I left some more comments. Can you check them out please?
Most importantly I think we can reduce a lot of the complexity around countryCodes. Right now, we need to fetch the budget recommendation data once the country code changes and the country codes are tied to the form. In #2535 we are planning to remove countryCodes altogether, instead relying on the country codes from useTargetAudienceFinalCountryCodes. Here is what I suggest:

1. Remove the Audience field everywhere in the current PR (as opposed to removing them in Consolidate the ad creation step in the Ads Setup flow with the one used in Onboarding #2535)
2. Have the initialValues for CampaignAssetsForm components set with the recommended budget or data from local storage.

The useBudgetRecommendationData won't need to accept any parameters since it can get the list of targeted countries via the useTargetAudienceFinalCountryCodes

What do you think @joemcgill ?

[joemcgill]

One change, but otherwise it looks good. I see some additional feedback from @asvin's CR which look like they haven't been resolved. Can we close the loop on those?

Wrong branch reviewed

[joemcgill]

Realized I reviewed this prematurely because things have been updated in #2637 to resolve merge conflicts with #2623. Dismissed my review.

[joemcgill]

@asvinb and @ankitrox I've tested these changes after reviewing and merging in the updates resolving the conflicts after #2535 was integrated into this branch. This is looking pretty good to me, but wanted you both to have a chance to have another look and resolve any remaining conversations before sending back for another QA pass.

[asvinb]

Thanks @joemcgill . @ankitguptaindia Can you please QA? thanks!

[ankitguptaindia]

QA Status: Need feedback/remidiation ⚠️

Hi @asvinb,

Point-1:

The functionality works as expected when the user completes the steps continuously without navigating back in the onboarding flow. However, I noticed an issue when the user goes back after entering a lower value in the "Daily Average Cost" field.

If the user enters an amount lower than the minimum required (for example, 4 USD) and then goes back to the previous step, upon returning to the final step of the onboarding flow, the lower amount (e.g., 4 USD) remains in the "Daily Average Cost" field.

when the same steps are followed while creating a campaign from the dashboard, the "Daily Average Cost" field is automatically updated to the minimum required value (e.g., 15 USD).

Could you please check this once?

Campaign creation from Onboarding Flow:

Recording.887.mp4

Campaign creation from Onboarding vs. Dashboard:

Recording.889.mp4

---

@ankitrox

Point-2

Could you please suggest what happens when the merchant selects 'All Countries' in the Audience field during the second step? and what value will the Daily Average Cost input display in the Daily Avg Cost field?

(Please let me know if we are handing this case in any other PR)

[asvinb]

@ankitguptaindia Nice catch for #1. I just pushed an updated. Can you kindly check?
As for the second point, correct me if am wrong @ankitrox , but if you select all countries, the minimum budget will be the highest recommended amount among all the countries.

[ankitguptaindia]

Staus of issues reported here in #2552 (comment)

@asvinb

@ankitguptaindia Nice catch for #2552 (comment). I just pushed an updated. Can you kindly check?

When creating a campaign from the dashboard, if the user inputs a value higher than the required amount (e.g., if the required value is 17 and the user enters 200) and navigates back to the first screen, the budget is automatically reduced to 17.

However, when creating a campaign from the onboarding flow and following the same steps, the budget is not reduced to 17, meaning the system doesn’t enforce the minimum value.

Can we apply the same logic to both places?

• When the user inputs a value lower than the required minimum and navigates back and forth between steps, the value should be adjusted to meet the minimum requirement.
• When the user inputs a value higher than the required amount and navigates back and forth between steps, the value should remain as entered and not be reduced to the required minimum.

Campaign Creation from Dashboard screen:

Recording.898.mp4

Campaign Creation from the Onboarding screen:

Recording.899.mp4