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

package/product/components/MediaSlider/index.js

@@ -1,6 +1,78 @@
-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{SurroundPortals,Swiper}from'@shopgate/engage/components';import{PRODUCT_MEDIA}from'@shopgate/pwa-common-commerce/product';import{MEDIA_TYPE_IMAGE,MEDIA_TYPE_VIDEO}from"../../constants";import MediaImage from"./components/MediaImage";import MediaVideo from"./components/MediaVideo";import connect from"./connector";import{container}from"./style";var typeRenders=_defineProperty(_defineProperty({},MEDIA_TYPE_IMAGE,MediaImage),MEDIA_TYPE_VIDEO,MediaVideo);/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SurroundPortals, Swiper } from '@shopgate/engage/components';
+import { PRODUCT_MEDIA } from '@shopgate/pwa-common-commerce/product';
+import { MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from "../../constants";
+import MediaImage from "./components/MediaImage";
+import MediaVideo from "./components/MediaVideo";
+import connect from "./connector";
+import { container } from "./style";
+const typeRenders = {
+  [MEDIA_TYPE_IMAGE]: MediaImage,
+  [MEDIA_TYPE_VIDEO]: MediaVideo
+};
+
+/**
  * The product media slider component.
  * @returns {JSX.Element}
- */var MediaSlider=function MediaSlider(_ref){var navigate=_ref.navigate,featuredMedia=_ref.featuredMedia,media=_ref.media,ariaHidden=_ref['aria-hidden'],renderPlaceholder=_ref.renderPlaceholder,className=_ref.className,paginationType=_ref.paginationType;var currentSlide=0;/**
+ */
+const MediaSlider = ({
+  navigate,
+  featuredMedia,
+  media,
+  'aria-hidden': ariaHidden,
+  renderPlaceholder,
+  className,
+  paginationType
+}) => {
+  let currentSlide = 0;
+
+  /**
    * @param {number} slide slide
-   */var setCurrentSlide=function setCurrentSlide(slide){currentSlide=slide;};/** Handle click */var handleSlideClick=function handleSlideClick(){if(!media.length){return;}navigate(currentSlide);};if(!Array.isArray(media)||media.length===0){return renderPlaceholder(featuredMedia);}return React.createElement("div",{className:container},React.createElement(SurroundPortals,{portalName:PRODUCT_MEDIA},media&&React.createElement(Swiper,{paginationType:paginationType,loop:media.length>1,indicators:true,onSlideChange:setCurrentSlide,disabled:media.length===1,controls:media.some(function(m){return m.type===MEDIA_TYPE_VIDEO;}),className:className,"aria-hidden":ariaHidden},media.map(function(singleMedia){var Type=typeRenders[singleMedia.type];return React.createElement(Swiper.Item,{key:Object.values(singleMedia).join('_')},React.createElement(Type,{media:singleMedia,onClick:handleSlideClick}));}))));};MediaSlider.defaultProps={'aria-hidden':null,className:null,featuredMedia:null,paginationType:null,media:null,renderPlaceholder:function renderPlaceholder(featuredMedia){return React.createElement(MediaImage,featuredMedia);}};export default connect(MediaSlider);
+   */
+  const setCurrentSlide = slide => {
+    currentSlide = slide;
+  };
+
+  /** Handle click */
+  const handleSlideClick = () => {
+    if (!media.length) {
+      return;
+    }
+    navigate(currentSlide);
+  };
+  if (!Array.isArray(media) || media.length === 0) {
+    return renderPlaceholder(featuredMedia);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: container
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PRODUCT_MEDIA
+  }, media && /*#__PURE__*/React.createElement(Swiper, {
+    paginationType: paginationType,
+    loop: media.length > 1,
+    indicators: true,
+    onSlideChange: setCurrentSlide,
+    disabled: media.length === 1,
+    controls: media.some(m => m.type === MEDIA_TYPE_VIDEO),
+    className: className,
+    "aria-hidden": ariaHidden
+  }, media.map(singleMedia => {
+    const Type = typeRenders[singleMedia.type];
+    return /*#__PURE__*/React.createElement(Swiper.Item, {
+      key: Object.values(singleMedia).join('_')
+    }, /*#__PURE__*/React.createElement(Type, {
+      media: singleMedia,
+      onClick: handleSlideClick
+    }));
+  }))));
+};
+MediaSlider.defaultProps = {
+  'aria-hidden': null,
+  className: null,
+  featuredMedia: null,
+  paginationType: null,
+  media: null,
+  renderPlaceholder: featuredMedia => /*#__PURE__*/React.createElement(MediaImage, featuredMedia)
+};
+export default connect(MediaSlider);

package/product/components/MediaSlider/style.js

@@ -1 +1,32 @@
-import{css}from'glamor';export var full=css({width:'100%',height:'100%',transform:'translate3d(0, 0, 0)'});export var videoWrapper=css({width:'100%',height:'100%',backgroundColor:'black',paddingTop:'22%'});export var videoResponsive=css({position:'relative',overflow:'hidden',paddingTop:'56.25%'});export var video=css({position:'absolute',top:0,left:0,right:0,bottom:0});export var container=css({transform:'translate3d(0, 0, 0)',position:'relative',top:0,bottom:0,left:0,right:0});
+import { css } from 'glamor';
+export const full = css({
+  width: '100%',
+  height: '100%',
+  transform: 'translate3d(0, 0, 0)'
+});
+export const videoWrapper = css({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'black',
+  paddingTop: '22%'
+});
+export const videoResponsive = css({
+  position: 'relative',
+  overflow: 'hidden',
+  paddingTop: '56.25%'
+});
+export const video = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+});
+export const container = css({
+  transform: 'translate3d(0, 0, 0)',
+  position: 'relative',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+});

package/product/components/Options/components/Content/connector.js

@@ -1,10 +1,31 @@
-import{connect}from'react-redux';import isEqual from'lodash/isEqual';import{getProductOptions}from'@shopgate/pwa-common-commerce/product/selectors/options';/**
+import { connect } from 'react-redux';
+import isEqual from 'lodash/isEqual';
+import { getProductOptions } from '@shopgate/pwa-common-commerce/product/selectors/options';
+
+/**
  * Maps the contents of the state to the component props.
  * @param {Object} state The current application state.
  * @param {Object} props The current component props.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state,props){return{options:getProductOptions(state,props)};};/**
+ */
+const mapStateToProps = (state, props) => ({
+  options: getProductOptions(state, props)
+});
+
+/**
  * @param {Object} next The next component props.
  * @param {Object} prev The current component props.
  * @return {boolean}
- */var areStatePropsEqual=function areStatePropsEqual(next,prev){if(!prev.options&&next.options){return false;}if(!isEqual(prev.options,next.options)){return false;}return true;};export default connect(mapStateToProps,null,null,{areStatePropsEqual:areStatePropsEqual});
+ */
+const areStatePropsEqual = (next, prev) => {
+  if (!prev.options && next.options) {
+    return false;
+  }
+  if (!isEqual(prev.options, next.options)) {
+    return false;
+  }
+  return true;
+};
+export default connect(mapStateToProps, null, null, {
+  areStatePropsEqual
+});

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

@@ -1,16 +1,98 @@
-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,{PureComponent}from'react';import PropTypes from'prop-types';import{ProductContext}from'@shopgate/engage/product/contexts';import Option from"../Option";import TextOption from"../TextOption";import connect from"./connector";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { ProductContext } from '@shopgate/engage/product/contexts';
+import Option from "../Option";
+import TextOption from "../TextOption";
+import connect from "./connector";
+
+/**
  * The Product Options component.
- */var Options=/*#__PURE__*/function(_PureComponent){function Options(){var _this2;_classCallCheck(this,Options);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Options,[].concat(args));/**
-   * @param {Object} props The component props.
-   */_defineProperty(_this2,"handleStoreSelection",function(props){props.options.forEach(function(option){// Only options of type 'select' have a default value. Type 'text' has no default.
-if(option.type!=='select'){return;}_this2.context.setOption(option.id,option.items[0].value,option.items[0].price);});});return _this2;}_inherits(Options,_PureComponent);return _createClass(Options,[{key:"componentDidMount",value:/**
+ */
+class Options extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    /**
+     * @param {Object} props The component props.
+     */
+    this.handleStoreSelection = props => {
+      props.options.forEach(option => {
+        // Only options of type 'select' have a default value. Type 'text' has no default.
+        if (option.type !== 'select') {
+          return;
+        }
+        this.context.setOption(option.id, option.items[0].value, option.items[0].price);
+      });
+    };
+  }
+  /**
    * Triggers storeSelections when the component is mounted and has options set.
-   */function componentDidMount(){if(!this.context||!this.context.setOption||!this.props.options){return;}this.handleStoreSelection(this.props);}/**
+   */
+  componentDidMount() {
+    if (!this.context || !this.context.setOption || !this.props.options) {
+      return;
+    }
+    this.handleStoreSelection(this.props);
+  }
+
+  /**
    * When the component receives the product options
    * it will set the first value of each option as active
    * @param {Object} nextProps The incoming props.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.props.options&&nextProps.options){this.handleStoreSelection(nextProps);}}},{key:"render",value:/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!this.props.options && nextProps.options) {
+      this.handleStoreSelection(nextProps);
+    }
+  }
+  /**
    * Renders the component
    * @returns {JSX}
-   */function render(){var _this$props=this.props,options=_this$props.options,currentOptions=_this$props.currentOptions;if(!options){return null;}return React.createElement(ProductContext.Consumer,null,function(_ref){var setOption=_ref.setOption;return React.createElement("div",{"data-test-id":"optionsPicker",className:"engage__product__options"},options.map(function(option){switch(option.type){case'text':return React.createElement(TextOption,{key:option.id,id:option.id,label:option.label,value:currentOptions[option.id],info:option.info,onChange:setOption,required:option.required,price:option.price});case'select':return React.createElement(Option,{key:option.id,label:option.label,id:option.id,items:option.items,value:currentOptions[option.id],onChange:setOption});default:// unknown type
-return null;}}));});}}]);}(PureComponent);_defineProperty(Options,"contextType",ProductContext);_defineProperty(Options,"defaultProps",{currentOptions:{},options:null});export default connect(Options);
+   */
+  render() {
+    const {
+      options,
+      currentOptions
+    } = this.props;
+    if (!options) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
+      setOption
+    }) => /*#__PURE__*/React.createElement("div", {
+      "data-test-id": "optionsPicker",
+      className: "engage__product__options"
+    }, options.map(option => {
+      switch (option.type) {
+        case 'text':
+          return /*#__PURE__*/React.createElement(TextOption, {
+            key: option.id,
+            id: option.id,
+            label: option.label,
+            value: currentOptions[option.id],
+            info: option.info,
+            onChange: setOption,
+            required: option.required,
+            price: option.price
+          });
+        case 'select':
+          return /*#__PURE__*/React.createElement(Option, {
+            key: option.id,
+            label: option.label,
+            id: option.id,
+            items: option.items,
+            value: currentOptions[option.id],
+            onChange: setOption
+          });
+        default:
+          // unknown type
+          return null;
+      }
+    })));
+  }
+}
+Options.contextType = ProductContext;
+Options.defaultProps = {
+  currentOptions: {},
+  options: null
+};
+export default connect(Options);

package/product/components/Options/components/Content/spec.js

@@ -1,2 +1,72 @@
-import React from'react';import{mount,shallow}from'enzyme';import{PickerUtilize as Picker}from'@shopgate/engage/components';import Options from"./index";jest.mock('@shopgate/engage/components');jest.mock('@shopgate/engage/product/contexts',function(){return{ProductContext:{Consumer:jest.fn(function(_ref){var children=_ref.children;return children({setOption:jest.fn(),currency:'EUR'});})}};});// Mock the redux connect() method instead of providing a fake store.
-jest.mock("./connector",function(){return function(obj){var newObj=obj;var mockOptions=[{id:'test-id',type:'select',label:'label',items:[{currency:'USD',price:10,priceDifference:0},{currency:'USD',price:10,priceDifference:0}]}];newObj.defaultProps={options:mockOptions,currentOptions:{}};return newObj;};});describe('<Options />',function(){var mockOptions=[{id:'test-id',type:'select',label:'label',items:[{currency:'USD',price:10,priceDifference:0},{currency:'USD',price:10,priceDifference:0}]}];describe('Given the component was mounted to the DOM',function(){it('should match snapshot',function(){var wrapper=shallow(React.createElement(Options,{currentOptions:{}})).dive();expect(wrapper).toMatchSnapshot();});it('should render correct number of options',function(){var wrapper=mount(React.createElement(Options,{options:mockOptions}));var picker=wrapper.find(Picker);expect(picker.length).toBe(mockOptions.length);});});});
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { PickerUtilize as Picker } from '@shopgate/engage/components';
+import Options from "./index";
+jest.mock('@shopgate/engage/components');
+jest.mock('@shopgate/engage/product/components', () => ({
+  PriceDifference: () => null
+}));
+jest.mock('@shopgate/engage/product/contexts', () => {
+  const ReactCopy = jest.requireActual('react');
+  return {
+    ProductContext: ReactCopy.createContext({
+      setOption: jest.fn(),
+      currency: 'EUR'
+    })
+  };
+});
+
+// Mock the redux connect() method instead of providing a fake store.
+jest.mock("./connector", () => obj => {
+  const newObj = obj;
+  const mockOptions = [{
+    id: 'test-id',
+    type: 'select',
+    label: 'label',
+    items: [{
+      currency: 'USD',
+      price: 10,
+      priceDifference: 0
+    }, {
+      currency: 'USD',
+      price: 10,
+      priceDifference: 0
+    }]
+  }];
+  newObj.defaultProps = {
+    options: mockOptions,
+    currentOptions: {}
+  };
+  return newObj;
+});
+describe('<Options />', () => {
+  const mockOptions = [{
+    id: 'test-id',
+    type: 'select',
+    label: 'label',
+    items: [{
+      currency: 'USD',
+      price: 10,
+      priceDifference: 0
+    }, {
+      currency: 'USD',
+      price: 10,
+      priceDifference: 0
+    }]
+  }];
+  describe('Given the component was mounted to the DOM', () => {
+    it('should match snapshot', () => {
+      const wrapper = shallow(/*#__PURE__*/React.createElement(Options, {
+        currentOptions: {}
+      })).dive();
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('should render correct number of options', () => {
+      const wrapper = mount(/*#__PURE__*/React.createElement(Options, {
+        options: mockOptions
+      }));
+      const picker = wrapper.find(Picker);
+      expect(picker.length).toBe(mockOptions.length);
+    });
+  });
+});

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

@@ -1,4 +1,41 @@
-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 from'react';import PropTypes from'prop-types';import{I18n,PickerUtilize as Picker}from'@shopgate/engage/components';import{PriceDifference}from'@shopgate/engage/product/components';import{ProductContext}from'@shopgate/engage/product/contexts';/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { I18n, PickerUtilize as Picker } from '@shopgate/engage/components';
+import { PriceDifference } from '@shopgate/engage/product/components';
+import { ProductContext } from '@shopgate/engage/product/contexts';
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Option=function Option(_ref){var id=_ref.id,label=_ref.label,items=_ref.items,value=_ref.value,_onChange=_ref.onChange;return React.createElement(ProductContext.Consumer,null,function(_ref2){var currency=_ref2.currency;return React.createElement("div",{key:id,"data-test-id":label},React.createElement(Picker,{label:label,items:items.map(function(item){return _extends({},item,{rightComponent:React.createElement(PriceDifference,{currency:currency,difference:item.priceDifference})});}),placeholder:React.createElement(I18n.Text,{string:"product.pick_an_attribute",params:[label]}),value:value,onChange:function onChange(val){return _onChange(id,val,items.find(function(item){return item.value===val;}).price);}}));});};Option.defaultProps={value:null};export default Option;
+ */
+const Option = ({
+  id,
+  label,
+  items,
+  value,
+  onChange
+}) => /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
+  currency
+}) => /*#__PURE__*/React.createElement("div", {
+  key: id,
+  "data-test-id": label
+}, /*#__PURE__*/React.createElement(Picker, {
+  label: label,
+  items: items.map(item => ({
+    ...item,
+    rightComponent: /*#__PURE__*/React.createElement(PriceDifference, {
+      currency: currency,
+      difference: item.priceDifference
+    })
+  })),
+  placeholder: /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "product.pick_an_attribute",
+    params: [label]
+  }),
+  value: value,
+  onChange: val => onChange(id, val, items.find(item => item.value === val).price)
+})));
+Option.defaultProps = {
+  value: null
+};
+export default Option;

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

@@ -1,9 +1,73 @@
-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,{memo}from'react';import PropTypes from'prop-types';import{Grid,I18n}from'@shopgate/engage/components';import{ProductContext}from'@shopgate/engage/product/contexts';import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.string.replace.js";
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Grid, I18n } from '@shopgate/engage/components';
+import { ProductContext } from '@shopgate/engage/product/contexts';
+import styles from "./style";
+
+/**
  * The text option info component
  * @param {Object} props The component props
  * @param {Object} context The component context
  * @return {JSX}
- */var OptionInfo=function OptionInfo(_ref,context){var required=_ref.required,label=_ref.label,price=_ref.price,currency=_ref.currency,info=_ref.info,optionInfoId=_ref.optionInfoId;if(!required&&!price){return null;}var _context$i18n=context.i18n(),__=_context$i18n.__,_p=_context$i18n._p;var ariaPrice='';var ariaRequired='';if(price){ariaPrice=__('price.label',{price:_p(price,currency,2).replace('-',"\u2212")});}if(required){ariaRequired=__('common.required');}return React.createElement(Grid,{className:styles.info},required&&React.createElement(Grid.Item,{className:styles.required,"aria-hidden":true},React.createElement(I18n.Text,{string:"common.required"})),!!price&&React.createElement(Grid.Item,{grow:1,className:styles.price,"aria-hidden":true},"".concat(label,": "),React.createElement(I18n.Price,{currency:currency,price:price})),React.createElement("div",{hidden:true,id:optionInfoId},ariaRequired,ariaPrice,info));};OptionInfo.contextTypes={i18n:PropTypes.func};/**
+ */
+const OptionInfo = ({
+  required,
+  label,
+  price,
+  currency,
+  info,
+  optionInfoId
+}, context) => {
+  if (!required && !price) {
+    return null;
+  }
+  const {
+    __,
+    _p
+  } = context.i18n();
+  let ariaPrice = '';
+  let ariaRequired = '';
+  if (price) {
+    ariaPrice = __('price.label', {
+      price: _p(price, currency, 2).replace('-', '\u2212')
+    });
+  }
+  if (required) {
+    ariaRequired = __('common.required');
+  }
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: styles.info
+  }, required && /*#__PURE__*/React.createElement(Grid.Item, {
+    className: styles.required,
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "common.required"
+  })), !!price && /*#__PURE__*/React.createElement(Grid.Item, {
+    grow: 1,
+    className: styles.price,
+    "aria-hidden": true
+  }, `${label}: `, /*#__PURE__*/React.createElement(I18n.Price, {
+    currency: currency,
+    price: price
+  })), /*#__PURE__*/React.createElement("div", {
+    hidden: true,
+    id: optionInfoId
+  }, ariaRequired, ariaPrice, info));
+};
+OptionInfo.contextTypes = {
+  i18n: PropTypes.func
+};
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var OptionInfoWithProductContext=function OptionInfoWithProductContext(props){return React.createElement(ProductContext.Consumer,null,function(_ref2){var currency=_ref2.currency;return React.createElement(OptionInfo,_extends({currency:currency},props));});};export default memo(OptionInfoWithProductContext);export{OptionInfo};
+ */
+const OptionInfoWithProductContext = props => /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
+  currency
+}) => /*#__PURE__*/React.createElement(OptionInfo, _extends({
+  currency: currency
+}, props)));
+export default /*#__PURE__*/memo(OptionInfoWithProductContext);
+export { OptionInfo };

package/product/components/Options/components/TextOption/components/OptionInfo/spec.js

@@ -1 +1,62 @@
-import React from'react';import{shallow}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import{OptionInfo}from"./index";var optionInfoText='Some Text';var optionInfoId='some-id';jest.mock('@shopgate/engage/components',function(){var _jest$requireActual=jest.requireActual('@shopgate/pwa-common/components/Grid'),Grid=_jest$requireActual["default"];var _jest$requireActual2=jest.requireActual('@shopgate/pwa-common/components/I18n'),I18n=_jest$requireActual2["default"];return{Grid:Grid,I18n:I18n};});jest.mock('@shopgate/engage/product/contexts',function(){return{ProductContext:{Consumer:function Consumer(_ref){var children=_ref.children;return children({currency:'EUR'});}}};});describe('<OptionInfo />',function(){it('should not render when not required and no price',function(){var wrapper=shallow(React.createElement(OptionInfo,{required:false,label:"",price:0,currency:"EUR",info:optionInfoText,optionInfoId:optionInfoId}),mockRenderOptions);expect(wrapper).toBeEmptyRender();});it('should render required element',function(){var wrapper=shallow(React.createElement(OptionInfo,{required:true,label:"",price:0,currency:"EUR",info:optionInfoText,optionInfoId:optionInfoId}),mockRenderOptions).dive();expect(wrapper).toMatchSnapshot();});it('should render price element',function(){var wrapper=shallow(React.createElement(OptionInfo,{required:false,label:"Label",price:10,currency:"EUR",info:optionInfoText,optionInfoId:optionInfoId}),mockRenderOptions).dive();expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
+import { OptionInfo } from "./index";
+const optionInfoText = 'Some Text';
+const optionInfoId = 'some-id';
+jest.mock('@shopgate/engage/components', () => {
+  const {
+    default: Grid
+  } = jest.requireActual('@shopgate/pwa-common/components/Grid');
+  const {
+    default: I18n
+  } = jest.requireActual('@shopgate/pwa-common/components/I18n');
+  return {
+    Grid,
+    I18n
+  };
+});
+jest.mock('@shopgate/engage/product/contexts', () => ({
+  ProductContext: {
+    Consumer: ({
+      children
+    }) => children({
+      currency: 'EUR'
+    })
+  }
+}));
+describe('<OptionInfo />', () => {
+  it('should not render when not required and no price', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(OptionInfo, {
+      required: false,
+      label: "",
+      price: 0,
+      currency: "EUR",
+      info: optionInfoText,
+      optionInfoId: optionInfoId
+    }), mockRenderOptions);
+    expect(wrapper).toBeEmptyRender();
+  });
+  it('should render required element', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(OptionInfo, {
+      required: true,
+      label: "",
+      price: 0,
+      currency: "EUR",
+      info: optionInfoText,
+      optionInfoId: optionInfoId
+    }), mockRenderOptions).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render price element', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(OptionInfo, {
+      required: false,
+      label: "Label",
+      price: 10,
+      currency: "EUR",
+      info: optionInfoText,
+      optionInfoId: optionInfoId
+    }), mockRenderOptions).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -1 +1,23 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var info=css({marginTop:variables.gap.xsmall,padding:"0 ".concat(variables.gap.big,"px")}).toString();var required=css({color:"var(--color-text-medium-emphasis, ".concat(colors.shade9,")"),fontSize:'0.825rem'}).toString();var price=css({textAlign:'right',fontSize:'0.825rem'}).toString();export default{info:info,required:required,price:price};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors,
+  variables
+} = themeConfig;
+const info = css({
+  marginTop: variables.gap.xsmall,
+  padding: `0 ${variables.gap.big}px`
+}).toString();
+const required = css({
+  color: `var(--color-text-medium-emphasis, ${colors.shade9})`,
+  fontSize: '0.825rem'
+}).toString();
+const price = css({
+  textAlign: 'right',
+  fontSize: '0.825rem'
+}).toString();
+export default {
+  info,
+  required,
+  price
+};