-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Onboarding: Create New Google Combo Accounts Card.
- Loading branch information
Showing
4 changed files
with
160 additions
and
2 deletions.
There are no files selected for viewing
115 changes: 115 additions & 0 deletions
115
js/src/components/google-combo-account-card/connect-google-combo-account-card.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 <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="gla-account-card-terms-conditions" | ||
checked={ termsAccepted } | ||
onChange={ ( val ) => setTermsAccepted( !! val ) } | ||
disabled={ disabled } | ||
/> | ||
<label htmlFor="gla-account-card-terms-conditions"> | ||
<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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 } />; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
.google-combo-account-card { | ||
|
||
.gla-account-card__description { | ||
|
||
.components-checkbox-control { | ||
display: inline-block; | ||
} | ||
} | ||
} | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters