/** * External dependencies */ import { withStoreCartApiHydration, withRestApiHydration, } from '@woocommerce/block-hocs'; import { __ } from '@wordpress/i18n'; import { StoreNoticesProvider } from '@woocommerce/base-context'; import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings'; import { createInterpolateElement } from 'wordpress-element'; import { renderFrontend, getValidBlockAttributes, } from '@woocommerce/base-utils'; /** * Internal dependencies */ import Block from './block.js'; import blockAttributes from './attributes'; const reloadPage = () => void window.location.reload( true ); /** * Wrapper component to supply API data and show empty cart view as needed. * * @param {*} props */ const CartFrontend = ( props ) => { return ( <StoreNoticesProvider context="wc/cart"> <Block { ...props } /> </StoreNoticesProvider> ); }; const getProps = ( el ) => { return { emptyCart: el.innerHTML, attributes: getValidBlockAttributes( blockAttributes, el.dataset ), }; }; const getErrorBoundaryProps = () => { return { header: __( 'Something went wrong…', 'woocommerce' ), text: createInterpolateElement( __( 'The cart has encountered an unexpected error. <button>Try reloading the page</button>. If the error persists, please get in touch with us so we can assist.', 'woocommerce' ), { button: ( <button className="wc-block-link-button" onClick={ reloadPage } /> ), } ), showErrorMessage: CURRENT_USER_IS_ADMIN, }; }; renderFrontend( { selector: '.wp-block-woocommerce-cart', Block: withStoreCartApiHydration( withRestApiHydration( CartFrontend ) ), getProps, getErrorBoundaryProps, } );