@shopgate/engage/product/components/Header/Tiers/index.js

Shopgate's ENGAGE library.

import React, { Fragment, memo } from 'react';
import PropTypes from 'prop-types';
import Portal from '@shopgate/pwa-common/components/Portal';
import { PRODUCT_TIERS, PRODUCT_TIERS_AFTER, PRODUCT_TIERS_BEFORE } from '@shopgate/pwa-common-commerce/product/constants/Portals';
import Tier from "./components/Tier";
import connect from "./connector";
import styles from "./style";

/**
 * The Tiers component.
 * @param {Object} props The component props.
 * @return {JSX}
 */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const Tiers = ({
  price
}) => {
  if (!(price && price.tiers && price.tiers.length > 0)) {
    return null;
  }
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Portal, {
      name: PRODUCT_TIERS_BEFORE
    }), /*#__PURE__*/_jsx(Portal, {
      name: PRODUCT_TIERS,
      children: /*#__PURE__*/_jsx("div", {
        className: `${styles.wrapper} engage__product__header__tiers`,
        children: price.tiers.map(tier => /*#__PURE__*/_jsx(Tier, {
          tier: tier,
          price: price
        }, `${Object.values(tier).join('_')}`))
      })
    }), /*#__PURE__*/_jsx(Portal, {
      name: PRODUCT_TIERS_AFTER
    })]
  });
};
Tiers.defaultProps = {
  price: null
};
export default connect(/*#__PURE__*/memo(Tiers));