@shopgate/engage/cart/components/PaymentBar/PaymentBarAppliedPromotions.js

Shopgate's ENGAGE library.

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
import { i18n } from '@shopgate/engage/core';
import { CartContext } from "../../cart.context";
import PaymentBarPromotionalText from "./PaymentBarPromotionalText";
import { spacer } from "./PaymentBarContent.style";
import connect from "./PaymentBarAppliedPromotions.connector";

/**
 * @returns {JSX}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PaymentBarAppliedPromotions = ({
  promotions,
  className,
  showSeparator
}) => {
  const {
    isLoading,
    currency,
    hasPromotionCoupons
  } = useContext(CartContext);
  return promotions.map(promotion => {
    const {
      discount,
      code,
      name,
      promotionalText
    } = promotion;
    const {
      absoluteAmount: amount
    } = discount;
    return /*#__PURE__*/_jsxs(CartTotalLine, {
      isDisabled: isLoading,
      className: className,
      children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
        label: i18n.text('cart.promotion_label', {
          label: name
        }),
        showSeparator: showSeparator,
        suffix: /*#__PURE__*/_jsx(PaymentBarPromotionalText, {
          text: promotionalText
        })
      }), /*#__PURE__*/_jsx(CartTotalLine.Amount, {
        amount: amount,
        currency: currency
      }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
        className: spacer
      })]
    }, `promotion-${code}-${amount}`);
  });
};
PaymentBarAppliedPromotions.defaultProps = {
  className: null,
  showSeparator: true
};
export default connect(PaymentBarAppliedPromotions);