diff --git a/packages/scandipwa/src/component/CheckoutAddressForm/CheckoutAddressForm.component.tsx b/packages/scandipwa/src/component/CheckoutAddressForm/CheckoutAddressForm.component.tsx index a6f6e27745..fab5fcdee9 100644 --- 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, '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 index 11d1d71d22..12f71f695a 100644 --- 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 index a1aa4a4b34..5c89d1c4f4 100644 --- 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 { + 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); @@ -386,36 +415,14 @@ export class CheckoutContainer extends PureComponent(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 {