Skip to content

Commit 52a53f4

Browse files
ankitroxankitrox
authored
Merge pull request #2601 from woocommerce/feature/2566-google-combo-card
Onboarding: Create New Google Combo Accounts Card.
2 parents 664d6d7 + 1b8940f commit 52a53f4

File tree

7 files changed

+195
-547
lines changed

7 files changed

+195
-547
lines changed

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { __ } from '@wordpress/i18n';
5+
import { createInterpolateElement, useState } from '@wordpress/element';
6+
import { CheckboxControl } from '@wordpress/components';
7+
8+
/**
9+
* Internal dependencies
10+
*/
11+
import { glaData } from '.~/constants';
12+
import AccountCard, { APPEARANCE } from '.~/components/account-card';
13+
import AppButton from '.~/components/app-button';
14+
import readMoreLink from '../google-account-card/read-more-link';
15+
import useGoogleConnectFlow from '../google-account-card/use-google-connect-flow';
16+
import AppDocumentationLink from '../app-documentation-link';
17+
import './connect-google-combo-account-card.scss';
18+
19+
/**
20+
* @param {Object} props React props
21+
* @param {boolean} props.disabled
22+
* @fires gla_google_account_connect_button_click with `{ action: 'authorization', context: 'reconnect' }`
23+
* @fires gla_google_account_connect_button_click with `{ action: 'authorization', context: 'setup-mc' }`
24+
* @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' }`
25+
* @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' }`
26+
* @fires gla_documentation_link_click with `{ context: 'setup-ads', link_id: 'google-ads-terms-of-service', href: 'https://support.google.com/adspolicy/answer/54818' }`
27+
*/
28+
const ConnectGoogleComboAccountCard = ( { disabled } ) => {
29+
const pageName = glaData.mcSetupComplete ? 'reconnect' : 'setup-mc';
30+
const [ handleConnect, { loading, data } ] =
31+
useGoogleConnectFlow( pageName );
32+
const [ termsAccepted, setTermsAccepted ] = useState( false );
33+
34+
return (
35+
<AccountCard
36+
appearance={ APPEARANCE.GOOGLE }
37+
className="gla-connect-google-combo-account-card"
38+
disabled={ disabled }
39+
alignIcon="top"
40+
description={
41+
<>
42+
<p>
43+
{ __(
44+
'Required to sync with Google Merchant Center and Google Ads.',
45+
'google-listings-and-ads'
46+
) }
47+
</p>
48+
<CheckboxControl
49+
label={ createInterpolateElement(
50+
__(
51+
'I accept the terms and conditions of <linkMerchant>Merchant Center</linkMerchant> and <linkAds>Google Ads</linkAds>',
52+
'google-listings-and-ads'
53+
),
54+
{
55+
linkMerchant: (
56+
<AppDocumentationLink
57+
context="setup-mc-accounts"
58+
linkId="google-mc-terms-of-service"
59+
href="https://support.google.com/merchants/answer/160173"
60+
/>
61+
),
62+
linkAds: (
63+
<AppDocumentationLink
64+
context="setup-ads"
65+
linkId="google-ads-terms-of-service"
66+
href="https://support.google.com/adspolicy/answer/54818"
67+
/>
68+
),
69+
}
70+
) }
71+
checked={ termsAccepted }
72+
onChange={ setTermsAccepted }
73+
disabled={ disabled }
74+
/>
75+
</>
76+
}
77+
helper={ createInterpolateElement(
78+
__(
79+
'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>',
80+
'google-listings-and-ads'
81+
),
82+
{
83+
link: readMoreLink,
84+
}
85+
) }
86+
alignIndicator="top"
87+
indicator={
88+
<AppButton
89+
isSecondary
90+
disabled={ disabled || ! termsAccepted }
91+
loading={ loading || data }
92+
eventName="gla_google_account_connect_button_click"
93+
eventProps={ {
94+
context: pageName,
95+
action: 'authorization',
96+
} }
97+
text={ __( 'Connect', 'google-listings-and-ads' ) }
98+
onClick={ handleConnect }
99+
/>
100+
}
101+
/>
102+
);
103+
};
104+
105+
export default ConnectGoogleComboAccountCard;

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.gla-connect-google-combo-account-card {
2+
3+
.gla-account-card__helper {
4+
font-size: $gla-font-base;
5+
}
6+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* Internal dependencies
3+
*/
4+
import useGoogleAccount from '.~/hooks/useGoogleAccount';
5+
import AppSpinner from '.~/components/app-spinner';
6+
import AccountCard from '.~/components/account-card';
7+
import RequestFullAccessGoogleAccountCard from '../google-account-card/request-full-access-google-account-card';
8+
import { ConnectedGoogleAccountCard } from '../google-account-card';
9+
import ConnectGoogleComboAccountCard from './connect-google-combo-account-card';
10+
11+
export default function GoogleComboAccountCard( { disabled = false } ) {
12+
const { google, scope, hasFinishedResolution } = useGoogleAccount();
13+
14+
if ( ! hasFinishedResolution ) {
15+
return <AccountCard description={ <AppSpinner /> } />;
16+
}
17+
18+
const isConnected = google?.active === 'yes';
19+
20+
if ( isConnected && scope.glaRequired ) {
21+
return <ConnectedGoogleAccountCard googleAccount={ google } />;
22+
}
23+
24+
if ( isConnected && ! scope.glaRequired ) {
25+
return (
26+
<RequestFullAccessGoogleAccountCard
27+
additionalScopeEmail={ google.email }
28+
/>
29+
);
30+
}
31+
32+
return <ConnectGoogleComboAccountCard disabled={ disabled } />;
33+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import Section from '.~/wcdl/section';
2020
import AppDocumentationLink from '.~/components/app-documentation-link';
2121
import VerticalGapLayout from '.~/components/vertical-gap-layout';
2222
import WPComAccountCard from '.~/components/wpcom-account-card';
23-
import GoogleAccountCard from '.~/components/google-account-card';
23+
import GoogleComboAccountCard from '.~/components/google-combo-account-card';
2424
import Faqs from './faqs';
2525
import './index.scss';
2626
import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
@@ -157,7 +157,7 @@ const SetupAccounts = ( props ) => {
157157
{ ! isJetpackActive && (
158158
<WPComAccountCard jetpack={ jetpack } />
159159
) }
160-
<GoogleAccountCard disabled={ ! isJetpackActive } />
160+
<GoogleComboAccountCard disabled={ ! isJetpackActive } />
161161
</VerticalGapLayout>
162162
</Section>
163163

0 commit comments

Comments
 (0)