@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/product/components/ProductList/components/Layout/index.js

@@ -8,14 +8,16 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Layout = ({
   children
-}) => /*#__PURE__*/React.createElement(List, {
+}) => /*#__PURE__*/_jsx(List, {
   className: `${styles.list} engage__product__product-list`,
   itemScope: true,
   itemType: "http://schema.org/ItemList",
-  "data-test-id": "productList"
-}, children);
+  "data-test-id": "productList",
+  children: children
+});
 Layout.defaultProps = {
   children: null
 };

package/product/components/ProductList/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.regexp.flags.js";
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -15,6 +14,7 @@ import Layout from "./components/Layout";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ProductList = ({
   flags,
   infiniteLoad,
@@ -25,33 +25,39 @@ const ProductList = ({
   scope
 }) => {
   if (!infiniteLoad) {
-    return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(ProductListTypeProvider, {
-      type: "productList",
-      subType: scope
-    }, products.map(product => /*#__PURE__*/React.createElement(Iterator, _extends({
-      display: flags,
-      id: product.id,
-      key: product.id
-    }, product)))));
+    return /*#__PURE__*/_jsx(Layout, {
+      children: /*#__PURE__*/_jsx(ProductListTypeProvider, {
+        type: "productList",
+        subType: scope,
+        children: products.map(product => /*#__PURE__*/_jsx(Iterator, {
+          display: flags,
+          id: product.id,
+          ...product
+        }, product.id))
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
-    getContentRef
-  }) => /*#__PURE__*/React.createElement(ProductListTypeProvider, {
-    type: "productList",
-    subType: scope
-  }, /*#__PURE__*/React.createElement(InfiniteContainer, {
-    containerRef: getContentRef(),
-    wrapper: Layout,
-    iterator: Iterator,
-    loader: handleGetProducts,
-    items: products,
-    loadingIndicator: /*#__PURE__*/React.createElement(LoadingIndicator, null),
-    totalItems: totalProductCount,
-    initialLimit: 10,
-    limit: ITEMS_PER_LOAD,
-    requestHash: requestHash,
-    enablePromiseBasedLoading: true
-  })));
+  return /*#__PURE__*/_jsx(ViewContext.Consumer, {
+    children: ({
+      getContentRef
+    }) => /*#__PURE__*/_jsx(ProductListTypeProvider, {
+      type: "productList",
+      subType: scope,
+      children: /*#__PURE__*/_jsx(InfiniteContainer, {
+        containerRef: getContentRef(),
+        wrapper: Layout,
+        iterator: Iterator,
+        loader: handleGetProducts,
+        items: products,
+        loadingIndicator: /*#__PURE__*/_jsx(LoadingIndicator, {}),
+        totalItems: totalProductCount,
+        initialLimit: 10,
+        limit: ITEMS_PER_LOAD,
+        requestHash: requestHash,
+        enablePromiseBasedLoading: true
+      })
+    })
+  });
 };
 ProductList.defaultProps = {
   flags: null,

package/product/components/ProductName/ProductName.js

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { 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({
     [responsiveMediaQuery('>xs', {
@@ -30,23 +31,26 @@ const ProductName = ({
   itemProp,
   rows,
   style
-}) => /*#__PURE__*/React.createElement(ConditionalWrapper, {
+}) => /*#__PURE__*/_jsx(ConditionalWrapper, {
   condition: !!portalName,
-  wrapper: children => /*#__PURE__*/React.createElement(SurroundPortals, {
+  wrapper: children => /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: portalName,
-    portalProps: portalProps
-  }, children)
-}, /*#__PURE__*/React.createElement("div", {
-  className: classNames(styles.wrapper, className, 'engage__product__product-name'),
-  style: style,
-  itemProp: itemProp,
-  "data-test-id": testId,
-  "aria-label": `${name}.`
-}, /*#__PURE__*/React.createElement(ProductNameContent, {
-  name: name,
-  ellipsis: ellipsis,
-  rows: rows
-})));
+    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
+    })
+  })
+});
 ProductName.defaultProps = {
   name: null,
   className: null,

package/product/components/ProductName/ProductNameContent.js

@@ -6,20 +6,25 @@ import { Ellipsis, ConditionalWrapper } from '@shopgate/engage/components';
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ProductNameContent = ({
   name,
   ellipsis,
   rows
-}) => /*#__PURE__*/React.createElement(ConditionalWrapper, {
+}) => /*#__PURE__*/_jsx(ConditionalWrapper, {
   condition: ellipsis,
-  wrapper: children => /*#__PURE__*/React.createElement(Ellipsis, {
-    rows: rows !== null ? rows : undefined
-  }, /*#__PURE__*/React.createElement("span", null, children))
-}, /*#__PURE__*/React.createElement("span", {
-  dangerouslySetInnerHTML: {
-    __html: name
-  }
-}));
+  wrapper: children => /*#__PURE__*/_jsx(Ellipsis, {
+    rows: rows !== null ? rows : undefined,
+    children: /*#__PURE__*/_jsx("span", {
+      children: children
+    })
+  }),
+  children: /*#__PURE__*/_jsx("span", {
+    dangerouslySetInnerHTML: {
+      __html: name
+    }
+  })
+});
 ProductNameContent.defaultProps = {
   name: null,
   ellipsis: true,

package/product/components/ProductProperties/Content.js

@@ -11,6 +11,7 @@ import { groupsContainer } from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Content = ({
   properties
 }) => {
@@ -21,20 +22,23 @@ const Content = ({
 
   // Display the simple properties if no groups exist or if not in beta mode.
   if (!isBeta() || !groups || groups.length === 0) {
-    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Rows, {
-      properties: properties
-    }));
+    return /*#__PURE__*/_jsx(Wrapper, {
+      children: /*#__PURE__*/_jsx(Rows, {
+        properties: properties
+      })
+    });
   }
 
   /*
     This feature is currently in BETA testing.
     It should only be used for approved BETA Client Projects
   */
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${groupsContainer} engage__product__product-properties`
-  }, /*#__PURE__*/React.createElement(GroupedProperties, {
-    groups: groups
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: `${groupsContainer} engage__product__product-properties`,
+    children: /*#__PURE__*/_jsx(GroupedProperties, {
+      groups: groups
+    })
+  });
 };
 Content.defaultProps = {
   properties: null

package/product/components/ProductProperties/Group.js

@@ -7,14 +7,18 @@ import { subgroup } from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Group = ({
   group
-}) => /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-  colSpan: "2",
-  className: subgroup
-}, /*#__PURE__*/React.createElement("span", {
-  dangerouslySetInnerHTML: {
-    __html: group
-  }
-})));
+}) => /*#__PURE__*/_jsx("tr", {
+  children: /*#__PURE__*/_jsx("td", {
+    colSpan: "2",
+    className: subgroup,
+    children: /*#__PURE__*/_jsx("span", {
+      dangerouslySetInnerHTML: {
+        __html: group
+      }
+    })
+  })
+});
 export default /*#__PURE__*/React.memo(Group);

package/product/components/ProductProperties/GroupedProperties.js

@@ -12,21 +12,24 @@ import { accordion } from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const GroupedProperties = ({
   groups
-}) => groups.map(group => /*#__PURE__*/React.createElement("div", {
-  key: group.key,
-  className: accordion
-}, /*#__PURE__*/React.createElement(Accordion, {
-  renderLabel: () => group.label || i18n.text(`product.displayGroups.${group.key}`),
-  testId: `product-properties-group-${!group.label ? group.key : `${group.key}-${group.label}`}`
-}, /*#__PURE__*/React.createElement(Wrapper, {
-  dense: true,
-  groupName: group.label || group.key,
-  htmlOnly: group.htmlOnly
-}, group.htmlOnly ? /*#__PURE__*/React.createElement(ListsHTML, {
-  properties: group.properties
-}) : /*#__PURE__*/React.createElement(Lists, {
-  properties: group.properties
-})))));
+}) => 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
+      })
+    })
+  })
+}, group.key));
 export default GroupedProperties;

package/product/components/ProductProperties/Lists.js

@@ -11,15 +11,18 @@ import Rows from "./Rows";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const Lists = ({
   properties
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Rows, {
-  properties: getPropertiesWithoutSubgroup(properties)
-}), getSubgroupsFromProperties(properties).map(group => /*#__PURE__*/React.createElement(React.Fragment, {
-  key: group
-}, /*#__PURE__*/React.createElement(Group, {
-  group: group
-}), /*#__PURE__*/React.createElement(Rows, {
-  properties: getPropertiesBySubgroup(properties, group)
-}))));
+}) => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Rows, {
+    properties: getPropertiesWithoutSubgroup(properties)
+  }), getSubgroupsFromProperties(properties).map(group => /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(Group, {
+      group: group
+    }), /*#__PURE__*/_jsx(Rows, {
+      properties: getPropertiesBySubgroup(properties, group)
+    })]
+  }, group))]
+});
 export default Lists;

package/product/components/ProductProperties/ListsHTML.js

@@ -8,6 +8,7 @@ import { HtmlSanitizer } from '@shopgate/engage/components';
  * @param {Object} props The component props.
  * @return {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ListsHTML = ({
   properties
 }) => {
@@ -28,16 +29,17 @@ const ListsHTML = ({
     label,
     value,
     type
-  }) => /*#__PURE__*/React.createElement("div", {
-    key: label,
+  }) => /*#__PURE__*/_jsx("div", {
     className: "engage__product__product-property",
     "data-type": type,
-    "data-label": label
-  }, /*#__PURE__*/React.createElement(HtmlSanitizer, {
-    settings: {
-      handleClick,
-      html: value
-    }
-  }, value)));
+    "data-label": label,
+    children: /*#__PURE__*/_jsx(HtmlSanitizer, {
+      settings: {
+        handleClick,
+        html: value
+      },
+      children: value
+    })
+  }, label));
 };
 export default /*#__PURE__*/React.memo(ListsHTML);

package/product/components/ProductProperties/ProductProperties.js

@@ -10,16 +10,18 @@ import connect from "./connector";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ProductProperties = ({
   properties
-}) => /*#__PURE__*/React.createElement(SurroundPortals, {
+}) => /*#__PURE__*/_jsx(SurroundPortals, {
   portalName: PRODUCT_PROPERTIES,
   portalProps: {
     properties
-  }
-}, /*#__PURE__*/React.createElement(Content, {
-  properties: properties
-}));
+  },
+  children: /*#__PURE__*/_jsx(Content, {
+    properties: properties
+  })
+});
 ProductProperties.defaultProps = {
   properties: null
 };

package/product/components/ProductProperties/Row.js

@@ -7,32 +7,36 @@ import { tableCell } from "./style";
  * @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__*/React.createElement("tr", {
+}) => /*#__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
-}, /*#__PURE__*/React.createElement("td", {
-  className: tableCell,
-  "aria-hidden": true
-}, /*#__PURE__*/React.createElement("span", {
-  dangerouslySetInnerHTML: {
-    __html: label
-  }
-})), /*#__PURE__*/React.createElement("td", {
-  className: tableCell,
-  "data-test-id": `property: ${value}`,
-  "aria-hidden": true
-}, /*#__PURE__*/React.createElement("span", {
-  dangerouslySetInnerHTML: {
-    __html: 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
+      }
+    })
+  })]
+});
 Row.defaultProps = {
   type: null
 };

package/product/components/ProductProperties/RowHTML.js

@@ -8,6 +8,7 @@ import { HtmlSanitizer } from '@shopgate/engage/components';
  * @param {Object} props The component props.
  * @return {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const RowHTML = ({
   value,
   label
@@ -25,17 +26,20 @@ const RowHTML = ({
       })
     });
   }, [push]);
-  return /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/_jsx("tr", {
     className: "engage__product__product-property",
     "data-type": "html",
-    "data-label": label
-  }, /*#__PURE__*/React.createElement("td", {
-    colSpan: 2
-  }, /*#__PURE__*/React.createElement(HtmlSanitizer, {
-    settings: {
-      handleClick,
-      html: value
-    }
-  }, value)));
+    "data-label": label,
+    children: /*#__PURE__*/_jsx("td", {
+      colSpan: 2,
+      children: /*#__PURE__*/_jsx(HtmlSanitizer, {
+        settings: {
+          handleClick,
+          html: value
+        },
+        children: value
+      })
+    })
+  });
 };
 export default /*#__PURE__*/React.memo(RowHTML);

package/product/components/ProductProperties/Rows.js

@@ -8,6 +8,7 @@ import RowHTML from "./RowHTML";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Rows = ({
   properties
 }) => properties.map(({
@@ -16,17 +17,15 @@ const Rows = ({
   type
 }) => {
   if (type === 'html') {
-    return /*#__PURE__*/React.createElement(RowHTML, {
-      key: label,
+    return /*#__PURE__*/_jsx(RowHTML, {
       value: value,
       label: label
-    });
+    }, label);
   }
-  return /*#__PURE__*/React.createElement(Row, {
-    key: `${label}-${value}`,
+  return /*#__PURE__*/_jsx(Row, {
     label: label,
     value: value,
     type: type
-  });
+  }, `${label}-${value}`);
 });
 export default /*#__PURE__*/React.memo(Rows);

package/product/components/ProductProperties/Wrapper.js

@@ -8,18 +8,24 @@ import { container, containerDense } from "./style";
  * @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__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("div", {
   className: cxs('engage__product__product-property-group', {
     [container]: !dense,
     [containerDense]: dense
   }),
-  "data-group-name": groupName.toLowerCase()
-}, htmlOnly ? children : /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null), /*#__PURE__*/React.createElement("tbody", null, children)));
+  "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/ProductSlider/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useWidgetSettings } from '@shopgate/engage/core';
@@ -6,6 +5,7 @@ import { useThemeComponents } from '@shopgate/engage/core/hooks';
 import { Swiper } from '@shopgate/engage/components';
 import { ProductListTypeProvider, ProductListEntryProvider } from '@shopgate/engage/product/providers';
 import { container, items } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const WIDGET_ID = '@shopgate/engage/product/ProductSlider';
 
 /**
@@ -34,30 +34,35 @@ function ProductSlider(props) {
     ProductCard
   } = useThemeComponents();
   const Item = item || ProductCard;
-  return /*#__PURE__*/React.createElement(ProductListTypeProvider, {
+  return /*#__PURE__*/_jsx(ProductListTypeProvider, {
     type: "productSlider",
     subType: scope,
-    meta: meta
-  }, /*#__PURE__*/React.createElement(Swiper, _extends({}, autoplay && {
-    autoplay: {
-      delay
-    }
-  }, {
-    className: `${className} engage__product__product-slider`,
-    controls: false,
-    indicators: false,
-    freeMode: !snap
-  }, swiperProps, {
-    slidesPerView: slidesPerView
-  }), productIds.map(id => /*#__PURE__*/React.createElement(Swiper.Item, {
-    key: id,
-    className: container
-  }, /*#__PURE__*/React.createElement(ProductListEntryProvider, {
-    productId: id
-  }, /*#__PURE__*/React.createElement(Item, _extends({
-    productId: id,
-    style: items
-  }, productItemProps)))))));
+    meta: meta,
+    children: /*#__PURE__*/_jsx(Swiper, {
+      ...(autoplay && {
+        autoplay: {
+          delay
+        }
+      }),
+      className: `${className} engage__product__product-slider`,
+      controls: false,
+      indicators: false,
+      freeMode: !snap,
+      ...swiperProps,
+      slidesPerView: slidesPerView,
+      children: productIds.map(id => /*#__PURE__*/_jsx(Swiper.Item, {
+        className: container,
+        children: /*#__PURE__*/_jsx(ProductListEntryProvider, {
+          productId: id,
+          children: /*#__PURE__*/_jsx(Item, {
+            productId: id,
+            style: items,
+            ...productItemProps
+          })
+        })
+      }, id))
+    })
+  });
 }
 ProductSlider.WIDGET_ID = WIDGET_ID;
 ProductSlider.defaultProps = {

package/product/components/ProductSlider/spec.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import ProductSlider from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/core', () => ({
   useWidgetSettings: jest.fn()
 }));
@@ -18,7 +19,9 @@ jest.mock('@shopgate/engage/components', () => {
   };
 });
 jest.mock('@shopgate/engage/core/hooks', () => {
-  const ProductCard = props => /*#__PURE__*/React.createElement(ProductCard, props);
+  const ProductCard = props => /*#__PURE__*/_jsx(ProductCard, {
+    ...props
+  });
   return {
     useThemeComponents: () => ({
       ProductCard
@@ -27,7 +30,7 @@ jest.mock('@shopgate/engage/core/hooks', () => {
 });
 describe('<ProductSlider />', () => {
   it('should match snapshot', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductSlider, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProductSlider, {
       productIds: ['prod1']
     }));
     expect(wrapper).toMatchSnapshot();