Onboarding: Consolidation of account creation/connection cards

[joemcgill]

As part of the Onboarding Improvements project (#2458), we want to consolidate the functionality and UX from three separate cards that are responsible for connecting to a Google account, a Google Ads account, and a Google Merchant Center account, into a new single flow.

Current UI:

Proposed flow

There are 4 possible scenarios to account for:

1. Merchant doesn’t have Merchant Center accounts nor Google Ads accounts.
2. Merchant has one or more Merchant Center account but not an Google Ads account.
3. Merchant has one or more Merchant Center and Google Ads accounts.
4. Merchant doesn’t have Merchant Center accounts but has one or more Google Ads accounts.

Design Overview

Design mocks are being iterated on in this Figma file.

The new combined Google account connection card will begin by asking the user to accept terms & conditions for Google MC and Google Ads before starting the connection process.

Once checked, the Connect button will be enabled, allowing the user to begin by setting up their Google account and enter the current OAuth flow.

Once all of the necessary permissions are granted, the Google combo card will see if any Ads or MC accounts already exist for that Google account.

If no accounts exist, they will automatically be created to start to onboarding process.

If the Google account already has existing Ads or MC accounts, a new combo view will allow the user to select which accounts to connect, along with some recommendations based on info we can infer from the account status. See an example of choosing an MC account in the following screenshot.

Technical Design

This feature will be worked on over multiple sub-tasks. Once #2566 issue is done, Each task should be branched off of feature/2509-consolidate-google-account-cards and PRs should be opened against the same feature branch.

The task list below is in progress.

Tasks

Beta Give feedback

1. Onboarding: Remove Google MC and Google Ads Cards #2565
   +0
   
2. Onboarding: Create New Google Combo Accounts Card #2566
   +0
   
3. Onboarding: Automatically kick off MC & Ads accounts creation #2567
   +0
4. Onboarding: Claim New Ads Accounts in the Google Combo Accounts Card #2582
   +0
   
5. Add AppSelectOrTextControl component #2592
   +0
   
6. Update AppSelectControl when only one account is available #2593
   +0
7. Onboarding: Connect to existing Ads account in Google Accounts Card #2596
   +0
8. Onboarding: Connect to existing MC account in Google Accounts Card #2597
   +0
   
9. Onboarding: Create new Ads account when there are existing accounts in Google Accounts Card #2603
   +0
   
10. Onboarding: Create new MC account when there are existing accounts in Google Accounts Card #2604
    +0
    
11. Onboarding: Support editing connected accounts in GoogleComboAccountsCard #2605
    +0
    
12. Onboarding: Show recommended existing Ads account in Google Accounts Card #2606
    +0
13. Onboarding: Show recommended existing MC account in Google Accounts Card #2607
    +0
14. Sync MC address during account connection #2602
    +0
    
15. Review classname of section footer gla-google-mc-account-section

[joemcgill]

Assigning this to @michaeleleder to work on some design mocks for these flows. Once they're ready we can create sub-tasks for any actionable work needed to make these changes.

[joemcgill]

Added a follow-up item to the task list to review the classname of the footer section of the account creation page, per this conversation.