@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.9

package/product/components/FilterBar/components/Content/components/Sort/components/Item/style.js

@@ -1 +1,7 @@
-import{css}from'glamor';export default css({padding:'6px 5px 6px 18px',textOverflow:'ellipsis',whiteSpace:'nowrap',overflow:'hidden'}).toString();
+import { css } from 'glamor';
+export default css({
+  padding: '6px 5px 6px 18px',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden'
+}).toString();

package/product/components/FilterBar/components/Content/components/Sort/index.js

@@ -1,5 +1,34 @@
-import React from'react';import{SelectBox,ArrowDropIcon,SurroundPortals}from'@shopgate/engage/components';import{useSort,PORTAL_FILTER_SORT_OPTIONS}from'@shopgate/engage/filter';import Item from"./components/Item";import styles from"./style";/**
+import React from 'react';
+import { SelectBox, ArrowDropIcon, SurroundPortals } from '@shopgate/engage/components';
+import { useSort, PORTAL_FILTER_SORT_OPTIONS } from '@shopgate/engage/filter';
+import Item from "./components/Item";
+import styles from "./style";
+
+/**
  * The Sort component.
  * @param {Object} props The component props
  * @returns {JSX}
- */var Sort=function Sort(){var _useSort=useSort(),activeOption=_useSort.activeOption,options=_useSort.options,updateRoute=_useSort.updateRoute;return React.createElement(SurroundPortals,{portalName:PORTAL_FILTER_SORT_OPTIONS,portalProps:{items:options}},React.createElement(SelectBox,{handleSelectionUpdate:updateRoute,items:options,initialValue:activeOption,icon:ArrowDropIcon,item:Item,className:"".concat(styles.selectBox," theme__filter-bar__sort"),classNames:styles,testId:"sorting"}));};export default Sort;
+ */
+const Sort = () => {
+  const {
+    activeOption,
+    options,
+    updateRoute
+  } = useSort();
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PORTAL_FILTER_SORT_OPTIONS,
+    portalProps: {
+      items: options
+    }
+  }, /*#__PURE__*/React.createElement(SelectBox, {
+    handleSelectionUpdate: updateRoute,
+    items: options,
+    initialValue: activeOption,
+    icon: ArrowDropIcon,
+    item: Item,
+    className: `${styles.selectBox} theme__filter-bar__sort`,
+    classNames: styles,
+    testId: "sorting"
+  }));
+};
+export default Sort;

package/product/components/FilterBar/components/Content/components/Sort/style.js

@@ -1 +1,76 @@
-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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var shadows=themeConfig.shadows,colors=themeConfig.colors,variables=themeConfig.variables;var button=css({color:'inherit',outline:0,marginLeft:10,display:'flex',alignItems:'center',textOverflow:'ellipsis',justifyContent:'center',height:variables.filterbar.height,whiteSpace:'nowrap'}).toString();var selection=css({fontSize:'0.875rem',fontWeight:'500',lineHeight:1,paddingTop:1,alignSelf:'center'}).toString();var icon=css({fontSize:'1.5rem'}).toString();var iconOpen=css({transform:'rotate(180deg)'}).toString();var dropdown=css(_defineProperty({position:'absolute',width:'100%',zIndex:2,top:'100%',left:0,background:"var(--color-background-accent, ".concat(colors.background,")"),boxShadow:shadows.filter.sort},responsiveMediaQuery('>xs',{webOnly:true}),{top:'inherit'})).toString();var selectItem=css({padding:0,outline:0,overflow:'hidden',textAlign:'left',width:'100%',color:"var(--color-text-high-emphasis, ".concat(colors.dark,")"),':first-child':{marginTop:variables.gap.big/2},':last-child':{marginBottom:variables.gap.big/2}}).toString();var selectItemSelected=css({fontWeight:500}).toString();var selectBox=css({flexGrow:2}).toString();export default{button:button,selection:selection,icon:icon,iconOpen:iconOpen,dropdown:dropdown,selectItem:selectItem,selectItemSelected:selectItemSelected,selectBox:selectBox};
+import { css } from 'glamor';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  shadows,
+  colors,
+  variables
+} = themeConfig;
+const button = css({
+  color: 'inherit',
+  outline: 0,
+  marginLeft: 10,
+  display: 'flex',
+  alignItems: 'center',
+  textOverflow: 'ellipsis',
+  justifyContent: 'center',
+  height: variables.filterbar.height,
+  whiteSpace: 'nowrap'
+}).toString();
+const selection = css({
+  fontSize: '0.875rem',
+  fontWeight: '500',
+  lineHeight: 1,
+  paddingTop: 1,
+  alignSelf: 'center'
+}).toString();
+const icon = css({
+  fontSize: '1.5rem'
+}).toString();
+const iconOpen = css({
+  transform: 'rotate(180deg)'
+}).toString();
+const dropdown = css({
+  position: 'absolute',
+  width: '100%',
+  zIndex: 2,
+  top: '100%',
+  left: 0,
+  background: `var(--color-background-accent, ${colors.background})`,
+  boxShadow: shadows.filter.sort,
+  [responsiveMediaQuery('>xs', {
+    webOnly: true
+  })]: {
+    top: 'inherit'
+  }
+}).toString();
+const selectItem = css({
+  padding: 0,
+  outline: 0,
+  overflow: 'hidden',
+  textAlign: 'left',
+  width: '100%',
+  color: `var(--color-text-high-emphasis, ${colors.dark})`,
+  ':first-child': {
+    marginTop: variables.gap.big / 2
+  },
+  ':last-child': {
+    marginBottom: variables.gap.big / 2
+  }
+}).toString();
+const selectItemSelected = css({
+  fontWeight: 500
+}).toString();
+const selectBox = css({
+  flexGrow: 2
+}).toString();
+export default {
+  button,
+  selection,
+  icon,
+  iconOpen,
+  dropdown,
+  selectItem,
+  selectItemSelected,
+  selectBox
+};

package/product/components/FilterBar/components/Content/index.js

@@ -1,4 +1,47 @@
-import React,{Fragment,useContext}from'react';import PropTypes from'prop-types';import noop from'lodash/noop';import{useRoute}from'@shopgate/engage/core';import{ViewContext}from'@shopgate/engage/components/View';import{useFilterBarContext}from"../../FilterBarProvider.context";import Sort from"./components/Sort";import FilterButton from"./components/FilterButton";import FilterChips from"./components/FilterChips";import styles from"./style";/**
+import React, { Fragment, useContext } from 'react';
+import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
+import { useRoute } from '@shopgate/engage/core';
+import { ViewContext } from '@shopgate/engage/components/View';
+import { useFilterBarContext } from "../../FilterBarProvider.context";
+import Sort from "./components/Sort";
+import FilterButton from "./components/FilterButton";
+import FilterChips from "./components/FilterChips";
+import styles from "./style";
+
+/**
  * The filter bar content component.
  * @returns {JSX}
- */function FilterBarContent(_ref){var onChipCountUpdate=_ref.onChipCountUpdate;var _useRoute=useRoute(),state=_useRoute.state,routeId=_useRoute.id;var _useContext=useContext(ViewContext),scrollTop=_useContext.scrollTop;var _useFilterBarContext=useFilterBarContext(),openFilters=_useFilterBarContext.openFilters;var filters=state.filters;return React.createElement(Fragment,null,React.createElement("div",{className:styles},React.createElement(Sort,null),React.createElement(FilterButton,{openFilters:openFilters})),React.createElement(FilterChips,{openFilters:openFilters,filters:filters,routeId:routeId,scrollTop:scrollTop,onChipCountUpdate:onChipCountUpdate}));}FilterBarContent.defaultProps={onChipCountUpdate:noop};export default FilterBarContent;
+ */
+function FilterBarContent({
+  onChipCountUpdate
+}) {
+  const {
+    state,
+    id: routeId
+  } = useRoute();
+  const {
+    scrollTop
+  } = useContext(ViewContext);
+  const {
+    openFilters
+  } = useFilterBarContext();
+  const {
+    filters
+  } = state;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles
+  }, /*#__PURE__*/React.createElement(Sort, null), /*#__PURE__*/React.createElement(FilterButton, {
+    openFilters: openFilters
+  })), /*#__PURE__*/React.createElement(FilterChips, {
+    openFilters: openFilters,
+    filters: filters,
+    routeId: routeId,
+    scrollTop: scrollTop,
+    onChipCountUpdate: onChipCountUpdate
+  }));
+}
+FilterBarContent.defaultProps = {
+  onChipCountUpdate: noop
+};
+export default FilterBarContent;

package/product/components/FilterBar/components/Content/spec.js

@@ -1,6 +1,135 @@
-import React from'react';import ReactDOM from'react-dom';import TestUtils from'react-dom/test-utils';import{mount,shallow}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import{FILTER_TYPE_MULTISELECT}from'@shopgate/pwa-common-commerce/filter/constants';import GridIcon from'@shopgate/pwa-ui-shared/icons/GridIcon';import ListIcon from'@shopgate/pwa-ui-shared/icons/ListIcon';// eslint-disable-next-line import/named
-import{UnwrappedContent as FilterBarContent}from"./index";var activeFilters={Size:{label:'Size',source:'attributes',type:FILTER_TYPE_MULTISELECT,values:['31']}};describe.skip('<FilterBarContent />',function(){it('should execute handleToggleViewMode callback when left button is clicked',function(){var spy=jest.fn();var wrapper=mount(React.createElement(FilterBarContent,{handleToggleViewMode:spy,handleSortChange:function handleSortChange(){},handleOpenFiltersView:function handleOpenFiltersView(){},getFilters:function getFilters(){},componentUpdated:function componentUpdated(){}}),mockRenderOptions);var button=wrapper.find('button').first();var node=ReactDOM.findDOMNode(button.node);// eslint-disable-line react/no-find-dom-node
-TestUtils.Simulate.click(node);expect(spy).toHaveBeenCalledTimes(1);});it('should execute handleOpenFiltersView callback when right button is clicked',function(){var spy=jest.fn();var wrapper=mount(React.createElement(FilterBarContent,{handleToggleViewMode:function handleToggleViewMode(){},handleSortChange:function handleSortChange(){},handleOpenFiltersView:spy,getFilters:function getFilters(){},componentUpdated:function componentUpdated(){}}),mockRenderOptions);var button=wrapper.find('button').last();var node=ReactDOM.findDOMNode(button.node);// eslint-disable-line react/no-find-dom-node
-TestUtils.Simulate.click(node);expect(spy).toHaveBeenCalledTimes(1);});it('should render in grid view mode',function(){var wrapper=mount(React.createElement(FilterBarContent,{handleToggleViewMode:function handleToggleViewMode(){},handleSortChange:function handleSortChange(){},handleOpenFiltersView:function handleOpenFiltersView(){},getFilters:function getFilters(){},componentUpdated:function componentUpdated(){}}),mockRenderOptions);expect(wrapper).toMatchSnapshot();expect(wrapper.find(GridIcon).length).toEqual(0);expect(wrapper.find(ListIcon).length).toEqual(1);});it('should render in list view mode',function(){var wrapper=mount(React.createElement(FilterBarContent,{handleToggleViewMode:function handleToggleViewMode(){},handleSortChange:function handleSortChange(){},handleOpenFiltersView:function handleOpenFiltersView(){},getFilters:function getFilters(){},componentUpdated:function componentUpdated(){}}),mockRenderOptions);expect(wrapper).toMatchSnapshot();expect(wrapper.find(GridIcon).length).toEqual(1);expect(wrapper.find(ListIcon).length).toEqual(0);});describe('should call getFilters',function(){var getFiltersSpy=null;var filterBarWrapper=null;var filterBarInstance=null;beforeEach(function(){getFiltersSpy=jest.fn();filterBarWrapper=shallow(React.createElement(FilterBarContent,{handleToggleViewMode:function handleToggleViewMode(){},handleSortChange:function handleSortChange(){},getFilters:getFiltersSpy,componentUpdated:function componentUpdated(){}}),mockRenderOptions);filterBarInstance=filterBarWrapper.instance();});it('should call getFilters at componentDidMount',function(){filterBarInstance.componentDidMount();expect(getFiltersSpy).toHaveBeenCalledTimes(1);});it('should call getFilters at props.activeFilter changes',function(){filterBarWrapper.setProps({activeFilters:activeFilters});expect(getFiltersSpy).toHaveBeenCalledTimes(1);});});describe('Given activeFilters are handled correctly',function(){var filterBarWrapper=null;beforeEach(function(){filterBarWrapper=mount(React.createElement(FilterBarContent,{handleToggleViewMode:function handleToggleViewMode(){},handleSortChange:function handleSortChange(){},getFilters:function getFilters(){},activeFilters:activeFilters,componentUpdated:function componentUpdated(){}}),mockRenderOptions);});it('should render active filters',function(){expect(filterBarWrapper).toMatchSnapshot();});it('should open active filters',function(){var spy=jest.fn();filterBarWrapper.setProps({handleOpenFiltersView:spy});// Trigger a click on a active filter
-filterBarWrapper.find('Chip').at(0).find('button').at(1).simulate('click');expect(spy).toHaveBeenCalledTimes(1);});it('should remove active filter',function(){var removeFilterSpy=jest.fn();var commmitFilterSpy=jest.fn();filterBarWrapper.setProps({removeTemporaryFilter:removeFilterSpy,commitTemporaryFilters:commmitFilterSpy});// Trigger a click on the "X"
-filterBarWrapper.find('Chip').at(0).find('button').at(0).simulate('click');expect(removeFilterSpy).toHaveBeenCalledWith(Object.keys(activeFilters)[0],0);expect(commmitFilterSpy).toHaveBeenCalledTimes(1);});});});
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-dom/test-utils';
+import { mount, shallow } from 'enzyme';
+import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
+import { FILTER_TYPE_MULTISELECT } from '@shopgate/pwa-common-commerce/filter/constants';
+import GridIcon from '@shopgate/pwa-ui-shared/icons/GridIcon';
+import ListIcon from '@shopgate/pwa-ui-shared/icons/ListIcon';
+// eslint-disable-next-line import/named
+import { UnwrappedContent as FilterBarContent } from "./index";
+const activeFilters = {
+  Size: {
+    label: 'Size',
+    source: 'attributes',
+    type: FILTER_TYPE_MULTISELECT,
+    values: ['31']
+  }
+};
+describe.skip('<FilterBarContent />', () => {
+  it('should execute handleToggleViewMode callback when left button is clicked', () => {
+    const spy = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(FilterBarContent, {
+      handleToggleViewMode: spy,
+      handleSortChange: () => {},
+      handleOpenFiltersView: () => {},
+      getFilters: () => {},
+      componentUpdated: () => {}
+    }), mockRenderOptions);
+    const button = wrapper.find('button').first();
+    const node = ReactDOM.findDOMNode(button.node); // eslint-disable-line react/no-find-dom-node
+    TestUtils.Simulate.click(node);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should execute handleOpenFiltersView callback when right button is clicked', () => {
+    const spy = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(FilterBarContent, {
+      handleToggleViewMode: () => {},
+      handleSortChange: () => {},
+      handleOpenFiltersView: spy,
+      getFilters: () => {},
+      componentUpdated: () => {}
+    }), mockRenderOptions);
+    const button = wrapper.find('button').last();
+    const node = ReactDOM.findDOMNode(button.node); // eslint-disable-line react/no-find-dom-node
+    TestUtils.Simulate.click(node);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should render in grid view mode', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(FilterBarContent, {
+      handleToggleViewMode: () => {},
+      handleSortChange: () => {},
+      handleOpenFiltersView: () => {},
+      getFilters: () => {},
+      componentUpdated: () => {}
+    }), mockRenderOptions);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(GridIcon).length).toEqual(0);
+    expect(wrapper.find(ListIcon).length).toEqual(1);
+  });
+  it('should render in list view mode', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(FilterBarContent, {
+      handleToggleViewMode: () => {},
+      handleSortChange: () => {},
+      handleOpenFiltersView: () => {},
+      getFilters: () => {},
+      componentUpdated: () => {}
+    }), mockRenderOptions);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(GridIcon).length).toEqual(1);
+    expect(wrapper.find(ListIcon).length).toEqual(0);
+  });
+  describe('should call getFilters', () => {
+    let getFiltersSpy = null;
+    let filterBarWrapper = null;
+    let filterBarInstance = null;
+    beforeEach(() => {
+      getFiltersSpy = jest.fn();
+      filterBarWrapper = shallow(/*#__PURE__*/React.createElement(FilterBarContent, {
+        handleToggleViewMode: () => {},
+        handleSortChange: () => {},
+        getFilters: getFiltersSpy,
+        componentUpdated: () => {}
+      }), mockRenderOptions);
+      filterBarInstance = filterBarWrapper.instance();
+    });
+    it('should call getFilters at componentDidMount', () => {
+      filterBarInstance.componentDidMount();
+      expect(getFiltersSpy).toHaveBeenCalledTimes(1);
+    });
+    it('should call getFilters at props.activeFilter changes', () => {
+      filterBarWrapper.setProps({
+        activeFilters
+      });
+      expect(getFiltersSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe('Given activeFilters are handled correctly', () => {
+    let filterBarWrapper = null;
+    beforeEach(() => {
+      filterBarWrapper = mount(/*#__PURE__*/React.createElement(FilterBarContent, {
+        handleToggleViewMode: () => {},
+        handleSortChange: () => {},
+        getFilters: () => {},
+        activeFilters: activeFilters,
+        componentUpdated: () => {}
+      }), mockRenderOptions);
+    });
+    it('should render active filters', () => {
+      expect(filterBarWrapper).toMatchSnapshot();
+    });
+    it('should open active filters', () => {
+      const spy = jest.fn();
+      filterBarWrapper.setProps({
+        handleOpenFiltersView: spy
+      });
+
+      // Trigger a click on a active filter
+      filterBarWrapper.find('Chip').at(0).find('button').at(1).simulate('click');
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('should remove active filter', () => {
+      const removeFilterSpy = jest.fn();
+      const commmitFilterSpy = jest.fn();
+      filterBarWrapper.setProps({
+        removeTemporaryFilter: removeFilterSpy,
+        commitTemporaryFilters: commmitFilterSpy
+      });
+
+      // Trigger a click on the "X"
+      filterBarWrapper.find('Chip').at(0).find('button').at(0).simulate('click');
+      expect(removeFilterSpy).toHaveBeenCalledWith(Object.keys(activeFilters)[0], 0);
+      expect(commmitFilterSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/product/components/FilterBar/components/Content/style.js

@@ -1 +1,4 @@
-import{css}from'glamor';export default css({display:'flex'});
+import { css } from 'glamor';
+export default css({
+  display: 'flex'
+});

package/product/components/FilterBar/components/FilterModal/FilterModal.js

@@ -1,4 +1,65 @@
-import React,{useCallback,useContext}from'react';import{css}from'glamor';import{Modal,Backdrop}from'@shopgate/engage/components';import{RouteContext}from'@shopgate/pwa-common/context';import{FilterPageProvider}from'@shopgate/engage/filter/providers';import{useFilterBarContext}from"../../FilterBarProvider.context";import Content from"./FilterModalContent";var styles={root:css({display:'flex',justifyContent:'center',alignItems:'center',width:'100%',height:'100%'})};/**
+import React, { useCallback, useContext } from 'react';
+import { css } from 'glamor';
+import { Modal, Backdrop } from '@shopgate/engage/components';
+import { RouteContext } from '@shopgate/pwa-common/context';
+import { FilterPageProvider } from '@shopgate/engage/filter/providers';
+import { useFilterBarContext } from "../../FilterBarProvider.context";
+import Content from "./FilterModalContent";
+const styles = {
+  root: css({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%'
+  })
+};
+
+/**
  * Filter modal
  * @returns {JSX}
- */var FilterModal=function FilterModal(){var _useFilterBarContext=useFilterBarContext(),filterModalOpen=_useFilterBarContext.filterModalOpen,setFilterModalOpen=_useFilterBarContext.setFilterModalOpen,filters=_useFilterBarContext.filters,updateFilters=_useFilterBarContext.updateFilters;var _useContext=useContext(RouteContext),id=_useContext.id,_useContext$params=_useContext.params,_useContext$params2=_useContext$params===void 0?{}:_useContext$params,categoryId=_useContext$params2.categoryId,_useContext$query=_useContext.query,_useContext$query2=_useContext$query===void 0?{}:_useContext$query,searchPhrase=_useContext$query2.s;var handleClose=useCallback(function(){setFilterModalOpen(false);},[setFilterModalOpen]);var handleApply=useCallback(function(update){handleClose();updateFilters(update);},[handleClose,updateFilters]);if(!filterModalOpen){return null;}return React.createElement(Modal,null,React.createElement("div",{className:styles.root},React.createElement(Backdrop,{isVisible:true,level:0,opacity:38,onClick:function onClick(){return setFilterModalOpen(false);}}),React.createElement(FilterPageProvider,{parentRouteId:id,activeFilters:filters,categoryId:categoryId,searchPhrase:searchPhrase,onApply:handleApply},React.createElement(Content,{onClose:handleClose}))));};export default FilterModal;
+ */
+const FilterModal = () => {
+  const {
+    filterModalOpen,
+    setFilterModalOpen,
+    filters,
+    updateFilters
+  } = useFilterBarContext();
+  const {
+    id,
+    params: {
+      categoryId
+    } = {},
+    query: {
+      s: searchPhrase
+    } = {}
+  } = useContext(RouteContext);
+  const handleClose = useCallback(() => {
+    setFilterModalOpen(false);
+  }, [setFilterModalOpen]);
+  const handleApply = useCallback(update => {
+    handleClose();
+    updateFilters(update);
+  }, [handleClose, updateFilters]);
+  if (!filterModalOpen) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.root
+  }, /*#__PURE__*/React.createElement(Backdrop, {
+    isVisible: true,
+    level: 0,
+    opacity: 38,
+    onClick: () => setFilterModalOpen(false)
+  }), /*#__PURE__*/React.createElement(FilterPageProvider, {
+    parentRouteId: id,
+    activeFilters: filters,
+    categoryId: categoryId,
+    searchPhrase: searchPhrase,
+    onApply: handleApply
+  }, /*#__PURE__*/React.createElement(Content, {
+    onClose: handleClose
+  }))));
+};
+export default FilterModal;

package/product/components/FilterBar/components/FilterModal/FilterModalContent.js

@@ -1,4 +1,56 @@
-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{css}from'glamor';import{themeConfig}from'@shopgate/engage';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{useFilterPage}from'@shopgate/engage/filter/hooks';import FilterPageContent from'@shopgate/engage/filter/components/FilterPageContent';import Title from"./FilterModalTitle";var colors=themeConfig.colors;var styles={root:css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({zIndex:1,background:colors.light,borderRadius:4,minWidth:300},responsiveMediaQuery('>=md'),{minWidth:600}),"maxWidth",'50%'),"minHeight",300),"maxHeight",'90%'),"display",'flex'),"flexDirection",'column'),"overflow",'hidden')),scrollable:css({overflow:'auto',flex:1})};/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/engage';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { useFilterPage } from '@shopgate/engage/filter/hooks';
+import FilterPageContent from '@shopgate/engage/filter/components/FilterPageContent';
+import Title from "./FilterModalTitle";
+const {
+  colors
+} = themeConfig;
+const styles = {
+  root: css({
+    zIndex: 1,
+    background: colors.light,
+    borderRadius: 4,
+    minWidth: 300,
+    [responsiveMediaQuery('>=md')]: {
+      minWidth: 600
+    },
+    maxWidth: '50%',
+    minHeight: 300,
+    maxHeight: '90%',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden'
+  }),
+  scrollable: css({
+    overflow: 'auto',
+    flex: 1
+  })
+};
+
+/**
  * Filter modal content component
  * @returns {JSX.Element}
- */var FilterModalContent=function FilterModalContent(_ref){var onClose=_ref.onClose;var _useFilterPage=useFilterPage(),applyFilters=_useFilterPage.applyFilters,resetAllFilters=_useFilterPage.resetAllFilters;return React.createElement("div",{className:styles.root},React.createElement(Title,{apply:applyFilters,reset:resetAllFilters,close:onClose}),React.createElement("div",{className:styles.scrollable},React.createElement(FilterPageContent,null)));};FilterModalContent.defaultProps={};export default FilterModalContent;
+ */
+const FilterModalContent = ({
+  onClose
+}) => {
+  const {
+    applyFilters,
+    resetAllFilters
+  } = useFilterPage();
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.root
+  }, /*#__PURE__*/React.createElement(Title, {
+    apply: applyFilters,
+    reset: resetAllFilters,
+    close: onClose
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.scrollable
+  }, /*#__PURE__*/React.createElement(FilterPageContent, null)));
+};
+FilterModalContent.defaultProps = {};
+export default FilterModalContent;

package/product/components/FilterBar/components/FilterModal/FilterModalTitle.js

@@ -1,5 +1,67 @@
-import React from'react';import PropTypes from'prop-types';import{css}from'glamor';import{i18n}from'@shopgate/engage/core';import{Ripple,CrossIcon}from'@shopgate/engage/components';var styles={root:css({display:'flex',flexDirection:'row',margin:16,borderBottom:'1px solid rgba(0, 0, 0, 0.24)',alignItems:'center',paddingTop:5,paddingBottom:16}),title:css({flex:1,fontSize:'1.25rem'}),closeButton:css({fontSize:21,marginRight:12,cursor:'pointer',color:'var(--color-primary)'}).toString(),actionButton:css({cursor:'pointer',marginLeft:16,color:'var(--color-primary)',fontWeight:'600',padding:8}).toString(),actionButtonSecondary:css({cursor:'pointer',marginLeft:16,color:'var(--color-primary)',fontWeight:'500',padding:8}).toString()};/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import { i18n } from '@shopgate/engage/core';
+import { Ripple, CrossIcon } from '@shopgate/engage/components';
+const styles = {
+  root: css({
+    display: 'flex',
+    flexDirection: 'row',
+    margin: 16,
+    borderBottom: '1px solid rgba(0, 0, 0, 0.24)',
+    alignItems: 'center',
+    paddingTop: 5,
+    paddingBottom: 16
+  }),
+  title: css({
+    flex: 1,
+    fontSize: '1.25rem'
+  }),
+  closeButton: css({
+    fontSize: 21,
+    marginRight: 12,
+    cursor: 'pointer',
+    color: 'var(--color-primary)'
+  }).toString(),
+  actionButton: css({
+    cursor: 'pointer',
+    marginLeft: 16,
+    color: 'var(--color-primary)',
+    fontWeight: '600',
+    padding: 8
+  }).toString(),
+  actionButtonSecondary: css({
+    cursor: 'pointer',
+    marginLeft: 16,
+    color: 'var(--color-primary)',
+    fontWeight: '500',
+    padding: 8
+  }).toString()
+};
+
+/**
  * Filter Modal Title
  * @param {Object} props Props.
  * @returns {JSX.Element}
- */var FilterModalTitle=function FilterModalTitle(_ref){var apply=_ref.apply,reset=_ref.reset,close=_ref.close;return React.createElement("div",{className:styles.root},React.createElement(Ripple,{onClick:close,className:styles.closeButton},React.createElement(CrossIcon,null)),React.createElement("span",{className:styles.title},i18n.text('titles.filter')),React.createElement(Ripple,{fill:true,className:styles.actionButtonSecondary,onClick:reset},i18n.text('filter.reset')),React.createElement(Ripple,{fill:true,className:styles.actionButton,onClick:apply},i18n.text('filter.apply')));};export default FilterModalTitle;
+ */
+const FilterModalTitle = ({
+  apply,
+  reset,
+  close
+}) => /*#__PURE__*/React.createElement("div", {
+  className: styles.root
+}, /*#__PURE__*/React.createElement(Ripple, {
+  onClick: close,
+  className: styles.closeButton
+}, /*#__PURE__*/React.createElement(CrossIcon, null)), /*#__PURE__*/React.createElement("span", {
+  className: styles.title
+}, i18n.text('titles.filter')), /*#__PURE__*/React.createElement(Ripple, {
+  fill: true,
+  className: styles.actionButtonSecondary,
+  onClick: reset
+}, i18n.text('filter.reset')), /*#__PURE__*/React.createElement(Ripple, {
+  fill: true,
+  className: styles.actionButton,
+  onClick: apply
+}, i18n.text('filter.apply')));
+export default FilterModalTitle;

package/product/components/FilterBar/components/FilterModal/index.js

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

package/product/components/FilterBar/index.js

@@ -1,5 +1,53 @@
-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,{useState,useMemo,memo,useCallback}from'react';import PropTypes from'prop-types';import{ResponsiveContainer}from'@shopgate/engage/components';import{hasNewServices}from'@shopgate/engage/core/helpers';import{themeConfig}from'@shopgate/engage';import{SortProvider,SORT_SCOPE_CATEGORY,SORT_SCOPE_SEARCH}from'@shopgate/engage/filter';import Provider from"./FilterBarProvider";import Content from"./components/Content";import Modal from"./components/FilterModal";import styles from"./style";var colors=themeConfig.colors;/**
+import React, { useState, useMemo, memo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { ResponsiveContainer } from '@shopgate/engage/components';
+import { hasNewServices } from '@shopgate/engage/core/helpers';
+import { themeConfig } from '@shopgate/engage';
+import { SortProvider, SORT_SCOPE_CATEGORY, SORT_SCOPE_SEARCH } from '@shopgate/engage/filter';
+import Provider from "./FilterBarProvider";
+import Content from "./components/Content";
+import Modal from "./components/FilterModal";
+import styles from "./style";
+const {
+  colors
+} = themeConfig;
+
+/**
  * The FilterBar component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */function FilterBar(_ref){var filters=_ref.filters,categoryId=_ref.categoryId;var _useState=useState(filters!==null&&Object.keys(filters).length>0),_useState2=_slicedToArray(_useState,2),active=_useState2[0],setActive=_useState2[1];var handleChipCountUpdate=useCallback(function(count){setActive(count>0);},[]);var style=useMemo(function(){return hasNewServices()?{background:active?'var(--color-background-accent)':'var(--color-background-accent)',color:active?'var(--color-primary)':'var(--color-text-high-emphasis)'}:{background:active?'var(--color-secondary)':colors.background,color:active?'var(--color-secondary-contrast)':colors.dark};},[active]);var sortScope=useMemo(function(){return categoryId?SORT_SCOPE_CATEGORY:SORT_SCOPE_SEARCH;},[categoryId]);return React.createElement("div",{className:"".concat(styles," theme__filter-bar"),"data-test-id":"filterBar",style:style},React.createElement(SortProvider,{scope:sortScope},React.createElement(Provider,null,React.createElement(Content,{onChipCountUpdate:handleChipCountUpdate}),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},React.createElement(Modal,null)))));}FilterBar.defaultProps={filters:null,categoryId:null};export default memo(FilterBar);
+ */
+function FilterBar({
+  filters,
+  categoryId
+}) {
+  const [active, setActive] = useState(filters !== null && Object.keys(filters).length > 0);
+  const handleChipCountUpdate = useCallback(count => {
+    setActive(count > 0);
+  }, []);
+  const style = useMemo(() => hasNewServices() ? {
+    background: active ? 'var(--color-background-accent)' : 'var(--color-background-accent)',
+    color: active ? 'var(--color-primary)' : 'var(--color-text-high-emphasis)'
+  } : {
+    background: active ? 'var(--color-secondary)' : colors.background,
+    color: active ? 'var(--color-secondary-contrast)' : colors.dark
+  }, [active]);
+  const sortScope = useMemo(() => categoryId ? SORT_SCOPE_CATEGORY : SORT_SCOPE_SEARCH, [categoryId]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${styles} theme__filter-bar`,
+    "data-test-id": "filterBar",
+    style: style
+  }, /*#__PURE__*/React.createElement(SortProvider, {
+    scope: sortScope
+  }, /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement(Content, {
+    onChipCountUpdate: handleChipCountUpdate
+  }), /*#__PURE__*/React.createElement(ResponsiveContainer, {
+    breakpoint: ">xs",
+    webOnly: true
+  }, /*#__PURE__*/React.createElement(Modal, null)))));
+}
+FilterBar.defaultProps = {
+  filters: null,
+  categoryId: null
+};
+export default /*#__PURE__*/memo(FilterBar);