Merge pull request #2601 from woocommerce/feature/2566-google-combo-card

Onboarding: Create New Google Combo Accounts Card.

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

@@ -0,0 +1,105 @@
+/**
+ * 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';
+import './connect-google-combo-account-card.scss';
+
+/**
+ * @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' }`
+ * @fires gla_documentation_link_click with `{ context: 'setup-mc-accounts', link_id: 'google-mc-terms-of-service', href: 'https://support.google.com/merchants/answer/160173' }`
+ * @fires gla_documentation_link_click with `{ context: 'setup-ads', link_id: 'google-ads-terms-of-service', href: 'https://support.google.com/adspolicy/answer/54818' }`
+ */
+const ConnectGoogleComboAccountCard = ( { disabled } ) => {
+	const pageName = glaData.mcSetupComplete ? 'reconnect' : 'setup-mc';
+	const [ handleConnect, { loading, data } ] =
+		useGoogleConnectFlow( pageName );
+	const [ termsAccepted, setTermsAccepted ] = useState( false );
+
+	return (
+		<AccountCard
+			appearance={ APPEARANCE.GOOGLE }
+			className="gla-connect-google-combo-account-card"
+			disabled={ disabled }
+			alignIcon="top"
+			description={
+				<>
+					<p>
+						{ __(
+							'Required to sync with Google Merchant Center and Google Ads.',
+							'google-listings-and-ads'
+						) }
+					</p>
+					<CheckboxControl
+						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="google-mc-terms-of-service"
+										href="https://support.google.com/merchants/answer/160173"
+									/>
+								),
+								linkAds: (
+									<AppDocumentationLink
+										context="setup-ads"
+										linkId="google-ads-terms-of-service"
+										href="https://support.google.com/adspolicy/answer/54818"
+									/>
+								),
+							}
+						) }
+						checked={ termsAccepted }
+						onChange={ setTermsAccepted }
+						disabled={ disabled }
+					/>
+				</>
+			}
+			helper={ 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,
+				}
+			) }
+			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/connect-google-combo-account-card.scss

@@ -0,0 +1,6 @@
+.gla-connect-google-combo-account-card {
+
+	.gla-account-card__helper {
+		font-size: $gla-font-base;
+	}
+}

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

@@ -0,0 +1,33 @@
+/**
+ * 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';
+
+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/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>