Onboarding: Create New Google Combo Accounts Card

[joemcgill]

As part of #2509, we are consolidating the process of connecting Google accounts (including Ads and Merchant Center) into a new combined card UI, called GoogleComboAccountsCard, which will be responsible for a more streamlined experience for creating and connecting Google Accounts to the store.

To support this effort, this issue is to create the initial GoogleComboAccountsCard component and implement the first step in the connection flow — connecting their Google account. Prior to connecting a Google Account, we will ask merchants to accept the terms and conditions for Google Merchant Center and Google Ads so that we can create those accounts if needed.

The "Connect" button will be disabled until the terms and conditions are accepted, and enabled after they are accepted so the user can begin connecting their Google account.

Once connected, the current connected states should be shown based on permissions granted

When sufficient permission is given

When sufficient permissions are NOT given

Acceptance Criteria

• The current GoogleAccountCard is replaced by a new GoogleComboAccountsCard in the first step of onboarding.
• A checkbox with the text "I accept the terms and conditions of Merchant Center and Google Ads" is shown matching the designs when a Google account is not connected.
• The checkbox is initially unchecked
• The checkbox and "Connect" button should both remain disabled until WP.com is connected
• The "Connect" button will remain disabled unless the checkbox is checked
• Clicking the "Connect" button initiates the current flow to connect a Google account and grant permissions
• After connecting to the Google account the current ConnectedGoogleAccountCard is shown (with sufficient permissions) or RequestFullAccessGoogleAccountCard is shown (in not all permissions are granted.

Note: The T&C state is not recorded from the front end. They'll be recorded when those accounts are created. Since they cannot be created until a Google Account is connected no change is needed.

Implementation Brief

Note

This work should be branched from feature/2458-streamline-onboarding and a PR should be created against the feature/2458-consolidate-google-account-cards branch.

The current GoogleAccountCard located here should be duplicated to a new GoogleComboAccountCard component located at js/src/components/google-combo-account-card/ this component can reuse most of the same components consumed by GoogleAccountCard but will need a new ConnectGoogleComboAccountCard in place of ConnectGoogleAccountCard to handle the Terms & Conditions checkbox.

The state that handles whether the checkbox is checked can likely all stay inside the ConnectGoogleComboAccountCard component and be combined with the disabled prop to determine the value passed to the disabled prop of the AppButton component.

The CheckboxControl from @wordpress/components should be used for this control. It supports setting a disabled property like <CheckboxControl disabled />.

Test Coverage

• E2E tests should be updated or added to this set of assertions that confirms:
  • The checkbox is initially shown when the card is disconnected
  • The checkbox and button are disabled before WP.com is connected
  • The Connect button is disabled unless the checkbox is checked
  • The current after clicking the "Connect your Google account" button... test passes
• E2E tests for this onboarding step for the Google Ads and Google MC cards are still expected to fail after this issue is addressed and will be handled in other issues.

[joemcgill]

@eason9487 and @mikkamp could you review this and make sure I'm not missing anything important about how the terms and conditions are currently handled from the front end? It looks like this is handled by the middleware in this method, which is called whenever an MC or Ads account is created. I don't currently see anything that validates that the user has actually accepted the TOS, so I assume that it's inferred by the fact that the user has clicked to accept via the modals that are shown during the account creation process. Correct?

[mikkamp]

It looks like this is handled by the middleware in this method, which is called whenever an MC or Ads account is created.

Yes that's the right function.

I don't currently see anything that validates that the user has actually accepted the TOS, so I assume that it's inferred by the fact that the user has clicked to accept via the modals that are shown during the account creation process.

Yes that's correct, an account can not be created without accepting TOS. So if they've proceeded to creating an account then the backend just fires off the request with the accepted service / email address. The server then records a combination of the service / email / timestamp.

[joemcgill]

Thanks for the confirmation, @mikkamp. We're going to get started on this. @eason9487, please feel free to let me know if you have any additional concerns.

[joemcgill]

@dsawardekar and @eason9487, I realized that the updates I made to the implementation notes a couple of days ago didn't get saved. I've just updated them to reflect that this issue will create the initial GoogleComboAccountCard component that will be used rather than extending the current GoogleAccountCard, as recommended in this comment.

[asvinb]

@ankitrox Can you please fill in the Detailed test instructions: for your PR and then send over to QA?