woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart/block.js

102 lines
2.8 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useStoreCart } from '@woocommerce/base-context/hooks';
import { useEffect } from '@wordpress/element';
import LoadingMask from '@woocommerce/base-components/loading-mask';
Remove `useStoreNotices` and interact directly with data store instead (https://github.com/woocommerce/woocommerce-blocks/pull/6159) * Make useStoreNotices interact directly with the store * Get/set error notices directly in store in paymentMethodDataContext * Add hasNoticesOfType util * Remove useStoreNotices and interact directly with data store * Create/remove notices directly in store * Remove tests for useStoreNotices * Add tests for notices util * Use setIsSuppressed from useStoreNoticesContext * remove useStoreNotices hook * Update context typedef to define only isSuppressed and setIsSuppressed * Remove all values from StoreNoticesContext besides setIsSuppressed * Wrap Cart and Checkout blocks in StoreNoticesProvider (for isSuppressed) * Make StoreNoticesContainer a named export This is required so we can import it from @wooommerce/base-context * Change addErrorNotice to createErrorNotice to match store action * Remove unnecessary StoreNoticeProviders and pass only context to container * Accept a context in StoreNoticesContainer * Pass relevant context to StoreNoticesContainer * Add function to remove notices by status * Prevent checkout from breaking when removing notices during processing * Prevent TS error about not included path * Add StoreNoticesContainer to single product block * Add StoreNoticesContainer to All Products Block * Ensure errors are shown when using All Products & Single Product Blocks * Add a context arg to removeNoticesByStatus * Use correct contexts for all products and single product block * Update tests to reflect new context argument * Re-add missing block file for order-summary * Remove block file for order-summary * Send context to useStoreCartCoupons to show errors correctly
2022-04-08 12:11:50 +00:00
import {
ValidationContextProvider,
StoreNoticesContainer,
SnackbarNoticesContainer,
Remove `useStoreNotices` and interact directly with data store instead (https://github.com/woocommerce/woocommerce-blocks/pull/6159) * Make useStoreNotices interact directly with the store * Get/set error notices directly in store in paymentMethodDataContext * Add hasNoticesOfType util * Remove useStoreNotices and interact directly with data store * Create/remove notices directly in store * Remove tests for useStoreNotices * Add tests for notices util * Use setIsSuppressed from useStoreNoticesContext * remove useStoreNotices hook * Update context typedef to define only isSuppressed and setIsSuppressed * Remove all values from StoreNoticesContext besides setIsSuppressed * Wrap Cart and Checkout blocks in StoreNoticesProvider (for isSuppressed) * Make StoreNoticesContainer a named export This is required so we can import it from @wooommerce/base-context * Change addErrorNotice to createErrorNotice to match store action * Remove unnecessary StoreNoticeProviders and pass only context to container * Accept a context in StoreNoticesContainer * Pass relevant context to StoreNoticesContainer * Add function to remove notices by status * Prevent checkout from breaking when removing notices during processing * Prevent TS error about not included path * Add StoreNoticesContainer to single product block * Add StoreNoticesContainer to All Products Block * Ensure errors are shown when using All Products & Single Product Blocks * Add a context arg to removeNoticesByStatus * Use correct contexts for all products and single product block * Update tests to reflect new context argument * Re-add missing block file for order-summary * Remove block file for order-summary * Send context to useStoreCartCoupons to show errors correctly
2022-04-08 12:11:50 +00:00
} from '@woocommerce/base-context';
import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
import { translateJQueryEventToNative } from '@woocommerce/base-utils';
import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top';
import {
StoreNoticesProvider,
CartProvider,
} from '@woocommerce/base-context/providers';
import { SlotFillProvider } from '@woocommerce/blocks-checkout';
/**
* Internal dependencies
*/
import { CartBlockContext } from './context';
import './style.scss';
const reloadPage = () => void window.location.reload( true );
const Cart = ( { children, attributes } ) => {
const { cartIsLoading } = useStoreCart();
const { hasDarkControls } = attributes;
return (
<LoadingMask showSpinner={ true } isLoading={ cartIsLoading }>
<CartBlockContext.Provider
value={ {
hasDarkControls,
} }
>
<ValidationContextProvider>
{ children }
</ValidationContextProvider>
</CartBlockContext.Provider>
</LoadingMask>
);
};
const ScrollOnError = ( { scrollToTop } ) => {
useEffect( () => {
// Make it so we can read jQuery events triggered by WC Core elements.
const removeJQueryAddedToCartEvent = translateJQueryEventToNative(
'added_to_cart',
'wc-blocks_added_to_cart'
);
document.body.addEventListener(
'wc-blocks_added_to_cart',
scrollToTop
);
return () => {
removeJQueryAddedToCartEvent();
document.body.removeEventListener(
'wc-blocks_added_to_cart',
scrollToTop
);
};
}, [ scrollToTop ] );
return null;
};
const Block = ( { attributes, children, scrollToTop } ) => (
<BlockErrorBoundary
header={ __( 'Something went wrong…', 'woo-gutenberg-products-block' ) }
text={ __(
'The cart has encountered an unexpected error. If the error persists, please get in touch with us for help.',
'woo-gutenberg-products-block'
) }
button={
<button className="wc-block-button" onClick={ reloadPage }>
{ __( 'Reload the page', 'woo-gutenberg-products-block' ) }
</button>
}
showErrorMessage={ CURRENT_USER_IS_ADMIN }
>
<SnackbarNoticesContainer context="wc/cart" />
<StoreNoticesProvider>
<StoreNoticesContainer context="wc/cart" />
<SlotFillProvider>
<CartProvider>
<Cart attributes={ attributes }>{ children }</Cart>
<ScrollOnError scrollToTop={ scrollToTop } />
</CartProvider>
</SlotFillProvider>
</StoreNoticesProvider>
</BlockErrorBoundary>
);
export default withScrollToTop( Block );