@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/favorites/components/Lists/ListsModal.js

@@ -1,22 +1,22 @@
+import "core-js/modules/es.array.includes.js";
 import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { hasNewServices } from '@shopgate/engage/core/helpers';
+import { hasNewServices, i18n } from '@shopgate/engage/core/helpers';
 import { Dialog, TextField } from '@shopgate/engage/components';
-import { i18n } from '@shopgate/engage/core';
 import { themeName } from '@shopgate/pwa-common/helpers/config';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isIos = themeName.includes('ios');
-const styles = {
-  root: css({
+const useStyles = makeStyles()({
+  root: {
     display: 'flex',
     flexDirection: 'column'
-  }),
-  input: css({
+  },
+  input: {
     textAlign: 'left',
     fontSize: '1rem'
-  }).toString()
-};
+  }
+});
 
 /**
  * @param {Object} props Props
@@ -30,6 +30,9 @@ const ListsModal = ({
   onConfirm,
   onDismiss
 }) => {
+  const {
+    classes
+  } = useStyles();
   const [input, setInput] = useState('');
   const [error, setError] = useState(null);
   const onConfirmWrapped = useCallback(() => {
@@ -54,7 +57,7 @@ const ListsModal = ({
       confirm: i18n.text(`favorites.${type}_modal.confirm`)
     },
     children: /*#__PURE__*/_jsxs("div", {
-      className: styles.root,
+      className: classes.root,
       children: [/*#__PURE__*/_jsx("span", {
         children: i18n.text(`favorites.${type}_modal.message`)
       }), /*#__PURE__*/_jsx(TextField, {
@@ -68,7 +71,7 @@ const ListsModal = ({
         onChange: onChange,
         value: input,
         errorText: error || undefined,
-        className: styles.input
+        className: classes.input
       })]
     })
   });

package/favorites/components/Lists/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Lists";
+//# sourceMappingURL=index.d.ts.map

package/favorites/components/Lists/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Lists/index.js"],"names":[],"mappings":""}

package/favorites/components/RemoveButton/RemoveButton.d.ts

@@ -0,0 +1,15 @@
+export default RemoveButton;
+/**
+ * The remove favorites button component.
+ * @returns {JSX}
+ */
+declare function RemoveButton({ onClick }: {
+    onClick: any;
+}): JSX;
+declare namespace RemoveButton {
+    namespace propTypes {
+        let onClick: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=RemoveButton.d.ts.map

package/favorites/components/RemoveButton/RemoveButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveButton.d.ts","sourceRoot":"","sources":["../../../../favorites/components/RemoveButton/RemoveButton.jsx"],"names":[],"mappings":";AAyBA;;;GAGG;AACH;;IAFa,GAAG,CAiBf;;;;;;sBA3CqB,YAAY"}

package/favorites/components/RemoveButton/RemoveButton.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { Ripple } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import TrashOutlineIcon from '@shopgate/pwa-ui-shared/icons/TrashOutlineIcon';
 import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  root: css({
+const useStyles = makeStyles()(theme => ({
+  root: {
     display: 'flex',
     borderRadius: '50%',
-    color: 'var(--color-text-high-emphasis)',
+    color: theme.palette.text.primary,
     fontSize: '1.5rem',
     padding: '0 8px 8px 8px',
     lineHeight: 1,
@@ -17,11 +17,11 @@ const styles = {
     justifyContent: 'center',
     alignItems: 'center',
     marginRight: -1
-  }).toString(),
-  ripple: css({
+  },
+  ripple: {
     flexShrink: 0
-  }).toString()
-};
+  }
+}));
 
 /**
  * The remove favorites button component.
@@ -29,14 +29,19 @@ const styles = {
  */
 const RemoveButton = ({
   onClick
-}) => /*#__PURE__*/_jsx("button", {
-  className: styles.root,
-  onClick: onClick,
-  type: "button",
-  "aria-label": i18n.text('favorites.remove'),
-  children: /*#__PURE__*/_jsx(Ripple, {
-    className: styles.ripple,
-    children: /*#__PURE__*/_jsx(TrashOutlineIcon, {})
-  })
-});
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("button", {
+    className: classes.root,
+    onClick: onClick,
+    type: "button",
+    "aria-label": i18n.text('favorites.remove'),
+    children: /*#__PURE__*/_jsx(Ripple, {
+      className: classes.ripple,
+      children: /*#__PURE__*/_jsx(TrashOutlineIcon, {})
+    })
+  });
+};
 export default RemoveButton;

package/favorites/components/RemoveButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./RemoveButton";
+//# sourceMappingURL=index.d.ts.map

package/favorites/components/RemoveButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../favorites/components/RemoveButton/index.js"],"names":[],"mappings":""}

package/favorites/constants/Portals.d.ts

@@ -0,0 +1,7 @@
+export const FAVORITES_LIST: "favorites.list";
+export const FAVORITES_LIST_ADD_BUTTON: "favorites.list-add-button";
+export const FAVORITES_LIST_CONTEXT_MENU: "favorites.list-context-menu";
+export const FAVORITES_LIST_ITEM: "favorites.list-item";
+export const FAVORITES_NOTES: "favorites.notes";
+export const FAVORITES_QUANTITY: "favorites.quantity";
+//# sourceMappingURL=Portals.d.ts.map

package/favorites/constants/Portals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portals.d.ts","sourceRoot":"","sources":["../../../favorites/constants/Portals.js"],"names":[],"mappings":"AAEA,8CAAkD;AAClD,oEAAwE;AACxE,wEAA4E;AAC5E,wDAA4D;AAC5D,gDAAoD;AACpD,sDAA0D"}

package/favorites/constants/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Portals";
+export const FAVORITES_SHOW_LIMIT: 10;
+//# sourceMappingURL=index.d.ts.map

package/favorites/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../favorites/constants/index.js"],"names":[],"mappings":";AACA,mCAAoC,EAAE,CAAC"}

package/filter/components/FilterItem/index.js

@@ -1,17 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()({
+  item: {
+    background: colors.light,
+    marginTop: 4
+  }
+});
 
 /**
  * Wraps a single filter page item.
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const FilterItem = ({
   children
-}) => /*#__PURE__*/_jsx("div", {
-  className: styles,
-  children: children
-});
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.item,
+    children: children
+  });
+};
 export default FilterItem;

package/filter/components/FilterPageContent/components/ApplyButton/index.js

@@ -1,9 +1,18 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { I18n, Button, SurroundPortals } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { PORTAL_FILTER_APPLY_BUTTON } from '@shopgate/engage/filter/constants';
 import { withWidgetSettings } from '@shopgate/engage/core';
-import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  wrapper: {
+    display: 'flex'
+  },
+  button: {
+    padding: '0 !important'
+  }
+});
 
 /**
  * The filter apply button component.
@@ -12,12 +21,14 @@ import styles from "./style";
  * @param {Function} props.onClick Click handler for the button
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const FilterApplyButton = ({
   disabled,
   onClick,
   widgetSettings
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     buttonTextColor,
     buttonTextColorDisabled
@@ -31,9 +42,9 @@ const FilterApplyButton = ({
       widgetSettings
     },
     children: /*#__PURE__*/_jsx("div", {
-      className: styles.wrapper,
+      className: classes.wrapper,
       children: /*#__PURE__*/_jsx(Button, {
-        className: styles.button,
+        className: classes.button,
         flat: true,
         type: "primary",
         onClick: onClick,

package/filter/components/FilterPageContent/components/ResetButton/index.js

@@ -1,8 +1,16 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { I18n, Button, SurroundPortals } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { PORTAL_FILTER_RESET_BUTTON } from '@shopgate/engage/filter/constants';
-import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  buttonContainer: {
+    marginTop: 4,
+    marginBottom: 40,
+    textAlign: 'right'
+  }
+});
 
 /**
  * The filter reset button component.
@@ -11,30 +19,34 @@ import styles from "./style";
  * @param {Function} props.onClick Click handler for the button
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const FilterResetButton = ({
   disabled,
   onClick
-}) => /*#__PURE__*/_jsx(SurroundPortals, {
-  portalName: PORTAL_FILTER_RESET_BUTTON,
-  portalProps: {
-    disabled,
-    onClick
-  },
-  children: /*#__PURE__*/_jsx("div", {
-    className: styles,
-    children: /*#__PURE__*/_jsx(Button, {
-      flat: true,
-      type: "primary",
-      onClick: onClick,
-      disabled: disabled,
-      testId: "clearAllButton",
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "filter.reset"
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: PORTAL_FILTER_RESET_BUTTON,
+    portalProps: {
+      disabled,
+      onClick
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes.buttonContainer,
+      children: /*#__PURE__*/_jsx(Button, {
+        flat: true,
+        type: "primary",
+        onClick: onClick,
+        disabled: disabled,
+        testId: "clearAllButton",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "filter.reset"
+        })
       })
     })
-  })
-});
+  });
+};
 FilterResetButton.defaultProps = {
   disabled: false
 };

package/filter/components/FilterPageContent/components/Selector/components/Selected/index.js

@@ -1,58 +1,63 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.array.reduce.js";
-import React, { Fragment, PureComponent } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import * as styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  elipsed: {
+    maxWidth: '95%',
+    overflow: 'hidden',
+    textAlign: 'right',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  comma: {
+    ' + span': {
+      marginLeft: '0.65ch'
+    }
+  }
+}));
 
 /**
  * The filter selected component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element|null}
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-let Selected = /*#__PURE__*/function (_PureComponent) {
-  function Selected() {
-    return _PureComponent.apply(this, arguments) || this;
-  }
-  _inheritsLoose(Selected, _PureComponent);
-  var _proto = Selected.prototype;
-  /**
-   * @returns {Array}
-   */
-  _proto.getItems = function getItems() {
-    const {
-      selected,
-      values
-    } = this.props;
+const Selected = ({
+  selected,
+  values
+}) => {
+  const {
+    classes
+  } = useStyles();
+  const items = useMemo(() => {
+    if (!selected || selected.length === 0) {
+      return [];
+    }
     return values.reduce((prevValues, value) => {
       if (selected.includes(value.id)) {
         prevValues.push(value.label);
       }
       return prevValues;
     }, []);
+  }, [selected, values]);
+  if (!selected || selected.length === 0) {
+    return null;
   }
-
-  /**
-   * @returns {JSX}
-   */;
-  _proto.render = function render() {
-    if (!this.props.selected || this.props.selected.length === 0) {
-      return null;
-    }
-    const items = this.getItems();
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: items.map((item, index) => /*#__PURE__*/_jsxs(Fragment, {
-        children: [/*#__PURE__*/_jsx("span", {
-          className: styles.elipsed,
-          children: item
-        }), index < items.length - 1 ? /*#__PURE__*/_jsx("span", {
-          className: styles.comma,
-          children: ", "
-        }) : '']
-      }, item))
-    });
-  };
-  return Selected;
-}(PureComponent);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: items.map((item, index) => /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: classes.elipsed,
+        children: item
+      }), index < items.length - 1 ? /*#__PURE__*/_jsx("span", {
+        className: classes.comma,
+        children: ", "
+      }) : '']
+    }, item))
+  });
+};
 Selected.defaultProps = {
   selected: null
 };
-export default Selected;
+export default /*#__PURE__*/memo(Selected);

package/filter/components/FilterPageContent/components/Selector/components/Toggle/index.js

@@ -1,59 +1,71 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import * as styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  toggle: {
+    display: 'flex',
+    flexFlow: 'row no-wrap',
+    alignContent: 'stretch',
+    alignItems: 'flex-start'
+  },
+  label: {
+    whiteSpace: 'no-wrap',
+    flexShrink: 0,
+    flexGrow: 1,
+    textAlign: 'left',
+    maxWidth: '50%',
+    minWidth: '35%',
+    paddingRight: '16px'
+  },
+  selected: {
+    display: 'flex',
+    flexFlow: 'row wrap',
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+    minWidth: '50%',
+    maxWidth: '65%'
+  },
+  closed: {
+    fontWeight: 'normal'
+  },
+  open: {
+    fontWeight: 'bold'
+  }
+}));
 
 /**
  * The toggle component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let Toggle = /*#__PURE__*/function (_PureComponent) {
-  function Toggle() {
-    return _PureComponent.apply(this, arguments) || this;
-  }
-  _inheritsLoose(Toggle, _PureComponent);
-  var _proto = Toggle.prototype;
-  /**
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      label,
-      selected
-    } = this.props;
-    return /*#__PURE__*/_jsxs("div", {
-      className: styles.toggle,
-      children: [/*#__PURE__*/_jsx("span", {
-        className: this.className,
-        children: label
-      }), selected && /*#__PURE__*/_jsx("span", {
-        className: styles.selected,
-        children: selected
-      })]
-    });
-  };
-  return _createClass(Toggle, [{
-    key: "className",
-    get:
-    /**
-     * @returns {string}
-     */
-    function () {
-      const {
-        open
-      } = this.props;
-      return classNames({
-        [styles.label]: true,
-        [styles.open]: open,
-        [styles.closed]: !open
-      });
-    }
-  }]);
-}(PureComponent);
+const Toggle = ({
+  label,
+  open,
+  selected
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const labelClassName = useMemo(() => cx({
+    [classes.label]: true,
+    [classes.open]: open,
+    [classes.closed]: !open
+  }), [classes.closed, classes.label, classes.open, open, cx]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.toggle,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: labelClassName,
+      children: label
+    }), selected && /*#__PURE__*/_jsx("span", {
+      className: classes.selected,
+      children: selected
+    })]
+  });
+};
 Toggle.defaultProps = {
   open: false,
   selected: null
 };
-export default Toggle;
+export default /*#__PURE__*/memo(Toggle);