Skip to content

Commit

Permalink
Merge pull request #2601 from woocommerce/feature/2566-google-combo-card
Browse files Browse the repository at this point in the history
Onboarding: Create New Google Combo Accounts Card.
  • Loading branch information
ankitrox authored Sep 18, 2024
2 parents 664d6d7 + 1b8940f commit 52a53f4
Show file tree
Hide file tree
Showing 7 changed files with 195 additions and 547 deletions.
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.gla-connect-google-combo-account-card {

.gla-account-card__helper {
font-size: $gla-font-base;
}
}
33 changes: 33 additions & 0 deletions js/src/components/google-combo-account-card/index.js
Original file line number Diff line number Diff line change
@@ -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 } />;
}
4 changes: 2 additions & 2 deletions js/src/setup-mc/setup-stepper/setup-accounts/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -157,7 +157,7 @@ const SetupAccounts = ( props ) => {
{ ! isJetpackActive && (
<WPComAccountCard jetpack={ jetpack } />
) }
<GoogleAccountCard disabled={ ! isJetpackActive } />
<GoogleComboAccountCard disabled={ ! isJetpackActive } />
</VerticalGapLayout>
</Section>

Expand Down
Loading

0 comments on commit 52a53f4

Please sign in to comment.