Change to require Google Ads connection during the onboarding

[eason9487]

Changes proposed in this Pull Request:

Project thread: pcTzPl-1YY-p2

This PR changes the step 4 of the onboarding:

• Change it to require a connected Google Ads account and make its setup card always visible.
• Hide the content about the ad budget in the Boost card before a Google Ads account is connected.
• Adjust E2E tests to reflect the above changes.
• Extra fix: The E2E util checkFAQExpandable doesn't wait for the page to load to proceed with assertions.

It also fixes #2172 as a few related E2E tests failed.

• Cherry-pick ab228ba
• Fix the budget recommendation test cases in ea809f5

Closes #2172

Screenshots:

📹 Connect and disconnect Google Ads, complete onboarding without creating a campaign

Kapture.2023-12-13.at.16.27.59.mp4

📹 Complete onboarding along with creating a campaign

Kapture.2023-12-13.at.16.33.18.mp4

Detailed test instructions:

📌 Event tracking

💡 Testing this with the UI part together would save some time.

1. Enable event tracking logging by running localStorage.setItem( 'debug', 'wc-admin:*' ) in the Console tab of DevTool, and refresh page to make it effective.
2. Go to step 4 of the onboarding flow.
3. Test the four buttons that are marked as A, B, C, D in the following screenshot.
4. Check if the event names and their properties are the same as the description.

• gla_onboarding_complete_button_click for A and C with these properties:
  • opened_paid_ads_setup: yes | no
  • google_ads_account_status: connected | disconnected | incomplete
  • billing_method_status: unknown | pending | approved | cancelled
  • campaign_form_validation: unknown | valid | invalid
  • The unknown status is used when the paid ads setup is not opened.
• gla_onboarding_open_paid_ads_setup_button_click for B
• gla_onboarding_complete_with_paid_ads_button_click for D
  • budget: should be the same as the entered value
  • audiences: country codes of the campaign audience countries, e.g. 'US,JP,AU'

📌 UI

1. Go to step 4 of the onboarding flow.
2. During any operations in this onboarding step, the "Google Ads" section should always be shown and it should be above the "Boost product listings with paid ads" section.
3. Before a Google Ads account is connected:
   • The Boost card should only have one feature item and no footer buttons.
     
   • Check if there is no way to complete the onboarding.
4. After a Google Ads account is created:
   • The Boost card should only have three feature items and footer buttons.
     
   • Check if the onboarding can be completed without setting up billing.
5. Click the "Create a paid ad campaign" button:
   • Check if the audience and budget UIs are shown and enabled.
6. Disconnect the Google Ads account:
   • Check if the audience and budget UIs are disabled.
   • Check if the "Skip paid ads creation" and "Complete setup" buttons at the bottom of the page are disabled.
7. Connect a Google Ads account.
8. Complete the onboarding with "Skip paid ads creation".
9. Set up audience, budget, and billing. Complete the onboarding with "Complete setup".
10. View the result of E2E tests: https://github.com/woocommerce/google-listings-and-ads/actions/runs/7207930857/job/19635800443

Changelog entry

Update - Change to require Google Ads connection during the onboarding.

[eason9487]

The "justfy" is a typo. Removed it because the default value of justify is already the "space-between".

Ref: https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4019.17.0/packages/components/src/flex/flex/README.md#justify-csspropertiesjustifycontent

[jorgemd24]

Thanks @eason9487 for working on this, the code looks good and I ran different tests with different scenarios and everything works well. There was one scenario that was not mentioned in the PR but the code manages the situation nicely.

When you try to link an older Ads account without billing set up, the API shows the account as connected (because the last incomplete step is not set). However, the UI will still prompt the billing setup card, which works fine in this case.

Also the E2E tests are now passing 👍