woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/empty-cart/index.js

98 lines
2.0 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { InnerBlocks } from '@wordpress/block-editor';
import { SHOP_URL } from '@woocommerce/block-settings';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import iconDataUri from './icon-data-uri.js';
import './style.scss';
/**
* Component to handle edit mode for the Cart block when cart is empty.
*/
const EmptyCart = ( { hidden } ) => {
// We need to always render `<InnerBlocks>` in the editor.
// Otherwise, if the user saves the page without having
// triggered the 'Empty Cart' view, inner blocks would not
// be saved and they wouldn't be visible in the frontend.
// We wrap them in a hidden `<div>` if the user is in
// the editor 'Full Cart' view so they are not visible.
return (
<div hidden={ hidden }>
<InnerBlocks
template={ [
[
'core/image',
{
align: 'center',
url: iconDataUri,
sizeSlug: 'small',
},
],
[
'core/heading',
{
align: 'center',
content: __(
'Your cart is currently empty!',
'woo-gutenberg-products-block'
),
level: 2,
className: 'wc-block-cart__empty-cart__title',
},
],
[
'core/paragraph',
{
align: 'center',
content: sprintf(
__(
'<a href="%s">Browse store</a>.',
'woo-gutenberg-products-block'
),
SHOP_URL
),
dropCap: false,
},
],
[
'core/separator',
{
className: 'is-style-dots',
},
],
[
'core/heading',
{
align: 'center',
content: __(
'New in store',
'woo-gutenberg-products-block'
),
level: 2,
},
],
[
'woocommerce/product-new',
{
columns: 3,
rows: 1,
},
],
] }
/>
</div>
);
};
EmptyCart.propTypes = {
hidden: PropTypes.bool,
};
export default EmptyCart;