@automattic/mini-cart
Version:
A simple wp.com shopping-cart interface.
120 lines • 5.53 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CheckoutProvider, Button } from '@automattic/composite-checkout';
import { formatCurrency } from '@automattic/number-formatters';
import { useShoppingCart } from '@automattic/shopping-cart';
import { isBillingInfoEmpty, RestorableProductsProvider } from '@automattic/wpcom-checkout';
import styled from '@emotion/styled';
import { sprintf } from '@wordpress/i18n';
import { useI18n } from '@wordpress/react-i18n';
import { MiniCartLineItems } from './mini-cart-line-items';
const MiniCartWrapper = styled.div `
box-sizing: border-box;
padding: 16px;
max-width: 480px;
text-align: left;
font-size: 1rem;
`;
const MiniCartHeader = styled.div `
text-align: left;
display: grid;
grid-template-columns: 2fr 1fr;
`;
const MiniCartTitle = styled.h2 `
font-size: 1.5rem;
line-height: 1em;
font-family: 'Recoleta';
margin-bottom: 5px;
grid-column: 1/2;
grid-row: 1;
`;
const MiniCartCloseButton = styled.button `
color: var( --color-text-subtle );
cursor: pointer;
grid-column: 2/3;
grid-row: 1;
justify-self: end;
font-size: 1.4em;
&:hover,
&:focus {
color: var( --color-neutral-70 );
}
`;
const MiniCartSiteTitle = styled.span `
color: var( --color-neutral-50 );
font-size: 0.875rem;
grid-column: 1/3;
grid-row: 2;
`;
const MiniCartFooter = styled.div `
margin-top: 12px;
`;
const MiniCartTotalWrapper = styled.div `
font-weight: 600;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 4px;
`;
/*
* Utility class to hide content visually while keeping it screen reader-accessible.
* Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
*/
const HiddenText = styled.span `
clip: rect( 0 0 0 0 );
clip-path: inset( 100% );
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
`;
const TaxCalculationLineItemWrapper = styled.div `
font-size: 12px;
text-wrap: pretty;
line-height: 1em;
`;
function TaxNotCalculatedLineItem() {
const { __ } = useI18n();
return (_jsx(TaxCalculationLineItemWrapper, { children: __('Tax: to be calculated') }));
}
function TaxAddedLineItem() {
const { __ } = useI18n();
return (_jsx(TaxCalculationLineItemWrapper, { children: __('Includes applicable taxes') }));
}
function MiniCartTotal({ responseCart }) {
const { _x } = useI18n();
return (_jsxs(MiniCartTotalWrapper, { className: "mini-cart__total", children: [_jsx("span", { children: _x('Total', 'The label of the total line item in checkout') }), _jsx("span", { children: formatCurrency(responseCart.total_cost_integer, responseCart.currency, {
isSmallestUnit: true,
stripZeros: true,
}) })] }));
}
function CloseIcon() {
return _jsx("span", { children: "\u2715" });
}
// The CheckoutProvider normally is used to provide a payment flow, but in this
// case we just want its UI features so we set its payment methods to an empty
// array. This could be improved in the future by using just the required
// features of the provider.
const emptyPaymentMethods = [];
const emptyPaymentProcessors = {};
export function MiniCart({ selectedSiteSlug, cartKey, goToCheckout, closeCart, onRemoveProduct, onRemoveCoupon, checkoutLabel, emptyCart, }) {
const { responseCart, removeCoupon, removeProductFromCart, addProductsToCart, isLoading, isPendingUpdate, } = useShoppingCart(cartKey ? cartKey : undefined);
const { __ } = useI18n();
const shouldRenderEmptyCart = emptyCart && responseCart.products.length <= 0;
const isDisabled = isLoading || isPendingUpdate;
const handleRemoveCoupon = () => {
onRemoveCoupon?.();
return removeCoupon();
};
const handleRemoveProduct = (uuid) => {
onRemoveProduct?.(uuid);
return removeProductFromCart(uuid);
};
if (!cartKey) {
return null;
}
return (_jsx(CheckoutProvider, { paymentMethods: emptyPaymentMethods, paymentProcessors: emptyPaymentProcessors, children: _jsx(RestorableProductsProvider, { children: _jsxs(MiniCartWrapper, { className: "mini-cart", children: [_jsxs(MiniCartHeader, { className: "mini-cart__header", children: [_jsx(MiniCartTitle, { className: "mini-cart__title", children: __('Cart') }), _jsxs(MiniCartCloseButton, { className: "mini-cart__close-button", onClick: closeCart, children: [_jsx(CloseIcon, {}), _jsx(HiddenText, { children: __('Close cart') })] }), _jsx(MiniCartSiteTitle, { className: "mini-cart__site-title", children: sprintf(
/* translators: %s is the site slug */
__('For %s'), selectedSiteSlug) })] }), _jsx(MiniCartLineItems, { removeCoupon: handleRemoveCoupon, removeProductFromCart: handleRemoveProduct, addProductsToCart: addProductsToCart, responseCart: responseCart }), shouldRenderEmptyCart && emptyCart, !shouldRenderEmptyCart && _jsx(MiniCartTotal, { responseCart: responseCart }), !shouldRenderEmptyCart && isBillingInfoEmpty(responseCart) && (_jsx(TaxNotCalculatedLineItem, {})), !shouldRenderEmptyCart && !isBillingInfoEmpty(responseCart) && (_jsx(TaxAddedLineItem, {})), _jsx(MiniCartFooter, { className: "mini-cart__footer", children: !shouldRenderEmptyCart && (_jsx(Button, { className: "mini-cart__checkout", buttonType: "primary", fullWidth: true, disabled: isDisabled, isBusy: isDisabled, onClick: () => goToCheckout(selectedSiteSlug), children: checkoutLabel || __('Checkout') })) })] }) }) }));
}
//# sourceMappingURL=mini-cart.js.map