Onboarding: Support editing connected accounts in GoogleComboAccountsCard

[joemcgill]

Part of #2509

Caution

Blocked by #2596 and #2597.

While connecting accounts to the store, a merchant may need to edit one or more of the connected accounts being shown in the GoogleComboAccountsCard.

To achieve this, it is important to understand the three main visual states that the GoogleComboAccountCard supports:

1. Compact – In this state, all three accounts are represented in the top card body section. This state is used when automatically creating new accounts and after all accounts have been successfully connected.

2. Semi-expanded – In this state, the top card body section represents multiple connected accounts (e.g., Google and Google Ads) but one account is represented in it's own section to allow for more complex interactions, like selecting from an existing account to connect.

3. Fully-expanded – This state is used when both the Ads and MC account need to be shown in their own sections, or when the user needs to edit any accounts that were already connected

In either of the first two scenarios, the top section of the combo card should include an "Edit" link, which will switch the GoogleComboAccountsCard to the third, Fully-expanded state.

In this state, the top section only represents the Google Account, and includes a link to connect a different Google Account. Below, the Ads and MC accounts will be shown in their own panels where accounts can be disconnected, connected, created, etc.

Acceptance Criteria

• When multiple accounts are represented in the top section of the card, an "edit" button is shown
• Clicking the "edit" button causes the card to be shown in the fully-expanded state
• From the edited state the connected Google account can be changed
• From the edited state, Ads and MC account can be connected, disconnected, or created (if already implemented)

Implementation Brief

• Using the GoogleComboAccountsCard component,
  • Add a state variable to indicate whether the user clicked on the "Edit" button.
  • If this is the case,
    • Do not render the "Connected" icon for the Google account and the "Merchant Center ID" and "Google Ads ID" (within GoogleComboCard)
    • Replace the "Edit" button by the "Connect to a different Google account" text as per the designs.
      • Consider having a component within js/src/components/google-combo-account-card/connect-google-account/ to handle all the logic instead of having the code in GoogleComboAccountsCard.
    • The ConnectAds (created in Onboarding: Connect to existing Ads account in Google Accounts Card #2596) and ConnectMC (created in Onboarding: Connect to existing MC account in Google Accounts Card #2597) should be rendered (irrespective the accounts are connected or not).
      • Edit the existing code to ensure the "Edit" mode has higher priority when showing the above components.
      • Additional state variables might be needed, to know when/if the ConnectAds and ConnectMC are automatically rendered (if there are accounts and the user is prompted to connect accounts).
• Create the ConnectWarningModal component within js/src/components/google-combo-account-card/connect-google-account/connect-warning-modal.js.
  • The modal should follow the same implementation as other modals in the codebase. For e.g js/src/components/google-mc-account-card/warning-modal/index.js
  • Add the buttons and text as per the designs
  • When the user clicks on the
    • "Go back" button, the modal should be closed without any further actions.
    • "Continue" button, the disconnectAllAccounts action should be dispatched and the modal closed.
      • Reference: js/src/settings/disconnect-modal/confirm-modal.js
      • Upon disconnection, the UI should be as per the designs (implemented in Onboarding: Create New Google Combo Accounts Card #2566)
• Clicking on the "Connect to a different Google account" button should render the ConnectWarningModal.
  • Add a state variable to determine when the modal is opened/closed.

Test Coverage

• Relevant E2E tests should be added to cover the above.

Definition Questions

[asvinb]

@joemcgill Can you kindly review the IB please?
Thanks!