ordering-ui-admin-external 1.13.3 → 1.14.0

package/src/components/Stores/index.js

@@ -24,6 +24,7 @@ import { BusinessPaymentMethods } from './BusinessPaymentMethods'
 import { BusinessPreview } from './BusinessPreview'
 import { BusinessPreorderDetails } from './BusinessPreorderDetails'
 import { BusinessPromotionList } from './BusinessPromotionList'
+import { BusinessSalesChannel } from './BusinessSalesChannel'
 import { BusinessSchedule } from './BusinessSchedule'
 import { BusinessSupport } from './BusinessSupport'
 import { BusinessSummary } from './BusinessSummary'
@@ -133,6 +134,7 @@ export {
   BusinessPreview,
   BusinessPreorderDetails,
   BusinessPromotionList,
+  BusinessSalesChannel,
   BusinessSchedule,
   BusinessSupport,
   BusinessSummary,

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

@@ -6,12 +6,12 @@ import {
 } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
-import { Envelope, Phone, ThreeDots, PersonFill, ChevronRight } from 'react-bootstrap-icons'
+import { Envelope, Phone, ThreeDots, PersonFill, ChevronRight, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { UserDetails } from '../UserDetails'
 import { CustomerCashWallet } from '../CustomerCashWallet'
 import { Confirm, SideBar } from '../../Shared'
-import { Switch } from '../../../styles'
+import { IconButton, Switch } from '../../../styles'
 
 import {
   DetailsContainer,
@@ -23,9 +23,11 @@ import {
   MenusContainer,
   OptionMenu,
   UserDetailsWrapper,
-  UserName
+  UserName,
+  RightHeader
 } from './styles'
 import { CustomerPointsWallet } from '../CustomerPointsWallet'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 const CustomerDetailsUI = (props) => {
   const {
@@ -38,11 +40,13 @@ const CustomerDetailsUI = (props) => {
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
+  const { width } = useWindowSize()
 
   const [showOption, setShowOption] = useState(null)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [isOpenMenu, setIsOpenMenu] = useState(false)
   const [menuMoveDistance, setMenuMoveDistance] = useState(0)
+  const [isExpand, setIsExpand] = useState(false)
 
   const customerMenus = [
     { key: 'user_details', value: t('USER_DETAILS', 'User details') },
@@ -76,12 +80,23 @@ const CustomerDetailsUI = (props) => {
     setMenuMoveDistance(0)
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('customer_details')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     handleParentSidebarMove(0)
     setIsOpenMenu(false)
     setShowOption(null)
   }, [userState?.user?.id])
 
+  useEffect(() => {
+    if (isOpenMenu) setIsExpand(false)
+  }, [isOpenMenu])
+
   return (
     <>
       <DetailsContainer>
@@ -120,17 +135,27 @@ const CustomerDetailsUI = (props) => {
               </VerifiedItem>
             )}
           </LeftHeader>
-          <ActionSelectorWrapper>
-            <DropdownButton
-              menuAlign={theme?.rtl ? 'left' : 'right'}
-              title={<ThreeDots />}
-              id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
-            >
-              <Dropdown.Item onClick={() => onDeleteCustomer()}>
-                {t('DELETE', 'Delete')}
-              </Dropdown.Item>
-            </DropdownButton>
-          </ActionSelectorWrapper>
+          <RightHeader>
+            {width > 576 && !isOpenMenu && (
+              <IconButton
+                color='black'
+                onClick={() => expandSidebar()}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
+            <ActionSelectorWrapper>
+              <DropdownButton
+                menuAlign={theme?.rtl ? 'left' : 'right'}
+                title={<ThreeDots />}
+                id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+              >
+                <Dropdown.Item onClick={() => onDeleteCustomer()}>
+                  {t('DELETE', 'Delete')}
+                </Dropdown.Item>
+              </DropdownButton>
+            </ActionSelectorWrapper>
+          </RightHeader>
         </HeaderContainer>
 
         <PhotoWrapper>

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

@@ -20,11 +20,8 @@ export const LeftHeader = styled.div`
   }
 `
 export const RightHeader = styled.div`
-  ${props => props.theme?.rtl ? css`
-    margin-left: 35px;
-  ` : css`
-    margin-right: 35px;
-  `}
+  display: flex;
+  align-items: center;
 `
 export const VerifiedItem = styled.span`
   font-size: 10px;

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

@@ -13,12 +13,12 @@ import { UserAddForm } from '../UserAddForm'
 import { UsersDeleteButton } from '../UsersDeleteButton'
 import { UsersExportCSV } from '../UsersExportCSV'
 import { Button } from '../../../styles'
-// import { X as CloseIcon } from 'react-bootstrap-icons'
+import { X as CloseIcon } from 'react-bootstrap-icons'
 
 import {
   UsersListingContainer,
   ActionsContainer,
-  // VerifiedStatusFilterContainer,
+  VerifiedStatusFilterContainer,
   ActionButtonsGroup
 } from './styles'
 
@@ -48,7 +48,11 @@ const CustomersListingUI = (props) => {
     handleSuccessUpdate,
     handleSuccessAddUser,
     handleSuccessDeleteUser,
-    setSelectedUsers
+    setSelectedUsers,
+    orderFilterValue,
+    handleChangeOrderFilterValue,
+    handleChangeMultiFilterValues,
+    multiFilterValues
   } = props
 
   const [, t] = useLanguage()
@@ -59,6 +63,12 @@ const CustomersListingUI = (props) => {
   const [openUserAddForm, setOpenUserAddForm] = useState(false)
   const [moveDistance, setMoveDistance] = useState(0)
 
+  const orderList = [
+    { id: 1, name: t('NO_ORDERS', 'No orders'), value: 0 },
+    { id: 2, name: t('WITH_ORDERS', 'With orders'), value: 1 },
+    { id: 3, name: t('WITH_5_ORDERS', 'With 5+ orders'), value: 5 }
+  ]
+
   const handleBackRedirect = () => {
     setIsOpenUserDetails(false)
     setOpenUser(null)
@@ -105,28 +115,34 @@ const CustomersListingUI = (props) => {
           title={headerTitle}
           searchValue={searchValue}
           onSearch={onSearch}
+          multiFilterValues={multiFilterValues}
+          handleChangeMultiFilterValues={handleChangeMultiFilterValues}
+          isCustomers
         />
         <UserActiveStateFilter
           selectedUserActiveState={selectedUserActiveState}
           handleChangeUserActiveState={handleChangeUserActiveState}
         />
         <ActionsContainer>
-          {/* <VerifiedStatusFilterContainer>
+          <VerifiedStatusFilterContainer>
             <Button
-              color={!isVerified ? 'primary' : 'secundaryDark'}
-              onClick={() => setIsVerified(false)}
+              color={(orderFilterValue === '' || orderFilterValue === null) ? 'primary' : 'secundaryDark'}
+              onClick={() => handleChangeOrderFilterValue('')}
             >
               {t('ALL', 'All')}
-              <CloseIcon />
-            </Button>
-            <Button
-              color={isVerified ? 'primary' : 'secundaryDark'}
-              onClick={() => setIsVerified(true)}
-            >
-              {t('VERIFIED', 'Verified')}
-              <CloseIcon />
+              {(orderFilterValue === '' || orderFilterValue === null) && <CloseIcon />}
             </Button>
-          </VerifiedStatusFilterContainer> */}
+            {orderList.map((item, i) => (
+              <Button
+                key={i}
+                color={orderFilterValue === item.value ? 'primary' : 'secundaryDark'}
+                onClick={() => handleChangeOrderFilterValue(item.value)}
+              >
+                {item.name}
+                {orderFilterValue === item.value && <CloseIcon />}
+              </Button>
+            ))}
+          </VerifiedStatusFilterContainer>
           <ActionButtonsGroup>
             <Button
               borderRadius='8px'
@@ -189,6 +205,7 @@ const CustomersListingUI = (props) => {
           sidebarId='user_add_form'
           open={openUserAddForm}
           onClose={() => setOpenUserAddForm(false)}
+          showExpandIcon
         >
           <UserAddForm
             handleSuccessAdd={handleSuccessAddUser}

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

@@ -16,11 +16,11 @@ export const ActionsContainer = styled.div`
   padding-top: 20px;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 
   @media (min-width: 768px) {
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
   }
 `
 export const VerifiedStatusFilterContainer = styled.div`

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

@@ -25,7 +25,7 @@ const OccupationSelectorUI = (props) => {
   }
 
   useEffect(() => {
-    if (!occupations.length) return
+    if (!occupations?.length) return
     const _occupationList = occupations.filter(item => item.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())).map(occupation => {
       return {
         value: occupation.id,

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { ThreeDots, Calendar4Event } from 'react-bootstrap-icons'
+import { ThreeDots, Calendar4Event, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
 import { useLanguage, useSession, UserDetails as UserDetailsController } from 'ordering-components-admin-external'
@@ -10,15 +10,17 @@ import { UserProfileForm } from '../UserProfileForm'
 import { ProfessionalSchedule } from '../ProfessionalSchedule'
 import { ProfessionalBusinessService } from '../ProfessionalBusinessService'
 import { UserMetaFields } from '../UserMetaFields'
-import { Button, Switch } from '../../../styles'
+import { Button, IconButton, Switch } from '../../../styles'
 
 import {
   DetailsHeader,
   UserName,
   ActionSelectorWrapper,
   SideBarWrapper,
-  CalendarSyncWrapper
+  CalendarSyncWrapper,
+  RightHeader
 } from './styles'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 export const ProfessionalDetailUI = (props) => {
   const {
@@ -35,10 +37,12 @@ export const ProfessionalDetailUI = (props) => {
   const theme = useTheme()
   const [adminUserState] = useSession()
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
   const [currentMenuSelected, setCurrentMenuSelected] = useState('profile')
   const [extraSelected, setExtraSelected] = useState(null)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isExpand, setIsExpand] = useState(false)
 
   const onDeleteCustomer = () => {
     setConfirm({
@@ -61,6 +65,13 @@ export const ProfessionalDetailUI = (props) => {
     }
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('user_lateral_bar')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     setExtraOpen(false)
     setExtraSelected(null)
@@ -108,28 +119,37 @@ export const ProfessionalDetailUI = (props) => {
             <Calendar4Event />
           </Button>
         </CalendarSyncWrapper>
-
-        {adminUserState.user?.id !== userState.user?.id && (
-          <ActionSelectorWrapper>
-            <DropdownButton
-              menuAlign={theme?.rtl ? 'left' : 'right'}
-              title={<ThreeDots />}
-              id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+        <RightHeader>
+          {width > 576 && (
+            <IconButton
+              color='black'
+              onClick={expandSidebar}
             >
-              <Dropdown.Item onClick={() => handleOpenExtra('custom_fields')}>
-                {t('CUSTOM_FIELDS', 'Custom fields')}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => handleOpenExtra('personalization')}>
-                {t('PERSONALIZATION', 'Personalization')}
-              </Dropdown.Item>
-              {adminUserState?.user?.level === 0 && (
-                <Dropdown.Item className='delete' onClick={() => onDeleteCustomer()}>
-                  {t('DELETE', 'Delete')}
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+          )}
+          {adminUserState.user?.id !== userState.user?.id && (
+            <ActionSelectorWrapper>
+              <DropdownButton
+                menuAlign={theme?.rtl ? 'left' : 'right'}
+                title={<ThreeDots />}
+                id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+              >
+                <Dropdown.Item onClick={() => handleOpenExtra('custom_fields')}>
+                  {t('CUSTOM_FIELDS', 'Custom fields')}
                 </Dropdown.Item>
-              )}
-            </DropdownButton>
-          </ActionSelectorWrapper>
-        )}
+                <Dropdown.Item onClick={() => handleOpenExtra('personalization')}>
+                  {t('PERSONALIZATION', 'Personalization')}
+                </Dropdown.Item>
+                {adminUserState?.user?.level === 0 && (
+                  <Dropdown.Item onClick={() => onDeleteCustomer()}>
+                    {t('DELETE', 'Delete')}
+                  </Dropdown.Item>
+                )}
+              </DropdownButton>
+            </ActionSelectorWrapper>
+          )}
+        </RightHeader>
       </DetailsHeader>
       <UserDetailsMenu
         currentMenuSelected={currentMenuSelected}

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

@@ -9,6 +9,11 @@ export const DetailsHeader = styled.div`
   margin-top: -5px;
 `
 
+export const RightHeader = styled.div`
+  display: flex;
+  align-items: center;
+`
+
 export const UserName = styled.div`
   display: flex;
   align-items: center;

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

@@ -191,7 +191,7 @@ export const WrapperPagination = styled.div`
 
 export const AddNewUserButton = styled.div`
   cursor: pointer;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
   width: fit-content;
   font-size: 14px;
 `

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

@@ -48,7 +48,9 @@ const ProfessionalListingUI = (props) => {
     occupationsState,
     selectedOccupation,
     handleSelectOccupation,
-    setSelectedUsers
+    setSelectedUsers,
+    handleChangeMultiFilterValues,
+    multiFilterValues
   } = props
 
   const [, t] = useLanguage()
@@ -109,6 +111,8 @@ const ProfessionalListingUI = (props) => {
               title={headerTitle}
               searchValue={searchValue}
               onSearch={onSearch}
+              handleChangeMultiFilterValues={handleChangeMultiFilterValues}
+              multiFilterValues={multiFilterValues}
             />
             <UserActiveStateFilter
               selectedUserActiveState={selectedUserActiveState}
@@ -178,6 +182,7 @@ const ProfessionalListingUI = (props) => {
           sidebarId='user_add_form'
           open={openUserAddForm}
           onClose={() => setOpenUserAddForm(false)}
+          showExpandIcon
         >
           <ProfessionalAddForm
             occupations={occupationsState.occupations}

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

@@ -352,7 +352,7 @@ const UserAddFormUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -6,13 +6,13 @@ import { UserProfileForm } from '../UserProfileForm'
 import { AddressList } from '../../Delivery'
 import { OrdersManager } from '../../Orders'
 import { BusinessManagerBusinesses } from '../BusinessManagerBusinesses'
-import { Envelope, Phone, ThreeDots } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, Envelope, Phone, ThreeDots } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
 import { Confirm } from '../../Shared'
 import { Personalization } from '../../Shared/Personalization'
 import { UserMetaFields } from '../UserMetaFields'
-import { Switch } from '../../../styles'
+import { IconButton, Switch } from '../../../styles'
 
 import {
   DetailsHeader,
@@ -22,7 +22,8 @@ import {
   PersonalizationWrapper,
   OrdersWrapper,
   ActionSelectorWrapper,
-  VerifiedItemsWrapper
+  VerifiedItemsWrapper,
+  RightHeader
 } from './styles'
 
 export const UserDetailsUI = (props) => {
@@ -40,6 +41,7 @@ export const UserDetailsUI = (props) => {
   const [, t] = useLanguage()
   const [currentMenuSelected, setCurrentMenuSelected] = useState('profile')
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [isExpand, setIsExpand] = useState(false)
 
   const onDeleteCustomer = () => {
     setConfirm({
@@ -52,6 +54,13 @@ export const UserDetailsUI = (props) => {
     })
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('user_lateral_bar')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     setExtraOpen(false)
   }, [currentMenuSelected])
@@ -95,20 +104,28 @@ export const UserDetailsUI = (props) => {
                 </VerifiedItem>
               )}
             </VerifiedItemsWrapper>
-
-            {adminUserState.user?.id !== userState.user?.id && (
-              <ActionSelectorWrapper>
-                <DropdownButton
-                  menuAlign={theme?.rtl ? 'left' : 'right'}
-                  title={<ThreeDots />}
-                  id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
-                >
-                  <Dropdown.Item onClick={() => onDeleteCustomer()}>
-                    {t('DELETE', 'Delete')}
-                  </Dropdown.Item>
-                </DropdownButton>
-              </ActionSelectorWrapper>
-            )}
+            <RightHeader isLoginUser={adminUserState.user?.id === userState.user?.id}>
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
+                className='expand'
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+              {adminUserState.user?.id !== userState.user?.id && (
+                <ActionSelectorWrapper>
+                  <DropdownButton
+                    menuAlign={theme?.rtl ? 'left' : 'right'}
+                    title={<ThreeDots />}
+                    id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+                  >
+                    <Dropdown.Item onClick={() => onDeleteCustomer()}>
+                      {t('DELETE', 'Delete')}
+                    </Dropdown.Item>
+                  </DropdownButton>
+                </ActionSelectorWrapper>
+              )}
+            </RightHeader>
           </>
         )}
       </DetailsHeader>

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

@@ -8,6 +8,21 @@ export const DetailsHeader = styled.div`
   margin-bottom: 10px;
   margin-top: -5px;
 `
+
+export const RightHeader = styled.div`
+  display: flex;
+  align-items: center;
+  ${({ isLoginUser }) => isLoginUser && css`
+    .expand {
+      margin-right: 25px;
+      ${props => props.theme.rtl && css`
+        margin-left: 25px;
+        margin-right: 0;
+      `}
+    }
+  `}
+`
+
 export const UserName = styled.div`
   display: flex;
   align-items: center;
@@ -110,9 +125,9 @@ export const OrdersWrapper = styled.div`
 
 export const ActionSelectorWrapper = styled.div`
   ${props => props.theme?.rtl ? css`
-    margin-left: 35px;
+    margin-left: 25px;
   ` : css`
-    margin-right: 35px;
+    margin-right: 25px;
   `}
   button {
     background: transparent !important;

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

@@ -63,7 +63,6 @@ export const LateralBarContainer = styled.div`
 `
 
 export const WrapUserDetails = styled.div`
-  max-width: 500px;
   height: 100%;
   padding: 35px 20px;
   position: relative;