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

package/product/components/Header/Tiers/spec.js

@@ -1 +1,63 @@
-import React from'react';import{shallow}from'enzyme';import Tiers from"./index";jest.mock("./connector",function(){return function(cmp){return cmp;};});describe('<Tiers />',function(){describe('Rendering with data',function(){it('should render tier prices when tier prices are available',function(){var price={tiers:[{from:1,to:2,unitPrice:92.5},{from:3,to:5,unitPrice:77.5},{from:6,to:null,unitPrice:68.5}],currency:'USD'};var wrapper=shallow(React.createElement(Tiers,{price:price}));expect(wrapper).toMatchSnapshot();});});describe('Rendering without data',function(){it('should render nothing when price data are not available ({})',function(){var wrapper=shallow(React.createElement(Tiers,{price:{}}));expect(wrapper).toBeEmptyRender();});it('should render nothing when price data are not available (null)',function(){var wrapper=shallow(React.createElement(Tiers,{price:null}));expect(wrapper).toBeEmptyRender();});it('should render nothing when tier prices are empty ([])',function(){var price={tiers:[],currency:'USD'};var wrapper=shallow(React.createElement(Tiers,{price:price}));expect(wrapper).toBeEmptyRender();});it('should render nothing when tier prices are not available (field missing)',function(){var price={currency:'USD'};var wrapper=shallow(React.createElement(Tiers,{price:price}));expect(wrapper).toBeEmptyRender();});});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Tiers from "./index";
+jest.mock("./connector", () => cmp => cmp);
+describe('<Tiers />', () => {
+  describe('Rendering with data', () => {
+    it('should render tier prices when tier prices are available', () => {
+      const price = {
+        tiers: [{
+          from: 1,
+          to: 2,
+          unitPrice: 92.5
+        }, {
+          from: 3,
+          to: 5,
+          unitPrice: 77.5
+        }, {
+          from: 6,
+          to: null,
+          unitPrice: 68.5
+        }],
+        currency: 'USD'
+      };
+      const wrapper = shallow(/*#__PURE__*/React.createElement(Tiers, {
+        price: price
+      }));
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('Rendering without data', () => {
+    it('should render nothing when price data are not available ({})', () => {
+      const wrapper = shallow(/*#__PURE__*/React.createElement(Tiers, {
+        price: {}
+      }));
+      expect(wrapper).toBeEmptyRender();
+    });
+    it('should render nothing when price data are not available (null)', () => {
+      const wrapper = shallow(/*#__PURE__*/React.createElement(Tiers, {
+        price: null
+      }));
+      expect(wrapper).toBeEmptyRender();
+    });
+    it('should render nothing when tier prices are empty ([])', () => {
+      const price = {
+        tiers: [],
+        currency: 'USD'
+      };
+      const wrapper = shallow(/*#__PURE__*/React.createElement(Tiers, {
+        price: price
+      }));
+      expect(wrapper).toBeEmptyRender();
+    });
+    it('should render nothing when tier prices are not available (field missing)', () => {
+      const price = {
+        currency: 'USD'
+      };
+      const wrapper = shallow(/*#__PURE__*/React.createElement(Tiers, {
+        price: price
+      }));
+      expect(wrapper).toBeEmptyRender();
+    });
+  });
+});

package/product/components/Header/Tiers/style.js

@@ -1 +1,17 @@
-import{css}from'glamor';var wrapper=css({marginTop:4,fontSize:'0.875rem'}).toString();var tier=css({display:'block',lineHeight:1.35}).toString();var price=css({fontWeight:500}).toString();export default{price:price,tier:tier,wrapper:wrapper};
+import { css } from 'glamor';
+const wrapper = css({
+  marginTop: 4,
+  fontSize: '0.875rem'
+}).toString();
+const tier = css({
+  display: 'block',
+  lineHeight: 1.35
+}).toString();
+const price = css({
+  fontWeight: 500
+}).toString();
+export default {
+  price,
+  tier,
+  wrapper
+};

package/product/components/Header/index.js

@@ -1 +1,3 @@
-export{default as PriceStriked}from"./PriceStriked";export{default as Shipping}from"./Shipping";export{default as Tiers}from"./Tiers";
+export { default as PriceStriked } from "./PriceStriked";
+export { default as Shipping } from "./Shipping";
+export { default as Tiers } from "./Tiers";

package/product/components/MapPriceHint/connector.js

@@ -1,3 +1,15 @@
-import{connect}from'react-redux';import{makeGetProductPriceData,makeGetProductMapPrice}from"../../selectors/price";/**
+import { connect } from 'react-redux';
+import { makeGetProductPriceData, makeGetProductMapPrice } from "../../selectors/price";
+
+/**
  * @return {Function}
- */function makeMapStateToProps(){var getProductPriceData=makeGetProductPriceData();var getProductMapPrice=makeGetProductMapPrice();return function(state,props){return{price:getProductPriceData(state,props),mapPrice:getProductMapPrice(state,props)};};}export default connect(makeMapStateToProps);
+ */
+function makeMapStateToProps() {
+  const getProductPriceData = makeGetProductPriceData();
+  const getProductMapPrice = makeGetProductMapPrice();
+  return (state, props) => ({
+    price: getProductPriceData(state, props),
+    mapPrice: getProductMapPrice(state, props)
+  });
+}
+export default connect(makeMapStateToProps);

package/product/components/MapPriceHint/helpers.js

@@ -1,8 +1,30 @@
-import{isBetween}from'@shopgate/pwa-common/helpers/date';/**
+import { isBetween } from '@shopgate/pwa-common/helpers/date';
+
+/**
  * Decide is map price hint should be shown for exact product
  * @param {Object} productPrice product.price object
  * @param {Object} mapPrice product.price.mapPricing
  * @returns {boolean}
- */export var showHint=function showHint(productPrice,mapPrice){var _ref=productPrice||{},_ref$unitPrice=_ref.unitPrice,unitPrice=_ref$unitPrice===void 0?0:_ref$unitPrice;var _ref2=mapPrice||{},_ref2$price=_ref2.price,price=_ref2$price===void 0?0:_ref2$price,startDate=_ref2.startDate,endDate=_ref2.endDate;// MAP price is active and higher than the actual price
-if(!price||price<=unitPrice){return false;}var start=new Date(startDate);var end=new Date(endDate);if(!start.getDate()||!end.getDate()){// dates invalid
-return false;}return isBetween(new Date(),start,end);};
+ */
+export const showHint = (productPrice, mapPrice) => {
+  const {
+    unitPrice = 0
+  } = productPrice || {};
+  const {
+    price = 0,
+    startDate,
+    endDate
+  } = mapPrice || {};
+
+  // MAP price is active and higher than the actual price
+  if (!price || price <= unitPrice) {
+    return false;
+  }
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  if (!start.getDate() || !end.getDate()) {
+    // dates invalid
+    return false;
+  }
+  return isBetween(new Date(), start, end);
+};

package/product/components/MapPriceHint/index.js

@@ -1,4 +1,46 @@
-import React from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import{SurroundPortals,I18n,TimeBoundary}from'@shopgate/engage/components';import{isBeta,useWidgetSettings,useWidgetStyles}from'@shopgate/engage/core';import{PRODUCT_MAP_PRICE}from'@shopgate/engage/product';import{showHint}from"./helpers";import connect from"./connector";var defaultStyle=css({fontSize:'0.75rem'}).toString();/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import classNames from 'classnames';
+import { SurroundPortals, I18n, TimeBoundary } from '@shopgate/engage/components';
+import { isBeta, useWidgetSettings, useWidgetStyles } from '@shopgate/engage/core';
+import { PRODUCT_MAP_PRICE } from '@shopgate/engage/product';
+import { showHint } from "./helpers";
+import connect from "./connector";
+const defaultStyle = css({
+  fontSize: '0.75rem'
+}).toString();
+
+/**
  * The Product Map Price Hint component.
  * @return {JSX}
- */var MapPriceHint=function MapPriceHint(_ref){var price=_ref.price,mapPrice=_ref.mapPrice;if(!isBeta()){return null;}var settings=useWidgetSettings('@shopgate/engage/product/MapPrice');if(!settings.showHint||!settings.hint){return null;}var styles=useWidgetStyles('@shopgate/engage/product/MapPrice');return React.createElement(SurroundPortals,{portalName:PRODUCT_MAP_PRICE},showHint(price,mapPrice)&&React.createElement(TimeBoundary,{start:new Date(mapPrice.startDate),end:new Date(mapPrice.endDate)},function(_ref2){var between=_ref2.between;return between&&React.createElement(I18n.Text,{string:settings.hint,className:classNames('engage__product__map-price-hint',defaultStyle,css(styles.hint).toString())});}));};MapPriceHint.defaultProps={mapPrice:null,price:null};export default connect(MapPriceHint);
+ */
+const MapPriceHint = ({
+  price,
+  mapPrice
+}) => {
+  if (!isBeta()) {
+    return null;
+  }
+  const settings = useWidgetSettings('@shopgate/engage/product/MapPrice');
+  if (!settings.showHint || !settings.hint) {
+    return null;
+  }
+  const styles = useWidgetStyles('@shopgate/engage/product/MapPrice');
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PRODUCT_MAP_PRICE
+  }, showHint(price, mapPrice) && /*#__PURE__*/React.createElement(TimeBoundary, {
+    start: new Date(mapPrice.startDate),
+    end: new Date(mapPrice.endDate)
+  }, ({
+    between
+  }) => between && /*#__PURE__*/React.createElement(I18n.Text, {
+    string: settings.hint,
+    className: classNames('engage__product__map-price-hint', defaultStyle, css(styles.hint).toString())
+  })));
+};
+MapPriceHint.defaultProps = {
+  mapPrice: null,
+  price: null
+};
+export default connect(MapPriceHint);

package/product/components/Media/FeaturedMedia.js

@@ -1,4 +1,31 @@
-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{SurroundPortals}from'@shopgate/engage/components';import{MEDIA_TYPE_IMAGE,MEDIA_TYPE_VIDEO}from'@shopgate/engage/product';import{PORTAL_PRODUCT_MEDIA}from"../../../components/constants";import MediaImage from"./MediaImage";import FeaturedVideo from"./FeaturedVideo";import{defaultProps,propTypes}from"./props";var types=_defineProperty(_defineProperty({},MEDIA_TYPE_IMAGE,MediaImage),MEDIA_TYPE_VIDEO,FeaturedVideo);/**
+import React from 'react';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@shopgate/engage/product';
+import { PORTAL_PRODUCT_MEDIA } from "../../../components/constants";
+import MediaImage from "./MediaImage";
+import FeaturedVideo from "./FeaturedVideo";
+import { defaultProps, propTypes } from "./props";
+const types = {
+  [MEDIA_TYPE_IMAGE]: MediaImage,
+  [MEDIA_TYPE_VIDEO]: FeaturedVideo
+};
+
+/**
  * The featured media component.
  * @returns {JSX}
- */var FeaturedMedia=function FeaturedMedia(_ref){var type=_ref.type,url=_ref.url,altText=_ref.altText;var TypeRenderer=types[type]||MediaImage;return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_MEDIA},React.createElement(TypeRenderer,{url:url,altText:altText}));};FeaturedMedia.defaultProps=defaultProps;export default FeaturedMedia;
+ */
+const FeaturedMedia = ({
+  type,
+  url,
+  altText
+}) => {
+  const TypeRenderer = types[type] || MediaImage;
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PORTAL_PRODUCT_MEDIA
+  }, /*#__PURE__*/React.createElement(TypeRenderer, {
+    url: url,
+    altText: altText
+  }));
+};
+FeaturedMedia.defaultProps = defaultProps;
+export default FeaturedMedia;

package/product/components/Media/FeaturedVideo.js

@@ -1,5 +1,12 @@
-import{defaultProps,propTypes}from"./props";/**
+import { defaultProps, propTypes } from "./props";
+
+/**
  * The featured video component.
  * @returns {JSX}
- */var FeaturedVideo=function FeaturedVideo(){return null;};// Not yet implemented
-FeaturedVideo.propTypes=propTypes;FeaturedVideo.defaultProps=defaultProps;FeaturedVideo.displayName='FeaturedVideo';export default FeaturedVideo;
+ */
+const FeaturedVideo = () => null; // Not yet implemented
+
+FeaturedVideo.propTypes = propTypes;
+FeaturedVideo.defaultProps = defaultProps;
+FeaturedVideo.displayName = 'FeaturedVideo';
+export default FeaturedVideo;

package/product/components/Media/MediaImage.js

@@ -1,4 +1,60 @@
-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;}import React,{useState,useEffect}from'react';import PropTypes from'prop-types';import classnames from'classnames';import Image from'@shopgate/pwa-common/components/Image';import appConfig from'@shopgate/pwa-common/helpers/config';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_IMAGE}from"../../../components/constants";import{useWidgetSettings}from"../../../core";import{defaultProps,propTypes}from"./props";import MediaPlaceholder from"./MediaPlaceholder";import{innerShadow}from"./style";/**
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Image from '@shopgate/pwa-common/components/Image';
+import appConfig from '@shopgate/pwa-common/helpers/config';
+import { SurroundPortals } from "../../../components";
+import { PORTAL_PRODUCT_IMAGE } from "../../../components/constants";
+import { useWidgetSettings } from "../../../core";
+import { defaultProps, propTypes } from "./props";
+import MediaPlaceholder from "./MediaPlaceholder";
+import { innerShadow } from "./style";
+
+/**
  * The featured image component.
  * @returns {JSX.Element}
- */var MediaImage=function MediaImage(_ref){var url=_ref.url,altText=_ref.altText,className=_ref.className,resolutions=_ref.resolutions;var _useState=useState(!url),_useState2=_slicedToArray(_useState,2),placeholder=_useState2[0],setPlaceholderEnabled=_useState2[1];var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/MediaImage'),_useWidgetSettings$sh=_useWidgetSettings.showInnerShadow,showInnerShadow=_useWidgetSettings$sh===void 0?!appConfig.hideProductImageShadow:_useWidgetSettings$sh;useEffect(function(){return setPlaceholderEnabled(!url);},[url]);var classes=classnames(className,_defineProperty({},innerShadow,showInnerShadow));if(placeholder){return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},React.createElement(MediaPlaceholder,{className:classes}));}return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE,portalProps:{src:url,resolutions:resolutions}},React.createElement(Image,{src:url,resolutions:resolutions,alt:altText,className:classes,backgroundColor:"transparent",onError:function onError(){return setPlaceholderEnabled(true);},animating:true}));};MediaImage.defaultProps={url:defaultProps.url,altText:defaultProps.altText,className:defaultProps.className,resolutions:undefined};export default MediaImage;
+ */
+const MediaImage = ({
+  url,
+  altText,
+  className,
+  resolutions
+}) => {
+  const [placeholder, setPlaceholderEnabled] = useState(!url);
+  const {
+    showInnerShadow = !appConfig.hideProductImageShadow
+  } = useWidgetSettings('@shopgate/engage/product/MediaImage');
+  useEffect(() => setPlaceholderEnabled(!url), [url]);
+  const classes = classnames(className, {
+    [innerShadow]: showInnerShadow
+  });
+  if (placeholder) {
+    return /*#__PURE__*/React.createElement(SurroundPortals, {
+      portalName: PORTAL_PRODUCT_IMAGE
+    }, /*#__PURE__*/React.createElement(MediaPlaceholder, {
+      className: classes
+    }));
+  }
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PORTAL_PRODUCT_IMAGE,
+    portalProps: {
+      src: url,
+      resolutions
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: url,
+    resolutions: resolutions,
+    alt: altText,
+    className: classes,
+    backgroundColor: "transparent",
+    onError: () => setPlaceholderEnabled(true),
+    animating: true
+  }));
+};
+MediaImage.defaultProps = {
+  url: defaultProps.url,
+  altText: defaultProps.altText,
+  className: defaultProps.className,
+  resolutions: undefined
+};
+export default MediaImage;

package/product/components/Media/MediaPlaceholder.js

@@ -1,4 +1,24 @@
-import React from'react';import classnames from'classnames';import PlaceholderIcon from'@shopgate/pwa-ui-shared/icons/PlaceholderIcon';import{defaultProps,propTypes}from"./props";import{placeholderContainer,placeholderContent,placeholderIcon}from"./style";/**
+import React from 'react';
+import classnames from 'classnames';
+import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
+import { defaultProps, propTypes } from "./props";
+import { placeholderContainer, placeholderContent, placeholderIcon } from "./style";
+
+/**
  * The media placeholder component.
  * @returns {JSX}
- */var MediaPlaceholder=function MediaPlaceholder(_ref){var className=_ref.className;return React.createElement("div",{className:classnames(placeholderContainer,className)},React.createElement("div",{className:placeholderContent,"data-test-id":"placeHolder"},React.createElement(PlaceholderIcon,{className:placeholderIcon})));};MediaPlaceholder.defaultProps={className:defaultProps.className};export default MediaPlaceholder;
+ */
+const MediaPlaceholder = ({
+  className
+}) => /*#__PURE__*/React.createElement("div", {
+  className: classnames(placeholderContainer, className)
+}, /*#__PURE__*/React.createElement("div", {
+  className: placeholderContent,
+  "data-test-id": "placeHolder"
+}, /*#__PURE__*/React.createElement(PlaceholderIcon, {
+  className: placeholderIcon
+})));
+MediaPlaceholder.defaultProps = {
+  className: defaultProps.className
+};
+export default MediaPlaceholder;

package/product/components/Media/helpers.js

@@ -1,6 +1,35 @@
-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{getImageFormat}from"../../../core/helpers/getImageFormat";var qualities={jpeg:75,png:100,webp:70};var defaultParams={width:440,height:440,quality:qualities.jpeg,fill:'fff',format:'jpeg'};/**
+import "core-js/modules/web.url.js";
+import "core-js/modules/web.url.to-json.js";
+import "core-js/modules/web.url-search-params.js";
+import { getImageFormat } from "../../../core/helpers/getImageFormat";
+const qualities = {
+  jpeg: 75,
+  png: 100,
+  webp: 70
+};
+const defaultParams = {
+  width: 440,
+  height: 440,
+  quality: qualities.jpeg,
+  fill: 'fff',
+  format: 'jpeg'
+};
+
+/**
  * Append platform dimensions and quality to image url.
  * @param {string} url image url
  * @param {Object} [params=undefined] params
  * @returns {string}
- */export var buildMediaImageUrl=function buildMediaImageUrl(url,params){var parsedUrl=new URL(url);var format=getImageFormat();var merged=_extends({},defaultParams,{format:format,quality:qualities[format]},params);Object.keys(merged).forEach(function(k){return parsedUrl.searchParams.set(k,merged[k]);});return parsedUrl.toString();};
+ */
+export const buildMediaImageUrl = (url, params) => {
+  const parsedUrl = new URL(url);
+  const format = getImageFormat();
+  const merged = {
+    ...defaultParams,
+    format,
+    quality: qualities[format],
+    ...params
+  };
+  Object.keys(merged).forEach(k => parsedUrl.searchParams.set(k, merged[k]));
+  return parsedUrl.toString();
+};

package/product/components/Media/index.js

@@ -1 +1,2 @@
-export{default as FeaturedMedia}from"./FeaturedMedia";export{default as MediaImage}from"./MediaImage";
+export { default as FeaturedMedia } from "./FeaturedMedia";
+export { default as MediaImage } from "./MediaImage";

package/product/components/Media/props.js

@@ -1 +1,13 @@
-import PropTypes from'prop-types';export var propTypes={type:PropTypes.oneOf(['image','video']),url:PropTypes.string,altText:PropTypes.string,className:PropTypes.oneOfType([PropTypes.string,PropTypes.shape])};export var defaultProps={type:'image',url:null,altText:null,className:null};
+import PropTypes from 'prop-types';
+export const propTypes = {
+  type: PropTypes.oneOf(['image', 'video']),
+  url: PropTypes.string,
+  altText: PropTypes.string,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.shape])
+};
+export const defaultProps = {
+  type: 'image',
+  url: null,
+  altText: null,
+  className: null
+};

package/product/components/Media/style.js

@@ -1 +1,41 @@
-import{css}from'glamor';import{themeShadows,themeColors}from'@shopgate/pwa-common/helpers/config';export var placeholderContainer=css({position:'relative',width:'100%',':before':{display:'block',content:'""',width:'100%',paddingTop:'100%'}}).toString();export var placeholderContent=css({position:'absolute',width:'100%',height:'100%',top:0,textAlign:'center'}).toString();var placeholderIconScale=0.65;export var placeholderIcon=css({position:'absolute',width:"".concat(placeholderIconScale*100,"% !important"),height:"".concat(placeholderIconScale*100,"% !important"),top:"".concat((1.0-placeholderIconScale)*50,"%"),left:"".concat((1.0-placeholderIconScale)*50,"%"),color:themeColors.placeholder}).toString();export var innerShadow=css({':after':{display:'block',content:'""',position:'absolute',top:0,right:0,bottom:0,left:0,boxShadow:themeShadows.productImage,pointerEvents:'none'}}).toString();
+import { css } from 'glamor';
+import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
+export const placeholderContainer = css({
+  position: 'relative',
+  width: '100%',
+  ':before': {
+    display: 'block',
+    content: '""',
+    width: '100%',
+    paddingTop: '100%'
+  }
+}).toString();
+export const placeholderContent = css({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  top: 0,
+  textAlign: 'center'
+}).toString();
+const placeholderIconScale = 0.65;
+export const placeholderIcon = css({
+  position: 'absolute',
+  width: `${placeholderIconScale * 100}% !important`,
+  height: `${placeholderIconScale * 100}% !important`,
+  top: `${(1.0 - placeholderIconScale) * 50}%`,
+  left: `${(1.0 - placeholderIconScale) * 50}%`,
+  color: themeColors.placeholder
+}).toString();
+export const innerShadow = css({
+  ':after': {
+    display: 'block',
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    boxShadow: themeShadows.productImage,
+    pointerEvents: 'none'
+  }
+}).toString();

package/product/components/MediaSlider/components/MediaImage/index.js

@@ -1,4 +1,26 @@
-import React from'react';import PropTypes from'prop-types';import{MediaImage as Image}from"../../../Media";import{full}from"../../style";import{PRODUCT_SLIDER_IMAGE_FORMATS}from"../../constants";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MediaImage as Image } from "../../../Media";
+import { full } from "../../style";
+import { PRODUCT_SLIDER_IMAGE_FORMATS } from "../../constants";
+
+/**
  * The product media video slide component.
  * @returns {JSX}
- */var MediaImage=function MediaImage(_ref){var media=_ref.media,onClick=_ref.onClick;return React.createElement("div",{onClick:onClick,onKeyDown:onClick,role:"button",tabIndex:"0",className:full},React.createElement(Image,{url:media.url,altText:media.altText,resolutions:PRODUCT_SLIDER_IMAGE_FORMATS}));};MediaImage.displayName='MediaSliderImage';export default MediaImage;
+ */
+const MediaImage = ({
+  media,
+  onClick
+}) => /*#__PURE__*/React.createElement("div", {
+  onClick: onClick,
+  onKeyDown: onClick,
+  role: "button",
+  tabIndex: "0",
+  className: full
+}, /*#__PURE__*/React.createElement(Image, {
+  url: media.url,
+  altText: media.altText,
+  resolutions: PRODUCT_SLIDER_IMAGE_FORMATS
+}));
+MediaImage.displayName = 'MediaSliderImage';
+export default MediaImage;

package/product/components/MediaSlider/components/MediaVideo/connector.js

@@ -1,5 +1,12 @@
-import{connect}from'react-redux';import{getClientConnectivityType}from'@shopgate/engage/core';/**
+import { connect } from 'react-redux';
+import { getClientConnectivityType } from '@shopgate/engage/core';
+
+/**
  * Maps the contents of the state to the component props.
  * @param {Object} state The current application state.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state){return{connectivityType:getClientConnectivityType(state)};};export default connect(mapStateToProps);
+ */
+const mapStateToProps = state => ({
+  connectivityType: getClientConnectivityType(state)
+});
+export default connect(mapStateToProps);

package/product/components/MediaSlider/components/MediaVideo/index.js

@@ -1,4 +1,38 @@
-import React from'react';import PropTypes from'prop-types';import{IntersectionVisibility,VideoPlayer}from"../../../../../components";import{useWidgetSettings}from"../../../../../core";import connect from"./connector";import{videoWrapper,videoResponsive,video}from"../../style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IntersectionVisibility, VideoPlayer } from "../../../../../components";
+import { useWidgetSettings } from "../../../../../core";
+import connect from "./connector";
+import { videoWrapper, videoResponsive, video } from "../../style";
+
+/**
  * The media video component.
  * @returns {JSX}
- */var MediaVideo=function MediaVideo(_ref){var connectivityType=_ref.connectivityType,media=_ref.media;var settings=useWidgetSettings('@shopgate/engage/product/MediaSlider');var autoPlay=settings.videos.autoPlay[connectivityType]||false;return React.createElement(IntersectionVisibility,null,function(_ref2){var visible=_ref2.visible,ratio=_ref2.ratio,setRef=_ref2.setRef;return React.createElement("div",{ref:setRef,className:videoWrapper},React.createElement("div",{className:videoResponsive},React.createElement(VideoPlayer,{url:media.url,playing:autoPlay&&visible&&ratio>0.8,width:"100%",height:"100%",controls:settings.videos.controls,muted:settings.videos.muted,loop:settings.videos.loop,className:video})));});};export default connect(MediaVideo);
+ */
+const MediaVideo = ({
+  connectivityType,
+  media
+}) => {
+  const settings = useWidgetSettings('@shopgate/engage/product/MediaSlider');
+  const autoPlay = settings.videos.autoPlay[connectivityType] || false;
+  return /*#__PURE__*/React.createElement(IntersectionVisibility, null, ({
+    visible,
+    ratio,
+    setRef
+  }) => /*#__PURE__*/React.createElement("div", {
+    ref: setRef,
+    className: videoWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: videoResponsive
+  }, /*#__PURE__*/React.createElement(VideoPlayer, {
+    url: media.url,
+    playing: autoPlay && visible && ratio > 0.8,
+    width: "100%",
+    height: "100%",
+    controls: settings.videos.controls,
+    muted: settings.videos.muted,
+    loop: settings.videos.loop,
+    className: video
+  }))));
+};
+export default connect(MediaVideo);

package/product/components/MediaSlider/connector.js

@@ -1,9 +1,34 @@
-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{connect}from'react-redux';import{makeGetProductMedia,makeGetProductFeaturedMedia,ITEM_PATH,MEDIA_TYPE_IMAGE,MEDIA_TYPE_VIDEO}from'@shopgate/engage/product';import{historyPush}from'@shopgate/pwa-common/actions/router';import{bin2hex}from'@shopgate/pwa-common/helpers/data';/**
+import { connect } from 'react-redux';
+import { makeGetProductMedia, makeGetProductFeaturedMedia, ITEM_PATH, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@shopgate/engage/product';
+import { historyPush } from '@shopgate/pwa-common/actions/router';
+import { bin2hex } from '@shopgate/pwa-common/helpers/data';
+
+/**
  * Creates the mapStateToProps connector function.
  * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getProductMedia=makeGetProductMedia();var getProductFeaturedMedia=makeGetProductFeaturedMedia();var types=[MEDIA_TYPE_VIDEO,MEDIA_TYPE_IMAGE];return function(state,props){return{media:getProductMedia(state,_extends({},props,{types:props.types||types})),featuredMedia:getProductFeaturedMedia(state,props)};};};/**
+ */
+const makeMapStateToProps = () => {
+  const getProductMedia = makeGetProductMedia();
+  const getProductFeaturedMedia = makeGetProductFeaturedMedia();
+  const types = [MEDIA_TYPE_VIDEO, MEDIA_TYPE_IMAGE];
+  return (state, props) => ({
+    media: getProductMedia(state, {
+      ...props,
+      types: props.types || types
+    }),
+    featuredMedia: getProductFeaturedMedia(state, props)
+  });
+};
+
+/**
 * Connects the dispatch function to a callable function in the props.
 * @param {Function} dispatch The redux dispatch function.
 * @param {Object} props The component props.
 * @return {Object} The extended component props.
-*/var mapDispatchToProps=function mapDispatchToProps(dispatch,props){return{navigate:function navigate(currentSlide){return dispatch(historyPush({pathname:"".concat(ITEM_PATH,"/").concat(bin2hex(props.productId),"/gallery/").concat(currentSlide)}));}};};export default connect(makeMapStateToProps,mapDispatchToProps);
+*/
+const mapDispatchToProps = (dispatch, props) => ({
+  navigate: currentSlide => dispatch(historyPush({
+    pathname: `${ITEM_PATH}/${bin2hex(props.productId)}/gallery/${currentSlide}`
+  }))
+});
+export default connect(makeMapStateToProps, mapDispatchToProps);

package/product/components/MediaSlider/constants.js

@@ -1,5 +1,15 @@
 /**
  * key in the product image collection
- */export var PRODUCT_SLIDER_IMAGE_COLLECTION_KEY='PRODUCT_SLIDER_IMAGES';/**
+ */
+export const PRODUCT_SLIDER_IMAGE_COLLECTION_KEY = 'PRODUCT_SLIDER_IMAGES';
+
+/**
  * themes value for the product slider image formats
- */export var PRODUCT_SLIDER_IMAGE_FORMATS=[{width:440,height:440},{width:1024,height:1024}];
+ */
+export const PRODUCT_SLIDER_IMAGE_FORMATS = [{
+  width: 440,
+  height: 440
+}, {
+  width: 1024,
+  height: 1024
+}];