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

package/product/components/Characteristics/Characteristic/components/SheetItem/index.js

@@ -1,96 +1,138 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React, { useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { withForwardedRef } from '@shopgate/engage/core/hocs';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { CharacteristicsButton } from '@shopgate/engage/back-in-stock/components';
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(theme => {
+  const buttonBase = {
+    outline: 0,
+    textAlign: 'left',
+    paddingLeft: 0,
+    paddingRight: 0,
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    color: theme.palette.text.primary
+  };
+  return {
+    button: {
+      ...buttonBase
+    },
+    buttonDisabled: {
+      ...buttonBase,
+      color: colors.shade4
+    },
+    root: {
+      padding: '16px 0',
+      [responsiveMediaQuery('>xs', {
+        webOnly: true
+      })]: {
+        padding: '8px 16px'
+      }
+    },
+    rootSelected: {
+      ...buttonBase,
+      background: 'var(--color-background-accent)',
+      boxShadow: '-16px 0 0 var(--color-background-accent), 16px 0 0 var(--color-background-accent)',
+      margin: '-1px 0',
+      paddingTop: 17,
+      paddingBottom: 17,
+      fontWeight: 500,
+      [responsiveMediaQuery('>xs', {
+        webOnly: true
+      })]: {
+        margin: 0,
+        paddingTop: 8,
+        paddingBottom: 8,
+        padding: '8px 16px',
+        boxShadow: 'none'
+      }
+    },
+    mainRow: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '4px 8px',
+      justifyContent: 'space-between',
+      width: '100%'
+    },
+    mainRowRight: {
+      marginLeft: 'auto'
+    },
+    bottomRow: {
+      '&:not(:empty)': {
+        textAlign: 'right'
+      }
+    }
+  };
+});
 
 /**
  * The SheetItem component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let SheetItem = /*#__PURE__*/function (_PureComponent) {
-  function SheetItem(...args) {
-    var _this;
-    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
-    /**
-     * @param {boolean} selectable Whether or not the item can be selected.
-     * @returns {string}
-     */
-    _this.getStyle = selectable => {
-      if (!selectable) {
-        return styles.buttonDisabled;
-      }
-      return styles.button;
-    };
-    /**
-     * @returns {Object}
-     */
-    _this.buildProps = () => {
-      const {
-        item,
-        onClick,
-        forwardedRef
-      } = _this.props;
-      return {
-        className: `${_this.getStyle(item.selectable).toString()} theme__product__characteristic__option`,
-        key: item.id,
-        ref: forwardedRef,
-        value: item.id,
-        'aria-hidden': !item.selectable,
-        ...(item.selectable && {
-          onClick: event => onClick(event, item.id)
-        })
-      };
-    };
-    return _this;
-  }
-  _inheritsLoose(SheetItem, _PureComponent);
-  var _proto = SheetItem.prototype;
-  /**
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      item,
-      rightComponent: Right,
-      selected,
-      characteristics
-    } = this.props;
-    return /*#__PURE__*/_jsxs("div", {
-      className: classNames(styles.root, {
-        [styles.rootSelected]: selected
-      }),
-      children: [/*#__PURE__*/_jsx("button", {
-        ...this.buildProps(),
-        "data-test-id": item.label,
-        "aria-selected": selected,
-        role: "option",
-        type: "button",
-        children: /*#__PURE__*/_jsxs("div", {
-          className: styles.mainRow,
-          children: [/*#__PURE__*/_jsx("div", {
-            children: item.label
-          }), /*#__PURE__*/_jsx("div", {
-            className: styles.mainRowRight,
-            children: item.selectable && /*#__PURE__*/_jsx(Right, {})
-          })]
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        className: styles.bottomRow,
-        children: item.selectable && /*#__PURE__*/_jsx(CharacteristicsButton, {
-          characteristics: characteristics
-        })
-      })]
-    });
-  };
-  return SheetItem;
-}(PureComponent);
+const SheetItem = ({
+  characteristics,
+  item,
+  forwardedRef,
+  onClick,
+  rightComponent: Right,
+  selected
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const buildProps = useCallback(() => ({
+    className: cx({
+      [classes.button]: item.selectable,
+      [classes.buttonDisabled]: !item.selectable
+    }, 'theme__product__characteristic__option'),
+    key: item.id,
+    ref: forwardedRef,
+    value: item.id,
+    'aria-hidden': !item.selectable,
+    ...(item.selectable ? {
+      onClick: event => onClick(event, item.id)
+    } : {})
+  }), [forwardedRef, item.id, item.selectable, onClick, classes.button, classes.buttonDisabled, cx]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(classes.root, {
+      [classes.rootSelected]: selected
+    }),
+    children: [/*#__PURE__*/_jsx("button", {
+      ...buildProps(),
+      "data-test-id": item.label,
+      "aria-selected": selected,
+      role: "option",
+      type: "button",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classes.mainRow,
+        children: [/*#__PURE__*/_jsx("div", {
+          children: item.label
+        }), /*#__PURE__*/_jsx("div", {
+          className: classes.mainRowRight,
+          children: item.selectable && /*#__PURE__*/_jsx(Right, {})
+        })]
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: classes.bottomRow,
+      children: item.selectable && /*#__PURE__*/_jsx(CharacteristicsButton, {
+        characteristics: characteristics
+      })
+    })]
+  });
+};
 SheetItem.defaultProps = {
   forwardedRef: null,
   onClick() {},
   rightComponent: null,
   selected: false
 };
-export default withForwardedRef(SheetItem);
+export default withForwardedRef(/*#__PURE__*/memo(SheetItem));

package/product/components/Characteristics/Characteristic/index.js

@@ -1,17 +1,20 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import Transition from 'react-transition-group/Transition';
 import { ResponsiveContainer, ArrowDropIcon } from '@shopgate/engage/components';
+import { withStyles, cx } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/engage';
 import Sheet from "./components/Sheet";
-import styles from "./style";
 import transition from "../transition";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  colors: themeColors
+} = themeConfig;
 
 /**
  * A single characteristic.
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 let Characteristic = /*#__PURE__*/function (_PureComponent) {
   /**
    * @param {Object} props The component props
@@ -81,29 +84,30 @@ let Characteristic = /*#__PURE__*/function (_PureComponent) {
         disabled,
         selected,
         charRef,
-        label
+        label,
+        classes
       } = _this.props;
       const translatedLabel = __('product.pick_an_attribute', [label]);
       const buttonLabel = _this.getButtonLabel(translatedLabel);
-      const classes = classNames(styles.button, {
-        [styles.buttonDisabled]: disabled
+      const cmpClasses = cx(classes.button, {
+        [classes.buttonDisabled]: disabled
       }, 'theme__product__characteristic');
       return /*#__PURE__*/_jsxs("div", {
         role: "button",
         "aria-disabled": disabled,
         "aria-haspopup": !disabled,
         tabIndex: 0,
-        className: classes,
+        className: cmpClasses,
         onClick: _this.handleButtonClick,
         onKeyDown: () => {},
         ref: charRef,
         style: transition[state],
         "data-test-id": label,
         children: [selected && /*#__PURE__*/_jsx("div", {
-          className: `${styles.label} theme__product__characteristic__label`,
+          className: `${classes.label} theme__product__characteristic__label`,
           children: label
         }), /*#__PURE__*/_jsx("div", {
-          className: `${styles.selection} theme__product__characteristic__selection`,
+          className: `${classes.selection} theme__product__characteristic__selection`,
           ...(selected && {
             'data-selected': true
           }),
@@ -112,7 +116,7 @@ let Characteristic = /*#__PURE__*/function (_PureComponent) {
           breakpoint: ">xs",
           webOnly: true,
           children: /*#__PURE__*/_jsx("div", {
-            className: styles.arrow,
+            className: classes.arrow,
             children: /*#__PURE__*/_jsx(ArrowDropIcon, {})
           })
         })]
@@ -177,4 +181,36 @@ Characteristic.contextTypes = {
 Characteristic.defaultProps = {
   selected: null
 };
-export default Characteristic;
+export default withStyles(Characteristic, theme => ({
+  button: {
+    background: 'var(--color-background-accent)',
+    color: theme.palette.text.primary,
+    position: 'relative',
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minHeight: 56,
+    outline: 0,
+    padding: '12px 16px',
+    marginBottom: 8,
+    transition: 'background 250ms ease-in, color 250ms ease-in'
+  },
+  buttonDisabled: {
+    color: `${themeColors.shade4} !important`
+  },
+  label: {
+    fontSize: 12,
+    marginTop: -2,
+    marginBottom: 4
+  },
+  selection: {
+    fontWeight: 500,
+    lineHeight: 1.125
+  },
+  arrow: {
+    position: 'absolute',
+    right: 32,
+    fontSize: 20
+  }
+}));

package/product/components/Characteristics/Swatch/index.js

@@ -1,107 +1,104 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React, { useState, useEffect, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import Transition from 'react-transition-group/Transition';
 import { VariantSwatch } from '@shopgate/engage/product/components';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import transition from "../transition";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(() => ({
+  label: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minHeight: 56,
+    outline: 0,
+    padding: '12px 16px',
+    transition: 'background 250ms ease-in, color 250ms ease-in',
+    fontWeight: 500,
+    lineHeight: 1.125
+  },
+  labelDisabled: {
+    color: colors.shade4
+  },
+  items: {
+    padding: '0 16px',
+    marginBottom: 16
+  }
+}));
 
 /**
  * A single characteristic swatch type.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-let Swatch = /*#__PURE__*/function (_PureComponent) {
-  /**
-   * @param {Object} props The component props
-   */
-  function Swatch(props) {
-    var _this;
-    _this = _PureComponent.call(this, props) || this;
-    /**
-     * @param {string} charLabel The default button label.
-     * @return {string}
-     */
-    _this.getLabel = charLabel => {
-      if (!_this.props.selected) {
-        return charLabel;
-      }
-      const value = _this.props.values.find(val => val.id === _this.props.selected);
-      return `${charLabel} - ${value.label}`;
-    };
-    /**
-     * @param {string} valueId The ID of the selected value.
-     */
-    _this.handleItemSelection = valueId => {
-      _this.props.select({
-        id: _this.props.id,
-        value: valueId
-      });
-    };
-    _this.removeHighlight = () => {
-      _this.setState({
-        highlight: false
-      });
-    };
-    _this.state = {
-      highlight: false
-    };
-    return _this;
-  }
-
-  /**
-   * @param {Object} nextProps The next component props.
-   */
-  _inheritsLoose(Swatch, _PureComponent);
-  var _proto = Swatch.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      highlight: nextProps.highlight
-    });
-  };
-  /**
-   * @return {JSX}
-   */
-  _proto.render = function render() {
-    const {
+const Swatch = ({
+  charRef,
+  disabled,
+  highlight: highlightProp,
+  id,
+  label,
+  select,
+  values,
+  selected
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [highlight, setHighlight] = useState(false);
+  useEffect(() => {
+    setHighlight(highlightProp);
+  }, [highlightProp]);
+  const getLabel = useCallback(charLabel => {
+    if (!selected) {
+      return charLabel;
+    }
+    const value = values.find(val => val.id === selected);
+    return `${charLabel} - ${value.label}`;
+  }, [selected, values]);
+  const handleItemSelection = useCallback(valueId => {
+    select({
       id,
-      disabled,
-      charRef,
-      label,
-      values
-    } = this.props;
-    const swatch = {
-      id,
-      label,
-      values
-    };
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Transition, {
-        in: this.state.highlight,
-        timeout: 500,
-        onEntered: this.removeHighlight,
-        children: state => /*#__PURE__*/_jsx("div", {
-          "aria-hidden": true,
-          className: classNames(styles.label, {
-            [styles.labelDisabled]: disabled
-          }),
-          ref: charRef,
-          style: transition[state],
-          "data-test-id": label,
-          children: this.getLabel(label)
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        className: styles.items,
-        children: /*#__PURE__*/_jsx(VariantSwatch, {
-          swatch: swatch,
-          onClick: this.handleItemSelection
-        })
-      })]
+      value: valueId
     });
+  }, [id, select]);
+  const removeHighlight = useCallback(() => {
+    setHighlight(false);
+  }, []);
+  const swatch = {
+    id,
+    label,
+    values
   };
-  return Swatch;
-}(PureComponent);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Transition, {
+      in: highlight,
+      timeout: 500,
+      onEntered: removeHighlight,
+      children: state => /*#__PURE__*/_jsx("div", {
+        "aria-hidden": true,
+        className: cx(classes.label, {
+          [classes.labelDisabled]: disabled
+        }),
+        ref: charRef,
+        style: transition[state],
+        "data-test-id": label,
+        children: getLabel(label)
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: classes.items,
+      children: /*#__PURE__*/_jsx(VariantSwatch, {
+        swatch: swatch,
+        onClick: handleItemSelection
+      })
+    })]
+  });
+};
 Swatch.defaultProps = {
   selected: null
 };
-export default Swatch;
+export default /*#__PURE__*/memo(Swatch);

package/product/components/Characteristics/index.js

@@ -1,5 +1,5 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { isBeta } from '@shopgate/engage/core';
 import { Portal } from '@shopgate/engage/components';

package/product/components/Characteristics/transition.js

@@ -1,14 +1,10 @@
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
 export default {
   entering: {
-    background: `var(--color-primary, ${colors.primary})`,
-    color: `var(--color-primary-contrast, ${colors.primaryContrast})`
+    background: 'var(--color-primary)',
+    color: 'var(--color-primary-contrast)'
   },
   entered: {
-    background: `var(--color-primary, ${colors.primary})`,
-    color: `var(--color-primary-contrast, ${colors.primaryContrast})`
+    background: 'var(--color-primary)',
+    color: 'var(--color-primary-contrast)'
   }
 };

package/product/components/Description/index.js

@@ -2,9 +2,47 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals, PlaceholderParagraph, HtmlSanitizer, I18n } from '@shopgate/engage/components';
 import { PRODUCT_DESCRIPTION } from '@shopgate/engage/product';
-import classNames from 'classnames';
-import { container, title, placeholder, content } from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    fontSize: '0.875rem',
+    padding: '0.8125rem 1rem 1rem'
+  },
+  title: {
+    fontSize: '1rem',
+    fontWeight: 500,
+    marginBottom: '0.5rem',
+    color: theme.palette.text.primary
+  },
+  content: {
+    lineHeight: 1.7,
+    overflow: 'hidden',
+    wordBreak: ['break-all', 'break-word'],
+    color: theme.palette.text.primary,
+    hyphens: 'auto',
+    ' ul': {
+      listStyle: 'disc'
+    },
+    ' ol': {
+      listStyle: 'decimal'
+    },
+    ' ul, ol': {
+      margin: '.75em 0',
+      paddingLeft: '1.2em'
+    },
+    ' a': {
+      color: theme.palette.primary.main,
+      margin: '-.35em',
+      padding: '.35em',
+      position: 'relative'
+    }
+  },
+  placeholder: {
+    height: '0.875rem'
+  }
+}));
 
 /**
  * The product description.
@@ -13,12 +51,15 @@ import connect from "./connector";
  * @param {Function} props.navigate where to navigate on click
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Description({
   html,
   navigate,
   ...props
 }) {
+  const {
+    classes,
+    cx
+  } = useStyles();
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_DESCRIPTION,
     portalProps: {
@@ -27,17 +68,17 @@ function Description({
       ...props
     },
     children: html !== '' && /*#__PURE__*/_jsxs("div", {
-      className: `${container} engage__product__description`,
+      className: cx(classes.container, 'engage__product__description'),
       children: [/*#__PURE__*/_jsx("div", {
-        className: classNames(title, 'theme__description_heading'),
+        className: cx(classes.title, 'theme__description_heading'),
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.description_heading"
         })
       }), /*#__PURE__*/_jsx(PlaceholderParagraph, {
-        className: placeholder,
+        className: classes.placeholder,
         ready: !!html,
         children: /*#__PURE__*/_jsx("div", {
-          className: content,
+          className: classes.content,
           "data-test-id": "description",
           children: /*#__PURE__*/_jsx(HtmlSanitizer, {
             settings: {

package/product/components/EffectivityDates/constants.d.ts

@@ -0,0 +1,3 @@
+export const ALWAYS: "always";
+export const NEVER: "never";
+//# sourceMappingURL=constants.d.ts.map

package/product/components/EffectivityDates/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../product/components/EffectivityDates/constants.js"],"names":[],"mappings":"AAAA,qBAAsB,QAAQ,CAAC;AAC/B,oBAAqB,OAAO,CAAC"}

package/product/components/EffectivityDates/helpers.d.ts

@@ -0,0 +1,6 @@
+export function buildShowScheduledParams(): Object | {
+    showScheduled: string;
+};
+export function showScheduledLabel(startDate: Date, settings?: Object): boolean;
+export function showExpiringLabel(endDate: Date, settings?: Object): boolean;
+//# sourceMappingURL=helpers.d.ts.map

package/product/components/EffectivityDates/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../product/components/EffectivityDates/helpers.js"],"names":[],"mappings":"AAUO,4CAFM,MAAM,GAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAC,CAuB1C;AAQM,8CAJI,IAAI,aACJ,MAAM,GACJ,OAAO,CA6BnB;AAQM,2CAJI,IAAI,aACJ,MAAM,GACJ,OAAO,CAyBnB"}