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

[joemcgill]

Caution

Blocked by #2596

Part of #2509

While connecting the store to Google Ads, a merchant may want to create a new account, even if they already have an existing Ads account 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 an "Are you sure" modal, which lets them initiate account creation or cancel (screenshot shows an example of the Merchant Center modal, copy for the Ads modal TBD).

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

Creating a new Google Ads 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..."

Once the account is created, we'll display the Claim you account UI:

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

Acceptance Criteria

• When the Ads 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 created
• Once the account is created, the UI to claim the account will be shown.
• Once the account is created and claimed, the plugin finishes setting up the account and shows the Ads account 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

• Create the ConfirmCreateModal component in the same folder as the ConnectAds component created in Onboarding: Connect to existing Ads account in Google Accounts Card #2596.
  • The modal should be similar to js/src/components/google-mc-account-card/warning-modal/index.js with updated copy.
  • Copy TBD
• Using the ConnectAds component created in Onboarding: Connect to existing Ads account in Google Accounts Card #2596,
  • Add a new callback when clicking the "Or, create a new Google Ads account". The ConfirmCreateModal should be rendered, prompting the user's confirmation.
  • If the user confirms, start the creation of a new Google Ads account using the upsertAdsAccount function from the useUpsertAdsAccount hook.
    • Inspiration can be taken from js/src/components/google-ads-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, it should be claimed.
    • Render the ClaimAccount component which was created in Onboarding: Connect to existing MC account in Google Accounts Card #2597 within the ConnectAds component.
    • Refer to the implementation in Onboarding: Connect to existing MC account in Google Accounts Card #2597 for the claim flow.
  • Once the account has been claimed,
    • Set the newly created account has connected by calling the fetchConnectAdsAccount function via the useApiFetchCallback hook.
      • Refer to the implementation in js/src/components/google-ads-account-card/connect-ads/index.js on how to pass the new Google Ads ID to useApiFetchCallback
      • To get the newly created Google Ads ID, use the useGoogleAdsAccount hook.
  • Once we have a connected Google Ads account, display the accounts dropdown again along with the connected state button.
  • Within the connected state,
    • the "Or, create a new Google Ads account" button should be replaced by "Or, connect to a different Google Ads account".
      • Refer to the implementation in js/src/components/google-ads-account-card/disconnect-account.js and the possibility of re using the DisconnectAccount component.

Test Coverage

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

Definition Questions

• We'll need to confirm the copy for the "are you sure" modal for this one. See: https://www.figma.com/design/fqR0EHi63lWahRcVTKCcba?node-id=7261-2465#946061411

[asvinb]

@joemcgill I've added the IB and do you think we need the confirmation modal? Right now, when you want to create a new Ads account, the TermsModal is displayed which acts like a confirmation.

The IB has been written with the above in mind. Curious to hear your thoughts.

[joemcgill]

@asvinb Given that at the point where we are showing this UI the user has already accepted terms (prior to connecting their Google account in #2566), I don't think an additional terms modal is necessary. I do think we should have an AYS modal just to keep someone from accidentally clicking that button. I think this will make the UI more consistent between the two types of account as well.

[asvinb]

Thanks @joemcgill . IB has been updated to reflect this.

[joemcgill]

One additional suggestion is that we not refer to the "are you sure" modal as a WarningModal and instead call it something like ConfirmCreateModal, since the main objective is to ensure the user meant to initiate the new account creation and provide extra context to help inform their decision.

I'm marking this as needs design until we can get confirmation for the "are you sure" modal text and the design for the UI while a new account is being created and will follow up with @fblascogarma and @michaeleleder.

[asvinb]

WarningModal has been renamed to ConfirmCreateModal in the IB. Thanks @joemcgill

[joemcgill]

• Warning modal copy TBD: I'll confirm with @fblascogarma and @michaeleleder about this.

Everything else looks right to me. @eason9487 anything you'd add?

[eason9487]

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

The copy of "Create a new Google Ads account" in this status might need adjustment, like "Use another Google Ads account" or "Connect to a different Google Ads account". The same goes for the rest copy on the UI because it looks like it's still waiting to connect an account.

[asvinb]

@eason9487 Maybe we can update the copy during implementation? cc @joemcgill

[joemcgill]

Good thinking, @eason9487. We'll need to add the ability to connect a different account for both the Ads and MC component after they're connected.

@asvinb What do you think about including that in the scope of this issue and #2604, respectively?

[asvinb]

Sure thing @joemcgill . IB has been updated to account for the new button.

[joemcgill]

@asvinb thanks! @eason9487 can you look at this one again as well?

[eason9487]

Looks good. Thanks for the updates!