@shopgate/engage/product/components/MapPriceHint/index.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import classNames from 'classnames';
import { SurroundPortals, I18n, TimeBoundary } from '@shopgate/engage/components';
import { isBeta, useWidgetSettings, useWidgetStyles } from '@shopgate/engage/core';
import { PRODUCT_MAP_PRICE } from '@shopgate/engage/product';
import { showHint } from "./helpers";
import connect from "./connector";
import { jsx as _jsx } from "react/jsx-runtime";
const defaultStyle = css({
  fontSize: '0.75rem'
}).toString();

/**
 * The Product Map Price Hint component.
 * @return {JSX}
 */
const MapPriceHint = ({
  price,
  mapPrice
}) => {
  const styles = useWidgetStyles('@shopgate/engage/product/MapPrice');
  const settings = useWidgetSettings('@shopgate/engage/product/MapPrice');
  if (!settings.showHint || !settings.hint) {
    return null;
  }
  if (!isBeta()) {
    return null;
  }
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: PRODUCT_MAP_PRICE,
    children: showHint(price, mapPrice) && /*#__PURE__*/_jsx(TimeBoundary, {
      start: new Date(mapPrice.startDate),
      end: new Date(mapPrice.endDate),
      children: ({
        between
      }) => between && /*#__PURE__*/_jsx(I18n.Text, {
        string: settings.hint,
        className: classNames('engage__product__map-price-hint', defaultStyle, css(styles.hint).toString())
      })
    })
  });
};
MapPriceHint.defaultProps = {
  mapPrice: null,
  price: null
};
export default connect(MapPriceHint);