Fix the WC 6.9 compatibility problem that the shipping_time of the form state will be incorrect when the selection of shipping rate is 'complex'

Author: eason9487

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

@@ -115,7 +115,29 @@ const SetupFreeListings = ( {
 		} else if ( change.name === 'shipping_country_times' ) {
 			onShippingTimesChange( values.shipping_country_times );
 		} else if ( settingsFieldNames.includes( change.name ) ) {
-			onSettingsChange( getSettings( values ) );
+			// 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;
+					formPropsDelegateeRef.current.push( ( formProps ) =>
+						formProps.setValue( 'shipping_time', nextValue )
+					);
+				}
+			}
+
+			if ( shouldTriggerOnChange ) {
+				onSettingsChange( getSettings( values ) );
+			}
 		} else if ( targetAudienceFields.includes( change.name ) ) {
 			onTargetAudienceChange( pick( values, targetAudienceFields ) );
 

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

@@ -20,24 +20,9 @@ import FlatShippingRatesInputCards from './flat-shipping-rates-input-cards';
  */
 
 const ShippingRateSection = ( { formProps, audienceCountries } ) => {
-	const { getInputProps, values, setValue } = formProps;
+	const { getInputProps, values } = formProps;
 	const inputProps = getInputProps( 'shipping_rate' );
 
-	const getShippingRateOptionChangeHandler = ( onChange ) => ( value ) => {
-		switch ( value ) {
-			case 'automatic':
-			case 'flat':
-				setValue( 'shipping_time', 'flat' );
-				break;
-
-			case 'manual':
-				setValue( 'shipping_time', 'manual' );
-				break;
-		}
-
-		onChange( value );
-	};
-
 	return (
 		<Section
 			title={ __( 'Shipping rates', 'google-listings-and-ads' ) }
@@ -78,9 +63,6 @@ const ShippingRateSection = ( { formProps, audienceCountries } ) => {
 								) }
 								value="automatic"
 								collapsible
-								onChange={ getShippingRateOptionChangeHandler(
-									inputProps.onChange
-								) }
 							>
 								<RadioHelperText>
 									{ __(
@@ -97,9 +79,6 @@ const ShippingRateSection = ( { formProps, audienceCountries } ) => {
 								) }
 								value="flat"
 								collapsible
-								onChange={ getShippingRateOptionChangeHandler(
-									inputProps.onChange
-								) }
 							/>
 							<AppRadioContentControl
 								{ ...inputProps }
@@ -109,9 +88,6 @@ const ShippingRateSection = ( { formProps, audienceCountries } ) => {
 								) }
 								value="manual"
 								collapsible
-								onChange={ getShippingRateOptionChangeHandler(
-									inputProps.onChange
-								) }
 							>
 								<RadioHelperText>
 									{ createInterpolateElement(