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

100 lines
1.8 KiB
JavaScript

/**
* 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';
const templateItemBrowseStore = SHOP_URL
? [
'core/paragraph',
{
align: 'center',
content: sprintf(
/* translators: %s is the link to the store product directory. */
__(
'<a href="%s">Browse store</a>.',
'woo-gutenberg-products-block'
),
SHOP_URL
),
dropCap: false,
},
]
: null;
const templateItems = [
[
'core/image',
{
align: 'center',
url: iconDataUri,
sizeSlug: 'small',
},
],
[
'core/heading',
{
textAlign: 'center',
content: __(
'Your cart is currently empty!',
'woo-gutenberg-products-block'
),
level: 2,
className: 'wc-block-cart__empty-cart__title',
},
],
templateItemBrowseStore,
[
'core/separator',
{
className: 'is-style-dots',
},
],
[
'core/heading',
{
textAlign: 'center',
content: __( 'New in store', 'woo-gutenberg-products-block' ),
level: 2,
},
],
[
'woocommerce/product-new',
{
columns: 3,
rows: 1,
},
],
].filter( Boolean );
/**
* Component to handle edit mode for the Cart block when cart is empty.
*
* @param {Object} props Incoming props for the component.
* @param {boolean} props.hidden Whether this component is hidden or not.
*/
const EmptyCartEdit = ( { hidden = false } ) => {
return (
<div hidden={ hidden }>
<InnerBlocks
templateInsertUpdatesSelection={ false }
template={ templateItems }
/>
</div>
);
};
EmptyCartEdit.propTypes = {
hidden: PropTypes.bool,
};
export default EmptyCartEdit;