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

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -0,0 +1,164 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { I18n, ButtonLink } from '@shopgate/engage/components';
+import { bin2hex } from '@shopgate/engage/core/helpers';
+import { CATEGORY_PATH } from '@shopgate/engage/category';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/engage';
+import { useRoute, usePrevious, useLocalStorage } from '@shopgate/engage/core/hooks';
+import { router } from '@virtuous/conductor';
+import CategoryPicker from "./components/Picker";
+import { useNestedCategoryFilterWidget } from "./hooks";
+import WidgetHeadline from "../../components/WidgetHeadline";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  colors,
+  variables
+} = themeConfig;
+const useStyles = makeStyles()({
+  container: {
+    background: colors.light,
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: variables.gap.big
+  },
+  buttonContainer: {
+    padding: `0 ${variables.gap.big}px`
+  },
+  button: {
+    width: '100%'
+  }
+});
+
+/**
+ * The NestedCategoryFilter component
+ * @returns {JSX.Element}
+ */
+const NestedCategoryFilter = () => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const {
+    state: routeState,
+    id: routeId
+  } = useRoute();
+  const {
+    maxDepth = 3,
+    category = '',
+    code,
+    showHeadline,
+    headline,
+    rememberSelection,
+    ...labels
+  } = useNestedCategoryFilterWidget();
+  const prevCategory = usePrevious(category);
+  const LOCAL_STORAGE_KEY = `nestedCategoryFilterState-${code}`;
+  const [localStorageState, setLocalStorageState] = useLocalStorage(LOCAL_STORAGE_KEY);
+  const defaultState = useMemo(() => ({
+    buttonCategoryId: null,
+    pickers: [{
+      categoryId: category,
+      selectedId: null
+    }]
+  }), [category]);
+  const initialState = useMemo(() => {
+    if (rememberSelection && Array.isArray(localStorageState?.pickers) && localStorageState.pickers.length > 0) {
+      const [firstPicker] = localStorageState.pickers;
+      // Only rehydrate state from local storage if the pickers belong to the current category
+      if (firstPicker.categoryId === category) {
+        return localStorageState;
+      }
+    }
+    if (routeState[code]) {
+      return routeState[code];
+    }
+    return defaultState;
+  }, [category, code, defaultState, localStorageState, rememberSelection, routeState]);
+  const [state, setState] = useState(initialState);
+  useEffect(() => {
+    const stateToPersist = {
+      pickers: state.pickers,
+      buttonCategoryId: state.buttonCategoryId
+    };
+    if (rememberSelection) {
+      // Store state in local storage when selection should should survive app restarts
+      setLocalStorageState(stateToPersist);
+    } else {
+      // Store state in route otherwise
+      router.update(routeId, {
+        [code]: stateToPersist
+      });
+    }
+  }, [code, rememberSelection, routeId, setLocalStorageState, state]);
+  useEffect(() => {
+    if (typeof prevCategory === 'undefined') return;
+    if (typeof category === 'undefined') return;
+    if (prevCategory !== category) {
+      setState(defaultState);
+    }
+  }, [prevCategory, category, defaultState, rememberSelection, initialState]);
+
+  /**
+   * Handles the selection of a subcategory within a category picker.
+   * @param {string} categoryId The categoryId of the picker where a subcategory was selected.
+   * @param {Object} subcategory The subcategory entity which was selected.
+   */
+  const handleSelection = useCallback((categoryId, subcategory) => {
+    const {
+      id: subcategoryId,
+      childrenCount
+    } = subcategory;
+    const selectedIndex = state.pickers.findIndex(picker => picker.categoryId === categoryId);
+
+    // Get all pickers up to the selected picker and update its selectedId
+    let updatedPickers = state.pickers.slice(0, selectedIndex + 1);
+    updatedPickers[updatedPickers.length - 1].selectedId = subcategoryId;
+    // Check if a new picker should be added
+    const limitReached = updatedPickers?.length === Number(maxDepth);
+    const appendNewPicker = !!childrenCount && !limitReached;
+    if (appendNewPicker) {
+      updatedPickers = updatedPickers.concat([{
+        categoryId: subcategoryId,
+        selectedId: null
+      }]);
+    }
+    setState({
+      pickers: updatedPickers,
+      buttonCategoryId: !appendNewPicker ? subcategoryId : null
+    });
+  }, [maxDepth, state]);
+  const categoryPickers = useMemo(() => /*#__PURE__*/_jsx(_Fragment, {
+    children: state.pickers.slice(0, maxDepth).map((entry, index) => {
+      const {
+        categoryId,
+        selectedId
+      } = entry;
+      return /*#__PURE__*/_jsx(CategoryPicker, {
+        categoryId: categoryId,
+        selectedId: selectedId,
+        onSelect: handleSelection,
+        label: labels[`level${index + 1}Label`] || ''
+      }, `${categoryId}-${code}`);
+    })
+  }), [code, handleSelection, labels, maxDepth, state.pickers]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(classes.container, 'widget__nested-category-filter__container'),
+    children: [showHeadline && headline ? /*#__PURE__*/_jsx(WidgetHeadline, {
+      headline: headline,
+      className: "widget__nested-category-filter__headline"
+    }) : null, categoryPickers, /*#__PURE__*/_jsx("div", {
+      className: cx(classes.buttonContainer, 'widget__nested-category-filter__button-container'),
+      children: /*#__PURE__*/_jsx(ButtonLink, {
+        className: cx(classes.button, 'widget__nested-category-filter__CTA-button'),
+        href: `${CATEGORY_PATH}/${bin2hex(state.buttonCategoryId)}`,
+        disabled: !state.buttonCategoryId,
+        flat: false,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "common.show_products",
+          className: "widget__nested-category-filter__CTA-button__text"
+        })
+      })
+    })]
+  });
+};
+export default NestedCategoryFilter;

package/page/widgets/NestedCategoryFilter/components/Picker/components/Sheet/index.js

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { SheetDrawer, SheetList } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import Item from "../SheetItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  sheetList: {
+    '& li': {
+      margin: 0
+    }
+  }
+});
+/**
+ * The CategorySheet component.
+ * @param {Object} props The component props.
+ * @param {Array} props.items The list of items to display.
+ * @param {string} props.label The sheet label.
+ * @param {boolean} props.open Whether the sheet is open.
+ * @param {Function} props.onClose The close handler.
+ * @param {Function} props.onSelect The selection handler.
+ * @param {string} props.selectedId The currently selected item id.
+ * @return {JSX.Element}
+ */
+const CategorySheet = ({
+  items,
+  label,
+  onClose,
+  open,
+  selectedId,
+  onSelect
+}) => {
+  const {
+    classes
+  } = useStyles();
+  const handleItemClick = useCallback(event => {
+    event.stopPropagation();
+    onSelect(event.target.value);
+  }, [onSelect]);
+  return /*#__PURE__*/_jsx(SheetDrawer, {
+    title: label,
+    isOpen: open,
+    onClose: onClose,
+    children: /*#__PURE__*/_jsx(SheetList, {
+      className: `widget__nested-category-filter__sheet-list ${classes.sheetList}`,
+      children: items.map(item => /*#__PURE__*/_jsx(Item, {
+        item: item,
+        onClick: handleItemClick,
+        isSelected: item.id === selectedId
+      }, item.id))
+    })
+  });
+};
+CategorySheet.defaultProps = {
+  onClose: () => {},
+  onSelect: () => {},
+  selectedId: null
+};
+export default CategorySheet;

package/page/widgets/NestedCategoryFilter/components/Picker/components/SheetItem/index.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/engage';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors,
+  variables
+} = themeConfig;
+const bgColor = colors.darkGray;
+const boxShadowOffset = variables.gap.bigger;
+const useStyles = makeStyles()({
+  button: {
+    outline: 0,
+    padding: 16,
+    textAlign: 'left',
+    width: '100%',
+    color: 'var(--color-text-high-emphasis)'
+  },
+  buttonSelected: {
+    background: `var(--color-background-accent, ${bgColor})`,
+    boxShadow: `-${boxShadowOffset}px 0px 0px var(--color-background-accent, ${bgColor}), ${boxShadowOffset}px 0px 0px var(--color-background-accent,${bgColor})`,
+    margin: '-1px 0',
+    paddingTop: 17,
+    paddingBottom: 17
+  }
+});
+
+/**
+ * The SheetItem component.
+ * @param {Object} props The component props.
+ * @param {Object} props.item The item data.
+ * @param {boolean} props.isSelected Whether the item is selected.
+ * @param {Function} props.onClick The click handler.
+ * @return {JSX.Element}
+ */
+const SheetItem = ({
+  item,
+  isSelected,
+  onClick
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("button", {
+    className: cx(classes.button, {
+      [classes.buttonSelected]: isSelected
+    }, isSelected ? 'engage__nested-category-filter__sheet-item__selected' : 'engage__nested-category-filter__sheet-item'),
+    value: item.id,
+    onClick: onClick,
+    type: "button",
+    children: item.name
+  });
+};
+SheetItem.defaultProps = {
+  onClick() {},
+  isSelected: false
+};
+export default SheetItem;

package/page/widgets/NestedCategoryFilter/components/Picker/index.js

@@ -0,0 +1,124 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import { fetchCategoryOrRootCategories } from '@shopgate/engage/category';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/engage';
+import { i18n } from '@shopgate/engage/core/helpers';
+import Sheet from "./components/Sheet";
+import { getCategoriesById } from "../../../CategoryList/selectors";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()({
+  button: {
+    background: `var(--color-background-accent, ${colors.overlay})`,
+    color: 'var(--color-text-high-emphasis)',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minHeight: 56,
+    outline: 0,
+    padding: '12px 16px',
+    marginBottom: 8,
+    transition: 'background 250ms ease-in, color 250ms ease-in',
+    cursor: 'pointer'
+  },
+  buttonDisabled: {
+    color: colors.shade4,
+    cursor: 'not-allowed'
+  },
+  label: {
+    fontSize: 12,
+    marginTop: -2,
+    marginBottom: 4
+  },
+  selection: {
+    fontWeight: 500,
+    lineHeight: 1.125
+  }
+});
+
+/**
+ * The CategoryPicker component.
+ * @param {Object} props The component props.
+ * @param {Function} props.onSelect The selection handler.
+ * @param {string} props.categoryId The categoryId for which to show subcategories.
+ * @param {string} props.label The label for the picker.
+ * @param {string|null} props.selectedId The currently selected subcategoryId.
+ * @return {JSX.Element}
+ */
+const CategoryPicker = ({
+  onSelect,
+  categoryId,
+  label,
+  selectedId
+}) => {
+  const subcategories = useSelector(state => getCategoriesById(state, {
+    categoryId
+  }));
+  const dispatch = useDispatch();
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [sheetIsOpen, setSheetIsOpen] = useState(false);
+  const hasSubcategories = Array.isArray(subcategories) && subcategories.length > 0;
+  const disabled = !hasSubcategories || categoryId === null;
+  useEffect(() => {
+    if (categoryId !== null && subcategories === null) {
+      dispatch(fetchCategoryOrRootCategories(categoryId));
+    }
+  }, [categoryId, dispatch, subcategories]);
+  const buttonLabel = useMemo(() => {
+    if (!selectedId) {
+      return i18n.text('common.please_choose');
+    }
+    const subcategory = subcategories?.find(val => val.id === selectedId);
+    return subcategory?.name;
+  }, [selectedId, subcategories]);
+  const closeSheet = useCallback(() => {
+    setSheetIsOpen(false);
+  }, []);
+  const handlePickerClick = useCallback(event => {
+    event.preventDefault();
+    if (disabled) {
+      return;
+    }
+    setSheetIsOpen(true);
+  }, [disabled]);
+  const handleSheetSelect = useCallback(subcategoryId => {
+    const subcategory = subcategories.find(item => item.id === subcategoryId);
+    onSelect(categoryId, subcategory);
+    closeSheet();
+  }, [categoryId, closeSheet, onSelect, subcategories]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      onClick: handlePickerClick,
+      className: cx(classes.button, {
+        [classes.buttonDisabled]: disabled
+      }, 'widget__nested-category-filter__category-picker'),
+      children: [label && /*#__PURE__*/_jsx("div", {
+        className: classes.label,
+        children: label
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes.selection,
+        children: buttonLabel
+      })]
+    }), /*#__PURE__*/_jsx(Sheet, {
+      items: subcategories || [],
+      onSelect: handleSheetSelect,
+      onClose: closeSheet,
+      open: sheetIsOpen,
+      selectedId: selectedId,
+      label: label
+    })]
+  });
+};
+CategoryPicker.defaultProps = {
+  categoryId: null,
+  label: '',
+  selectedId: null
+};
+export default CategoryPicker;

package/page/widgets/NestedCategoryFilter/hooks.js

@@ -0,0 +1,35 @@
+import { useWidget } from '@shopgate/engage/page/hooks';
+
+/**
+ * @typedef {Object} NestedCategoryFilter
+ * @property {number} [maxDepth=3] The maximum depth of categories to display.
+ * @property {string} category The category ID.
+ * @property {string} level1Label The label for level 1 categories.
+ * @property {string} level2Label The label for level 2 categories.
+ * @property {string} level3Label The label for level 3 categories.
+ * @property {boolean} showHeadline Whether to show the headline.
+ * @property {Object} headline The headline data including text and styles.
+ * @property {boolean} rememberSelection Whether to remember user selection
+ * in order to prefill the widget with the shopper’s last chosen path on future visits .
+ */
+
+/**
+ * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ *   .useWidget<NestedCategoryFilter> >} UseWidgetReturnType
+ */
+
+// eslint-disable-next-line valid-jsdoc
+/**
+ * Hook to access the Nested Category Filter widget configuration and data.
+ */
+export const useNestedCategoryFilterWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config = {},
+    code
+  } = useWidget();
+  return {
+    ...config,
+    code
+  };
+};

package/page/widgets/NestedCategoryFilter/index.js

@@ -0,0 +1 @@
+export { default } from "./NestedCategoryFilter";

package/page/widgets/Placeholder/Placeholder.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { usePlaceholderWidget } from "./hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
     padding: theme.spacing(2),
@@ -36,17 +37,20 @@ const PlaceholderWidget = () => {
     layout,
     visibility
   } = usePlaceholderWidget();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.name
-  }, name), /*#__PURE__*/React.createElement("pre", {
-    className: classes.pre
-  }, JSON.stringify({
-    code,
-    config,
-    layout,
-    visibility
-  }, null, 2)));
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.name,
+      children: name
+    }), /*#__PURE__*/_jsx("pre", {
+      className: classes.pre,
+      children: JSON.stringify({
+        code,
+        config,
+        layout,
+        visibility
+      }, null, 2)
+    })]
+  });
 };
 export default PlaceholderWidget;

package/page/widgets/ProductList/ProductList.js

@@ -1,11 +1,12 @@
 import "core-js/modules/es.regexp.flags.js";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { ActionButton, I18n } from '@shopgate/engage/components';
 import { ProductGrid } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useProductListWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
     // Prevent that the ActionButton margin messes with the layout of the sibling widgets
@@ -34,7 +35,8 @@ const ProductListWidget = () => {
     showLoadMore,
     flags,
     showHeadline,
-    headline
+    headline,
+    isPreview
   } = useProductListWidget();
   const {
     fetchNext,
@@ -47,21 +49,35 @@ const ProductListWidget = () => {
     limit: productCount,
     sort
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, showHeadline && headline && results.length ? /*#__PURE__*/React.createElement(WidgetHeadline, {
-    headline: headline
-  }) : null, /*#__PURE__*/React.createElement(ProductGrid, {
-    products: results,
-    flags: flags,
-    scope: "widgets",
-    infiniteLoad: false,
-    className: classes.grid
-  }), hasNext && showLoadMore && /*#__PURE__*/React.createElement(ActionButton, {
-    loading: isFetching,
-    onClick: fetchNext
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "common.load_more"
-  })));
+  const handleFetchNext = useCallback(e => {
+    if (isPreview) {
+      // Prevent unintended scroll effects when load more is clicked in preview.
+      e.stopPropagation();
+    }
+    fetchNext();
+  }, [fetchNext, isPreview]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.root,
+    children: [showHeadline && headline && results.length ? /*#__PURE__*/_jsx(WidgetHeadline, {
+      headline: headline
+    }) : null, /*#__PURE__*/_jsx(ProductGrid, {
+      products: results,
+      flags: flags,
+      scope: "widgets",
+      infiniteLoad: false,
+      className: classes.grid
+    }), hasNext && showLoadMore && /*#__PURE__*/_jsx(ActionButton, {
+      loading: isFetching,
+      onClick: handleFetchNext
+      // Disable click delay in preview mode to enable stopping of propagation.
+      ,
+      ...(isPreview && {
+        disableClickDelay: true
+      }),
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "common.load_more"
+      })
+    })]
+  });
 };
 export default ProductListWidget;

package/page/widgets/ProductList/hooks.js

@@ -33,7 +33,8 @@ import { getProductSearchParamsFromProductsInputConfig } from '@shopgate/engage/
 export const useProductListWidget = () => {
   /** @type {UseWidgetReturnType}  */
   const {
-    config
+    config,
+    isPreview
   } = useWidget();
   const {
     products,
@@ -59,6 +60,7 @@ export const useProductListWidget = () => {
     showLoadMore: loadMoreButton,
     flags,
     showHeadline,
-    headline
+    headline,
+    isPreview
   };
 };

package/page/widgets/ProductSlider/ProductSlider.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import { ProductSlider } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
@@ -10,6 +9,7 @@ import WidgetHeadline from "../../components/WidgetHeadline";
  * The ProductSliderWidget is used to display a product slider.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const ProductSliderWidget = () => {
   const {
     productsSearchType,
@@ -35,28 +35,32 @@ const ProductSliderWidget = () => {
   if (!productIds || !productIds.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showHeadline && headline && productIds.length ? /*#__PURE__*/React.createElement(WidgetHeadline, {
-    headline: headline
-  }) : null, /*#__PURE__*/React.createElement(ProductSlider, _extends({
-    productIds: productIds,
-    scope: "widgets",
-    productItemProps: productItemProps,
-    slidesPerView: 2.3
-    // Improves interaction with the slider in the CMS preview iframe
-  }, isPreview ? {
-    touchStartPreventDefault: true
-  } : {}, {
-    breakpoints: {
-      [theme.breakpoints.values.sm]: {
-        slidesPerView: 3.3
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showHeadline && headline && productIds.length ? /*#__PURE__*/_jsx(WidgetHeadline, {
+      headline: headline
+    }) : null, /*#__PURE__*/_jsx(ProductSlider, {
+      productIds: productIds,
+      scope: "widgets",
+      productItemProps: productItemProps,
+      slidesPerView: 2.3
+      // Improves interaction with the slider in the CMS preview iframe
+      ,
+      ...(isPreview ? {
+        touchStartPreventDefault: true
+      } : {}),
+      breakpoints: {
+        [theme.breakpoints.values.sm]: {
+          slidesPerView: 3.3
+        },
+        [theme.breakpoints.values.md]: {
+          slidesPerView: 4.3
+        },
+        [theme.breakpoints.values.lg]: {
+          slidesPerView: 5.3
+        }
       },
-      [theme.breakpoints.values.md]: {
-        slidesPerView: 4.3
-      },
-      [theme.breakpoints.values.lg]: {
-        slidesPerView: 5.3
-      }
-    }
-  }, swiperProps)));
+      ...swiperProps
+    })]
+  });
 };
 export default ProductSliderWidget;

package/page/widgets/RichText/RichText.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { WidgetRichText } from '@shopgate/engage/page/components';
 import { useRichTextWidget } from "./hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
     padding: theme.spacing(1)
@@ -20,7 +21,7 @@ const RichText = () => {
     classes
   } = useStyles();
   if (!richText) return null;
-  return /*#__PURE__*/React.createElement(WidgetRichText, {
+  return /*#__PURE__*/_jsx(WidgetRichText, {
     content: richText,
     className: cx(classes.root)
   });