Fix the incorrect form state offer_free_shipping for the shipping settings

Author: eason9487

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

@@ -12,6 +12,7 @@ import AppSpinner from '.~/components/app-spinner';
 import Hero from '.~/components/free-listings/configure-product-listings/hero';
 import checkErrors from '.~/components/free-listings/configure-product-listings/checkErrors';
 import getOfferFreeShippingInitialValue from '.~/utils/getOfferFreeShippingInitialValue';
+import isNonFreeShippingRate from '.~/utils/isNonFreeShippingRate';
 import FormContent from './form-content';
 
 /**
@@ -112,6 +113,16 @@ const SetupFreeListings = ( {
 	const handleChange = ( change, values ) => {
 		if ( change.name === 'shipping_country_rates' ) {
 			onShippingRatesChange( values.shipping_country_rates );
+
+			// If all the shipping rates are free shipping,
+			// we set the offer_free_shipping to undefined,
+			// so that when users add a non-free shipping rate,
+			// they would need to choose "yes" / "no" for offer_free_shipping.
+			if ( ! change.value.some( isNonFreeShippingRate ) ) {
+				formPropsDelegateeRef.current.push( ( formProps ) => {
+					formProps.setValue( 'offer_free_shipping', undefined );
+				} );
+			}
 		} else if ( change.name === 'shipping_country_times' ) {
 			onShippingTimesChange( values.shipping_country_times );
 		} else if ( settingsFieldNames.includes( change.name ) ) {

js/src/components/shipping-rate-section/flat-shipping-rates-input-cards.js

@@ -13,22 +13,6 @@ const FlatShippingRatesInputCards = ( props ) => {
 		isNonFreeShippingRate
 	);
 
-	const getShippingRatesChangeHandler = ( onChange ) => (
-		newShippingRates
-	) => {
-		/**
-		 * If all the shipping rates are free shipping,
-		 * we set the offer_free_shipping to undefined,
-		 * so that when users add a non-free shipping rate,
-		 * they would need to choose "yes" / "no" for offer_free_shipping.
-		 */
-		if ( ! newShippingRates.some( isNonFreeShippingRate ) ) {
-			setValue( 'offer_free_shipping', undefined );
-		}
-
-		onChange( newShippingRates );
-	};
-
 	const getOfferFreeShippingChangeHandler = ( onChange ) => (
 		newOfferFreeShippingValue
 	) => {
@@ -58,9 +42,6 @@ const FlatShippingRatesInputCards = ( props ) => {
 			<EstimatedShippingRatesCard
 				audienceCountries={ audienceCountries }
 				{ ...getInputProps( 'shipping_country_rates' ) }
-				onChange={ getShippingRatesChangeHandler(
-					getInputProps( 'shipping_country_rates' ).onChange
-				) }
 			/>
 			{ displayFreeShippingCards && (
 				<>