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

Shopgate's ENGAGE library.

import React, { useContext, Fragment } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import classNames from 'classnames';
import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
import { i18n } from '@shopgate/engage/core';
import { CrossIcon } from '@shopgate/engage/components';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import PaymentBarPromotionCouponMessages from "./PaymentBarPromotionCouponMessages";
import { CartContext } from "../../cart.context";
import PaymentBarPromotionalText from "./PaymentBarPromotionalText";
import { spacer } from "./PaymentBarContent.style";
import connect from "./PaymentBarPromotionCoupons.connector";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
  icon: css({
    backgroundColor: '#898989',
    color: '#fff',
    borderRadius: 32,
    padding: 4,
    cursor: 'pointer',
    fontSize: '0.75rem',
    display: 'inline-flex',
    [responsiveMediaQuery('<=xs', {
      appAlways: true
    })]: {
      padding: 3
    }
  }).toString(),
  withMessages: css({
    paddingBottom: '0px !important'
  }).toString()
};

/**
 * @returns {JSX}
 */
const PaymentBarPromotionCoupons = ({
  coupons,
  className,
  deleteCoupon,
  showSeparator
}) => {
  const {
    isLoading,
    currency
  } = useContext(CartContext);
  return coupons.map(coupon => {
    const {
      code,
      promotion,
      messages
    } = coupon;
    const {
      discount = {},
      promotionalText
    } = promotion || {};
    const {
      absoluteAmount: amount
    } = discount;
    let hasError = false;
    if (Array.isArray(messages) && messages.length) {
      hasError = !!messages.find(({
        type
      }) => type === 'error');
    }
    return /*#__PURE__*/_jsxs(Fragment, {
      children: [/*#__PURE__*/_jsxs(CartTotalLine, {
        isDisabled: isLoading,
        className: classNames(className, {
          [styles.withMessages]: !!messages.length
        }),
        children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
          label: i18n.text('cart.coupon_label', {
            label: code
          }),
          showSeparator: showSeparator,
          suffix: !hasError ? /*#__PURE__*/_jsx(PaymentBarPromotionalText, {
            text: promotionalText
          }) : null
        }), amount && /*#__PURE__*/_jsx(CartTotalLine.Amount, {
          amount: amount,
          currency: currency
        }), /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
          className: spacer,
          children: /*#__PURE__*/_jsx("div", {
            className: styles.icon,
            onClick: () => {
              deleteCoupon(code);
            },
            onKeyDown: () => {
              deleteCoupon(code);
            },
            role: "button",
            tabIndex: 0,
            children: /*#__PURE__*/_jsx(CrossIcon, {})
          })
        })]
      }), /*#__PURE__*/_jsx(PaymentBarPromotionCouponMessages, {
        messages: messages
      }), hasError && /*#__PURE__*/_jsx(PaymentBarPromotionalText, {
        text: promotionalText,
        renderIcon: false
      })]
    }, `promotion-coupon-${code}-${amount}`);
  });
};
PaymentBarPromotionCoupons.defaultProps = {
  className: null,
  showSeparator: true
};
export default connect(PaymentBarPromotionCoupons);