diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js new file mode 100644 index 0000000000..732be7e8b1 --- /dev/null +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -0,0 +1,115 @@ +/** + * 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 CheckboxLabel = () => { + const label = createInterpolateElement( + __( + 'I accept the terms and conditions of Merchant Center and Google Ads', + 'google-listings-and-ads' + ), + { + linkMerchant: ( + + ), + linkAds: ( + + ), + } + ); + + return label; + }; + + return ( + + { __( + 'Required to sync with Google Merchant Center and Google Ads.', + 'google-listings-and-ads' + ) } +
+ setTermsAccepted( !! val ) } + disabled={ disabled } + /> + +
+

+ + { createInterpolateElement( + __( + 'You will be prompted to give WooCommerce access to your Google account. Please check all the checkboxes to give WooCommerce all required permissions. Read more', + 'google-listings-and-ads' + ), + { + link: readMoreLink, + } + ) } + +

+ + } + alignIndicator="top" + indicator={ + + } + /> + ); +}; + +export default ConnectGoogleComboAccountCard; diff --git a/js/src/components/google-combo-account-card/index.js b/js/src/components/google-combo-account-card/index.js new file mode 100644 index 0000000000..1fee516470 --- /dev/null +++ b/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 } />; + } + + const isConnected = google?.active === 'yes'; + + if ( isConnected && scope.glaRequired ) { + return ; + } + + if ( isConnected && ! scope.glaRequired ) { + return ( + + ); + } + + return ; +} diff --git a/js/src/components/google-combo-account-card/index.scss b/js/src/components/google-combo-account-card/index.scss new file mode 100644 index 0000000000..c2ee7e1cc4 --- /dev/null +++ b/js/src/components/google-combo-account-card/index.scss @@ -0,0 +1,9 @@ +.google-combo-account-card { + + .gla-account-card__description { + + .components-checkbox-control { + display: inline-block; + } + } +} \ No newline at end of file diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js index a1be26f4ba..6dae2700ab 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/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 GoogleMCAccountCard from '.~/components/google-mc-account-card'; import GoogleAdsAccountCard from '.~/components/google-ads-account-card'; import Faqs from './faqs'; @@ -159,7 +159,7 @@ const SetupAccounts = ( props ) => { { ! isJetpackActive && ( ) } - +