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..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 @@ -8,6 +8,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'; @@ -48,13 +49,15 @@ const FormContent = ( { - - { submitLabel } - + + + { submitLabel } + + ); diff --git a/js/src/components/paid-ads/ads-campaign.js b/js/src/components/paid-ads/ads-campaign.js index 9de67da91e..e3ea8111f6 100644 --- a/js/src/components/paid-ads/ads-campaign.js +++ b/js/src/components/paid-ads/ads-campaign.js @@ -10,13 +10,14 @@ 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'; 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 @@ -97,15 +98,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..bbceda7497 100644 --- a/js/src/components/paid-ads/asset-group/asset-group.js +++ b/js/src/components/paid-ads/asset-group/asset-group.js @@ -11,9 +11,10 @@ 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 AssetGroupFaqsPanel from './faqs-panel'; 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'; @@ -114,50 +115,59 @@ 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-panel.js similarity index 93% 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 c8672cd85b..adc8859567 100644 --- a/js/src/components/paid-ads/asset-group/faqs-section.js +++ b/js/src/components/paid-ads/asset-group/faqs-panel.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'; @@ -70,12 +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 = () => { - return ( -
- -
- ); +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 93% rename from js/src/components/paid-ads/faqs-section.js rename to js/src/components/paid-ads/faqs-panel.js index 04f5299a7e..1c2b6462e5 100644 --- a/js/src/components/paid-ads/faqs-section.js +++ b/js/src/components/paid-ads/faqs-panel.js @@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import Section from '.~/wcdl/section'; import FaqsPanel from '.~/components/faqs-panel'; const faqItems = [ @@ -86,16 +85,14 @@ const faqItems = [ * * @fires gla_setup_ads_faq */ -const FaqsSection = () => { +const PaidAdsFaqsPanel = () => { return ( -
- -
+ ); }; -export default FaqsSection; +export default PaidAdsFaqsPanel; 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..5e43f6cae8 --- /dev/null +++ b/js/src/components/stepper/step-content-actions/index.js @@ -0,0 +1,17 @@ +/** + * Internal dependencies + */ +import './index.scss'; + +const StepContentActions = ( props ) => { + const { className = '', ...rest } = props; + + return ( +
+ ); +}; + +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/step-content-footer/index.js b/js/src/components/stepper/step-content-footer/index.js index 72b304d5ff..abf86cbdda 100644 --- a/js/src/components/stepper/step-content-footer/index.js +++ b/js/src/components/stepper/step-content-footer/index.js @@ -1,16 +1,14 @@ /** * Internal dependencies */ -import './index.scss'; - -const StepContentFooter = ( props ) => { - const { className = '', ...rest } = props; +import Section from '.~/wcdl/section'; +import VerticalGapLayout from '.~/components/vertical-gap-layout'; +const StepContentFooter = ( { children } ) => { return ( -
+
+ { children } +
); }; diff --git a/js/src/components/vertical-gap-layout/index.js b/js/src/components/vertical-gap-layout/index.js index 88c512d45c..ea252e441e 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': An 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; 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..bab89e5cc1 100644 --- a/js/src/setup-ads/ads-stepper/setup-accounts/index.js +++ b/js/src/setup-ads/ads-stepper/setup-accounts/index.js @@ -9,6 +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 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'; @@ -75,13 +76,15 @@ const SetupAccounts = ( props ) => { - - { __( '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 1dc6b234ed..6e610944d4 100644 --- a/js/src/setup-ads/ads-stepper/setup-billing/index.js +++ b/js/src/setup-ads/ads-stepper/setup-billing/index.js @@ -16,6 +16,7 @@ import { fallbackBillingUrl, } 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'; @@ -69,16 +70,18 @@ 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-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js index a318189cbb..f03231b481 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js @@ -15,6 +15,7 @@ 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'; @@ -166,16 +167,19 @@ const SetupAccounts = ( props ) => { disabledLeft={ ! isGMCPreconditionReady } > - + - - { __( '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 f5dd0f9a07..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 @@ -18,8 +18,9 @@ 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 FaqsSection from '.~/components/paid-ads/faqs-section'; +import StepContentActions from '.~/components/stepper/step-content-actions'; import AppButton from '.~/components/app-button'; +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'; @@ -193,32 +194,35 @@ export default function SetupPaidAds() { { showPaidAdsSetup && ( ) } - - ); 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..517a837bbf 100644 --- a/js/src/setup-mc/setup-stepper/store-requirements/index.js +++ b/js/src/setup-mc/setup-stepper/store-requirements/index.js @@ -14,6 +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 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'; @@ -189,17 +190,19 @@ export default function StoreRequirements( { onContinue } ) { /> - - { __( - 'Continue', - 'google-listings-and-ads' - ) } - + + + { __( + 'Continue', + 'google-listings-and-ads' + ) } + + );