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 (in scope of this ticket)
• From the edited state, Ads and MC account can be connected, disconnected, or created (if already implemented, otherwise out of scope)

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.
• Notes:
  • Even if all accounts have been connected, the components to connect the Ads/MC accounts should remain visible.
  • When in semi-expanded state, upon a successful account connection, the UI should revert to the "compact" state.

Test Coverage

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

Definition Questions

[asvinb]

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

[joemcgill]

Thanks, @asvinb. The implementation brief looks good to me. I had not originally considered the implementation for disconnecting the Google account to be in scope of this issue, but since we don't have another one, I think it makes sense to combine with this work. I've updated the estimate to account for this.

@eason9487 this is ready for you to review.

[eason9487]

If this component will be used in this plugin's Settings, Reconnecting or Ads-onboarding page as well, it needs to take care of whether they should keep it without offering the functionality to disconnect Google Merchant account or Google Ads account.

I have no further thoughts on Implementation Brief. Due to the complexity of the component, I can't foresee how it might eventually be possible or appropriate to implement.

[eason9487]

Are there more conditions that will actively or passively change the state between compact, semi-expanded, and fully-expanded? For example:

• When the current state is fully-expanded, will it be updated to compact after all account connections are completed?
• When the current state is semi-expanded, will it be updated to compact after the more complex interactions are completed?

[asvinb]

@eason9487 I added a "Notes" section in the IB to clarify when to switch to compact or stay in edit mode. cc @joemcgill

[joemcgill]

@asvin I agree with what you added in the notes section.

@eason9487 at this time, this component will only be used in the onboarding flow for connecting accounts. The original cards will still be used on the settings screen and for reconnecting the ads screen.

I'm going to mark this one as ready for implementation