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

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { SurroundPortals } from '@shopgate/engage/components';
import DiscountBadge from '@shopgate/pwa-ui-shared/DiscountBadge';
import { PRODUCT_DISCOUNT } from '@shopgate/pwa-common-commerce/product/constants/Portals';
import { useWidgetSettings } from '@shopgate/engage/core';
import ProductBadges from "../ProductBadges";
import styles from "./style";
import connect from "./connector";

/**
 * ProductDiscountBadge
 * @return {JSX.Element}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const ProductDiscountBadge = ({
  productId,
  discount
}) => {
  const {
    pdp = {
      show: false,
      style: {}
    }
  } = useWidgetSettings('@shopgate/engage/product/components/ProductDiscountBadge') || {};
  return /*#__PURE__*/_jsx(ProductBadges, {
    className: styles.portal,
    location: "productDiscountBadge",
    productId: productId,
    portalProps: {
      ...pdp
    },
    children: pdp.show && discount ? /*#__PURE__*/_jsx("div", {
      className: `${styles.container} ${css(pdp.style)} theme__product__product-discount`,
      children: /*#__PURE__*/_jsx(SurroundPortals, {
        portalName: PRODUCT_DISCOUNT,
        portalProps: {
          productId,
          discount
        },
        children: /*#__PURE__*/_jsx(DiscountBadge, {
          className: styles.badge,
          text: `-${discount}%`
        })
      })
    }) : null
  });
};
ProductDiscountBadge.defaultProps = {
  discount: null
};
export default connect(ProductDiscountBadge);