@shopgate/engage
Version:
Shopgate's ENGAGE library.
61 lines (60 loc) • 1.99 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { SurroundPortals } from '@shopgate/engage/components';
import { CART_PAYMENT_BAR_TOTALS_DISCOUNTS } from '@shopgate/pwa-common-commerce/cart';
import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
import { CartContext } from "../../cart.context";
import { spacer } from "./PaymentBarContent.style";
import connect from "./PaymentBarDiscounts.connector";
/**
* The Discounts component.
* @param {Object} props The component props.
* @param {Array} [props.discounts=null] An array of discount objects.
* @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";
function PaymentBarDiscounts({
discounts,
showSeparator,
className
}) {
const {
currency,
isLoading,
hasPromotionCoupons
} = React.useContext(CartContext);
if (!discounts) {
return null;
}
return /*#__PURE__*/_jsx(SurroundPortals, {
portalName: CART_PAYMENT_BAR_TOTALS_DISCOUNTS,
children: discounts.map(({
label,
amount
}) => /*#__PURE__*/_jsxs(CartTotalLine, {
type: "discount",
isDisabled: isLoading,
className: className,
children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
label: label ? 'cart.discount_with_label' : 'cart.discount',
labelParams: {
label
},
showSeparator: showSeparator
}), /*#__PURE__*/_jsx(CartTotalLine.Amount, {
amount: -amount,
currency: currency
}), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
className: spacer
})]
}, `discount-${label}-${amount}`))
});
}
PaymentBarDiscounts.defaultProps = {
discounts: null,
className: null,
showSeparator: true
};
export default connect(PaymentBarDiscounts);