@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.8

package/product/components/UnitQuantityPicker/UnitQuantityPicker.js

@@ -1,12 +1,324 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useCallback,useEffect,useState,useRef,useMemo}from'react';import PropTypes from'prop-types';import{i18n,hasNewServices}from'@shopgate/engage/core/helpers';import{UIEvents}from'@shopgate/engage/core';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/engage';import{RippleButton,QuantityInput}from'@shopgate/engage/components';import{broadcastLiveMessage}from'@shopgate/engage/a11y/helpers';var variables=themeConfig.variables,colors=themeConfig.colors;var styles={root:css({display:'flex',flexDirection:'row',position:'relative',zIndex:5}).toString(),backdrop:css({zIndex:4,top:0,left:0,height:'100%',width:'100%',position:'fixed'}),inputWrapper:function inputWrapper(_ref){var inputColor=_ref.inputColor,inputBgColor=_ref.inputBgColor;return css(_extends({display:'flex',alignItems:'center',width:'100%',fontSize:16,backgroundColor:"var(--color-background-accent, ".concat(colors.shade8,")")},inputColor&&{color:"".concat(inputColor," !important")},{},inputBgColor&&{backgroundColor:"".concat(inputBgColor," !important")},{' .quantity-label':{paddingLeft:variables.gap.small,paddingRight:4,textAlign:'center',width:'calc(100% - 32px)',textOverflow:'ellipsis',overflow:'hidden',whiteSpace:'nowrap'}}));},input:function input(_ref2){var inputColor=_ref2.inputColor,inputBgColor=_ref2.inputBgColor,hasLabel=_ref2.hasLabel,size=_ref2.size;var fontWeight=size==='large'?600:'normal';return css(_extends({padding:"0 ".concat(variables.gap.small,"px"),textAlign:hasLabel?'left':'center',fontWeight:fontWeight,height:'100%',width:'100%'},inputColor&&{color:"".concat(inputColor)},{},inputBgColor&&{backgroundColor:"".concat(inputBgColor," !important")},{},hasLabel&&{paddingLeft:0},{outline:'none','&:focus:not(:focus-visible)':{outline:'none'}})).toString();},button:function button(_ref3){var _ref3$size=_ref3.size,size=_ref3$size===void 0?'default':_ref3$size,buttonColor=_ref3.buttonColor,buttonBgColor=_ref3.buttonBgColor;var sizeValue=size==='large'?36:28;return css({width:sizeValue,' &&':{minWidth:sizeValue,padding:0},height:sizeValue,fontSize:"".concat(Math.floor(sizeValue/28*100),"% !important"),'&:not(:disabled)':_extends({},buttonColor&&{color:"".concat(buttonColor," !important")},{},buttonBgColor&&{backgroundColor:"".concat(buttonBgColor," !important")})});},buttonRipple:css({padding:0}).toString(),buttonNoRadiusLeft:css({' &&':{borderTopLeftRadius:0,borderBottomLeftRadius:0}}).toString(),buttonNoRadiusRight:css({' &&':{borderTopRightRadius:0,borderBottomRightRadius:0}}).toString(),disabled:css({' > div':{padding:0}}).toString()};/**
+import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { i18n, hasNewServices } from '@shopgate/engage/core/helpers';
+import { UIEvents } from '@shopgate/engage/core';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { css } from 'glamor';
+import classNames from 'classnames';
+import { themeConfig } from '@shopgate/engage';
+import { RippleButton, QuantityInput } from '@shopgate/engage/components';
+import { broadcastLiveMessage } from '@shopgate/engage/a11y/helpers';
+const {
+  variables,
+  colors
+} = themeConfig;
+const styles = {
+  root: css({
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'relative',
+    zIndex: 5
+  }).toString(),
+  backdrop: css({
+    zIndex: 4,
+    top: 0,
+    left: 0,
+    height: '100%',
+    width: '100%',
+    position: 'fixed'
+  }),
+  inputWrapper: ({
+    inputColor,
+    inputBgColor
+  }) => css({
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    fontSize: 16,
+    backgroundColor: `var(--color-background-accent, ${colors.shade8})`,
+    ...(inputColor && {
+      color: `${inputColor} !important`
+    }),
+    ...(inputBgColor && {
+      backgroundColor: `${inputBgColor} !important`
+    }),
+    ' .quantity-label': {
+      paddingLeft: variables.gap.small,
+      paddingRight: 4,
+      textAlign: 'center',
+      width: 'calc(100% - 32px)',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap'
+    }
+  }),
+  input: ({
+    inputColor,
+    inputBgColor,
+    hasLabel,
+    size
+  }) => {
+    const fontWeight = size === 'large' ? 600 : 'normal';
+    return css({
+      padding: `0 ${variables.gap.small}px`,
+      textAlign: hasLabel ? 'left' : 'center',
+      fontWeight,
+      height: '100%',
+      width: '100%',
+      ...(inputColor && {
+        color: `${inputColor}`
+      }),
+      ...(inputBgColor && {
+        backgroundColor: `${inputBgColor} !important`
+      }),
+      ...(hasLabel && {
+        paddingLeft: 0
+      }),
+      outline: 'none',
+      '&:focus:not(:focus-visible)': {
+        outline: 'none'
+      }
+    }).toString();
+  },
+  button: ({
+    size = 'default',
+    buttonColor,
+    buttonBgColor
+  }) => {
+    const sizeValue = size === 'large' ? 36 : 28;
+    return css({
+      width: sizeValue,
+      ' &&': {
+        minWidth: sizeValue,
+        padding: 0
+      },
+      height: sizeValue,
+      fontSize: `${Math.floor(sizeValue / 28 * 100)}% !important`,
+      '&:not(:disabled)': {
+        ...(buttonColor && {
+          color: `${buttonColor} !important`
+        }),
+        ...(buttonBgColor && {
+          backgroundColor: `${buttonBgColor} !important`
+        })
+      }
+    });
+  },
+  buttonRipple: css({
+    padding: 0
+  }).toString(),
+  buttonNoRadiusLeft: css({
+    ' &&': {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    }
+  }).toString(),
+  buttonNoRadiusRight: css({
+    ' &&': {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    }
+  }).toString(),
+  disabled: css({
+    ' > div': {
+      padding: 0
+    }
+  }).toString()
+};
+
+/**
  * A Quantity Picker with unit support.
  * @returns {JSX.Element}
- */var UnitQuantityPicker=function UnitQuantityPicker(_ref4){var className=_ref4.className,onChange=_ref4.onChange,value=_ref4.value,allowDecrement=_ref4.allowDecrement,allowIncrement=_ref4.allowIncrement,allowZero=_ref4.allowZero,decrementStep=_ref4.decrementStep,incrementStep=_ref4.incrementStep,maxDecimals=_ref4.maxDecimals,unit=_ref4.unit,disabled=_ref4.disabled,minValue=_ref4.minValue,maxValue=_ref4.maxValue,size=_ref4.size,toggleTabBarOnFocus=_ref4.toggleTabBarOnFocus,quantityLabel=_ref4.quantityLabel;var widgetDefaults=useMemo(function(){if(hasNewServices()){// The widget configuration was introduced with CCP-2449 in PWA6. It's inactive for now
-// when running on new services, since for those shops it never existed and the default
-// values would introduce breaking changes.
-return{};}return{buttonColor:colors.shade8,buttonBgColor:colors.primary,inputColor:colors.dark,inputBgColor:colors.shade8,showLabel:true};},[]);var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker'),_useWidgetSettings$bu=_useWidgetSettings.buttonColor,buttonColor=_useWidgetSettings$bu===void 0?widgetDefaults.buttonColor:_useWidgetSettings$bu,_useWidgetSettings$bu2=_useWidgetSettings.buttonBgColor,buttonBgColor=_useWidgetSettings$bu2===void 0?widgetDefaults.buttonBgColor:_useWidgetSettings$bu2,_useWidgetSettings$in=_useWidgetSettings.inputColor,inputColor=_useWidgetSettings$in===void 0?widgetDefaults.inputColor:_useWidgetSettings$in,_useWidgetSettings$in2=_useWidgetSettings.inputBgColor,inputBgColor=_useWidgetSettings$in2===void 0?widgetDefaults.inputBgColor:_useWidgetSettings$in2,_useWidgetSettings$sh=_useWidgetSettings.showLabel,showLabel=_useWidgetSettings$sh===void 0?widgetDefaults.showLabel:_useWidgetSettings$sh;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var inputRef=useRef(null);var handleOnFocus=useCallback(function(){setIsFocused(true);if(toggleTabBarOnFocus){UIEvents.emit('HIDE_TAB_BAR');}},[toggleTabBarOnFocus]);var handleOnBlur=useCallback(function(){setIsFocused(false);if(toggleTabBarOnFocus){UIEvents.emit('SHOW_TAB_BAR');}},[toggleTabBarOnFocus]);var handleManualChange=useCallback(function(newValue){onChange(newValue);var message;if(newValue<value){message='product.decreased_quantity_to';}if(newValue>value){message='product.increased_quantity_to';}if(message){broadcastLiveMessage(message,{params:{quantity:newValue}});}},[onChange,value]);var handleDecrement=useCallback(function(event){var newValue=value-decrementStep;if(newValue<=0&&!allowZero||minValue&&newValue<minValue){newValue=value;}handleManualChange(newValue);event.preventDefault();event.stopPropagation();},[allowZero,decrementStep,handleManualChange,minValue,value]);var handleIncrement=useCallback(function(event){var newValue=value+incrementStep;if(maxValue&&newValue>maxValue){newValue=value;}handleManualChange(newValue);event.preventDefault();event.stopPropagation();},[handleManualChange,incrementStep,maxValue,value]);useEffect(function(){if(minValue&&value<minValue){onChange(minValue);}if(maxValue&&value>maxValue){onChange(maxValue);}/* eslint-disable react-hooks/exhaustive-deps */},[]);/* eslint-enable react-hooks/exhaustive-deps */ /**
+ */
+const UnitQuantityPicker = ({
+  className,
+  onChange,
+  value,
+  allowDecrement,
+  allowIncrement,
+  allowZero,
+  decrementStep,
+  incrementStep,
+  maxDecimals,
+  unit,
+  disabled,
+  minValue,
+  maxValue,
+  size,
+  toggleTabBarOnFocus,
+  quantityLabel
+}) => {
+  const widgetDefaults = useMemo(() => {
+    if (hasNewServices()) {
+      // The widget configuration was introduced with CCP-2449 in PWA6. It's inactive for now
+      // when running on new services, since for those shops it never existed and the default
+      // values would introduce breaking changes.
+      return {};
+    }
+    return {
+      buttonColor: colors.shade8,
+      buttonBgColor: colors.primary,
+      inputColor: colors.dark,
+      inputBgColor: colors.shade8,
+      showLabel: true
+    };
+  }, []);
+  const {
+    buttonColor = widgetDefaults.buttonColor,
+    buttonBgColor = widgetDefaults.buttonBgColor,
+    inputColor = widgetDefaults.inputColor,
+    inputBgColor = widgetDefaults.inputBgColor,
+    showLabel = widgetDefaults.showLabel
+  } = useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker');
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef(null);
+  const handleOnFocus = useCallback(() => {
+    setIsFocused(true);
+    if (toggleTabBarOnFocus) {
+      UIEvents.emit('HIDE_TAB_BAR');
+    }
+  }, [toggleTabBarOnFocus]);
+  const handleOnBlur = useCallback(() => {
+    setIsFocused(false);
+    if (toggleTabBarOnFocus) {
+      UIEvents.emit('SHOW_TAB_BAR');
+    }
+  }, [toggleTabBarOnFocus]);
+  const handleManualChange = useCallback(newValue => {
+    onChange(newValue);
+    let message;
+    if (newValue < value) {
+      message = 'product.decreased_quantity_to';
+    }
+    if (newValue > value) {
+      message = 'product.increased_quantity_to';
+    }
+    if (message) {
+      broadcastLiveMessage(message, {
+        params: {
+          quantity: newValue
+        }
+      });
+    }
+  }, [onChange, value]);
+  const handleDecrement = useCallback(event => {
+    let newValue = value - decrementStep;
+    if (newValue <= 0 && !allowZero || minValue && newValue < minValue) {
+      newValue = value;
+    }
+    handleManualChange(newValue);
+    event.preventDefault();
+    event.stopPropagation();
+  }, [allowZero, decrementStep, handleManualChange, minValue, value]);
+  const handleIncrement = useCallback(event => {
+    let newValue = value + incrementStep;
+    if (maxValue && newValue > maxValue) {
+      newValue = value;
+    }
+    handleManualChange(newValue);
+    event.preventDefault();
+    event.stopPropagation();
+  }, [handleManualChange, incrementStep, maxValue, value]);
+  useEffect(() => {
+    if (minValue && value < minValue) {
+      onChange(minValue);
+    }
+    if (maxValue && value > maxValue) {
+      onChange(maxValue);
+    }
+    /* eslint-disable react-hooks/exhaustive-deps */
+  }, []);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  /**
    * Handler for pressing "enter" on Android
-   */var handleKeyDown=useCallback(function(event){if(event.key==='Enter'&&inputRef.current!==null){try{inputRef.current.blur();}catch(e){// nothing to do here
-}}},[]);return React.createElement(React.Fragment,null,isFocused&&// Show hidden backdrop when focused to avoid side effects when user blurs the input
-// e.g. opening links unintended
-React.createElement("div",{className:styles.backdrop}),React.createElement("div",{className:"".concat(styles.root," ").concat(className)},React.createElement(RippleButton,{type:"secondary",disabled:!allowDecrement||disabled,rippleClassName:styles.buttonRipple,className:classNames(styles.button({size:size,buttonColor:buttonColor,buttonBgColor:buttonBgColor}),styles.buttonNoRadiusRight,_defineProperty({},styles.disabled,!allowDecrement||disabled)),onClick:handleDecrement,"aria-label":i18n.text('product.decrease_quantity')},"-"),React.createElement("span",{className:styles.inputWrapper({inputColor:inputColor,inputBgColor:inputBgColor})},quantityLabel&&showLabel&&React.createElement("span",{"aria-hidden":true,className:"quantity-label"},quantityLabel),React.createElement(QuantityInput,{className:styles.input({inputColor:inputColor,inputBgColor:inputBgColor,hasLabel:showLabel&&!!quantityLabel,size:size}),value:value,onChange:onChange,maxDecimals:maxDecimals,unit:unit,disabled:disabled,minValue:minValue,maxValue:maxValue,"aria-label":i18n.text('product.quantity'),onFocus:handleOnFocus,onBlur:handleOnBlur,onKeyDown:handleKeyDown,ref:inputRef})),React.createElement(RippleButton,{type:"secondary",disabled:!allowIncrement||disabled,rippleClassName:styles.buttonRipple,className:classNames(styles.button({size:size,buttonColor:buttonColor,buttonBgColor:buttonBgColor}),styles.buttonNoRadiusLeft,_defineProperty({},styles.disabled,!allowIncrement||disabled)),onClick:handleIncrement,"aria-label":i18n.text('product.increase_quantity')},"+")));};UnitQuantityPicker.defaultProps={className:'',allowZero:false,allowIncrement:true,allowDecrement:true,incrementStep:0.25,decrementStep:0.25,maxDecimals:2,unit:null,disabled:false,minValue:null,size:'default',maxValue:null,quantityLabel:null,toggleTabBarOnFocus:false};export default UnitQuantityPicker;
+   */
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Enter' && inputRef.current !== null) {
+      try {
+        inputRef.current.blur();
+      } catch (e) {
+        // nothing to do here
+      }
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isFocused &&
+  /*#__PURE__*/
+  // Show hidden backdrop when focused to avoid side effects when user blurs the input
+  // e.g. opening links unintended
+  React.createElement("div", {
+    className: styles.backdrop
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${styles.root} ${className}`
+  }, /*#__PURE__*/React.createElement(RippleButton, {
+    type: "secondary",
+    disabled: !allowDecrement || disabled,
+    rippleClassName: styles.buttonRipple,
+    className: classNames(styles.button({
+      size,
+      buttonColor,
+      buttonBgColor
+    }), styles.buttonNoRadiusRight, {
+      [styles.disabled]: !allowDecrement || disabled
+    }),
+    onClick: handleDecrement,
+    "aria-label": i18n.text('product.decrease_quantity')
+  }, "-"), /*#__PURE__*/React.createElement("span", {
+    className: styles.inputWrapper({
+      inputColor,
+      inputBgColor
+    })
+  }, quantityLabel && showLabel && /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true,
+    className: "quantity-label"
+  }, quantityLabel), /*#__PURE__*/React.createElement(QuantityInput, {
+    className: styles.input({
+      inputColor,
+      inputBgColor,
+      hasLabel: showLabel && !!quantityLabel,
+      size
+    }),
+    value: value,
+    onChange: onChange,
+    maxDecimals: maxDecimals,
+    unit: unit,
+    disabled: disabled,
+    minValue: minValue,
+    maxValue: maxValue,
+    "aria-label": i18n.text('product.quantity'),
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur,
+    onKeyDown: handleKeyDown,
+    ref: inputRef
+  })), /*#__PURE__*/React.createElement(RippleButton, {
+    type: "secondary",
+    disabled: !allowIncrement || disabled,
+    rippleClassName: styles.buttonRipple,
+    className: classNames(styles.button({
+      size,
+      buttonColor,
+      buttonBgColor
+    }), styles.buttonNoRadiusLeft, {
+      [styles.disabled]: !allowIncrement || disabled
+    }),
+    onClick: handleIncrement,
+    "aria-label": i18n.text('product.increase_quantity')
+  }, "+")));
+};
+UnitQuantityPicker.defaultProps = {
+  className: '',
+  allowZero: false,
+  allowIncrement: true,
+  allowDecrement: true,
+  incrementStep: 0.25,
+  decrementStep: 0.25,
+  maxDecimals: 2,
+  unit: null,
+  disabled: false,
+  minValue: null,
+  size: 'default',
+  maxValue: null,
+  quantityLabel: null,
+  toggleTabBarOnFocus: false
+};
+export default UnitQuantityPicker;

package/product/components/UnitQuantityPicker/UnitQuantityPickerWithSection.js

@@ -1,7 +1,84 @@
-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";var styles={quantityPicker:css({display:'flex',flexDirection:'column'}).toString(),quantityPickerPicker:css({width:'100%'}).toString(),quantityHint:css({'&:not(:empty)':{paddingTop:8,marginBottom:-4}}).toString()};/**
+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";
+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}
- */var UnitQuantityPickerWithSection=function UnitQuantityPickerWithSection(_ref){var productId=_ref.productId,variantId=_ref.variantId,productProperty=_ref.productProperty;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker'),_useWidgetSettings$sh=_useWidgetSettings.show,show=_useWidgetSettings$sh===void 0?hasNewServices():_useWidgetSettings$sh;var quantityLabel=useMemo(function(){var _ref2;if(!show){return null;}var label=i18n.text('product.sections.quantity');if(((_ref2=productProperty===null||productProperty===void 0?void 0:productProperty.value)!==null&&_ref2!==void 0?_ref2:'')!==''){label=productProperty.value;}return label;},[productProperty,show]);if(!show){return null;}return React.createElement(Section,{title:"product.sections.quantity"},React.createElement(ProductUnitQuantityPicker,{className:styles.quantityPicker,classes:{picker:styles.quantityPickerPicker},size:"large",quantityLabel:quantityLabel,hideHeadline:true},React.createElement(OrderQuantityHint,{productId:variantId||productId,className:styles.quantityHint})));};UnitQuantityPickerWithSection.defaultProps={productId:null,variantId:null,productProperty:null};/**
+ */
+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__*/React.createElement(Section, {
+    title: "product.sections.quantity"
+  }, /*#__PURE__*/React.createElement(ProductUnitQuantityPicker, {
+    className: styles.quantityPicker,
+    classes: {
+      picker: styles.quantityPickerPicker
+    },
+    size: "large",
+    quantityLabel: quantityLabel,
+    hideHeadline: true
+  }, /*#__PURE__*/React.createElement(OrderQuantityHint, {
+    productId: variantId || productId,
+    className: styles.quantityHint
+  })));
+};
+UnitQuantityPickerWithSection.defaultProps = {
+  productId: null,
+  variantId: null,
+  productProperty: null
+};
+
+/**
  * Creates the mapStateToProps connector function.
  * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getCurrentProductPropertyByLabel=makeGetCurrentProductPropertyByLabel();return function(state,props){return{productProperty:getCurrentProductPropertyByLabel(state,props)};};};export default withWidgetSettings(withCurrentProduct(connect(makeMapStateToProps)(UnitQuantityPickerWithSection)),'@shopgate/engage/product/components/UnitQuantityPicker');
+ */
+const makeMapStateToProps = () => {
+  const getCurrentProductPropertyByLabel = makeGetCurrentProductPropertyByLabel();
+  return (state, props) => ({
+    productProperty: getCurrentProductPropertyByLabel(state, props)
+  });
+};
+export default withWidgetSettings(withCurrentProduct(connect(makeMapStateToProps)(UnitQuantityPickerWithSection)), '@shopgate/engage/product/components/UnitQuantityPicker');

package/product/components/UnitQuantityPicker/helper.js

@@ -1,19 +1,40 @@
-import{i18n}from'@shopgate/engage/core';/**
+import "core-js/modules/es.string.replace.js";
+import { i18n } from '@shopgate/engage/core';
+
+/**
  * Formats a float number to a string with limited decimals
  * and no grouping.
  * @param {number} value Value
  * @param {number} decimals Decimals
  * @param {string} locale Locale
  * @returns {string}
- */var formatFloatLocale=function formatFloatLocale(value,decimals){var locale=arguments.length>2&&arguments[2]!==undefined?arguments[2]:navigator.language;try{return value.toLocaleString(locale,{style:'decimal',useGrouping:false,minimumFractionDigits:decimals,maximumFractionDigits:decimals}).toString();}catch(err){return i18n.number(value,decimals);}};/**
+ */
+const formatFloatLocale = (value, decimals, locale = navigator.language) => {
+  try {
+    return value.toLocaleString(locale, {
+      style: 'decimal',
+      useGrouping: false,
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    }).toString();
+  } catch (err) {
+    return i18n.number(value, decimals);
+  }
+};
+
+/**
  * Parses a float string to a float.
  * TODO: Needs to handle localized inputs like: 1,000,000.32 or 1.000.000,32
  * @param {string} value The string value.
  * @param {number} decimals The amount of decimals.
  * @returns {number}
- */export var parseFloatString=function parseFloatString(value,decimals){return+parseFloat(value.replace(',','.')).toFixed(decimals);};/**
+ */
+export const parseFloatString = (value, decimals) => +parseFloat(value.replace(',', '.')).toFixed(decimals);
+
+/**
  * Formats a float to a string.
  * @param {float} value The float value.
  * @param {number} decimals The amount of decimals.
  * @returns {string}
- */export var formatFloat=function formatFloat(value,decimals){return formatFloatLocale(value,decimals);};
+ */
+export const formatFloat = (value, decimals) => formatFloatLocale(value, decimals);

package/product/components/UnitQuantityPicker/index.js

@@ -1 +1,4 @@
-export{default as CartUnitQuantityPicker}from"./CartUnitQuantityPicker";export{default as ProductUnitQuantityPicker}from"./ProductUnitQuantityPicker";export{default as UnitQuantityPicker}from"./UnitQuantityPicker";export{default as UnitQuantityPickerWithSection}from"./UnitQuantityPickerWithSection";
+export { default as CartUnitQuantityPicker } from "./CartUnitQuantityPicker";
+export { default as ProductUnitQuantityPicker } from "./ProductUnitQuantityPicker";
+export { default as UnitQuantityPicker } from "./UnitQuantityPicker";
+export { default as UnitQuantityPickerWithSection } from "./UnitQuantityPickerWithSection";

package/product/components/UnitQuantityPicker/styles.js

@@ -1 +1,7 @@
-import{css}from'glamor';export var small=css({width:120}).toString();export var big=css({width:170}).toString();
+import { css } from 'glamor';
+export const small = css({
+  width: 120
+}).toString();
+export const big = css({
+  width: 170
+}).toString();

package/product/components/context.js

@@ -1 +1,3 @@
-import React from'react';export var ProductContext=React.createContext();export{default as VariantContext}from"./ProductCharacteristics/context";
+import React from 'react';
+export const ProductContext = /*#__PURE__*/React.createContext();
+export { default as VariantContext } from "./ProductCharacteristics/context";

package/product/components/index.js

@@ -1 +1,32 @@
-export*from"./Availability";export{default as Characteristics}from"./Characteristics";export{default as Description}from"./Description";export{default as EffectivityDates}from"./EffectivityDates";export{default as MapPriceHint}from"./MapPriceHint";export*from"./Media";export{default as MediaSlider}from"./MediaSlider";export{default as Options}from"./Options";export{SelectOption,TextOption}from"./Options";export{default as OrderQuantityHint}from"./OrderQuantityHint";export{default as PriceDifference}from"./PriceDifference";export*from"./PriceInfo";export{default as ProductBadges}from"./ProductBadges";export{default as ProductCard}from"./ProductCard";export{default as ProductCharacteristics}from"./ProductCharacteristics";export{default as ProductDiscountBadge}from"./ProductDiscountBadge";export{default as ProductGrid}from"./ProductGrid";export{default as ProductGridPrice}from"./ProductGridPrice";export{default as ProductImage}from"./ProductImage";export{default as ProductList}from"./ProductList";export*from"./ProductName";export{default as ProductProperties}from"./ProductProperties/ProductProperties";export{default as ProductSlider}from"./ProductSlider";export*from"./ProductVariants";export{default as QuantityPicker}from"./QuantityPicker";export{default as Rating}from"./Rating";export*from"./RelationsSlider";export*from"./Swatch";export*from"./Swatches";export*from"./UnitQuantityPicker";export{default as FilterBar}from"./FilterBar";export{default as ProductFilters}from"./ProductFilters";
+export * from "./Availability";
+export { default as Characteristics } from "./Characteristics";
+export { default as Description } from "./Description";
+export { default as EffectivityDates } from "./EffectivityDates";
+export { default as MapPriceHint } from "./MapPriceHint";
+export * from "./Media";
+export { default as MediaSlider } from "./MediaSlider";
+export { default as Options } from "./Options";
+export { SelectOption, TextOption } from "./Options";
+export { default as OrderQuantityHint } from "./OrderQuantityHint";
+export { default as PriceDifference } from "./PriceDifference";
+export * from "./PriceInfo";
+export { default as ProductBadges } from "./ProductBadges";
+export { default as ProductCard } from "./ProductCard";
+export { default as ProductCharacteristics } from "./ProductCharacteristics";
+export { default as ProductDiscountBadge } from "./ProductDiscountBadge";
+export { default as ProductGrid } from "./ProductGrid";
+export { default as ProductGridPrice } from "./ProductGridPrice";
+export { default as ProductImage } from "./ProductImage";
+export { default as ProductList } from "./ProductList";
+export * from "./ProductName";
+export { default as ProductProperties } from "./ProductProperties/ProductProperties";
+export { default as ProductSlider } from "./ProductSlider";
+export * from "./ProductVariants";
+export { default as QuantityPicker } from "./QuantityPicker";
+export { default as Rating } from "./Rating";
+export * from "./RelationsSlider";
+export * from "./Swatch";
+export * from "./Swatches";
+export * from "./UnitQuantityPicker";
+export { default as FilterBar } from "./FilterBar";
+export { default as ProductFilters } from "./ProductFilters";

package/product/constants/index.js

@@ -1,3 +1,14 @@
 // MEDIA TYPES
-export var MEDIA_TYPE_IMAGE='image';export var MEDIA_TYPE_VIDEO='video';// AVAILABILITY TYPES
-export var AVAILABILITY_TYPE_COMING_SOON='comingSoon';export var AVAILABILITY_TYPE_AVAILABLE='available';export var AVAILABILITY_TYPE_LIMITED_AVAILABILITY='limitedAvailability';export var AVAILABILITY_TYPE_NOT_AVAILABLE='notAvailable';export var AVAILABILITY_TYPE_CUSTOM_AVAILABILITY='customAvailability';export var availabilityTypes=[AVAILABILITY_TYPE_AVAILABLE,AVAILABILITY_TYPE_LIMITED_AVAILABILITY,AVAILABILITY_TYPE_NOT_AVAILABLE,AVAILABILITY_TYPE_CUSTOM_AVAILABILITY];export*from'@shopgate/pwa-common-commerce/product/constants/index';export*from'@shopgate/pwa-common-commerce/product/constants/Pipelines';export*from'@shopgate/pwa-common-commerce/product/constants/Portals';
+export const MEDIA_TYPE_IMAGE = 'image';
+export const MEDIA_TYPE_VIDEO = 'video';
+
+// AVAILABILITY TYPES
+export const AVAILABILITY_TYPE_COMING_SOON = 'comingSoon';
+export const AVAILABILITY_TYPE_AVAILABLE = 'available';
+export const AVAILABILITY_TYPE_LIMITED_AVAILABILITY = 'limitedAvailability';
+export const AVAILABILITY_TYPE_NOT_AVAILABLE = 'notAvailable';
+export const AVAILABILITY_TYPE_CUSTOM_AVAILABILITY = 'customAvailability';
+export const availabilityTypes = [AVAILABILITY_TYPE_AVAILABLE, AVAILABILITY_TYPE_LIMITED_AVAILABILITY, AVAILABILITY_TYPE_NOT_AVAILABLE, AVAILABILITY_TYPE_CUSTOM_AVAILABILITY];
+export * from '@shopgate/pwa-common-commerce/product/constants/index';
+export * from '@shopgate/pwa-common-commerce/product/constants/Pipelines';
+export * from '@shopgate/pwa-common-commerce/product/constants/Portals';

package/product/contexts/index.js

@@ -1 +1 @@
-export{ProductContext,VariantContext}from"../components/context";
+export { ProductContext, VariantContext } from "../components/context";