Demo for the proposal of updating the shipping config type with data management hierarchy.

Ref: #1750 (comment)

Author: eason9487

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

@@ -9,8 +9,8 @@ import { __ } from '@wordpress/i18n';
 import isNonFreeShippingRate from '.~/utils/isNonFreeShippingRate';
 
 const validlocationSet = new Set( [ 'all', 'selected' ] );
-const validShippingRateSet = new Set( [ 'automatic', 'flat', 'manual' ] );
-const validShippingTimeSet = new Set( [ 'flat', 'manual' ] );
+const shippingRateConfigTypesSet = new Set( [ 'automatic', 'flat', 'manual' ] );
+const shippingTimeConfigTypesSet = new Set( [ 'flat', 'automatic' ] );
 const validTaxRateSet = new Set( [ 'destination', 'manual' ] );
 
 const checkErrors = ( values, shippingTimes, finalCountryCodes ) => {
@@ -32,30 +32,33 @@ const checkErrors = ( values, shippingTimes, finalCountryCodes ) => {
 	}
 
 	/**
-	 * Check shipping rates.
+	 * Check shipping config type.
 	 */
-	if ( ! validShippingRateSet.has( values.shipping_rate ) ) {
-		errors.shipping_rate = __(
-			'Please select a shipping rate option.',
+	if ( ! shippingRateConfigTypesSet.has( values.shippingConfigType ) ) {
+		errors.shippingConfigType = __(
+			'Please select a shipping option.',
 			'google-listings-and-ads'
 		);
 	}
 
+	/**
+	 * Check shipping rates.
+	 */
 	if (
-		values.shipping_rate === 'flat' &&
+		values.shippingConfigType === 'flat' &&
 		( values.shipping_country_rates.length < finalCountryCodes.length ||
 			values.shipping_country_rates.some( ( el ) => el.rate < 0 ) )
 	) {
-		errors.shipping_rate = __(
+		errors.shippingConfigType = __(
 			'Please specify shipping rates for all the countries. And the estimated shipping rate cannot be less than 0.',
 			'google-listings-and-ads'
 		);
 	}
 
 	/**
-	 * Check offer free shipping, only when shipping_rate is 'flat'.
+	 * Check offer free shipping, only when shippingConfigType is 'flat'.
 	 */
-	if ( values.shipping_rate === 'flat' ) {
+	if ( values.shippingConfigType === 'flat' ) {
 		if (
 			values.offer_free_shipping === undefined &&
 			values.shipping_country_rates.some( isNonFreeShippingRate )
@@ -83,19 +86,12 @@ const checkErrors = ( values, shippingTimes, finalCountryCodes ) => {
 	/**
 	 * Check shipping times.
 	 */
-	if ( ! validShippingTimeSet.has( values.shipping_time ) ) {
-		errors.shipping_time = __(
-			'Please select a shipping time option.',
-			'google-listings-and-ads'
-		);
-	}
-
 	if (
-		values.shipping_time === 'flat' &&
+		shippingTimeConfigTypesSet.has( values.shippingConfigType ) &&
 		( shippingTimes.length < finalCountryCodes.length ||
 			shippingTimes.some( ( el ) => el.time < 0 ) )
 	) {
-		errors.shipping_time = __(
+		errors.shippingConfigType = __(
 			'Please specify shipping times for all the countries. And the estimated shipping time cannot be less than 0.',
 			'google-listings-and-ads'
 		);

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

@@ -36,8 +36,12 @@ const FormContent = ( {
 	submitLabel = __( 'Complete setup', 'google-listings-and-ads' ),
 } ) => {
 	const { values, isValidForm, handleSubmit } = formProps;
+	const { shippingConfigType } = values;
 	const shouldDisplayTaxRate = useDisplayTaxRate( countries );
-	const shouldDisplayShippingTime = values.shipping_time === 'flat';
+	// Currently, the automatic application of shipping time config is not supported,
+	// so the user is still required to enter the config.
+	const shouldDisplayShippingTime =
+		shippingConfigType === 'flat' || shippingConfigType === 'automatic';
 	const isCompleteSetupDisabled =
 		shouldDisplayTaxRate === null || ! isValidForm;
 

js/src/components/free-listings/setup-free-listings/index.js

@@ -30,8 +30,7 @@ const targetAudienceFields = [ 'locale', 'language', 'location', 'countries' ];
  * If we are adding a new settings field, it should be added into this array.
  */
 const settingsFieldNames = [
-	'shipping_rate',
-	'shipping_time',
+	'shippingConfigType',
 	'tax_rate',
 	'website_live',
 	'checkout_process_secure',
@@ -142,27 +141,7 @@ const SetupFreeListings = ( {
 		} else if ( change.name === 'shipping_country_times' ) {
 			onShippingTimesChange( values.shipping_country_times );
 		} else if ( settingsFieldNames.includes( change.name ) ) {
-			// The value of `shipping_time` option is determined by the value of `shipping_rate` option.
-			// So if the current form change is considered it needs to change `shipping_time` as well,
-			// it schedules the processing with `formPropsDelegateeRef` and also skips the call of
-			// `onSettingsChange` this time, and lets the call of `onSettingsChange` be triggered
-			// when the form change of `shipping_time` happens.
-			let shouldTriggerOnChange = true;
-
-			if ( change.name === 'shipping_rate' ) {
-				// When shipping rate is 'manual', shipping time should be 'manual' as well;
-				// When shipping rate is 'automatic' or 'flat', shipping time should be 'flat'.
-				const nextValue = change.value === 'manual' ? 'manual' : 'flat';
-
-				if ( nextValue !== values.shipping_time ) {
-					shouldTriggerOnChange = false;
-					setValue( 'shipping_time', nextValue );
-				}
-			}
-
-			if ( shouldTriggerOnChange ) {
-				onSettingsChange( getSettings( values ) );
-			}
+			onSettingsChange( getSettings( values ) );
 		} else if ( targetAudienceFields.includes( change.name ) ) {
 			onTargetAudienceChange( pick( values, targetAudienceFields ) );
 
@@ -194,8 +173,7 @@ const SetupFreeListings = ( {
 					location: targetAudience.location,
 					countries: targetAudience.countries || [],
 					// These are the fields for settings.
-					shipping_rate: settings.shipping_rate,
-					shipping_time: settings.shipping_time,
+					shippingConfigType: settings.shippingConfigType,
 					tax_rate: settings.tax_rate,
 					website_live: settings.website_live,
 					checkout_process_secure: settings.checkout_process_secure,

js/src/components/shipping-rate-section/shipping-rate-section.js

@@ -21,7 +21,7 @@ import FlatShippingRatesInputCards from './flat-shipping-rates-input-cards';
 
 const ShippingRateSection = ( { formProps, audienceCountries } ) => {
 	const { getInputProps, values } = formProps;
-	const inputProps = getInputProps( 'shipping_rate' );
+	const inputProps = getInputProps( 'shippingConfigType' );
 
 	return (
 		<Section
@@ -110,7 +110,7 @@ const ShippingRateSection = ( { formProps, audienceCountries } ) => {
 						</VerticalGapLayout>
 					</Section.Card.Body>
 				</Section.Card>
-				{ values.shipping_rate === 'flat' && (
+				{ values.shippingConfigType === 'flat' && (
 					<FlatShippingRatesInputCards
 						audienceCountries={ audienceCountries }
 						formProps={ formProps }

js/src/data/actions.js

@@ -84,8 +84,7 @@ export function handleFetchError( error, message ) {
  *
  * @typedef {Object} SettingsData
  * @property {boolean} [offer_free_shipping] Whether if the merchant offers free shipping.
- * @property {'automatic'|'flat'|'manual'} [shipping_rate] Type of the shipping rate.
- * @property {'flat'|'manual'} [shipping_time] Type of the shipping time.
+ * @property {'automatic'|'flat'|'manual'} [shippingConfigType] Type of the shipping config to be set up.
  * @property {string|null} [tax_rate] Type of tax rate, There are two possible values if US is selected: 'destination' and 'manual' otherwise will be null.
  * @property {boolean} [website_live] Whether the store website is live.
  * @property {boolean} [checkout_process_secure] Whether the checkout process is complete and secure.
@@ -310,9 +309,20 @@ export function* fetchSettings() {
 			path: `${ API_NAMESPACE }/mc/settings`,
 		} );
 
+		const settings = {
+			...response,
+			shippingConfigType: response.shipping_rate,
+		};
+
+		// It doesn't have to be deleted and can be kept. The consideration here is to avoid
+		// possible confusion when seeing `shipping_rate` and `shipping_time` when inspecting
+		// `settings` in the application layer.
+		delete settings.shipping_rate;
+		delete settings.shipping_time;
+
 		return {
 			type: TYPES.RECEIVE_SETTINGS,
-			settings: response,
+			settings,
 		};
 	} catch ( error ) {
 		yield handleFetchError(
@@ -332,10 +342,20 @@ export function* fetchSettings() {
  * @return {Object} Action object to save target audience.
  */
 export function* saveSettings( settings ) {
+	const { shippingConfigType, ...data } = settings;
+
+	data.shipping_rate = shippingConfigType;
+
+	// Currently, the automatic application of shipping time config is not supported,
+	// therefore, when shipping config type is 'automatic', the value of `shipping_time`
+	// for calling API needs to be converted to 'flat'.
+	data.shipping_time =
+		shippingConfigType === 'automatic' ? 'flat' : shippingConfigType;
+
 	yield apiFetch( {
 		path: `${ API_NAMESPACE }/mc/settings`,
 		method: 'POST',
-		data: settings,
+		data,
 	} );
 
 	return {

js/src/setup-mc/setup-stepper/saved-setup-stepper.js

@@ -67,11 +67,10 @@ const SavedSetupStepper = ( { savedStep } ) => {
 	// Auto-save the default values for shipping options to fall back with the original implementation.
 	// Ref: https://github.com/woocommerce/google-listings-and-ads/blob/2.0.2/js/src/setup-mc/setup-stepper/setup-free-listings/form-content.js#L33
 	useEffect( () => {
-		if ( settings?.shipping_rate === null ) {
+		if ( settings?.shippingConfigType === null ) {
 			saveSettings( {
 				...settings,
-				shipping_rate: 'automatic',
-				shipping_time: 'flat',
+				shippingConfigType: 'automatic',
 			} );
 		}
 	}, [ settings, saveSettings ] );
@@ -125,7 +124,7 @@ const SavedSetupStepper = ( { savedStep } ) => {
 	const initShippingRates = hasResolvedShippingRates ? shippingRates : null;
 	const initShippingTimes = hasResolvedShippingTimes ? shippingTimes : null;
 	const initTargetAudience = targetAudience?.location ? targetAudience : null;
-	const initSettings = settings?.shipping_rate ? settings : null;
+	const initSettings = settings?.shippingConfigType ? settings : null;
 
 	return (
 		<Stepper