@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.2

package/filter/components/PriceSlider/index.js

@@ -1,104 +1,112 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React, { useState, useEffect, useCallback, useRef, memo } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { RangeSlider } from '@shopgate/engage/components';
 import { FilterItem } from '@shopgate/engage/filter';
 import Label from "./components/Label";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  shadows,
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    padding: theme.spacing(1.5, 2)
+  },
+  rangeSliderContainer: {
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2)
+  },
+  rangeSliderOuterRange: {
+    background: colors.darkGray,
+    height: 8,
+    position: 'relative'
+  },
+  rangeSliderRange: {
+    background: 'var(--color-secondary)',
+    position: 'absolute',
+    height: '100%',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1)
+  },
+  rangeSliderHandleInner: {
+    background: colors.light,
+    boxShadow: shadows.filter.priceSlider,
+    borderRadius: '50%',
+    width: theme.spacing(3),
+    height: theme.spacing(3)
+  },
+  rangeSliderHandleOuter: {}
+}));
 
 /**
  * The PriceSlider component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let PriceSlider = /*#__PURE__*/function (_PureComponent) {
-  /**
-   * The constructor.
-   * @param {Object} props The component 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 => {
-      const roundedValue = [Math.floor(value[0]), Math.ceil(value[1])];
-      _this.setState({
-        value
-      });
-      _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;
+const PriceSlider = ({
+  id,
+  max,
+  min,
+  onChange,
+  useLinearEasing,
+  value: valueFromProps
+}) => {
+  const {
+    classes
+  } = useStyles();
+  const [value, setValue] = useState(() => {
+    if (Array.isArray(valueFromProps) && valueFromProps.length > 0) {
+      return valueFromProps;
     }
-    _this.state = {
-      value: initialValue
-    };
-    return _this;
-  }
-
-  /**
-   * Updates the value state.
-   * @param {Object} nextProps The next component props.
-   */
-  _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
-      });
+    return [min, max];
+  });
+  const prevValueProp = useRef(valueFromProps);
+  useEffect(() => {
+    if (!isEqual(valueFromProps, prevValueProp.current)) {
+      prevValueProp.current = valueFromProps;
+      if (Array.isArray(valueFromProps) && valueFromProps.length > 0) {
+        setValue(valueFromProps);
+      }
     }
-  };
-  /**
-   * Renders the component (template).
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      min,
-      max
-    } = this.props;
-
-    /**
-     * The min and max price need to be rounded before they are passed to the I18n component,
-     * since it rounds to the full nearest number when fractions are deactivated.
-     */
-    const priceMin = Math.floor(this.state.value[0] / 100);
-    const priceMax = Math.ceil(this.state.value[1] / 100);
-
-    /**
-     * Calculate the necessary maximum size for the price value.
-     * The size is 2 characters more than the max possible number length
-     * to reserve space for the currency symbol and a little spacing around.
-     */
-    const priceLength = `${(max / 100).toString().length + 2}ch`;
-    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);
+  }, [valueFromProps]);
+  const handleChange = useCallback(next => {
+    setValue(next);
+    const roundedValue = [Math.floor(next[0]), Math.ceil(next[1])];
+    onChange(id, roundedValue);
+  }, [id, onChange]);
+  const priceMin = Math.floor(value[0] / 100);
+  const priceMax = Math.ceil(value[1] / 100);
+  const priceLength = `${(max / 100).toString().length + 2}ch`;
+  return /*#__PURE__*/_jsx(FilterItem, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classes.wrapper,
+      "data-test-id": "priceRangeSlider",
+      children: [/*#__PURE__*/_jsx(Label, {
+        priceLength: priceLength,
+        priceMax: priceMax,
+        priceMin: priceMin,
+        onChange: handleChange
+      }), /*#__PURE__*/_jsx(RangeSlider, {
+        classNames: {
+          container: classes.rangeSliderContainer,
+          outerRange: classes.rangeSliderOuterRange,
+          range: classes.rangeSliderRange,
+          handleInner: classes.rangeSliderHandleInner,
+          handleOuter: classes.rangeSliderHandleOuter
+        },
+        easing: useLinearEasing ? 'linear' : 'exponential',
+        factor: 3,
+        max: max,
+        min: min,
+        onChange: handleChange,
+        value: value
+      })]
+    })
+  });
+};
 PriceSlider.defaultProps = {
   useLinearEasing: false,
   max: 100,
@@ -106,4 +114,4 @@ PriceSlider.defaultProps = {
   onChange: () => {},
   value: null
 };
-export default PriceSlider;
+export default /*#__PURE__*/memo(PriceSlider);

package/filter/constants/sort.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import { SORT_RELEVANCE } from '@shopgate/pwa-common/constants/DisplayOptions';
 
 // Scopes for the sort order

package/i18n/countries.helpers.d.ts

@@ -0,0 +1,2 @@
+export function getCountryNames(countryCodes?: string[], defaultLocales?: Object): Object | null;
+//# sourceMappingURL=countries.helpers.d.ts.map

package/i18n/countries.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"countries.helpers.d.ts","sourceRoot":"","sources":["../../i18n/countries.helpers.js"],"names":[],"mappings":"AAQO,+CAJI,MAAM,EAAE,mBACR,MAAM,GACJ,MAAM,GAAC,IAAI,CA2BvB"}

package/locations/components/Cart/CartContextMenuChangeFulfillmentContent.js

@@ -1,13 +1,28 @@
+import "core-js/modules/es.array.includes.js";
 import React, { useCallback, useMemo } from 'react';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 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
-};
+const useStyles = makeStyles()(theme => ({
+  menuToggleContainer: {
+    margin: theme.spacing(1),
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      marginLeft: 0
+    }
+  },
+  menuToggleButton: {
+    height: theme.spacing(4),
+    width: theme.spacing(4),
+    fontSize: theme.spacing(3),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  }
+}));
 
 /**
  * The CartContextMenuChangeFulfillmentContent component renders a context menu which enables
@@ -15,6 +30,9 @@ const contextMenuClasses = {
  * @returns {JSX}
  */
 const CartContextMenuChangeFulfillmentContent = () => {
+  const {
+    classes
+  } = useStyles();
   const labelMapping = {
     [DIRECT_SHIP]: 'cart.change_fulfillment.direct_ship',
     [ROPIS]: 'cart.change_fulfillment.ropis',
@@ -39,6 +57,10 @@ const CartContextMenuChangeFulfillmentContent = () => {
     return fulfillmentMethods.filter(method => enabledFulfillmentMethods.includes(method) && method !== activeFulfillmentMethod);
   }, [activeFulfillmentMethod, enabledFulfillmentMethods, fulfillmentMethods]);
   const disabled = selectableFulfillmentMethods.length === 0;
+  const contextMenuClasses = useMemo(() => ({
+    button: classes.menuToggleButton,
+    container: classes.menuToggleContainer
+  }), [classes.menuToggleButton, classes.menuToggleContainer]);
   return /*#__PURE__*/_jsx(ContextMenu, {
     classes: contextMenuClasses,
     disabled: disabled,

package/locations/components/ChangeLocationButton/ChangeLocationButton.js

@@ -1,8 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { RippleButton, I18n, SurroundPortals } from '@shopgate/engage/components';
-import { button, ripple } from "./ChangeLocationButton.style";
+import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_FULFILLMENT_CHANGE_LOCATION } from "../../constants/Portals";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  button: {
+    fontSize: '0.625rem !important',
+    letterSpacing: '0.05em',
+    padding: `${theme.spacing(0.375, 0)} !important`,
+    ' *': {
+      padding: '0 !important'
+    }
+  },
+  ripple: {
+    padding: 0
+  }
+}));
 
 /**
  * Renders the Change Location button.
@@ -11,28 +25,32 @@ import { PRODUCT_FULFILLMENT_CHANGE_LOCATION } from "../../constants/Portals";
  * @param {boolean} [props.disabled=false] Whether the button is disabled.
  * @returns {JSX.Element} The rendered component.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export const ChangeLocationButtonUnwrapped = ({
   onClick,
   disabled
-}) => /*#__PURE__*/_jsx(SurroundPortals, {
-  portalName: PRODUCT_FULFILLMENT_CHANGE_LOCATION,
-  portalProps: {
-    onClick,
-    disabled
-  },
-  children: /*#__PURE__*/_jsx(RippleButton, {
-    onClick: onClick,
-    className: button,
-    disabled: disabled,
-    rippleClassName: ripple,
-    type: "secondary",
-    flat: true,
-    children: /*#__PURE__*/_jsx(I18n.Text, {
-      string: "locations.change_location"
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: PRODUCT_FULFILLMENT_CHANGE_LOCATION,
+    portalProps: {
+      onClick,
+      disabled
+    },
+    children: /*#__PURE__*/_jsx(RippleButton, {
+      onClick: onClick,
+      className: classes.button,
+      disabled: disabled,
+      rippleClassName: classes.ripple,
+      type: "secondary",
+      flat: true,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "locations.change_location"
+      })
     })
-  })
-});
+  });
+};
 ChangeLocationButtonUnwrapped.defaultProps = {
   disabled: false
 };

package/locations/components/FulfillmentPath/FulfillmentPath.js

@@ -1,11 +1,23 @@
+import "core-js/modules/es.array.includes.js";
 import React, { useState, useCallback } from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
 import { Availability } from '@shopgate/engage/product';
 import { RadioGroup } from "../../../components";
 import { useFulfillmentState } from "../../locations.hooks";
 import { IN_STORE_PICKUP_BOPIS_LABEL, IN_STORE_PICKUP_ROPIS_LABEL, DIRECT_SHIP_LABEL, DIRECT_SHIP, ROPIS, BOPIS } from "../../constants";
-import { container, radioGroup } from "./FulfillmentPath.style";
 import { FulfillmentPathItem } from "./FulfillmentPathItem";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    padding: theme.spacing(0, 2)
+  },
+  radioGroup: {
+    // Removes the vertical padding applied by default around radio groups
+    paddingTop: 0,
+    paddingBottom: 0,
+    transition: 'opacity 250ms cubic-bezier(0.25, 0.1, 0.25, 1)'
+  }
+}));
 const labelMapping = {
   [DIRECT_SHIP]: DIRECT_SHIP_LABEL,
   [ROPIS]: IN_STORE_PICKUP_ROPIS_LABEL,
@@ -17,6 +29,9 @@ const labelMapping = {
  * @returns {JSX}
  */
 export function FulfillmentPath() {
+  const {
+    classes
+  } = useStyles();
   const {
     product,
     enabledFulfillmentMethods,
@@ -41,12 +56,12 @@ export function FulfillmentPath() {
     changeFulfillment(method, cartItem);
   }, [cartItem, changeFulfillment]);
   return /*#__PURE__*/_jsx("div", {
-    className: container,
+    className: classes.container,
     children: /*#__PURE__*/_jsxs(RadioGroup, {
       name: "cartItem.fulfillment_selector",
       value: selection,
       onChange: handleChange,
-      className: radioGroup,
+      className: classes.radioGroup,
       isControlled: true,
       direction: "column",
       children: [enabledFulfillmentMethods.includes(DIRECT_SHIP) && /*#__PURE__*/_jsx(FulfillmentPathItem, {

package/locations/components/FulfillmentPath/FulfillmentPathItem.js

@@ -1,8 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { i18n } from "../../../core";
 import { RadioGroupItem } from "../../../components";
-import { radioItem, itemLabel } from "./FulfillmentPath.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  radioItem: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(2, 0),
+    boxShadow: `0 1px 0 ${colors.darkGray}`
+  },
+  itemLabel: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    alignItems: 'baseline',
+    marginBottom: 0
+  },
+  radioGroupLabel: {
+    flex: 1,
+    fontSize: '1rem',
+    lineHeight: 1.5,
+    marginLeft: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  }
+}));
 
 /**
  * Renders a RadioItem element to be used by the FulfillmentPathSelector component.
@@ -12,22 +39,27 @@ import { radioItem, itemLabel } from "./FulfillmentPath.style";
  * @param {string} props.name The name of the radio item.
  * @returns {JSX.Element} The rendered component.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const FulfillmentPathItem = ({
   name,
   children,
   ...rest
-}) => /*#__PURE__*/_jsx(RadioGroupItem, {
-  ...rest,
-  name: name,
-  className: radioItem,
-  label: /*#__PURE__*/_jsxs("div", {
-    className: itemLabel,
-    children: [/*#__PURE__*/_jsx("span", {
-      children: i18n.text(name)
-    }), children]
-  })
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx(RadioGroupItem, {
+    ...rest,
+    name: name,
+    className: classes.radioItem,
+    label: /*#__PURE__*/_jsxs("div", {
+      className: cx(classes.radioGroupLabel, classes.itemLabel),
+      children: [/*#__PURE__*/_jsx("span", {
+        children: i18n.text(name)
+      }), children]
+    })
+  });
+};
 FulfillmentPathItem.defaultProps = {
   children: null
 };

package/locations/components/FulfillmentPathSelector/FulfillmentPathSelector.js

@@ -1,10 +1,15 @@
 import * as React from 'react';
 import { UIEvents, i18n } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
 import { SheetList } from '@shopgate/engage/components';
 import SheetDrawer from "../../../components/SheetDrawer";
 import { QUICK_RESERVE, MULTI_LINE_RESERVE } from "../../constants";
-import { sheetDrawer } from "./FulfillmentPathSelector.style";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  sheetDrawer: {
+    boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.25)'
+  }
+});
 let callback = null;
 const EVENT_SET_OPEN = 'FulfillmentPathSelector.setOpen';
 
@@ -13,62 +18,65 @@ const EVENT_SET_OPEN = 'FulfillmentPathSelector.setOpen';
  * @returns {JSX.Element}
  */
 function FulfillmentPathSelector() {
+  const {
+    classes
+  } = useStyles();
   const [isOpen, setIsOpen] = React.useState(false);
 
   /**
    * Handles opening of the sheet.
    */
-  function handleOpen() {
+  const handleOpen = React.useCallback(() => {
     setIsOpen(true);
-  }
+  }, []);
   React.useEffect(() => {
     UIEvents.addListener(EVENT_SET_OPEN, handleOpen);
     return () => {
       UIEvents.removeListener(EVENT_SET_OPEN, handleOpen);
     };
-  }, []);
+  }, [handleOpen]);
 
   /**
    * @param {string} value The selected value.
    */
-  function handleSelect(value) {
+  const handleSelect = React.useCallback(value => {
     if (callback !== null) {
       callback(value);
     }
     setIsOpen(false);
     callback = null;
-  }
+  }, []);
 
   /**
    * @param {Object} event The click event.
    */
-  function handleQuickReserve(event) {
+  const handleQuickReserve = React.useCallback(event => {
     event.preventDefault();
     handleSelect(QUICK_RESERVE);
-  }
+  }, [handleSelect]);
 
   /**
    * @param {Object} event The click event.
    */
-  function handleReserveToCart(event) {
+  const handleReserveToCart = React.useCallback(event => {
     event.preventDefault();
     handleSelect(MULTI_LINE_RESERVE);
-  }
+  }, [handleSelect]);
 
   /**
    * Handles the case when the sheet is closed manually.
    */
-  function handleClose() {
+  const handleClose = React.useCallback(() => {
     if (callback !== null) {
       callback('');
     }
     setIsOpen(false);
     callback = null;
-  }
+  }, []);
   return /*#__PURE__*/_jsx(SheetDrawer, {
     isOpen: isOpen,
     title: i18n.text('locations.choose_reservation_type'),
-    className: sheetDrawer,
+    className: classes.sheetDrawer,
     onDidClose: handleClose,
     children: /*#__PURE__*/_jsxs(SheetList, {
       children: [/*#__PURE__*/_jsx(SheetList.Item, {

package/locations/components/FulfillmentSelector/FulfillmentSelector.js

@@ -1,5 +1,7 @@
+import "core-js/modules/es.array.includes.js";
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import { SurroundPortals } from "../../../components";
 import { DIRECT_SHIP, ROPIS, BOPIS, STAGE_SELECT_STORE, PRODUCT_FULFILLMENT_SELECTOR } from "../../constants";
 import { FulfillmentSheet } from "../FulfillmentSheet";
@@ -11,9 +13,13 @@ import { FulfillmentSelectorBOPIS } from "./FulfillmentSelectorBOPIS";
 import { FulfillmentSelectorROPIS } from "./FulfillmentSelectorROPIS";
 import { FulfillmentSelectorAddToCart } from "./FulfillmentSelectorAddToCart";
 import { FulfillmentSelectorLocation } from "./FulfillmentSelectorLocation";
-import { container } from "./FulfillmentSelector.style";
 import connect from "./FulfillmentSelector.connector";
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    padding: theme.spacing(1, 2)
+  }
+}));
 /* eslint-disable max-len */
 /** @typedef {import('./FulfillmentSelector.types').FulfillmentSelectorContextProps} FulfillmentSelectorContextProps */
 /** @typedef {import('./FulfillmentSelector.types').OwnProps} OwnProps */
@@ -31,8 +37,10 @@ import connect from "./FulfillmentSelector.connector";
  * @param {Props} props The component props.
  * @returns {JSX.Element|null}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FulfillmentSelector = props => {
+  const {
+    classes
+  } = useStyles();
   const {
     productId,
     merchantSettings,
@@ -168,7 +176,7 @@ const FulfillmentSelector = props => {
     children: [/*#__PURE__*/_jsx(SurroundPortals, {
       portalName: PRODUCT_FULFILLMENT_SELECTOR,
       children: /*#__PURE__*/_jsxs("div", {
-        className: container,
+        className: classes.container,
         role: "radiogroup",
         tabIndex: "0",
         children: [/*#__PURE__*/_jsx(FulfillmentSelectorHeader, {}), shopFulfillmentMethods.includes(DIRECT_SHIP) && /*#__PURE__*/_jsx(FulfillmentSelectorItem, {

package/locations/components/FulfillmentSelector/FulfillmentSelectorAddToCart.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import { useEffect } from 'react';
 import { isProductAvailable } from "../../helpers";
 import { MULTI_LINE_RESERVE, QUICK_RESERVE, DIRECT_SHIP, ROPIS, BOPIS, STAGE_RESERVE_FORM } from "../../constants";