@shopgate/engage
Version:
Shopgate's ENGAGE library.
60 lines (59 loc) • 1.94 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { SurroundPortals } from '@shopgate/engage/components';
import { CART_PAYMENT_BAR_TOTALS_GRAND_TOTAL } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
import { CartContext } from "../../cart.context";
import { spacer } from "./PaymentBarContent.style";
import connect from "./PaymentBarGrandTotal.connector";
/**
* The GrandTotal component.
* @param {Object} props The component props.
* @param {number} props.amount The grand total amount.
* @param {string} [props.label] The label for the grand total.
* @param {boolean} [props.showSeparator=true] Whether to show a separator.
* @param {string|null} [props.className=null] The class name for styling.
* @returns {JSX.Element|null} The rendered component or null.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PaymentBarGrandTotal = ({
amount,
label,
showSeparator,
className
}) => {
const {
config: {
hideTotal
},
isLoading,
currency,
hasPromotionCoupons
} = React.useContext(CartContext);
if (hideTotal) {
return null;
}
return /*#__PURE__*/_jsx(SurroundPortals, {
portalName: CART_PAYMENT_BAR_TOTALS_GRAND_TOTAL,
children: /*#__PURE__*/_jsxs(CartTotalLine, {
isDisabled: isLoading,
type: "grandTotal",
className: className,
children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
label: label,
showSeparator: showSeparator
}), /*#__PURE__*/_jsx(CartTotalLine.Amount, {
amount: amount,
currency: currency
}), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
className: spacer
})]
})
});
};
PaymentBarGrandTotal.defaultProps = {
className: null,
showSeparator: true,
label: 'cart.total'
};
export default connect(PaymentBarGrandTotal);