@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/product/components/ProductName/ProductName.js

@@ -1,25 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import classNames from 'classnames';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { ConditionalWrapper, SurroundPortals } from '@shopgate/engage/components';
 import ProductNameContent from "./ProductNameContent";
 import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  wrapper: css({
+const useStyles = makeStyles()({
+  wrapper: {
     [responsiveMediaQuery('>xs', {
       webOnly: true
     })]: {
       wordBreak: 'keep-all !important',
       hyphens: 'none !important'
     }
-  }).toString()
-};
+  }
+});
 
 /**
- * @param {Object} props The component props
- * @returns {JSX.Element}
+ * The ProductName component.
  */
 const ProductName = ({
   name,
@@ -31,35 +27,30 @@ const ProductName = ({
   itemProp,
   rows,
   style
-}) => /*#__PURE__*/_jsx(ConditionalWrapper, {
-  condition: !!portalName,
-  wrapper: children => /*#__PURE__*/_jsx(SurroundPortals, {
-    portalName: portalName,
-    portalProps: portalProps,
-    children: children
-  }),
-  children: /*#__PURE__*/_jsx("div", {
-    className: classNames(styles.wrapper, className, 'engage__product__product-name'),
-    style: style,
-    itemProp: itemProp,
-    "data-test-id": testId,
-    "aria-label": `${name}.`,
-    children: /*#__PURE__*/_jsx(ProductNameContent, {
-      name: name,
-      ellipsis: ellipsis,
-      rows: rows
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx(ConditionalWrapper, {
+    condition: !!portalName,
+    wrapper: children => /*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: portalName ?? '',
+      portalProps: portalProps,
+      children: children
+    }),
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(classes.wrapper, className, 'engage__product__product-name'),
+      style: style,
+      itemProp: itemProp,
+      "data-test-id": testId,
+      "aria-label": `${name}.`,
+      children: /*#__PURE__*/_jsx(ProductNameContent, {
+        name: name,
+        ellipsis: ellipsis,
+        rows: rows
+      })
     })
-  })
-});
-ProductName.defaultProps = {
-  name: null,
-  className: null,
-  ellipsis: true,
-  itemProp: null,
-  portalName: null,
-  portalProps: null,
-  style: null,
-  rows: null,
-  testId: null
+  });
 };
 export default ProductName;

package/product/components/ProductName/ProductNameContent.d.ts

@@ -0,0 +1,12 @@
+export interface ProductNameContentProps {
+    name?: string | null;
+    ellipsis?: boolean;
+    rows?: number | null;
+}
+/**
+ * The ProductNameContent component.
+ * @returns The ProductNameContent component.
+ */
+declare const ProductNameContent: ({ name, ellipsis, rows, }: ProductNameContentProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductNameContent;
+//# sourceMappingURL=ProductNameContent.d.ts.map

package/product/components/ProductName/ProductNameContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductNameContent.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductNameContent.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,QAAA,MAAM,kBAAkB,GAAI,2BAIzB,uBAAuB,4CAczB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/product/components/ProductName/ProductNameContent.js

@@ -1,16 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Ellipsis, ConditionalWrapper } from '@shopgate/engage/components';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * @param {Object} props The component props
- * @returns {JSX}
+ * The ProductNameContent component.
+ * @returns The ProductNameContent component.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const ProductNameContent = ({
-  name,
-  ellipsis,
-  rows
+  name = null,
+  ellipsis = true,
+  rows = null
 }) => /*#__PURE__*/_jsx(ConditionalWrapper, {
   condition: ellipsis,
   wrapper: children => /*#__PURE__*/_jsx(Ellipsis, {
@@ -21,13 +19,8 @@ const ProductNameContent = ({
   }),
   children: /*#__PURE__*/_jsx("span", {
     dangerouslySetInnerHTML: {
-      __html: name
+      __html: name || ''
     }
   })
 });
-ProductNameContent.defaultProps = {
-  name: null,
-  ellipsis: true,
-  rows: null
-};
 export default ProductNameContent;

package/product/components/ProductProperties/Content.js

@@ -1,20 +1,30 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { isBeta } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
 import { getGroupsFromProperties } from "./helpers/getGroupsFromProperties";
 import GroupedProperties from "./GroupedProperties";
 import Wrapper from "./Wrapper";
 import Rows from "./Rows";
-import { groupsContainer } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  groupsContainer: {
+    borderBottom: `3px solid ${theme.palette.background.default}`,
+    marginBottom: theme.spacing(1.5)
+  }
+}));
 
 /**
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Content = ({
   properties
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const groups = useMemo(() => getGroupsFromProperties(properties), [properties]);
   if (!properties) {
     return null;
@@ -34,7 +44,7 @@ const Content = ({
     It should only be used for approved BETA Client Projects
   */
   return /*#__PURE__*/_jsx("div", {
-    className: `${groupsContainer} engage__product__product-properties`,
+    className: cx(classes.groupsContainer, 'engage__product__product-properties'),
     children: /*#__PURE__*/_jsx(GroupedProperties, {
       groups: groups
     })

package/product/components/ProductProperties/Group.js

@@ -1,24 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { subgroup } from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  subgroup: {
+    paddingTop: theme.spacing(1),
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    fontSize: '0.75rem'
+  }
+}));
 
 /**
  * Renders a product properties group header.
  * @param {Object} props The component props.
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Group = ({
   group
-}) => /*#__PURE__*/_jsx("tr", {
-  children: /*#__PURE__*/_jsx("td", {
-    colSpan: "2",
-    className: subgroup,
-    children: /*#__PURE__*/_jsx("span", {
-      dangerouslySetInnerHTML: {
-        __html: group
-      }
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("tr", {
+    children: /*#__PURE__*/_jsx("td", {
+      colSpan: "2",
+      className: classes.subgroup,
+      children: /*#__PURE__*/_jsx("span", {
+        dangerouslySetInnerHTML: {
+          __html: group
+        }
+      })
     })
-  })
-});
+  });
+};
 export default /*#__PURE__*/React.memo(Group);

package/product/components/ProductProperties/GroupedProperties.js

@@ -2,34 +2,44 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Accordion } from '@shopgate/pwa-ui-material';
 import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
 import Lists from "./Lists";
 import ListsHTML from "./ListsHTML";
 import Wrapper from "./Wrapper";
-import { accordion } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  accordion: {
+    borderTop: `3px solid ${theme.palette.background.default}`
+  }
+}));
 
 /**
  * Renders the properties as groups.
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const GroupedProperties = ({
   groups
-}) => groups.map(group => /*#__PURE__*/_jsx("div", {
-  className: accordion,
-  children: /*#__PURE__*/_jsx(Accordion, {
-    renderLabel: () => group.label || i18n.text(`product.displayGroups.${group.key}`),
-    testId: `product-properties-group-${!group.label ? group.key : `${group.key}-${group.label}`}`,
-    children: /*#__PURE__*/_jsx(Wrapper, {
-      dense: true,
-      groupName: group.label || group.key,
-      htmlOnly: group.htmlOnly,
-      children: group.htmlOnly ? /*#__PURE__*/_jsx(ListsHTML, {
-        properties: group.properties
-      }) : /*#__PURE__*/_jsx(Lists, {
-        properties: group.properties
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return groups.map(group => /*#__PURE__*/_jsx("div", {
+    className: classes.accordion,
+    children: /*#__PURE__*/_jsx(Accordion, {
+      renderLabel: () => group.label || i18n.text(`product.displayGroups.${group.key}`),
+      testId: `product-properties-group-${!group.label ? group.key : `${group.key}-${group.label}`}`,
+      children: /*#__PURE__*/_jsx(Wrapper, {
+        dense: true,
+        groupName: group.label || group.key,
+        htmlOnly: group.htmlOnly,
+        children: group.htmlOnly ? /*#__PURE__*/_jsx(ListsHTML, {
+          properties: group.properties
+        }) : /*#__PURE__*/_jsx(Lists, {
+          properties: group.properties
+        })
       })
     })
-  })
-}, group.key));
+  }, group.key));
+};
 export default GroupedProperties;

package/product/components/ProductProperties/Row.js

@@ -1,42 +1,60 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { tableCell } from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  tableCell: {
+    maxWidth: 100,
+    padding: theme.spacing(0.25, 1),
+    overflowWrap: 'break-word',
+    ':first-of-type': {
+      paddingLeft: 0
+    },
+    ':last-of-type': {
+      paddingRight: 0
+    }
+  }
+}));
 
 /**
  * Renders a single properties row.
  * @param {Object} props The component props.
  * @return {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Row = ({
   label,
   value,
   type
-}) => /*#__PURE__*/_jsxs("tr", {
-  className: "engage__product__product-property",
-  "data-type": type,
-  "data-label": label,
-  "aria-label": `${typeof label === 'string' ? label : ''}: ${typeof value === 'string' ? value : ''}`,
-  tabIndex: 0,
-  children: [/*#__PURE__*/_jsx("td", {
-    className: tableCell,
-    "aria-hidden": true,
-    children: /*#__PURE__*/_jsx("span", {
-      dangerouslySetInnerHTML: {
-        __html: label
-      }
-    })
-  }), /*#__PURE__*/_jsx("td", {
-    className: tableCell,
-    "data-test-id": `property: ${value}`,
-    "aria-hidden": true,
-    children: /*#__PURE__*/_jsx("span", {
-      dangerouslySetInnerHTML: {
-        __html: value
-      }
-    })
-  })]
-});
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsxs("tr", {
+    className: "engage__product__product-property",
+    "data-type": type,
+    "data-label": label,
+    "aria-label": `${typeof label === 'string' ? label : ''}: ${typeof value === 'string' ? value : ''}`,
+    tabIndex: 0,
+    children: [/*#__PURE__*/_jsx("td", {
+      className: classes.tableCell,
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx("span", {
+        dangerouslySetInnerHTML: {
+          __html: label
+        }
+      })
+    }), /*#__PURE__*/_jsx("td", {
+      className: classes.tableCell,
+      "data-test-id": `property: ${value}`,
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx("span", {
+        dangerouslySetInnerHTML: {
+          __html: value
+        }
+      })
+    })]
+  });
+};
 Row.defaultProps = {
   type: null
 };

package/product/components/ProductProperties/Rows.js

@@ -3,12 +3,29 @@ import PropTypes from 'prop-types';
 import Row from "./Row";
 import RowHTML from "./RowHTML";
 
+/**
+ * Coerces API property values (string or list) to one HTML string for Row / RowHTML.
+ * @param {*} value Raw value from product properties payload.
+ * @param {Object} options Options.
+ * @param {boolean} [options.html=false] If true, concatenate array segments; else join with comma.
+ * @returns {string}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const normalizePropertyValue = (value, {
+  html = false
+} = {}) => {
+  if (Array.isArray(value)) {
+    const parts = value.map(v => v == null ? '' : String(v));
+    return html ? parts.join('') : parts.filter(Boolean).join(', ');
+  }
+  return value == null ? '' : String(value);
+};
+
 /**
  * Renders rows of product properties.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Rows = ({
   properties
 }) => properties.map(({
@@ -18,14 +35,17 @@ const Rows = ({
 }) => {
   if (type === 'html') {
     return /*#__PURE__*/_jsx(RowHTML, {
-      value: value,
-      label: label
+      label: label,
+      value: normalizePropertyValue(value, {
+        html: true
+      })
     }, label);
   }
+  const displayValue = normalizePropertyValue(value);
   return /*#__PURE__*/_jsx(Row, {
     label: label,
-    value: value,
-    type: type
-  }, `${label}-${value}`);
+    type: type,
+    value: displayValue
+  }, `${label}-${displayValue}`);
 });
 export default /*#__PURE__*/React.memo(Rows);

package/product/components/ProductProperties/Wrapper.js

@@ -1,31 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cxs from 'classnames';
-import { container, containerDense } from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    fontSize: '0.875rem',
+    padding: theme.spacing(0, 2, 2),
+    marginBottom: theme.spacing(1.5)
+  },
+  containerDense: {
+    padding: 0,
+    marginBottom: 0
+  }
+}));
 
 /**
  * Renders the general properties wrapper table.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Wrapper = ({
   children,
   dense,
   groupName,
   htmlOnly
-}) => /*#__PURE__*/_jsx("div", {
-  className: cxs('engage__product__product-property-group', {
-    [container]: !dense,
-    [containerDense]: dense
-  }),
-  "data-group-name": groupName.toLowerCase(),
-  children: htmlOnly ? children : /*#__PURE__*/_jsxs("table", {
-    children: [/*#__PURE__*/_jsx("thead", {}), /*#__PURE__*/_jsx("tbody", {
-      children: children
-    })]
-  })
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: cx('engage__product__product-property-group', {
+      [classes.container]: !dense,
+      [classes.containerDense]: dense
+    }),
+    "data-group-name": groupName.toLowerCase(),
+    children: htmlOnly ? children : /*#__PURE__*/_jsxs("table", {
+      children: [/*#__PURE__*/_jsx("thead", {}), /*#__PURE__*/_jsx("tbody", {
+        children: children
+      })]
+    })
+  });
+};
 Wrapper.defaultProps = {
   dense: false,
   htmlOnly: false,

package/product/components/ProductProperties/helpers/getSubgroupsFromProperties.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 /**
  * Collects all display sub-groups from the properties.
  * @param {Array} [properties=null] The properties to parse.

package/product/components/ProductSlider/index.js

@@ -3,9 +3,18 @@ import PropTypes from 'prop-types';
 import { useWidgetSettings } from '@shopgate/engage/core';
 import { useThemeComponents } from '@shopgate/engage/core/hooks';
 import { Swiper } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { ProductListTypeProvider, ProductListEntryProvider } from '@shopgate/engage/product/providers';
-import { container, items } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {
+    paddingBottom: 10
+  }
+});
+const items = {
+  margin: '0 8px',
+  height: '100%'
+};
 export const WIDGET_ID = '@shopgate/engage/product/ProductSlider';
 
 /**
@@ -13,6 +22,10 @@ export const WIDGET_ID = '@shopgate/engage/product/ProductSlider';
  * @returns {JSX.Element}
  */
 function ProductSlider(props) {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     autoplay,
     className,
@@ -44,14 +57,14 @@ function ProductSlider(props) {
           delay
         }
       }),
-      className: `${className} engage__product__product-slider`,
+      className: cx(className, 'engage__product__product-slider'),
       controls: false,
       indicators: false,
       freeMode: !snap,
       ...swiperProps,
       slidesPerView: slidesPerView,
       children: productIds.map(id => /*#__PURE__*/_jsx(Swiper.Item, {
-        className: container,
+        className: classes.container,
         children: /*#__PURE__*/_jsx(ProductListEntryProvider, {
           productId: id,
           children: /*#__PURE__*/_jsx(Item, {

package/product/components/ProductSlider/spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable require-jsdoc */
 import React from 'react';
 import { shallow } from 'enzyme';
 import ProductSlider from "./index";
@@ -35,5 +34,4 @@ describe('<ProductSlider />', () => {
     }));
     expect(wrapper).toMatchSnapshot();
   });
-});
-/* eslint-enable require-jsdoc */
+});

package/product/components/ProductVariants/VariantAvailability.js

@@ -1,19 +1,28 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { Availability, SurroundPortals } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_VARIANT_SELECT_PICKER_AVAILABILITY } from '@shopgate/pwa-common-commerce/product';
 import connect from "./VariantAvailability.connector";
-import styles from "./VariantAvailability.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  availability: {
+    float: 'right',
+    pointerEvents: 'none'
+  }
+});
 
 /**
  * The VariantAvailability component.
  * @param {Object} availability availability
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const VariantAvailability = ({
   availability
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (!availability) {
     return null;
   }
@@ -25,7 +34,7 @@ const VariantAvailability = ({
     portalName: PRODUCT_VARIANT_SELECT_PICKER_AVAILABILITY,
     portalProps: availability,
     children: /*#__PURE__*/_jsx(Availability, {
-      className: styles,
+      className: classes.availability,
       state: state,
       text: text
     })

package/product/components/QuantityPicker/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
+import { css } from '@shopgate/engage/styles';
 import { logger } from "../../../core/helpers";
 import { useWidgetStyles } from "../../../core/hooks";
 import { I18n, SheetDrawer, SheetList } from "../../../components";
@@ -97,7 +97,7 @@ const QuantityPicker = ({
     }),
     isOpen: opened,
     onClose: handleCloseSheet,
-    contentClassName: css(styles.sheet).toString(),
+    contentClassName: css(styles.sheet),
     children: /*#__PURE__*/_jsx(SheetList, {
       children: items.map(item => /*#__PURE__*/_jsx(SheetList.Item, {
         title: item,