From 2912ea4d9821a7860d10762ffe5fedc6d77ee814 Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 15 Aug 2024 17:24:00 +0400 Subject: [PATCH 01/15] Move FAQ after the CTA on the setup page. --- .../setup-stepper/setup-accounts/index.js | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js index a318189cbb..3b63f1602e 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js @@ -166,17 +166,22 @@ const SetupAccounts = ( props ) => { disabledLeft={ ! isGMCPreconditionReady } > - - - - { __( 'Continue', 'google-listings-and-ads' ) } - - + +
+ + + + { __( 'Continue', 'google-listings-and-ads' ) } + + + + +
); }; From 65ba7756d7b1cbb7f29da4c3979f98042929c3d5 Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 15 Aug 2024 17:53:10 +0400 Subject: [PATCH 02/15] Move FAQ after CTA in Ads Campaign component. --- js/src/components/paid-ads/ads-campaign.js | 27 ++++++++++++++-------- js/src/components/paid-ads/faqs-section.js | 13 ++++------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/js/src/components/paid-ads/ads-campaign.js b/js/src/components/paid-ads/ads-campaign.js index 9de67da91e..18e2a76a46 100644 --- a/js/src/components/paid-ads/ads-campaign.js +++ b/js/src/components/paid-ads/ads-campaign.js @@ -17,6 +17,8 @@ import AudienceSection from './audience-section'; import BudgetSection from './budget-section'; import { CampaignPreviewCard } from './campaign-preview'; import FaqsSection from './faqs-section'; +import Section from '.~/wcdl/section'; +import VerticalGapLayout from '.~/components/vertical-gap-layout'; /** * @typedef {import('.~/data/actions').Campaign} Campaign @@ -97,16 +99,21 @@ export default function AdsCampaign( { > - - - - { __( 'Continue', 'google-listings-and-ads' ) } - - + +
+ + + + { __( 'Continue', 'google-listings-and-ads' ) } + + + + +
); } diff --git a/js/src/components/paid-ads/faqs-section.js b/js/src/components/paid-ads/faqs-section.js index 04f5299a7e..4405cb3d8c 100644 --- a/js/src/components/paid-ads/faqs-section.js +++ b/js/src/components/paid-ads/faqs-section.js @@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import Section from '.~/wcdl/section'; import FaqsPanel from '.~/components/faqs-panel'; const faqItems = [ @@ -88,13 +87,11 @@ const faqItems = [ */ const FaqsSection = () => { return ( -
- -
+ ); }; From c00448fa739a5c49ae243f3238666f5c8d42eaab Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 15 Aug 2024 18:17:39 +0400 Subject: [PATCH 03/15] Move FAQs after CTA un SetupPaidAds component. --- .../setup-paid-ads/setup-paid-ads.js | 62 +++++++++++-------- 1 file changed, 35 insertions(+), 27 deletions(-) diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js index f5dd0f9a07..42dd0dbdcb 100644 --- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js @@ -24,6 +24,8 @@ import PaidAdsFeaturesSection from './paid-ads-features-section'; import PaidAdsSetupSections from './paid-ads-setup-sections'; import { getProductFeedUrl } from '.~/utils/urls'; import clientSession from './clientSession'; +import Section from '.~/wcdl/section'; +import VerticalGapLayout from '.~/components/vertical-gap-layout'; import { API_NAMESPACE, STORE_KEY } from '.~/data/constants'; import { GUIDE_NAMES } from '.~/constants'; @@ -193,33 +195,39 @@ export default function SetupPaidAds() { { showPaidAdsSetup && ( ) } - - + +
+ + + + +
); } From 2e0a2db8b4e258e602d439003b309ce8fabc3496 Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 15 Aug 2024 18:54:28 +0400 Subject: [PATCH 04/15] Add StepContentActions component. --- js/src/components/paid-ads/ads-campaign.js | 29 +++---- .../paid-ads/asset-group/asset-group.js | 83 +++++++++++-------- .../paid-ads/asset-group/faqs-section.js | 6 +- .../stepper/step-content-actions/index.js | 15 ++++ .../components/vertical-gap-layout/index.js | 4 +- .../components/vertical-gap-layout/index.scss | 4 + 6 files changed, 83 insertions(+), 58 deletions(-) create mode 100644 js/src/components/stepper/step-content-actions/index.js diff --git a/js/src/components/paid-ads/ads-campaign.js b/js/src/components/paid-ads/ads-campaign.js index 18e2a76a46..bd86dfe607 100644 --- a/js/src/components/paid-ads/ads-campaign.js +++ b/js/src/components/paid-ads/ads-campaign.js @@ -17,8 +17,7 @@ import AudienceSection from './audience-section'; import BudgetSection from './budget-section'; import { CampaignPreviewCard } from './campaign-preview'; import FaqsSection from './faqs-section'; -import Section from '.~/wcdl/section'; -import VerticalGapLayout from '.~/components/vertical-gap-layout'; +import StepContentActions from '.~/components/stepper/step-content-actions'; /** * @typedef {import('.~/data/actions').Campaign} Campaign @@ -100,20 +99,18 @@ export default function AdsCampaign( { -
- - - - { __( 'Continue', 'google-listings-and-ads' ) } - - - - -
+ + + + { __( 'Continue', 'google-listings-and-ads' ) } + + + + ); } diff --git a/js/src/components/paid-ads/asset-group/asset-group.js b/js/src/components/paid-ads/asset-group/asset-group.js index d85cddb8a4..d712fae9dd 100644 --- a/js/src/components/paid-ads/asset-group/asset-group.js +++ b/js/src/components/paid-ads/asset-group/asset-group.js @@ -15,6 +15,7 @@ import AppButton from '.~/components/app-button'; import AssetGroupSection from './asset-group-section'; import FaqsSection from './faqs-section'; import { recordGlaEvent } from '.~/utils/tracks'; +import StepContentActions from '.~/components/stepper/step-content-actions'; export const ACTION_SUBMIT_CAMPAIGN_AND_ASSETS = 'submit-campaign-and-assets'; export const ACTION_SUBMIT_CAMPAIGN_ONLY = 'submit-campaign-only'; @@ -114,51 +115,61 @@ export default function AssetGroup( { campaign } ) { ) } /> - - - { ( isCreation || adapter.isEmptyAssetEntityGroup ) && ( - // Currently, the PMax Assets feature in this extension doesn't offer the function - // to delete the asset entity group, so it needs to hide the skip button if the editing - // asset group is not considered empty. + + + + { ( isCreation || adapter.isEmptyAssetEntityGroup ) && ( + // Currently, the PMax Assets feature in this extension doesn't offer the function + // to delete the asset entity group, so it needs to hide the skip button if the editing + // asset group is not considered empty. + + { __( + 'Skip this step', + 'google-listings-and-ads' + ) } + + ) } - { __( 'Skip this step', 'google-listings-and-ads' ) } + { isCreation + ? __( + 'Launch paid campaign', + 'google-listings-and-ads' + ) + : __( 'Save changes', 'google-listings-and-ads' ) } - ) } - - { isCreation - ? __( - 'Launch paid campaign', - 'google-listings-and-ads' - ) - : __( 'Save changes', 'google-listings-and-ads' ) } - - + + + + ); } diff --git a/js/src/components/paid-ads/asset-group/faqs-section.js b/js/src/components/paid-ads/asset-group/faqs-section.js index c8672cd85b..5236f9b9d3 100644 --- a/js/src/components/paid-ads/asset-group/faqs-section.js +++ b/js/src/components/paid-ads/asset-group/faqs-section.js @@ -71,11 +71,7 @@ const faqItems = [ * @fires gla_documentation_link_click with `{ context: 'assets-faq', linkId: 'assets-faq-about-ad-formats-available-in-different-campaign-types', href: 'https://support.google.com/google-ads/answer/1722124' }`. */ const FaqsSection = () => { - return ( -
- -
- ); + return ; }; export default FaqsSection; diff --git a/js/src/components/stepper/step-content-actions/index.js b/js/src/components/stepper/step-content-actions/index.js new file mode 100644 index 0000000000..46892fe318 --- /dev/null +++ b/js/src/components/stepper/step-content-actions/index.js @@ -0,0 +1,15 @@ +/** + * Internal dependencies + */ +import Section from '.~/wcdl/section'; +import VerticalGapLayout from '.~/components/vertical-gap-layout'; + +const StepContentActions = ( { children } ) => { + return ( +
+ { children } +
+ ); +}; + +export default StepContentActions; diff --git a/js/src/components/vertical-gap-layout/index.js b/js/src/components/vertical-gap-layout/index.js index 88c512d45c..9b667fdfad 100644 --- a/js/src/components/vertical-gap-layout/index.js +++ b/js/src/components/vertical-gap-layout/index.js @@ -13,6 +13,7 @@ const sizeClassName = { normal: false, medium: 'gla-vertical-gap-layout__medium', large: 'gla-vertical-gap-layout__large', + xlarge: 'gla-vertical-gap-layout__xlarge', overlap: 'gla-vertical-gap-layout__overlap', }; @@ -21,10 +22,11 @@ const sizeClassName = { * * @param {Object} props React props. * @param {string} [props.className] Additional CSS class name to be appended. - * @param {'normal'|'medium'|'large'|'overlap'} [props.size='normal'] Indicate the gap between children. + * @param {'normal'|'medium'|'large'|'xlarge'|'overlap'} [props.size='normal'] Indicate the gap between children. * 'normal': A normal gap. * 'medium': A medium gap. * 'large': A large gap. + * 'xlarge': A extra large gap. * 'overlap': Overlap the back child on the front child with -1 pixel spacing. */ const VerticalGapLayout = ( props ) => { diff --git a/js/src/components/vertical-gap-layout/index.scss b/js/src/components/vertical-gap-layout/index.scss index fadbb0104b..a98a247dd5 100644 --- a/js/src/components/vertical-gap-layout/index.scss +++ b/js/src/components/vertical-gap-layout/index.scss @@ -11,6 +11,10 @@ gap: var(--main-gap); } + &.gla-vertical-gap-layout__xlarge { + gap: var(--large-gap); + } + &.gla-vertical-gap-layout__overlap { gap: 0; From bad8197995e7c0a613c019484fc1c96403f21fc2 Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 15 Aug 2024 18:58:00 +0400 Subject: [PATCH 05/15] Use StepContentFooterActions component. --- .../setup-stepper/setup-accounts/index.js | 27 ++++---- .../setup-paid-ads/setup-paid-ads.js | 62 +++++++++---------- 2 files changed, 42 insertions(+), 47 deletions(-) diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js index 3b63f1602e..f0d29e212f 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js @@ -26,6 +26,7 @@ import Faqs from './faqs'; import './index.scss'; import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus'; +import StepContentActions from '.~/components/stepper/step-content-actions'; /** * Renders the disclaimer of Comparison Shopping Service (CSS). @@ -168,20 +169,18 @@ const SetupAccounts = ( props ) => { -
- - - - { __( 'Continue', 'google-listings-and-ads' ) } - - - - -
+ + + + { __( 'Continue', 'google-listings-and-ads' ) } + + + + ); }; diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js index 42dd0dbdcb..98e6a7aa21 100644 --- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js @@ -24,8 +24,7 @@ import PaidAdsFeaturesSection from './paid-ads-features-section'; import PaidAdsSetupSections from './paid-ads-setup-sections'; import { getProductFeedUrl } from '.~/utils/urls'; import clientSession from './clientSession'; -import Section from '.~/wcdl/section'; -import VerticalGapLayout from '.~/components/vertical-gap-layout'; +import StepContentActions from '.~/components/stepper/step-content-actions'; import { API_NAMESPACE, STORE_KEY } from '.~/data/constants'; import { GUIDE_NAMES } from '.~/constants'; @@ -196,38 +195,35 @@ export default function SetupPaidAds() { ) } -
- - -
+ loading={ completing === ACTION_COMPLETE } + disabled={ disabledComplete } + onClick={ handleCompleteClick } + eventName="gla_onboarding_complete_with_paid_ads_button_click" + eventProps={ { + budget: paidAds.amount, + audiences: paidAds.countryCodes?.join( ',' ), + } } + /> + + + + ); } From f4b9a79347b753682907c6aea150bb5073f49fa6 Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 15 Aug 2024 19:06:29 +0400 Subject: [PATCH 06/15] Temporarily rename StepContentActions to TmpStepContentActions. --- js/src/components/paid-ads/ads-campaign.js | 6 +++--- js/src/components/paid-ads/asset-group/asset-group.js | 6 +++--- .../index.js | 4 ++-- js/src/setup-mc/setup-stepper/setup-accounts/index.js | 6 +++--- .../setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js | 6 +++--- 5 files changed, 14 insertions(+), 14 deletions(-) rename js/src/components/stepper/{step-content-actions => tmp-step-content-actions}/index.js (76%) diff --git a/js/src/components/paid-ads/ads-campaign.js b/js/src/components/paid-ads/ads-campaign.js index bd86dfe607..60fd03f3fc 100644 --- a/js/src/components/paid-ads/ads-campaign.js +++ b/js/src/components/paid-ads/ads-campaign.js @@ -17,7 +17,7 @@ import AudienceSection from './audience-section'; import BudgetSection from './budget-section'; import { CampaignPreviewCard } from './campaign-preview'; import FaqsSection from './faqs-section'; -import StepContentActions from '.~/components/stepper/step-content-actions'; +import TmpStepContentActions from '.~/components/stepper/tmp-step-content-actions'; /** * @typedef {import('.~/data/actions').Campaign} Campaign @@ -99,7 +99,7 @@ export default function AdsCampaign( { - + - + ); } diff --git a/js/src/components/paid-ads/asset-group/asset-group.js b/js/src/components/paid-ads/asset-group/asset-group.js index d712fae9dd..e9e9cad566 100644 --- a/js/src/components/paid-ads/asset-group/asset-group.js +++ b/js/src/components/paid-ads/asset-group/asset-group.js @@ -15,7 +15,7 @@ import AppButton from '.~/components/app-button'; import AssetGroupSection from './asset-group-section'; import FaqsSection from './faqs-section'; import { recordGlaEvent } from '.~/utils/tracks'; -import StepContentActions from '.~/components/stepper/step-content-actions'; +import TmpStepContentActions from '.~/components/stepper/tmp-step-content-actions'; export const ACTION_SUBMIT_CAMPAIGN_AND_ASSETS = 'submit-campaign-and-assets'; export const ACTION_SUBMIT_CAMPAIGN_ONLY = 'submit-campaign-only'; @@ -116,7 +116,7 @@ export default function AssetGroup( { campaign } ) { /> - + { ( isCreation || adapter.isEmptyAssetEntityGroup ) && ( // Currently, the PMax Assets feature in this extension doesn't offer the function @@ -169,7 +169,7 @@ export default function AssetGroup( { campaign } ) { - + ); } diff --git a/js/src/components/stepper/step-content-actions/index.js b/js/src/components/stepper/tmp-step-content-actions/index.js similarity index 76% rename from js/src/components/stepper/step-content-actions/index.js rename to js/src/components/stepper/tmp-step-content-actions/index.js index 46892fe318..ce81cbfe2f 100644 --- a/js/src/components/stepper/step-content-actions/index.js +++ b/js/src/components/stepper/tmp-step-content-actions/index.js @@ -4,7 +4,7 @@ import Section from '.~/wcdl/section'; import VerticalGapLayout from '.~/components/vertical-gap-layout'; -const StepContentActions = ( { children } ) => { +const TmpStepContentActions = ( { children } ) => { return (
{ children } @@ -12,4 +12,4 @@ const StepContentActions = ( { children } ) => { ); }; -export default StepContentActions; +export default TmpStepContentActions; diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js index f0d29e212f..227674c973 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js @@ -26,7 +26,7 @@ import Faqs from './faqs'; import './index.scss'; import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus'; -import StepContentActions from '.~/components/stepper/step-content-actions'; +import TmpStepContentActions from '.~/components/stepper/tmp-step-content-actions'; /** * Renders the disclaimer of Comparison Shopping Service (CSS). @@ -169,7 +169,7 @@ const SetupAccounts = ( props ) => {
- + { - + ); }; diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js index 98e6a7aa21..537e5fbe0e 100644 --- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js @@ -24,7 +24,7 @@ import PaidAdsFeaturesSection from './paid-ads-features-section'; import PaidAdsSetupSections from './paid-ads-setup-sections'; import { getProductFeedUrl } from '.~/utils/urls'; import clientSession from './clientSession'; -import StepContentActions from '.~/components/stepper/step-content-actions'; +import TmpStepContentActions from '.~/components/stepper/tmp-step-content-actions'; import { API_NAMESPACE, STORE_KEY } from '.~/data/constants'; import { GUIDE_NAMES } from '.~/constants'; @@ -195,7 +195,7 @@ export default function SetupPaidAds() { ) } - + - + ); } From e76eb347adf924a2ccd1b3f988123690337fdf16 Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 15 Aug 2024 19:10:41 +0400 Subject: [PATCH 07/15] Rename StepContentFooter to StepContentActions. --- .../free-listings/setup-free-listings/form-content.js | 6 +++--- js/src/components/paid-ads/ads-campaign.js | 6 +++--- js/src/components/paid-ads/asset-group/asset-group.js | 6 +++--- .../{step-content-footer => step-content-actions}/index.js | 6 +++--- .../index.scss | 2 +- js/src/components/stepper/tmp-step-content-actions/index.js | 2 +- js/src/setup-ads/ads-stepper/setup-accounts/index.js | 6 +++--- js/src/setup-ads/ads-stepper/setup-billing/index.js | 6 +++--- js/src/setup-mc/setup-stepper/setup-accounts/index.js | 6 +++--- .../setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js | 4 ++-- js/src/setup-mc/setup-stepper/store-requirements/index.js | 6 +++--- 11 files changed, 28 insertions(+), 28 deletions(-) rename js/src/components/stepper/{step-content-footer => step-content-actions}/index.js (51%) rename js/src/components/stepper/{step-content-footer => step-content-actions}/index.scss (78%) diff --git a/js/src/components/free-listings/setup-free-listings/form-content.js b/js/src/components/free-listings/setup-free-listings/form-content.js index dceec6c361..3d62b1fb61 100644 --- a/js/src/components/free-listings/setup-free-listings/form-content.js +++ b/js/src/components/free-listings/setup-free-listings/form-content.js @@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n'; */ import { useAdaptiveFormContext } from '.~/components/adaptive-form'; import StepContent from '.~/components/stepper/step-content'; -import StepContentFooter from '.~/components/stepper/step-content-footer'; +import StepContentActions from '.~/components/stepper/step-content-actions'; import TaxRate from '.~/components/free-listings/configure-product-listings/tax-rate'; import useDisplayTaxRate from '.~/components/free-listings/configure-product-listings/useDisplayTaxRate'; import ChooseAudienceSection from '.~/components/free-listings/choose-audience-section'; @@ -47,7 +47,7 @@ const FormContent = ( { - + { submitLabel } - + ); }; diff --git a/js/src/components/paid-ads/ads-campaign.js b/js/src/components/paid-ads/ads-campaign.js index 60fd03f3fc..ac88bacbe7 100644 --- a/js/src/components/paid-ads/ads-campaign.js +++ b/js/src/components/paid-ads/ads-campaign.js @@ -9,7 +9,7 @@ import { createInterpolateElement } from '@wordpress/element'; */ import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; -import StepContentFooter from '.~/components/stepper/step-content-footer'; +import StepContentActions from '.~/components/stepper/step-content-actions'; import AppDocumentationLink from '.~/components/app-documentation-link'; import AppButton from '.~/components/app-button'; import { useAdaptiveFormContext } from '.~/components/adaptive-form'; @@ -100,7 +100,7 @@ export default function AdsCampaign( { - + { __( 'Continue', 'google-listings-and-ads' ) } - + diff --git a/js/src/components/paid-ads/asset-group/asset-group.js b/js/src/components/paid-ads/asset-group/asset-group.js index e9e9cad566..855a128959 100644 --- a/js/src/components/paid-ads/asset-group/asset-group.js +++ b/js/src/components/paid-ads/asset-group/asset-group.js @@ -10,7 +10,7 @@ import { ASSET_FORM_KEY } from '.~/constants'; import { useAdaptiveFormContext } from '.~/components/adaptive-form'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; -import StepContentFooter from '.~/components/stepper/step-content-footer'; +import StepContentActions from '.~/components/stepper/step-content-actions'; import AppButton from '.~/components/app-button'; import AssetGroupSection from './asset-group-section'; import FaqsSection from './faqs-section'; @@ -117,7 +117,7 @@ export default function AssetGroup( { campaign } ) { - + { ( isCreation || adapter.isEmptyAssetEntityGroup ) && ( // Currently, the PMax Assets feature in this extension doesn't offer the function // to delete the asset entity group, so it needs to hide the skip button if the editing @@ -166,7 +166,7 @@ export default function AssetGroup( { campaign } ) { ) : __( 'Save changes', 'google-listings-and-ads' ) } - + diff --git a/js/src/components/stepper/step-content-footer/index.js b/js/src/components/stepper/step-content-actions/index.js similarity index 51% rename from js/src/components/stepper/step-content-footer/index.js rename to js/src/components/stepper/step-content-actions/index.js index 72b304d5ff..5e43f6cae8 100644 --- a/js/src/components/stepper/step-content-footer/index.js +++ b/js/src/components/stepper/step-content-actions/index.js @@ -3,15 +3,15 @@ */ import './index.scss'; -const StepContentFooter = ( props ) => { +const StepContentActions = ( props ) => { const { className = '', ...rest } = props; return (
); }; -export default StepContentFooter; +export default StepContentActions; diff --git a/js/src/components/stepper/step-content-footer/index.scss b/js/src/components/stepper/step-content-actions/index.scss similarity index 78% rename from js/src/components/stepper/step-content-footer/index.scss rename to js/src/components/stepper/step-content-actions/index.scss index 2d56666d6f..ad52d287a2 100644 --- a/js/src/components/stepper/step-content-footer/index.scss +++ b/js/src/components/stepper/step-content-actions/index.scss @@ -1,4 +1,4 @@ -.gla-step-content-footer { +.gla-step-content-actions { display: flex; justify-content: flex-end; gap: $grid-unit-05 * 5; diff --git a/js/src/components/stepper/tmp-step-content-actions/index.js b/js/src/components/stepper/tmp-step-content-actions/index.js index ce81cbfe2f..b83c181e61 100644 --- a/js/src/components/stepper/tmp-step-content-actions/index.js +++ b/js/src/components/stepper/tmp-step-content-actions/index.js @@ -6,7 +6,7 @@ import VerticalGapLayout from '.~/components/vertical-gap-layout'; const TmpStepContentActions = ( { children } ) => { return ( -
+
{ children }
); 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 27133451b2..9458ce2603 100644 --- a/js/src/setup-ads/ads-stepper/setup-accounts/index.js +++ b/js/src/setup-ads/ads-stepper/setup-accounts/index.js @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n'; import AppButton from '.~/components/app-button'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; -import StepContentFooter from '.~/components/stepper/step-content-footer'; +import StepContentActions from '.~/components/stepper/step-content-actions'; import VerticalGapLayout from '.~/components/vertical-gap-layout'; import { ConnectedGoogleAccountCard } from '.~/components/google-account-card'; import GoogleAdsAccountCard from '.~/components/google-ads-account-card'; @@ -74,7 +74,7 @@ const SetupAccounts = ( props ) => { { hasFreeAdCredit && }
- + { > { __( 'Continue', 'google-listings-and-ads' ) } - + ); }; diff --git a/js/src/setup-ads/ads-stepper/setup-billing/index.js b/js/src/setup-ads/ads-stepper/setup-billing/index.js index 1dc6b234ed..0d29714075 100644 --- a/js/src/setup-ads/ads-stepper/setup-billing/index.js +++ b/js/src/setup-ads/ads-stepper/setup-billing/index.js @@ -16,7 +16,7 @@ import { fallbackBillingUrl, } from '.~/components/paid-ads/billing-card'; import BillingSavedCard from './billing-saved-card'; -import StepContentFooter from '.~/components/stepper/step-content-footer'; +import StepContentActions from '.~/components/stepper/step-content-actions'; import AppButton from '.~/components/app-button'; import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants'; @@ -68,7 +68,7 @@ const SetupBilling = ( props ) => { ) } { isApproved && ( - + { 'google-listings-and-ads' ) } - + ) } ); diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js index 227674c973..bd3d227ddb 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js @@ -14,7 +14,7 @@ import AppButton from '.~/components/app-button'; import AppSpinner from '.~/components/app-spinner'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; -import StepContentFooter from '.~/components/stepper/step-content-footer'; +import StepContentActions from '.~/components/stepper/step-content-actions'; import Section from '.~/wcdl/section'; import AppDocumentationLink from '.~/components/app-documentation-link'; import VerticalGapLayout from '.~/components/vertical-gap-layout'; @@ -170,7 +170,7 @@ const SetupAccounts = ( props ) => { - + { > { __( 'Continue', 'google-listings-and-ads' ) } - + diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js index 537e5fbe0e..b85df3ed29 100644 --- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js @@ -17,7 +17,7 @@ import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; import useAdsSetupCompleteCallback from '.~/hooks/useAdsSetupCompleteCallback'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; -import StepContentFooter from '.~/components/stepper/step-content-footer'; +import StepContentActions from '.~/components/stepper/step-content-actions'; import FaqsSection from '.~/components/paid-ads/faqs-section'; import AppButton from '.~/components/app-button'; import PaidAdsFeaturesSection from './paid-ads-features-section'; @@ -221,7 +221,7 @@ export default function SetupPaidAds() { } } /> - + diff --git a/js/src/setup-mc/setup-stepper/store-requirements/index.js b/js/src/setup-mc/setup-stepper/store-requirements/index.js index 0c5261fff0..3067776132 100644 --- a/js/src/setup-mc/setup-stepper/store-requirements/index.js +++ b/js/src/setup-mc/setup-stepper/store-requirements/index.js @@ -14,7 +14,7 @@ import useSettings from '.~/components/free-listings/configure-product-listings/ import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; -import StepContentFooter from '.~/components/stepper/step-content-footer'; +import StepContentActions from '.~/components/stepper/step-content-actions'; import AdaptiveForm from '.~/components/adaptive-form'; import ValidationErrors from '.~/components/validation-errors'; import ContactInformation from '.~/components/contact-information'; @@ -188,7 +188,7 @@ export default function StoreRequirements( { onContinue } ) { } /> - + - + ); } } From e0fcb70144613b1f9eac1566ba736a330d8613e6 Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 15 Aug 2024 19:19:08 +0400 Subject: [PATCH 08/15] Bring back StepContentFooter. --- js/src/components/paid-ads/ads-campaign.js | 6 +++--- js/src/components/paid-ads/asset-group/asset-group.js | 6 +++--- .../index.js | 6 +++--- js/src/setup-mc/setup-stepper/setup-accounts/index.js | 6 +++--- .../setup-stepper/setup-paid-ads/setup-paid-ads.js | 8 ++++---- 5 files changed, 16 insertions(+), 16 deletions(-) rename js/src/components/stepper/{tmp-step-content-actions => step-content-footer}/index.js (62%) diff --git a/js/src/components/paid-ads/ads-campaign.js b/js/src/components/paid-ads/ads-campaign.js index ac88bacbe7..332cc8ff98 100644 --- a/js/src/components/paid-ads/ads-campaign.js +++ b/js/src/components/paid-ads/ads-campaign.js @@ -9,6 +9,7 @@ import { createInterpolateElement } from '@wordpress/element'; */ import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; +import StepContentFooter from '.~/components/stepper/step-content-footer'; import StepContentActions from '.~/components/stepper/step-content-actions'; import AppDocumentationLink from '.~/components/app-documentation-link'; import AppButton from '.~/components/app-button'; @@ -17,7 +18,6 @@ import AudienceSection from './audience-section'; import BudgetSection from './budget-section'; import { CampaignPreviewCard } from './campaign-preview'; import FaqsSection from './faqs-section'; -import TmpStepContentActions from '.~/components/stepper/tmp-step-content-actions'; /** * @typedef {import('.~/data/actions').Campaign} Campaign @@ -99,7 +99,7 @@ export default function AdsCampaign( { - + - + ); } diff --git a/js/src/components/paid-ads/asset-group/asset-group.js b/js/src/components/paid-ads/asset-group/asset-group.js index 855a128959..258a3d0094 100644 --- a/js/src/components/paid-ads/asset-group/asset-group.js +++ b/js/src/components/paid-ads/asset-group/asset-group.js @@ -10,12 +10,12 @@ import { ASSET_FORM_KEY } from '.~/constants'; import { useAdaptiveFormContext } from '.~/components/adaptive-form'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; +import StepContentFooter from '.~/components/stepper/step-content-footer'; import StepContentActions from '.~/components/stepper/step-content-actions'; import AppButton from '.~/components/app-button'; import AssetGroupSection from './asset-group-section'; import FaqsSection from './faqs-section'; import { recordGlaEvent } from '.~/utils/tracks'; -import TmpStepContentActions from '.~/components/stepper/tmp-step-content-actions'; export const ACTION_SUBMIT_CAMPAIGN_AND_ASSETS = 'submit-campaign-and-assets'; export const ACTION_SUBMIT_CAMPAIGN_ONLY = 'submit-campaign-only'; @@ -116,7 +116,7 @@ export default function AssetGroup( { campaign } ) { /> - + { ( isCreation || adapter.isEmptyAssetEntityGroup ) && ( // Currently, the PMax Assets feature in this extension doesn't offer the function @@ -169,7 +169,7 @@ export default function AssetGroup( { campaign } ) { - + ); } diff --git a/js/src/components/stepper/tmp-step-content-actions/index.js b/js/src/components/stepper/step-content-footer/index.js similarity index 62% rename from js/src/components/stepper/tmp-step-content-actions/index.js rename to js/src/components/stepper/step-content-footer/index.js index b83c181e61..e5ad81f135 100644 --- a/js/src/components/stepper/tmp-step-content-actions/index.js +++ b/js/src/components/stepper/step-content-footer/index.js @@ -4,12 +4,12 @@ import Section from '.~/wcdl/section'; import VerticalGapLayout from '.~/components/vertical-gap-layout'; -const TmpStepContentActions = ( { children } ) => { +const StepContentFooter = ( { children } ) => { return ( -
+
{ children }
); }; -export default TmpStepContentActions; +export default StepContentFooter; diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js index bd3d227ddb..f03231b481 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js @@ -14,6 +14,7 @@ import AppButton from '.~/components/app-button'; import AppSpinner from '.~/components/app-spinner'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; +import StepContentFooter from '.~/components/stepper/step-content-footer'; import StepContentActions from '.~/components/stepper/step-content-actions'; import Section from '.~/wcdl/section'; import AppDocumentationLink from '.~/components/app-documentation-link'; @@ -26,7 +27,6 @@ import Faqs from './faqs'; import './index.scss'; import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus'; -import TmpStepContentActions from '.~/components/stepper/tmp-step-content-actions'; /** * Renders the disclaimer of Comparison Shopping Service (CSS). @@ -169,7 +169,7 @@ const SetupAccounts = ( props ) => {
- + { - + ); }; diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js index b85df3ed29..55dc51082e 100644 --- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js @@ -17,6 +17,7 @@ import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; import useAdsSetupCompleteCallback from '.~/hooks/useAdsSetupCompleteCallback'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; +import StepContentFooter from '.~/components/stepper/step-content-footer'; import StepContentActions from '.~/components/stepper/step-content-actions'; import FaqsSection from '.~/components/paid-ads/faqs-section'; import AppButton from '.~/components/app-button'; @@ -24,7 +25,6 @@ import PaidAdsFeaturesSection from './paid-ads-features-section'; import PaidAdsSetupSections from './paid-ads-setup-sections'; import { getProductFeedUrl } from '.~/utils/urls'; import clientSession from './clientSession'; -import TmpStepContentActions from '.~/components/stepper/tmp-step-content-actions'; import { API_NAMESPACE, STORE_KEY } from '.~/data/constants'; import { GUIDE_NAMES } from '.~/constants'; @@ -195,8 +195,8 @@ export default function SetupPaidAds() { ) } - - + ); } From cd992e6d838c12c0f2c9d45af1343835957f4877 Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 15 Aug 2024 19:34:41 +0400 Subject: [PATCH 09/15] Fix linting issue. --- js/src/components/paid-ads/asset-group/faqs-section.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/src/components/paid-ads/asset-group/faqs-section.js b/js/src/components/paid-ads/asset-group/faqs-section.js index 5236f9b9d3..447d28be97 100644 --- a/js/src/components/paid-ads/asset-group/faqs-section.js +++ b/js/src/components/paid-ads/asset-group/faqs-section.js @@ -7,7 +7,6 @@ import { createInterpolateElement } from '@wordpress/element'; /** * Internal dependencies */ -import Section from '.~/wcdl/section'; import FaqsPanel from '.~/components/faqs-panel'; import AppDocumentationLink from '.~/components/app-documentation-link'; From 0bbb53a74021457566d3e790e7456af4be6b6a6c Mon Sep 17 00:00:00 2001 From: asvinb Date: Fri, 16 Aug 2024 11:52:48 +0400 Subject: [PATCH 10/15] Remove tmp from class name. --- js/src/components/stepper/step-content-footer/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/components/stepper/step-content-footer/index.js b/js/src/components/stepper/step-content-footer/index.js index e5ad81f135..abf86cbdda 100644 --- a/js/src/components/stepper/step-content-footer/index.js +++ b/js/src/components/stepper/step-content-footer/index.js @@ -6,7 +6,7 @@ import VerticalGapLayout from '.~/components/vertical-gap-layout'; const StepContentFooter = ( { children } ) => { return ( -
+
{ children }
); From 3d82e7b51187b424df20ba3b057ea0cc4a8b696f Mon Sep 17 00:00:00 2001 From: asvinb Date: Fri, 16 Aug 2024 12:19:05 +0400 Subject: [PATCH 11/15] Fix typo. --- js/src/components/vertical-gap-layout/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/components/vertical-gap-layout/index.js b/js/src/components/vertical-gap-layout/index.js index 9b667fdfad..ea252e441e 100644 --- a/js/src/components/vertical-gap-layout/index.js +++ b/js/src/components/vertical-gap-layout/index.js @@ -26,7 +26,7 @@ const sizeClassName = { * 'normal': A normal gap. * 'medium': A medium gap. * 'large': A large gap. - * 'xlarge': A extra large gap. + * 'xlarge': An extra large gap. * 'overlap': Overlap the back child on the front child with -1 pixel spacing. */ const VerticalGapLayout = ( props ) => { From 0a1f57920157f274c568fbef952e8509ac8e2f19 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Mon, 19 Aug 2024 15:58:58 -0500 Subject: [PATCH 12/15] Wrap all in components --- .../setup-free-listings/form-content.js | 21 ++++++++------ .../paid-ads/asset-group/asset-group.js | 5 ++-- .../{faqs-section.js => faqs-panel.js} | 4 +-- .../{faqs-section.js => faqs-panel.js} | 4 +-- .../ads-stepper/setup-accounts/index.js | 21 ++++++++------ .../ads-stepper/setup-billing/index.js | 27 +++++++++-------- .../setup-paid-ads/setup-paid-ads.js | 5 ++-- .../setup-stepper/store-requirements/index.js | 29 ++++++++++--------- 8 files changed, 64 insertions(+), 52 deletions(-) rename js/src/components/paid-ads/asset-group/{faqs-section.js => faqs-panel.js} (97%) rename js/src/components/paid-ads/{faqs-section.js => faqs-panel.js} (97%) diff --git a/js/src/components/free-listings/setup-free-listings/form-content.js b/js/src/components/free-listings/setup-free-listings/form-content.js index 3d62b1fb61..13e79be100 100644 --- a/js/src/components/free-listings/setup-free-listings/form-content.js +++ b/js/src/components/free-listings/setup-free-listings/form-content.js @@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n'; import { useAdaptiveFormContext } from '.~/components/adaptive-form'; import StepContent from '.~/components/stepper/step-content'; import StepContentActions from '.~/components/stepper/step-content-actions'; +import StepContentFooter from '.~/components/stepper/step-content-footer'; import TaxRate from '.~/components/free-listings/configure-product-listings/tax-rate'; import useDisplayTaxRate from '.~/components/free-listings/configure-product-listings/useDisplayTaxRate'; import ChooseAudienceSection from '.~/components/free-listings/choose-audience-section'; @@ -47,15 +48,17 @@ const FormContent = ( { - - - { submitLabel } - - + + + + { submitLabel } + + + ); }; diff --git a/js/src/components/paid-ads/asset-group/asset-group.js b/js/src/components/paid-ads/asset-group/asset-group.js index 258a3d0094..371ada32ad 100644 --- a/js/src/components/paid-ads/asset-group/asset-group.js +++ b/js/src/components/paid-ads/asset-group/asset-group.js @@ -13,8 +13,8 @@ import StepContentHeader from '.~/components/stepper/step-content-header'; import StepContentFooter from '.~/components/stepper/step-content-footer'; import StepContentActions from '.~/components/stepper/step-content-actions'; import AppButton from '.~/components/app-button'; +import AssetGroupFaqsPanel from './faqs-section'; import AssetGroupSection from './asset-group-section'; -import FaqsSection from './faqs-section'; import { recordGlaEvent } from '.~/utils/tracks'; export const ACTION_SUBMIT_CAMPAIGN_AND_ASSETS = 'submit-campaign-and-assets'; @@ -167,8 +167,7 @@ export default function AssetGroup( { campaign } ) { : __( 'Save changes', 'google-listings-and-ads' ) } - - + ); diff --git a/js/src/components/paid-ads/asset-group/faqs-section.js b/js/src/components/paid-ads/asset-group/faqs-panel.js similarity index 97% rename from js/src/components/paid-ads/asset-group/faqs-section.js rename to js/src/components/paid-ads/asset-group/faqs-panel.js index 447d28be97..adc8859567 100644 --- a/js/src/components/paid-ads/asset-group/faqs-section.js +++ b/js/src/components/paid-ads/asset-group/faqs-panel.js @@ -69,8 +69,8 @@ const faqItems = [ * @fires gla_faq with `{ context: 'campaign-management', id: 'what-makes-these-ads-different-from-product-ads', action: 'expand' | 'collapse' }`. * @fires gla_documentation_link_click with `{ context: 'assets-faq', linkId: 'assets-faq-about-ad-formats-available-in-different-campaign-types', href: 'https://support.google.com/google-ads/answer/1722124' }`. */ -const FaqsSection = () => { +const AssetGroupFaqsPanel = () => { return ; }; -export default FaqsSection; +export default AssetGroupFaqsPanel; diff --git a/js/src/components/paid-ads/faqs-section.js b/js/src/components/paid-ads/faqs-panel.js similarity index 97% rename from js/src/components/paid-ads/faqs-section.js rename to js/src/components/paid-ads/faqs-panel.js index 4405cb3d8c..1c2b6462e5 100644 --- a/js/src/components/paid-ads/faqs-section.js +++ b/js/src/components/paid-ads/faqs-panel.js @@ -85,7 +85,7 @@ const faqItems = [ * * @fires gla_setup_ads_faq */ -const FaqsSection = () => { +const PaidAdsFaqsPanel = () => { return ( { ); }; -export default FaqsSection; +export default PaidAdsFaqsPanel; 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 9458ce2603..bab89e5cc1 100644 --- a/js/src/setup-ads/ads-stepper/setup-accounts/index.js +++ b/js/src/setup-ads/ads-stepper/setup-accounts/index.js @@ -10,6 +10,7 @@ import AppButton from '.~/components/app-button'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; import StepContentActions from '.~/components/stepper/step-content-actions'; +import StepContentFooter from '.~/components/stepper/step-content-footer'; import VerticalGapLayout from '.~/components/vertical-gap-layout'; import { ConnectedGoogleAccountCard } from '.~/components/google-account-card'; import GoogleAdsAccountCard from '.~/components/google-ads-account-card'; @@ -74,15 +75,17 @@ const SetupAccounts = ( props ) => { { hasFreeAdCredit && }
- - - { __( 'Continue', 'google-listings-and-ads' ) } - - + + + + { __( 'Continue', 'google-listings-and-ads' ) } + + + ); }; diff --git a/js/src/setup-ads/ads-stepper/setup-billing/index.js b/js/src/setup-ads/ads-stepper/setup-billing/index.js index 0d29714075..6e610944d4 100644 --- a/js/src/setup-ads/ads-stepper/setup-billing/index.js +++ b/js/src/setup-ads/ads-stepper/setup-billing/index.js @@ -17,6 +17,7 @@ import { } from '.~/components/paid-ads/billing-card'; import BillingSavedCard from './billing-saved-card'; import StepContentActions from '.~/components/stepper/step-content-actions'; +import StepContentFooter from '.~/components/stepper/step-content-footer'; import AppButton from '.~/components/app-button'; import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants'; @@ -68,18 +69,20 @@ const SetupBilling = ( props ) => { ) } { isApproved && ( - - - { __( - 'Launch paid campaign', - 'google-listings-and-ads' - ) } - - + + + + { __( + 'Launch paid campaign', + 'google-listings-and-ads' + ) } + + + ) } ); diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js index 55dc51082e..9fde71e5d3 100644 --- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js @@ -19,8 +19,8 @@ import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; import StepContentFooter from '.~/components/stepper/step-content-footer'; import StepContentActions from '.~/components/stepper/step-content-actions'; -import FaqsSection from '.~/components/paid-ads/faqs-section'; import AppButton from '.~/components/app-button'; +import PaidAdsFaqsPanel from '.~/components/paid-ads/faqs-section'; import PaidAdsFeaturesSection from './paid-ads-features-section'; import PaidAdsSetupSections from './paid-ads-setup-sections'; import { getProductFeedUrl } from '.~/utils/urls'; @@ -222,8 +222,9 @@ export default function SetupPaidAds() { /> - ); } + + diff --git a/js/src/setup-mc/setup-stepper/store-requirements/index.js b/js/src/setup-mc/setup-stepper/store-requirements/index.js index 3067776132..517a837bbf 100644 --- a/js/src/setup-mc/setup-stepper/store-requirements/index.js +++ b/js/src/setup-mc/setup-stepper/store-requirements/index.js @@ -15,6 +15,7 @@ import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; import StepContentActions from '.~/components/stepper/step-content-actions'; +import StepContentFooter from '.~/components/stepper/step-content-footer'; import AdaptiveForm from '.~/components/adaptive-form'; import ValidationErrors from '.~/components/validation-errors'; import ContactInformation from '.~/components/contact-information'; @@ -188,19 +189,21 @@ export default function StoreRequirements( { onContinue } ) { } /> - - - { __( - 'Continue', - 'google-listings-and-ads' - ) } - - + + + + { __( + 'Continue', + 'google-listings-and-ads' + ) } + + + ); } } From 562e301228440bf3b8d17c465931a321da13b13a Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Mon, 19 Aug 2024 16:02:39 -0500 Subject: [PATCH 13/15] Fix file name for AssetGroupFaqsPanel --- js/src/components/paid-ads/asset-group/asset-group.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/components/paid-ads/asset-group/asset-group.js b/js/src/components/paid-ads/asset-group/asset-group.js index 371ada32ad..bbceda7497 100644 --- a/js/src/components/paid-ads/asset-group/asset-group.js +++ b/js/src/components/paid-ads/asset-group/asset-group.js @@ -13,7 +13,7 @@ import StepContentHeader from '.~/components/stepper/step-content-header'; import StepContentFooter from '.~/components/stepper/step-content-footer'; import StepContentActions from '.~/components/stepper/step-content-actions'; import AppButton from '.~/components/app-button'; -import AssetGroupFaqsPanel from './faqs-section'; +import AssetGroupFaqsPanel from './faqs-panel'; import AssetGroupSection from './asset-group-section'; import { recordGlaEvent } from '.~/utils/tracks'; From 1f41efc551353139db40fb6f32bfea5aefe76509 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Mon, 19 Aug 2024 16:10:31 -0500 Subject: [PATCH 14/15] Fix file paths --- js/src/components/paid-ads/ads-campaign.js | 4 ++-- .../setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/src/components/paid-ads/ads-campaign.js b/js/src/components/paid-ads/ads-campaign.js index 332cc8ff98..e3ea8111f6 100644 --- a/js/src/components/paid-ads/ads-campaign.js +++ b/js/src/components/paid-ads/ads-campaign.js @@ -17,7 +17,7 @@ import { useAdaptiveFormContext } from '.~/components/adaptive-form'; import AudienceSection from './audience-section'; import BudgetSection from './budget-section'; import { CampaignPreviewCard } from './campaign-preview'; -import FaqsSection from './faqs-section'; +import PaidAdsFaqsPanel from './faqs-panel'; /** * @typedef {import('.~/data/actions').Campaign} Campaign @@ -109,7 +109,7 @@ export default function AdsCampaign( { { __( 'Continue', 'google-listings-and-ads' ) } - + ); diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js index 9fde71e5d3..5753c1944e 100644 --- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js @@ -20,7 +20,7 @@ import StepContentHeader from '.~/components/stepper/step-content-header'; import StepContentFooter from '.~/components/stepper/step-content-footer'; import StepContentActions from '.~/components/stepper/step-content-actions'; import AppButton from '.~/components/app-button'; -import PaidAdsFaqsPanel from '.~/components/paid-ads/faqs-section'; +import PaidAdsFaqsPanel from '.~/components/paid-ads/faqs-panel'; import PaidAdsFeaturesSection from './paid-ads-features-section'; import PaidAdsSetupSections from './paid-ads-setup-sections'; import { getProductFeedUrl } from '.~/utils/urls'; @@ -227,4 +227,4 @@ export default function SetupPaidAds() { ); } - +; From 513c6b9076c0912dfcd59e1dcf29e10f980399e4 Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 29 Aug 2024 12:30:39 +0400 Subject: [PATCH 15/15] Move FAQ panel within the footer. --- js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js index 5753c1944e..c28bc2585e 100644 --- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js @@ -222,9 +222,8 @@ export default function SetupPaidAds() { /> + ); } - -;