@automattic/mini-cart
Version:
A simple wp.com shopping-cart interface.
124 lines • 6.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MiniCart = MiniCart;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const composite_checkout_1 = require("@automattic/composite-checkout");
const number_formatters_1 = require("@automattic/number-formatters");
const shopping_cart_1 = require("@automattic/shopping-cart");
const wpcom_checkout_1 = require("@automattic/wpcom-checkout");
const styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
const i18n_1 = require("@wordpress/i18n");
const react_i18n_1 = require("@wordpress/react-i18n");
const mini_cart_line_items_1 = require("./mini-cart-line-items");
const MiniCartWrapper = styled_1.default.div `
box-sizing: border-box;
padding: 16px;
max-width: 480px;
text-align: left;
font-size: 1rem;
`;
const MiniCartHeader = styled_1.default.div `
text-align: left;
display: grid;
grid-template-columns: 2fr 1fr;
`;
const MiniCartTitle = styled_1.default.h2 `
font-size: 1.5rem;
line-height: 1em;
font-family: 'Recoleta';
margin-bottom: 5px;
grid-column: 1/2;
grid-row: 1;
`;
const MiniCartCloseButton = styled_1.default.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_1.default.span `
color: var( --color-neutral-50 );
font-size: 0.875rem;
grid-column: 1/3;
grid-row: 2;
`;
const MiniCartFooter = styled_1.default.div `
margin-top: 12px;
`;
const MiniCartTotalWrapper = styled_1.default.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_1.default.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_1.default.div `
font-size: 12px;
text-wrap: pretty;
line-height: 1em;
`;
function TaxNotCalculatedLineItem() {
const { __ } = (0, react_i18n_1.useI18n)();
return ((0, jsx_runtime_1.jsx)(TaxCalculationLineItemWrapper, { children: __('Tax: to be calculated') }));
}
function TaxAddedLineItem() {
const { __ } = (0, react_i18n_1.useI18n)();
return ((0, jsx_runtime_1.jsx)(TaxCalculationLineItemWrapper, { children: __('Includes applicable taxes') }));
}
function MiniCartTotal({ responseCart }) {
const { _x } = (0, react_i18n_1.useI18n)();
return ((0, jsx_runtime_1.jsxs)(MiniCartTotalWrapper, { className: "mini-cart__total", children: [(0, jsx_runtime_1.jsx)("span", { children: _x('Total', 'The label of the total line item in checkout') }), (0, jsx_runtime_1.jsx)("span", { children: (0, number_formatters_1.formatCurrency)(responseCart.total_cost_integer, responseCart.currency, {
isSmallestUnit: true,
stripZeros: true,
}) })] }));
}
function CloseIcon() {
return (0, jsx_runtime_1.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 = {};
function MiniCart({ selectedSiteSlug, cartKey, goToCheckout, closeCart, onRemoveProduct, onRemoveCoupon, checkoutLabel, emptyCart, }) {
const { responseCart, removeCoupon, removeProductFromCart, addProductsToCart, isLoading, isPendingUpdate, } = (0, shopping_cart_1.useShoppingCart)(cartKey ? cartKey : undefined);
const { __ } = (0, react_i18n_1.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 ((0, jsx_runtime_1.jsx)(composite_checkout_1.CheckoutProvider, { paymentMethods: emptyPaymentMethods, paymentProcessors: emptyPaymentProcessors, children: (0, jsx_runtime_1.jsx)(wpcom_checkout_1.RestorableProductsProvider, { children: (0, jsx_runtime_1.jsxs)(MiniCartWrapper, { className: "mini-cart", children: [(0, jsx_runtime_1.jsxs)(MiniCartHeader, { className: "mini-cart__header", children: [(0, jsx_runtime_1.jsx)(MiniCartTitle, { className: "mini-cart__title", children: __('Cart') }), (0, jsx_runtime_1.jsxs)(MiniCartCloseButton, { className: "mini-cart__close-button", onClick: closeCart, children: [(0, jsx_runtime_1.jsx)(CloseIcon, {}), (0, jsx_runtime_1.jsx)(HiddenText, { children: __('Close cart') })] }), (0, jsx_runtime_1.jsx)(MiniCartSiteTitle, { className: "mini-cart__site-title", children: (0, i18n_1.sprintf)(
/* translators: %s is the site slug */
__('For %s'), selectedSiteSlug) })] }), (0, jsx_runtime_1.jsx)(mini_cart_line_items_1.MiniCartLineItems, { removeCoupon: handleRemoveCoupon, removeProductFromCart: handleRemoveProduct, addProductsToCart: addProductsToCart, responseCart: responseCart }), shouldRenderEmptyCart && emptyCart, !shouldRenderEmptyCart && (0, jsx_runtime_1.jsx)(MiniCartTotal, { responseCart: responseCart }), !shouldRenderEmptyCart && (0, wpcom_checkout_1.isBillingInfoEmpty)(responseCart) && ((0, jsx_runtime_1.jsx)(TaxNotCalculatedLineItem, {})), !shouldRenderEmptyCart && !(0, wpcom_checkout_1.isBillingInfoEmpty)(responseCart) && ((0, jsx_runtime_1.jsx)(TaxAddedLineItem, {})), (0, jsx_runtime_1.jsx)(MiniCartFooter, { className: "mini-cart__footer", children: !shouldRenderEmptyCart && ((0, jsx_runtime_1.jsx)(composite_checkout_1.Button, { className: "mini-cart__checkout", buttonType: "primary", fullWidth: true, disabled: isDisabled, isBusy: isDisabled, onClick: () => goToCheckout(selectedSiteSlug), children: checkoutLabel || __('Checkout') })) })] }) }) }));
}
//# sourceMappingURL=mini-cart.js.map