Update shippings settings phase 1

js/src/components/adaptive-form/adaptive-form-context.js

@@ -63,3 +63,20 @@
 
 	return adaptiveFormContext;
 }
+
+/**
+ * AdaptiveForm's input props hook.
+ *
+ * @param {string} key Key of the form value.
+ * @param {string} [validationKey=key] Key of the form value to be used for validation.
+ *
+ * @return {Object} Props for an adaptive form input.
+ */
+export function useAdaptiveFormInputProps( key, validationKey = key ) {
+	const { getInputProps, adapter } = useAdaptiveFormContext();
+
+	return {
+		...getInputProps( key ),
+		helper: adapter.renderRequestedValidation( validationKey ),
+	};
+}

js/src/components/adaptive-form/index.js

@@ -1,2 +1,5 @@
 export { default } from './adaptive-form';
-export { useAdaptiveFormContext } from './adaptive-form-context';
+export {
+	useAdaptiveFormContext,
+	useAdaptiveFormInputProps,
+} from './adaptive-form-context';

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

@@ -26,9 +26,15 @@ exports[`checkErrors Shipping rates When the type of shipping rate is an invalid
 
 exports[`checkErrors Shipping rates When the type of shipping rate is an invalid value or missing, should not pass 3`] = `"Please select a shipping rate option."`;
 
+exports[`checkErrors Shipping times For flat type When minimum max_time is < 0, should not pass 1`] = `"The minimum shipping time must not be more than the maximum shipping time."`;
+
+exports[`checkErrors Shipping times For flat type When minimum times is < 0, should not pass 1`] = `"Please specify estimated shipping times for all the countries, and the time cannot be less than 0."`;
+
 exports[`checkErrors Shipping times For flat type When there are any selected countries' shipping times is not set, should not pass 1`] = `"Please specify estimated shipping times for all the countries, and the time cannot be less than 0."`;
 
-exports[`checkErrors Shipping times For flat type When there are any shipping times is < 0, should not pass 1`] = `"Please specify estimated shipping times for all the countries, and the time cannot be less than 0."`;
+exports[`checkErrors Shipping times For flat type When there are any shipping times are < 0, should not pass 1`] = `"Please specify estimated shipping times for all the countries, and the time cannot be less than 0."`;
+
+exports[`checkErrors Shipping times For flat type shouldnt pass if min time is bigger than max time 1`] = `"The minimum shipping time must not be more than the maximum shipping time."`;
 
 exports[`checkErrors Shipping times When the type of shipping time is an invalid value or missing, should not pass 1`] = `"Please select a shipping time option."`;
 

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

@@ -3,11 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import isNonFreeShippingRate from '.~/utils/isNonFreeShippingRate';
-
 const validlocationSet = new Set( [ 'all', 'selected' ] );
 const validShippingRateSet = new Set( [ 'automatic', 'flat', 'manual' ] );
 const validShippingTimeSet = new Set( [ 'flat', 'manual' ] );
@@ -62,16 +57,6 @@ const checkErrors = (
 	 * Check offer free shipping, only when shipping_rate is 'flat'.
 	 */
 	if ( values.shipping_rate === 'flat' ) {
-		if (
-			values.offer_free_shipping === undefined &&
-			values.shipping_country_rates.some( isNonFreeShippingRate )
-		) {
-			errors.offer_free_shipping = __(
-				'Please select an option for whether to offer free shipping.',
-				'google-listings-and-ads'
-			);
-		}
-
 		if (
 			values.offer_free_shipping === true &&
 			values.shipping_country_rates.every(
@@ -99,14 +84,24 @@ const checkErrors = (
 	if (
 		values.shipping_time === 'flat' &&
 		( shippingTimes.length < finalCountryCodes.length ||
-			shippingTimes.some( ( el ) => el.time < 0 ) )
+			shippingTimes.some( ( el ) => el.time < 0 || el.maxTime < 0 ) )
 	) {
 		errors.shipping_country_times = __(
 			'Please specify estimated shipping times for all the countries, and the time cannot be less than 0.',
 			'google-listings-and-ads'
 		);
 	}
 
+	if (
+		values.shipping_time === 'flat' &&
+		shippingTimes.some( ( el ) => el.time > el.maxTime )
+	) {
+		errors.shipping_country_times = __(
+			'The minimum shipping time must not be more than the maximum shipping time.',
+			'google-listings-and-ads'
+		);
+	}
+
 	/**
 	 * Check tax rate (required for U.S. only).
 	 */

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

@@ -15,9 +15,10 @@ function toRates( ...tuples ) {
 }
 
 function toTimes( ...tuples ) {
-	return tuples.map( ( [ countryCode, time ] ) => ( {
+	return tuples.map( ( [ countryCode, time, maxTime ] ) => ( {
 		countryCode,
 		time,
+		maxTime,
 	} ) );
 }
 
@@ -44,7 +45,7 @@ describe( 'checkErrors', () => {
 			shipping_country_rates: toRates( [ 'US', 10 ], [ 'JP', 30, 88 ] ),
 			offer_free_shipping: true,
 		};
-		const times = toTimes( [ 'US', 3 ], [ 'JP', 10 ] );
+		const times = toTimes( [ 'US', 3, 3 ], [ 'JP', 10, 10 ] );
 		const codes = [ 'US', 'JP' ];
 
 		const errors = checkErrors( values, times, codes );
@@ -252,20 +253,6 @@ describe( 'checkErrors', () => {
 				expect( errors ).not.toHaveProperty( 'offer_free_shipping' );
 			} );
 
-			it( 'When there are some non-free shipping rates, and offer free shipping is unchecked, should not pass', () => {
-				const values = {
-					...defaultFormValues,
-					shipping_rate: 'flat',
-					shipping_country_rates: toRates( [ 'US', 0 ], [ 'JP', 1 ] ),
-					offer_free_shipping: undefined,
-				};
-				const codes = [ 'US', 'JP' ];
-
-				const errors = checkErrors( values, [], codes );
-
-				expect( errors ).toHaveProperty( 'offer_free_shipping' );
-			} );
-
 			it( 'When there are some non-free shipping rates, and offer free shipping is checked, and there is minimum order amount for non-free shipping rates, should pass', () => {
 				const values = {
 					...defaultFormValues,
@@ -381,7 +368,7 @@ describe( 'checkErrors', () => {
 
 		describe( 'For flat type', () => {
 			it( `When there are any selected countries' shipping times is not set, should not pass`, () => {
-				const times = toTimes( [ 'US', 7 ], [ 'FR', 16 ] );
+				const times = toTimes( [ 'US', 7, 7 ], [ 'FR', 16, 16 ] );
 				const codes = [ 'US', 'JP', 'FR' ];
 
 				const errors = checkErrors( flatShipping, times, codes );
@@ -391,16 +378,36 @@ describe( 'checkErrors', () => {
 			} );
 
 			it( `When all selected countries' shipping times are set, should pass`, () => {
-				const times = toTimes( [ 'US', 7 ], [ 'FR', 16 ] );
+				const times = toTimes( [ 'US', 7, 7 ], [ 'FR', 16, 16 ] );
 				const codes = [ 'US', 'FR' ];
 
 				const errors = checkErrors( flatShipping, times, codes );
 
 				expect( errors ).not.toHaveProperty( 'shipping_time' );
 			} );
 
-			it( `When there are any shipping times is < 0, should not pass`, () => {
-				const times = toTimes( [ 'US', 10 ], [ 'JP', -1 ] );
+			it( `When there are any shipping times are < 0, should not pass`, () => {
+				const times = toTimes( [ 'US', 10, 10 ], [ 'JP', -1, -1 ] );
+				const codes = [ 'US', 'JP' ];
+
+				const errors = checkErrors( flatShipping, times, codes );
+
+				expect( errors ).toHaveProperty( 'shipping_country_times' );
+				expect( errors.shipping_country_times ).toMatchSnapshot();
+			} );
+
+			it( `When minimum times is < 0, should not pass`, () => {
+				const times = toTimes( [ 'US', 10, 10 ], [ 'JP', -1, 10 ] );
+				const codes = [ 'US', 'JP' ];
+
+				const errors = checkErrors( flatShipping, times, codes );
+
+				expect( errors ).toHaveProperty( 'shipping_country_times' );
+				expect( errors.shipping_country_times ).toMatchSnapshot();
+			} );
+
+			it( `When minimum max_time is < 0, should not pass`, () => {
+				const times = toTimes( [ 'US', 10, 10 ], [ 'JP', 1, -10 ] );
 				const codes = [ 'US', 'JP' ];
 
 				const errors = checkErrors( flatShipping, times, codes );
@@ -410,13 +417,23 @@ describe( 'checkErrors', () => {
 			} );
 
 			it( `When all shipping times are ≥ 0, should pass`, () => {
-				const times = toTimes( [ 'US', 1 ], [ 'JP', 0 ] );
+				const times = toTimes( [ 'US', 1, 1 ], [ 'JP', 0, 0 ] );
 				const codes = [ 'US', 'JP' ];
 
 				const errors = checkErrors( flatShipping, times, codes );
 
 				expect( errors ).not.toHaveProperty( 'shipping_time' );
 			} );
+
+			it( `shouldnt pass if min time is bigger than max time`, () => {
+				const times = toTimes( [ 'US', 1, 0 ], [ 'JP', 1, 1 ] );
+				const codes = [ 'US', 'JP' ];
+
+				const errors = checkErrors( flatShipping, times, codes );
+
+				expect( errors ).toHaveProperty( 'shipping_country_times' );
+				expect( errors.shipping_country_times ).toMatchSnapshot();
+			} );
 		} );
 	} );
 

js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/add-time-modal/index.js

@@ -4,16 +4,18 @@
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Form } from '@woocommerce/components';
+import { Flex, FlexItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import AppButton from '.~/components/app-button';
 import AppModal from '.~/components/app-modal';
-import AppInputNumberControl from '.~/components/app-input-number-control';
 import VerticalGapLayout from '.~/components/vertical-gap-layout';
 import SupportedCountrySelect from '.~/components/supported-country-select';
 import validateShippingTimeGroup from '.~/utils/validateShippingTimeGroup';
+import MinMaxShippingTimes from '../../min-max-inputs';
+import './index.scss';
 
 /**
  * Form to add a new time for selected country(-ies).
@@ -36,12 +38,18 @@ const AddTimeModal = ( { countries, onRequestClose, onSubmit } ) => {
 			initialValues={ {
 				countries,
 				time: 0,
+				maxTime: 0,
 			} }
 			validate={ validateShippingTimeGroup }
 			onSubmit={ handleSubmitCallback }
 		>
 			{ ( formProps ) => {
-				const { getInputProps, isValidForm, handleSubmit } = formProps;
+				const { getInputProps, isValidForm, handleSubmit, errors } =
+					formProps;
+
+				const handleIncrement = ( numberValue, field ) => {
+					getInputProps( field ).onChange( numberValue );
+				};
 
 				return (
 					<AppModal
@@ -66,6 +74,7 @@ const AddTimeModal = ( { countries, onRequestClose, onSubmit } ) => {
 							</AppButton>,
 						] }
 						onRequestClose={ onRequestClose }
+						className="gla-add-time-modal"
 					>
 						<VerticalGapLayout>
 							<SupportedCountrySelect
@@ -79,17 +88,31 @@ const AddTimeModal = ( { countries, onRequestClose, onSubmit } ) => {
 								}
 								{ ...getInputProps( 'countries' ) }
 							/>
-							<AppInputNumberControl
-								label={ __(
-									'Then the estimated shipping time displayed in the product listing is',
-									'google-listings-and-ads'
-								) }
-								suffix={ __(
-									'days',
+							<div className="label">
+								{ __(
+									'Then the estimated shipping times displayed in the product listing are:',
 									'google-listings-and-ads'
 								) }
-								{ ...getInputProps( 'time' ) }
-							/>
+							</div>
+							<Flex
+								direction="column"
+								className="gla-countries-time-input-container"
+							>
+								<FlexItem>
+									<MinMaxShippingTimes
+										time={ getInputProps( 'time' ).value }
+										maxTime={
+											getInputProps( 'maxTime' ).value
+										}
+										handleBlur={ handleIncrement }
+										handleIncrement={ handleIncrement }
+									/>
+
+									<ul className="gla-validation-errors">
+										<li>{ errors.time }</li>
+									</ul>
+								</FlexItem>
+							</Flex>
 						</VerticalGapLayout>
 					</AppModal>
 				);

js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/add-time-modal/index.scss

@@ -0,0 +1,3 @@
+.gla-add-time-modal .gla-countries-time-stepper .components-input-control {
+	margin-bottom: 0;
+}

js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/add-time-modal/index.test.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import '@testing-library/jest-dom';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import AddTimeModal from './index';
+import useMCCountryTreeOptions from '.~/components/supported-country-select/useMCCountryTreeOptions';
+
+jest.mock( '.~/components/supported-country-select/useMCCountryTreeOptions' );
+
+describe( 'Add time Modal', () => {
+	it( 'The min and max shipping time inputs should be displayed, and both values should be submitted', async () => {
+		const onSubmit = jest.fn();
+
+		useMCCountryTreeOptions.mockImplementation( () => {
+			return [
+				{
+					value: 'EU',
+					label: 'Europe',
+					children: [
+						{
+							value: 'ES',
+							label: 'Spain',
+							parent: 'EU',
+						},
+					],
+				},
+			];
+		} );
+
+		const { getByRole, getAllByRole } = render(
+			<AddTimeModal
+				countries={ [ 'ES' ] }
+				onRequestClose={ jest.fn() }
+				onSubmit={ onSubmit }
+			/>
+		);
+
+		const inputs = getAllByRole( 'textbox' );
+		// it should render 2 inputs ( the min and max shipping time inputs )
+		expect( inputs ).toHaveLength( 2 );
+
+		const [ minInput, maxInput ] = inputs;
+
+		expect( minInput ).toHaveValue( '' );
+		expect( maxInput ).toHaveValue( '' );
+
+		fireEvent.blur( minInput, { target: { value: '2' } } );
+		expect( minInput ).toHaveValue( '2' );
+
+		fireEvent.blur( maxInput, { target: { value: '11' } } );
+		expect( maxInput ).toHaveValue( '11' );
+
+		const submitButton = getByRole( 'button', {
+			name: 'Add shipping time',
+		} );
+
+		expect( submitButton ).toBeEnabled();
+
+		fireEvent.click( submitButton );
+
+		await waitFor( () => {
+			expect( onSubmit ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		expect( onSubmit ).toHaveBeenCalledWith( {
+			countries: [ 'ES' ],
+			time: 2,
+			maxTime: 11,
+		} );
+	} );
+} );