Merge pull request scandipwa#5285 from AleksandrsKondratjevs/issue-5279

issue-5279 - Fix on autofill checkout address form
denisprotassoff · Nov 5, 2022 · 50827c1 · 50827c1
2 parents e017132 + 08302d0
commit 50827c1
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 25 deletions.
diff --git a/packages/scandipwa/src/component/CheckoutAddressForm/CheckoutAddressForm.component.tsx b/packages/scandipwa/src/component/CheckoutAddressForm/CheckoutAddressForm.component.tsx
@@ -115,8 +115,9 @@ export class CheckoutAddressFormComponent extends MyAccountAddressForm<CheckoutA
 
         if (addressGroup) {
             addressGroup.events = {
-                // Updates shipping methods on address blurt
+                // Updates shipping methods on address blur
                 onBlur: this.onAddressChange,
+                onChange: this.onAddressChange,
             };
         }
 

diff --git a/packages/scandipwa/src/component/FieldGroup/FieldGroup.type.ts b/packages/scandipwa/src/component/FieldGroup/FieldGroup.type.ts
@@ -71,11 +71,12 @@ export type FieldGroupEvents = Omit<
 DOMAttributes<HTMLDivElement>,
 'children'
 | 'onBlur'
-| 'onLoad'
+| 'onChange'
 | 'dangerouslySetInnerHTML'
 >
 & {
     onBlur: (event: FocusEventHandler, fields: FieldGroupEventData) => void;
+    onChange: (event: FocusEventHandler, fields: FieldGroupEventData) => void;
 };
 
 export interface FieldGroupEventData {

diff --git a/packages/scandipwa/src/route/Checkout/Checkout.config.ts b/packages/scandipwa/src/route/Checkout/Checkout.config.ts
@@ -34,3 +34,4 @@ export const CHECKOUT_URL_REGEX = new RegExp(`^(${appendWithStoreCode('')})?${Ch
 export const PAYMENT_TOTALS = 'PAYMENT_TOTALS';
 
 export const UPDATE_EMAIL_CHECK_FREQUENCY = 1500; // ms
+export const UPDATE_SHIPPING_COST_ESTIMATES_FREQUENCY = 800; // ms
diff --git a/packages/scandipwa/src/route/Checkout/Checkout.container.tsx b/packages/scandipwa/src/route/Checkout/Checkout.container.tsx
@@ -56,6 +56,7 @@ import {
     CheckoutUrlSteps,
     PAYMENT_TOTALS,
     UPDATE_EMAIL_CHECK_FREQUENCY,
+    UPDATE_SHIPPING_COST_ESTIMATES_FREQUENCY,
 } from './Checkout.config';
 import {
     AddressInformation,
@@ -164,6 +165,34 @@ export class CheckoutContainer extends PureComponent<CheckoutContainerProps, Che
         checkEmailAvailability(email);
     }, UPDATE_EMAIL_CHECK_FREQUENCY);
 
+    handleFetchEstimateShippingCosts = debounce(({ address, cartId } : { address: GQLEstimateShippingCostsAddress; cartId: string }) => {
+        const { requestsSent } = this.state;
+
+        this.setState({
+            isDeliveryOptionsLoading: true,
+            requestsSent: requestsSent + 1,
+            estimateAddress: address,
+        });
+
+        fetchMutation<'estimateShippingCosts', ShippingMethod, true>(CheckoutQuery.getEstimateShippingCosts(
+            address,
+            cartId,
+        )).then(
+            /** @namespace Route/Checkout/Container/CheckoutContainer/debounce/fetchMutation/then */
+            ({ estimateShippingCosts: shippingMethods }) => {
+                const { requestsSent } = this.state;
+
+                this.setState({
+                    shippingMethods,
+                    isDeliveryOptionsLoading: requestsSent > 1,
+                    requestsSent: requestsSent - 1,
+                    isLoading: false,
+                });
+            },
+            this._handleError,
+        );
+    }, UPDATE_SHIPPING_COST_ESTIMATES_FREQUENCY);
+
     __construct(props: CheckoutContainerProps): void {
         super.__construct?.(props);
 
@@ -387,35 +416,13 @@ export class CheckoutContainer extends PureComponent<CheckoutContainerProps, Che
     }
 
     onShippingEstimationFieldsChange(address: GQLEstimateShippingCostsAddress): void {
-        const { requestsSent } = this.state;
         const cartId = getCartId();
 
         if (!cartId) {
             return;
         }
 
-        this.setState({
-            isDeliveryOptionsLoading: true,
-            requestsSent: requestsSent + 1,
-            estimateAddress: address,
-        });
-
-        fetchMutation<'estimateShippingCosts', ShippingMethod, true>(CheckoutQuery.getEstimateShippingCosts(
-            address,
-            cartId,
-        )).then(
-            /** @namespace Route/Checkout/Container/CheckoutContainer/onShippingEstimationFieldsChange/fetchMutation/then */
-            ({ estimateShippingCosts: shippingMethods }) => {
-                const { requestsSent } = this.state;
-
-                this.setState({
-                    shippingMethods,
-                    isDeliveryOptionsLoading: requestsSent > 1,
-                    requestsSent: requestsSent - 1,
-                });
-            },
-            this._handleError,
-        );
+        this.handleFetchEstimateShippingCosts({ address, cartId });
     }
 
     determineCheckoutStepFromUrl(): CheckoutSteps {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,3 +34,4 @@ export const CHECKOUT_URL_REGEX = new RegExp(`^(${appendWithStoreCode('')})?${Ch
		export const PAYMENT_TOTALS = 'PAYMENT_TOTALS';

		export const UPDATE_EMAIL_CHECK_FREQUENCY = 1500; // ms
		export const UPDATE_SHIPPING_COST_ESTIMATES_FREQUENCY = 800; // ms