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

package/product/components/ProductGrid/components/Layout/index.js

@@ -1,5 +1,45 @@
-import React from'react';import PropTypes from'prop-types';import{Grid}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()(function(theme,_ref){var columns=_ref.columns;return{root:{padding:'0 16px',':not(:empty)':{marginTop:16},display:'grid',gridGap:'0 16px',gridTemplateColumns:"repeat(".concat(columns,", 1fr)")}};});/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+const useStyles = makeStyles()((theme, {
+  columns
+}) => ({
+  root: {
+    padding: '0 16px',
+    ':not(:empty)': {
+      marginTop: 16
+    },
+    display: 'grid',
+    gridGap: '0 16px',
+    gridTemplateColumns: `repeat(${columns}, 1fr)`
+  }
+}));
+
+/**
  * The product grid layout component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Layout=function Layout(_ref2){var children=_ref2.children,columns=_ref2.columns,className=_ref2.className;var _useStyles=useStyles({columns:columns}),classes=_useStyles.classes,cx=_useStyles.cx;return React.createElement(Grid,{wrap:true,className:cx(classes.root,className,'theme__product-grid'),"data-test-id":"productGrid"},children);};Layout.defaultProps={className:null,children:null};export default Layout;
+ */
+const Layout = ({
+  children,
+  columns,
+  className
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles({
+    columns
+  });
+  return /*#__PURE__*/React.createElement(Grid, {
+    wrap: true,
+    className: cx(classes.root, className, 'theme__product-grid'),
+    "data-test-id": "productGrid"
+  }, children);
+};
+Layout.defaultProps = {
+  className: null,
+  children: null
+};
+export default Layout;

package/product/components/ProductGrid/index.js

@@ -1,4 +1,16 @@
-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,{useContext}from'react';import PropTypes from'prop-types';import{ViewContext,InfiniteContainer,LoadingIndicator}from'@shopgate/engage/components';import{ProductListTypeProvider}from'@shopgate/engage/product';import{ITEMS_PER_LOAD}from'@shopgate/engage/core/constants';import{useResponsiveValue}from'@shopgate/engage/styles';import Iterator from"./components/Iterator";import Layout from"./components/Layout";export var WIDGET_ID='@shopgate/engage/product/ProductGrid';/**
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.regexp.flags.js";
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { ViewContext, InfiniteContainer, LoadingIndicator } from '@shopgate/engage/components';
+import { ProductListTypeProvider } from '@shopgate/engage/product';
+import { ITEMS_PER_LOAD } from '@shopgate/engage/core/constants';
+import { useResponsiveValue } from '@shopgate/engage/styles';
+import Iterator from "./components/Iterator";
+import Layout from "./components/Layout";
+export const WIDGET_ID = '@shopgate/engage/product/ProductGrid';
+
+/**
  * The Product Grid component.
  * @param {Object} props The component props.
  * @param {Array} props.products The list of products to display.
@@ -19,4 +31,70 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * is enabled
  * @param {string} props.className Optional class name for the grid container
  * @returns {JSX.Element}
- */var ProductGrid=function ProductGrid(_ref){var flags=_ref.flags,infiniteLoad=_ref.infiniteLoad,handleGetProducts=_ref.handleGetProducts,products=_ref.products,totalProductCount=_ref.totalProductCount,requestHash=_ref.requestHash,scope=_ref.scope,meta=_ref.meta,className=_ref.className;var _useContext=useContext(ViewContext),getContentRef=_useContext.getContentRef;var columns=useResponsiveValue({xs:2,md:4});if(!infiniteLoad){return React.createElement(Layout,{columns:columns,className:className},React.createElement(ProductListTypeProvider,{type:"productGrid",subType:scope,meta:meta},products.map(function(product){return React.createElement(Iterator,_extends({display:flags,id:product.id,key:product.id},product));})));}return React.createElement(ProductListTypeProvider,{type:"productGrid",subType:scope,meta:meta},React.createElement(InfiniteContainer,{containerRef:getContentRef(),wrapper:function wrapper(props){return React.createElement(Layout,_extends({columns:columns,className:className},props));},iterator:Iterator,loader:handleGetProducts,items:products,columns:columns,loadingIndicator:React.createElement(LoadingIndicator,null),totalItems:totalProductCount,initialLimit:ITEMS_PER_LOAD,limit:ITEMS_PER_LOAD,requestHash:requestHash,enablePromiseBasedLoading:true}));};ProductGrid.defaultProps={flags:null,handleGetProducts:function handleGetProducts(){},infiniteLoad:true,products:null,requestHash:null,totalProductCount:null,scope:null,meta:null,className:null};export default ProductGrid;
+ */
+const ProductGrid = ({
+  flags,
+  infiniteLoad,
+  handleGetProducts,
+  products,
+  totalProductCount,
+  requestHash,
+  scope,
+  meta,
+  className
+}) => {
+  const {
+    getContentRef
+  } = useContext(ViewContext);
+  const columns = useResponsiveValue({
+    xs: 2,
+    md: 4
+  });
+  if (!infiniteLoad) {
+    return /*#__PURE__*/React.createElement(Layout, {
+      columns: columns,
+      className: className
+    }, /*#__PURE__*/React.createElement(ProductListTypeProvider, {
+      type: "productGrid",
+      subType: scope,
+      meta: meta
+    }, products.map(product => /*#__PURE__*/React.createElement(Iterator, _extends({
+      display: flags,
+      id: product.id,
+      key: product.id
+    }, product)))));
+  }
+  return /*#__PURE__*/React.createElement(ProductListTypeProvider, {
+    type: "productGrid",
+    subType: scope,
+    meta: meta
+  }, /*#__PURE__*/React.createElement(InfiniteContainer, {
+    containerRef: getContentRef(),
+    wrapper: props => /*#__PURE__*/React.createElement(Layout, _extends({
+      columns: columns,
+      className: className
+    }, props)),
+    iterator: Iterator,
+    loader: handleGetProducts,
+    items: products,
+    columns: columns,
+    loadingIndicator: /*#__PURE__*/React.createElement(LoadingIndicator, null),
+    totalItems: totalProductCount,
+    initialLimit: ITEMS_PER_LOAD,
+    limit: ITEMS_PER_LOAD,
+    requestHash: requestHash,
+    enablePromiseBasedLoading: true
+  }));
+};
+ProductGrid.defaultProps = {
+  flags: null,
+  handleGetProducts: () => {},
+  infiniteLoad: true,
+  products: null,
+  requestHash: null,
+  totalProductCount: null,
+  scope: null,
+  meta: null,
+  className: null
+};
+export default ProductGrid;

package/product/components/ProductGrid/spec.js

@@ -1 +1,51 @@
-import React from'react';import{mount}from'enzyme';import ProductGrid from'.';global.console.error=jest.fn();jest.mock('@shopgate/engage/core',function(){return{hasWebBridge:jest.fn(function(){return false;}),isIOSTheme:jest.fn(function(){return false;}),withForwardedRef:jest.fn(),withCurrentProduct:jest.fn(),useWidgetSettings:jest.fn().mockReturnValue({})};});jest.mock('@shopgate/engage/components',function(){var _jest$requireActual=jest.requireActual('@shopgate/engage/components/View/context'),ViewContext=_jest$requireActual.ViewContext;return{ViewContext:ViewContext,InfiniteContainer:function InfiniteContainer(){return null;},Grid:function Grid(){return null;}};});jest.mock("./components/Iterator",function(){return function Iterator(){return null;};});jest.mock('@shopgate/engage/product',function(){return{ProductListTypeProvider:function ProductListTypeProvider(_ref){var children=_ref.children;return children;},ProductListEntryProvider:function ProductListEntryProvider(_ref2){var children=_ref2.children;return children;}};});describe('<ProductGrid />',function(){it('should render with the InfiniteContainer',function(){var wrapper=mount(React.createElement(ProductGrid,{products:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('InfiniteContainer').exists()).toBe(true);expect(wrapper.find('Layout').exists()).toBe(false);});it('should render the original layout',function(){var wrapper=mount(React.createElement(ProductGrid,{infiniteLoad:false,products:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('InfiniteContainer').exists()).toBe(false);expect(wrapper.find('Layout').exists()).toBe(true);});});
+import React from 'react';
+import { mount } from 'enzyme';
+import ProductGrid from '.';
+global.console.error = jest.fn();
+jest.mock('@shopgate/engage/core', () => ({
+  hasWebBridge: jest.fn(() => false),
+  isIOSTheme: jest.fn(() => false),
+  withForwardedRef: jest.fn(),
+  withCurrentProduct: jest.fn(),
+  useWidgetSettings: jest.fn().mockReturnValue({})
+}));
+jest.mock('@shopgate/engage/components', () => {
+  const {
+    ViewContext
+  } = jest.requireActual('@shopgate/engage/components/View/context');
+  return {
+    ViewContext,
+    InfiniteContainer: () => null,
+    Grid: () => null
+  };
+});
+jest.mock("./components/Iterator", () => function Iterator() {
+  return null;
+});
+jest.mock('@shopgate/engage/product', () => ({
+  ProductListTypeProvider: ({
+    children
+  }) => children,
+  ProductListEntryProvider: ({
+    children
+  }) => children
+}));
+describe('<ProductGrid />', () => {
+  it('should render with the InfiniteContainer', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(ProductGrid, {
+      products: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('InfiniteContainer').exists()).toBe(true);
+    expect(wrapper.find('Layout').exists()).toBe(false);
+  });
+  it('should render the original layout', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(ProductGrid, {
+      infiniteLoad: false,
+      products: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('InfiniteContainer').exists()).toBe(false);
+    expect(wrapper.find('Layout').exists()).toBe(true);
+  });
+});

package/product/components/ProductGridPrice/index.js

@@ -1,6 +1,45 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import{Grid,Price,PriceStriked}from'@shopgate/engage/components';import{PriceInfo}from'@shopgate/engage/product/components';import{withPriceCalculation}from'@shopgate/engage/product/hocs';import styles from"./style";/**
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Grid, Price, PriceStriked } from '@shopgate/engage/components';
+import { PriceInfo } from '@shopgate/engage/product/components';
+import { withPriceCalculation } from '@shopgate/engage/product/hocs';
+import styles from "./style";
+
+/**
  * The ProductGridPrice component is supposed to be used to display prices at product grids. It
  * renders a row with the current price and a strike price when present. As same as the price info.
  * @param {Object} product A product entity.
  * @return {JSX.Element}
- */var ProductGridPrice=function ProductGridPrice(_ref){var product=_ref.product;var price=product.price;return React.createElement(Fragment,null,React.createElement(Grid,{className:"".concat(styles.priceWrapper," engage__product__product-grid-price"),wrap:true},React.createElement(Grid.Item,{grow:1},React.createElement(Price,{currency:price.currency,discounted:!!price.discount,unitPrice:price.unitPrice,unitPriceMin:price.unitPriceMin,unitPriceMax:price.unitPriceMax})),price.msrp>0&&price.unitPrice!==price.msrp&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.msrp,currency:price.currency})),!price.msrp&&price.unitPriceStriked>0&&price.unitPrice!==price.unitPriceStriked&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.unitPriceStriked,currency:price.currency}))),React.createElement(PriceInfo,{product:product,className:styles.basicPrice,wrapper:function wrapper(children){return React.createElement(Grid,null,React.createElement(Grid.Item,null,children));}}));};export default withPriceCalculation(ProductGridPrice);
+ */
+const ProductGridPrice = ({
+  product
+}) => {
+  const {
+    price
+  } = product;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, {
+    className: `${styles.priceWrapper} engage__product__product-grid-price`,
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Grid.Item, {
+    grow: 1
+  }, /*#__PURE__*/React.createElement(Price, {
+    currency: price.currency,
+    discounted: !!price.discount,
+    unitPrice: price.unitPrice,
+    unitPriceMin: price.unitPriceMin,
+    unitPriceMax: price.unitPriceMax
+  })), price.msrp > 0 && price.unitPrice !== price.msrp && /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement(PriceStriked, {
+    className: styles.strikedPrice,
+    value: price.msrp,
+    currency: price.currency
+  })), !price.msrp && price.unitPriceStriked > 0 && price.unitPrice !== price.unitPriceStriked && /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement(PriceStriked, {
+    className: styles.strikedPrice,
+    value: price.unitPriceStriked,
+    currency: price.currency
+  }))), /*#__PURE__*/React.createElement(PriceInfo, {
+    product: product,
+    className: styles.basicPrice,
+    wrapper: children => /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Item, null, children))
+  }));
+};
+export default withPriceCalculation(ProductGridPrice);

package/product/components/ProductGridPrice/style.js

@@ -1 +1,21 @@
-import{css}from'glamor';import{themeName}from'@shopgate/pwa-common/helpers/config';var isIOS=themeName.includes('ios');var priceWrapper=css(isIOS?{lineHeight:1.75,marginTop:2,alignItems:'center'}:{lineHeight:1.75}).toString();var basicPrice=css({fontSize:'0.875rem'}).toString();var strikedPrice=css(isIOS?{fontSize:'0.75rem'}:{}).toString();export default{basicPrice:basicPrice,priceWrapper:priceWrapper,strikedPrice:strikedPrice};
+import { css } from 'glamor';
+import { themeName } from '@shopgate/pwa-common/helpers/config';
+const isIOS = themeName.includes('ios');
+const priceWrapper = css(isIOS ? {
+  lineHeight: 1.75,
+  marginTop: 2,
+  alignItems: 'center'
+} : {
+  lineHeight: 1.75
+}).toString();
+const basicPrice = css({
+  fontSize: '0.875rem'
+}).toString();
+const strikedPrice = css(isIOS ? {
+  fontSize: '0.75rem'
+} : {}).toString();
+export default {
+  basicPrice,
+  priceWrapper,
+  strikedPrice
+};

package/product/components/ProductImage/ProductImagePlaceholder.js

@@ -1,5 +1,58 @@
-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,{useEffect,useMemo,useState}from'react';import PropTypes from'prop-types';import classnames from'classnames';import PlaceholderIcon from'@shopgate/pwa-ui-shared/icons/PlaceholderIcon';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{useLoadImage}from'@shopgate/engage/core';import styles from"./style";var colors=themeConfig.colors;/**
+import React, { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { useLoadImage } from '@shopgate/engage/core';
+import styles from "./style";
+const {
+  colors
+} = themeConfig;
+
+/**
  * The ProductImagePlaceholder component.
  * @param {Object} props The components props.
  * @returns {JSX}
- */var ProductImagePlaceholder=function ProductImagePlaceholder(_ref){var src=_ref.src,showInnerShadow=_ref.showInnerShadow,noBackground=_ref.noBackground;var _useState=useState(true),_useState2=_slicedToArray(_useState,2),showPlaceholder=_useState2[0],setShowPlaceholder=_useState2[1];var srcLoaded=useLoadImage(src);useEffect(function(){setShowPlaceholder(false);},[srcLoaded]);var contentStyles=useMemo(function(){if(srcLoaded){return{backgroundImage:"url(".concat(src,")"),backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center',backgroundColor:noBackground?'transparent':colors.light,position:'absolute'};}return{backgroundColor:noBackground?'transparent':colors.light};},[src,noBackground,srcLoaded]);var contentClasses=classnames(styles.placeholderContent,_defineProperty({},styles.innerShadow,showInnerShadow));return React.createElement("div",{className:contentClasses,style:contentStyles,"data-test-id":"placeHolder"},showPlaceholder&&React.createElement(PlaceholderIcon,{className:styles.placeholder}),!showPlaceholder&&' ');};ProductImagePlaceholder.defaultProps={src:null,noBackground:false,showInnerShadow:false};export default ProductImagePlaceholder;
+ */
+const ProductImagePlaceholder = ({
+  src,
+  showInnerShadow,
+  noBackground
+}) => {
+  const [showPlaceholder, setShowPlaceholder] = useState(true);
+  const srcLoaded = useLoadImage(src);
+  useEffect(() => {
+    setShowPlaceholder(false);
+  }, [srcLoaded]);
+  const contentStyles = useMemo(() => {
+    if (srcLoaded) {
+      return {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        backgroundColor: noBackground ? 'transparent' : colors.light,
+        position: 'absolute'
+      };
+    }
+    return {
+      backgroundColor: noBackground ? 'transparent' : colors.light
+    };
+  }, [src, noBackground, srcLoaded]);
+  const contentClasses = classnames(styles.placeholderContent, {
+    [styles.innerShadow]: showInnerShadow
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: contentClasses,
+    style: contentStyles,
+    "data-test-id": "placeHolder"
+  }, showPlaceholder && /*#__PURE__*/React.createElement(PlaceholderIcon, {
+    className: styles.placeholder
+  }), !showPlaceholder && ' ');
+};
+ProductImagePlaceholder.defaultProps = {
+  src: null,
+  noBackground: false,
+  showInnerShadow: false
+};
+export default ProductImagePlaceholder;

package/product/components/ProductImage/connector.js

@@ -1,5 +1,12 @@
-import{connect}from'react-redux';import{getProductImagePlaceholder}from"../../../core";/**
+import { connect } from 'react-redux';
+import { getProductImagePlaceholder } from "../../../core";
+
+/**
  * Maps the current application state to the component props.
  * @param {Object} state The current application state.
  * @return {Object} The populated component props.
- */var mapStateToProps=function mapStateToProps(state){return{placeholderSrc:getProductImagePlaceholder(state)};};export default connect(mapStateToProps);
+ */
+const mapStateToProps = state => ({
+  placeholderSrc: getProductImagePlaceholder(state)
+});
+export default connect(mapStateToProps);

package/product/components/ProductImage/index.js

@@ -1,31 +1,167 @@
-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 _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 _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _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,{Component}from'react';import PropTypes from'prop-types';import isEqual from'lodash/isEqual';import classnames from'classnames';import{logger}from'@shopgate/pwa-core';import appConfig,{themeConfig}from'@shopgate/pwa-common/helpers/config';import Image from'@shopgate/pwa-common/components/Image';import PlaceholderIcon from'@shopgate/pwa-ui-shared/icons/PlaceholderIcon';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{withWidgetSettings}from"../../../core/hocs/withWidgetSettings";import{PORTAL_PRODUCT_IMAGE}from"../../../components/constants";import ProductImagePlaceholder from"./ProductImagePlaceholder";import styles from"./style";import connect from"./connector";var colors=themeConfig.colors;/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+import classnames from 'classnames';
+import { logger } from '@shopgate/pwa-core';
+import appConfig, { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import Image from '@shopgate/pwa-common/components/Image';
+import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
+import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
+import { withWidgetSettings } from "../../../core/hocs/withWidgetSettings";
+import { PORTAL_PRODUCT_IMAGE } from "../../../components/constants";
+import ProductImagePlaceholder from "./ProductImagePlaceholder";
+import styles from "./style";
+import connect from "./connector";
+const {
+  colors
+} = themeConfig;
+
+/**
  * The product image component.
  * This component will behave like the core Image component with the additional
  * feature of showing a placeholder in case no src property has been passed
  * or the given source image cannot be loaded.
- */var ProductImage=/*#__PURE__*/function(_Component){/**
+ */
+class ProductImage extends Component {
+  /**
    * Component constructor
    * @param {Object} props The component properties
-   */function ProductImage(props){var _this2;_classCallCheck(this,ProductImage);_this2=_callSuper(this,ProductImage,[props]);/**
-   * Triggered when the image could not be loaded for some reason.
-   */_defineProperty(_this2,"imageLoadingFailed",function(){_this2.setState({showPlaceholder:true,imageLoadingFailed:true});});/**
-   * Sets the image ratio based on width and height.
-   * @return {number} The image ratio.
-   */_defineProperty(_this2,"getImageRatio",function(){if(_this2.props.ratio){var _this2$props$ratio2=_slicedToArray(_this2.props.ratio,2),x=_this2$props$ratio2[0],y=_this2$props$ratio2[1];return(y/x).toFixed(3);}var _this2$props$resoluti=_this2.props.resolutions[_this2.props.resolutions.length-1],width=_this2$props$resoluti.width,height=_this2$props$resoluti.height;return(height/width).toFixed(3);});logger.assert(!props.srcmap,'Use of srcmap prop is deprecated. Use resolutions instead');var showPlaceholder=!props.src&&(props.srcmap===null||props.srcmap.length===0);_this2.state={showPlaceholder:showPlaceholder,imageLoadingFailed:false};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Triggered when the image could not be loaded for some reason.
+     */
+    this.imageLoadingFailed = () => {
+      this.setState({
+        showPlaceholder: true,
+        imageLoadingFailed: true
+      });
+    };
+    /**
+     * Sets the image ratio based on width and height.
+     * @return {number} The image ratio.
+     */
+    this.getImageRatio = () => {
+      if (this.props.ratio) {
+        const [x, y] = this.props.ratio;
+        return (y / x).toFixed(3);
+      }
+      const {
+        width,
+        height
+      } = this.props.resolutions[this.props.resolutions.length - 1];
+      return (height / width).toFixed(3);
+    };
+    logger.assert(!props.srcmap, 'Use of srcmap prop is deprecated. Use resolutions instead');
+    const showPlaceholder = !props.src && (props.srcmap === null || props.srcmap.length === 0);
+    this.state = {
+      showPlaceholder,
+      imageLoadingFailed: false
+    };
+  }
+
+  /**
    * Called when the component props change.
    * @param {Object} nextProps The new component properties
-   */_inherits(ProductImage,_Component);return _createClass(ProductImage,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){// Disable the placeholder to give the real image a new chance to load.
-// If we do not have a src property set then just show the placeholder instead.
-var showPlaceholder=!nextProps.src&&(!nextProps.srcmap||nextProps.srcmap.length===0);this.setState({showPlaceholder:showPlaceholder});}/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // Disable the placeholder to give the real image a new chance to load.
+    // If we do not have a src property set then just show the placeholder instead.
+    const showPlaceholder = !nextProps.src && (!nextProps.srcmap || nextProps.srcmap.length === 0);
+    this.setState({
+      showPlaceholder
+    });
+  }
+
+  /**
    * Should component update given the new props?
    * @param {Object} nextProps The next component props.
    * @param {Object} nextState The next state.
    * @return {boolean} Update or not.
-   */},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps,nextState){return!isEqual(this.props,nextProps)||!isEqual(this.state,nextState);}},{key:"render",value:/**
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
+  }
+  /**
    * Renders the component.
    * @returns {JSX.Element}
-   */function render(){var _this$props=this.props,noBackground=_this$props.noBackground,className=_this$props.className,placeholderSrc=_this$props.placeholderSrc;var showInnerShadow=this.props.widgetSettings.showInnerShadow;if(typeof showInnerShadow==='undefined'){showInnerShadow=!appConfig.hideProductImageShadow;}if(this.state.imageLoadingFailed||this.state.showPlaceholder){// Image is not present or could not be loaded, show a placeholder.
-return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},React.createElement("div",{className:classnames(styles.placeholderContainer(this.getImageRatio()),_defineProperty(_defineProperty({},styles.innerShadow,showInnerShadow),className,!!className))},placeholderSrc?React.createElement(ProductImagePlaceholder,{src:placeholderSrc,showInnerShadow:showInnerShadow,noBackground:noBackground}):React.createElement("div",{"aria-hidden":true,className:styles.placeholderContent,"data-test-id":"placeHolder"},React.createElement(PlaceholderIcon,{className:styles.placeholder}))));}// Return the actual image.
-return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE,portalProps:{src:this.props.src,resolutions:this.props.resolutions}},React.createElement("div",{className:"".concat(className," engage__product__product-image")},React.createElement(Image,_extends({},this.props,{className:showInnerShadow?styles.innerShadow:'',backgroundColor:noBackground?'transparent':colors.light,onError:this.imageLoadingFailed,"aria-hidden":!this.props.alt}))));}}]);}(Component);/**
-   * See Image component manual for detailed description about the component property types.
-   */_defineProperty(ProductImage,"defaultProps",{alt:null,animating:true,className:null,forcePlaceholder:false,highestResolutionLoaded:function highestResolutionLoaded(){},noBackground:false,ratio:null,resolutions:[{width:50,height:50,blur:2},{width:440,height:440}],src:null,srcmap:null,placeholderSrc:null,widgetSettings:{}});export{ProductImage as UnwrappedProductImage};export default connect(withWidgetSettings(ProductImage,'@shopgate/engage/product/ProductImage'));
+   */
+  render() {
+    const {
+      noBackground,
+      className,
+      placeholderSrc
+    } = this.props;
+    let {
+      showInnerShadow
+    } = this.props.widgetSettings;
+    if (typeof showInnerShadow === 'undefined') {
+      showInnerShadow = !appConfig.hideProductImageShadow;
+    }
+    if (this.state.imageLoadingFailed || this.state.showPlaceholder) {
+      // Image is not present or could not be loaded, show a placeholder.
+      return /*#__PURE__*/React.createElement(SurroundPortals, {
+        portalName: PORTAL_PRODUCT_IMAGE
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles.placeholderContainer(this.getImageRatio()), {
+          [styles.innerShadow]: showInnerShadow,
+          [className]: !!className
+        })
+      }, placeholderSrc ? /*#__PURE__*/React.createElement(ProductImagePlaceholder, {
+        src: placeholderSrc,
+        showInnerShadow: showInnerShadow,
+        noBackground: noBackground
+      }) : /*#__PURE__*/React.createElement("div", {
+        "aria-hidden": true,
+        className: styles.placeholderContent,
+        "data-test-id": "placeHolder"
+      }, /*#__PURE__*/React.createElement(PlaceholderIcon, {
+        className: styles.placeholder
+      }))));
+    }
+
+    // Return the actual image.
+    return /*#__PURE__*/React.createElement(SurroundPortals, {
+      portalName: PORTAL_PRODUCT_IMAGE,
+      portalProps: {
+        src: this.props.src,
+        resolutions: this.props.resolutions
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${className} engage__product__product-image`
+    }, /*#__PURE__*/React.createElement(Image, _extends({}, this.props, {
+      className: showInnerShadow ? styles.innerShadow : '',
+      backgroundColor: noBackground ? 'transparent' : colors.light,
+      onError: this.imageLoadingFailed,
+      "aria-hidden": !this.props.alt
+    }))));
+  }
+}
+/**
+ * See Image component manual for detailed description about the component property types.
+ */
+ProductImage.defaultProps = {
+  alt: null,
+  animating: true,
+  className: null,
+  forcePlaceholder: false,
+  highestResolutionLoaded: () => {},
+  noBackground: false,
+  ratio: null,
+  resolutions: [{
+    width: 50,
+    height: 50,
+    blur: 2
+  }, {
+    width: 440,
+    height: 440
+  }],
+  src: null,
+  srcmap: null,
+  placeholderSrc: null,
+  widgetSettings: {}
+};
+export { ProductImage as UnwrappedProductImage };
+export default connect(withWidgetSettings(ProductImage, '@shopgate/engage/product/ProductImage'));

package/product/components/ProductImage/spec.js

@@ -1 +1,82 @@
-import React from'react';import{shallow}from'enzyme';import Image from'@shopgate/pwa-common/components/Image';import appConfig from'@shopgate/pwa-common/helpers/config';import PlaceholderIcon from'@shopgate/pwa-ui-shared/icons/PlaceholderIcon';import styles from"./style";import ProductImage from"./index";jest.unmock('@shopgate/pwa-core');jest.mock("../../../core/hocs/withWidgetSettings");jest.mock('@shopgate/pwa-common/helpers/config');jest.mock("./connector",function(){return function(Component){return Component;};});jest.mock('@shopgate/engage/components',function(){return{Image:function Image(){return null;}};});describe('<ProductImage />',function(){it('should render a placeholder if no src prop is provided',function(){var wrapper=shallow(React.createElement(ProductImage,null)).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(Image).length).toBe(0);expect(wrapper.find(PlaceholderIcon).length).toBe(1);});it('should render the image without a placeholder',function(){var wrapper=shallow(React.createElement(ProductImage,{src:"http://placehold.it/300x300"})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(Image).length).toBe(1);expect(wrapper.find(PlaceholderIcon).length).toBe(0);});it('should not apply an inner shadow to the placeholder if turned off via the app config',function(){jest.spyOn(appConfig,'hideProductImageShadow','get').mockReturnValue(true);var wrapper=shallow(React.createElement(ProductImage,null)).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(0);});it('should not apply an inner shadow to the image if turned off via the app config',function(){jest.spyOn(appConfig,'hideProductImageShadow','get').mockReturnValue(true);var wrapper=shallow(React.createElement(ProductImage,{src:"http://placehold.it/300x300"})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(0);});it('should not apply an inner shadow to the placeholder if turned off via the widget settings',function(){var wrapper=shallow(React.createElement(ProductImage,{widgetSettings:{showInnerShadow:false}})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(0);});it('should not apply an inner shadow to the image if turned off via the widget settings',function(){var wrapper=shallow(React.createElement(ProductImage,{src:"http://placehold.it/300x300",widgetSettings:{showInnerShadow:false}}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(0);});it('should apply an inner shadow to the placeholder if turned off via the widget settings',function(){var wrapper=shallow(React.createElement(ProductImage,{widgetSettings:{showInnerShadow:true}})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(1);});it('should apply an inner shadow to the image if turned off via the widget settings',function(){var wrapper=shallow(React.createElement(ProductImage,{src:"http://placehold.it/300x300",widgetSettings:{showInnerShadow:true}})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(1);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Image from '@shopgate/pwa-common/components/Image';
+import appConfig from '@shopgate/pwa-common/helpers/config';
+import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
+import styles from "./style";
+import ProductImage from "./index";
+jest.unmock('@shopgate/pwa-core');
+jest.mock("../../../core/hocs/withWidgetSettings");
+jest.mock('@shopgate/pwa-common/helpers/config');
+jest.mock("./connector", () => Component => Component);
+jest.mock('@shopgate/engage/components', () => ({
+  Image: () => null
+}));
+describe('<ProductImage />', () => {
+  it('should render a placeholder if no src prop is provided', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, null)).dive();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Image).length).toBe(0);
+    expect(wrapper.find(PlaceholderIcon).length).toBe(1);
+  });
+  it('should render the image without a placeholder', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+      src: "http://placehold.it/300x300"
+    })).dive();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Image).length).toBe(1);
+    expect(wrapper.find(PlaceholderIcon).length).toBe(0);
+  });
+  it('should not apply an inner shadow to the placeholder if turned off via the app config', () => {
+    jest.spyOn(appConfig, 'hideProductImageShadow', 'get').mockReturnValue(true);
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, null)).dive();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(0);
+  });
+  it('should not apply an inner shadow to the image if turned off via the app config', () => {
+    jest.spyOn(appConfig, 'hideProductImageShadow', 'get').mockReturnValue(true);
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+      src: "http://placehold.it/300x300"
+    })).dive();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(0);
+  });
+  it('should not apply an inner shadow to the placeholder if turned off via the widget settings', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+      widgetSettings: {
+        showInnerShadow: false
+      }
+    })).dive();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(0);
+  });
+  it('should not apply an inner shadow to the image if turned off via the widget settings', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+      src: "http://placehold.it/300x300",
+      widgetSettings: {
+        showInnerShadow: false
+      }
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(0);
+  });
+  it('should apply an inner shadow to the placeholder if turned off via the widget settings', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+      widgetSettings: {
+        showInnerShadow: true
+      }
+    })).dive();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(1);
+  });
+  it('should apply an inner shadow to the image if turned off via the widget settings', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+      src: "http://placehold.it/300x300",
+      widgetSettings: {
+        showInnerShadow: true
+      }
+    })).dive();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(1);
+  });
+});