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

package/product/components/Options/components/TextOption/index.js

@@ -1,22 +1,157 @@
-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);}function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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;}import React,{Fragment,PureComponent}from'react';import PropTypes from'prop-types';import Transition from'react-transition-group/Transition';import debounce from'lodash/debounce';import{TextField,InfoIcon}from'@shopgate/engage/components';import{withShowModal}from'@shopgate/engage/core/hocs';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{ProductContext}from'@shopgate/engage/product/contexts';import transition from'@shopgate/engage/product/components/Characteristics/transition';import OptionInformation from"./components/OptionInfo";import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Transition from 'react-transition-group/Transition';
+import debounce from 'lodash/debounce';
+import { TextField, InfoIcon } from '@shopgate/engage/components';
+import { withShowModal } from '@shopgate/engage/core/hocs';
+import { broadcastLiveMessage } from '@shopgate/engage/a11y';
+import { ProductContext } from '@shopgate/engage/product/contexts';
+import transition from '@shopgate/engage/product/components/Characteristics/transition';
+import OptionInformation from "./components/OptionInfo";
+import styles from "./style";
+
+/**
  * The TextOption component
- */var TextOption=/*#__PURE__*/function(_PureComponent){function TextOption(props){var _this2;_classCallCheck(this,TextOption);_this2=_callSuper(this,TextOption,[props]);/**
-   * @param {Object} ref ref
-   */_defineProperty(_this2,"setRef",function(ref){_this2.ref=ref;});/**
-   * Remove highlight state
-   */_defineProperty(_this2,"removeHighlight",function(){_this2.setState({highlight:false});});/**
-   * Checks if required input is done.
-   * @return {boolean}
-   */_defineProperty(_this2,"checkInput",function(){if(!_this2.props.required){return true;}if(_this2.props.value){return true;}broadcastLiveMessage('product.fill_out_required_input_first');_this2.ref.scrollIntoView({behavior:'smooth'});_this2.setState({highlight:true});return false;});/**
-   * @returns {JSX}
-   */_defineProperty(_this2,"infoIcon",function(){if(!_this2.props.info){return null;}var _this2$props=_this2.props,label=_this2$props.label,info=_this2$props.info,showModal=_this2$props.showModal;return React.createElement("div",{onClick:function onClick(){return showModal({title:label,message:info});},"aria-hidden":true},React.createElement(InfoIcon,{size:24,className:styles.infoIcon}));});/**
-   * Handles form submits by key.
-   * @param {Object} event The event that caused the keypress.
-   */_defineProperty(_this2,"handleKeyPress",function(event){// Enter key and on iOS also the "Done" button.
-if(event.which===13){_this2.ref.blur();}});/**
-   * @param {string} val value.
-   */_defineProperty(_this2,"handleChange",function(val){_this2.props.onChange(_this2.props.id,val,_this2.props.price);});_defineProperty(_this2,"handleDebounced",debounce(_this2.handleChange,300));_this2.state={highlight:false};_this2.ref=null;props.conditioner.addConditioner("text-option-".concat(props.id),_this2.checkInput);return _this2;}_inherits(TextOption,_PureComponent);return _createClass(TextOption,[{key:"render",value:/**
-   * @return {JSX}
-   */function render(){var _this3=this;var _this$props=this.props,id=_this$props.id,label=_this$props.label,value=_this$props.value,required=_this$props.required,price=_this$props.price,info=_this$props.info;var optionInfoId=id;return React.createElement("div",{className:styles.row},React.createElement(Transition,{"in":this.state.highlight,timeout:700,onEntered:this.removeHighlight},function(state){return React.createElement(Fragment,null,React.createElement("div",{className:styles.wrapper,style:transition[state]},React.createElement(TextField,{setRef:_this3.setRef,name:"text_".concat(id),value:value,onChange:_this3.handleDebounced,onKeyPress:_this3.handleKeyPress,placeholder:label,label:label,rightElement:_this3.infoIcon(),"data-test-id":label,hasUnderline:false,className:styles.element,attributes:{'aria-describedby':optionInfoId}})),React.createElement(OptionInformation,{label:label,required:required,price:price,info:info,optionInfoId:optionInfoId}));}));}}]);}(PureComponent);_defineProperty(TextOption,"defaultProps",{info:null,value:null/**
+ */
+class TextOption extends PureComponent {
+  /**
    * @param {Object} props The component props.
-   */});export default withShowModal(function(props){return React.createElement(ProductContext.Consumer,null,function(_ref){var conditioner=_ref.conditioner;return React.createElement(TextOption,_extends({conditioner:conditioner},props));});});
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * @param {Object} ref ref
+     */
+    this.setRef = ref => {
+      this.ref = ref;
+    };
+    /**
+     * Remove highlight state
+     */
+    this.removeHighlight = () => {
+      this.setState({
+        highlight: false
+      });
+    };
+    /**
+     * Checks if required input is done.
+     * @return {boolean}
+     */
+    this.checkInput = () => {
+      if (!this.props.required) {
+        return true;
+      }
+      if (this.props.value) {
+        return true;
+      }
+      broadcastLiveMessage('product.fill_out_required_input_first');
+      this.ref.scrollIntoView({
+        behavior: 'smooth'
+      });
+      this.setState({
+        highlight: true
+      });
+      return false;
+    };
+    /**
+     * @returns {JSX}
+     */
+    this.infoIcon = () => {
+      if (!this.props.info) {
+        return null;
+      }
+      const {
+        label,
+        info,
+        showModal
+      } = this.props;
+      return /*#__PURE__*/React.createElement("div", {
+        onClick: () => showModal({
+          title: label,
+          message: info
+        }),
+        "aria-hidden": true
+      }, /*#__PURE__*/React.createElement(InfoIcon, {
+        size: 24,
+        className: styles.infoIcon
+      }));
+    };
+    /**
+     * Handles form submits by key.
+     * @param {Object} event The event that caused the keypress.
+     */
+    this.handleKeyPress = event => {
+      // Enter key and on iOS also the "Done" button.
+      if (event.which === 13) {
+        this.ref.blur();
+      }
+    };
+    /**
+     * @param {string} val value.
+     */
+    this.handleChange = val => {
+      this.props.onChange(this.props.id, val, this.props.price);
+    };
+    this.handleDebounced = debounce(this.handleChange, 300);
+    this.state = {
+      highlight: false
+    };
+    this.ref = null;
+    props.conditioner.addConditioner(`text-option-${props.id}`, this.checkInput);
+  }
+  /**
+   * @return {JSX}
+   */
+  render() {
+    const {
+      id,
+      label,
+      value,
+      required,
+      price,
+      info
+    } = this.props;
+    const optionInfoId = id;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.row
+    }, /*#__PURE__*/React.createElement(Transition, {
+      in: this.state.highlight,
+      timeout: 700,
+      onEntered: this.removeHighlight
+    }, state => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: styles.wrapper,
+      style: transition[state]
+    }, /*#__PURE__*/React.createElement(TextField, {
+      setRef: this.setRef,
+      name: `text_${id}`,
+      value: value,
+      onChange: this.handleDebounced,
+      onKeyPress: this.handleKeyPress,
+      placeholder: label,
+      label: label,
+      rightElement: this.infoIcon(),
+      "data-test-id": label,
+      hasUnderline: false,
+      className: styles.element,
+      attributes: {
+        'aria-describedby': optionInfoId
+      }
+    })), /*#__PURE__*/React.createElement(OptionInformation, {
+      label: label,
+      required: required,
+      price: price,
+      info: info,
+      optionInfoId: optionInfoId
+    }))));
+  }
+}
+TextOption.defaultProps = {
+  info: null,
+  value: null
+};
+export default withShowModal(props => /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
+  conditioner
+}) => /*#__PURE__*/React.createElement(TextOption, _extends({
+  conditioner: conditioner
+}, props))));

package/product/components/Options/components/TextOption/style.js

@@ -1 +1,37 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var row=css({marginBottom:variables.gap.small}).toString();var wrapper=css({backgroundColor:"var(--color-background-accent, ".concat(colors.shade8,")"),padding:"".concat(variables.gap.small,"px ").concat(variables.gap.big,"px"),minHeight:56}).toString();var element=css({paddingBottom:0,'& label':{fontWeight:400,color:'var(--color-text-high-emphasis, inherit)'},'& input':{fontWeight:500,color:'var(--color-text-high-emphasis)'},'& .placeholder':{color:'var(--color-text-low-emphasis)'}}).toString();var infoIcon=css({color:colors.shade9}).toString();export default{row:row,wrapper:wrapper,element:element,infoIcon:infoIcon};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors,
+  variables
+} = themeConfig;
+const row = css({
+  marginBottom: variables.gap.small
+}).toString();
+const wrapper = css({
+  backgroundColor: `var(--color-background-accent, ${colors.shade8})`,
+  padding: `${variables.gap.small}px ${variables.gap.big}px`,
+  minHeight: 56
+}).toString();
+const element = css({
+  paddingBottom: 0,
+  '& label': {
+    fontWeight: 400,
+    color: 'var(--color-text-high-emphasis, inherit)'
+  },
+  '& input': {
+    fontWeight: 500,
+    color: 'var(--color-text-high-emphasis)'
+  },
+  '& .placeholder': {
+    color: 'var(--color-text-low-emphasis)'
+  }
+}).toString();
+const infoIcon = css({
+  color: colors.shade9
+}).toString();
+export default {
+  row,
+  wrapper,
+  element,
+  infoIcon
+};

package/product/components/Options/index.js

@@ -1,5 +1,29 @@
-import React from'react';import{PRODUCT_OPTIONS}from'@shopgate/engage/product/constants';import{SurroundPortals}from'@shopgate/engage/components';import{ProductContext}from"../context";import Content from"./components/Content";import Option from"./components/Option";import TextOption from"./components/TextOption";// Export for theme api
-export{TextOption,Option as SelectOption};/**
+import React from 'react';
+import { PRODUCT_OPTIONS } from '@shopgate/engage/product/constants';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { ProductContext } from "../context";
+import Content from "./components/Content";
+import Option from "./components/Option";
+import TextOption from "./components/TextOption";
+
+// Export for theme api
+export { TextOption, Option as SelectOption };
+
+/**
  * The Product Options component.
  * @returns {JSX}
- */var Options=function Options(){return React.createElement(ProductContext.Consumer,null,function(_ref){var productId=_ref.productId,variantId=_ref.variantId,options=_ref.options;return React.createElement(SurroundPortals,{portalName:PRODUCT_OPTIONS,portalProps:{productId:variantId||productId}},React.createElement(Content/* props needed in connector */,{productId:variantId||productId,currentOptions:options}));});};export default Options;
+ */
+const Options = () => /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
+  productId,
+  variantId,
+  options
+}) => /*#__PURE__*/React.createElement(SurroundPortals, {
+  portalName: PRODUCT_OPTIONS,
+  portalProps: {
+    productId: variantId || productId
+  }
+}, /*#__PURE__*/React.createElement(Content /* props needed in connector */, {
+  productId: variantId || productId,
+  currentOptions: options
+})));
+export default Options;

package/product/components/OrderQuantityHint/index.js

@@ -1,5 +1,72 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{I18n,SurroundPortals}from'@shopgate/engage/components';import{i18n,hasNewServices,isBeta}from'@shopgate/engage/core/helpers';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import{PRODUCT_ORDER_QUANTITY}from'@shopgate/engage/product';import{formatFloat}from'@shopgate/engage/components/QuantityInput/helper';import withProductStock from"../../hocs/withProductStock";import withProduct from"../../hocs/withProduct";import{hint}from"./style";/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { i18n, hasNewServices, isBeta } from '@shopgate/engage/core/helpers';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { PRODUCT_ORDER_QUANTITY } from '@shopgate/engage/product';
+import { formatFloat } from '@shopgate/engage/components/QuantityInput/helper';
+import withProductStock from "../../hocs/withProductStock";
+import withProduct from "../../hocs/withProduct";
+import { hint } from "./style";
+
+/**
  * The Product Order Quantity Hint component.
  * @return {JSX}
- */var OrderQuantityHint=function OrderQuantityHint(_ref){var stock=_ref.stock,product=_ref.product,className=_ref.className;var _ref2=product||{},hasCatchWeight=_ref2.hasCatchWeight,productUnit=_ref2.unit;var settings=useWidgetSettings('@shopgate/engage/product/OrderQuantityHint');var showContent=useMemo(function(){if(hasNewServices()){// During development of PWA 7 the component was shown by default
-return true;}return isBeta()&&settings.show===true;},[settings.show]);var unit=useMemo(function(){if(hasCatchWeight){var key="formats.unitOfMeasurement.".concat(productUnit);var text=i18n.text(key);return text!==key?text:productUnit||'';}return'';},[hasCatchWeight,productUnit]);var maxDecimals=useMemo(function(){return hasCatchWeight&&productUnit?2:0;},[hasCatchWeight,productUnit]);return React.createElement("div",{className:className},React.createElement(SurroundPortals,{portalName:PRODUCT_ORDER_QUANTITY,portalProps:{stock:stock}},showContent&&stock&&!!stock.minOrderQuantity&&React.createElement("div",{className:hint},React.createElement(I18n.Text,{string:"product.minOrderQuantity",params:{quantity:formatFloat(stock.minOrderQuantity,maxDecimals),unit:unit}})),showContent&&stock&&!!stock.maxOrderQuantity&&React.createElement("div",{className:hint},React.createElement(I18n.Text,{string:"product.maxOrderQuantity",params:{quantity:formatFloat(stock.maxOrderQuantity,maxDecimals),unit:unit}}))));};OrderQuantityHint.defaultProps={className:null,stock:null,product:null};export default withProduct(withProductStock(OrderQuantityHint));
+ */
+const OrderQuantityHint = ({
+  stock,
+  product,
+  className
+}) => {
+  const {
+    hasCatchWeight,
+    unit: productUnit
+  } = product || {};
+  const settings = useWidgetSettings('@shopgate/engage/product/OrderQuantityHint');
+  const showContent = useMemo(() => {
+    if (hasNewServices()) {
+      // During development of PWA 7 the component was shown by default
+      return true;
+    }
+    return isBeta() && settings.show === true;
+  }, [settings.show]);
+  const unit = useMemo(() => {
+    if (hasCatchWeight) {
+      const key = `formats.unitOfMeasurement.${productUnit}`;
+      const text = i18n.text(key);
+      return text !== key ? text : productUnit || '';
+    }
+    return '';
+  }, [hasCatchWeight, productUnit]);
+  const maxDecimals = useMemo(() => hasCatchWeight && productUnit ? 2 : 0, [hasCatchWeight, productUnit]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PRODUCT_ORDER_QUANTITY,
+    portalProps: {
+      stock
+    }
+  }, showContent && stock && !!stock.minOrderQuantity && /*#__PURE__*/React.createElement("div", {
+    className: hint
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "product.minOrderQuantity",
+    params: {
+      quantity: formatFloat(stock.minOrderQuantity, maxDecimals),
+      unit
+    }
+  })), showContent && stock && !!stock.maxOrderQuantity && /*#__PURE__*/React.createElement("div", {
+    className: hint
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "product.maxOrderQuantity",
+    params: {
+      quantity: formatFloat(stock.maxOrderQuantity, maxDecimals),
+      unit
+    }
+  }))));
+};
+OrderQuantityHint.defaultProps = {
+  className: null,
+  stock: null,
+  product: null
+};
+export default withProduct(withProductStock(OrderQuantityHint));

package/product/components/OrderQuantityHint/style.js

@@ -1 +1,6 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export var hint=css({fontSize:'0.75rem',color:"var(--color-text-medium-emphasis, ".concat(themeConfig.colors.shade11,")")});
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+export const hint = css({
+  fontSize: '0.75rem',
+  color: `var(--color-text-medium-emphasis, ${themeConfig.colors.shade11})`
+});

package/product/components/PriceDifference/index.js

@@ -1,8 +1,36 @@
-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;}import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import Price from'@shopgate/pwa-ui-shared/Price';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Price from '@shopgate/pwa-ui-shared/Price';
+import styles from "./style";
+
+/**
  * The price difference component
  * @param {Object} props The component props
  * @param {string} props.className A custom css class string.
  * @param {string} props.currency The currency of the price.
  * @param {number} props.difference The price difference.
  * @return {JSX}
- */var PriceDifference=function PriceDifference(_ref){var className=_ref.className,currency=_ref.currency,difference=_ref.difference;if(difference===0){return null;}var priceClassName=classNames(className,_defineProperty(_defineProperty({},styles.positive,difference>0),styles.negative,difference<0));return React.createElement(Price,{className:priceClassName,currency:currency,unitPrice:difference});};PriceDifference.defaultProps={className:''};export default PriceDifference;
+ */
+const PriceDifference = ({
+  className,
+  currency,
+  difference
+}) => {
+  if (difference === 0) {
+    return null;
+  }
+  const priceClassName = classNames(className, {
+    [styles.positive]: difference > 0,
+    [styles.negative]: difference < 0
+  });
+  return /*#__PURE__*/React.createElement(Price, {
+    className: priceClassName,
+    currency: currency,
+    unitPrice: difference
+  });
+};
+PriceDifference.defaultProps = {
+  className: ''
+};
+export default PriceDifference;

package/product/components/PriceDifference/style.js

@@ -1 +1,18 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var positive=css({color:colors.shade4,':before':{content:'"+"'}}).toString();var negative=css({color:"var(--color-primary, ".concat(colors.primary,")")}).toString();export default{positive:positive,negative:negative};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const positive = css({
+  color: colors.shade4,
+  ':before': {
+    content: '"+"'
+  }
+}).toString();
+const negative = css({
+  color: `var(--color-primary, ${colors.primary})`
+}).toString();
+export default {
+  positive,
+  negative
+};

package/product/components/PriceInfo/PriceInfo.connector.js

@@ -1,4 +1,15 @@
-import{connect}from'react-redux';import{makeGetShopSettingByKey}from"../../../core/selectors/shopSettings";import{SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT}from"../../../core/constants";/**
+import { connect } from 'react-redux';
+import { makeGetShopSettingByKey } from "../../../core/selectors/shopSettings";
+import { SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT } from "../../../core/constants";
+
+/**
  * Creates the mapStateToProps connector function.
  * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getShopSetting=makeGetShopSettingByKey(SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT,true);return function(state,props){return{displayPricePerMeasureUnit:getShopSetting(state,props)};};};export default connect(makeMapStateToProps);
+ */
+const makeMapStateToProps = () => {
+  const getShopSetting = makeGetShopSettingByKey(SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT, true);
+  return (state, props) => ({
+    displayPricePerMeasureUnit: getShopSetting(state, props)
+  });
+};
+export default connect(makeMapStateToProps);

package/product/components/PriceInfo/PriceInfo.js

@@ -1,5 +1,81 @@
-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;}import React,{useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import{i18n}from'@shopgate/engage/core';import{ConditionalWrapper}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import connect from"./PriceInfo.connector";var styles={container:css({color:themeConfig.colors.shade3}).toString(),noWrap:css({whiteSpace:'nowrap'}).toString()};/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import classNames from 'classnames';
+import { i18n } from '@shopgate/engage/core';
+import { ConditionalWrapper } from '@shopgate/engage/components';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import connect from "./PriceInfo.connector";
+const styles = {
+  container: css({
+    color: themeConfig.colors.shade3
+  }).toString(),
+  noWrap: css({
+    whiteSpace: 'nowrap'
+  }).toString()
+};
+
+/**
  * The price info component
  * @returns {JSX}
- */var PriceInfo=function PriceInfo(_ref){var product=_ref.product,className=_ref.className,wrapper=_ref.wrapper,displayPricePerMeasureUnit=_ref.displayPricePerMeasureUnit,externalCurrency=_ref.currency;var _ref2=product||{},_ref2$price=_ref2.price,price=_ref2$price===void 0?{}:_ref2$price,unitPriceRefValue=_ref2.unitPriceRefValue,unitPriceRefUom=_ref2.unitPriceRefUom;var pricePerMeasureUnit=price.pricePerMeasureUnit,info=price.info,currency=price.currency;var content=useMemo(function(){if(!displayPricePerMeasureUnit||!pricePerMeasureUnit){return info;}if(!pricePerMeasureUnit){return null;}var unitKey="formats.unitOfMeasurement.".concat(unitPriceRefUom);var unit=i18n.text(unitKey);if(unit===unitKey){unit=unitPriceRefUom;}return i18n.text('price.pricePerMeasurementFormat',{price:i18n.price(pricePerMeasureUnit,currency||externalCurrency,2),// Don't show base prices like 1.99€/1kg, but show 1.99€/kg instead
-refValue:!!unitPriceRefValue&&unitPriceRefValue!==1?unitPriceRefValue:'',refUom:unit});},[currency,displayPricePerMeasureUnit,externalCurrency,info,pricePerMeasureUnit,unitPriceRefUom,unitPriceRefValue]);if(!content){return null;}return React.createElement(ConditionalWrapper,{condition:!!wrapper,wrapper:wrapper},React.createElement("div",{className:classNames(styles.container,className,'engage__product__price-info',_defineProperty({},styles.noWrap,content!==info)),dangerouslySetInnerHTML:{__html:content},"data-test-id":"priceInfo: ".concat(content)}));};PriceInfo.defaultProps={product:null,className:null,currency:null,wrapper:null,displayPricePerMeasureUnit:false};export default connect(PriceInfo);
+ */
+const PriceInfo = ({
+  product,
+  className,
+  wrapper,
+  displayPricePerMeasureUnit,
+  currency: externalCurrency
+}) => {
+  const {
+    price = {},
+    unitPriceRefValue,
+    unitPriceRefUom
+  } = product || {};
+  const {
+    pricePerMeasureUnit,
+    info,
+    currency
+  } = price;
+  const content = useMemo(() => {
+    if (!displayPricePerMeasureUnit || !pricePerMeasureUnit) {
+      return info;
+    }
+    if (!pricePerMeasureUnit) {
+      return null;
+    }
+    const unitKey = `formats.unitOfMeasurement.${unitPriceRefUom}`;
+    let unit = i18n.text(unitKey);
+    if (unit === unitKey) {
+      unit = unitPriceRefUom;
+    }
+    return i18n.text('price.pricePerMeasurementFormat', {
+      price: i18n.price(pricePerMeasureUnit, currency || externalCurrency, 2),
+      // Don't show base prices like 1.99€/1kg, but show 1.99€/kg instead
+      refValue: !!unitPriceRefValue && unitPriceRefValue !== 1 ? unitPriceRefValue : '',
+      refUom: unit
+    });
+  }, [currency, displayPricePerMeasureUnit, externalCurrency, info, pricePerMeasureUnit, unitPriceRefUom, unitPriceRefValue]);
+  if (!content) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: !!wrapper,
+    wrapper: wrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.container, className, 'engage__product__price-info', {
+      [styles.noWrap]: content !== info
+    }),
+    dangerouslySetInnerHTML: {
+      __html: content
+    },
+    "data-test-id": `priceInfo: ${content}`
+  }));
+};
+PriceInfo.defaultProps = {
+  product: null,
+  className: null,
+  currency: null,
+  wrapper: null,
+  displayPricePerMeasureUnit: false
+};
+export default connect(PriceInfo);

package/product/components/PriceInfo/index.js

@@ -1 +1 @@
-export{default as PriceInfo}from"./PriceInfo";
+export { default as PriceInfo } from "./PriceInfo";

package/product/components/ProductBadges/index.js

@@ -1,5 +1,60 @@
-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,{useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import kebabCase from'lodash/kebabCase';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_BADGES}from"../../../components/constants";var styles={root:css({position:'absolute',paddingLeft:10,left:0,top:10,zIndex:5,transform:'translate3d(0, 0, 0)',display:'flex',pointerEvents:'none',width:'100%',' > *:empty':{display:'none'}}).toString()};/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import classNames from 'classnames';
+import kebabCase from 'lodash/kebabCase';
+import { SurroundPortals } from "../../../components";
+import { PORTAL_PRODUCT_BADGES } from "../../../components/constants";
+const styles = {
+  root: css({
+    position: 'absolute',
+    paddingLeft: 10,
+    left: 0,
+    top: 10,
+    zIndex: 5,
+    transform: 'translate3d(0, 0, 0)',
+    display: 'flex',
+    pointerEvents: 'none',
+    width: '100%',
+    ' > *:empty': {
+      display: 'none'
+    }
+  }).toString()
+};
+
+/**
  * The ProductBadges component
  * @param {Object} props The component props
  * @returns {JSX.Element}
- */var ProductBadges=function ProductBadges(_ref){var children=_ref.children,location=_ref.location,productId=_ref.productId,portalProps=_ref.portalProps,className=_ref.className;var props=useMemo(function(){return _extends({},portalProps,{location:location,productId:productId});},[location,portalProps,productId]);var locationClass=useMemo(function(){if(!location){return'';}return"product_badges__".concat(kebabCase(location));},[location]);return React.createElement("div",{className:classNames(styles.root,className,'product_badges',locationClass)},React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_BADGES,portalProps:props},children));};ProductBadges.defaultProps={portalProps:null,children:PropTypes.node,className:''};export default ProductBadges;
+ */
+const ProductBadges = ({
+  children,
+  location,
+  productId,
+  portalProps,
+  className
+}) => {
+  const props = useMemo(() => ({
+    ...portalProps,
+    location,
+    productId
+  }), [location, portalProps, productId]);
+  const locationClass = useMemo(() => {
+    if (!location) {
+      return '';
+    }
+    return `product_badges__${kebabCase(location)}`;
+  }, [location]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.root, className, 'product_badges', locationClass)
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PORTAL_PRODUCT_BADGES,
+    portalProps: props
+  }, children));
+};
+ProductBadges.defaultProps = {
+  portalProps: null,
+  children: PropTypes.node,
+  className: ''
+};
+export default ProductBadges;