ordering-ui-admin-external 1.13.4 → 1.14.1

package/src/components/Users/UsersListingHeader/index.js

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { SearchBar } from '../../Shared'
-import { List as MenuIcon, InfoCircle } from 'react-bootstrap-icons'
+import { List as MenuIcon, InfoCircle, Funnel } from 'react-bootstrap-icons'
 import { IconButton } from '../../../styles'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
+import MdcFilterOff from '@meronex/icons/mdc/MdcFilterOff'
 
 import {
   HeaderContainer,
@@ -12,52 +13,84 @@ import {
   InfoWrapper,
   InfoContent
 } from './styles'
+import { UserFilterGroup } from '../UserFilterGroup'
 
 export const UsersListingHeader = (props) => {
   const {
     isProfessionals,
+    isManagers,
+    isCustomers,
     title,
     searchValue,
-    onSearch
+    onSearch,
+    handleChangeMultiFilterValues,
+    multiFilterValues
   } = props
 
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const [filterApplied, setFilterApplied] = useState(false)
+  const [isFilterModal, setIsFilterModal] = useState(false)
+
+  useEffect(() => {
+    if (multiFilterValues) setFilterApplied(Object.keys(multiFilterValues).length > 0)
+  }, [multiFilterValues])
 
   return (
-    <HeaderContainer>
-      <HeaderTitleContainer>
-        {isCollapse && (
-          <IconButton
-            color='black'
-            onClick={() => handleMenuCollapse(false)}
-          >
-            <MenuIcon />
-          </IconButton>
-        )}
-        <h1>{title}</h1>
-        {isProfessionals && (
-          <InfoWrapper>
+    <>
+      <HeaderContainer>
+        <HeaderTitleContainer>
+          {isCollapse && (
+            <IconButton
+              color='black'
+              onClick={() => handleMenuCollapse(false)}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          <h1>{title}</h1>
+          {isProfessionals && (
+            <InfoWrapper>
+              <IconButton
+                color='primary'
+              >
+                <InfoCircle />
+              </IconButton>
+              <InfoContent>
+                {t('PROFESSIONALS_INFO', 'Create, assign and manage your professionals. Once the professional link his Google account, continue synchronizing your appointments with the professionals user using the Synchronize button inside of the account. Select the stores and configure the schedules for your services.')}
+              </InfoContent>
+            </InfoWrapper>
+          )}
+        </HeaderTitleContainer>
+        <ActionContainer>
+          <SearchBar
+            lazyLoad
+            isCustomLayout
+            onSearch={onSearch}
+            search={searchValue}
+            placeholder={t('SEARCH', 'Search')}
+          />
+          {multiFilterValues && (
             <IconButton
-              color='primary'
+              color='black'
+              onClick={() => setIsFilterModal(true)}
+              name='filter-btn'
             >
-              <InfoCircle />
+              {filterApplied ? <Funnel /> : <MdcFilterOff />}
             </IconButton>
-            <InfoContent>
-              {t('PROFESSIONALS_INFO', 'Create, assign and manage your professionals. Once the professional link his Google account, continue synchronizing your appointments with the professionals user using the Synchronize button inside of the account. Select the stores and configure the schedules for your services.')}
-            </InfoContent>
-          </InfoWrapper>
-        )}
-      </HeaderTitleContainer>
-      <ActionContainer>
-        <SearchBar
-          lazyLoad
-          isCustomLayout
-          onSearch={onSearch}
-          search={searchValue}
-          placeholder={t('SEARCH', 'Search')}
+          )}
+        </ActionContainer>
+      </HeaderContainer>
+      {multiFilterValues && (
+        <UserFilterGroup
+          handleChangeFilterValues={handleChangeMultiFilterValues}
+          onClose={() => setIsFilterModal(false)}
+          isFilterModal={isFilterModal}
+          isProfessionals={isProfessionals}
+          isManagers={isManagers}
+          isCustomers={isCustomers}
         />
-      </ActionContainer>
-    </HeaderContainer>
+      )}
+    </>
   )
 }

package/src/components/Users/UsersListingHeader/styles.js

@@ -70,6 +70,10 @@ export const ActionContainer = styled.div`
     border: none;
   }
 
+  button {
+    height: 43px;
+  }
+
   @media (min-width: 768px) {
     margin-top: 0px;
   }

package/src/components/Users/index.js

@@ -6,6 +6,7 @@ import { UsersDeleteButton } from './UsersDeleteButton'
 import { UsersExportCSV } from './UsersExportCSV'
 import { UserTypeSelector } from './UserTypeSelector'
 import { ProfessionalListing } from './ProfessionalListing'
+import { UserFilterGroup } from './UserFilterGroup'
 import { UsersList } from './UsersList'
 import { UsersListingHeader } from './UsersListingHeader'
 import { UserTypeFilter } from './UserTypeFilter'
@@ -32,6 +33,7 @@ export {
   UsersExportCSV,
   UserTypeSelector,
   ProfessionalListing,
+  UserFilterGroup,
   UsersList,
   UsersListingHeader,
   UserTypeFilter,