Feature: Streamline the onboarding flow

js/src/components/free-listings/choose-audience-section/choose-audience-section.js

@@ -1,16 +1,13 @@
 /**
  * External dependencies
  */
-import { RadioControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { useAdaptiveFormContext } from '.~/components/adaptive-form';
 import AppRadioContentControl from '.~/components/app-radio-content-control';
-import AppDocumentationLink from '.~/components/app-documentation-link';
 import Section from '.~/wcdl/section';
 import Subsection from '.~/wcdl/subsection';
 import RadioHelperText from '.~/wcdl/radio-helper-text';
@@ -23,16 +20,12 @@ import './choose-audience-section.scss';
  *
  * To be used in onboarding and further editing.
  * Does not provide any save strategy, this is to be bound externaly.
- *
- * @fires gla_documentation_link_click with `{ context: 'setup-mc-audience', link_id: 'site-language', href: 'https://support.google.com/merchants/answer/160637' }`
  */
 const ChooseAudienceSection = () => {
 	const {
-		values,
 		getInputProps,
 		adapter: { renderRequestedValidation },
 	} = useAdaptiveFormContext();
-	const { locale, language } = values;
 
 	return (
 		<>
@@ -50,37 +43,6 @@ const ChooseAudienceSection = () => {
 			>
 				<Section.Card>
 					<Section.Card.Body>
-						<Subsection>
-							<Subsection.Title>
-								{ __( 'Language', 'google-listings-and-ads' ) }
-							</Subsection.Title>
-							<Subsection.HelperText className="gla-choose-audience-section__language-helper">
-								{ createInterpolateElement(
-									__(
-										'Listings can only be displayed in your site language. <link>Read more</link>',
-										'google-listings-and-ads'
-									),
-									{
-										link: (
-											<AppDocumentationLink
-												context="setup-mc-audience"
-												linkId="site-language"
-												href="https://support.google.com/merchants/answer/160637"
-											/>
-										),
-									}
-								) }
-							</Subsection.HelperText>
-							<RadioControl
-								selected={ locale }
-								options={ [
-									{
-										label: language,
-										value: locale,
-									},
-								] }
-							/>
-						</Subsection>
 						<Subsection>
 							<Subsection.Title>
 								{ __( 'Location', 'google-listings-and-ads' ) }

js/src/components/free-listings/choose-audience-section/choose-audience-section.scss

@@ -1,8 +1,6 @@
 .gla-choose-audience-section {
-	&__language-helper,
 	.wcdl-radio-helper-text {
 		font-style: normal;
-		color: $gray-700;
 	}
 
 	.wcdl-subsection-helper-text {

js/src/components/free-listings/configure-product-listings/checkErrors.js

@@ -17,7 +17,8 @@ const checkErrors = (
 	values,
 	shippingTimes,
 	finalCountryCodes,
-	storeCountryCode
+	storeCountryCode,
+	hideTaxRates = false
 ) => {
 	const errors = {};
 
@@ -110,6 +111,7 @@ const checkErrors = (
 	 * Check tax rate (required for U.S. only).
 	 */
 	if (
+		! hideTaxRates &&
 		( storeCountryCode === 'US' || finalCountryCodes.includes( 'US' ) ) &&
 		! validTaxRateSet.has( values.tax_rate )
 	) {

js/src/components/free-listings/setup-free-listings/form-content.js

@@ -8,6 +8,7 @@
  */
 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';
@@ -22,13 +23,16 @@
  *
  * @param {Object} props React props.
  * @param {string} [props.submitLabel="Complete setup"] Submit button label.
+ * @param {boolean} [props.hideTaxRates] Whether to hide tax rate section.
  */
 const FormContent = ( {
 	submitLabel = __( 'Complete setup', 'google-listings-and-ads' ),
+	hideTaxRates,
 } ) => {
 	const { values, isValidForm, handleSubmit, adapter } =
 		useAdaptiveFormContext();
-	const shouldDisplayTaxRate = useDisplayTaxRate( adapter.audienceCountries );
+	const displayTaxRate = useDisplayTaxRate( adapter.audienceCountries );
+	const shouldDisplayTaxRate = ! hideTaxRates && displayTaxRate;
 	const shouldDisplayShippingTime = values.shipping_time === 'flat';
 
 	const handleSubmitClick = ( event ) => {
@@ -48,13 +52,15 @@
 				<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/free-listings/setup-free-listings/index.js

@@ -32,16 +32,7 @@
  *
  * If we are adding a new settings field, it should be added into this array.
  */
-const settingsFieldNames = [
-	'shipping_rate',
-	'shipping_time',
-	'tax_rate',
-	'website_live',
-	'checkout_process_secure',
-	'payment_methods_visible',
-	'refund_tos_visible',
-	'contact_info_visible',
-];
+const settingsFieldNames = [ 'shipping_rate', 'shipping_time', 'tax_rate' ];
 
 /**
  * Get settings object from Form values.
@@ -78,6 +69,7 @@
  * @param {() => void} [props.onContinue] Callback called once continue button is clicked. Could be async. While it's being resolved the form would turn into a saving state.
  * @param {string} [props.submitLabel] Submit button label, to be forwarded to `FormContent`.
  * @param {JSX.Element} props.headerTitle Title in the header block of this setup.
+ * @param {boolean} [props.hideTaxRates=false] Whether to hide tax rate section, to be forwarded to `FormContent`.
  */
 const SetupFreeListings = ( {
 	targetAudience,
@@ -92,6 +84,7 @@
 	onContinue = noop,
 	submitLabel,
 	headerTitle,
+	hideTaxRates = false,
 } ) => {
 	const formRef = useRef();
 	const { code: storeCountryCode } = useStoreCountry();
@@ -108,7 +101,8 @@
 			values,
 			shippingTimesData,
 			countries,
-			storeCountryCode
+			storeCountryCode,
+			hideTaxRates
 		);
 	};
 
@@ -215,11 +209,6 @@
 					shipping_rate: settings.shipping_rate,
 					shipping_time: settings.shipping_time,
 					tax_rate: settings.tax_rate,
-					website_live: settings.website_live,
-					checkout_process_secure: settings.checkout_process_secure,
-					payment_methods_visible: settings.payment_methods_visible,
-					refund_tos_visible: settings.refund_tos_visible,
-					contact_info_visible: settings.contact_info_visible,
 					// This is used in UI only, not used in API.
 					offer_free_shipping:
 						getOfferFreeShippingInitialValue( shippingRates ),
@@ -232,7 +221,10 @@
 				validate={ handleValidate }
 				onSubmit={ onContinue }
 			>
-				<FormContent submitLabel={ submitLabel } />
+				<FormContent
+					submitLabel={ submitLabel }
+					hideTaxRates={ hideTaxRates }
+				/>
 			</AdaptiveForm>
 		</div>
 	);

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;