Streamline campaign setup: Consolidate the campaign setup UI in the onboarding with the one in the Ads-onboarding and add the billing setup back

[asvinb]

Changes proposed in this Pull Request:

Closes #2535 .

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

Detailed test instructions:

1. Go through the onboarding process and ensure a paid campaign can be created.
   • When billing is not set up, the "Launch Paid Campaign" button should be disabled.
2. Ensure the skip paid ads modal is displayed when the user clicks the skip button during the onboarding flow.
3. Go through the setup ads flow (/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fsetup-ads) and ensure a paid campaign can be created if billing is setup.
4. Ensure a paid campaign can be added via the "Add a paid campaign" button on the dashboard.
5. Ensure a paid campaign can be edited via the "Edit" links on the dashboard.
   • The budget recommendation should be for the selected countries for the paid campaign.
6. Test when billing is not setup flow, ie. the user is prompted to setup billing.
7. Users should not be able to submit/continue any flow if billing is not set up and approved.
8. Users are no longer able to view the targeted countries.

Extra issues to test:

• https://github.com/woocommerce/google-listings-and-ads/pull/2623#discussion_r1794919412
• https://github.com/woocommerce/google-listings-and-ads/pull/2623#discussion_r1794924425

Additional details:

Changelog entry

Update - Consolidate the campaign setup UI in the onboarding flow with the one in the Ads-onboarding flow. Update - Merge the billing setup into the campaign setup for the Ads-onboarding flow.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 16.12903% with 26 lines in your changes missing coverage. Please review.

Project coverage is 62.1%. Comparing base (95d6452) to head (52ba585). Report is 65 commits behind head on feature/2459-campaign-creation-flow.

Files with missing lines	Patch %	Lines
...c/components/paid-ads/ads-campaign/ads-campaign.js	0.0%	14 Missing and 3 partials :warning:
js/src/pages/create-paid-ads-campaign/index.js	0.0%	3 Missing and 1 partial :warning:
js/src/setup-ads/ads-stepper/setup-paid-ads.js	57.1%	3 Missing :warning:
...src/components/paid-ads/asset-group/asset-group.js	0.0%	1 Missing and 1 partial :warning:

Additional details and impacted files

[](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) ```diff @@ Coverage Diff @@ ## feature/2459-campaign-creation-flow #2623 +/- ## ===================================================================== + Coverage 61.8% 62.1% +0.3% ===================================================================== Files 327 327 Lines 5108 5109 +1 Branches 1242 1244 +2 ===================================================================== + Hits 3157 3171 +14 + Misses 1771 1756 -15 - Partials 180 182 +2 ``` | [Flag](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) | Coverage Δ | | |---|---|---| | [js-unit-tests](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) | `62.1% <16.1%> (+0.3%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#carryforward-flags-in-the-pull-request-comment) to find out more. | [Files with missing lines](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) | Coverage Δ | | |---|---|---| | [...src/components/paid-ads/ads-campaign/faqs-panel.js](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623?src=pr&el=tree&filepath=js%2Fsrc%2Fcomponents%2Fpaid-ads%2Fads-campaign%2Ffaqs-panel.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-anMvc3JjL2NvbXBvbmVudHMvcGFpZC1hZHMvYWRzLWNhbXBhaWduL2ZhcXMtcGFuZWwuanM=) | `66.7% <ø> (ø)` | | | [...paid-ads/ads-campaign/paid-ads-features-section.js](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623?src=pr&el=tree&filepath=js%2Fsrc%2Fcomponents%2Fpaid-ads%2Fads-campaign%2Fpaid-ads-features-section.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-anMvc3JjL2NvbXBvbmVudHMvcGFpZC1hZHMvYWRzLWNhbXBhaWduL3BhaWQtYWRzLWZlYXR1cmVzLXNlY3Rpb24uanM=) | `0.0% <ø> (ø)` | | | [js/src/pages/edit-paid-ads-campaign/index.js](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623?src=pr&el=tree&filepath=js%2Fsrc%2Fpages%2Fedit-paid-ads-campaign%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-anMvc3JjL3BhZ2VzL2VkaXQtcGFpZC1hZHMtY2FtcGFpZ24vaW5kZXguanM=) | `9.3% <ø> (ø)` | | | [js/src/setup-ads/ads-stepper/index.js](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623?src=pr&el=tree&filepath=js%2Fsrc%2Fsetup-ads%2Fads-stepper%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-anMvc3JjL3NldHVwLWFkcy9hZHMtc3RlcHBlci9pbmRleC5qcw==) | `100.0% <100.0%> (ø)` | | | [...src/components/paid-ads/asset-group/asset-group.js](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623?src=pr&el=tree&filepath=js%2Fsrc%2Fcomponents%2Fpaid-ads%2Fasset-group%2Fasset-group.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-anMvc3JjL2NvbXBvbmVudHMvcGFpZC1hZHMvYXNzZXQtZ3JvdXAvYXNzZXQtZ3JvdXAuanM=) | `4.4% <0.0%> (-0.2%)` | :arrow_down: | | [js/src/setup-ads/ads-stepper/setup-paid-ads.js](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623?src=pr&el=tree&filepath=js%2Fsrc%2Fsetup-ads%2Fads-stepper%2Fsetup-paid-ads.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-anMvc3JjL3NldHVwLWFkcy9hZHMtc3RlcHBlci9zZXR1cC1wYWlkLWFkcy5qcw==) | `57.1% <57.1%> (ø)` | | | [js/src/pages/create-paid-ads-campaign/index.js](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623?src=pr&el=tree&filepath=js%2Fsrc%2Fpages%2Fcreate-paid-ads-campaign%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-anMvc3JjL3BhZ2VzL2NyZWF0ZS1wYWlkLWFkcy1jYW1wYWlnbi9pbmRleC5qcw==) | `10.3% <0.0%> (ø)` | | | [...c/components/paid-ads/ads-campaign/ads-campaign.js](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623?src=pr&el=tree&filepath=js%2Fsrc%2Fcomponents%2Fpaid-ads%2Fads-campaign%2Fads-campaign.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-anMvc3JjL2NvbXBvbmVudHMvcGFpZC1hZHMvYWRzLWNhbXBhaWduL2Fkcy1jYW1wYWlnbi5qcw==) | `0.0% <0.0%> (ø)` | | ... and [5 files with indirect coverage changes](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2623/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce)

[asvinb]

@joemcgill Can you kindly review PR please? I've merged the campaign creation flow branch in this one and set it as the target branch where it'll simplify a lot of our work in the campaign creation flow tasks. The other PR: https://github.com/woocommerce/google-listings-and-ads/pull/2575 should no longer be relevant now.

[asvinb]

@joemcgill I've made some updates where we are loading the amount from client session only during onboarding. Can you take a look and let me know what you think.

[ankitguptaindia]

QA/Test 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 128 * OS: macOS Sonoma 14.6.1

Test Results - Followed the testing instructions, acceptance criteria, and tested all possible ways to create, edit, and manage paid ad campaigns. All tests were passed when billing was not set, with billing set, and other use cases.

Next Step- Ready to Code Review(Woo)

[asvinb]

@ankitguptaindia Can you kindly test the changes please? I also added items to double check in the QAB.

Extra issues to test:

https://github.com/woocommerce/google-listings-and-ads/pull/2623#discussion_r1794919412 https://github.com/woocommerce/google-listings-and-ads/pull/2623#discussion_r1794924425

[ankitguptaindia]

QA/Test 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 129 * OS: macOS Sonoma 14.6.1

Test Results - Tested the use cases described here https://github.com/woocommerce/google-listings-and-ads/pull/2623#issuecomment-2407721963 and paid ad creation flow after the recent changes. New paid ad campaign and editing ad campaign flow and other related use cases are working fine now.

Functional Demo / Screencast -

https://github.com/user-attachments/assets/c8f174e5-b8d6-4e69-8770-c109f8fc0767

[asvinb]

@eason9487 The uncaught error has been fixed. Can you kindly check again please? Thanks!