2019-12-03 13:57:56 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { withRestApiHydration } from '@woocommerce/block-hocs';
|
2020-02-18 23:06:37 +00:00
|
|
|
import { useStoreCart } from '@woocommerce/base-hooks';
|
|
|
|
import { RawHTML } from '@wordpress/element';
|
2019-12-03 13:57:56 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
2019-12-10 15:41:57 +00:00
|
|
|
import FullCart from './full-cart';
|
2019-12-03 13:57:56 +00:00
|
|
|
import renderFrontend from '../../../utils/render-frontend.js';
|
|
|
|
|
2020-02-18 23:06:37 +00:00
|
|
|
/**
|
|
|
|
* Wrapper component to supply API data and show empty cart view as needed.
|
|
|
|
*/
|
|
|
|
const CartFrontend = ( { emptyCart } ) => {
|
|
|
|
const { cartData, isLoading } = useStoreCart();
|
|
|
|
|
|
|
|
if ( isLoading ) {
|
|
|
|
return null;
|
|
|
|
}
|
2019-12-10 15:41:57 +00:00
|
|
|
|
2020-02-18 23:06:37 +00:00
|
|
|
const cartItems = cartData.items;
|
|
|
|
const isCartEmpty = cartItems.length <= 0;
|
2019-12-03 13:57:56 +00:00
|
|
|
|
2020-02-18 23:06:37 +00:00
|
|
|
return isCartEmpty ? (
|
|
|
|
<RawHTML>{ emptyCart }</RawHTML>
|
|
|
|
) : (
|
|
|
|
<FullCart cartItems={ cartItems } cartTotals={ cartData.totals } />
|
|
|
|
);
|
|
|
|
};
|
2019-12-10 15:41:57 +00:00
|
|
|
|
2020-02-18 23:06:37 +00:00
|
|
|
const getProps = ( el ) => ( {
|
|
|
|
emptyCart: el.innerHTML,
|
|
|
|
} );
|
|
|
|
|
|
|
|
renderFrontend(
|
|
|
|
'.wp-block-woocommerce-cart',
|
|
|
|
withRestApiHydration( CartFrontend ),
|
|
|
|
getProps
|
|
|
|
);
|