ordering-ui-admin-external 1.5.1 → 1.6.0

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

@@ -47,7 +47,8 @@ const CustomersListingUI = (props) => {
     onUserRedirect,
     handleSuccessUpdate,
     handleSuccessAddUser,
-    handleSuccessDeleteUser
+    handleSuccessDeleteUser,
+    setSelectedUsers
   } = props
 
   const [, t] = useLanguage()
@@ -160,6 +161,7 @@ const CustomersListingUI = (props) => {
           userDetailsId={openUser?.id || queryId}
           handleOpenUserDetails={handleOpenUserDetails}
           handleOpenUserAddForm={handleOpenUserAddForm}
+          setSelectedUsers={setSelectedUsers}
         />
       </UsersListingContainer>
 

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

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Select } from '../../../styles/Select'
+import { SelectWrapper, Option } from './styles'
+
+export const OccupationSelector = (props) => {
+  const {
+    occupationId,
+    occupations,
+    handleChangeOccupation
+  } = props
+
+  const [, t] = useLanguage()
+  const [options, setOptions] = useState([])
+
+  useEffect(() => {
+    if (!occupations.length) return
+    const _occupationList = occupations.map(occupation => {
+      return {
+        value: occupation.id,
+        content: <Option>{occupation.name}</Option>
+      }
+    })
+    setOptions(_occupationList)
+  }, [occupations])
+
+  return (
+    <SelectWrapper>
+      <Select
+        placeholder={<Option>{t('SELECT_OCCUPATION', 'Select occupation')}</Option>}
+        defaultValue={occupationId}
+        options={options}
+        onChange={handleChangeOccupation}
+      />
+    </SelectWrapper>
+  )
+}

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export const SelectWrapper = styled.div`
+  width: 100%;
+  margin-bottom: 20px;
+
+  .select-wrapper {
+    .select {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      padding: 6px 0;
+      font-size: 14px;
+    }
+  }
+`
+export const Option = styled.div`
+  font-size: 14px;
+  padding: 4px 0;
+`

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

@@ -0,0 +1,50 @@
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Button } from '../../../styles'
+import {
+  Container,
+  SkeletonWrapper
+} from './styles'
+
+export const OccupationsFilter = (props) => {
+  const {
+    occupationsState,
+    selectedOccupation,
+    handleSelectOccupation
+  } = props
+
+  const [, t] = useLanguage()
+
+  return (
+    <Container>
+      {occupationsState.loading ? (
+        [...Array(3).keys()].map(i =>
+          <SkeletonWrapper key={i}>
+            <Skeleton />
+          </SkeletonWrapper>
+        )
+      ) : (
+        occupationsState.occupations.length > 0 && (
+          <>
+            <Button
+              color={selectedOccupation ? 'secundaryDark' : 'primary'}
+              onClick={() => handleSelectOccupation(null)}
+            >
+              {t('ALL', 'All')}
+            </Button>
+            {occupationsState.occupations.map(occupation => (
+              <Button
+                key={occupation.id}
+                color={selectedOccupation === occupation.id ? 'primary' : 'secundaryDark'}
+                onClick={() => handleSelectOccupation(occupation.id)}
+              >
+                {occupation.name}
+              </Button>
+            ))}
+          </>
+        )
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,32 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 10px;
+    ` : css`
+      margin-right: 10px;
+    `}
+    font-size: 12px;
+    white-space: nowrap;
+  }
+`
+export const SkeletonWrapper = styled.span`
+  height: 34px;
+  width: 120px;
+  border-radius: 30px;
+  overflow: hidden;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 10px;
+  ` : css`
+    margin-right: 10px;
+  `}
+  > span {
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
+`

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

@@ -1,31 +1,35 @@
 import React, { useEffect, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { ThreeDots } from 'react-bootstrap-icons'
+import { ThreeDots, Calendar4Event } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
-import { UserDetails as UserDetailsController, useLanguage, useSession } from 'ordering-components-admin-external'
-import { Confirm, Personalization, SideBar } from '../../Shared'
+import { useLanguage, useSession, UserDetails as UserDetailsController } from 'ordering-components-admin-external'
+import { Confirm, Personalization, SideBar, Alert } from '../../Shared'
 import { UserDetailsMenu } from '../UserDetailsMenu'
 import { UserProfileForm } from '../UserProfileForm'
 import { ProfessionalSchedule } from '../ProfessionalSchedule'
 import { ProfessionalBusinessService } from '../ProfessionalBusinessService'
 import { UserMetaFields } from '../UserMetaFields'
-import { Switch } from '../../../styles'
+import { Button, Switch } from '../../../styles'
 
 import {
   DetailsHeader,
   UserName,
   ActionSelectorWrapper,
-  SideBarWrapper
+  SideBarWrapper,
+  CalendarSyncWrapper
 } from './styles'
 
 export const ProfessionalDetailUI = (props) => {
   const {
     userState,
+    occupations,
     setExtraOpen,
     handleSuccessUserUpdate,
     handleDeleteUser,
-    handleChangeActiveUser
+    handleChangeActiveUser,
+    handleGoogleCalendarSync,
+    actionStatus
   } = props
 
   const theme = useTheme()
@@ -34,6 +38,7 @@ export const ProfessionalDetailUI = (props) => {
   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 onDeleteCustomer = () => {
     setConfirm({
@@ -61,6 +66,15 @@ export const ProfessionalDetailUI = (props) => {
     setExtraSelected(null)
   }, [currentMenuSelected])
 
+  useEffect(() => {
+    if (actionStatus.error) {
+      setAlertState({
+        open: true,
+        content: actionStatus.error
+      })
+    }
+  }, [actionStatus.error])
+
   return (
     <>
       <DetailsHeader>
@@ -77,13 +91,24 @@ export const ProfessionalDetailUI = (props) => {
               {handleChangeActiveUser && (
                 <Switch
                   defaultChecked={userState?.user?.enabled || false}
-                  onChange={enabled => handleChangeActiveUser({ id: userState?.user?.id, enabled: enabled })}
+                  onChange={enabled => handleChangeActiveUser({ ...userState?.user, enabled: enabled })}
                 />
               )}
             </>
           )}
         </UserName>
 
+        <CalendarSyncWrapper>
+          <Button
+            borderRadius='8px'
+            color='lightPrimary'
+            onClick={handleGoogleCalendarSync}
+          >
+            <span>{t('CALENDAR_SYNC', 'Calendar sync')}</span>
+            <Calendar4Event />
+          </Button>
+        </CalendarSyncWrapper>
+
         {adminUserState.user?.id !== userState.user?.id && (
           <ActionSelectorWrapper>
             <DropdownButton
@@ -114,6 +139,7 @@ export const ProfessionalDetailUI = (props) => {
           {currentMenuSelected === 'profile' && (
             <UserProfileForm
               user={userState.user}
+              occupations={occupations}
               handleSuccessUpdate={handleSuccessUserUpdate}
               isProfessional
             />
@@ -174,6 +200,15 @@ export const ProfessionalDetailUI = (props) => {
         onAccept={confirm.handleOnAccept}
         closeOnBackdrop={false}
       />
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
     </>
   )
 }

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

@@ -12,6 +12,7 @@ export const DetailsHeader = styled.div`
 export const UserName = styled.div`
   display: flex;
   align-items: center;
+  flex: 1;
   > span {
     font-size: 20px;
     font-weight: 700;
@@ -29,9 +30,9 @@ export const UserName = 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;
@@ -101,3 +102,16 @@ export const SideBarWrapper = styled.div`
     height: calc(100% - 50px);
   }
 `
+export const CalendarSyncWrapper = styled.div`
+  margin: 0 10px;
+  > button {
+    height: 44px;
+    span {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 8px;
+      ` : css`
+        margin-right: 8px;
+      `}
+    }
+  }
+`

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

@@ -22,7 +22,8 @@ import {
   AddNewUserButton,
   UsersBottomContainer,
   VerifiedItemsContainer,
-  VerifiedItem
+  VerifiedItem,
+  AllCheckWrapper
 } from './styles'
 
 export const ProfessionalList = (props) => {
@@ -35,7 +36,8 @@ export const ProfessionalList = (props) => {
     selectedUsers,
     handleSelectedUsers,
     handleOpenUserDetails,
-    handleOpenUserAddForm
+    handleOpenUserAddForm,
+    setSelectedUsers
   } = props
 
   const [, t] = useLanguage()
@@ -44,6 +46,7 @@ export const ProfessionalList = (props) => {
   const [confirmAdmin, setConfirmAdmin] = useState({ open: false, handleOnConfirm: null })
 
   const [openPopover, setOpenPopover] = useState(false)
+  const [isAllChecked, setIsAllChecked] = useState(false)
   const [allowColumns, setAllowColumns] = useState({
     user: true,
     city: true,
@@ -112,6 +115,19 @@ export const ProfessionalList = (props) => {
     }
   }
 
+  const handleSelecteAllUser = () => {
+    const userIds = usersList.users?.reduce((ids, user) => [...ids, user.id], [])
+    if (!isAllChecked) {
+      setSelectedUsers([...selectedUsers, ...userIds])
+    } else {
+      const userIdsToDeleteSet = new Set(userIds)
+      const updatedSelectedOrderIds = selectedUsers.filter((name) => {
+        return !userIdsToDeleteSet.has(name)
+      })
+      setSelectedUsers(updatedSelectedOrderIds)
+    }
+  }
+
   useEffect(() => {
     if (usersList.loading || usersList.users.length > 0 || paginationProps.totalPages <= 1) return
     if (paginationProps.currentPage !== paginationProps.totalPages) {
@@ -121,6 +137,13 @@ export const ProfessionalList = (props) => {
     }
   }, [usersList.users, paginationProps])
 
+  useEffect(() => {
+    if (usersList.loading) return
+    const userIds = usersList.users?.reduce((ids, user) => [...ids, user.id], [])
+    const _isAllChecked = userIds.every(elem => selectedUsers.includes(elem))
+    setIsAllChecked(_isAllChecked)
+  }, [usersList.users, selectedUsers])
+
   return (
     <>
       <UsersConatiner>
@@ -129,7 +152,22 @@ export const ProfessionalList = (props) => {
             <thead>
               <tr>
                 {allowColumns?.user && (
-                  <th>{t('USER', 'User')}</th>
+                  <th>
+                    <AllCheckWrapper>
+                      <CheckBoxWrapper
+                        className='user_checkbox'
+                        isChecked={!usersList?.loading && isAllChecked}
+                        onClick={() => handleSelecteAllUser()}
+                      >
+                        {(!usersList?.loading && isAllChecked) ? (
+                          <CheckSquareFill />
+                        ) : (
+                          <Square />
+                        )}
+                      </CheckBoxWrapper>
+                      {t('USER', 'User')}
+                    </AllCheckWrapper>
+                  </th>
                 )}
                 {allowColumns?.phone && (
                   <th>{t('PHONE', 'Phone')}</th>

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

@@ -240,3 +240,8 @@ export const VerifiedItemsContainer = styled.div`
     }
   }
 `
+
+export const AllCheckWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`

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

@@ -10,6 +10,7 @@ import { SideBar } from '../../Shared'
 import { UsersDeleteButton } from '../UsersDeleteButton'
 import { UsersExportCSV } from '../UsersExportCSV'
 import { Button } from '../../../styles'
+import { OccupationsFilter } from '../OccupationsFilter'
 
 import {
   UsersListingContainer,
@@ -41,7 +42,12 @@ const ProfessionalListingUI = (props) => {
     onUserRedirect,
     handleSuccessUpdate,
     handleSuccessAddUser,
-    handleSuccessDeleteUser
+    handleSuccessDeleteUser,
+
+    occupationsState,
+    selectedOccupation,
+    handleSelectOccupation,
+    setSelectedUsers
   } = props
 
   const [, t] = useLanguage()
@@ -102,6 +108,11 @@ const ProfessionalListingUI = (props) => {
           handleChangeUserActiveState={handleChangeUserActiveState}
         />
         <ActionsContainer>
+          <OccupationsFilter
+            occupationsState={occupationsState}
+            selectedOccupation={selectedOccupation}
+            handleSelectOccupation={handleSelectOccupation}
+          />
           <ActionButtonsGroup>
             <Button
               borderRadius='8px'
@@ -134,6 +145,7 @@ const ProfessionalListingUI = (props) => {
           userDetailsId={openUser?.id || queryId}
           handleOpenUserDetails={handleOpenUserDetails}
           handleOpenUserAddForm={handleOpenUserAddForm}
+          setSelectedUsers={setSelectedUsers}
         />
       </UsersListingContainer>
 
@@ -143,6 +155,7 @@ const ProfessionalListingUI = (props) => {
           open={isOpenUserDetails}
           user={openUser}
           userId={openUser?.id || queryId}
+          occupations={occupationsState.occupations}
           onClose={() => handleBackRedirect()}
           handleSuccessUpdate={handleSuccessUpdate}
           handleSuccessDeleteUser={handleSuccessDeleteUser}

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

@@ -125,6 +125,7 @@ export const ScheduleContentWrapper = styled.div`
 export const ButtonWrapper = styled.div`
   position: sticky;
   top: 100%;
+  padding: 20px 0 30px 0;
 
   button {
     height: 44px;

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

@@ -72,7 +72,7 @@ export const UserDetailsUI = (props) => {
               {handleChangeActiveUser && (
                 <Switch
                   defaultChecked={userState?.user?.enabled || false}
-                  onChange={enabled => handleChangeActiveUser({ id: userState?.user?.id, enabled: enabled })}
+                  onChange={enabled => handleChangeActiveUser({ ...userState?.user, enabled: enabled })}
                 />
               )}
             </>

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

@@ -8,6 +8,7 @@ import { sortInputFields } from '../../../utils'
 import { Switch, Input, Button } from '../../../styles'
 import { Eye, EyeSlash } from 'react-bootstrap-icons'
 import { UserTypeSelector } from '../UserTypeSelector'
+import { OccupationSelector } from '../OccupationSelector'
 
 import {
   FormInput,
@@ -35,7 +36,9 @@ export const UserFormDetailsUI = (props) => {
     isDriversPage,
     handleChangeSwtich,
     handleChangeUserType,
-    isProfessional
+    isProfessional,
+    occupations,
+    handleChangeOccupation
   } = props
 
   const formMethods = useForm()
@@ -257,10 +260,16 @@ export const UserFormDetailsUI = (props) => {
                       autoComplete='off'
                     />
                   )}
-
                 </React.Fragment>
               )
             )}
+            {isProfessional && occupations.length > 0 && (
+              <OccupationSelector
+                occupationId={user?.occupation_id}
+                occupations={occupations}
+                handleChangeOccupation={handleChangeOccupation}
+              />
+            )}
             {!!showInputPhoneNumber && (
               <InputPhoneNumber
                 user={user}

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

@@ -39,6 +39,12 @@ export const UserTypeSelector = (props) => {
       content: <Option>{t('CALL_CENTER_AGENT', 'Call center agent')}</Option>,
       showOnSelected: <Option padding>{t('CALL_CENTER_AGENT', 'Call center agent')}</Option>,
       disabled: !isPrimary && defaultUserType === 9
+    },
+    {
+      value: 8,
+      content: <Option>{t('PROFESSIONAL', 'Professional')}</Option>,
+      showOnSelected: <Option padding>{t('PROFESSIONAL', 'Professional')}</Option>,
+      disabled: !isPrimary && defaultUserType === 8
     }
   ]
   const placeholder = <Option isWeight>{t('TYPE', 'Type')}</Option>

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

@@ -1,11 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage, useUtils } from 'ordering-components-admin-external'
-import MdCheckBoxOutlineBlank from '@meronex/icons/md/MdCheckBoxOutlineBlank'
-import MdCheckBox from '@meronex/icons/md/MdCheckBox'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 
-import { Envelope, Phone } from 'react-bootstrap-icons'
+import { Envelope, Phone, CheckSquareFill, Square } from 'react-bootstrap-icons'
 import { Switch } from '../../../styles'
 import { ConfirmAdmin, Pagination } from '../../Shared'
 
@@ -24,7 +22,8 @@ import {
   AddNewUserButton,
   UsersBottomContainer,
   VerifiedItemsContainer,
-  VerifiedItem
+  VerifiedItem,
+  AllCheckWrapper
 } from './styles'
 
 export const UsersList = (props) => {
@@ -37,13 +36,15 @@ export const UsersList = (props) => {
     selectedUsers,
     handleSelectedUsers,
     handleOpenUserDetails,
-    handleOpenUserAddForm
+    handleOpenUserAddForm,
+    setSelectedUsers
   } = props
 
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
 
   const [confirmAdmin, setConfirmAdmin] = useState({ open: false, handleOnConfirm: null })
+  const [isAllChecked, setIsAllChecked] = useState(false)
 
   const getUserType = (type) => {
     const userTypes = [
@@ -87,6 +88,26 @@ export const UsersList = (props) => {
     }
   }
 
+  const handleSelecteAllUser = () => {
+    const userIds = usersList.users?.reduce((ids, user) => [...ids, user.id], [])
+    if (!isAllChecked) {
+      setSelectedUsers([...selectedUsers, ...userIds])
+    } else {
+      const userIdsToDeleteSet = new Set(userIds)
+      const updatedSelectedOrderIds = selectedUsers.filter((name) => {
+        return !userIdsToDeleteSet.has(name)
+      })
+      setSelectedUsers(updatedSelectedOrderIds)
+    }
+  }
+
+  useEffect(() => {
+    if (usersList.loading) return
+    const userIds = usersList.users?.reduce((ids, user) => [...ids, user.id], [])
+    const _isAllChecked = userIds.every(elem => selectedUsers.includes(elem))
+    setIsAllChecked(_isAllChecked)
+  }, [usersList.users, selectedUsers])
+
   useEffect(() => {
     if (usersList.loading || usersList.users.length > 0 || paginationProps.totalPages <= 1) return
     if (paginationProps.currentPage !== paginationProps.totalPages) {
@@ -103,7 +124,22 @@ export const UsersList = (props) => {
           <UsersTable>
             <thead>
               <tr>
-                <th>{t('USER', 'User')}</th>
+                <th>
+                  <AllCheckWrapper>
+                    <CheckBoxWrapper
+                      className='all-checkbox'
+                      isChecked={!usersList?.loading && isAllChecked}
+                      onClick={() => handleSelecteAllUser()}
+                    >
+                      {(!usersList?.loading && isAllChecked) ? (
+                        <CheckSquareFill />
+                      ) : (
+                        <Square />
+                      )}
+                    </CheckBoxWrapper>
+                    {t('USER', 'User')}
+                  </AllCheckWrapper>
+                </th>
                 <th>{t('PHONE', 'Phone')}</th>
                 <th>{t('TYPE', 'Type')}</th>
                 <th className='amout-orders '>{t('AMOUNT_OF_ORDERS', 'Amount of orders')}</th>
@@ -159,9 +195,9 @@ export const UsersList = (props) => {
                           onClick={() => handleSelectedUsers(user.id)}
                         >
                           {selectedUsers.includes(user.id) ? (
-                            <MdCheckBox />
+                            <CheckSquareFill />
                           ) : (
-                            <MdCheckBoxOutlineBlank />
+                            <Square />
                           )}
                         </CheckBoxWrapper>
                         <WrapperImage>

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

@@ -136,7 +136,7 @@ export const CheckBoxWrapper = styled.div`
     margin-right: 10px;
   `}
   svg {
-    font-size: 24px;
+    font-size: 16px;
     color: #B1BCCC;
   }
 
@@ -144,7 +144,7 @@ export const CheckBoxWrapper = styled.div`
     svg {
       color: ${props => props.theme.colors?.primary};
     }
-`}
+  `}
 `
 
 export const InfoBlock = styled.div`
@@ -249,3 +249,8 @@ export const VerifiedItemsContainer = styled.div`
     }
   }
 `
+
+export const AllCheckWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { UsersList as UsersListController, useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, UsersList as UsersListController } from 'ordering-components-admin-external'
 import { UsersList } from '../UsersList'
 import { UsersListingHeader } from '../UsersListingHeader'
 import { UserTypeFilter } from '../UserTypeFilter'
@@ -42,7 +42,8 @@ const UsersListingUI = (props) => {
     onUserRedirect,
     handleSuccessUpdate,
     handleSuccessAddUser,
-    handleSuccessDeleteUser
+    handleSuccessDeleteUser,
+    setSelectedUsers
   } = props
 
   const [, t] = useLanguage()
@@ -139,6 +140,7 @@ const UsersListingUI = (props) => {
           userDetailsId={openUser?.id || queryId}
           handleOpenUserDetails={handleOpenUserDetails}
           handleOpenUserAddForm={handleOpenUserAddForm}
+          setSelectedUsers={setSelectedUsers}
         />
       </UsersListingContainer>