From 90930854108fa3fe2bb50e74cec315d7f144fc1b Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Tue, 2 Feb 2021 02:31:44 +0800 Subject: [PATCH 01/21] Add link to setup paid ads campaign page. --- .../all-programs-table-card/index.js | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/js/src/dashboard/all-programs-table-card/index.js b/js/src/dashboard/all-programs-table-card/index.js index 6a22270792..0fa3472edf 100644 --- a/js/src/dashboard/all-programs-table-card/index.js +++ b/js/src/dashboard/all-programs-table-card/index.js @@ -2,8 +2,9 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; -import { getQuery, onQueryChange } from '@woocommerce/navigation'; +import { getQuery, getNewPath, onQueryChange } from '@woocommerce/navigation'; +import { Link } from '@woocommerce/components'; +import classnames from 'classnames'; /** * Internal dependencies @@ -65,22 +66,22 @@ const AllProgramsTableCard = ( props ) => { }, ]; - // TODO: what happens when click add paid campaign button. - const handleAddPaidCampaignClick = () => {}; - return ( { __( 'All Programs', 'google-listings-and-ads' ) } - + { __( 'Add Paid Campaign', 'google-listings-and-ads' ) } + } headers={ headers } From cb5c1422e173ad33992df980cda415a198223cc1 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Tue, 2 Feb 2021 21:14:48 +0800 Subject: [PATCH 02/21] Add TopBar for Setup Ads flow. --- js/src/setup-ads/index.js | 14 +++++++- js/src/setup-ads/top-bar/index.js | 51 +++++++++++++++++++++++++++++ js/src/setup-ads/top-bar/index.scss | 28 ++++++++++++++++ js/src/utils/recordEvent.js | 7 ++++ 4 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 js/src/setup-ads/top-bar/index.js create mode 100644 js/src/setup-ads/top-bar/index.scss diff --git a/js/src/setup-ads/index.js b/js/src/setup-ads/index.js index 0c9932288d..b5c1afa4d6 100644 --- a/js/src/setup-ads/index.js +++ b/js/src/setup-ads/index.js @@ -1,5 +1,17 @@ +/** + * Internal dependencies + */ +import FullScreen from '../components/full-screen'; +import TopBar from './top-bar'; +// import SetupStepper from './setup-stepper'; + const SetupAds = () => { - return

Setup Google Ads

; + return ( + + +
TODO
+ + ); }; export default SetupAds; diff --git a/js/src/setup-ads/top-bar/index.js b/js/src/setup-ads/top-bar/index.js new file mode 100644 index 0000000000..952d2c0496 --- /dev/null +++ b/js/src/setup-ads/top-bar/index.js @@ -0,0 +1,51 @@ +/** + * External dependencies + */ +import { Link } from '@woocommerce/components'; +import { getNewPath } from '@woocommerce/navigation'; +import { __ } from '@wordpress/i18n'; +import GridiconChevronLeft from 'gridicons/dist/chevron-left'; +import GridiconHelpOutline from 'gridicons/dist/help-outline'; + +/** + * Internal dependencies + */ +import AppIconButton from '../../components/app-icon-button'; +import { recordSetupAdsEvent } from '../../utils/recordEvent'; +import './index.scss'; + +const TopBar = () => { + const handleBackButtonClick = () => { + recordSetupAdsEvent( 'back' ); + }; + + const handleHelpButtonClick = () => { + recordSetupAdsEvent( 'help' ); + }; + + return ( +
+ + + + + { __( 'Set up paid campaign', 'google-listings-and-ads' ) } + +
+ { /* TODO: click and navigate to where? */ } + } + text={ __( 'Help', 'google-listings-and-ads' ) } + onClick={ handleHelpButtonClick } + /> +
+
+ ); +}; + +export default TopBar; diff --git a/js/src/setup-ads/top-bar/index.scss b/js/src/setup-ads/top-bar/index.scss new file mode 100644 index 0000000000..835c2caa81 --- /dev/null +++ b/js/src/setup-ads/top-bar/index.scss @@ -0,0 +1,28 @@ +.gla-setup-ads-top-bar { + display: flex; + align-items: stretch; + min-height: 64px; + background-color: #fff; + box-shadow: 0 -1px 0 0 #ccc inset; + + .back-button { + display: flex; + align-items: center; + padding: 0 calc(var(--main-gap) / 2); + } + + .title { + align-self: center; + flex: 1; + font-size: 16px; + font-weight: 400; + line-height: 28px; + letter-spacing: 0; + } + + .actions { + .components-button { + height: 100%; + } + } +} diff --git a/js/src/utils/recordEvent.js b/js/src/utils/recordEvent.js index fae9695c65..3be44929c8 100644 --- a/js/src/utils/recordEvent.js +++ b/js/src/utils/recordEvent.js @@ -52,4 +52,11 @@ export const recordPreLaunchChecklistCompleteEvent = () => { recordEvent( 'gla_pre_launch_checklist_complete' ); }; +export const recordSetupAdsEvent = ( target, trigger = 'click' ) => { + recordEvent( 'gla_setup_ads', { + target, + trigger, + } ); +}; + export default recordEvent; From 5aa1ede2420e3bd26df6926a9e34f91c245121f8 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Mon, 8 Mar 2021 22:21:28 +0800 Subject: [PATCH 03/21] Code refactor TopBar component to accept title props. This is so that it can be reused in Setup Ads flow. --- js/src/components/stepper/top-bar/index.js | 15 ++++++++------- js/src/setup-mc/top-bar/index.js | 5 +++++ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/js/src/components/stepper/top-bar/index.js b/js/src/components/stepper/top-bar/index.js index 5b15d87c37..78b4f9b82f 100644 --- a/js/src/components/stepper/top-bar/index.js +++ b/js/src/components/stepper/top-bar/index.js @@ -17,11 +17,17 @@ import './index.scss'; * to be used when configuring a campaign during oboarding and later. * * @param {Object} props + * @param {string} props.title Title. * @param {string} props.backHref Href for the back button. * @param {Function} props.onBackButtonClick * @param {Function} props.onHelpButtonClick */ -const TopBar = ( { backHref, onBackButtonClick, onHelpButtonClick } ) => { +const TopBar = ( { + title, + backHref, + onBackButtonClick, + onHelpButtonClick, +} ) => { return (
{ > - - { __( - 'Get started with Google Listings & Ads', - 'google-listings-and-ads' - ) } - + { title }
{ /* TODO: click and navigate to where? */ } { return ( Date: Mon, 8 Mar 2021 22:26:54 +0800 Subject: [PATCH 04/21] Use TopBar component in SetupAds. --- js/src/setup-ads/index.js | 4 +-- js/src/setup-ads/top-bar/index.js | 41 +++++++++-------------------- js/src/setup-ads/top-bar/index.scss | 28 -------------------- 3 files changed, 14 insertions(+), 59 deletions(-) delete mode 100644 js/src/setup-ads/top-bar/index.scss diff --git a/js/src/setup-ads/index.js b/js/src/setup-ads/index.js index b5c1afa4d6..29fda86feb 100644 --- a/js/src/setup-ads/index.js +++ b/js/src/setup-ads/index.js @@ -2,13 +2,13 @@ * Internal dependencies */ import FullScreen from '../components/full-screen'; -import TopBar from './top-bar'; +import SetupAdsTopBar from './top-bar'; // import SetupStepper from './setup-stepper'; const SetupAds = () => { return ( - +
TODO
 ); diff --git a/js/src/setup-ads/top-bar/index.js b/js/src/setup-ads/top-bar/index.js index 952d2c0496..eab588a44a 100644 --- a/js/src/setup-ads/top-bar/index.js +++ b/js/src/setup-ads/top-bar/index.js @@ -1,51 +1,34 @@ /** * External dependencies */ -import { Link } from '@woocommerce/components'; import { getNewPath } from '@woocommerce/navigation'; import { __ } from '@wordpress/i18n'; -import GridiconChevronLeft from 'gridicons/dist/chevron-left'; -import GridiconHelpOutline from 'gridicons/dist/help-outline'; /** * Internal dependencies */ -import AppIconButton from '../../components/app-icon-button'; -import { recordSetupAdsEvent } from '../../utils/recordEvent'; -import './index.scss'; +import { recordSetupAdsEvent } from '.~/utils/recordEvent'; +import TopBar from '.~/components/stepper/top-bar'; -const TopBar = () => { +const SetupAdsTopBar = () => { const handleBackButtonClick = () => { recordSetupAdsEvent( 'back' ); }; const handleHelpButtonClick = () => { recordSetupAdsEvent( 'help' ); + + // TODO: navigate to where upon clicking help link? }; return ( -
- - - - - { __( 'Set up paid campaign', 'google-listings-and-ads' ) } - -
- { /* TODO: click and navigate to where? */ } - } - text={ __( 'Help', 'google-listings-and-ads' ) } - onClick={ handleHelpButtonClick } - /> -
-
+ ); }; -export default TopBar; +export default SetupAdsTopBar; diff --git a/js/src/setup-ads/top-bar/index.scss b/js/src/setup-ads/top-bar/index.scss deleted file mode 100644 index 835c2caa81..0000000000 --- a/js/src/setup-ads/top-bar/index.scss +++ /dev/null @@ -1,28 +0,0 @@ -.gla-setup-ads-top-bar { - display: flex; - align-items: stretch; - min-height: 64px; - background-color: #fff; - box-shadow: 0 -1px 0 0 #ccc inset; - - .back-button { - display: flex; - align-items: center; - padding: 0 calc(var(--main-gap) / 2); - } - - .title { - align-self: center; - flex: 1; - font-size: 16px; - font-weight: 400; - line-height: 28px; - letter-spacing: 0; - } - - .actions { - .components-button { - height: 100%; - } - } -} From a080f21501cbc9451314ce35f4f85daf527d1a64 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Mon, 8 Mar 2021 22:37:28 +0800 Subject: [PATCH 05/21] Add AdsStepper. --- .../ads-stepper/create-campaign/index.js | 5 ++ js/src/setup-ads/ads-stepper/index.js | 63 +++++++++++++++++++ js/src/setup-ads/ads-stepper/index.scss | 16 +++++ .../ads-stepper/setup-accounts/index.js | 5 ++ js/src/setup-ads/index.js | 4 +- 5 files changed, 91 insertions(+), 2 deletions(-) create mode 100644 js/src/setup-ads/ads-stepper/create-campaign/index.js create mode 100644 js/src/setup-ads/ads-stepper/index.js create mode 100644 js/src/setup-ads/ads-stepper/index.scss create mode 100644 js/src/setup-ads/ads-stepper/setup-accounts/index.js diff --git a/js/src/setup-ads/ads-stepper/create-campaign/index.js b/js/src/setup-ads/ads-stepper/create-campaign/index.js new file mode 100644 index 0000000000..5905d78c6d --- /dev/null +++ b/js/src/setup-ads/ads-stepper/create-campaign/index.js @@ -0,0 +1,5 @@ +const CreateCampaign = () => { + return
create campaign
; +}; + +export default CreateCampaign; diff --git a/js/src/setup-ads/ads-stepper/index.js b/js/src/setup-ads/ads-stepper/index.js new file mode 100644 index 0000000000..876ba85c4f --- /dev/null +++ b/js/src/setup-ads/ads-stepper/index.js @@ -0,0 +1,63 @@ +/** + * External dependencies + */ +import { Stepper } from '@woocommerce/components'; +import { __ } from '@wordpress/i18n'; +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import SetupAccounts from './setup-accounts'; +import CreateCampaign from './create-campaign'; +import './index.scss'; + +const AdsStepper = () => { + // TODO: call API and check if users have already done the account setup, + // we can straight away bring them to step 2. + const [ step, setStep ] = useState( '1' ); + + const handleStepClick = ( value ) => { + setStep( value ); + }; + + const handleSetupAccountsContinue = () => { + setStep( '2' ); + }; + + return ( + // This Stepper with this class name + // should be refactored into separate shared component. + // It is also used in the Setup MC flow. + + ), + onClick: handleStepClick, + }, + { + key: '2', + label: __( + 'Create your paid campaign', + 'google-listings-and-ads' + ), + content: , + onClick: handleStepClick, + }, + ] } + /> + ); +}; + +export default AdsStepper; diff --git a/js/src/setup-ads/ads-stepper/index.scss b/js/src/setup-ads/ads-stepper/index.scss new file mode 100644 index 0000000000..ff42916798 --- /dev/null +++ b/js/src/setup-ads/ads-stepper/index.scss @@ -0,0 +1,16 @@ +.gla-setup-stepper { + .woocommerce-stepper__steps { + align-items: center; + justify-content: center; + height: 64px; + background-color: #fff; + box-shadow: inset 0 -1px 0 #ccc; + margin-bottom: 0; + + .woocommerce-stepper__step-divider { + margin-top: 0; + align-self: auto; + max-width: 48px; + } + } +} diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/index.js b/js/src/setup-ads/ads-stepper/setup-accounts/index.js new file mode 100644 index 0000000000..661c11e452 --- /dev/null +++ b/js/src/setup-ads/ads-stepper/setup-accounts/index.js @@ -0,0 +1,5 @@ +const SetupAccounts = () => { + return
setup account
; +}; + +export default SetupAccounts; diff --git a/js/src/setup-ads/index.js b/js/src/setup-ads/index.js index 29fda86feb..e3bae83b38 100644 --- a/js/src/setup-ads/index.js +++ b/js/src/setup-ads/index.js @@ -3,13 +3,13 @@ */ import FullScreen from '../components/full-screen'; import SetupAdsTopBar from './top-bar'; -// import SetupStepper from './setup-stepper'; +import AdsStepper from './ads-stepper'; const SetupAds = () => { return ( -
TODO
+ ); }; From e893db75aea2bae8eb30d38f605bc0260947d421 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Mon, 8 Mar 2021 23:03:39 +0800 Subject: [PATCH 06/21] Display GoogleAccount in AdsStepper. --- .../ads-stepper/setup-accounts/index.js | 48 ++++++++++++++++++- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/index.js b/js/src/setup-ads/ads-stepper/setup-accounts/index.js index 661c11e452..61a4bc6706 100644 --- a/js/src/setup-ads/ads-stepper/setup-accounts/index.js +++ b/js/src/setup-ads/ads-stepper/setup-accounts/index.js @@ -1,5 +1,49 @@ -const SetupAccounts = () => { - return
setup account
; +/** + * External dependencies + */ +import { Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import StepContent from '.~/components/stepper/step-content'; +import StepContentHeader from '.~/components/stepper/step-content-header'; +import StepContentFooter from '.~/components/stepper/step-content-footer'; +import GoogleAccount from '.~/components/google-account'; + +const SetupAccounts = ( props ) => { + const { onContinue = () => {} } = props; + + // TODO: call backend API to check and set the following to true/false. + const isContinueButtonDisabled = false; + + return ( + + + + { /* TODO: Google Ads Account setup here. */ } + + + + + ); }; export default SetupAccounts; From 89e987aee54a437ca03a3ac62563dc5faa2bf3dd Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Mon, 8 Mar 2021 23:05:18 +0800 Subject: [PATCH 07/21] Use p element for better layout spacing. --- js/src/components/google-account/index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/js/src/components/google-account/index.js b/js/src/components/google-account/index.js index 7558650111..34e19bf1bb 100644 --- a/js/src/components/google-account/index.js +++ b/js/src/components/google-account/index.js @@ -17,10 +17,14 @@ const GoogleAccount = ( props ) => {
+ { __( + 'WooCommerce uses your Google account to sync with Google Merchant Center and Google Ads.', + 'google-listings-and-ads' + ) } +

+ } > From 113c0fded62590fc01da84f0ebbfb3de0cd8ef96 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Mon, 8 Mar 2021 23:06:39 +0800 Subject: [PATCH 08/21] Display GoogleAdsAccountSection. Conflicts: js/src/setup-ads/ads-stepper/setup-accounts/index.js --- .../google-ads-account-section/index.js | 48 +++++++++++++++++++ .../ads-stepper/setup-accounts/index.js | 3 +- 2 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/index.js diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/index.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/index.js new file mode 100644 index 0000000000..3fdb9effaa --- /dev/null +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/index.js @@ -0,0 +1,48 @@ +/** + * External dependencies + */ +import { Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import Section from '../../../../wcdl/section'; +import TitleButtonLayout from '../../../../components/title-button-layout'; + +const GoogleAdsAccountSection = () => { + return ( +
+ { __( + 'Any campaigns created through this app will appear in your Google Ads account. You will be billed directly through Google.', + 'google-listings-and-ads' + ) } +

+ } + > + + + + { __( + 'Create account', + 'google-listings-and-ads' + ) } + + } + /> + + +
+ ); +}; + +export default GoogleAdsAccountSection; diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/index.js b/js/src/setup-ads/ads-stepper/setup-accounts/index.js index 61a4bc6706..54c03c9587 100644 --- a/js/src/setup-ads/ads-stepper/setup-accounts/index.js +++ b/js/src/setup-ads/ads-stepper/setup-accounts/index.js @@ -11,6 +11,7 @@ import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; import StepContentFooter from '.~/components/stepper/step-content-footer'; import GoogleAccount from '.~/components/google-account'; +import GoogleAdsAccountSection from './google-ads-account-section'; const SetupAccounts = ( props ) => { const { onContinue = () => {} } = props; @@ -32,7 +33,7 @@ const SetupAccounts = ( props ) => { ) } /> - { /* TODO: Google Ads Account setup here. */ } + + + + ); }; export default CreateCampaign; From a11d10e6ba7979337027b9d2b053f6bac22b8a2a Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Mon, 8 Mar 2021 23:11:37 +0800 Subject: [PATCH 10/21] Code refactor with AccountSelectControl. --- .../account-select-control/index.js | 38 +++++++++++++++++++ .../index.scss | 2 +- .../ads-account-select-control/index.js | 13 +++++++ .../merchant-center-select-control/index.js | 36 ++---------------- 4 files changed, 56 insertions(+), 33 deletions(-) create mode 100644 js/src/components/account-select-control/index.js rename js/src/components/{merchant-center-select-control => account-select-control}/index.scss (61%) create mode 100644 js/src/components/ads-account-select-control/index.js diff --git a/js/src/components/account-select-control/index.js b/js/src/components/account-select-control/index.js new file mode 100644 index 0000000000..d9f7dafb3f --- /dev/null +++ b/js/src/components/account-select-control/index.js @@ -0,0 +1,38 @@ +/** + * External dependencies + */ +import { SelectControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import AppSpinner from '.~/components/app-spinner'; +import './index.scss'; + +const AccountSelectControl = ( props ) => { + const { accounts, ...rest } = props; + + if ( ! accounts ) { + return ; + } + + const options = [ + { + value: '', + label: __( 'Select one', 'google-listings-and-ads' ), + }, + ...accounts.map( ( acc ) => ( { + value: acc, + label: acc, + } ) ), + ]; + + return ( +
+ +
+ ); +}; + +export default AccountSelectControl; diff --git a/js/src/components/merchant-center-select-control/index.scss b/js/src/components/account-select-control/index.scss similarity index 61% rename from js/src/components/merchant-center-select-control/index.scss rename to js/src/components/account-select-control/index.scss index e7c1705e81..7d1c83743c 100644 --- a/js/src/components/merchant-center-select-control/index.scss +++ b/js/src/components/account-select-control/index.scss @@ -1,4 +1,4 @@ -.gla-merchant-center-select-control { +.gla-account-select-control { .components-base-control__field { margin-bottom: 0; } diff --git a/js/src/components/ads-account-select-control/index.js b/js/src/components/ads-account-select-control/index.js new file mode 100644 index 0000000000..6b4665098a --- /dev/null +++ b/js/src/components/ads-account-select-control/index.js @@ -0,0 +1,13 @@ +/** + * Internal dependencies + */ +import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts'; +import AccountSelectControl from '../account-select-control'; + +const AdsAccountSelectControl = ( props ) => { + const { existingAccounts } = useExistingGoogleAdsAccounts(); + + return ; +}; + +export default AdsAccountSelectControl; diff --git a/js/src/components/merchant-center-select-control/index.js b/js/src/components/merchant-center-select-control/index.js index a41fd130c6..32d3fa2ff2 100644 --- a/js/src/components/merchant-center-select-control/index.js +++ b/js/src/components/merchant-center-select-control/index.js @@ -1,44 +1,16 @@ -/** - * External dependencies - */ -import { SelectControl } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - /** * Internal dependencies */ import useExistingGoogleMCAccounts from '.~/hooks/useExistingGoogleMCAccounts'; -import AppSpinner from '.~/components/app-spinner'; -import './index.scss'; +import AccountSelectControl from '../account-select-control'; const MerchantCenterSelectControl = ( props ) => { - const { value, onChange } = props; const { existingAccounts } = useExistingGoogleMCAccounts(); - if ( ! existingAccounts ) { - return ; - } - - const options = [ - { - value: '', - label: __( 'Select one', 'google-listings-and-ads' ), - }, - ...existingAccounts.map( ( acc ) => ( { - value: acc.id, - label: acc.id, - } ) ), - ]; + const accounts = + existingAccounts && existingAccounts.map( ( acc ) => acc.id ); - return ( -
- -
- ); + return ; }; export default MerchantCenterSelectControl; From aab8275457cd5956a61adbfa33bfbfc1d3e8ba54 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Fri, 5 Mar 2021 02:13:43 +0800 Subject: [PATCH 11/21] Add wp-data for Google Ads account. --- js/src/data/action-types.js | 3 +++ js/src/data/actions.js | 49 +++++++++++++++++++++++++++++++++++++ js/src/data/reducer.js | 15 ++++++++++++ js/src/data/resolvers.js | 10 ++++++++ js/src/data/selectors.js | 8 ++++++ 5 files changed, 85 insertions(+) diff --git a/js/src/data/action-types.js b/js/src/data/action-types.js index 401fb44504..80dfab91b2 100644 --- a/js/src/data/action-types.js +++ b/js/src/data/action-types.js @@ -11,6 +11,9 @@ const TYPES = { RECEIVE_ACCOUNTS_GOOGLE: 'RECEIVE_ACCOUNTS_GOOGLE', RECEIVE_ACCOUNTS_GOOGLE_MC: 'RECEIVE_ACCOUNTS_GOOGLE_MC', RECEIVE_ACCOUNTS_GOOGLE_MC_EXISTING: 'RECEIVE_ACCOUNTS_GOOGLE_MC_EXISTING', + RECEIVE_ACCOUNTS_GOOGLE_ADS: 'RECEIVE_ACCOUNTS_GOOGLE_ADS', + RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING: + 'RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING', RECEIVE_COUNTRIES: 'RECEIVE_COUNTRIES', RECEIVE_TARGET_AUDIENCE: 'RECEIVE_TARGET_AUDIENCE', SAVE_TARGET_AUDIENCE: 'SAVE_TARGET_AUDIENCE', diff --git a/js/src/data/actions.js b/js/src/data/actions.js index 688b2eb6a6..3bb07ca921 100644 --- a/js/src/data/actions.js +++ b/js/src/data/actions.js @@ -305,6 +305,48 @@ export function* fetchExistingGoogleMCAccounts() { } } +export function* fetchGoogleAdsAccount() { + try { + const response = yield apiFetch( { + path: `${ API_NAMESPACE }/ads/connection`, + } ); + + return { + type: TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS, + account: response, + }; + } catch ( error ) { + yield handleFetchError( + error, + __( + 'There was an error loading Google Ads account info.', + 'google-listings-and-ads' + ) + ); + } +} + +export function* fetchExistingGoogleAdsAccounts() { + try { + const response = yield apiFetch( { + path: `${ API_NAMESPACE }/ads/accounts`, + } ); + + return { + type: TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING, + accounts: response, + }; + } catch ( error ) { + yield handleFetchError( + error, + __( + 'There was an error getting your Google Ads accounts.', + 'google-listings-and-ads' + ) + ); + } +} + export function* fetchCountries() { try { const response = yield apiFetch( { @@ -354,6 +396,13 @@ export function receiveMCAccount( account ) { }; } +export function receiveAdsAccount( account ) { + return { + type: TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS, + account, + }; +} + export function* saveTargetAudience( targetAudience ) { try { yield apiFetch( { diff --git a/js/src/data/reducer.js b/js/src/data/reducer.js index adc3ee6671..7bf1807ee1 100644 --- a/js/src/data/reducer.js +++ b/js/src/data/reducer.js @@ -21,6 +21,7 @@ const DEFAULT_STATE = { jetpack: null, google: null, mc: null, + ads: null, existing_mc: null, }, }, @@ -128,6 +129,20 @@ const reducer = ( state = DEFAULT_STATE, action ) => { return newState; } + case TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS: { + const { account } = action; + const newState = cloneDeep( state ); + newState.mc.accounts.ads = account; + return newState; + } + + case TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING: { + const { accounts } = action; + const newState = cloneDeep( state ); + newState.mc.accounts.existing_ads = accounts; + return newState; + } + case TYPES.RECEIVE_COUNTRIES: { const { countries } = action; const newState = cloneDeep( state ); diff --git a/js/src/data/resolvers.js b/js/src/data/resolvers.js index 7d748f024f..fbbc65bbd6 100644 --- a/js/src/data/resolvers.js +++ b/js/src/data/resolvers.js @@ -9,6 +9,8 @@ import { fetchGoogleAccount, fetchGoogleMCAccount, fetchExistingGoogleMCAccounts, + fetchGoogleAdsAccount, + fetchExistingGoogleAdsAccounts, fetchCountries, fetchTargetAudience, } from './actions'; @@ -41,6 +43,14 @@ export function* getExistingGoogleMCAccounts() { yield fetchExistingGoogleMCAccounts(); } +export function* getGoogleAdsAccount() { + yield fetchGoogleAdsAccount(); +} + +export function* getExistingGoogleAdsAccounts() { + yield fetchExistingGoogleAdsAccounts(); +} + export function* getCountries() { yield fetchCountries(); } diff --git a/js/src/data/selectors.js b/js/src/data/selectors.js index 61b9327086..f18feb4b21 100644 --- a/js/src/data/selectors.js +++ b/js/src/data/selectors.js @@ -26,6 +26,14 @@ export const getExistingGoogleMCAccounts = ( state ) => { return state.mc.accounts.existing_mc; }; +export const getGoogleAdsAccount = ( state ) => { + return state.mc.accounts.ads; +}; + +export const getExistingGoogleAdsAccounts = ( state ) => { + return state.mc.accounts.existing_ads; +}; + export const getCountries = ( state ) => { return state.mc.countries; }; From 46c53c0376f92872af25a27c0d8f13eda7e13053 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Fri, 5 Mar 2021 02:14:30 +0800 Subject: [PATCH 12/21] Add hooks for Google Ads account. --- js/src/hooks/useExistingGoogleAdsAccounts.js | 24 ++++++++++++++ js/src/hooks/useGoogleAdsAccount.js | 35 ++++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 js/src/hooks/useExistingGoogleAdsAccounts.js create mode 100644 js/src/hooks/useGoogleAdsAccount.js diff --git a/js/src/hooks/useExistingGoogleAdsAccounts.js b/js/src/hooks/useExistingGoogleAdsAccounts.js new file mode 100644 index 0000000000..716eeeca56 --- /dev/null +++ b/js/src/hooks/useExistingGoogleAdsAccounts.js @@ -0,0 +1,24 @@ +/** + * External dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { STORE_KEY } from '.~/data/constants'; + +const useExistingGoogleAdsAccounts = () => { + return useSelect( ( select ) => { + const existingAccounts = select( + STORE_KEY + ).getExistingGoogleAdsAccounts(); + const isResolving = select( STORE_KEY ).isResolving( + 'getExistingGoogleAdsAccounts' + ); + + return { existingAccounts, isResolving }; + } ); +}; + +export default useExistingGoogleAdsAccounts; diff --git a/js/src/hooks/useGoogleAdsAccount.js b/js/src/hooks/useGoogleAdsAccount.js new file mode 100644 index 0000000000..1a73891f1b --- /dev/null +++ b/js/src/hooks/useGoogleAdsAccount.js @@ -0,0 +1,35 @@ +/** + * External dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { STORE_KEY } from '.~/data/constants'; +import useGoogleAccount from './useGoogleAccount'; + +const useGoogleAdsAccount = () => { + const { google, isResolving } = useGoogleAccount(); + + return useSelect( ( select ) => { + if ( ! google || google.active === 'no' ) { + return { + googleAdsAccount: undefined, + isResolving, + }; + } + + const acc = select( STORE_KEY ).getGoogleAdsAccount(); + const isResolvingGoogleAdsAccount = select( STORE_KEY ).isResolving( + 'getGoogleAdsAccount' + ); + + return { + googleAdsAccount: acc, + isResolving: isResolvingGoogleAdsAccount, + }; + } ); +}; + +export default useGoogleAdsAccount; From 83afb7aa521b71c95c1138fa6add527132dd3511 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Mon, 8 Mar 2021 23:16:22 +0800 Subject: [PATCH 13/21] Move AccountId to shared components folder. --- .../account-id.js => components/account-id/index.js} | 0 .../setup-accounts/google-mc-account/connected-card.js | 2 +- .../setup-accounts/google-mc-account/switch-url-card/index.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename js/src/{setup-mc/setup-stepper/setup-accounts/google-mc-account/account-id.js => components/account-id/index.js} (100%) diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/account-id.js b/js/src/components/account-id/index.js similarity index 100% rename from js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/account-id.js rename to js/src/components/account-id/index.js diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/connected-card.js b/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/connected-card.js index 7a0e4651b6..776399827e 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/connected-card.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/connected-card.js @@ -3,7 +3,7 @@ */ import Section from '.~/wcdl/section'; import TitleButtonLayout from '.~/components/title-button-layout'; -import AccountId from './account-id'; +import AccountId from '.~/components/account-id'; const ConnectedCard = ( props ) => { const { googleMCAccount } = props; diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/switch-url-card/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/switch-url-card/index.js index 9003d4a9bc..2d60890329 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/switch-url-card/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/switch-url-card/index.js @@ -14,7 +14,7 @@ import Subsection from '.~/wcdl/subsection'; import useApiFetchCallback from '.~/hooks/useApiFetchCallback'; import { useAppDispatch } from '.~/data'; import ContentButtonLayout from '.~/components/content-button-layout'; -import AccountId from '../account-id'; +import AccountId from '.~/components/account-id'; import './index.scss'; const SwitchUrlCard = ( props ) => { From 9a516b33474ff54b036ca412a3e1880e9bcc1293 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Mon, 8 Mar 2021 23:21:09 +0800 Subject: [PATCH 14/21] Move SpinnerCard to shared components folder. --- .../spinner-card.js => components/spinner-card/index.js} | 0 .../setup-accounts/google-mc-account/non-connected.js | 2 +- .../setup-accounts/google-mc-account/section-content.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename js/src/{setup-mc/setup-stepper/setup-accounts/google-mc-account/spinner-card.js => components/spinner-card/index.js} (100%) diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/spinner-card.js b/js/src/components/spinner-card/index.js similarity index 100% rename from js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/spinner-card.js rename to js/src/components/spinner-card/index.js diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/non-connected.js b/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/non-connected.js index 9206da3e0c..d9da2f24a6 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/non-connected.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/non-connected.js @@ -8,7 +8,7 @@ import { useState } from '@wordpress/element'; */ import ConnectMCCard from './connect-mc-card'; import useExistingGoogleMCAccounts from '.~/hooks/useExistingGoogleMCAccounts'; -import SpinnerCard from './spinner-card'; +import SpinnerCard from '.~/components/spinner-card'; import CreateAccount from './create-account'; const NonConnected = () => { diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/section-content.js b/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/section-content.js index 58e8d40118..ccbed8e79f 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/section-content.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/google-mc-account/section-content.js @@ -5,7 +5,7 @@ import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount'; import ConnectedCard from './connected-card'; import DisabledCard from './disabled-card'; import NonConnected from './non-connected'; -import SpinnerCard from './spinner-card'; +import SpinnerCard from '.~/components/spinner-card'; const SectionContent = ( props ) => { const { disabled } = props; From ad75a8efc521e8d7c9c01861c399319b84cca09e Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Mon, 8 Mar 2021 23:22:23 +0800 Subject: [PATCH 15/21] Create new Google Ads account or link an existing account. --- .../google-ads-account-section/connect-ads.js | 77 +++++++++++++++++ .../google-ads-account-section/connected.js | 22 +++++ .../create-account-button.js | 40 +++++++++ .../create-account.js | 60 +++++++++++++ .../google-ads-account-section/index.js | 24 +----- .../non-connected.js | 23 +++++ .../section-content.js | 23 +++++ .../terms-modal/index.js | 86 +++++++++++++++++++ .../terms-modal/index.scss | 7 ++ 9 files changed, 341 insertions(+), 21 deletions(-) create mode 100644 js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/connect-ads.js create mode 100644 js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/connected.js create mode 100644 js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account-button.js create mode 100644 js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account.js create mode 100644 js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/non-connected.js create mode 100644 js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/section-content.js create mode 100644 js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.js create mode 100644 js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.scss diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/connect-ads.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/connect-ads.js new file mode 100644 index 0000000000..98551be540 --- /dev/null +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/connect-ads.js @@ -0,0 +1,77 @@ +/** + * External dependencies + */ +import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import AdsAccountSelectControl from '.~/components/ads-account-select-control'; +import AppButton from '.~/components/app-button'; +import ContentButtonLayout from '.~/components/content-button-layout'; +import Section from '.~/wcdl/section'; +import Subsection from '.~/wcdl/subsection'; +import useApiFetchCallback from '.~/hooks/useApiFetchCallback'; +import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices'; +import { useAppDispatch } from '.~/data'; + +const ConnectAds = () => { + const [ value, setValue ] = useState(); + const [ fetchConnectAdsAccount, { loading } ] = useApiFetchCallback( { + path: `/wc/gla/ads/accounts`, + method: 'POST', + data: { id: value }, + } ); + const { receiveAdsAccount } = useAppDispatch(); + const { createNotice } = useDispatchCoreNotices(); + + const handleConnectClick = async () => { + if ( ! value ) { + return; + } + + try { + const data = await fetchConnectAdsAccount(); + + receiveAdsAccount( data ); + } catch ( error ) { + createNotice( + 'error', + __( + 'Unable to connect your Google Ads account. Please try again later.', + 'google-listings-and-ads' + ) + ); + } + }; + + return ( + + + + { __( + 'Connect your Google Ads account', + 'google-listings-and-ads' + ) } + + + + + { __( 'Connect', 'google-listings-and-ads' ) } + + + + + ); +}; + +export default ConnectAds; diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/connected.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/connected.js new file mode 100644 index 0000000000..cd386f3595 --- /dev/null +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/connected.js @@ -0,0 +1,22 @@ +/** + * Internal dependencies + */ +import TitleButtonLayout from '.~/components/title-button-layout'; +import AccountId from '.~/components/account-id'; +import Section from '.~/wcdl/section'; + +const Connected = ( props ) => { + const { googleAdsAccount } = props; + + return ( + + + } + /> + + + ); +}; + +export default Connected; diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account-button.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account-button.js new file mode 100644 index 0000000000..4844cc34ae --- /dev/null +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account-button.js @@ -0,0 +1,40 @@ +/** + * External dependencies + */ +import { Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import TermsModal from './terms-modal'; + +const CreateAccountButton = ( props ) => { + const { onCreateAccount, ...rest } = props; + const [ isOpen, setOpen ] = useState( false ); + + const handleCreateAccountClick = () => { + setOpen( true ); + }; + + const handleModalRequestClose = () => { + setOpen( false ); + }; + + return ( + <> + + { isOpen && ( + + ) } + + ); +}; + +export default CreateAccountButton; diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account.js new file mode 100644 index 0000000000..45a46eefed --- /dev/null +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account.js @@ -0,0 +1,60 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import Section from '.~/wcdl/section'; +import TitleButtonLayout from '.~/components/title-button-layout'; +import CreateAccountButton from './create-account-button'; +import useApiFetchCallback from '.~/hooks/useApiFetchCallback'; +import { useAppDispatch } from '.~/data'; +import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices'; + +const CreateAccount = () => { + const { createNotice } = useDispatchCoreNotices(); + const { receiveAdsAccount } = useAppDispatch(); + const [ fetchCreateAdsAccount, { loading } ] = useApiFetchCallback( { + path: `/wc/gla/ads/accounts`, + method: 'POST', + } ); + + const handleCreateAccount = async () => { + try { + const data = await fetchCreateAdsAccount(); + receiveAdsAccount( data ); + } catch ( e ) { + createNotice( + 'error', + __( + 'Unable to create Google Ads account. Please try again later.', + 'google-listings-and-ads' + ) + ); + } + }; + + return ( + + + + } + /> + + + ); +}; + +export default CreateAccount; diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/index.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/index.js index 3fdb9effaa..9a7e1a47b3 100644 --- a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/index.js +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/index.js @@ -1,14 +1,13 @@ /** * External dependencies */ -import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import Section from '../../../../wcdl/section'; -import TitleButtonLayout from '../../../../components/title-button-layout'; +import Section from '.~/wcdl/section'; +import SectionContent from './section-content'; const GoogleAdsAccountSection = () => { return ( @@ -23,24 +22,7 @@ const GoogleAdsAccountSection = () => {

} > - - - - { __( - 'Create account', - 'google-listings-and-ads' - ) } - - } - /> - - +
); }; diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/non-connected.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/non-connected.js new file mode 100644 index 0000000000..8ff2c22886 --- /dev/null +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/non-connected.js @@ -0,0 +1,23 @@ +/** + * Internal dependencies + */ +import CreateAccount from './create-account'; +import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts'; +import SpinnerCard from '.~/components/spinner-card'; +import ConnectAds from './connect-ads'; + +const NonConnected = () => { + const { existingAccounts } = useExistingGoogleAdsAccounts(); + + if ( ! existingAccounts ) { + return ; + } + + if ( existingAccounts.length === 0 ) { + return ; + } + + return ; +}; + +export default NonConnected; diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/section-content.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/section-content.js new file mode 100644 index 0000000000..ac98a60922 --- /dev/null +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/section-content.js @@ -0,0 +1,23 @@ +/** + * Internal dependencies + */ +import SpinnerCard from '.~/components/spinner-card'; +import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; +import Connected from './connected'; +import NonConnected from './non-connected'; + +const SectionContent = () => { + const { googleAdsAccount } = useGoogleAdsAccount(); + + if ( ! googleAdsAccount ) { + return ; + } + + if ( googleAdsAccount.status === 'disconnected' ) { + return ; + } + + return ; +}; + +export default SectionContent; diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.js new file mode 100644 index 0000000000..758cb1ca17 --- /dev/null +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.js @@ -0,0 +1,86 @@ +/** + * External dependencies + */ +import { CheckboxControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { createInterpolateElement, useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import AppModal from '.~/components/app-modal'; +import AppDocumentationLink from '.~/components/app-documentation-link'; +import AppButton from '.~/components/app-button'; +import './index.scss'; + +const TermsModal = ( props ) => { + const { onCreateAccount = () => {}, onRequestClose = () => {} } = props; + const [ agree, setAgree ] = useState( false ); + + const handleCreateAccountClick = () => { + onCreateAccount(); + onRequestClose(); + }; + + return ( + + { __( 'Create account', 'google-listings-and-ads' ) } + , + ] } + onRequestClose={ onRequestClose } + > +

+ { __( + 'By creating a Google Ads account, you agree to the following terms and conditions:', + 'google-listings-and-ads' + ) } +

+

+ { createInterpolateElement( + __( + 'You agree to comply with Google’s terms and policies, including Shopping ads policies and Google Ads Terms and Conditions.', + 'google-listings-and-ads' + ), + { + policylink: ( + + ), + termlink: ( + + ), + } + ) } +

+ + + ); +}; + +export default TermsModal; diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.scss b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.scss new file mode 100644 index 0000000000..bfd05f683c --- /dev/null +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.scss @@ -0,0 +1,7 @@ +.gla-ads-terms-modal { + max-width: 600px; + + .main { + font-weight: bold; + } +} From dfabf69ba8e2e244be1ea1e688369c2af69714b5 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Tue, 9 Mar 2021 22:48:26 +0800 Subject: [PATCH 16/21] Use import alias. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Tomek Wytrębowicz --- js/src/setup-ads/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/setup-ads/index.js b/js/src/setup-ads/index.js index e3bae83b38..7d445e1313 100644 --- a/js/src/setup-ads/index.js +++ b/js/src/setup-ads/index.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import FullScreen from '../components/full-screen'; +import FullScreen from '.~/components/full-screen'; import SetupAdsTopBar from './top-bar'; import AdsStepper from './ads-stepper'; From 975b1ae6ab092d3b4a8d70c2178df87f30f4387e Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Tue, 9 Mar 2021 21:22:09 +0800 Subject: [PATCH 17/21] Fix termslink typo. --- .../google-ads-account-section/terms-modal/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.js index 758cb1ca17..75b9ae4e90 100644 --- a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.js +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/terms-modal/index.js @@ -50,7 +50,7 @@ const TermsModal = ( props ) => {

{ createInterpolateElement( __( - 'You agree to comply with Google’s terms and policies, including Shopping ads policies and Google Ads Terms and Conditions.', + 'You agree to comply with Google’s terms and policies, including Shopping ads policies and Google Ads Terms and Conditions.', 'google-listings-and-ads' ), { @@ -61,7 +61,7 @@ const TermsModal = ( props ) => { href="https://support.google.com/merchants/answer/6149970" /> ), - termlink: ( + termslink: ( Date: Tue, 9 Mar 2021 21:27:42 +0800 Subject: [PATCH 18/21] Better handler name to avoid confusion with the onCreateAccount props. --- .../google-ads-account-section/create-account-button.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account-button.js b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account-button.js index 4844cc34ae..04baa0c1a8 100644 --- a/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account-button.js +++ b/js/src/setup-ads/ads-stepper/setup-accounts/google-ads-account-section/create-account-button.js @@ -14,7 +14,7 @@ const CreateAccountButton = ( props ) => { const { onCreateAccount, ...rest } = props; const [ isOpen, setOpen ] = useState( false ); - const handleCreateAccountClick = () => { + const handleButtonClick = () => { setOpen( true ); }; @@ -24,7 +24,7 @@ const CreateAccountButton = ( props ) => { return ( <> - { isOpen && ( From 1e33bf334c7f65f56ef2ada41a7708e896cb9f8d Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Tue, 9 Mar 2021 22:39:33 +0800 Subject: [PATCH 19/21] Display "Account " text in AccountSelectControl label. --- js/src/components/account-select-control/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/components/account-select-control/index.js b/js/src/components/account-select-control/index.js index d9f7dafb3f..bb26780675 100644 --- a/js/src/components/account-select-control/index.js +++ b/js/src/components/account-select-control/index.js @@ -24,7 +24,7 @@ const AccountSelectControl = ( props ) => { }, ...accounts.map( ( acc ) => ( { value: acc, - label: acc, + label: __( 'Account ', 'google-listings-and-ads' ) + acc, } ) ), ]; From de77b1db3e558aa1ffd68cddc736ac3ae7bac92b Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Tue, 9 Mar 2021 22:41:15 +0800 Subject: [PATCH 20/21] Fix existing_ads missing in reducer default state. --- js/src/data/reducer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/src/data/reducer.js b/js/src/data/reducer.js index 7bf1807ee1..e845e6bbf0 100644 --- a/js/src/data/reducer.js +++ b/js/src/data/reducer.js @@ -23,6 +23,7 @@ const DEFAULT_STATE = { mc: null, ads: null, existing_mc: null, + existing_ads: null, }, }, }; From 14d69e206c06f4f1a9f225180ed5bf6b47694ecc Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Tue, 9 Mar 2021 22:54:17 +0800 Subject: [PATCH 21/21] Change "All Programs" label to "Programs" based on new design. --- js/src/dashboard/all-programs-table-card/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/dashboard/all-programs-table-card/index.js b/js/src/dashboard/all-programs-table-card/index.js index 0fa3472edf..7b41866545 100644 --- a/js/src/dashboard/all-programs-table-card/index.js +++ b/js/src/dashboard/all-programs-table-card/index.js @@ -71,7 +71,7 @@ const AllProgramsTableCard = ( props ) => { className="gla-all-programs-table-card" title={

- { __( 'All Programs', 'google-listings-and-ads' ) } + { __( 'Programs', 'google-listings-and-ads' ) }