@shopgate/engage 7.29.7-alpha.1 → 7.29.7-beta.2

package/components/SheetList/index.js

@@ -6,4 +6,4 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    * @returns {JSX}
    */function render(){var _this$props=this.props,children=_this$props.children,className=_this$props.className,hasImages=_this$props.hasImages,testId=_this$props.testId;if(!React.Children.count(children)){return null;}var itemClasses=_defineProperty(_defineProperty({},styles.item,true),styles.itemWithImage,hasImages);return React.createElement(List,{className:"".concat(className," engage__sheet-list"),role:"listbox"},React.Children.map(children,function(child,index){if(!React.isValidElement(child)){return null;}// The key for each child.
 var key="child-".concat(index);// Selected state for the child.
-var isSelected=child.props.isSelected;var childClasses=_defineProperty(_defineProperty({},styles.itemSelected,isSelected),styles.itemNotLast,!isSelected);return React.createElement(List.Item,{className:classNames(itemClasses,childClasses),isSelected:isSelected,key:key,tabIndex:0},React.createElement("div",{className:styles.innerContainer,"data-test-id":testId},child));}));}}]);}(Component);_defineProperty(SheetList,"Item",Item);_defineProperty(SheetList,"defaultProps",{children:null,className:null,hasImages:false,testId:null});export default SheetList;
+var isSelected=child.props.isSelected;var childClasses=_defineProperty(_defineProperty({},styles.itemSelected,isSelected),styles.itemNotLast,!isSelected);return React.createElement(List.Item,{className:classNames(itemClasses,childClasses,isSelected?'engage__sheet-list__selected-item':'engage__sheet-list__item'),isSelected:isSelected,key:key,tabIndex:0},React.createElement("div",{className:styles.innerContainer,"data-test-id":testId},child));}));}}]);}(Component);_defineProperty(SheetList,"Item",Item);_defineProperty(SheetList,"defaultProps",{children:null,className:null,hasImages:false,testId:null});export default SheetList;

package/components/SheetList/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables,colors=themeConfig.colors;export var IMAGE_SPACE=72;var item=css({margin:"0 ".concat(variables.gap.big,"px"),cursor:'pointer'}).toString();var itemNotLast=css({'&:not(:last-child)':{boxShadow:"0 1px 0 0 ".concat(colors.darkGray),marginBottom:1}}).toString();var itemSelected=css({background:"var(--color-background-accent, ".concat(colors.shade7,")"),boxShadow:"-".concat(variables.gap.bigger,"px 0 0 var(--color-background-accent, ").concat(colors.shade7,"), ").concat(variables.gap.bigger,"px 0 0 var(--color-background-accent, ").concat(colors.shade7,")"),marginTop:-1}).toString();var itemWithImage=css({marginLeft:IMAGE_SPACE}).toString();var innerContainer=css({minHeight:56,position:'relative'}).toString();export default{item:item,itemNotLast:itemNotLast,itemSelected:itemSelected,itemWithImage:itemWithImage,innerContainer:innerContainer};
+import{css}from'glamor';import{themeConfig}from'@shopgate/engage';var variables=themeConfig.variables,colors=themeConfig.colors;export var IMAGE_SPACE=72;var item=css({cursor:'pointer'}).toString();var itemNotLast=css({'&:not(:last-child)':{boxShadow:"0 1px 0 0 ".concat(colors.darkGray),marginBottom:1}}).toString();var itemSelected=css({background:"var(--color-background-accent, ".concat(colors.shade7,")"),boxShadow:"-".concat(variables.gap.bigger,"px 0 0 var(--color-background-accent, ").concat(colors.shade7,"), ").concat(variables.gap.bigger,"px 0 0 var(--color-background-accent, ").concat(colors.shade7,")"),marginTop:-1}).toString();var itemWithImage=css({marginLeft:IMAGE_SPACE}).toString();var innerContainer=css({minHeight:56,position:'relative'}).toString();export default{item:item,itemNotLast:itemNotLast,itemSelected:itemSelected,itemWithImage:itemWithImage,innerContainer:innerContainer};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.29.7-alpha.1",
+  "version": "7.29.7-beta.2",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.29.7-alpha.1",
-    "@shopgate/pwa-common-commerce": "7.29.7-alpha.1",
-    "@shopgate/pwa-core": "7.29.7-alpha.1",
-    "@shopgate/pwa-ui-ios": "7.29.7-alpha.1",
-    "@shopgate/pwa-ui-material": "7.29.7-alpha.1",
-    "@shopgate/pwa-ui-shared": "7.29.7-alpha.1",
+    "@shopgate/pwa-common": "7.29.7-beta.2",
+    "@shopgate/pwa-common-commerce": "7.29.7-beta.2",
+    "@shopgate/pwa-core": "7.29.7-beta.2",
+    "@shopgate/pwa-ui-ios": "7.29.7-beta.2",
+    "@shopgate/pwa-ui-material": "7.29.7-beta.2",
+    "@shopgate/pwa-ui-shared": "7.29.7-beta.2",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -1,7 +1,7 @@
 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%'}});/**
  * 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
+ */var NestedCategoryFilter=function NestedCategoryFilter(){var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;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]);/**
@@ -10,4 +10,4 @@ router.update(routeId,_defineProperty({},code,stateToPersist));}},[code,remember
    * @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;
+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:cx(classes.container,'widget__nested-category-filter__container')},showHeadline&&headline?React.createElement(WidgetHeadline,{headline:headline,className:"widget__nested-category-filter__headline"}):null,categoryPickers,React.createElement("div",{className:cx(classes.buttonContainer,'widget__nested-category-filter__button-container')},React.createElement(ButtonLink,{className:cx(classes.button,'widget__nested-category-filter__CTA-button'),href:"".concat(CATEGORY_PATH,"/").concat(bin2hex(state.buttonCategoryId)),disabled:!state.buttonCategoryId,flat:false},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

@@ -8,4 +8,4 @@ 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;
+ */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,{className:"widget__nested-category-filter__sheet-list"},items.map(function(item){return React.createElement(Item,{item:item,key:item.id,onClick:handleItemClick,isSelected:item.id===selectedId});})));};CategorySheet.defaultProps={onClose:function onClose(){},onSelect:function onSelect(){},selectedId:null};export default CategorySheet;

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

@@ -1,8 +1,8 @@
-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}});/**
+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:16,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}});/**
  * 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;
+ */var SheetItem=function SheetItem(_ref){var item=_ref.item,isSelected=_ref.isSelected,onClick=_ref.onClick;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;return React.createElement("button",{className:cx(classes.button,_defineProperty({},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:function onClick(){},isSelected:false};export default SheetItem;

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

@@ -6,4 +6,4 @@ 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;
+ */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),'widget__nested-category-filter__category-picker')},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;