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:

Title: Create Google Ads Account

⚠️ Are you sure you want to create a new Google Ads account?

You already have another Ads account associated with this Google account.

If you create a new Google Ads account, you will need to accept an invite to the account before it can be used.

[Yes, I want the new account] [Cancel]

• 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