2501: Remove Audience section from paids ads setup.

[asvinb]

Changes proposed in this Pull Request:

Closes #2501

• Removed the AudienceSection from the PaidAdsSetupSections component.
• The countryCodes prop in the paidAds state variable is now initialized with the values of targetAudience which itself contains the values from the second step of the onboarding process.

Detailed test instructions:

1. Go through the onboarding flow.
2. Note the countries selected in Step 2 in the Audience section (Location). You can choose specific countries or all countries.
3. On the fourth step of the flow, there should not longer be the "Ads Audience" section. (Refer to the screenshot in the ticket description)
4. Create a new paid ad.
5. Go to the dashboard and edit the ad which was just created.
6. Check if the countries displayed match those which were selected in Step 2 of the onboarding process.

Additional details:

Changelog entry

Update - Remove ads audience field from paid ads setup during onboarding.

[codecov]

Codecov Report

Attention: Patch coverage is 20.00000% with 4 lines in your changes missing coverage. Please review.

Project coverage is 63.8%. Comparing base (4bf8bea) to head (5d5ed13).
Report is 13 commits behind head on feature/2459-campaign-creation-flow.

Files with missing lines	Patch %	Lines
js/src/components/paid-ads/budget-section/index.js	20.0%	4 Missing ⚠️

Additional details and impacted files

@@                         Coverage Diff                         @@
##           feature/2459-campaign-creation-flow   #2551   +/-   ##
===================================================================
  Coverage                                 63.8%   63.8%           
===================================================================
  Files                                      326     326           
  Lines                                     5089    5089           
  Branches                                  1231    1231           
===================================================================
  Hits                                      3245    3245           
  Misses                                    1676    1676           
  Partials                                   168     168           

Flag	Coverage Δ
js-unit-tests	63.8% <20.0%> (ø)

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

Files with missing lines	Coverage Δ
js/src/components/paid-ads/ads-campaign.js	0.0% <ø> (ø)
js/src/components/paid-ads/validateCampaign.js	100.0% <ø> (ø)
js/src/components/paid-ads/budget-section/index.js	10.5% <20.0%> (ø)

[joemcgill]

This looks like it's working properly. Left feedback on several e2e test utils that I think can be removed since they were only being used in tests that you've removed in this PR.

[asvinb]

Thanks @joemcgill . PR updated!

[joemcgill]

Thanks!

[ankitguptaindia]

QA/Test Report- ✅

Testing Environment -

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

Steps to Test- Please follow the steps mentioned in the PR description and watch below-attached screencast.

Test Results - Tested the changes in onboarding flow, and all scenarios are functioning as expected.

• UI Appearance: The interface displays as expected. ✅
• Audience section: Audience section has been removed form paid ad creation screen. ✅
• Country selected: Country/Counteries selected in Step-2 audience section, appears correctly on Ads audience of paid ads campaign. ✅
• Console Errors: No errors were found in the browser console. ✅
• PHP Logs: The logs are clean, with no errors reported. ✅
• Onboarding Flow: Merchants can successfully complete the onboarding flow with new changes. ✅

Functional Demo / Screencast -

Recording.804.mp4

Next Step- Ready to Code Review(Woo)

Plugin file with this change-related code:

google-listings-and-ads.zip

[joemcgill]

@eason9487 this one is ready for your review

[jorgemd24]

Thanks for the work on this, @asvinb, it’s working well. I left a small comment regarding the default parameter for targetAudience. Let me know what you think. Thanks!

[jorgemd24]

By setting an empty array as the default parameter, it seems targetAudience isn’t required, and we can create ads without specifying any countries.

[asvinb]

Thanks @jorgemd24 . Happy to revert that change but when I tested the "Continue" button to proceed to the next step was disabled if there were no countries selected. Screenshot below:

Also, in the validateCampaign function, there's a check for an empty array of countries.

google-listings-and-ads/js/src/components/paid-ads/validateCampaign.js

Line 19 in 93b4180

if ( values.countryCodes.length === 0 ) {

Let me know what you think 😁

[eason9487]

Thanks for the work!

Since the audience field no longer interacts with the form and has no need to be stored/restored via sessionStorage, I would suggest further adjustments to make the code more consistent with its purpose:

• Decouple the countryCodes value from clientSession
• Decouple the countryCodes value and relevant logic from <Form>
  • Remove it from initialValues prop
  • Remove it from validate prop
  • Remove disabledAudience and disabledBudget variables because they are not applicable anymore
• Update the related code comment
  

  google-listings-and-ads/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-setup-sections.js

  Line 55 in 50b13df

  * Renders sections of Google Ads account, audience, budget, and billing for setting up the paid ads.

In addition, the description in the budget field looks a bit confusion to users after removing audience field. Perhaps some adjustments could be made.

[asvinb]

@joemcgill Can you kindly take a look at the updated PR please?

[joemcgill]

These changes all seem to be working. My only concern about decoupling all of the form data and removing the validation is whether those will be needed during #2535 once we're using the same component for creating ads during onboarding and from the dashboard after onboarding. Currently, with those forms being totally separate, the one responsible for creating Ads from the dashboard does not include the validation logic at all and still works with these changes, so it's probably fine to remove in this PR.

@ankitguptaindia could you give this another looks and check that this doesn't cause a regression in the flows used when creating or editing existing ads from the dashboard?

[ankitguptaindia]

could you give this another looks and check that this doesn't cause a regression in the flows used when creating or editing existing ads from the dashboard?

@joemcgill

I checked the scenarios below and found them working:

• Onboarding flow with a paid ads campaign.
• Onboarding flow with a free ads campaign.
• Creating a new paid campaign from the dashboard.
• Editing an already running paid campaign from the dashboard.

Configured ads multiple times and couldn't face any trouble in all cases.

[asvinb]

@eason9487 Can you kindly take another look at the PR please?
Regarding your comment about the confusing description in the budget field, I suggest we create a new ticket and have a separate PR for it after clarifying the UX with the product team. What do you think?

[eason9487]

Thanks for the improvement!

There is a potential issue that needs to be resolved.

[eason9487]

Thanks for the further adjustment! LGTM.