@shopgate/engage 7.29.7-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%',minHeight:1}});/**
+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 _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;}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{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,20 +34,138 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * @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')
  *   .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,layout=_useWidget.layout;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 _ref,_ref2;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;}/**
+   */
+  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}
-     */var imageSpacingForSingleSlide=Math.max((_ref=layout===null||layout===void 0?void 0:layout.marginLeft)!==null&&_ref!==void 0?_ref:0,(_ref2=layout===null||layout===void 0?void 0:layout.marginRight)!==null&&_ref2!==void 0?_ref2:0,imageSpacing);var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,_extends({slidesPerView:slidesPerViewMedium},slidesPerViewMedium===1&&imageSpacingForSingleSlide?{spaceBetween:imageSpacingForSingleSlide}:{spaceBetween:imageSpacing})),theme.breakpoints.values.md,_extends({slidesPerView:slidesPerViewLarge},slidesPerViewLarge===1&&imageSpacingForSingleSlide?{spaceBetween:imageSpacingForSingleSlide}:{spaceBetween:imageSpacing}));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,pagination:showPagination?{type:paginationType,clickable:true,dynamicBullets:true}:false},layout.marginLeft||layout.marginRight?{style:_extends({},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:swiperProps,borderRadius:borderRadiusResolved};};
+     */
+    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

@@ -1,13 +1,159 @@
-var _excluded=["maxDepth","category","code","showHeadline","headline","rememberSelection"];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;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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";var colors=themeConfig.colors,variables=themeConfig.variables;var useStyles=makeStyles()({container:{background:colors.light,display:'flex',flexDirection:'column',paddingBottom:variables.gap.big},buttonContainer:{padding:"0 ".concat(variables.gap.big,"px")},button:{width:'100%'}});/**
+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}
- */var NestedCategoryFilter=function NestedCategoryFilter(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useRoute=useRoute(),routeState=_useRoute.state,routeId=_useRoute.id;var _useNestedCategoryFil=useNestedCategoryFilterWidget(),_useNestedCategoryFil2=_useNestedCategoryFil.maxDepth,maxDepth=_useNestedCategoryFil2===void 0?3:_useNestedCategoryFil2,_useNestedCategoryFil3=_useNestedCategoryFil.category,category=_useNestedCategoryFil3===void 0?'':_useNestedCategoryFil3,code=_useNestedCategoryFil.code,showHeadline=_useNestedCategoryFil.showHeadline,headline=_useNestedCategoryFil.headline,rememberSelection=_useNestedCategoryFil.rememberSelection,labels=_objectWithoutProperties(_useNestedCategoryFil,_excluded);var prevCategory=usePrevious(category);var LOCAL_STORAGE_KEY="nestedCategoryFilterState-".concat(code);var _useLocalStorage=useLocalStorage(LOCAL_STORAGE_KEY),_useLocalStorage2=_slicedToArray(_useLocalStorage,2),localStorageState=_useLocalStorage2[0],setLocalStorageState=_useLocalStorage2[1];var defaultState=useMemo(function(){return{buttonCategoryId:null,pickers:[{categoryId:category,selectedId:null}]};},[category]);var initialState=useMemo(function(){if(rememberSelection&&Array.isArray(localStorageState===null||localStorageState===void 0?void 0:localStorageState.pickers)&&localStorageState.pickers.length>0){var _localStorageState$pi2=_slicedToArray(localStorageState.pickers,1),firstPicker=_localStorageState$pi2[0];// 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]);var _useState=useState(initialState),_useState2=_slicedToArray(_useState,2),state=_useState2[0],setState=_useState2[1];useEffect(function(){var 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,_defineProperty({},code,stateToPersist));}},[code,rememberSelection,routeId,setLocalStorageState,state]);useEffect(function(){if(typeof prevCategory==='undefined')return;if(typeof category==='undefined')return;if(prevCategory!==category){setState(defaultState);}},[prevCategory,category,defaultState,rememberSelection,initialState]);/**
+ */
+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.
-   */var handleSelection=useCallback(function(categoryId,subcategory){var _updatedPickers;var subcategoryId=subcategory.id,childrenCount=subcategory.childrenCount;var selectedIndex=state.pickers.findIndex(function(picker){return picker.categoryId===categoryId;});// Get all pickers up to the selected picker and update its selectedId
-var updatedPickers=state.pickers.slice(0,selectedIndex+1);updatedPickers[updatedPickers.length-1].selectedId=subcategoryId;// Check if a new picker should be added
-var limitReached=((_updatedPickers=updatedPickers)===null||_updatedPickers===void 0?void 0:_updatedPickers.length)===Number(maxDepth);var appendNewPicker=!!childrenCount&&!limitReached;if(appendNewPicker){updatedPickers=updatedPickers.concat([{categoryId:subcategoryId,selectedId:null}]);}setState({pickers:updatedPickers,buttonCategoryId:!appendNewPicker?subcategoryId:null});},[maxDepth,state]);var categoryPickers=useMemo(function(){return React.createElement(React.Fragment,null,state.pickers.slice(0,maxDepth).map(function(entry,index){var categoryId=entry.categoryId,selectedId=entry.selectedId;return React.createElement(CategoryPicker,{key:"".concat(categoryId,"-").concat(code),categoryId:categoryId,selectedId:selectedId,onSelect:handleSelection,label:labels["level".concat(index+1,"Label")]||''});}));},[code,handleSelection,labels,maxDepth,state.pickers]);return React.createElement("div",{className:classes.container},showHeadline&&headline?React.createElement(WidgetHeadline,{headline:headline}):null,categoryPickers,React.createElement("div",{className:classes.buttonContainer},React.createElement(ButtonLink,{className:classes.button,href:"".concat(CATEGORY_PATH,"/").concat(bin2hex(state.buttonCategoryId)),disabled:!state.buttonCategoryId,flat:false},React.createElement(I18n.Text,{string:"common.show_products"}))));};export default NestedCategoryFilter;
+   */
+  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

@@ -1,4 +1,9 @@
-import React,{useCallback}from'react';import PropTypes from'prop-types';import{SheetDrawer,SheetList}from'@shopgate/engage/components';import Item from"../SheetItem";/**
+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.
@@ -8,4 +13,35 @@ import React,{useCallback}from'react';import PropTypes from'prop-types';import{S
  * @param {Function} props.onSelect The selection handler.
  * @param {string} props.selectedId The currently selected item id.
  * @return {JSX.Element}
- */var CategorySheet=function CategorySheet(_ref){var items=_ref.items,label=_ref.label,onClose=_ref.onClose,open=_ref.open,selectedId=_ref.selectedId,onSelect=_ref.onSelect;var handleItemClick=useCallback(function(event){event.stopPropagation();onSelect(event.target.value);},[onSelect]);return React.createElement(SheetDrawer,{title:label,isOpen:open,onClose:onClose},React.createElement(SheetList,null,items.map(function(item){return React.createElement(Item,{item:item,key:item.id,onClick:handleItemClick,selected:item.id===selectedId});})));};CategorySheet.defaultProps={onClose:function onClose(){},onSelect:function onSelect(){},selectedId:null};export default CategorySheet;
+ */
+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

@@ -1,8 +1,58 @@
-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 React from'react';import PropTypes from'prop-types';import{makeStyles}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/engage';var colors=themeConfig.colors,variables=themeConfig.variables;var bgColor=colors.darkGray;var boxShadowOffset=variables.gap.bigger;var 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, ".concat(bgColor,")"),boxShadow:"-".concat(boxShadowOffset,"px 0px 0px var(--color-background-accent, ").concat(bgColor,"), ").concat(boxShadowOffset,"px 0px 0px var(--color-background-accent,").concat(bgColor,")"),margin:'-1px 0',paddingTop:17,paddingBottom:17}});/**
+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.selected Whether the item is selected.
+ * @param {boolean} props.isSelected Whether the item is selected.
  * @param {Function} props.onClick The click handler.
  * @return {JSX.Element}
- */var SheetItem=function SheetItem(_ref){var item=_ref.item,selected=_ref.selected,onClick=_ref.onClick;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;return React.createElement("button",{className:cx(classes.button,_defineProperty({},classes.buttonSelected,selected)),value:item.id,onClick:onClick,type:"button"},item.name);};SheetItem.defaultProps={onClick:function onClick(){},selected:false};export default SheetItem;
+ */
+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

@@ -1,4 +1,45 @@
-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;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}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";var colors=themeConfig.colors;var useStyles=makeStyles()({button:{background:"var(--color-background-accent, ".concat(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}});/**
+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.
@@ -6,4 +47,72 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * @param {string} props.label The label for the picker.
  * @param {string|null} props.selectedId The currently selected subcategoryId.
  * @return {JSX.Element}
- */var CategoryPicker=function CategoryPicker(_ref){var onSelect=_ref.onSelect,categoryId=_ref.categoryId,label=_ref.label,selectedId=_ref.selectedId;var subcategories=useSelector(function(state){return getCategoriesById(state,{categoryId:categoryId});});var dispatch=useDispatch();var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),sheetIsOpen=_useState2[0],setSheetIsOpen=_useState2[1];var hasSubcategories=Array.isArray(subcategories)&&subcategories.length>0;var disabled=!hasSubcategories||categoryId===null;useEffect(function(){if(categoryId!==null&&subcategories===null){dispatch(fetchCategoryOrRootCategories(categoryId));}},[categoryId,dispatch,subcategories]);var buttonLabel=useMemo(function(){if(!selectedId){return i18n.text('common.please_choose');}var subcategory=subcategories===null||subcategories===void 0?void 0:subcategories.find(function(val){return val.id===selectedId;});return subcategory===null||subcategory===void 0?void 0:subcategory.name;},[selectedId,subcategories]);var closeSheet=useCallback(function(){setSheetIsOpen(false);},[]);var handlePickerClick=useCallback(function(event){event.preventDefault();if(disabled){return;}setSheetIsOpen(true);},[disabled]);var handleSheetSelect=useCallback(function(subcategoryId){var subcategory=subcategories.find(function(item){return item.id===subcategoryId;});onSelect(categoryId,subcategory);closeSheet();},[categoryId,closeSheet,onSelect,subcategories]);return React.createElement(React.Fragment,null,React.createElement("div",{onClick:handlePickerClick,className:cx(classes.button,_defineProperty({},classes.buttonDisabled,disabled))},label&&React.createElement("div",{className:classes.label},label),React.createElement("div",{className:classes.selection},buttonLabel)),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;
+ */
+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;