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

package/product/components/MediaSlider/components/MediaVideo/index.js

@@ -1,19 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import { IntersectionVisibility, VideoPlayer } from "../../../../../components";
 import { useWidgetSettings } from "../../../../../core";
 import connect from "./connector";
-import { videoWrapper, videoResponsive, video } from "../../style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  videoWrapper: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'black',
+    paddingTop: '22%'
+  },
+  videoResponsive: {
+    position: 'relative',
+    overflow: 'hidden',
+    paddingTop: '56.25%'
+  },
+  video: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
 
 /**
  * The media video component.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const MediaVideo = ({
   connectivityType,
   media
 }) => {
+  const {
+    classes
+  } = useStyles();
   const settings = useWidgetSettings('@shopgate/engage/product/MediaSlider');
   const autoPlay = settings.videos.autoPlay[connectivityType] || false;
   return /*#__PURE__*/_jsx(IntersectionVisibility, {
@@ -23,9 +46,9 @@ const MediaVideo = ({
       setRef
     }) => /*#__PURE__*/_jsx("div", {
       ref: setRef,
-      className: videoWrapper,
+      className: classes.videoWrapper,
       children: /*#__PURE__*/_jsx("div", {
-        className: videoResponsive,
+        className: classes.videoResponsive,
         children: /*#__PURE__*/_jsx(VideoPlayer, {
           url: media.url,
           playing: autoPlay && visible && ratio > 0.8,
@@ -34,7 +57,7 @@ const MediaVideo = ({
           controls: settings.videos.controls,
           muted: settings.videos.muted,
           loop: settings.videos.loop,
-          className: video
+          className: classes.video
         })
       })
     })

package/product/components/MediaSlider/index.js

@@ -1,13 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals, Swiper } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_MEDIA } from '@shopgate/pwa-common-commerce/product';
 import { MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from "../../constants";
 import MediaImage from "./components/MediaImage";
 import MediaVideo from "./components/MediaVideo";
 import connect from "./connector";
-import { container } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {
+    transform: 'translate3d(0, 0, 0)',
+    position: 'relative',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+});
 const typeRenders = {
   [MEDIA_TYPE_IMAGE]: MediaImage,
   [MEDIA_TYPE_VIDEO]: MediaVideo
@@ -26,6 +36,9 @@ const MediaSlider = ({
   className,
   paginationType
 }) => {
+  const {
+    classes
+  } = useStyles();
   let currentSlide = 0;
 
   /**
@@ -46,7 +59,7 @@ const MediaSlider = ({
     return renderPlaceholder(featuredMedia);
   }
   return /*#__PURE__*/_jsx("div", {
-    className: container,
+    className: classes.container,
     children: /*#__PURE__*/_jsx(SurroundPortals, {
       portalName: PRODUCT_MEDIA,
       children: media && /*#__PURE__*/_jsx(Swiper, {

package/product/components/Options/components/TextOption/components/OptionInfo/index.js

@@ -3,7 +3,22 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { Grid, I18n } from '@shopgate/engage/components';
 import { ProductContext } from '@shopgate/engage/product/contexts';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  info: {
+    marginTop: theme.spacing(0.5),
+    padding: theme.spacing(0, 2)
+  },
+  required: {
+    color: 'var(--color-text-medium-emphasis)',
+    fontSize: '0.825rem'
+  },
+  price: {
+    textAlign: 'right',
+    fontSize: '0.825rem'
+  }
+}));
 
 /**
  * The text option info component
@@ -11,7 +26,6 @@ import styles from "./style";
  * @param {Object} context The component context
  * @return {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const OptionInfo = ({
   required,
   label,
@@ -20,6 +34,9 @@ const OptionInfo = ({
   info,
   optionInfoId
 }, context) => {
+  const {
+    classes
+  } = useStyles();
   if (!required && !price) {
     return null;
   }
@@ -38,16 +55,16 @@ const OptionInfo = ({
     ariaRequired = __('common.required');
   }
   return /*#__PURE__*/_jsxs(Grid, {
-    className: styles.info,
+    className: classes.info,
     children: [required && /*#__PURE__*/_jsx(Grid.Item, {
-      className: styles.required,
+      className: classes.required,
       "aria-hidden": true,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "common.required"
       })
     }), !!price && /*#__PURE__*/_jsxs(Grid.Item, {
       grow: 1,
-      className: styles.price,
+      className: classes.price,
       "aria-hidden": true,
       children: [`${label}: `, /*#__PURE__*/_jsx(I18n.Price, {
         currency: currency,

package/product/components/Options/components/TextOption/index.js

@@ -1,171 +1,170 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Fragment, PureComponent } from 'react';
+import React, { useState, useRef, useEffect, useMemo, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
 import debounce from 'lodash/debounce';
 import { TextField, InfoIcon } from '@shopgate/engage/components';
 import { withShowModal } from '@shopgate/engage/core/hocs';
+import { makeStyles } from '@shopgate/engage/styles';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y';
 import { ProductContext } from '@shopgate/engage/product/contexts';
 import transition from '@shopgate/engage/product/components/Characteristics/transition';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import OptionInformation from "./components/OptionInfo";
-import styles from "./style";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  row: {
+    marginBottom: theme.spacing(1)
+  },
+  wrapper: {
+    backgroundColor: 'var(--color-background-accent)',
+    padding: theme.spacing(1, 2),
+    minHeight: 56
+  },
+  element: {
+    paddingBottom: 0,
+    '& label': {
+      fontWeight: 400,
+      color: 'var(--color-text-high-emphasis, inherit)'
+    },
+    '& input': {
+      fontWeight: 500,
+      color: theme.palette.text.primary
+    },
+    '& .placeholder': {
+      color: theme.palette.text.secondary
+    }
+  },
+  infoIcon: {
+    color: colors.shade9
+  }
+}));
 
 /**
  * The TextOption component
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-let TextOption = /*#__PURE__*/function (_PureComponent) {
-  /**
-   * @param {Object} props The component props.
-   */
-  function TextOption(props) {
-    var _this;
-    _this = _PureComponent.call(this, props) || this;
-    /**
-     * @param {Object} ref ref
-     */
-    _this.setRef = ref => {
-      _this.ref = ref;
-    };
-    /**
-     * Remove highlight state
-     */
-    _this.removeHighlight = () => {
-      _this.setState({
-        highlight: false
-      });
-    };
-    /**
-     * Checks if required input is done.
-     * @return {boolean}
-     */
-    _this.checkInput = () => {
-      if (!_this.props.required) {
-        return true;
-      }
-      if (_this.props.value) {
-        return true;
-      }
-      broadcastLiveMessage('product.fill_out_required_input_first');
-      _this.ref.scrollIntoView({
-        behavior: 'smooth'
-      });
-      _this.setState({
-        highlight: true
-      });
-      return false;
-    };
-    /**
-     * @returns {JSX}
-     */
-    _this.infoIcon = () => {
-      if (!_this.props.info) {
-        return null;
-      }
-      const {
-        label,
-        info,
-        showModal
-      } = _this.props;
-      return /*#__PURE__*/_jsx("div", {
-        onClick: () => showModal({
-          title: label,
-          message: info
-        }),
-        "aria-hidden": true,
-        children: /*#__PURE__*/_jsx(InfoIcon, {
-          size: 24,
-          className: styles.infoIcon
-        })
-      });
-    };
-    /**
-     * Handles form submits by key.
-     * @param {Object} event The event that caused the keypress.
-     */
-    _this.handleKeyPress = event => {
-      // Enter key and on iOS also the "Done" button.
-      if (event.which === 13) {
-        _this.ref.blur();
-      }
-    };
-    /**
-     * @param {string} val value.
-     */
-    _this.handleChange = val => {
-      _this.props.onChange(_this.props.id, val, _this.props.price);
-    };
-    _this.handleDebounced = debounce(_this.handleChange, 300);
-    _this.state = {
-      highlight: false
+const TextOption = ({
+  conditioner,
+  id,
+  label,
+  onChange,
+  price,
+  required,
+  showModal,
+  info,
+  value
+}) => {
+  const {
+    classes
+  } = useStyles();
+  const [highlight, setHighlight] = useState(false);
+  const fieldRef = useRef(null);
+  const conditionerName = `text-option-${id}`;
+  const checkInput = useCallback(() => {
+    if (!required) {
+      return true;
+    }
+    if (value) {
+      return true;
+    }
+    broadcastLiveMessage('product.fill_out_required_input_first');
+    fieldRef.current?.scrollIntoView({
+      behavior: 'smooth'
+    });
+    setHighlight(true);
+    return false;
+  }, [required, value]);
+  useEffect(() => {
+    conditioner.addConditioner(conditionerName, checkInput);
+    return () => {
+      conditioner.removeConditioner(conditionerName);
     };
-    _this.ref = null;
-    props.conditioner.addConditioner(`text-option-${props.id}`, _this.checkInput);
-    return _this;
-  }
-  _inheritsLoose(TextOption, _PureComponent);
-  var _proto = TextOption.prototype;
-  /**
-   * @return {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      id,
-      label,
-      value,
-      required,
-      price,
-      info
-    } = this.props;
-    const optionInfoId = id;
+  }, [checkInput, conditioner, conditionerName]);
+  const setRef = useCallback(ref => {
+    fieldRef.current = ref;
+  }, []);
+  const removeHighlight = useCallback(() => {
+    setHighlight(false);
+  }, []);
+  const handleChange = useCallback(val => {
+    onChange(id, val, price);
+  }, [id, onChange, price]);
+  const handleDebounced = useMemo(() => debounce(handleChange, 300), [handleChange]);
+  useEffect(() => () => {
+    handleDebounced.cancel();
+  }, [handleDebounced]);
+  const handleKeyPress = useCallback(event => {
+    if (event.which === 13) {
+      fieldRef.current?.blur();
+    }
+  }, []);
+  const infoIcon = useCallback(() => {
+    if (!info) {
+      return null;
+    }
     return /*#__PURE__*/_jsx("div", {
-      className: styles.row,
-      children: /*#__PURE__*/_jsx(Transition, {
-        in: this.state.highlight,
-        timeout: 700,
-        onEntered: this.removeHighlight,
-        children: state => /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("div", {
-            className: styles.wrapper,
-            style: transition[state],
-            children: /*#__PURE__*/_jsx(TextField, {
-              setRef: this.setRef,
-              name: `text_${id}`,
-              value: value,
-              onChange: this.handleDebounced,
-              onKeyPress: this.handleKeyPress,
-              placeholder: label,
-              label: label,
-              rightElement: this.infoIcon(),
-              "data-test-id": label,
-              hasUnderline: false,
-              className: styles.element,
-              attributes: {
-                'aria-describedby': optionInfoId
-              }
-            })
-          }), /*#__PURE__*/_jsx(OptionInformation, {
-            label: label,
-            required: required,
-            price: price,
-            info: info,
-            optionInfoId: optionInfoId
-          })]
-        })
+      onClick: () => showModal({
+        title: label,
+        message: info
+      }),
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx(InfoIcon, {
+        size: 24,
+        className: classes.infoIcon
       })
     });
-  };
-  return TextOption;
-}(PureComponent);
+  }, [classes.infoIcon, info, label, showModal]);
+  const optionInfoId = id;
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.row,
+    children: /*#__PURE__*/_jsx(Transition, {
+      in: highlight,
+      timeout: 700,
+      onEntered: removeHighlight,
+      children: state => /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classes.wrapper,
+          style: transition[state],
+          children: /*#__PURE__*/_jsx(TextField, {
+            setRef: setRef,
+            name: `text_${id}`,
+            value: value,
+            onChange: handleDebounced,
+            onKeyPress: handleKeyPress,
+            placeholder: label,
+            label: label,
+            rightElement: infoIcon(),
+            "data-test-id": label,
+            hasUnderline: false,
+            className: classes.element,
+            attributes: {
+              'aria-describedby': optionInfoId
+            }
+          })
+        }), /*#__PURE__*/_jsx(OptionInformation, {
+          label: label,
+          required: required,
+          price: price,
+          info: info,
+          optionInfoId: optionInfoId
+        })]
+      })
+    })
+  });
+};
 TextOption.defaultProps = {
   info: null,
   value: null
 };
+const MemoTextOption = /*#__PURE__*/memo(TextOption);
 export default withShowModal(props => /*#__PURE__*/_jsx(ProductContext.Consumer, {
   children: ({
     conditioner
-  }) => /*#__PURE__*/_jsx(TextOption, {
+  }) => /*#__PURE__*/_jsx(MemoTextOption, {
     conditioner: conditioner,
     ...props
   })

package/product/components/OrderQuantityHint/index.js

@@ -4,21 +4,30 @@ import { I18n, SurroundPortals } from '@shopgate/engage/components';
 import { i18n, hasNewServices, isBeta } from '@shopgate/engage/core/helpers';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { PRODUCT_ORDER_QUANTITY } from '@shopgate/engage/product';
+import { makeStyles } from '@shopgate/engage/styles';
 import { formatFloat } from '@shopgate/engage/components/QuantityInput/helper';
 import withProductStock from "../../hocs/withProductStock";
 import withProduct from "../../hocs/withProduct";
-import { hint } from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  hint: {
+    fontSize: '0.75rem',
+    color: 'var(--color-text-medium-emphasis)'
+  }
+});
 
 /**
  * The Product Order Quantity Hint component.
  * @return {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const OrderQuantityHint = ({
   stock,
   product,
   className
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     hasCatchWeight,
     unit: productUnit
@@ -48,7 +57,7 @@ const OrderQuantityHint = ({
         stock
       },
       children: [showContent && stock && !!stock.minOrderQuantity && /*#__PURE__*/_jsx("div", {
-        className: hint,
+        className: classes.hint,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.minOrderQuantity",
           params: {
@@ -57,7 +66,7 @@ const OrderQuantityHint = ({
           }
         })
       }), showContent && stock && !!stock.maxOrderQuantity && /*#__PURE__*/_jsx("div", {
-        className: hint,
+        className: classes.hint,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.maxOrderQuantity",
           params: {

package/product/components/PriceDifference/index.js

@@ -1,8 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Price from '@shopgate/pwa-ui-shared/Price';
-import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()({
+  positive: {
+    color: colors.shade4,
+    ':before': {
+      content: '"+"'
+    }
+  },
+  negative: {
+    color: 'var(--color-primary)'
+  }
+});
 
 /**
  * The price difference component
@@ -12,18 +27,21 @@ import styles from "./style";
  * @param {number} props.difference The price difference.
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const PriceDifference = ({
   className,
   currency,
   difference
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (difference === 0) {
     return null;
   }
-  const priceClassName = classNames(className, {
-    [styles.positive]: difference > 0,
-    [styles.negative]: difference < 0
+  const priceClassName = cx(className, {
+    [classes.positive]: difference > 0,
+    [classes.negative]: difference < 0
   });
   return /*#__PURE__*/_jsx(Price, {
     className: priceClassName,

package/product/components/PriceInfo/PriceInfo.js

@@ -1,20 +1,19 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import classNames from 'classnames';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { ConditionalWrapper } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import connect from "./PriceInfo.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  container: css({
+const useStyles = makeStyles()({
+  container: {
     color: themeConfig.colors.shade3
-  }).toString(),
-  noWrap: css({
+  },
+  noWrap: {
     whiteSpace: 'nowrap'
-  }).toString()
-};
+  }
+});
 
 /**
  * The price info component
@@ -27,6 +26,10 @@ const PriceInfo = ({
   displayPricePerMeasureUnit,
   currency: externalCurrency
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     price = {},
     unitPriceRefValue,
@@ -63,9 +66,11 @@ const PriceInfo = ({
     condition: !!wrapper,
     wrapper: wrapper,
     children: /*#__PURE__*/_jsx("div", {
-      className: classNames(styles.container, className, 'engage__product__price-info', {
-        [styles.noWrap]: content !== info
-      }),
+      className: cx(classes.container, className, 'engage__product__price-info', {
+        [classes.noWrap]: content !== info
+      })
+      // eslint-disable-next-line react/no-danger
+      ,
       dangerouslySetInnerHTML: {
         __html: content
       },

package/product/components/ProductBadges/index.js

@@ -1,13 +1,12 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import classNames from 'classnames';
 import kebabCase from 'lodash/kebabCase';
+import { makeStyles } from '@shopgate/engage/styles';
 import { SurroundPortals } from "../../../components";
 import { PORTAL_PRODUCT_BADGES } from "../../../components/constants";
 import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  root: css({
+const useStyles = makeStyles()({
+  root: {
     position: 'absolute',
     paddingLeft: 10,
     left: 0,
@@ -20,8 +19,8 @@ const styles = {
     ' > *:empty': {
       display: 'none'
     }
-  }).toString()
-};
+  }
+});
 
 /**
  * The ProductBadges component
@@ -35,6 +34,10 @@ const ProductBadges = ({
   portalProps,
   className
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const props = useMemo(() => ({
     ...portalProps,
     location,
@@ -47,7 +50,7 @@ const ProductBadges = ({
     return `product_badges__${kebabCase(location)}`;
   }, [location]);
   return /*#__PURE__*/_jsx("div", {
-    className: classNames(styles.root, className, 'product_badges', locationClass),
+    className: cx(classes.root, className, 'product_badges', locationClass),
     children: /*#__PURE__*/_jsx(SurroundPortals, {
       portalName: PORTAL_PRODUCT_BADGES,
       portalProps: props,