Onboarding: Create New Google Combo Accounts Card.

js/src/components/google-combo-account-card/connect-google-combo-account-card.js

@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement, useState } from '@wordpress/element';
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { glaData } from '.~/constants';
+import AccountCard, { APPEARANCE } from '.~/components/account-card';
+import AppButton from '.~/components/app-button';
+import readMoreLink from '../google-account-card/read-more-link';
+import useGoogleConnectFlow from '../google-account-card/use-google-connect-flow';
+import AppDocumentationLink from '../app-documentation-link';
+
+/**
+ * @param {Object} props React props
+ * @param {boolean} props.disabled
+ * @fires gla_google_account_connect_button_click with `{ action: 'authorization', context: 'reconnect' }`
+ * @fires gla_google_account_connect_button_click with `{ action: 'authorization', context: 'setup-mc' }`
+ * @fires gla_documentation_link_click with `{ context: 'setup-mc-accounts', link_id: 'required-google-permissions', href: 'https://woocommerce.com/document/google-for-woocommerce/get-started/setup-and-configuration/#required-google-permissions' }`
+ */
+const ConnectGoogleComboAccountCard = ( { disabled } ) => {
+	const pageName = glaData.mcSetupComplete ? 'reconnect' : 'setup-mc';
+	const [ handleConnect, { loading, data } ] =
+		useGoogleConnectFlow( pageName );
+	const [ termsAccepted, setTermsAccepted ] = useState( false );
+
+	const checkboxId = 'gla-account-card-terms-conditions';
+	const CheckboxLabel = () => {
+		const label = createInterpolateElement(
+			__(
+				'I accept the terms and conditions of <linkMerchant>Merchant Center</linkMerchant> and <linkAds>Google Ads</linkAds>',
+				'google-listings-and-ads'
+			),
+			{
+				linkMerchant: (
+					<AppDocumentationLink
+						context="setup-mc-accounts"
+						linkId="required-google-permissions"
+						href="https://woocommerce.com/document/google-for-woocommerce/get-started/setup-and-configuration/#required-google-permissions"
+					/>
+				),
+				linkAds: (
+					<AppDocumentationLink
+						context="setup-mc-accounts"
+						linkId="required-google-permissions"
+						href="https://woocommerce.com/document/google-for-woocommerce/get-started/setup-and-configuration/#required-google-permissions"
+					/>
+				),
+			}
+		);
+
+		return label;
+	};
+
+	return (
+		<AccountCard
+			appearance={ APPEARANCE.GOOGLE }
+			className={ 'google-combo-account-card' }
+			disabled={ disabled }
+			alignIcon="top"
+			description={
+				<>
+					{ __(
+						'Required to sync with Google Merchant Center and Google Ads.',
+						'google-listings-and-ads'
+					) }
+					<div>
+						<CheckboxControl
+							id={ checkboxId }
+							checked={ termsAccepted }
+							onChange={ ( val ) => setTermsAccepted( !! val ) }
+							disabled={ disabled }
+						/>
+						{
+							// eslint-disable-next-line jsx-a11y/label-has-associated-control
+							<label htmlFor={ checkboxId }>
+								<CheckboxLabel />
+							</label>
+						}
+					</div>
+					<p>
+						<em>
+							{ createInterpolateElement(
+								__(
+									'You will be prompted to give WooCommerce access to your Google account. Please check all the checkboxes to give WooCommerce all required permissions. <link>Read more</link>',
+									'google-listings-and-ads'
+								),
+								{
+									link: readMoreLink,
+								}
+							) }
+						</em>
+					</p>
+				</>
+			}
+			alignIndicator="top"
+			indicator={
+				<AppButton
+					isSecondary
+					disabled={ disabled || ! termsAccepted }
+					loading={ loading || data }
+					eventName="gla_google_account_connect_button_click"
+					eventProps={ {
+						context: pageName,
+						action: 'authorization',
+					} }
+					text={ __( 'Connect', 'google-listings-and-ads' ) }
+					onClick={ handleConnect }
+				/>
+			}
+		/>
+	);
+};
+
+export default ConnectGoogleComboAccountCard;

js/src/components/google-combo-account-card/index.js

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import useGoogleAccount from '.~/hooks/useGoogleAccount';
+import AppSpinner from '.~/components/app-spinner';
+import AccountCard from '.~/components/account-card';
+import RequestFullAccessGoogleAccountCard from '../google-account-card/request-full-access-google-account-card';
+import { ConnectedGoogleAccountCard } from '../google-account-card';
+import ConnectGoogleComboAccountCard from './connect-google-combo-account-card';
+import './index.scss';
+
+export default function GoogleComboAccountCard( { disabled = false } ) {
+	const { google, scope, hasFinishedResolution } = useGoogleAccount();
+
+	if ( ! hasFinishedResolution ) {
+		return <AccountCard description={ <AppSpinner /> } />;
+	}
+
+	const isConnected = google?.active === 'yes';
+
+	if ( isConnected && scope.glaRequired ) {
+		return <ConnectedGoogleAccountCard googleAccount={ google } />;
+	}
+
+	if ( isConnected && ! scope.glaRequired ) {
+		return (
+			<RequestFullAccessGoogleAccountCard
+				additionalScopeEmail={ google.email }
+			/>
+		);
+	}
+
+	return <ConnectGoogleComboAccountCard disabled={ disabled } />;
+}

js/src/components/google-combo-account-card/index.scss

@@ -0,0 +1,7 @@
+.google-combo-account-card {
+	.gla-account-card__description {
+		.components-checkbox-control {
+			display: inline-block;
+		}
+	}
+}

js/src/setup-mc/setup-stepper/setup-accounts/index.js

@@ -20,7 +20,7 @@ import Section from '.~/wcdl/section';
 import AppDocumentationLink from '.~/components/app-documentation-link';
 import VerticalGapLayout from '.~/components/vertical-gap-layout';
 import WPComAccountCard from '.~/components/wpcom-account-card';
-import GoogleAccountCard from '.~/components/google-account-card';
+import GoogleComboAccountCard from '.~/components/google-combo-account-card';
 import Faqs from './faqs';
 import './index.scss';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
@@ -157,7 +157,7 @@ const SetupAccounts = ( props ) => {
 					{ ! isJetpackActive && (
 						<WPComAccountCard jetpack={ jetpack } />
 					) }
-					<GoogleAccountCard disabled={ ! isJetpackActive } />
+					<GoogleComboAccountCard disabled={ ! isJetpackActive } />
 				</VerticalGapLayout>
 			</Section>