Streamline onboarding: Move FAQs to the bottom of pages

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 = ( {
 				<TaxRate />
 			</ConditionalSection>
 			<StepContentFooter>
-				<AppButton
-					isPrimary
-					loading={ adapter.isSubmitting }
-					onClick={ handleSubmitClick }
-				>
-					{ submitLabel }
-				</AppButton>
+				<StepContentActions>
+					<AppButton
+						isPrimary
+						loading={ adapter.isSubmitting }
+						onClick={ handleSubmitClick }
+					>
+						{ submitLabel }
+					</AppButton>
+				</StepContentActions>
 			</StepContentFooter>
 		</StepContent>
 	);

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( {
 			>
 				<CampaignPreviewCard />
 			</BudgetSection>
-			<FaqsSection />
+
 			<StepContentFooter>
-				<AppButton
-					isPrimary
-					disabled={ ! isValidForm }
-					onClick={ onContinue }
-				>
-					{ __( 'Continue', 'google-listings-and-ads' ) }
-				</AppButton>
+				<StepContentActions>
+					<AppButton
+						isPrimary
+						disabled={ ! isValidForm }
+						onClick={ onContinue }
+					>
+						{ __( 'Continue', 'google-listings-and-ads' ) }
+					</AppButton>
+				</StepContentActions>
+				<PaidAdsFaqsPanel />
 			</StepContentFooter>
 		</StepContent>
 	);

js/src/components/paid-ads/asset-group/asset-group.js

@@ -11,9 +11,10 @@
 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 @@
 				) }
 			/>
 			<AssetGroupSection />
-			<FaqsSection />
+
 			<StepContentFooter>
-				{ ( 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.
+				<StepContentActions>
+					{ ( 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.
+						<AppButton
+							isTertiary
+							data-action={ ACTION_SUBMIT_CAMPAIGN_ONLY }
+							disabled={
+								! isValidForm ||
+								isSubmitted ||
+								currentAction ===
+									ACTION_SUBMIT_CAMPAIGN_AND_ASSETS
+							}
+							loading={
+								isSubmitting &&
+								currentAction === ACTION_SUBMIT_CAMPAIGN_ONLY
+							}
+							onClick={ handleSkipClick }
+						>
+							{ __(
+								'Skip this step',
+								'google-listings-and-ads'
+							) }
+						</AppButton>
+					) }
 					<AppButton
-						isTertiary
-						data-action={ ACTION_SUBMIT_CAMPAIGN_ONLY }
+						isPrimary
+						data-action={ ACTION_SUBMIT_CAMPAIGN_AND_ASSETS }
 						disabled={
-							! isValidForm ||
+							! adapter.baseAssetGroup[
+								ASSET_FORM_KEY.FINAL_URL
+							] ||
 							isSubmitted ||
-							currentAction === ACTION_SUBMIT_CAMPAIGN_AND_ASSETS
+							currentAction === ACTION_SUBMIT_CAMPAIGN_ONLY
 						}
 						loading={
 							isSubmitting &&
-							currentAction === ACTION_SUBMIT_CAMPAIGN_ONLY
+							currentAction === ACTION_SUBMIT_CAMPAIGN_AND_ASSETS
 						}
-						onClick={ handleSkipClick }
+						onClick={ handleLaunchClick }
 					>
-						{ __( 'Skip this step', 'google-listings-and-ads' ) }
+						{ isCreation
+							? __(
+									'Launch paid campaign',
+									'google-listings-and-ads'
+							  )
+							: __( 'Save changes', 'google-listings-and-ads' ) }
 					</AppButton>
-				) }
-				<AppButton
-					isPrimary
-					data-action={ ACTION_SUBMIT_CAMPAIGN_AND_ASSETS }
-					disabled={
-						! adapter.baseAssetGroup[ ASSET_FORM_KEY.FINAL_URL ] ||
-						isSubmitted ||
-						currentAction === ACTION_SUBMIT_CAMPAIGN_ONLY
-					}
-					loading={
-						isSubmitting &&
-						currentAction === ACTION_SUBMIT_CAMPAIGN_AND_ASSETS
-					}
-					onClick={ handleLaunchClick }
-				>
-					{ isCreation
-						? __(
-								'Launch paid campaign',
-								'google-listings-and-ads'
-						  )
-						: __( 'Save changes', 'google-listings-and-ads' ) }
-				</AppButton>
+				</StepContentActions>
+				<AssetGroupFaqsPanel />
 			</StepContentFooter>
 		</StepContent>
 	);

js/src/components/paid-ads/asset-group/faqs-section.js → js/src/components/paid-ads/asset-group/faqs-panel.js

@@ -7,7 +7,6 @@
 /**
  * Internal dependencies
  */
-import Section from '.~/wcdl/section';
 import FaqsPanel from '.~/components/faqs-panel';
 import AppDocumentationLink from '.~/components/app-documentation-link';
 
@@ -70,12 +69,8 @@
  * @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 (
-		<Section>
-			<FaqsPanel context="campaign-management" faqItems={ faqItems } />
-		</Section>
-	);
+const AssetGroupFaqsPanel = () => {
+	return <FaqsPanel context="campaign-management" faqItems={ faqItems } />;
 };
 
-export default FaqsSection;
+export default AssetGroupFaqsPanel;

js/src/components/paid-ads/faqs-section.js → 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 (
-		<Section>
-			<FaqsPanel
-				trackName="gla_setup_ads_faq"
-				context="setup-ads"
-				faqItems={ faqItems }
-			/>
-		</Section>
+		<FaqsPanel
+			trackName="gla_setup_ads_faq"
+			context="setup-ads"
+			faqItems={ faqItems }
+		/>
 	);
 };
 
-export default FaqsSection;
+export default PaidAdsFaqsPanel;

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 (
+		<div
+			className={ `gla-step-content-actions ${ className }` }
+			{ ...rest }
+		/>
+	);
+};
+
+export default StepContentActions;

js/src/components/stepper/step-content-footer/index.scss → 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;

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 (
-		<div
-			className={ `gla-step-content-footer ${ className }` }
-			{ ...rest }
-		/>
+		<Section className="gla-step-content-footer">
+			<VerticalGapLayout size="xlarge">{ children }</VerticalGapLayout>
+		</Section>
 	);
 };
 

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 ) => {

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;
 

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 ) => {
 				</VerticalGapLayout>
 			</Section>
 			<StepContentFooter>
-				<AppButton
-					isPrimary
-					disabled={ isContinueButtonDisabled }
-					onClick={ onContinue }
-				>
-					{ __( 'Continue', 'google-listings-and-ads' ) }
-				</AppButton>
+				<StepContentActions>
+					<AppButton
+						isPrimary
+						disabled={ isContinueButtonDisabled }
+						onClick={ onContinue }
+					>
+						{ __( 'Continue', 'google-listings-and-ads' ) }
+					</AppButton>
+				</StepContentActions>
 			</StepContentFooter>
 		</StepContent>
 	);

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 ) => {
 			</Section>
 			{ isApproved && (
 				<StepContentFooter>
-					<AppButton
-						isPrimary
-						loading={ isSubmitting }
-						onClick={ handleSubmit }
-					>
-						{ __(
-							'Launch paid campaign',
-							'google-listings-and-ads'
-						) }
-					</AppButton>
+					<StepContentActions>
+						<AppButton
+							isPrimary
+							loading={ isSubmitting }
+							onClick={ handleSubmit }
+						>
+							{ __(
+								'Launch paid campaign',
+								'google-listings-and-ads'
+							) }
+						</AppButton>
+					</StepContentActions>
 				</StepContentFooter>
 			) }
 		</StepContent>