Onboarding: Create new MC account when there are existing accounts in Google Accounts Card

[joemcgill]

Caution

Depends on #2597

Part of #2509

While connecting the store to Merchant Center, a merchant may want to create a new account, even if they already have existing accounts associated with their Google account.

To support this, we will add a link below the account selector to kick off account creation.

Clicking this link should show the same "Are you sure" modal that is shown today, which lets them initiate account creation or cancel.

Once they confirm they want a new account, the account selector will replaced with a message that reads:

Creating a new Google Merchant Center account
This may take a few minutes, please wait a moment...

And the Connect button will be replaced by a loading spinner with the word "Creating..."

If the merchant needs to reclaim their URL, we'll display the reclaim UI in the card as shown:

Once the new account is created and reclaimed, the card will show the new account as connected

Background

In the current GoogleMCAccountCard, when there are already MC accounts associated with the Google account, we show a link below the account selector that allows them to create a new account instead of selecting an existing one.

Clicking this link shows a modal to confirm they want to create an account.

Once they've confirmed they want a new account and have accepted terms and conditions (not applicable, since they now accept terms and conditions when connecting their Google account), we show this UI while the account is being connected.

After the new account is created, the user is shown the UI to reclaim their URL if applicable:

Acceptance Criteria

• When the MC account selector panel is visible, the user can see the link to create a new account
• Clicking the create link, displays the "Are you sure..." modal
• If the user cancels, the modal closes and the account selector is still shown
• If the user confirms they want to create a new account, the panel is replaced by the UI showing that the account is being connected
• Once the account is created, if the URL needs to be reclaimed, the reclaim UI is shown.
• Once the account is created and reclaimed, the plugin finishes setting up the account and shows MC as connected
• Once an account is connected, the create new link is replaced with a link to disconnect and connect a different account

Implementation Brief

• Using the ConnectMC component created in Onboarding: Connect to existing MC account in Google Accounts Card #2597,
  • Add a new callback when clicking the "Or, create a new Merchant Center account". The WarningModal from js/src/components/google-mc-account-card/warning-modal/index.js should be rendered, prompting the user's confirmation.
  • If the user confirms, start the creation of a new Google MC account using the handleCreateAccount function from the useCreateMCAccount hook.
    • Inspiration can be taken from js/src/components/google-mc-account-card/create-account.js
    • While the creation is in progress,
      • the dropdown to select an existing account is replaced by a message (refer to the AC)
      • The "Connect" button label changes to "Creating..." with a loading spinner.
    • Appropriate states should be added to the component to cater for the above.
  • Once an account has been created, the merchant might need to reclaim the URL.
    • Render the ReclaimUrlCard if the URL needs to be reclaimed.
    • Use the following code js/src/components/google-mc-account-card/connect-mc/index.js as inspiration.
  • Once the account has been created and URL claimed (if needed),
    • Set the newly created account to be connected by calling the handleConnectMC function via the useConnectMCAccount hook.
      • Refer to the implementation in js/src/components/google-mc-account-card/connect-mc/index.js on how to pass the new Google MC ID to useConnectMCAccount
      • To get the newly created MC ID, check the result of the useCreateMCAccount hook.
  • Once we have a connected the MC account, display the accounts dropdown again along with the connected state button.
  • Within the connected state,
    • the "Or, create a new Merchant Center account" button should be replaced by "Or, connect to a different Google Merchant Center account".
      • Refer to the implementation for handleSwitch in js/src/components/google-mc-account-card/connected-google-mc-account-card.js
        • Look into the possibility of extracting the button into a separate component to reduce code duplication which can be used both, in js/src/components/google-mc-account-card/connected-google-mc-account-card.js and current component.

Test Coverage

• Relevant E2E tests should be added to confirm what's in the AC.

Definition Questions

• Confirm the UI for the "Creating" state here: https://www.figma.com/design/fqR0EHi63lWahRcVTKCcba?node-id=7702-4791#946046858

[asvinb]

@joemcgill Can you kindly check the proposed IB please?

[joemcgill]

This looks good to me.

Render the ReclaimUrlCard if the URL needs to be reclaimed.

We could split this off to a separate ticket or make it a part of #2597. Seems like we should have the UI and logic for that in place before picking this up.

@asvinb and @eason9487, would be curious to get your thoughts on this ☝

[eason9487]

Once the new account is created and reclaimed, the card will show the new account as connected

The first suggestion is similar to #2603 (comment).

The second one is if this consolidated component will be used in this plugin's Settings or Ads-onboarding page as well, it needs to take care of they don't offer the functionality to disconnect Merchant account.

[asvinb]

@joemcgill Can you confirm that for now the component will be used for the onboarding flow only?

[joemcgill]

@asvinb this component will only be used in the onboarding flow. The original GoogleMCAccountCard will still be used in the settings screen.

[joemcgill]

Similar to #2603, we'll need to update this link once the component is updated so that it reads "Or, connect to a different Google Merchant Center account". See how this looks in the current single account component:

When that link is clicked we should fire off the DELETE request to the wp-json/wc/gla/mc/connection endpoint. See how this is handled here.

[asvinb]

Thanks @joemcgill . IB has been updated!

[joemcgill]

Thanks @asvinb. The updates look good to me. @eason9487 does this satisfy your concerns?

[eason9487]

Thanks for the update! Looks good.

[asvinb]

@eason9487 Tackled as part of the PR for #2597
PR: #2639