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 (
-
+
);
};
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 && (
) }
-
-
-
- { createSkipButton(
- __(
- 'Skip paid ads creation',
- 'google-listings-and-ads'
- )
- ) }
-
+
+
+ { createSkipButton(
+ __(
+ 'Skip paid ads creation',
+ 'google-listings-and-ads'
+ )
) }
- 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( ',' ),
- } }
- />
-
+
+
+
+
);
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'
+ ) }
+
+
>
);