2021-08-25 15:42:55 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { useBlockProps } from '@wordpress/block-editor';
|
|
|
|
import type { ReactElement } from 'react';
|
2021-10-29 02:35:17 +00:00
|
|
|
import { formatPrice } from '@woocommerce/price-format';
|
2021-10-21 09:07:20 +00:00
|
|
|
import { CartCheckoutCompatibilityNotice } from '@woocommerce/editor-components/compatibility-notices';
|
2021-08-25 15:42:55 +00:00
|
|
|
|
2021-10-29 02:35:17 +00:00
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
|
|
|
import QuantityBadge from './quantity-badge';
|
|
|
|
|
2021-08-25 15:42:55 +00:00
|
|
|
const MiniCartBlock = (): ReactElement => {
|
|
|
|
const blockProps = useBlockProps( {
|
|
|
|
className: 'wc-block-mini-cart',
|
|
|
|
} );
|
|
|
|
|
|
|
|
const productCount = 0;
|
2021-10-29 02:35:17 +00:00
|
|
|
const productTotal = 0;
|
2021-08-25 15:42:55 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div { ...blockProps }>
|
|
|
|
<button className="wc-block-mini-cart__button">
|
2021-10-29 02:35:17 +00:00
|
|
|
<span className="wc-block-mini-cart__amount">
|
|
|
|
{ formatPrice( productTotal ) }
|
|
|
|
</span>
|
|
|
|
<QuantityBadge count={ productCount } />
|
2021-08-25 15:42:55 +00:00
|
|
|
</button>
|
2021-10-21 09:07:20 +00:00
|
|
|
<CartCheckoutCompatibilityNotice blockName="mini-cart" />
|
2021-08-25 15:42:55 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default MiniCartBlock;
|