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

package/product/components/ProductVariants/VariantAvailability.js

@@ -1,5 +1,35 @@
-import React,{memo}from'react';import PropTypes from'prop-types';import{Availability,SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_VARIANT_SELECT_PICKER_AVAILABILITY}from'@shopgate/pwa-common-commerce/product';import connect from"./VariantAvailability.connector";import styles from"./VariantAvailability.style";/**
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Availability, SurroundPortals } from '@shopgate/engage/components';
+import { PRODUCT_VARIANT_SELECT_PICKER_AVAILABILITY } from '@shopgate/pwa-common-commerce/product';
+import connect from "./VariantAvailability.connector";
+import styles from "./VariantAvailability.style";
+
+/**
  * The VariantAvailability component.
  * @param {Object} availability availability
  * @returns {JSX}
- */var VariantAvailability=function VariantAvailability(_ref){var availability=_ref.availability;if(!availability){return null;}var state=availability.state,text=availability.text;return React.createElement(SurroundPortals,{portalName:PRODUCT_VARIANT_SELECT_PICKER_AVAILABILITY,portalProps:availability},React.createElement(Availability,{className:styles,state:state,text:text}));};VariantAvailability.defaultProps={availability:null};export default connect(memo(VariantAvailability));
+ */
+const VariantAvailability = ({
+  availability
+}) => {
+  if (!availability) {
+    return null;
+  }
+  const {
+    state,
+    text
+  } = availability;
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PRODUCT_VARIANT_SELECT_PICKER_AVAILABILITY,
+    portalProps: availability
+  }, /*#__PURE__*/React.createElement(Availability, {
+    className: styles,
+    state: state,
+    text: text
+  }));
+};
+VariantAvailability.defaultProps = {
+  availability: null
+};
+export default connect(/*#__PURE__*/memo(VariantAvailability));

package/product/components/ProductVariants/VariantAvailability.style.js

@@ -1 +1,5 @@
-import{css}from'glamor';export default css({"float":'right',pointerEvents:'none'}).toString();
+import { css } from 'glamor';
+export default css({
+  float: 'right',
+  pointerEvents: 'none'
+}).toString();

package/product/components/ProductVariants/index.js

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

package/product/components/QuantityPicker/hooks.js

@@ -1,5 +1,26 @@
-import{useWidgetSettings}from"../../../core";/**
+import { useWidgetSettings } from "../../../core";
+
+/**
  * @param {Object} [productStock={}] product.stock object
  * @returns {Object}
- */export var useQuantityRange=function useQuantityRange(){var _ref,_ref2;var productStock=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var settings=useWidgetSettings('@shopgate/engage/product/QuantityPicker');if(!productStock){return null;}var min=(_ref=settings===null||settings===void 0?void 0:settings.minOrderQuantity)!==null&&_ref!==void 0?_ref:1;if(productStock.minOrderQuantity>0){min=productStock.minOrderQuantity;}var max=(_ref2=settings===null||settings===void 0?void 0:settings.maxOrderQuantity)!==null&&_ref2!==void 0?_ref2:50;if(productStock.maxOrderQuantity>0){max=Math.min(Math.max(min,max),productStock.maxOrderQuantity);}// Normalize min if max is finally less then min
-min=Math.min(min,max);return{min:min,max:max};};
+ */
+export const useQuantityRange = (productStock = {}) => {
+  const settings = useWidgetSettings('@shopgate/engage/product/QuantityPicker');
+  if (!productStock) {
+    return null;
+  }
+  let min = settings?.minOrderQuantity ?? 1;
+  if (productStock.minOrderQuantity > 0) {
+    min = productStock.minOrderQuantity;
+  }
+  let max = settings?.maxOrderQuantity ?? 50;
+  if (productStock.maxOrderQuantity > 0) {
+    max = Math.min(Math.max(min, max), productStock.maxOrderQuantity);
+  }
+  // Normalize min if max is finally less then min
+  min = Math.min(min, max);
+  return {
+    min,
+    max
+  };
+};

package/product/components/QuantityPicker/index.js

@@ -1,19 +1,109 @@
-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{css}from'glamor';import{logger}from"../../../core/helpers";import{useWidgetStyles}from"../../../core/hooks";import{I18n,SheetDrawer,SheetList}from"../../../components";import{useQuantityRange}from"./hooks";var deprecationWarning='QuantityPicker is deprecated in favor of the UnitQuantityPicker component.\nUnitQuantityPicker now additionally supports units and floating point values.';/** */function triggerDeprecation(){if(deprecationWarning){logger.warn(deprecationWarning);deprecationWarning=null;}}/**
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import { logger } from "../../../core/helpers";
+import { useWidgetStyles } from "../../../core/hooks";
+import { I18n, SheetDrawer, SheetList } from "../../../components";
+import { useQuantityRange } from "./hooks";
+let deprecationWarning = 'QuantityPicker is deprecated in favor of the UnitQuantityPicker component.\nUnitQuantityPicker now additionally supports units and floating point values.';
+
+/** */
+function triggerDeprecation() {
+  if (deprecationWarning) {
+    logger.warn(deprecationWarning);
+    deprecationWarning = null;
+  }
+}
+
+/**
  * The QuantityPicker component.
  * @deprecated Use UnitQuantityPicker to also support different units for quantity.
  * @returns {JSX}
- */var QuantityPicker=function QuantityPicker(_ref){var conditioner=_ref.conditioner,setQuantity=_ref.setQuantity,stock=_ref.stock;triggerDeprecation();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),opened=_useState2[0],setOpened=_useState2[1];var _useState3=useState(null),_useState4=_slicedToArray(_useState3,2),resolveValue=_useState4[0],setResolveValue=_useState4[1];var _useState5=useState(null),_useState6=_slicedToArray(_useState5,2),promiseResolve=_useState6[0],setPromiseResolve=_useState6[1];/**
+ */
+const QuantityPicker = ({
+  conditioner,
+  setQuantity,
+  stock
+}) => {
+  triggerDeprecation();
+  const [opened, setOpened] = useState(false);
+  const [resolveValue, setResolveValue] = useState(null);
+  const [promiseResolve, setPromiseResolve] = useState(null);
+
+  /**
    * Handle select quantity
    * @param {number} quantity quantity
-   */var handleSelectQuantity=function handleSelectQuantity(quantity){setQuantity(quantity);setResolveValue(true);setOpened(false);};/**
+   */
+  const handleSelectQuantity = quantity => {
+    setQuantity(quantity);
+    setResolveValue(true);
+    setOpened(false);
+  };
+
+  /**
    * Handle close / cancel sheet
-   */var handleCloseSheet=function handleCloseSheet(){if(resolveValue){return;}setResolveValue(false);setOpened(false);};/**
+   */
+  const handleCloseSheet = () => {
+    if (resolveValue) {
+      return;
+    }
+    setResolveValue(false);
+    setOpened(false);
+  };
+
+  /**
    * Open sheet to select quantity,
    * wait user selection before proceed
    * @returns {Promise<any>}
-   */var checkQuantity=function checkQuantity(){return new Promise(function(resolve){// Set resolve function
-setPromiseResolve(function(){return resolve;});// Open sheet
-setOpened(true);});};// Mount effect
-useEffect(function(){// Add most late conditioner
-conditioner.addConditioner('product-quantity',checkQuantity,100);},[conditioner]);// Update resolveValue effect
-useEffect(function(){if(resolveValue===null){return;}if(promiseResolve){promiseResolve(resolveValue);}setResolveValue(null);},[promiseResolve,resolveValue]);var styles=useWidgetStyles('@shopgate/engage/product/QuantityPicker');var quantityRange=useQuantityRange(stock);if(!stock){return null;}var min=quantityRange.min,max=quantityRange.max;var items=Array(max-min+1).fill(min).map(function(v,index){return String(v+index);});return React.createElement(SheetDrawer,{title:React.createElement(I18n.Text,{string:"product.quantity"}),isOpen:opened,onClose:handleCloseSheet,contentClassName:css(styles.sheet).toString()},React.createElement(SheetList,null,items.map(function(item){return React.createElement(SheetList.Item,{title:item,key:item,onClick:function onClick(){return handleSelectQuantity(parseInt(item,10));}});})));};QuantityPicker.defaultProps={stock:null};export default QuantityPicker;
+   */
+  const checkQuantity = () => new Promise(resolve => {
+    // Set resolve function
+    setPromiseResolve(() => resolve);
+
+    // Open sheet
+    setOpened(true);
+  });
+
+  // Mount effect
+  useEffect(() => {
+    // Add most late conditioner
+    conditioner.addConditioner('product-quantity', checkQuantity, 100);
+  }, [conditioner]);
+
+  // Update resolveValue effect
+  useEffect(() => {
+    if (resolveValue === null) {
+      return;
+    }
+    if (promiseResolve) {
+      promiseResolve(resolveValue);
+    }
+    setResolveValue(null);
+  }, [promiseResolve, resolveValue]);
+  const styles = useWidgetStyles('@shopgate/engage/product/QuantityPicker');
+  const quantityRange = useQuantityRange(stock);
+  if (!stock) {
+    return null;
+  }
+  const {
+    min,
+    max
+  } = quantityRange;
+  const items = Array(max - min + 1).fill(min).map((v, index) => String(v + index));
+  return /*#__PURE__*/React.createElement(SheetDrawer, {
+    title: /*#__PURE__*/React.createElement(I18n.Text, {
+      string: "product.quantity"
+    }),
+    isOpen: opened,
+    onClose: handleCloseSheet,
+    contentClassName: css(styles.sheet).toString()
+  }, /*#__PURE__*/React.createElement(SheetList, null, items.map(item => /*#__PURE__*/React.createElement(SheetList.Item, {
+    title: item,
+    key: item,
+    onClick: () => handleSelectQuantity(parseInt(item, 10))
+  }))));
+};
+QuantityPicker.defaultProps = {
+  stock: null
+};
+export default QuantityPicker;

package/product/components/Rating/connector.js

@@ -1,9 +1,26 @@
-import{connect}from'react-redux';import{getProductRating}from'@shopgate/pwa-common-commerce/product/selectors/product';/**
+import { connect } from 'react-redux';
+import { getProductRating } from '@shopgate/pwa-common-commerce/product/selectors/product';
+
+/**
  * @param {Object} state The current application state.
  * @param {Object} props The component props.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state,props){return{rating:getProductRating(state,props)};};/**
+ */
+const mapStateToProps = (state, props) => ({
+  rating: getProductRating(state, props)
+});
+
+/**
  * @param {Object} next The next component props.
  * @param {Object} prev The previous component props.
  * @return {boolean}
- */var areStatePropsEqual=function areStatePropsEqual(next,prev){if(!prev.rating&&next.rating){return false;}return true;};export default connect(mapStateToProps,null,null,{areStatePropsEqual:areStatePropsEqual});
+ */
+const areStatePropsEqual = (next, prev) => {
+  if (!prev.rating && next.rating) {
+    return false;
+  }
+  return true;
+};
+export default connect(mapStateToProps, null, null, {
+  areStatePropsEqual
+});

package/product/components/Rating/index.js

@@ -1,7 +1,62 @@
-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);}import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import appConfig from'@shopgate/pwa-common/helpers/config';import{RatingStars,SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_RATING}from'@shopgate/engage/product/constants';import RatingCount from'@shopgate/engage/reviews/components/Reviews/components/RatingCount';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import{container}from"./style";import connect from"./connector";var hasReviews=appConfig.hasReviews;/**
+import React, { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import appConfig from '@shopgate/pwa-common/helpers/config';
+import { RatingStars, SurroundPortals } from '@shopgate/engage/components';
+import { PRODUCT_RATING } from '@shopgate/engage/product/constants';
+import RatingCount from '@shopgate/engage/reviews/components/Reviews/components/RatingCount';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { container } from "./style";
+import connect from "./connector";
+const {
+  hasReviews
+} = appConfig;
+
+/**
  * Scrolls page to reviews excerpt.
- */var scrollToRating=function scrollToRating(){var reviewsExcerpt=document.getElementById('reviewsExcerpt');if(_typeof(reviewsExcerpt)!=='object'||!reviewsExcerpt||!reviewsExcerpt.offsetTop||!reviewsExcerpt.closest||!reviewsExcerpt.closest('article')){return;}reviewsExcerpt.closest('article').scroll(0,reviewsExcerpt.offsetTop-30);};/**
+ */
+const scrollToRating = () => {
+  const reviewsExcerpt = document.getElementById('reviewsExcerpt');
+  if (typeof reviewsExcerpt !== 'object' || !reviewsExcerpt || !reviewsExcerpt.offsetTop || !reviewsExcerpt.closest || !reviewsExcerpt.closest('article')) {
+    return;
+  }
+  reviewsExcerpt.closest('article').scroll(0, reviewsExcerpt.offsetTop - 30);
+};
+
+/**
  * The Rating component.
  * @param {Object} props The component props.
  * @return {JSX.Element}
- */var Rating=function Rating(_ref){var rating=_ref.rating;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/rating'),_useWidgetSettings$sh=_useWidgetSettings.showEmptyRatingStars,showEmptyRatingStars=_useWidgetSettings$sh===void 0?false:_useWidgetSettings$sh;var showRatings=useMemo(function(){if(hasReviews&&(rating===null||rating===void 0?void 0:rating.average)>0){return true;}if(hasReviews&&showEmptyRatingStars&&rating){return true;}return false;},[rating,showEmptyRatingStars]);return React.createElement(SurroundPortals,{portalName:PRODUCT_RATING},showRatings&&React.createElement("div",{className:container,onClick:scrollToRating,role:"presentation"},React.createElement(RatingStars,{value:rating.average,display:"big"}),React.createElement(RatingCount,{count:rating.count,prominent:true})));};Rating.defaultProps={rating:null};export default connect(memo(Rating));
+ */
+const Rating = ({
+  rating
+}) => {
+  const {
+    showEmptyRatingStars = false
+  } = useWidgetSettings('@shopgate/engage/rating');
+  const showRatings = useMemo(() => {
+    if (hasReviews && rating?.average > 0) {
+      return true;
+    }
+    if (hasReviews && showEmptyRatingStars && rating) {
+      return true;
+    }
+    return false;
+  }, [rating, showEmptyRatingStars]);
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PRODUCT_RATING
+  }, showRatings && /*#__PURE__*/React.createElement("div", {
+    className: container,
+    onClick: scrollToRating,
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement(RatingStars, {
+    value: rating.average,
+    display: "big"
+  }), /*#__PURE__*/React.createElement(RatingCount, {
+    count: rating.count,
+    prominent: true
+  })));
+};
+Rating.defaultProps = {
+  rating: null
+};
+export default connect(/*#__PURE__*/memo(Rating));

package/product/components/Rating/mock.js

@@ -2,4 +2,13 @@
  * Mock for getElementById
  * @param {Function} scrollSpy Element.scroll spy function.
  * @returns {Function}
- */var getElementById=function getElementById(scrollSpy){return function(){return{offsetTop:100,closest:function closest(){return{scroll:scrollSpy};}};};};export{getElementById};
+ */
+const getElementById = scrollSpy => () => ({
+  offsetTop: 100,
+  closest() {
+    return {
+      scroll: scrollSpy
+    };
+  }
+});
+export { getElementById };

package/product/components/Rating/spec.js

@@ -1,5 +1,55 @@
-import React from'react';import{Provider}from'react-redux';import configureStore from'redux-mock-store';import{mount}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import{setMocks,mockedStateWithTwoReviews,mockedStateWithoutReview}from'@shopgate/pwa-common-commerce/reviews/mock';import Rating from"./index";import{getElementById}from"./mock";setMocks();jest.mock('@shopgate/engage/components');describe('Rating (product header)',function(){var mockedStore=configureStore();/**
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import { mount } from 'enzyme';
+import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
+import { setMocks, mockedStateWithTwoReviews, mockedStateWithoutReview } from '@shopgate/pwa-common-commerce/reviews/mock';
+import Rating from "./index";
+import { getElementById } from "./mock";
+setMocks();
+jest.mock('@shopgate/engage/components');
+describe('Rating (product header)', () => {
+  const mockedStore = configureStore();
+
+  /**
    * Makes component.
    * @param {Object} state State
    * @returns {Object}
-   */var getComponent=function getComponent(state){return mount(React.createElement(Provider,{store:mockedStore(state)},React.createElement(Rating,{productId:"foo"})),mockRenderOptions);};describe('Rendering',function(){it('should render rating when data is available',function(){var component=getComponent(mockedStateWithTwoReviews);expect(component).toMatchSnapshot();});it('should render nothing when data is not available',function(){var component=getComponent(mockedStateWithoutReview);expect(component.isEmptyRender()).toBe(true);});});describe('Scroll on click',function(){var scrollSpy=jest.fn();it('should scroll to reviews when clicked',function(){jest.spyOn(document,'getElementById').mockImplementation(getElementById(scrollSpy));var component=getComponent(mockedStateWithTwoReviews);component.simulate('click');expect(scrollSpy.mock.calls[0][0]).toBe(0);expect(scrollSpy.mock.calls[0][1]).toBe(70);expect(scrollSpy).toHaveBeenCalled();document.getElementById.mockReset();document.getElementById.mockRestore();});it('should do nothing when clicked but no reviews excerpt element',function(){jest.spyOn(document,'getElementById').mockImplementation(function(){return null;});var component=getComponent(mockedStateWithTwoReviews);component.simulate('click');expect(scrollSpy.mock.calls.length).toBe(1);document.getElementById.mockReset();document.getElementById.mockRestore();});});});
+   */
+  const getComponent = state => mount(/*#__PURE__*/React.createElement(Provider, {
+    store: mockedStore(state)
+  }, /*#__PURE__*/React.createElement(Rating, {
+    productId: "foo"
+  })), mockRenderOptions);
+  describe('Rendering', () => {
+    it('should render rating when data is available', () => {
+      const component = getComponent(mockedStateWithTwoReviews);
+      expect(component).toMatchSnapshot();
+    });
+    it('should render nothing when data is not available', () => {
+      const component = getComponent(mockedStateWithoutReview);
+      expect(component.isEmptyRender()).toBe(true);
+    });
+  });
+  describe('Scroll on click', () => {
+    const scrollSpy = jest.fn();
+    it('should scroll to reviews when clicked', () => {
+      jest.spyOn(document, 'getElementById').mockImplementation(getElementById(scrollSpy));
+      const component = getComponent(mockedStateWithTwoReviews);
+      component.simulate('click');
+      expect(scrollSpy.mock.calls[0][0]).toBe(0);
+      expect(scrollSpy.mock.calls[0][1]).toBe(70);
+      expect(scrollSpy).toHaveBeenCalled();
+      document.getElementById.mockReset();
+      document.getElementById.mockRestore();
+    });
+    it('should do nothing when clicked but no reviews excerpt element', () => {
+      jest.spyOn(document, 'getElementById').mockImplementation(() => null);
+      const component = getComponent(mockedStateWithTwoReviews);
+      component.simulate('click');
+      expect(scrollSpy.mock.calls.length).toBe(1);
+      document.getElementById.mockReset();
+      document.getElementById.mockRestore();
+    });
+  });
+});

package/product/components/Rating/style.js

@@ -1 +1,12 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;var container=css({display:'flex',alignItems:'center',lineHeight:'12px',marginBottom:variables.gap.small}).toString();export{container};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+const container = css({
+  display: 'flex',
+  alignItems: 'center',
+  lineHeight: '12px',
+  marginBottom: variables.gap.small
+}).toString();
+export { container };

package/product/components/RelationsSlider/RelationsSheet.connector.js

@@ -1,8 +1,20 @@
-import{connect}from'react-redux';import{makeGetMaximumRelatedProducts}from'@shopgate/engage/product';/**
+import { connect } from 'react-redux';
+import { makeGetMaximumRelatedProducts } from '@shopgate/engage/product';
+
+/**
  * Creates the mapStateToProps connector function.
  * @returns {Function}
- */function makeMapStateToProps(){var getMaximumRelatedProducts=makeGetMaximumRelatedProducts();/**
+ */
+function makeMapStateToProps() {
+  const getMaximumRelatedProducts = makeGetMaximumRelatedProducts();
+
+  /**
   * @param {Object} state The application state.
   * @param {Object} props The component props.
   * @returns {Object}
-  */return function(state,props){return{products:getMaximumRelatedProducts(state,props)};};}export default connect(makeMapStateToProps);
+  */
+  return (state, props) => ({
+    products: getMaximumRelatedProducts(state, props)
+  });
+}
+export default connect(makeMapStateToProps);

package/product/components/RelationsSlider/RelationsSheet.js

@@ -1,4 +1,55 @@
-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,useCallback,Fragment,memo}from'react';import PropTypes from'prop-types';import{useWidgetSettings,useTheme}from"../../../core";import{SheetDrawer,I18n,Button}from"../../../components";import{WIDGET_ID}from"./constants";import{showMore,sheet}from"./style";import connect from"./RelationsSheet.connector";/**
+import React, { useState, useCallback, Fragment, memo } from 'react';
+import PropTypes from 'prop-types';
+import { useWidgetSettings, useTheme } from "../../../core";
+import { SheetDrawer, I18n, Button } from "../../../components";
+import { WIDGET_ID } from "./constants";
+import { showMore, sheet } from "./style";
+import connect from "./RelationsSheet.connector";
+
+/**
  * Shows a Sheet Drawer with all related products.
  * @returns {JSX}
- */var RelationsSheet=memo(function(_ref){var products=_ref.products.products;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),show=_useState2[0],setShow=_useState2[1];var _useWidgetSettings=useWidgetSettings(WIDGET_ID),headline=_useWidgetSettings.headline;var _useTheme=useTheme(),ProductGrid=_useTheme.ProductGrid;var handleOpen=useCallback(function(event){event.preventDefault();setShow(true);},[]);var handleClose=useCallback(function(){setShow(false);},[]);return React.createElement(Fragment,null,React.createElement(Button,{onClick:handleOpen,flat:true,className:showMore},React.createElement(I18n.Text,{string:"product.relations.showMore"})),React.createElement(SheetDrawer,{isOpen:show,title:headline,onClose:handleClose},React.createElement("div",{className:sheet},React.createElement(ProductGrid,{products:products,infiniteLoad:false}))));});RelationsSheet.defaultProps={products:{products:[],productCount:0}};export default connect(RelationsSheet);
+ */
+const RelationsSheet = /*#__PURE__*/memo(({
+  products: {
+    products
+  }
+}) => {
+  const [show, setShow] = useState(false);
+  const {
+    headline
+  } = useWidgetSettings(WIDGET_ID);
+  const {
+    ProductGrid
+  } = useTheme();
+  const handleOpen = useCallback(event => {
+    event.preventDefault();
+    setShow(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setShow(false);
+  }, []);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleOpen,
+    flat: true,
+    className: showMore
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "product.relations.showMore"
+  })), /*#__PURE__*/React.createElement(SheetDrawer, {
+    isOpen: show,
+    title: headline,
+    onClose: handleClose
+  }, /*#__PURE__*/React.createElement("div", {
+    className: sheet
+  }, /*#__PURE__*/React.createElement(ProductGrid, {
+    products: products,
+    infiniteLoad: false
+  }))));
+});
+RelationsSheet.defaultProps = {
+  products: {
+    products: [],
+    productCount: 0
+  }
+};
+export default connect(RelationsSheet);

package/product/components/RelationsSlider/RelationsSlider.connector.js

@@ -1,12 +1,37 @@
-import{connect}from'react-redux';import{fetchProductRelations,makeGetMaximumRelatedProducts}from'@shopgate/engage/product';/**
+import { connect } from 'react-redux';
+import { fetchProductRelations, makeGetMaximumRelatedProducts } from '@shopgate/engage/product';
+
+/**
  * Creates the mapStateToProps connector function.
  * @returns {Function}
- */function makeMapStateToProps(){var getMaximumRelatedProducts=makeGetMaximumRelatedProducts();/**
+ */
+function makeMapStateToProps() {
+  const getMaximumRelatedProducts = makeGetMaximumRelatedProducts();
+
+  /**
   * @param {Object} state The application state.
   * @param {Object} props The component props.
   * @returns {Object}
-  */return function(state,props){return{products:getMaximumRelatedProducts(state,props)};};}/**
+  */
+  return (state, props) => ({
+    products: getMaximumRelatedProducts(state, props)
+  });
+}
+
+/**
  * @param {Function} dispatch Dispatches an action.
  * @param {Object} props The component props.
  * @returns {Object}
- */var mapDispatchToProps=function mapDispatchToProps(dispatch,_ref){var productId=_ref.productId,type=_ref.type,_ref$limit=_ref.limit,limit=_ref$limit===void 0?100:_ref$limit;return{getRelations:function getRelations(){return dispatch(fetchProductRelations({productId:productId,type:type,limit:limit}));}};};export default connect(makeMapStateToProps,mapDispatchToProps);
+ */
+const mapDispatchToProps = (dispatch, {
+  productId,
+  type,
+  limit = 100
+}) => ({
+  getRelations: () => dispatch(fetchProductRelations({
+    productId,
+    type,
+    limit
+  }))
+});
+export default connect(makeMapStateToProps, mapDispatchToProps);

package/product/components/RelationsSlider/RelationsSlider.js

@@ -1,5 +1,35 @@
-import React from'react';import PropTypes from'prop-types';import{useWidgetSettings,useCurrentProduct}from"../../../core";import RelationsSliderContent from"./RelationsSliderContent";import{WIDGET_ID}from"./constants";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useWidgetSettings, useCurrentProduct } from "../../../core";
+import RelationsSliderContent from "./RelationsSliderContent";
+import { WIDGET_ID } from "./constants";
+
+/**
  * Renders the relations slider in the desired position on the Product Detail Page.
  * @param {string} desiredPosition The position the relations slider needs to render.
  * @returns {JSX}
- */var RelationsSlider=function RelationsSlider(_ref){var desiredPosition=_ref.desiredPosition;var _useWidgetSettings=useWidgetSettings(WIDGET_ID),type=_useWidgetSettings.type,position=_useWidgetSettings.position;var _useCurrentProduct=useCurrentProduct(),productId=_useCurrentProduct.productId;if(!type||position!==desiredPosition){return null;}return React.createElement(RelationsSliderContent,{productId:productId,type:type,max:10,limit:100});};RelationsSlider.defaultProps={desiredPosition:'header'};export default RelationsSlider;
+ */
+const RelationsSlider = ({
+  desiredPosition
+}) => {
+  const {
+    type,
+    position
+  } = useWidgetSettings(WIDGET_ID);
+  const {
+    productId
+  } = useCurrentProduct();
+  if (!type || position !== desiredPosition) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(RelationsSliderContent, {
+    productId: productId,
+    type: type,
+    max: 10,
+    limit: 100
+  });
+};
+RelationsSlider.defaultProps = {
+  desiredPosition: 'header'
+};
+export default RelationsSlider;

package/product/components/RelationsSlider/RelationsSliderContent.js

@@ -1,4 +1,72 @@
-import React,{useEffect,memo}from'react';import PropTypes from'prop-types';import{Swiper,Card}from'@shopgate/engage/components';import ProductCard from"../ProductCard";import RelationsSheet from"./RelationsSheet";import{useWidgetSettings,useCurrentProduct}from"../../../core";import connect from"./RelationsSlider.connector";import{WIDGET_ID}from"./constants";import*as styles from"./style";/**
+import React, { useEffect, memo } from 'react';
+import PropTypes from 'prop-types';
+import { Swiper, Card } from '@shopgate/engage/components';
+import ProductCard from "../ProductCard";
+import RelationsSheet from "./RelationsSheet";
+import { useWidgetSettings, useCurrentProduct } from "../../../core";
+import connect from "./RelationsSlider.connector";
+import { WIDGET_ID } from "./constants";
+import * as styles from "./style";
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var RelationsSliderContent=memo(function(_ref){var _ref$products=_ref.products,products=_ref$products.products,productsCount=_ref$products.productsCount,getRelations=_ref.getRelations;var _useWidgetSettings=useWidgetSettings(WIDGET_ID),headline=_useWidgetSettings.headline,hidePrice=_useWidgetSettings.hidePrice,hideRating=_useWidgetSettings.hideRating,titleRows=_useWidgetSettings.titleRows,showMoreButton=_useWidgetSettings.showMoreButton,type=_useWidgetSettings.type,_useWidgetSettings$sl=_useWidgetSettings.slidesPerView,slidesPerView=_useWidgetSettings$sl===void 0?2.3:_useWidgetSettings$sl;var _useCurrentProduct=useCurrentProduct(),productId=_useCurrentProduct.productId;useEffect(function(){getRelations();},[getRelations]);if(products.length===0){return null;}return React.createElement("div",{className:styles.container},!!headline&&React.createElement("h3",{className:styles.headline},headline),!!showMoreButton&&productsCount>10&&React.createElement(RelationsSheet,{limit:100,productId:productId,type:type}),React.createElement(Swiper,{slidesPerView:slidesPerView,classNames:{container:styles.sliderContainer}},products.map(function(product){return React.createElement(Swiper.Item,{key:product.id,className:styles.sliderItem},React.createElement(Card,{className:styles.card},React.createElement(ProductCard,{product:product,hidePrice:hidePrice,hideName:false,hideRating:hideRating,titleRows:titleRows})));})));});RelationsSliderContent.defaultProps={products:{products:[],productsCount:0}};export default connect(RelationsSliderContent);
+ */
+const RelationsSliderContent = /*#__PURE__*/memo(({
+  products: {
+    products,
+    productsCount
+  },
+  getRelations
+}) => {
+  const {
+    headline,
+    hidePrice,
+    hideRating,
+    titleRows,
+    showMoreButton,
+    type,
+    slidesPerView = 2.3
+  } = useWidgetSettings(WIDGET_ID);
+  const {
+    productId
+  } = useCurrentProduct();
+  useEffect(() => {
+    getRelations();
+  }, [getRelations]);
+  if (products.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, !!headline && /*#__PURE__*/React.createElement("h3", {
+    className: styles.headline
+  }, headline), !!showMoreButton && productsCount > 10 && /*#__PURE__*/React.createElement(RelationsSheet, {
+    limit: 100,
+    productId: productId,
+    type: type
+  }), /*#__PURE__*/React.createElement(Swiper, {
+    slidesPerView: slidesPerView,
+    classNames: {
+      container: styles.sliderContainer
+    }
+  }, products.map(product => /*#__PURE__*/React.createElement(Swiper.Item, {
+    key: product.id,
+    className: styles.sliderItem
+  }, /*#__PURE__*/React.createElement(Card, {
+    className: styles.card
+  }, /*#__PURE__*/React.createElement(ProductCard, {
+    product: product,
+    hidePrice: hidePrice,
+    hideName: false,
+    hideRating: hideRating,
+    titleRows: titleRows
+  }))))));
+});
+RelationsSliderContent.defaultProps = {
+  products: {
+    products: [],
+    productsCount: 0
+  }
+};
+export default connect(RelationsSliderContent);

package/product/components/RelationsSlider/constants.js

@@ -1 +1 @@
-export var WIDGET_ID='@shopgate/engage/product/RelationsSlider';
+export const WIDGET_ID = '@shopgate/engage/product/RelationsSlider';

package/product/components/RelationsSlider/index.js

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