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

Shopgate's ENGAGE library.

import React, { Fragment, useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { css } from 'glamor';
import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
import { errorBehavior } from '@shopgate/engage/core';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import { CartContext } from "../../cart.context";
import { spacer } from "./PaymentBarContent.style";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
  line: css({
    justifyContent: 'start',
    [responsiveMediaQuery('<=xs', {
      appAlways: true
    })]: {
      fontSize: '0.75rem',
      paddingBottom: 3
    }
  }).toString(),
  message: css({
    order: 2
  }).toString(),
  error: css({
    color: 'var(--color-state-alert)'
  }).toString(),
  warning: css({
    color: 'var(--color-state-warning)'
  }).toString(),
  info: css({
    color: 'var(--color-state-ok)'
  }).toString(),
  loading: css({
    opacity: 0.4
  }).toString()
};

/**
 * @param {Object} props The components props
 * @returns {JSX}
 */
const PaymentBarPromotionCouponMessages = ({
  messages
}) => {
  const {
    isLoading
  } = useContext(CartContext);
  if (!messages.length) {
    return null;
  }
  return messages.map(({
    message,
    additionalParams,
    type
  }) => /*#__PURE__*/_jsx(CartTotalLine, {
    className: styles.line,
    children: /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(CartTotalLine.Spacer, {
        className: spacer
      }), /*#__PURE__*/_jsx("div", {
        className: classNames(styles.message, {
          [styles.loading]: isLoading,
          [styles.error]: type === 'error',
          [styles.warning]: type === 'warning',
          [styles.info]: type === 'info'
        }),
        children: errorBehavior.getErrorMessage(message, additionalParams)
      })]
    })
  }, message));
};
PaymentBarPromotionCouponMessages.defaultProps = {
  messages: []
};
export default PaymentBarPromotionCouponMessages;