105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { useEffect, useRef } from '@wordpress/element';
|
|
import {
|
|
usePaymentMethods,
|
|
useStoreCart,
|
|
} from '@woocommerce/base-context/hooks';
|
|
import { TotalsItem } from '@woocommerce/blocks-checkout';
|
|
import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings';
|
|
import Button from '@woocommerce/base-components/button';
|
|
import { PaymentMethodDataProvider } from '@woocommerce/base-context';
|
|
import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
|
|
import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
|
|
import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
|
|
import { getSetting } from '@woocommerce/settings';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import CartLineItemsTable from '../cart/cart-line-items-table';
|
|
|
|
const PaymentMethodIconsElement = (): JSX.Element => {
|
|
const { paymentMethods } = usePaymentMethods();
|
|
return (
|
|
<PaymentMethodIcons
|
|
icons={ getIconsFromPaymentMethods( paymentMethods ) }
|
|
/>
|
|
);
|
|
};
|
|
|
|
const MiniCartContentsBlock = (): JSX.Element => {
|
|
const { cartItems, cartIsLoading, cartTotals } = useStoreCart();
|
|
const emptyCartRef = useRef< HTMLDivElement | null >( null );
|
|
|
|
const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
|
|
? parseInt( cartTotals.total_items, 10 ) +
|
|
parseInt( cartTotals.total_items_tax, 10 )
|
|
: parseInt( cartTotals.total_items, 10 );
|
|
|
|
useEffect( () => {
|
|
// If the cart has been completely emptied, move focus to empty cart
|
|
// element.
|
|
if ( ! cartIsLoading && cartItems.length === 0 ) {
|
|
if ( emptyCartRef.current instanceof HTMLElement ) {
|
|
emptyCartRef.current.focus();
|
|
}
|
|
}
|
|
}, [ cartIsLoading, cartItems.length, emptyCartRef ] );
|
|
|
|
return ! cartIsLoading && cartItems.length === 0 ? (
|
|
<div
|
|
className="wc-block-mini-cart__empty-cart"
|
|
tabIndex={ -1 }
|
|
ref={ emptyCartRef }
|
|
>
|
|
{ __( 'Cart is empty', 'woo-gutenberg-products-block' ) }
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="wc-block-mini-cart__items">
|
|
<CartLineItemsTable
|
|
lineItems={ cartItems }
|
|
isLoading={ cartIsLoading }
|
|
/>
|
|
</div>
|
|
<div className="wc-block-mini-cart__footer">
|
|
<TotalsItem
|
|
className="wc-block-mini-cart__footer-subtotal"
|
|
currency={ getCurrencyFromPriceResponse( cartTotals ) }
|
|
label={ __( 'Subtotal', 'woo-gutenberg-products-block' ) }
|
|
value={ subTotal }
|
|
description={ __(
|
|
'Shipping, taxes, and discounts calculated at checkout.',
|
|
'woo-gutenberg-products-block'
|
|
) }
|
|
/>
|
|
<div className="wc-block-mini-cart__footer-actions">
|
|
<Button
|
|
className="wc-block-mini-cart__footer-cart"
|
|
href={ CART_URL }
|
|
>
|
|
{ __( 'View my cart', 'woo-gutenberg-products-block' ) }
|
|
</Button>
|
|
<Button
|
|
className="wc-block-mini-cart__footer-checkout"
|
|
href={ CHECKOUT_URL }
|
|
>
|
|
{ __(
|
|
'Go to checkout',
|
|
'woo-gutenberg-products-block'
|
|
) }
|
|
</Button>
|
|
</div>
|
|
<PaymentMethodDataProvider>
|
|
<PaymentMethodIconsElement />
|
|
</PaymentMethodDataProvider>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MiniCartContentsBlock;
|