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:
Thomas Roberts 2022-11-07 10:48:27 +00:00 committed by GitHub
parent 3c6a365697
commit 3e6aaf47b3
2 changed files with 34 additions and 7 deletions

View File

@ -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;

View File

@ -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
);