@shopgate/engage/product/components/UnitQuantityPicker/UnitQuantityPickerWithSection.js

Shopgate's ENGAGE library.

import React, { useMemo } from 'react';
import { css } from 'glamor';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { hasNewServices, i18n } from '@shopgate/engage/core/helpers';
import { useWidgetSettings } from '@shopgate/engage/core/hooks';
import { withCurrentProduct, withWidgetSettings } from '@shopgate/engage/core/hocs';
import { Section } from '@shopgate/engage/a11y/components';
import { makeGetCurrentProductPropertyByLabel } from '@shopgate/engage/product/selectors/product';
import ProductUnitQuantityPicker from "./ProductUnitQuantityPicker";
import OrderQuantityHint from "../OrderQuantityHint";
import { jsx as _jsx } from "react/jsx-runtime";
const styles = {
  quantityPicker: css({
    display: 'flex',
    flexDirection: 'column'
  }).toString(),
  quantityPickerPicker: css({
    width: '100%'
  }).toString(),
  quantityHint: css({
    '&:not(:empty)': {
      paddingTop: 8,
      marginBottom: -4
    }
  }).toString()
};

/**
 * A Quantity Picker with unit support.
 * @returns {JSX.Element}
 */
const UnitQuantityPickerWithSection = ({
  productId,
  variantId,
  productProperty
}) => {
  const {
    show = hasNewServices()
  } = useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker');
  const quantityLabel = useMemo(() => {
    if (!show) {
      return null;
    }
    let label = i18n.text('product.sections.quantity');
    if ((productProperty?.value ?? '') !== '') {
      label = productProperty.value;
    }
    return label;
  }, [productProperty, show]);
  if (!show) {
    return null;
  }
  return /*#__PURE__*/_jsx(Section, {
    title: "product.sections.quantity",
    children: /*#__PURE__*/_jsx(ProductUnitQuantityPicker, {
      className: styles.quantityPicker,
      classes: {
        picker: styles.quantityPickerPicker
      },
      size: "large",
      quantityLabel: quantityLabel,
      hideHeadline: true,
      children: /*#__PURE__*/_jsx(OrderQuantityHint, {
        productId: variantId || productId,
        className: styles.quantityHint
      })
    })
  });
};
UnitQuantityPickerWithSection.defaultProps = {
  productId: null,
  variantId: null,
  productProperty: null
};

/**
 * Creates the mapStateToProps connector function.
 * @returns {Function}
 */
const makeMapStateToProps = () => {
  const getCurrentProductPropertyByLabel = makeGetCurrentProductPropertyByLabel();
  return (state, props) => ({
    productProperty: getCurrentProductPropertyByLabel(state, props)
  });
};
export default withWidgetSettings(withCurrentProduct(connect(makeMapStateToProps)(UnitQuantityPickerWithSection)), '@shopgate/engage/product/components/UnitQuantityPicker');