Fix E2E errors with debounced `updatePaymentMethods` function (https://github.com/woocommerce/woocommerce-blocks/pull/7507)
* Add non-debounced versions of updatePaymentMethods * Call undebounced function until store is ready then call debounced * Reset debounce timer to 1 second * Add better comments * Try setting the trail setting of the debounce function * Revert "Try setting the trail setting of the debounce function" This reverts commit 040fb63cb612c19ac396396d1949b6429f402616. Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
This commit is contained in:
parent
3c6a365697
commit
3e6aaf47b3
|
@ -16,7 +16,10 @@ import { controls as sharedControls } from '../shared-controls';
|
|||
import { controls } from './controls';
|
||||
import type { SelectFromMap, DispatchFromMap } from '../mapped-types';
|
||||
import { pushChanges } from './push-changes';
|
||||
import { updatePaymentMethods } from './update-payment-methods';
|
||||
import {
|
||||
updatePaymentMethods,
|
||||
debouncedUpdatePaymentMethods,
|
||||
} from './update-payment-methods';
|
||||
|
||||
const registeredStore = registerStore< State >( STORE_KEY, {
|
||||
reducer,
|
||||
|
@ -28,7 +31,20 @@ const registeredStore = registerStore< State >( STORE_KEY, {
|
|||
} );
|
||||
|
||||
registeredStore.subscribe( pushChanges );
|
||||
registeredStore.subscribe( updatePaymentMethods );
|
||||
|
||||
// First we will run the updatePaymentMethods function without any debounce to ensure payment methods are ready as soon
|
||||
// as the cart is loaded. After that, we will unsubscribe this function and instead run the
|
||||
// debouncedUpdatePaymentMethods function on subsequent cart updates.
|
||||
const unsubscribeUpdatePaymentMethods = registeredStore.subscribe( async () => {
|
||||
const didActionDispatch = await updatePaymentMethods();
|
||||
if ( didActionDispatch ) {
|
||||
// The function we're currently in will unsubscribe itself. When we reach this line, this will be the last time
|
||||
// this function is called.
|
||||
unsubscribeUpdatePaymentMethods();
|
||||
// Resubscribe, but with the debounced version of updatePaymentMethods.
|
||||
registeredStore.subscribe( debouncedUpdatePaymentMethods );
|
||||
}
|
||||
} );
|
||||
|
||||
export const CART_STORE_KEY = STORE_KEY;
|
||||
|
||||
|
|
|
@ -10,15 +10,26 @@ import { debounce } from 'lodash';
|
|||
import { STORE_KEY as PAYMENT_STORE_KEY } from '../payment/constants';
|
||||
import { STORE_KEY } from './constants';
|
||||
|
||||
export const updatePaymentMethods = debounce( async () => {
|
||||
/**
|
||||
* This function is used to update payment methods when the cart changes, or on first load.
|
||||
*
|
||||
* @return {boolean} True if the __internalUpdateAvailablePaymentMethods action was dispatched, false if not.
|
||||
*/
|
||||
export const updatePaymentMethods = async () => {
|
||||
const isInitialized =
|
||||
select( STORE_KEY ).hasFinishedResolution( 'getCartData' );
|
||||
|
||||
if ( ! isInitialized ) {
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
|
||||
await dispatch(
|
||||
PAYMENT_STORE_KEY
|
||||
).__internalUpdateAvailablePaymentMethods();
|
||||
}, 1000 );
|
||||
return true;
|
||||
};
|
||||
|
||||
// We debounce this because it's possible for multiple cart updates to happen in quick succession, we don't want to run
|
||||
// each payment method's canMakePayment function on every single change.
|
||||
export const debouncedUpdatePaymentMethods = debounce(
|
||||
updatePaymentMethods,
|
||||
1000
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue