From f218b47483fb73194100987a4b6bb0607f97c2c5 Mon Sep 17 00:00:00 2001
From: Jorge M <jorge.mahecha@a8c.com>
Date: Sun, 15 Sep 2024 18:25:44 +0200
Subject: [PATCH] Fix issue with the orignal value

---
 .../countries-time-input/index.js             | 13 +++++-
 .../countries-time-input/index.test.js        | 43 +++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/countries-time-input/index.js b/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/countries-time-input/index.js
index fa122ce4e6..88bcd68e62 100644
--- a/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/countries-time-input/index.js
+++ b/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/countries-time-input/index.js
@@ -36,8 +36,14 @@ const CountriesTimeInput = ( {
 		return <AppSpinner />;
 	}
 
+	/**
+	 *
+	 * @param {Object} e The event object
+	 * @param {number} numberValue The string value of the input field converted to a number
+	 * @param {string} field The field name: time or maxTime
+	 */
 	const handleBlur = ( e, numberValue, field ) => {
-		if ( time === numberValue ) {
+		if ( value[ field ] === numberValue ) {
 			return;
 		}
 
@@ -47,6 +53,11 @@ const CountriesTimeInput = ( {
 		} );
 	};
 
+	/**
+	 *
+	 * @param {number} numberValue The string value of the input field converted to a number
+	 * @param {string} field The field name: time or maxTime
+	 */
 	const handleIncrement = ( numberValue, field ) => {
 		onChange( {
 			...value,
diff --git a/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/countries-time-input/index.test.js b/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/countries-time-input/index.test.js
index 1e2843dd4c..b7e40dc481 100644
--- a/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/countries-time-input/index.test.js
+++ b/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/countries-time-input/index.test.js
@@ -96,4 +96,47 @@ describe( 'CountriesTimeInput', () => {
 			expect( onChange.mock.calls[ 3 ][ 0 ].maxTime ).toBe( 32 );
 		} );
 	} );
+
+	describe( 'Test handleBlur', () => {
+		it( 'Test onChange when handleBlur is called', async () => {
+			const onChange = jest.fn();
+			const onDelete = jest.fn();
+			const { queryAllByRole } = render(
+				<CountriesTimeInput
+					value={ { countries: [ 'ES' ], time: 1, maxTime: 32 } }
+					audienceCountries={ [ 'ES' ] }
+					onChange={ onChange }
+					onDelete={ onDelete }
+				/>
+			);
+
+			const inputs = queryAllByRole( 'textbox' );
+
+			expect( inputs ).toHaveLength( 2 );
+
+			const [ timeInput, maxTimeInput ] = inputs;
+
+			// The value is the same, so the onChange function shouldnt be called
+			fireEvent.blur( timeInput, { target: { value: '1' } } );
+			expect( onChange ).toHaveBeenCalledTimes( 0 );
+
+			// The value is different, so the onChange function should be called
+			fireEvent.blur( timeInput, { target: { value: '2' } } );
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+			// It should update the time property.
+			expect( onChange.mock.calls[ 0 ][ 0 ].time ).toBe( 2 );
+
+			onChange.mockClear();
+
+			// The value is the same, so the onChange function shouldnt be called
+			fireEvent.blur( maxTimeInput, { target: { value: '32' } } );
+			expect( onChange ).toHaveBeenCalledTimes( 0 );
+
+			// The value is different, so the onChange function should be called
+			fireEvent.blur( maxTimeInput, { target: { value: '10' } } );
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+			// It should update the maxTime property.
+			expect( onChange.mock.calls[ 0 ][ 0 ].maxTime ).toBe( 10 );
+		} );
+	} );
 } );