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 and creation to use the recommended budget as the initial value and adjust its description.

[codecov]

Codecov Report

Attention: Patch coverage is 48.68421% with 39 lines in your changes missing coverage. Please review.

Project coverage is 62.6%. Comparing base (425c6e3) to head (a560e90).
Report is 50 commits behind head on feature/2459-campaign-creation-flow.

Files with missing lines	Patch %	Lines
js/src/data/resolvers.js	22.2%	12 Missing and 2 partials ⚠️
js/src/setup-ads/ads-stepper/setup-paid-ads.js	61.5%	10 Missing ⚠️
js/src/utils/getHighestBudget.js	0.0%	5 Missing and 2 partials ⚠️
...-ads/budget-section/budget-recommendation/index.js	0.0%	3 Missing ⚠️
js/src/hooks/useFetchBudgetRecommendation.js	80.0%	2 Missing ⚠️
js/src/pages/create-paid-ads-campaign/index.js	0.0%	1 Missing and 1 partial ⚠️
js/src/components/paid-ads/budget-section/index.js	0.0%	1 Missing ⚠️

Additional details and impacted files

@@                          Coverage Diff                          @@
##           feature/2459-campaign-creation-flow   #2552     +/-   ##
=====================================================================
+ Coverage                                 62.1%   62.6%   +0.5%     
=====================================================================
  Files                                      327     329      +2     
  Lines                                     5109    5166     +57     
  Branches                                  1244    1254     +10     
=====================================================================
+ Hits                                      3171    3232     +61     
+ Misses                                    1756    1752      -4     
  Partials                                   182     182             

Flag	Coverage Δ
js-unit-tests	62.6% <48.7%> (+0.5%)	⬆️

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

Files with missing lines	Coverage Δ
js/src/data/action-types.js	100.0% <ø> (ø)
js/src/data/reducer.js	83.8% <100.0%> (+0.3%)	⬆️
js/src/data/selectors.js	50.0% <100.0%> (+1.5%)	⬆️
js/src/data/utils.js	98.0% <100.0%> (+0.1%)	⬆️
js/src/setup-ads/ads-stepper/index.js	100.0% <100.0%> (ø)
js/src/components/paid-ads/budget-section/index.js	15.4% <0.0%> (+4.9%)	⬆️
js/src/hooks/useFetchBudgetRecommendation.js	80.0% <80.0%> (ø)
js/src/pages/create-paid-ads-campaign/index.js	10.0% <0.0%> (-0.3%)	⬇️
...-ads/budget-section/budget-recommendation/index.js	5.3% <0.0%> (+1.3%)	⬆️
js/src/utils/getHighestBudget.js	0.0% <0.0%> (ø)
... and 2 more

... and 5 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]

@ankitguptaindia The issue you mentioned here should be fixed now. One thing to note that is if you input a lower number than the recommended budget, you move forward and then come back, you'll still see the lower number. It's fine since in #2503 , the user will not be able to go to the next step if the amount he enters is lower than the recommended budget.

[ankitguptaindia]

Staus of issues reported here in #2552 (comment)

@ankitguptaindia The issue you mentioned #2552 (comment) should be fixed now. One thing to note that is if you input a lower number than the recommended budget, you move forward and then come back, you'll still see the lower number. It's fine since in #2503 , the user will not be able to go to the next step if the amount he enters is lower than the recommended budget.

Thanks, @asvinb reported use cases have been addressed and working as expected now.

[asvinb]

@ankitguptaindia Can you please check if you can still reproduce the issues mentioned here after the latest updates please?
Thanks!

[asvinb]

@eason9487 Can you review proposed changes please? We are now calling the useFetchBudgetRecommendation hook in the BudgetSection component (https://github.com/woocommerce/google-listings-and-ads/pull/2552/files#diff-930c930d2c6b54b942dd7cecad526e73a68845aece1d8cb09885f1aa8c43a1e9R55) which is displayed once a Google Ads account is connected. Furthermore, we've invalidated the state for for useFetchBudgetRecommendation whenever a Google Ads account is disconnected/connected.

[eason9487]

The e2e testing couldn't pass.

No longer applicable.