-
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.
Merge pull request #2651 from woocommerce/update/2603-create-ads-account
Onboarding: Create new ads account.
- Loading branch information
Showing
10 changed files
with
401 additions
and
117 deletions.
There are no files selected for viewing
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
69 changes: 69 additions & 0 deletions
69
js/src/components/google-combo-account-card/connect-ads/confirm-create-modal.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,69 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import AppModal from '.~/components/app-modal'; | ||
| import AppButton from '.~/components/app-button'; | ||
| import WarningIcon from '.~/components/warning-icon'; | ||
| import './confirm-create-modal.scss'; | ||
|
|
||
| /** | ||
| * Google Ads account creation confirmation modal. | ||
| * This modal is shown when the user tries to create a new Google Ads account. | ||
| * | ||
| * @param {Object} props Component props. | ||
| * @param {Function} props.onContinue Callback to continue with account creation. | ||
| * @param {Function} props.onRequestClose Callback to close the modal. | ||
| * @return {JSX.Element} Confirmation modal. | ||
| */ | ||
| const ConfirmCreateModal = ( { onContinue, onRequestClose } ) => { | ||
| return ( | ||
| <AppModal | ||
| className="gla-ads-warning-modal" | ||
| title={ __( | ||
| 'Create Google Ads Account', | ||
| 'google-listings-and-ads' | ||
| ) } | ||
| buttons={ [ | ||
| <AppButton key="confirm" isSecondary onClick={ onContinue }> | ||
| { __( | ||
| 'Yes, I want a new account', | ||
| 'google-listings-and-ads' | ||
| ) } | ||
| </AppButton>, | ||
| <AppButton key="cancel" isPrimary onClick={ onRequestClose }> | ||
| { __( 'Cancel', 'google-listings-and-ads' ) } | ||
| </AppButton>, | ||
| ] } | ||
| onRequestClose={ onRequestClose } | ||
| > | ||
| <p className="gla-ads-warning-modal__warning-text"> | ||
| <WarningIcon /> | ||
| <span> | ||
| { __( | ||
| 'Are you sure you want to create a new Google Ads account?', | ||
| 'google-listings-and-ads' | ||
| ) } | ||
| </span> | ||
| </p> | ||
| <p> | ||
| { __( | ||
| 'You already have another Ads account associated with this Google account.', | ||
| 'google-listings-and-ads' | ||
| ) } | ||
| </p> | ||
| <p> | ||
| { __( | ||
| 'If you create a new Google Ads account, you will need to accept an invite to the account before it can be used.', | ||
| 'google-listings-and-ads' | ||
| ) } | ||
| </p> | ||
| </AppModal> | ||
| ); | ||
| }; | ||
|
|
||
| export default ConfirmCreateModal; |
8 changes: 8 additions & 0 deletions
8
js/src/components/google-combo-account-card/connect-ads/confirm-create-modal.scss
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,8 @@ | ||
| .gla-ads-warning-modal { | ||
|
|
||
| .gla-ads-warning-modal__warning-text { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: calc(var(--main-gap) / 3); | ||
| } | ||
| } |
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
124 changes: 28 additions & 96 deletions
124
js/src/components/google-combo-account-card/connect-ads/connect-ads.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
125 changes: 125 additions & 0 deletions
125
js/src/components/google-combo-account-card/connect-ads/connect-existing-account.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,125 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { useEffect, useState } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import AccountCard from '.~/components/account-card'; | ||
| import ConnectAdsFooter from './connect-ads-footer'; | ||
| import LoadingLabel from '.~/components/loading-label'; | ||
| import useApiFetchCallback from '.~/hooks/useApiFetchCallback'; | ||
| import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices'; | ||
| import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; | ||
| import { useAppDispatch } from '.~/data'; | ||
| import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady'; | ||
| import AdsAccountSelectControl from '.~/components/ads-account-select-control'; | ||
| import ConnectedIconLabel from '.~/components/connected-icon-label'; | ||
| import ConnectButton from '.~/components/google-ads-account-card/connect-ads/connect-button'; | ||
|
|
||
| /** | ||
| * Renders an account card to connect to an existing Google Ads account. | ||
| * | ||
| * @param {Object} props Component props. | ||
| * @param {Function} props.onCreateClick Callback when clicking on the button to create a new account | ||
| */ | ||
| const ConnectExistingAccount = ( { onCreateClick } ) => { | ||
| const [ value, setValue ] = useState(); | ||
| const [ isLoading, setLoading ] = useState( false ); | ||
| const { createNotice } = useDispatchCoreNotices(); | ||
| const { fetchGoogleAdsAccountStatus } = useAppDispatch(); | ||
| const isConnected = useGoogleAdsAccountReady(); | ||
| const { googleAdsAccount, hasFinishedResolution, refetchGoogleAdsAccount } = | ||
| useGoogleAdsAccount(); | ||
| const [ connectGoogleAdsAccount ] = useApiFetchCallback( { | ||
| path: '/wc/gla/ads/accounts', | ||
| method: 'POST', | ||
| data: { id: value }, | ||
| } ); | ||
|
|
||
| useEffect( () => { | ||
| if ( isConnected ) { | ||
| setValue( googleAdsAccount.id ); | ||
| } | ||
| }, [ googleAdsAccount, isConnected ] ); | ||
|
|
||
| const handleConnectClick = async () => { | ||
| if ( ! value ) { | ||
| return; | ||
| } | ||
|
|
||
| setLoading( true ); | ||
| try { | ||
| await connectGoogleAdsAccount(); | ||
| await fetchGoogleAdsAccountStatus(); | ||
| await refetchGoogleAdsAccount(); | ||
| } catch ( error ) { | ||
| createNotice( | ||
| 'error', | ||
| __( | ||
| 'Unable to connect your Google Ads account. Please try again later.', | ||
| 'google-listings-and-ads' | ||
| ) | ||
| ); | ||
| } finally { | ||
| setLoading( false ); | ||
| } | ||
| }; | ||
|
|
||
| const getIndicator = () => { | ||
| if ( ! hasFinishedResolution ) { | ||
| return <LoadingLabel />; | ||
| } | ||
|
|
||
| if ( isLoading ) { | ||
| return ( | ||
| <LoadingLabel | ||
| text={ __( 'Connecting…', 'google-listings-and-ads' ) } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| if ( isConnected ) { | ||
| return <ConnectedIconLabel />; | ||
| } | ||
|
|
||
| return ( | ||
| <ConnectButton accountID={ value } onClick={ handleConnectClick } /> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <AccountCard | ||
| className="gla-google-combo-account-card gla-google-combo-service-account-card--ads" | ||
| title={ __( | ||
| 'Connect to existing Google Ads account', | ||
| 'google-listings-and-ads' | ||
| ) } | ||
| helper={ __( | ||
| 'Required to set up conversion measurement for your store.', | ||
| 'google-listings-and-ads' | ||
| ) } | ||
| alignIndicator="toDetail" | ||
| indicator={ getIndicator() } | ||
| detail={ | ||
| <AdsAccountSelectControl | ||
| value={ value } | ||
| onChange={ setValue } | ||
| autoSelectFirstOption | ||
| nonInteractive={ isConnected } | ||
| /> | ||
| } | ||
| actions={ | ||
| <ConnectAdsFooter | ||
| disabled={ isLoading } | ||
| isConnected={ isConnected } | ||
| onCreateNewClick={ onCreateClick } | ||
| /> | ||
| } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default ConnectExistingAccount; |
Oops, something went wrong.