@shopgate/engage/cart/components/CartItem/CartItemCoupon.js

Shopgate's ENGAGE library.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import Transition from 'react-transition-group/Transition';
import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
import { CART_PATH } from '@shopgate/pwa-common-commerce/cart/constants';
import { CART_ITEM_TYPE_COUPON } from '@shopgate/pwa-common-commerce/cart';
import { getPageSettings } from '@shopgate/engage/core/config';
import { MessageBar, CardList } from '@shopgate/engage/components';
import { container, cartItemTransitionDuration as duration, getCartItemTransitionStyle as getTransitionStyle } from "./CartItemCoupon.style";
import { messagesContainerCard, messagesCard, messagesContainerLine, messagesLine } from "./CartItem.style";
import connect from "./CartItemCoupon.connector";
import { CartItemCouponLayout } from "./CartItemCouponLayout";

/**
 * @typedef {import('./CartItemCoupon.types').OwnProps} OwnProps
 * @typedef {import('./CartItemCoupon.types').StateProps} StateProps
 * @typedef {import('./CartItemCoupon.types').DispatchProps} DispatchProps
 * @typedef {OwnProps & StateProps & DispatchProps} Props
 */

/**
 * @typedef {Object} State
 * @property {boolean} visible Whether the coupon is visible.
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const messageStyles = {
  card: {
    container: messagesContainerCard,
    message: messagesCard
  },
  line: {
    container: messagesContainerLine,
    message: messagesLine
  }
};

/**
 * The Coupon component.
 */
let CartItemCoupon = /*#__PURE__*/function (_React$PureComponent) {
  /**
   * @param {Props} props The component props
   */
  function CartItemCoupon(props) {
    var _this;
    _this = _React$PureComponent.call(this, props) || this;
    /**
     * @type {State}
     */
    /**
     * Updates transition height on mount/update.
     */
    _this.updateHeight = () => {
      if (_this.transitionElement && _this.cardElement) {
        _this.transitionElement.style.height = `${getAbsoluteHeight(_this.cardElement)}px`;
      }
    };
    _this.transitionElement = null;
    _this.cardElement = null;
    /**
     * Hides the coupon via transition.
     * @returns {Function}
     */
    _this.transitionOut = () => _this.setState({
      visible: false
    });
    /**
     * Removes the coupon from the cart.
     */
    _this.deleteCoupon = () => {
      const {
        deleteCoupon,
        id
      } = _this.props;
      deleteCoupon(id);
    };
    _this.state = {
      visible: true
    };
    return _this;
  }

  /**
   * @returns {Object}
   */
  _inheritsLoose(CartItemCoupon, _React$PureComponent);
  var _proto = CartItemCoupon.prototype;
  _proto.getChildContext = function getChildContext() {
    const {
      id,
      editable
    } = this.props;
    return {
      cartItemId: id,
      type: CART_ITEM_TYPE_COUPON,
      editable
    };
  }

  /**
   * Updates transition height on mount/update.
   */;
  _proto.componentDidMount = function componentDidMount() {
    this.updateHeight();
  }

  /**
   * We need to set the element height explicitly so that we can animate it later.
   */;
  _proto.componentDidUpdate = function componentDidUpdate() {
    this.updateHeight();
  };
  /**
   * @returns {JSX.Element}
   */
  _proto.render = function render() {
    const {
      coupon,
      currency,
      messages
    } = this.props;
    const {
      visible
    } = this.state;
    const {
      cartItemsDisplay = 'line'
    } = getPageSettings(CART_PATH);
    const messageStyle = messageStyles[cartItemsDisplay];
    return /*#__PURE__*/_jsx(Transition, {
      in: visible,
      timeout: duration,
      onExited: this.deleteCoupon,
      children: state => /*#__PURE__*/_jsx("div", {
        ref: element => {
          this.transitionElement = element;
        },
        style: getTransitionStyle(state),
        children: /*#__PURE__*/_jsx("div", {
          className: container,
          ref: el => {
            this.cardElement = el;
          },
          children: /*#__PURE__*/_jsxs(CardList.Item, {
            children: [!!messages.length && /*#__PURE__*/_jsx(MessageBar, {
              messages: messages,
              classNames: messageStyle
            }), /*#__PURE__*/_jsx(CartItemCouponLayout, {
              handleDelete: this.transitionOut,
              coupon: coupon,
              currency: currency
            })]
          })
        })
      }, this.props.id)
    });
  };
  return CartItemCoupon;
}(React.PureComponent);
CartItemCoupon.childContextTypes = {
  cartItemId: PropTypes.string,
  type: PropTypes.string,
  editable: PropTypes.bool
};
CartItemCoupon.defaultProps = {
  editable: true,
  deleteCoupon: () => {}
};
export default connect(CartItemCoupon);