@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/filter/components/FilterPageContent/components/Selector/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Selector from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/core', () => ({
   hasWebBridge: () => false,
   i18n: {
@@ -22,7 +23,7 @@ const values = [{
 }];
 describe('Filter: <Selector />', () => {
   it('should render with minimum props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Selector, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Selector, {
       id: "foo",
       label: "bar",
       values: values

package/filter/components/FilterPageContent/index.js

@@ -13,6 +13,7 @@ import ResetButton from "./components/ResetButton";
  * @param {React.ComponentType} props.AppBarComponent The component to be rendered as the app bar
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FilterPageContent = ({
   AppBarComponent
 }) => {
@@ -25,50 +26,51 @@ const FilterPageContent = ({
     getSelectedFilterValues,
     updateSelectedFilterValues
   } = useFilterPage();
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PORTAL_FILTER_PAGE_CONTENT
-  }, AppBarComponent && /*#__PURE__*/React.createElement(AppBarComponent, {
-    title: "titles.filter",
-    right: /*#__PURE__*/React.createElement(ApplyButton, {
-      disabled: !hasChanged,
-      onClick: applyFilters
-    })
-  }), apiFilters.map(filter => {
-    const portalProps = {
-      filter
-    };
-    const value = getSelectedFilterValues(filter.id);
-    if (filter.type === FILTER_TYPE_RANGE) {
-      return /*#__PURE__*/React.createElement(Fragment, {
-        key: filter.id
-      }, /*#__PURE__*/React.createElement(SurroundPortals, {
-        portalName: PORTAL_FILTER_PRICE_RANGE,
-        portalProps: portalProps
-      }, /*#__PURE__*/React.createElement(PriceSlider, {
+  return /*#__PURE__*/_jsxs(SurroundPortals, {
+    portalName: PORTAL_FILTER_PAGE_CONTENT,
+    children: [AppBarComponent && /*#__PURE__*/_jsx(AppBarComponent, {
+      title: "titles.filter",
+      right: /*#__PURE__*/_jsx(ApplyButton, {
+        disabled: !hasChanged,
+        onClick: applyFilters
+      })
+    }), apiFilters.map(filter => {
+      const portalProps = {
+        filter
+      };
+      const value = getSelectedFilterValues(filter.id);
+      if (filter.type === FILTER_TYPE_RANGE) {
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: /*#__PURE__*/_jsx(SurroundPortals, {
+            portalName: PORTAL_FILTER_PRICE_RANGE,
+            portalProps: portalProps,
+            children: /*#__PURE__*/_jsx(PriceSlider, {
+              id: filter.id,
+              min: filter.minimum,
+              max: filter.maximum,
+              onChange: updateSelectedFilterValues,
+              value: value
+            }, filter.id)
+          })
+        }, filter.id);
+      }
+      return /*#__PURE__*/_jsx(Selector, {
         id: filter.id,
-        key: filter.id,
-        min: filter.minimum,
-        max: filter.maximum,
+        label: filter.label,
+        values: filter.values,
+        multi: filter.type === FILTER_TYPE_MULTISELECT,
         onChange: updateSelectedFilterValues,
-        value: value
-      })));
-    }
-    return /*#__PURE__*/React.createElement(Selector, {
-      id: filter.id,
-      key: filter.id,
-      label: filter.label,
-      values: filter.values,
-      multi: filter.type === FILTER_TYPE_MULTISELECT,
-      onChange: updateSelectedFilterValues,
-      selected: value
-    });
-  }), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: "<sm",
-    appAlways: true
-  }, /*#__PURE__*/React.createElement(ResetButton, {
-    disabled: !resetPossible,
-    onClick: resetAllFilters
-  })));
+        selected: value
+      }, filter.id);
+    }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+      breakpoint: "<sm",
+      appAlways: true,
+      children: /*#__PURE__*/_jsx(ResetButton, {
+        disabled: !resetPossible,
+        onClick: resetAllFilters
+      })
+    })]
+  });
 };
 FilterPageContent.defaultProps = {
   AppBarComponent: null

package/filter/components/FilterPageContentWithProvider/index.js

@@ -20,6 +20,7 @@ import Content from "../FilterPageContent";
  * @param {React.ComponentType} [props.AppBarComponent] The component to be rendered as the app bar
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FilterPageContentWithProvider = ({
   categoryId,
   searchPhrase,
@@ -27,15 +28,16 @@ const FilterPageContentWithProvider = ({
   filters,
   parentRouteId,
   AppBarComponent
-}) => /*#__PURE__*/React.createElement(FilterPageProvider, {
+}) => /*#__PURE__*/_jsx(FilterPageProvider, {
   activeFilters: activeFilters,
   categoryId: categoryId,
   searchPhrase: searchPhrase,
   filters: filters,
-  parentRouteId: parentRouteId
-}, /*#__PURE__*/React.createElement(Content, {
-  AppBarComponent: AppBarComponent
-}));
+  parentRouteId: parentRouteId,
+  children: /*#__PURE__*/_jsx(Content, {
+    AppBarComponent: AppBarComponent
+  })
+});
 FilterPageContentWithProvider.defaultProps = {
   activeFilters: null,
   filters: null,

package/filter/components/PriceSlider/components/Label/index.js

@@ -5,6 +5,7 @@ import appConfig from '@shopgate/pwa-common/helpers/config';
 import { I18n } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core';
 import styles from "../../style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   currency
 } = appConfig;
@@ -79,76 +80,84 @@ function Label(props) {
     style: 'currency',
     currency
   }).format('0').replace('0.00', '');
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.editableContainer
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.srOnly
-  }, i18n.text('price.range', {
-    fromPrice: i18n.price(priceMin, currency, false),
-    toPrice: i18n.price(priceMax, currency, false)
-  })), /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "price.range",
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(I18n.Placeholder, {
-    forKey: "fromPrice"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.price,
-    style: {
-      minWidth: priceLength
-    },
-    ref: minRef
-  }, /*#__PURE__*/React.createElement(I18n.Price, {
-    price: priceMin,
-    currency: currency,
-    fractions: false
-  }))), /*#__PURE__*/React.createElement(I18n.Placeholder, {
-    forKey: "toPrice"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.price,
-    style: {
-      minWidth: priceLength
-    },
-    ref: maxRef
-  }, /*#__PURE__*/React.createElement(I18n.Price, {
-    price: priceMax,
-    currency: currency,
-    fractions: false
-  })))), /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": true,
-    hidden: true,
-    id: "price-slider-currency-label"
-  }, currencySymbol), /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    inputMode: "numeric",
-    pattern: "[0-9]*",
-    id: "priceMin",
-    name: "priceMin",
-    value: minValue,
-    onChange: handleChangeMin,
-    onClick: handleFieldClick,
-    style: {
-      width: priceLength,
-      left: minOffset
-    },
-    className: styles.editableField,
-    "aria-label": i18n.text('price.range_from'),
-    "aria-describedby": "price-slider-currency-label"
-  }), /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    inputMode: "numeric",
-    pattern: "[0-9]*",
-    id: "priceMax",
-    name: "priceMax",
-    value: maxValue,
-    onChange: handleChangeMax,
-    onClick: handleFieldClick,
-    style: {
-      width: priceLength,
-      left: maxOffset
-    },
-    className: styles.editableField,
-    "aria-label": i18n.text('price.range_to'),
-    "aria-describedby": "price-slider-currency-label"
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.editableContainer,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: styles.srOnly,
+      children: i18n.text('price.range', {
+        fromPrice: i18n.price(priceMin, currency, false),
+        toPrice: i18n.price(priceMax, currency, false)
+      })
+    }), /*#__PURE__*/_jsxs(I18n.Text, {
+      string: "price.range",
+      "aria-hidden": true,
+      children: [/*#__PURE__*/_jsx(I18n.Placeholder, {
+        forKey: "fromPrice",
+        children: /*#__PURE__*/_jsx("span", {
+          className: styles.price,
+          style: {
+            minWidth: priceLength
+          },
+          ref: minRef,
+          children: /*#__PURE__*/_jsx(I18n.Price, {
+            price: priceMin,
+            currency: currency,
+            fractions: false
+          })
+        })
+      }), /*#__PURE__*/_jsx(I18n.Placeholder, {
+        forKey: "toPrice",
+        children: /*#__PURE__*/_jsx("span", {
+          className: styles.price,
+          style: {
+            minWidth: priceLength
+          },
+          ref: maxRef,
+          children: /*#__PURE__*/_jsx(I18n.Price, {
+            price: priceMax,
+            currency: currency,
+            fractions: false
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      hidden: true,
+      id: "price-slider-currency-label",
+      children: currencySymbol
+    }), /*#__PURE__*/_jsx("input", {
+      type: "number",
+      inputMode: "numeric",
+      pattern: "[0-9]*",
+      id: "priceMin",
+      name: "priceMin",
+      value: minValue,
+      onChange: handleChangeMin,
+      onClick: handleFieldClick,
+      style: {
+        width: priceLength,
+        left: minOffset
+      },
+      className: styles.editableField,
+      "aria-label": i18n.text('price.range_from'),
+      "aria-describedby": "price-slider-currency-label"
+    }), /*#__PURE__*/_jsx("input", {
+      type: "number",
+      inputMode: "numeric",
+      pattern: "[0-9]*",
+      id: "priceMax",
+      name: "priceMax",
+      value: maxValue,
+      onChange: handleChangeMax,
+      onClick: handleFieldClick,
+      style: {
+        width: priceLength,
+        left: maxOffset
+      },
+      className: styles.editableField,
+      "aria-label": i18n.text('price.range_to'),
+      "aria-describedby": "price-slider-currency-label"
+    })]
+  });
 }
 export default /*#__PURE__*/memo(Label);

package/filter/components/PriceSlider/components/Label/spec.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Label from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/core');
 describe('PriceSlider: <Label />', () => {
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Label, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Label, {
       onChange: () => {},
       priceLength: "5",
       priceMax: 999,

package/filter/components/PriceSlider/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
@@ -9,49 +10,54 @@ import styles from "./style";
 /**
  * The PriceSlider component.
  */
-class PriceSlider extends PureComponent {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let PriceSlider = /*#__PURE__*/function (_PureComponent) {
   /**
    * The constructor.
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function PriceSlider(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
     /**
      * The callback function that is given to the RangeSlider.
      * @param {Array} value The lower and upper boundary of the set range.
      */
-    this.onChange = value => {
+    _this.onChange = value => {
       const roundedValue = [Math.floor(value[0]), Math.ceil(value[1])];
-      this.setState({
+      _this.setState({
         value
       });
-      this.props.onChange(this.props.id, roundedValue);
+      _this.props.onChange(_this.props.id, roundedValue);
     };
     let initialValue = [props.min, props.max];
     if (Array.isArray(props.value) && props.value.length > 0) {
       initialValue = props.value;
     }
-    this.state = {
+    _this.state = {
       value: initialValue
     };
+    return _this;
   }
 
   /**
    * Updates the value state.
    * @param {Object} nextProps The next component props.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(PriceSlider, _PureComponent);
+  var _proto = PriceSlider.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (!isEqual(nextProps.value, this.props.value)) {
       this.setState({
         value: nextProps.value
       });
     }
-  }
+  };
   /**
    * Renders the component (template).
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       min,
       max
@@ -70,25 +76,29 @@ class PriceSlider extends PureComponent {
      * to reserve space for the currency symbol and a little spacing around.
      */
     const priceLength = `${(max / 100).toString().length + 2}ch`;
-    return /*#__PURE__*/React.createElement(FilterItem, null, /*#__PURE__*/React.createElement("div", {
-      className: styles.wrapper,
-      "data-test-id": "priceRangeSlider"
-    }, /*#__PURE__*/React.createElement(Label, {
-      priceLength: priceLength,
-      priceMax: priceMax,
-      priceMin: priceMin,
-      onChange: this.onChange
-    }), /*#__PURE__*/React.createElement(RangeSlider, {
-      classNames: styles.rangeSlider,
-      easing: this.props.useLinearEasing ? 'linear' : 'exponential',
-      factor: 3,
-      max: max,
-      min: min,
-      onChange: this.onChange,
-      value: this.state.value
-    })));
-  }
-}
+    return /*#__PURE__*/_jsx(FilterItem, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: styles.wrapper,
+        "data-test-id": "priceRangeSlider",
+        children: [/*#__PURE__*/_jsx(Label, {
+          priceLength: priceLength,
+          priceMax: priceMax,
+          priceMin: priceMin,
+          onChange: this.onChange
+        }), /*#__PURE__*/_jsx(RangeSlider, {
+          classNames: styles.rangeSlider,
+          easing: this.props.useLinearEasing ? 'linear' : 'exponential',
+          factor: 3,
+          max: max,
+          min: min,
+          onChange: this.onChange,
+          value: this.state.value
+        })]
+      })
+    });
+  };
+  return PriceSlider;
+}(PureComponent);
 PriceSlider.defaultProps = {
   useLinearEasing: false,
   max: 100,

package/filter/components/PriceSlider/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import PriceSlider from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/filter', () => ({
   FilterItem: ({
@@ -9,13 +10,13 @@ jest.mock('@shopgate/engage/filter', () => ({
 }));
 describe('Filter: <PriceSlider />', () => {
   it('should render with default props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(PriceSlider, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(PriceSlider, {
       id: "foo"
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render with custom props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(PriceSlider, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(PriceSlider, {
       id: "foo",
       values: [5, 50]
     }));

package/filter/hocs/withSort.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import SortContext from "../providers/SortProvider.context";
 
@@ -8,6 +7,7 @@ import SortContext from "../providers/SortProvider.context";
  * @param {string|null} prop The optional prop name.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const getInjectedProps = (context, prop) => {
   if (!prop) {
     return context;
@@ -32,7 +32,12 @@ const withSort = (WrappedComponent, options = {}) => {
    * @param {Object} props The component props.
    * @returns {JSX}
    */
-  const WithSort = props => /*#__PURE__*/React.createElement(SortContext.Consumer, null, sortContext => /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, getInjectedProps(sortContext, options.prop), props)));
+  const WithSort = props => /*#__PURE__*/_jsx(SortContext.Consumer, {
+    children: sortContext => /*#__PURE__*/_jsx(WrappedComponent, {
+      ...getInjectedProps(sortContext, options.prop),
+      ...props
+    })
+  });
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithSort.displayName = `WithSort(${displayName})`;
   return WithSort;

package/filter/providers/FilterPageProvider.js

@@ -14,6 +14,7 @@ import { buildInitialFilters, buildUpdatedFilters } from "../helpers";
  * @param {Object} props The component props.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const mapStateToProps = (state, props) => ({
   filters: getFiltersByHash(state, props)
 });
@@ -192,7 +193,7 @@ const FilterPageProvider = ({
     } = initialFilters[filterId];
 
     // Prepare the update payload
-    let stateValue = [...selectedValues];
+    let stateValue = [].concat(selectedValues);
 
     /**
      * No initial values where set for this filter, and the update contains no values. So we
@@ -261,9 +262,10 @@ const FilterPageProvider = ({
     updateSelectedFilterValues,
     applyFilters
   }), [hasChanged, resetPossible, filtersProp, mergedFilters, resetAllFilters, resetChangedFilters, getSelectedFilterValues, updateSelectedFilterValues, applyFilters]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 FilterPageProvider.defaultProps = {
   children: null,

package/filter/providers/SortProvider.js

@@ -11,6 +11,7 @@ import connect from "./SortProvider.connector";
  * Sort Provider
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const SortProvider = ({
   children,
   defaultOrder,
@@ -57,9 +58,10 @@ const SortProvider = ({
     scope,
     updateRoute
   }), [currentOrder, defaultOrder, options, scope, updateRoute]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 SortProvider.defaultProps = {
   children: null,

package/locations/components/Cart/CartChangeFulfillmentMethod.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FulfillmentSheet } from "../FulfillmentSheet";
 import connect from "./CartChangeFulfillmentMethod.connector";
@@ -15,6 +15,7 @@ import { STAGE_FULFILLMENT_METHOD } from "../../constants";
  * @param {Props} props The component props.
  * @returns {JSX.Element|null}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartChangeFulfillmentMethod = ({
   cartItem,
   fetchProductLocations,
@@ -34,13 +35,13 @@ const CartChangeFulfillmentMethod = ({
   /**
    * Handles closing of the sheet.
    */
-  function handleClose() {
+  const handleClose = useCallback(() => {
     setOpened(false);
-  }
+  }, []);
   if (!opened) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(FulfillmentSheet, {
+  return /*#__PURE__*/_jsx(FulfillmentSheet, {
     open: true,
     productId: cartItem.product.id,
     stage: STAGE_FULFILLMENT_METHOD,

package/locations/components/Cart/CartContextMenuChangeFulfillment.js

@@ -18,6 +18,7 @@ import CartContextMenuChangeFulfillmentContent from "./CartContextMenuChangeFulf
  * @param {Props} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CartContextMenuChangeFulfillment = ({
   cartItem
 }) => {
@@ -28,6 +29,9 @@ const CartContextMenuChangeFulfillment = ({
     },
     updatePreferredLocation: true
   }), [cartItem]);
-  return /*#__PURE__*/React.createElement(FulfillmentProvider, contextProps, /*#__PURE__*/React.createElement(CartContextMenuChangeFulfillmentContent, null), /*#__PURE__*/React.createElement(FulfillmentSheetContent, null));
+  return /*#__PURE__*/_jsxs(FulfillmentProvider, {
+    ...contextProps,
+    children: [/*#__PURE__*/_jsx(CartContextMenuChangeFulfillmentContent, {}), /*#__PURE__*/_jsx(FulfillmentSheetContent, {})]
+  });
 };
 export default CartContextMenuChangeFulfillment;

package/locations/components/Cart/CartContextMenuChangeFulfillmentContent.js

@@ -3,6 +3,7 @@ import { I18n, ContextMenu } from '@shopgate/engage/components';
 import { DIRECT_SHIP, ROPIS, BOPIS } from "../../constants";
 import { menuToggleButton, menuToggleContainer } from "./CartContextMenuChangeFulfillmentContent.style";
 import { useFulfillmentState } from "../../locations.hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 const contextMenuClasses = {
   button: menuToggleButton,
   container: menuToggleContainer
@@ -38,14 +39,15 @@ const CartContextMenuChangeFulfillmentContent = () => {
     return fulfillmentMethods.filter(method => enabledFulfillmentMethods.includes(method) && method !== activeFulfillmentMethod);
   }, [activeFulfillmentMethod, enabledFulfillmentMethods, fulfillmentMethods]);
   const disabled = selectableFulfillmentMethods.length === 0;
-  return /*#__PURE__*/React.createElement(ContextMenu, {
+  return /*#__PURE__*/_jsx(ContextMenu, {
     classes: contextMenuClasses,
-    disabled: disabled
-  }, selectableFulfillmentMethods.map(method => /*#__PURE__*/React.createElement(ContextMenu.Item, {
-    key: method,
-    onClick: () => handleChangeFulfillment(method)
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: labelMapping[method]
-  }))));
+    disabled: disabled,
+    children: selectableFulfillmentMethods.map(method => /*#__PURE__*/_jsx(ContextMenu.Item, {
+      onClick: () => handleChangeFulfillment(method),
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: labelMapping[method]
+      })
+    }, method))
+  });
 };
 export default CartContextMenuChangeFulfillmentContent;