Free Listings + Paid Ads: Combine the audience and shipping steps

.eslintrc.js

@@ -10,12 +10,6 @@ const webpackResolver = {
 			 * Ref: https://webpack.js.org/configuration/resolve/#resolveextensions
 			 */
 			extensions: [ '.js' ],
-			/**
-			 * Make eslint be able to resolve the exports config of `use-debounce`.
-			 * The `exports` config of package.json doesn't work before the current eslint support it.
-			 * Ref: https://github.com/xnimorz/use-debounce/blob/5.2.0/package.json#L8-L14
-			 */
-			conditionNames: [ 'import', 'require' ],
 		},
 	},
 };

js/src/components/free-listings/choose-audience/form-content.js → js/src/components/free-listings/choose-audience-section/choose-audience-section.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Button, RadioControl } from '@wordpress/components';
+import { RadioControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 
@@ -13,29 +13,28 @@ import AppDocumentationLink from '.~/components/app-documentation-link';
 import Section from '.~/wcdl/section';
 import Subsection from '.~/wcdl/subsection';
 import RadioHelperText from '.~/wcdl/radio-helper-text';
-import StepContentFooter from '.~/components/stepper/step-content-footer';
 import SupportedCountrySelect from '.~/components/supported-country-select';
 import VerticalGapLayout from '.~/components/vertical-gap-layout';
-import '.~/components/free-listings/choose-audience/index.scss';
+import './choose-audience-section.scss';
 
 /**
- * Form to choose audience.
+ * Section form to choose audience.
  *
  * To be used in onboarding and further editing.
  * Does not provide any save strategy, this is to be bound externaly.
- * Copied from {@link .~/setup-mc/setup-stepper/choose-audience/form-content.js}.
  *
- * @param {Object} props
+ * @param {Object} props React props.
+ * @param {Object} props.formProps Form props forwarded from `Form` component.
  * @fires gla_documentation_link_click with `{ context: 'setup-mc-audience', link_id: 'site-language', href: 'https://support.google.com/merchants/answer/160637' }`
  */
-const FormContent = ( props ) => {
-	const { formProps } = props;
-	const { values, isValidForm, getInputProps, handleSubmit } = formProps;
+const ChooseAudienceSection = ( { formProps } ) => {
+	const { values, getInputProps } = formProps;
 	const { locale, language } = values;
 
 	return (
 		<>
 			<Section
+				className="gla-choose-audience-section"
 				title={ __( 'Audience', 'google-listings-and-ads' ) }
 				description={
 					<p>
@@ -52,7 +51,7 @@ const FormContent = ( props ) => {
 							<Subsection.Title>
 								{ __( 'Language', 'google-listings-and-ads' ) }
 							</Subsection.Title>
-							<Subsection.HelperText className="helper-text">
+							<Subsection.HelperText className="gla-choose-audience-section__language-helper">
 								{ createInterpolateElement(
 									__(
 										'Listings can only be displayed in your site language. <link>Read more</link>',
@@ -83,7 +82,7 @@ const FormContent = ( props ) => {
 							<Subsection.Title>
 								{ __( 'Location', 'google-listings-and-ads' ) }
 							</Subsection.Title>
-							<Subsection.HelperText className="helper-text">
+							<Subsection.HelperText>
 								{ __(
 									'Your store should already have the appropriate shipping and tax rates (if required) for potential customers in your selected location(s).',
 									'google-listings-and-ads'
@@ -99,18 +98,14 @@ const FormContent = ( props ) => {
 									) }
 									value="selected"
 								>
-									<div className="input">
-										<SupportedCountrySelect
-											multiple
-											{ ...getInputProps( 'countries' ) }
-										/>
-									</div>
-									<div className="cannot-find-country">
-										{ __(
+									<SupportedCountrySelect
+										multiple
+										{ ...getInputProps( 'countries' ) }
+										help={ __(
 											'Can’t find a country? Only supported countries can be selected.',
 											'google-listings-and-ads'
 										) }
-									</div>
+									/>
 								</AppRadioContentControl>
 								<AppRadioContentControl
 									{ ...getInputProps( 'location' ) }
@@ -132,17 +127,8 @@ const FormContent = ( props ) => {
 					</Section.Card.Body>
 				</Section.Card>
 			</Section>
-			<StepContentFooter>
-				<Button
-					isPrimary
-					disabled={ ! isValidForm }
-					onClick={ handleSubmit }
-				>
-					{ __( 'Continue', 'google-listings-and-ads' ) }
-				</Button>
-			</StepContentFooter>
 		</>
 	);
 };
 
-export default FormContent;
+export default ChooseAudienceSection;

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

@@ -0,0 +1,15 @@
+.gla-choose-audience-section {
+	&__language-helper,
+	.wcdl-radio-helper-text {
+		font-style: normal;
+		color: $gray-700;
+	}
+
+	.wcdl-subsection-helper-text {
+		margin-bottom: calc(var(--main-gap) / 3 * 2);
+	}
+
+	.woocommerce-tree-select-control__help {
+		margin-top: $grid-unit-10;
+	}
+}

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

@@ -0,0 +1 @@
+export { default } from './choose-audience-section';

js/src/components/free-listings/configure-product-listings/__snapshots__/checkErrors.test.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`checkErrors Audience When the audience countries array is empty and the value of audience location option is 'selected', should not pass 1`] = `"Please select at least one country."`;
+
+exports[`checkErrors Audience When the audience location option is an invalid value or missing, should not pass 1`] = `"Please select a location option."`;
+
+exports[`checkErrors Audience When the audience location option is an invalid value or missing, should not pass 2`] = `"Please select a location option."`;
+
 exports[`checkErrors For tax rate, if selected country codes include 'US' When the tax rate option is an invalid value or missing, should not pass 1`] = `"Please specify tax rate option."`;
 
 exports[`checkErrors For tax rate, if selected country codes include 'US' When the tax rate option is an invalid value or missing, should not pass 2`] = `"Please specify tax rate option."`;

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

@@ -8,13 +8,29 @@ import { __ } from '@wordpress/i18n';
  */
 import isNonFreeFlatShippingRate from '.~/utils/isNonFreeFlatShippingRate';
 
+const validlocationSet = new Set( [ 'all', 'selected' ] );
 const validShippingRateSet = new Set( [ 'automatic', 'flat', 'manual' ] );
 const validShippingTimeSet = new Set( [ 'flat', 'manual' ] );
 const validTaxRateSet = new Set( [ 'destination', 'manual' ] );
 
 const checkErrors = ( values, shippingTimes, finalCountryCodes ) => {
 	const errors = {};
 
+	// Check audience.
+	if ( ! validlocationSet.has( values.location ) ) {
+		errors.location = __(
+			'Please select a location option.',
+			'google-listings-and-ads'
+		);
+	}
+
+	if ( values.location === 'selected' && values.countries.length === 0 ) {
+		errors.countries = __(
+			'Please select at least one country.',
+			'google-listings-and-ads'
+		);
+	}
+
 	/**
 	 * Check shipping rates.
 	 */

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

@@ -38,6 +38,8 @@ const defaultFormValues = {
 describe( 'checkErrors', () => {
 	it( 'When all checks are passed, should return an empty object', () => {
 		const values = {
+			location: 'selected',
+			countries: [ 'US', 'JP' ],
 			shipping_rate: 'flat',
 			shipping_time: 'flat',
 			tax_rate: 'manual',
@@ -59,6 +61,59 @@ describe( 'checkErrors', () => {
 		expect( errors ).toHaveProperty( 'shipping_time' );
 	} );
 
+	describe( 'Audience', () => {
+		it( 'When the audience location option is an invalid value or missing, should not pass', () => {
+			// Not set yet
+			let errors = checkErrors( {}, [], [] );
+
+			expect( errors ).toHaveProperty( 'location' );
+			expect( errors.location ).toMatchSnapshot();
+
+			// Invalid value
+			errors = checkErrors( { location: true }, [], [] );
+
+			expect( errors ).toHaveProperty( 'location' );
+			expect( errors.location ).toMatchSnapshot();
+		} );
+
+		it( 'When the audience location option is a valid value, should pass', () => {
+			// Selected all countries
+			let errors = checkErrors( { location: 'all' }, [], [] );
+
+			expect( errors ).not.toHaveProperty( 'location' );
+
+			// Selected "selected countries only"
+			const values = {
+				location: 'selected',
+				countries: [],
+			};
+			errors = checkErrors( values, [], [] );
+
+			expect( errors ).not.toHaveProperty( 'location' );
+		} );
+
+		it( `When the audience countries array is empty and the value of audience location option is 'selected', should not pass`, () => {
+			const values = {
+				location: 'selected',
+				countries: [],
+			};
+			const errors = checkErrors( values, [], [] );
+
+			expect( errors ).toHaveProperty( 'countries' );
+			expect( errors.countries ).toMatchSnapshot();
+		} );
+
+		it( `When the audience countries array is not empty and the value of audience location option is 'selected', should pass`, () => {
+			const values = {
+				location: 'selected',
+				countries: [ '' ],
+			};
+			const errors = checkErrors( values, [], [] );
+
+			expect( errors ).not.toHaveProperty( 'countries' );
+		} );
+	} );
+
 	describe( 'Shipping rates', () => {
 		let automaticShipping;
 		let flatShipping;

js/src/edit-free-campaign/setup-free-listings/form-content.js → js/src/components/free-listings/setup-free-listings/form-content.js

@@ -10,6 +10,7 @@ import StepContent from '.~/components/stepper/step-content';
 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';
 import ShippingRateSection from '.~/components/shipping-rate-section';
 import ShippingTimeSection from '.~/components/free-listings/configure-product-listings/shipping-time-section';
 import AppButton from '.~/components/app-button';
@@ -21,8 +22,6 @@ import ConditionalSection from '.~/components/conditional-section';
 
 /**
  * Form to configure free listigns.
- * Copied from {@link .~/setup-mc/setup-stepper/setup-free-listings/form-content.js},
- * without auto-save functionality.
  *
  * @param {Object} props React props.
  * @param {Array<CountryCode>} props.countries List of available countries to be forwarded to ShippingRateSection and ShippingTimeSection.
@@ -44,6 +43,7 @@ const FormContent = ( {
 
 	return (
 		<StepContent>
+			<ChooseAudienceSection formProps={ formProps } />
 			<ShippingRateSection
 				formProps={ formProps }
 				audienceCountries={ countries }