@shopgate/engage 7.30.0-alpha.1 → 7.30.0-alpha.10

package/page/widgets/ImageSlider/ImageSlider.js

@@ -1,4 +1,51 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Swiper,Link,ConditionalWrapper}from'@shopgate/engage/components';import{ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{useImageSliderWidget}from"./hooks";var useStyles=makeStyles()({image:{width:'100%'}});/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
+import { Swiper, Link, ConditionalWrapper } from '@shopgate/engage/components';
+import { ResponsiveWidgetImage } from '@shopgate/engage/page/components';
+import { useImageSliderWidget } from "./hooks";
+const useStyles = makeStyles()({
+  image: {
+    width: '100%',
+    minHeight: 1
+  }
+});
+
+/**
  * The ImageSliderWidget is used to display an image slider.
  * @returns {JSX.Element}
- */var ImageSliderWidget=function ImageSliderWidget(){var _useImageSliderWidget=useImageSliderWidget(),slides=_useImageSliderWidget.slides,swiperProps=_useImageSliderWidget.swiperProps,borderRadius=_useImageSliderWidget.borderRadius;var _useStyles=useStyles(),classes=_useStyles.classes;if(slides.length===0){return null;}return React.createElement(Swiper,_extends({indicators:true},swiperProps),slides.map(function(slide){if(!slide.image.url){return null;}return React.createElement(Swiper.Item,{key:slide.image.url},React.createElement(ConditionalWrapper,{condition:!!slide.link,wrapper:function wrapper(children){return React.createElement(Link,{href:slide.link},children);}},React.createElement(ResponsiveWidgetImage,{className:classes.image,src:slide.image.url,alt:slide.image.altText||'',borderRadius:borderRadius})));}));};export default ImageSliderWidget;
+ */
+const ImageSliderWidget = () => {
+  const {
+    slides,
+    swiperProps,
+    borderRadius
+  } = useImageSliderWidget();
+  const {
+    classes
+  } = useStyles();
+  if (slides.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Swiper, _extends({
+    indicators: true
+  }, swiperProps), slides.map(slide => {
+    if (!slide.image.url) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(Swiper.Item, {
+      key: slide.image.url
+    }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
+      condition: !!slide.link,
+      wrapper: children => /*#__PURE__*/React.createElement(Link, {
+        href: slide.link
+      }, children)
+    }, /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
+      className: classes.image,
+      src: slide.image.url,
+      alt: slide.image.altText || '',
+      borderRadius: borderRadius
+    })));
+  }));
+};
+export default ImageSliderWidget;

package/page/widgets/ImageSlider/hooks.js

@@ -1,14 +1,25 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
+import { useMemo } from 'react';
+import { useWidget } from '@shopgate/engage/page/hooks';
+import { useTheme } from '@shopgate/engage/styles';
+import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
+
+/**
  * @typedef {import('swiper/react').SwiperProps} SwiperCmpProps
- */ /**
+ */
+
+/**
  * @typedef {Object} ImageSliderImageData
  * @property {string} url The image URL.
  * @property {string} [altText] The image alt text.
- */ /**
+ */
+
+/**
  * @typedef {Object} ImageSliderImage
  * @property {ImageSliderImageData} image The image data object.
  * @property {string} [link] The link URL.
- */ /**
+ */
+
+/**
  * @typedef {Object} ImageSliderWidgetConfig
  * @property {ImageSliderImage[]} images The image objects.
  * @property {boolean} slideAutomatic Whether the slider should automatically slide.
@@ -23,14 +34,138 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
  * @property {number} [borderRadiusCustom] The custom border radius value.
  * the pagination type for the slider.
- */ /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ */
+
+/**
+ * @typedef {ReturnType<typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageSliderWidgetConfig> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
+ */
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the ImageSlider widget configuration and data.
- */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge,imageSpacing=config.imageSpacing,_config$paginationSty=config.paginationStyle,paginationStyle=_config$paginationSty===void 0?'bullets':_config$paginationSty,borderRadius=config.borderRadius,borderRadiusCustom=config.borderRadiusCustom;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});var paginationType=useMemo(function(){return paginationStyle==='default'?'bullets':paginationStyle.toLowerCase();},[paginationStyle]);var imagesWithUrls=useMemo(function(){return images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;});},[images]);/**
+ */
+export const useImageSliderWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config,
+    isPreview,
+    layout
+  } = useWidget();
+  const theme = useTheme();
+  const {
+    images,
+    slideAutomatic,
+    endlessSlider,
+    sliderSpeed,
+    slidesPerView,
+    slidesPerViewCustomSmall,
+    slidesPerViewCustomMedium,
+    slidesPerViewCustomLarge,
+    imageSpacing,
+    paginationStyle = 'bullets',
+    borderRadius,
+    borderRadiusCustom
+  } = config;
+  const borderRadiusResolved = resolveBorderRadiusFromWidgetConfig({
+    borderRadius,
+    borderRadiusCustom
+  });
+  const paginationType = useMemo(() => paginationStyle === 'default' ? 'bullets' : paginationStyle.toLowerCase(), [paginationStyle]);
+  const imagesWithUrls = useMemo(() => images.filter(img => img?.image?.url), [images]);
+
+  /**
    * @type {SwiperCmpProps}
-   */var swiperProps=useMemo(function(){var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:slidesPerViewMedium}),theme.breakpoints.values.md,{slidesPerView:slidesPerViewLarge});var showPagination=paginationType!=='off'&&imagesWithUrls.length>1;// Create a key that changes when relevant config changes, to force remount of Swiper
-var componentKey=isPreview?JSON.stringify(_extends({slidesPerView:slidesPerView,spaceBetween:imageSpacing,paginationType:paginationType,showPagination:showPagination},breakpoints)):null;return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints,spaceBetween:imageSpacing,pagination:showPagination?{type:paginationType,clickable:true,dynamicBullets:true}:false},isPreview?{key:componentKey,// Improves interaction with the slider in the CMS preview iframe
-touchStartPreventDefault:true}:{});},[slidesPerView,theme.breakpoints.values.sm,theme.breakpoints.values.md,paginationType,imagesWithUrls.length,imageSpacing,slideAutomatic,sliderSpeed,endlessSlider,isPreview,slidesPerViewCustomSmall,slidesPerViewCustomMedium,slidesPerViewCustomLarge]);return{slides:imagesWithUrls,swiperProps:swiperProps,borderRadius:borderRadiusResolved};};
+   */
+  const swiperProps = useMemo(() => {
+    let slidesPerViewSmall = 1.0;
+    let slidesPerViewMedium = 1.3;
+    let slidesPerViewLarge = 1.6;
+    if (slidesPerView === 'dense') {
+      slidesPerViewSmall = 1.3;
+      slidesPerViewMedium = 1.8;
+      slidesPerViewLarge = 2.3;
+    } else if (slidesPerView === 'custom') {
+      slidesPerViewSmall = slidesPerViewCustomSmall;
+      slidesPerViewMedium = slidesPerViewCustomMedium;
+      slidesPerViewLarge = slidesPerViewCustomLarge;
+    }
+
+    /**
+     * Special image spacing for slides with a SINGLE slide per view.
+     *
+     * Needs to be at least as large as the highest horizontal layout margin (when set) to avoid
+     * showing of more than one slide.
+     * @type {number}
+     */
+    const imageSpacingForSingleSlide = Math.max(layout?.marginLeft ?? 0, layout?.marginRight ?? 0, imageSpacing);
+    const breakpoints = {
+      [theme.breakpoints.values.sm]: {
+        slidesPerView: slidesPerViewMedium,
+        ...(slidesPerViewMedium === 1 && imageSpacingForSingleSlide ? {
+          spaceBetween: imageSpacingForSingleSlide
+        } : {
+          spaceBetween: imageSpacing
+        })
+      },
+      [theme.breakpoints.values.md]: {
+        slidesPerView: slidesPerViewLarge,
+        ...(slidesPerViewLarge === 1 && imageSpacingForSingleSlide ? {
+          spaceBetween: imageSpacingForSingleSlide
+        } : {
+          spaceBetween: imageSpacing
+        })
+      }
+    };
+    const showPagination = paginationType !== 'off' && imagesWithUrls.length > 1;
+    // Create a key that changes when relevant config changes, to force remount of Swiper
+    const componentKey = isPreview ? JSON.stringify({
+      slidesPerView,
+      spaceBetween: imageSpacing,
+      paginationType,
+      showPagination,
+      ...breakpoints
+    }) : null;
+    return {
+      autoplay: slideAutomatic ? {
+        delay: sliderSpeed
+      } : false,
+      loop: endlessSlider,
+      slidesPerView: slidesPerViewSmall,
+      breakpoints,
+      pagination: showPagination ? {
+        type: paginationType,
+        clickable: true,
+        dynamicBullets: true
+      } : false,
+      // Prevent cut-off sliders when margins are used in the layout
+      ...(layout.marginLeft || layout.marginRight ? {
+        style: {
+          ...(layout.marginLeft ? {
+            marginLeft: layout.marginLeft * -1,
+            paddingLeft: layout.marginLeft
+          } : {}),
+          ...(layout.marginRight ? {
+            marginRight: layout.marginRight * -1,
+            paddingRight: layout.marginRight
+          } : {})
+        }
+      } : null),
+      ...(slidesPerViewSmall === 1 && imageSpacingForSingleSlide ? {
+        spaceBetween: imageSpacingForSingleSlide
+      } : {
+        spaceBetween: imageSpacing
+      }),
+      ...(isPreview ? {
+        key: componentKey,
+        // Improves interaction with the slider in the CMS preview iframe
+        touchStartPreventDefault: true
+      } : {})
+    };
+  }, [slidesPerView, theme.breakpoints.values.sm, theme.breakpoints.values.md, paginationType, imagesWithUrls.length, imageSpacing, slideAutomatic, sliderSpeed, endlessSlider, isPreview, slidesPerViewCustomSmall, slidesPerViewCustomMedium, slidesPerViewCustomLarge, layout]);
+  return {
+    slides: imagesWithUrls,
+    swiperProps,
+    borderRadius: borderRadiusResolved
+  };
+};

package/page/widgets/ImageSlider/index.js

@@ -1 +1 @@
-export{default}from"./ImageSlider";
+export { default } from "./ImageSlider";

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -0,0 +1,159 @@
+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";
+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__*/React.createElement(React.Fragment, null, state.pickers.slice(0, maxDepth).map((entry, index) => {
+    const {
+      categoryId,
+      selectedId
+    } = entry;
+    return /*#__PURE__*/React.createElement(CategoryPicker, {
+      key: `${categoryId}-${code}`,
+      categoryId: categoryId,
+      selectedId: selectedId,
+      onSelect: handleSelection,
+      label: labels[`level${index + 1}Label`] || ''
+    });
+  })), [code, handleSelection, labels, maxDepth, state.pickers]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.container
+  }, showHeadline && headline ? /*#__PURE__*/React.createElement(WidgetHeadline, {
+    headline: headline,
+    className: "widget__nested-category-filter__headline"
+  }) : null, categoryPickers, /*#__PURE__*/React.createElement("div", {
+    className: cx(classes.buttonContainer, 'widget__nested-category-filter__button-container')
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    className: cx(classes.button, 'widget__nested-category-filter__CTA-button'),
+    href: `${CATEGORY_PATH}/${bin2hex(state.buttonCategoryId)}`,
+    disabled: !state.buttonCategoryId,
+    flat: false
+  }, /*#__PURE__*/React.createElement(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,47 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { SheetDrawer, SheetList } from '@shopgate/engage/components';
+import Item from "../SheetItem";
+
+/**
+ * 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 handleItemClick = useCallback(event => {
+    event.stopPropagation();
+    onSelect(event.target.value);
+  }, [onSelect]);
+  return /*#__PURE__*/React.createElement(SheetDrawer, {
+    title: label,
+    isOpen: open,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(SheetList, {
+    className: "widget__nested-category-filter__sheet-list"
+  }, items.map(item => /*#__PURE__*/React.createElement(Item, {
+    item: item,
+    key: item.id,
+    onClick: handleItemClick,
+    isSelected: item.id === selectedId
+  }))));
+};
+CategorySheet.defaultProps = {
+  onClose: () => {},
+  onSelect: () => {},
+  selectedId: null
+};
+export default CategorySheet;

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/engage';
+const {
+  colors,
+  variables
+} = themeConfig;
+const bgColor = colors.darkGray;
+const boxShadowOffset = variables.gap.bigger;
+const useStyles = makeStyles()({
+  button: {
+    outline: 0,
+    padding: '16px 16px 16px 0',
+    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__*/React.createElement("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"
+  }, item.name);
+};
+SheetItem.defaultProps = {
+  onClick() {},
+  isSelected: false
+};
+export default SheetItem;

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

@@ -0,0 +1,118 @@
+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";
+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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    onClick: handlePickerClick,
+    className: cx(classes.button, {
+      [classes.buttonDisabled]: disabled
+    }, 'widget__nested-category-filter__category-picker')
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: classes.label
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: classes.selection
+  }, buttonLabel)), /*#__PURE__*/React.createElement(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";