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

Shopgate's ENGAGE library.

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { css } from 'glamor';
import Price from '@shopgate/pwa-ui-shared/Price';
import PriceStriked from '@shopgate/pwa-ui-shared/PriceStriked';
import { useCartItemProduct, useCartItem } from "./CartItem.hooks";
import { createCartItemPrices } from "../../cart.helpers";
import CartItemProductPriceListPromotion from "./CartItemProductPriceListPromotion";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
  price: css({
    fontSize: '1rem',
    fontWeight: 500,
    marginLeft: 'auto'
  }).toString(),
  priceStriked: css({
    fontSize: '.875rem',
    marginLeft: 'auto'
  }).toString(),
  priceListEntry: css({
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  }).toString()
};

/**
 * @param {Object} props The component props
 * @param {Object} [props.classes] CSS class names
 * @param {boolean} [props.isSubtotal] Whether to show subtotal prices
 * @param {boolean} [props.showLabels] Whether to show promotion labels
 * @returns {JSX.Element}
 */
const CartItemProductPriceList = ({
  classes,
  isSubtotal,
  showLabels
}) => {
  const {
    isOrderDetails,
    isCheckoutConfirmation
  } = useCartItem();
  const context = useCartItemProduct();
  const {
    currency,
    cartItem
  } = context;
  const prices = useMemo(() => {
    const result = createCartItemPrices(cartItem)[isSubtotal ? 'subtotal' : 'price'];
    // Not striked prices when the product is free or the cart is used to display an order
    if (result[result.length - 1]?.price === 0 || isOrderDetails || isCheckoutConfirmation) {
      return result.slice(-1);
    }
    return result;
  }, [cartItem, isCheckoutConfirmation, isOrderDetails, isSubtotal]);
  return /*#__PURE__*/_jsx("ul", {
    children: prices.map(({
      price,
      isCoupon,
      isPromo
    }, index) => {
      const isLast = index === prices.length - 1;
      return /*#__PURE__*/ /* eslint-disable react/no-array-index-key */_jsxs("li", {
        className: classNames(styles.priceListEntry, classes?.entry),
        children: [(showLabels || !isSubtotal) && /*#__PURE__*/_jsx(CartItemProductPriceListPromotion, {
          isCoupon: isCoupon,
          isPromo: isPromo,
          className: classes?.promo
        }), !isLast ? /*#__PURE__*/_jsx(PriceStriked, {
          className: classNames(styles.priceStriked, classes?.priceStriked),
          value: price,
          currency: currency
        }) : /*#__PURE__*/_jsx(Price, {
          className: classNames(styles.price, classes?.price),
          unitPrice: price,
          currency: currency,
          discounted: prices.length > 1 || price === 0,
          taxDisclaimer: true,
          allowFree: true
        })]
      }, `total_${index}`)
      /* eslint-enable react/no-array-index-key */;
    })
  });
};
CartItemProductPriceList.defaultProps = {
  isSubtotal: false,
  showLabels: false,
  classes: {
    price: null,
    priceStriked: null
  }
};
export default CartItemProductPriceList;