ordering-ui-admin-external 1.9.0 → 1.11.0

package/src/components/Stores/UploadMenuGuide/styles.js

@@ -0,0 +1,120 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  > h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 8px;
+  }
+  > p {
+    width: 100%;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    text-align: center;
+    margin: 0 auto;
+  }
+
+  @media (min-width: 768px) {
+    > p {
+      width: 80%;
+    }
+  }
+`
+
+export const FileUploadBox = styled.div`
+  height: 210px;
+  margin-top: 35px;
+  border-radius: 8px;
+  background-color: ${props => props.theme.colors.borderColor};
+  position: relative;
+  overflow: hidden;
+  cursor: -webkit-grab;
+  cursor: grab;
+  img, div {
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+  }
+  img {
+    object-fit: contain;
+  }
+`
+
+export const UploadIconBox = styled.div`
+  position: absolute;
+  top: 0px;
+  > div {
+    color: ${props => props.theme.colors.secundaryLight};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    svg {
+      width: 43px;
+      font-size: 40px;
+    }
+    p {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      margin-bottom: 0;
+      margin-top: 8px;
+    }
+  }
+`
+
+export const Or = styled.h6`
+  text-align: center;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  margin: 27px 0;
+`
+
+export const FormControl = styled.div`
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 13px;
+  }
+  input {
+    width: 100%;
+    border-radius: 8px;
+    height: 44px;
+  }
+`
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: 30px;
+  > button {
+    width: 100%;
+    margin-top: 15px;
+    height: 44px;
+    border-radius: 8px;
+  }
+
+  @media (min-width: 576px) {
+    justify-content: space-between;
+    flex-direction: row;
+    > button {
+      width: 48%;
+    }
+  }
+`
+
+export const PdfIconBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    font-size: 150px;
+    color: ${props => props.theme.colors.danger};
+  }
+`

package/src/components/Stores/index.js

@@ -100,6 +100,11 @@ import { PaymentOptionMethods } from './PaymentOptionMethods'
 import { BusinessPublishing } from './BusinessPublishing'
 import { ServiceDetail } from './ServiceDetail'
 import { ProductVideos } from './ProductVideos'
+import { ProductStartGuide } from './ProductStartGuide'
+import { ImportersButton } from './ImportersButton'
+import { RestaurantSelectGuide } from './RestaurantSelectGuide'
+import { ProductStep } from './ProductStep'
+import { BusinessSync } from './BusinessSync'
 
 export {
   BusinessAdd,
@@ -203,5 +208,10 @@ export {
   PaymentOptionMethods,
   BusinessPublishing,
   ServiceDetail,
-  ProductVideos
+  ProductVideos,
+  ProductStartGuide,
+  ImportersButton,
+  RestaurantSelectGuide,
+  ProductStep,
+  BusinessSync
 }

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

@@ -1,37 +1,71 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, OccupationSelector as OccupationSelectorController } from 'ordering-components-admin-external'
 import { Select } from '../../../styles/Select'
 import { SelectWrapper, Option } from './styles'
 
-export const OccupationSelector = (props) => {
+const OccupationSelectorUI = (props) => {
   const {
     occupationId,
     occupations,
-    handleChangeOccupation
+    handleChangeOccupation,
+    handleAddOccupation,
+    actionState
   } = props
 
   const [, t] = useLanguage()
   const [options, setOptions] = useState([])
+  const [searchValue, setSearchValue] = useState('')
+
+  const highlightTextConverter = (text) => {
+    if (!searchValue) return text
+    const startIndex = text.toLowerCase().indexOf(searchValue.toLowerCase())
+    const endIndex = text.toLowerCase().indexOf(searchValue.toLowerCase()) + searchValue.length
+    const result = <span>{text.substring(0, startIndex)}<b>{text.substring(startIndex, endIndex)}</b>{text.substring(endIndex, text.length)}</span>
+    return result
+  }
 
   useEffect(() => {
     if (!occupations.length) return
-    const _occupationList = occupations.map(occupation => {
+    const _occupationList = occupations.filter(item => item.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())).map(occupation => {
       return {
         value: occupation.id,
-        content: <Option>{occupation.name}</Option>
+        content: highlightTextConverter(occupation.name),
+        showOnSelected: occupation.name
       }
     })
     setOptions(_occupationList)
-  }, [occupations])
+  }, [occupations, searchValue])
 
   return (
     <SelectWrapper>
       <Select
-        placeholder={<Option>{t('SELECT_OCCUPATION', 'Select occupation')}</Option>}
-        defaultValue={occupationId}
+        placeholder={<Option>{actionState.loading ? t('LOADING', '') : t('SELECT_OCCUPATION', 'Select occupation')}</Option>}
+        defaultValue={actionState.loading ? null : occupationId}
         options={options}
         onChange={handleChangeOccupation}
+
+        isShowSearchBar
+        searchBarIsCustomLayout
+        searchBarIsNotLazyLoad
+        searchBarPlaceholder={t('SEARCH', 'Search')}
+        searchValue={searchValue}
+        handleChangeSearch={val => setSearchValue(val)}
+
+        isShowCustomOption={!!searchValue}
+        customOptionTitle={<>+ {t('CREATE_OCCUPATION_FOR', 'Create occuption for')} '{searchValue}'</>}
+        handleCustomOptionClick={() => {
+          handleAddOccupation({ name: searchValue })
+          setSearchValue('')
+        }}
       />
     </SelectWrapper>
   )
 }
+
+export const OccupationSelector = (props) => {
+  const occupationSelectorProps = {
+    ...props,
+    UIComponent: OccupationSelectorUI
+  }
+  return <OccupationSelectorController {...occupationSelectorProps} />
+}

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

@@ -9,6 +9,21 @@ export const SelectWrapper = styled.div`
       border: 1px solid ${props => props.theme.colors.borderColor};
       padding: 6px 0;
       font-size: 14px;
+
+      .header {
+        font-size: 14px;
+        padding: 4px 0;
+      }
+    }
+
+    .list .option {
+      font-size: 14px;
+      padding: 10px;
+    }
+
+    .custom-option {
+      border-top: 1px solid ${props => props.theme.colors.borderColor};
+      color: ${props => props.theme.colors.primary};
     }
   }
 `

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage } from 'ordering-components-admin-external'
+import { DragScroll } from '../../Shared'
 import { Button } from '../../../styles'
 import {
   Container,
@@ -18,33 +19,35 @@ export const OccupationsFilter = (props) => {
 
   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 => (
+      <DragScroll>
+        {occupationsState.loading ? (
+          [...Array(3).keys()].map(i =>
+            <SkeletonWrapper key={i}>
+              <Skeleton />
+            </SkeletonWrapper>
+          )
+        ) : (
+          occupationsState.occupations.length > 0 && (
+            <>
               <Button
-                key={occupation.id}
-                color={selectedOccupation === occupation.id ? 'primary' : 'secundaryDark'}
-                onClick={() => handleSelectOccupation(occupation.id)}
+                color={selectedOccupation ? 'secundaryDark' : 'primary'}
+                onClick={() => handleSelectOccupation(null)}
               >
-                {occupation.name}
+                {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>
+              ))}
+            </>
+          )
+        )}
+      </DragScroll>
     </Container>
   )
 }

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

@@ -1,10 +1,10 @@
 import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
-  display: flex;
-  align-items: center;
+  flex: 1;
+  width: 100%;
 
-  > button {
+  button {
     ${props => props.theme?.rtl ? css`
       margin-left: 10px;
     ` : css`
@@ -13,6 +13,15 @@ export const Container = styled.div`
     font-size: 12px;
     white-space: nowrap;
   }
+
+  @media (min-width: 992px) {
+    width: 50%;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 30px;
+    ` : css`
+      margin-right: 30px;
+    `}
+  }
 `
 export const SkeletonWrapper = styled.span`
   height: 34px;

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

@@ -13,6 +13,7 @@ import { sortInputFields, bytesConverter } from '../../../utils'
 import Skeleton from 'react-loading-skeleton'
 import BiImage from '@meronex/icons/bi/BiImage'
 import { XLg } from 'react-bootstrap-icons'
+import { OccupationSelector } from '../OccupationSelector'
 
 import {
   FormContainer,
@@ -42,7 +43,8 @@ const ProfessionalAddFormUI = (props) => {
     handlechangeImage,
     handleChangeSwtich,
     onClose,
-    isService
+    isService,
+    occupations
   } = props
   const formMethods = useForm()
   const [, t] = useLanguage()
@@ -183,6 +185,28 @@ const ProfessionalAddFormUI = (props) => {
     })
   }, [formMethods])
 
+  useEffect(() => {
+    const schedule = []
+    for (var i = 0; i < 7; i++) {
+      schedule.push({
+        enabled: true,
+        lapses: [
+          {
+            open: {
+              hour: 0,
+              minute: 0
+            },
+            close: {
+              hour: 23,
+              minute: 59
+            }
+          }
+        ]
+      })
+    }
+    handleChangeInput({ target: { name: 'schedule', value: schedule } })
+  }, [])
+
   return (
     <FormContainer>
       <FormInput
@@ -221,6 +245,13 @@ const ProfessionalAddFormUI = (props) => {
             </ExamineClick>
           </Image>
         </UserImage>
+        <InputWrapper>
+          <label>{t('SPECIALIST', 'Specialist')}</label>
+          <OccupationSelector
+            occupations={occupations}
+            handleChangeOccupation={id => handleChangeInput({ target: { name: 'occupation_id', value: id } })}
+          />
+        </InputWrapper>
         {!validationFields?.loading ? (
           <>
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
@@ -292,6 +323,7 @@ const ProfessionalAddFormUI = (props) => {
                       message: t('VALIDATION_ERROR_PASSWORD_MIN_STRING', 'The Password must be at least 8 characters.').replace('_attribute_', t('PASSWORD', 'Password')).replace('_min_', 8)
                     }
                   })}
+                  autoComplete='new-password'
                 />
               </InputWrapper>
             )}

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

@@ -122,9 +122,11 @@ export const ProfessionalDetailUI = (props) => {
               <Dropdown.Item onClick={() => handleOpenExtra('personalization')}>
                 {t('PERSONALIZATION', 'Personalization')}
               </Dropdown.Item>
-              <Dropdown.Item onClick={() => onDeleteCustomer()}>
-                {t('DELETE', 'Delete')}
-              </Dropdown.Item>
+              {adminUserState?.user?.level === 0 && (
+                <Dropdown.Item className='delete' onClick={() => onDeleteCustomer()}>
+                  {t('DELETE', 'Delete')}
+                </Dropdown.Item>
+              )}
             </DropdownButton>
           </ActionSelectorWrapper>
         )}

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

@@ -80,7 +80,7 @@ export const ActionSelectorWrapper = styled.div`
           background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
         }
       }
-      .dropdown-item:last-child {
+      .dropdown-item.delete {
         color: #E63757;
       }
     }

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

@@ -321,6 +321,7 @@ export const ProfessionalList = (props) => {
                 totalPages={paginationProps.totalPages}
                 handleChangePage={handleChangePage}
                 handleChangePageSize={handleChangePageSize}
+                defaultPageSize={paginationProps?.pageSize}
               />
             </WrapperPagination>
           )}

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

@@ -202,6 +202,7 @@ export const UsersBottomContainer = styled.div`
   justify-content: space-between;
   align-items: center;
   margin-top: 10px;
+  margin-bottom: 37px;
 `
 
 export const VerifiedItem = styled.span`

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { useLanguage, UsersList as UsersListController } from 'ordering-components-admin-external'
+import { useLanguage, useConfig, UsersList as UsersListController } from 'ordering-components-admin-external'
 import { ProfessionalList } from '../ProfessionalList'
 import { UsersListingHeader } from '../UsersListingHeader'
 import { UserActiveStateFilter } from '../UserActiveStateFilter'
@@ -15,7 +15,8 @@ import { OccupationsFilter } from '../OccupationsFilter'
 import {
   UsersListingContainer,
   ActionsContainer,
-  ActionButtonsGroup
+  ActionButtonsGroup,
+  WarningText
 } from './styles'
 
 const ProfessionalListingUI = (props) => {
@@ -51,11 +52,14 @@ const ProfessionalListingUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+
   const query = new URLSearchParams(useLocation().search)
   const [queryId, setQueryId] = useState(null)
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
   const [openUser, setOpenUser] = useState(null)
   const [openUserAddForm, setOpenUserAddForm] = useState(false)
+  const isEnabledAppointmentsFeature = configs?.appointments?.value
 
   const handleBackRedirect = () => {
     setIsOpenUserDetails(false)
@@ -98,55 +102,62 @@ const ProfessionalListingUI = (props) => {
   return (
     <>
       <UsersListingContainer>
-        <UsersListingHeader
-          title={headerTitle}
-          searchValue={searchValue}
-          onSearch={onSearch}
-        />
-        <UserActiveStateFilter
-          selectedUserActiveState={selectedUserActiveState}
-          handleChangeUserActiveState={handleChangeUserActiveState}
-        />
-        <ActionsContainer>
-          <OccupationsFilter
-            occupationsState={occupationsState}
-            selectedOccupation={selectedOccupation}
-            handleSelectOccupation={handleSelectOccupation}
-          />
-          <ActionButtonsGroup>
-            <Button
-              borderRadius='8px'
-              color='lightPrimary'
-              onClick={() => handleOpenUserAddForm()}
-            >
-              {t('ADD_PROFESSIONAL', 'Add professional')}
-            </Button>
-            <UsersExportCSV
-              defaultUserTypesSelected={defaultUserTypesSelected}
-              disabledActiveStateCondition={disabledActiveStateCondition}
-              userTypesSelected={userTypesSelected}
+        {isEnabledAppointmentsFeature ? (
+          <>
+            <UsersListingHeader
+              isProfessionals
+              title={headerTitle}
+              searchValue={searchValue}
+              onSearch={onSearch}
+            />
+            <UserActiveStateFilter
               selectedUserActiveState={selectedUserActiveState}
+              handleChangeUserActiveState={handleChangeUserActiveState}
             />
-            <UsersDeleteButton
+            <ActionsContainer>
+              <OccupationsFilter
+                occupationsState={occupationsState}
+                selectedOccupation={selectedOccupation}
+                handleSelectOccupation={handleSelectOccupation}
+              />
+              <ActionButtonsGroup>
+                <Button
+                  borderRadius='8px'
+                  color='lightPrimary'
+                  onClick={() => handleOpenUserAddForm()}
+                >
+                  {t('ADD_PROFESSIONAL', 'Add professional')}
+                </Button>
+                <UsersExportCSV
+                  defaultUserTypesSelected={defaultUserTypesSelected}
+                  disabledActiveStateCondition={disabledActiveStateCondition}
+                  userTypesSelected={userTypesSelected}
+                  selectedUserActiveState={selectedUserActiveState}
+                />
+                <UsersDeleteButton
+                  selectedUsers={selectedUsers}
+                  deleteUsersActionState={deleteUsersActionState}
+                  handleDeleteSeveralUsers={handleDeleteSeveralUsers}
+                />
+              </ActionButtonsGroup>
+            </ActionsContainer>
+            <ProfessionalList
+              usersList={usersList}
+              getUsers={getUsers}
+              paginationProps={paginationProps}
+              paginationDetail={paginationDetail}
+              handleChangeActiveUser={handleChangeActiveUser}
               selectedUsers={selectedUsers}
-              deleteUsersActionState={deleteUsersActionState}
-              handleDeleteSeveralUsers={handleDeleteSeveralUsers}
+              handleSelectedUsers={handleSelectedUsers}
+              userDetailsId={openUser?.id || queryId}
+              handleOpenUserDetails={handleOpenUserDetails}
+              handleOpenUserAddForm={handleOpenUserAddForm}
+              setSelectedUsers={setSelectedUsers}
             />
-          </ActionButtonsGroup>
-        </ActionsContainer>
-        <ProfessionalList
-          usersList={usersList}
-          getUsers={getUsers}
-          paginationProps={paginationProps}
-          paginationDetail={paginationDetail}
-          handleChangeActiveUser={handleChangeActiveUser}
-          selectedUsers={selectedUsers}
-          handleSelectedUsers={handleSelectedUsers}
-          userDetailsId={openUser?.id || queryId}
-          handleOpenUserDetails={handleOpenUserDetails}
-          handleOpenUserAddForm={handleOpenUserAddForm}
-          setSelectedUsers={setSelectedUsers}
-        />
+          </>
+        ) : (
+          <WarningText>{t('APPOINTMENTS_FEATURE_NOT_ENABLED', 'The appointments feature is not enabled.')}</WarningText>
+        )}
       </UsersListingContainer>
 
       {isOpenUserDetails && (
@@ -169,6 +180,7 @@ const ProfessionalListingUI = (props) => {
           onClose={() => setOpenUserAddForm(false)}
         >
           <ProfessionalAddForm
+            occupations={occupationsState.occupations}
             handleSuccessAdd={handleSuccessAddUser}
             onClose={() => setOpenUserAddForm(false)}
           />
@@ -181,6 +193,7 @@ const ProfessionalListingUI = (props) => {
 export const ProfessionalListing = (props) => {
   const usersListingProps = {
     ...props,
+    isProfessional: true,
     UIComponent: ProfessionalListingUI,
     isSearchByUserEmail: true,
     isSearchByUserPhone: true,

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

@@ -44,3 +44,7 @@ export const ActionButtonsGroup = styled.div`
     margin-top: 0;
   }
 `
+export const WarningText = styled.p`
+  margin-top: 30px;
+  color: ${props => props.theme.colors.danger};
+`

package/src/components/Users/ProfessionalSchedule/Schedule/index.js

@@ -0,0 +1,32 @@
+import React, { memo } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Schedule as ScheduleController } from '../../../Shared'
+import {
+  ScheduleWrapper,
+  ScheduleContentWrapper
+} from '../styles'
+
+function SchedulePropsAreEqual (prevProps, nextProps) {
+  return JSON.stringify(prevProps.scheduleList) === JSON.stringify(nextProps.scheduleList)
+}
+
+export const Schedule = memo((props) => {
+  const {
+    handleChangeScheduleState,
+    scheduleList
+  } = props
+
+  const [, t] = useLanguage()
+
+  return (
+    <ScheduleWrapper>
+      <h1>{t('SCHEDULE', 'Schedule')}</h1>
+      <ScheduleContentWrapper>
+        <ScheduleController
+          scheduleList={scheduleList}
+          handleChangeScheduleState={val => handleChangeScheduleState(val)}
+        />
+      </ScheduleContentWrapper>
+    </ScheduleWrapper>
+  )
+}, SchedulePropsAreEqual)