woocommerce/plugins/woocommerce-blocks/assets/js/data/cart/index.ts

92 lines
3.1 KiB
TypeScript
Raw Normal View History

/**
* External dependencies
*/
import { registerStore } from '@wordpress/data';
import { controls as dataControls } from '@wordpress/data-controls';
/**
* Internal dependencies
*/
import { STORE_KEY } from './constants';
import * as selectors from './selectors';
import * as actions from './actions';
import * as resolvers from './resolvers';
import reducer, { State } from './reducers';
import type { SelectFromMap, DispatchFromMap } from '../mapped-types';
import { pushChanges, flushChanges } from './push-changes';
import {
updatePaymentMethods,
debouncedUpdatePaymentMethods,
} from './update-payment-methods';
Add notice on quantity change and update `wc/store/cart` to use thunks (https://github.com/woocommerce/woocommerce-blocks/pull/7938) * Add receiveCart thunk * Add mapCartResponseToCart helper * Add getItemsPendingQuantityUpdate selector * Update cart resolvers to be thunks * Remove RECEIVE_CART action and replace with SET_CART_DATA receiveCart will turn into a thunk. * Add notifyQuantityChanges functions * Remove receiveCart from action type definition, replace with setCartData * Move apiFetchWithHeaders out of controls This will just be a normal function since we'll be updating actions to thunks which will use this instead of a control. * Include thunks in actions file * Update receiveCart action to setCartData * Update applyCoupon action to a thunk * Update useStoreCartCoupons to get action from correct place * Update StoreCartCoupon types * Add types for Thunk and ThunkReturnType in mapped-types * Change applyCoupon to a thunk * Get applyCoupon, removeCoupon, receiveApplyingCoupon from useDispatch This is to separate the concerns of actions vs. selectors. Previously the actions were fetched during useSelect which is not a pattern we use anywhere else in the codebase. Since we updated the MapToDispatch type, we can now get correctly typed thunks from the data store. * Improve apiFetchWithHeaders typings * Convert removeCoupon from generator to thunk * Add applyCoupon and removeCoupon to CartAction type * Remove unused old-style type-def * Add receiveApplyingCoupon & receiveRemovingCoupon to StoreCartCoupon * Correct issues with StoreCartCoupon type These were not intended to reflect the actions in data store, rather the functions offered by the useStoreCartCoupons hook. * Update applyExtensionCartUpdate to a thunk * Update addItemToCart to thunk * Add ResolveSelectFromMap type that works with thunks * Add CartDispatchFromMap and CartResolveSelectFromMap types We can add this to all data stores to get them working with thunks properly. * Add docs and update generic name in ResolveSelectFromMap * Add correct types for thunk resolvers in cart data store * Update removeItemFromCart to thunk * Update apiFetchWithHeaders to use generic * Update selectShippingRate to thunk * Update resolver tests to test correct thunk functionality * Update updateCustomerData to thunk * Update reducer test to reflect new action name * Update comments on CartDispatchFromMap and CartResolveSelectFromMap * Add quantity_limits to preview cart * Make notices speak when shown * Remove copilot comment * Add isWithinQuantityLimits function This is because we shouldn't show a notice if the quantity limits change, but the item's quantity is still OK. * Add tests for notifyQuantityChanges * Show notice when multiple_of is updated * Update test to test for multiple_of changes * Remove empty export * Remove controls from cart data store Not needed anymore since the exported value from the shared-controls file was empty. * Export a control and async function for apiFetchWithHeaders This is required because async functions cannot be called from sync generators. * Use control version of apiFetchWithHeaders in the collections store * Improve comments and remove incorrect TypeScript * Update assets/js/data/cart/actions.ts Co-authored-by: Mike Jolley <mike.jolley@me.com> * Update ResolveSelectFromMap to include selectors too * Update TS in actions * Use finally to remove duplicate code * remove item pending delete/qty update after action runs in all cases This will also reset the state when the request to remove it/change quantity errors * Remove unnecessary type from param. Not needed because we have TS now. The description can stay though, it is useful. * Update snackbar wording to use active voice * Remove old WP version check * Set max quantity to high number instead of null This would only happen in a niche case, and would require several TS changes to fix, so it's better to set it as a number here. 9999 should be high enough, and is the default quantity limit set below in get_product_quantity_limit * Set code on woocommerce_rest_cart_invalid_key to 409 This is so the cart is returned in the response, so the client can update. * Fix typo in comment and add CartSelectFromMap * Remove unnecessary docblock * Add getItemsPendingDelete selector This is needed so we can show a notice for items that are unexpectedly removed from the cart. We need to know which ones are pending delete so we can skip showing the notice for them. * Add type for notifyQuantityChanges args and change args to object * Add notifyIfRemoved function This will check items that have been removed and show a notice for them. * Fix TS in receiveCart & pass itemsPendingDelete to notifyQuantiyChanges * Update wording on removal notice * Update types for notifyQuantityChanges args * Update tests to reflect new wording and args being an object * Check item is truth before running comparison of keys * Update tests for unexpectedly and expectedly removed items * Ignore print_r to satisfy phpcs * Update PHP tests to reflect correct response code when deleting items * Remove unnecessary controls and dispatch events directly from thunk Co-authored-by: Mike Jolley <mike.jolley@me.com>
2022-12-16 16:06:37 +00:00
import { ResolveSelectFromMap } from '../mapped-types';
// Please update from deprecated "registerStore" to "createReduxStore" when this PR is merged:
// https://github.com/WordPress/gutenberg/pull/45513
const registeredStore = registerStore< State >( STORE_KEY, {
reducer,
actions,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Add notice on quantity change and update `wc/store/cart` to use thunks (https://github.com/woocommerce/woocommerce-blocks/pull/7938) * Add receiveCart thunk * Add mapCartResponseToCart helper * Add getItemsPendingQuantityUpdate selector * Update cart resolvers to be thunks * Remove RECEIVE_CART action and replace with SET_CART_DATA receiveCart will turn into a thunk. * Add notifyQuantityChanges functions * Remove receiveCart from action type definition, replace with setCartData * Move apiFetchWithHeaders out of controls This will just be a normal function since we'll be updating actions to thunks which will use this instead of a control. * Include thunks in actions file * Update receiveCart action to setCartData * Update applyCoupon action to a thunk * Update useStoreCartCoupons to get action from correct place * Update StoreCartCoupon types * Add types for Thunk and ThunkReturnType in mapped-types * Change applyCoupon to a thunk * Get applyCoupon, removeCoupon, receiveApplyingCoupon from useDispatch This is to separate the concerns of actions vs. selectors. Previously the actions were fetched during useSelect which is not a pattern we use anywhere else in the codebase. Since we updated the MapToDispatch type, we can now get correctly typed thunks from the data store. * Improve apiFetchWithHeaders typings * Convert removeCoupon from generator to thunk * Add applyCoupon and removeCoupon to CartAction type * Remove unused old-style type-def * Add receiveApplyingCoupon & receiveRemovingCoupon to StoreCartCoupon * Correct issues with StoreCartCoupon type These were not intended to reflect the actions in data store, rather the functions offered by the useStoreCartCoupons hook. * Update applyExtensionCartUpdate to a thunk * Update addItemToCart to thunk * Add ResolveSelectFromMap type that works with thunks * Add CartDispatchFromMap and CartResolveSelectFromMap types We can add this to all data stores to get them working with thunks properly. * Add docs and update generic name in ResolveSelectFromMap * Add correct types for thunk resolvers in cart data store * Update removeItemFromCart to thunk * Update apiFetchWithHeaders to use generic * Update selectShippingRate to thunk * Update resolver tests to test correct thunk functionality * Update updateCustomerData to thunk * Update reducer test to reflect new action name * Update comments on CartDispatchFromMap and CartResolveSelectFromMap * Add quantity_limits to preview cart * Make notices speak when shown * Remove copilot comment * Add isWithinQuantityLimits function This is because we shouldn't show a notice if the quantity limits change, but the item's quantity is still OK. * Add tests for notifyQuantityChanges * Show notice when multiple_of is updated * Update test to test for multiple_of changes * Remove empty export * Remove controls from cart data store Not needed anymore since the exported value from the shared-controls file was empty. * Export a control and async function for apiFetchWithHeaders This is required because async functions cannot be called from sync generators. * Use control version of apiFetchWithHeaders in the collections store * Improve comments and remove incorrect TypeScript * Update assets/js/data/cart/actions.ts Co-authored-by: Mike Jolley <mike.jolley@me.com> * Update ResolveSelectFromMap to include selectors too * Update TS in actions * Use finally to remove duplicate code * remove item pending delete/qty update after action runs in all cases This will also reset the state when the request to remove it/change quantity errors * Remove unnecessary type from param. Not needed because we have TS now. The description can stay though, it is useful. * Update snackbar wording to use active voice * Remove old WP version check * Set max quantity to high number instead of null This would only happen in a niche case, and would require several TS changes to fix, so it's better to set it as a number here. 9999 should be high enough, and is the default quantity limit set below in get_product_quantity_limit * Set code on woocommerce_rest_cart_invalid_key to 409 This is so the cart is returned in the response, so the client can update. * Fix typo in comment and add CartSelectFromMap * Remove unnecessary docblock * Add getItemsPendingDelete selector This is needed so we can show a notice for items that are unexpectedly removed from the cart. We need to know which ones are pending delete so we can skip showing the notice for them. * Add type for notifyQuantityChanges args and change args to object * Add notifyIfRemoved function This will check items that have been removed and show a notice for them. * Fix TS in receiveCart & pass itemsPendingDelete to notifyQuantiyChanges * Update wording on removal notice * Update types for notifyQuantityChanges args * Update tests to reflect new wording and args being an object * Check item is truth before running comparison of keys * Update tests for unexpectedly and expectedly removed items * Ignore print_r to satisfy phpcs * Update PHP tests to reflect correct response code when deleting items * Remove unnecessary controls and dispatch events directly from thunk Co-authored-by: Mike Jolley <mike.jolley@me.com>
2022-12-16 16:06:37 +00:00
controls: dataControls,
selectors,
resolvers,
__experimentalUseThunks: true,
} );
registeredStore.subscribe( pushChanges );
// This will skip the debounce and immediately push changes to the server when a field is blurred.
document.body.addEventListener( 'focusout', ( event: FocusEvent ) => {
if (
event.target &&
event.target instanceof Element &&
event.target.tagName.toLowerCase() === 'input'
) {
flushChanges();
}
} );
// 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 );
}
} );
Refactor registration of payment methods and update unit tests for payment data store (https://github.com/woocommerce/woocommerce-blocks/pull/6669) * Mock getCartTotals * Change test to use data store instead of context * Move payment method context test to data store selectors * Change description of test suite * Bump commit to trigger tests * Fix path in test * update package lock * Set correct state payment method reducer tests/use correct actions * Get saved payment methods from store not context * Mock stores and update tests to allow switching payment methods * Update tests to get onSubmit from checkoutEventsContext * Remove cartTotalsLoaded check from payment method initialize check * Make PaymentMethods test wait until payments initialized * initialize payment method data store when cart is loaded * Remove unneeded actions and add initializePaymentMethodDataStore * Remove check for cart totals loaded in checkPaymentMethods * Remove updateAvilablePaymentMethods from registry * Remove unneeded mock * Remove unused import * Rename imports to fix eslint errors * Remove unused imports * Remove return false from checkPaymentMethods * Remove unnecessary setPaymentMethodsInitialized call * Add todo comment to track refactoring opportunity * Remove savedpayment methods from payment method context and rename it * Rename payment method data context to payment method events context * Add tests for setDefaultPaymentMethods * Optimize the availablePaymentMethods state data Store only the "name" attribute for now. * Get list of payment methods from the registry instead of the store We are using this hook to get some React elements in the payment method object. So, we are getting the raw data directly from the registry instead of the store. * Fix payment state not loading on the Checkout edit page * Handle checkout edit page case * Fix infinite loop error on C&C Blocks * Include @wordpress/redux-routine in transformIgnorePatterns jest config Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
2022-08-22 13:56:44 +00:00
export const CART_STORE_KEY = STORE_KEY;
declare module '@wordpress/data' {
function dispatch(
key: typeof CART_STORE_KEY
): DispatchFromMap< typeof actions >;
function select( key: typeof CART_STORE_KEY ): SelectFromMap<
typeof selectors
> & {
hasFinishedResolution: ( selector: string ) => boolean;
};
}
Add notice on quantity change and update `wc/store/cart` to use thunks (https://github.com/woocommerce/woocommerce-blocks/pull/7938) * Add receiveCart thunk * Add mapCartResponseToCart helper * Add getItemsPendingQuantityUpdate selector * Update cart resolvers to be thunks * Remove RECEIVE_CART action and replace with SET_CART_DATA receiveCart will turn into a thunk. * Add notifyQuantityChanges functions * Remove receiveCart from action type definition, replace with setCartData * Move apiFetchWithHeaders out of controls This will just be a normal function since we'll be updating actions to thunks which will use this instead of a control. * Include thunks in actions file * Update receiveCart action to setCartData * Update applyCoupon action to a thunk * Update useStoreCartCoupons to get action from correct place * Update StoreCartCoupon types * Add types for Thunk and ThunkReturnType in mapped-types * Change applyCoupon to a thunk * Get applyCoupon, removeCoupon, receiveApplyingCoupon from useDispatch This is to separate the concerns of actions vs. selectors. Previously the actions were fetched during useSelect which is not a pattern we use anywhere else in the codebase. Since we updated the MapToDispatch type, we can now get correctly typed thunks from the data store. * Improve apiFetchWithHeaders typings * Convert removeCoupon from generator to thunk * Add applyCoupon and removeCoupon to CartAction type * Remove unused old-style type-def * Add receiveApplyingCoupon & receiveRemovingCoupon to StoreCartCoupon * Correct issues with StoreCartCoupon type These were not intended to reflect the actions in data store, rather the functions offered by the useStoreCartCoupons hook. * Update applyExtensionCartUpdate to a thunk * Update addItemToCart to thunk * Add ResolveSelectFromMap type that works with thunks * Add CartDispatchFromMap and CartResolveSelectFromMap types We can add this to all data stores to get them working with thunks properly. * Add docs and update generic name in ResolveSelectFromMap * Add correct types for thunk resolvers in cart data store * Update removeItemFromCart to thunk * Update apiFetchWithHeaders to use generic * Update selectShippingRate to thunk * Update resolver tests to test correct thunk functionality * Update updateCustomerData to thunk * Update reducer test to reflect new action name * Update comments on CartDispatchFromMap and CartResolveSelectFromMap * Add quantity_limits to preview cart * Make notices speak when shown * Remove copilot comment * Add isWithinQuantityLimits function This is because we shouldn't show a notice if the quantity limits change, but the item's quantity is still OK. * Add tests for notifyQuantityChanges * Show notice when multiple_of is updated * Update test to test for multiple_of changes * Remove empty export * Remove controls from cart data store Not needed anymore since the exported value from the shared-controls file was empty. * Export a control and async function for apiFetchWithHeaders This is required because async functions cannot be called from sync generators. * Use control version of apiFetchWithHeaders in the collections store * Improve comments and remove incorrect TypeScript * Update assets/js/data/cart/actions.ts Co-authored-by: Mike Jolley <mike.jolley@me.com> * Update ResolveSelectFromMap to include selectors too * Update TS in actions * Use finally to remove duplicate code * remove item pending delete/qty update after action runs in all cases This will also reset the state when the request to remove it/change quantity errors * Remove unnecessary type from param. Not needed because we have TS now. The description can stay though, it is useful. * Update snackbar wording to use active voice * Remove old WP version check * Set max quantity to high number instead of null This would only happen in a niche case, and would require several TS changes to fix, so it's better to set it as a number here. 9999 should be high enough, and is the default quantity limit set below in get_product_quantity_limit * Set code on woocommerce_rest_cart_invalid_key to 409 This is so the cart is returned in the response, so the client can update. * Fix typo in comment and add CartSelectFromMap * Remove unnecessary docblock * Add getItemsPendingDelete selector This is needed so we can show a notice for items that are unexpectedly removed from the cart. We need to know which ones are pending delete so we can skip showing the notice for them. * Add type for notifyQuantityChanges args and change args to object * Add notifyIfRemoved function This will check items that have been removed and show a notice for them. * Fix TS in receiveCart & pass itemsPendingDelete to notifyQuantiyChanges * Update wording on removal notice * Update types for notifyQuantityChanges args * Update tests to reflect new wording and args being an object * Check item is truth before running comparison of keys * Update tests for unexpectedly and expectedly removed items * Ignore print_r to satisfy phpcs * Update PHP tests to reflect correct response code when deleting items * Remove unnecessary controls and dispatch events directly from thunk Co-authored-by: Mike Jolley <mike.jolley@me.com>
2022-12-16 16:06:37 +00:00
/**
* CartDispatchFromMap is a type that maps the cart store's action creators to the dispatch function passed to thunks.
*/
export type CartDispatchFromMap = DispatchFromMap< typeof actions >;
/**
* CartResolveSelectFromMap is a type that maps the cart store's resolvers and selectors to the resolveSelect function
* passed to thunks.
*/
export type CartResolveSelectFromMap = ResolveSelectFromMap<
typeof resolvers & typeof selectors
>;
/**
* CartSelectFromMap is a type that maps the cart store's selectors to the select function passed to thunks.
*/
export type CartSelectFromMap = SelectFromMap< typeof selectors >;