ordering-ui-admin-external 1.10.0 → 1.11.1

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

@@ -126,6 +126,7 @@ export const ActionButtons = styled.div`
   top: 100%;
   display: flex;
   align-items: center;
+  margin-top: 50px;
 
   > button {
     height: 42px;

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

@@ -0,0 +1,152 @@
+import React, { useState, useRef } from 'react'
+import { useLanguage, ExamineClick, DragAndDrop, UploadMenu } from 'ordering-components-admin-external'
+import { CloudUploadFill, FileEarmarkPdfFill } from 'react-bootstrap-icons'
+import { Button, Input } from '../../../styles'
+import { bytesConverter } from '../../../utils'
+import { Alert } from '../../Shared'
+import {
+  Container,
+  FileUploadBox,
+  UploadIconBox,
+  Or,
+  FormControl,
+  ButtonGroup,
+  PdfIconBox
+} from './styles'
+
+const UploadMenuGuideUI = (props) => {
+  const { handleBack, formState, changeFormState, handleUploadMenu } = props
+
+  const [, t] = useLanguage()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const fileRef = useRef(null)
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleFiles = (files) => {
+    if (files.length === 1) {
+      const type = files[0].type
+      if (type?.split('/')[0] !== 'image' && type !== 'application/pdf') {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_ONLY_IMAGES_OR_PDF', 'Only images or pdf can be accepted')]
+        })
+        return
+      }
+
+      if (bytesConverter(files[0]?.size) > 2048) {
+        setAlertState({
+          open: true,
+          content: [t('FILE_MAXIMUM_SIZE', 'The maximum file size is 2 megabytes')]
+        })
+        return
+      }
+      const reader = new window.FileReader()
+      reader.readAsDataURL(files[0])
+      reader.onload = () => {
+        changeFormState({ file: reader.result, type: type === 'application/pdf' ? 'pdf' : 'image' })
+      }
+      reader.onerror = error => console.log(error)
+    }
+  }
+
+  const handleSendRequest = () => {
+    if (formState?.changes?.file || formState?.changes?.url) {
+      handleUploadMenu()
+      return
+    }
+    if (!formState?.changes?.file) {
+      setAlertState({
+        open: true,
+        content: t('IMAGE_OR_PDF_IS_REQUIRED', 'Image or pdf file is required!')
+      })
+      return
+    }
+    if (!formState?.changes?.url) {
+      setAlertState({
+        open: true,
+        content: t('URL_IS_REQUIRED', 'URL is required')
+      })
+    }
+  }
+
+  return (
+    <>
+      <Container>
+        <h2>{t('UPLOAD_YOUR_MENU', 'Upload your menu')}</h2>
+        <p>{t('UPLOAD_YOUR_MENU_DESC', 'Click to upload your menu (PDF or image file) or share your menu link (For website or another online ordering system)')}</p>
+        <FileUploadBox onClick={() => fileRef.current.click()}>
+          <ExamineClick
+            onFiles={files => handleFiles(files)}
+            childRef={(e) => { fileRef.current = e }}
+            accept='image/png, image/jpeg, image/jpg, application/pdf'
+          >
+            <DragAndDrop
+              onDrop={dataTransfer => handleFiles(dataTransfer.files)}
+              accept='image/png, image/jpeg, image/jpg, application/pdf'
+            >
+              {formState?.changes?.file && (
+                formState?.changes?.type === 'pdf'
+                  ? <PdfIconBox><FileEarmarkPdfFill /></PdfIconBox>
+                  : <img src={formState?.changes?.file} alt='file' loading='lazy' />
+              )}
+              <UploadIconBox>
+                <div>
+                  <CloudUploadFill />
+                  <p>{t('DRAG_AND_DROP', 'Drag and drop')}</p>
+                </div>
+              </UploadIconBox>
+            </DragAndDrop>
+          </ExamineClick>
+        </FileUploadBox>
+        <Or>{t('OR', 'Or')}</Or>
+        <FormControl>
+          <label>{t('SHARE_YOUR_MENU_LINK', 'Share your menu link (From your webiste or another online ordering system)')}</label>
+          <Input
+            placeholder={t('URL', 'URL')}
+            defaultValue={formState?.changes?.url}
+            onChange={(e) => changeFormState({ url: e.target.value })}
+          />
+        </FormControl>
+        <ButtonGroup>
+          <Button
+            color='primary'
+            outline
+            onClick={handleBack}
+          >
+            {t('BACK', 'Back')}
+          </Button>
+          <Button
+            color='primary'
+            onClick={() => handleSendRequest()}
+          >
+            {t('SEND_REQUEST', 'Send Request')}
+          </Button>
+        </ButtonGroup>
+      </Container>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const UploadMenuGuide = (props) => {
+  const uploadMenuGuideProps = {
+    ...props,
+    UIComponent: UploadMenuGuideUI
+  }
+  return <UploadMenu {...uploadMenuGuideProps} />
+}

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

@@ -104,6 +104,7 @@ import { ProductStartGuide } from './ProductStartGuide'
 import { ImportersButton } from './ImportersButton'
 import { RestaurantSelectGuide } from './RestaurantSelectGuide'
 import { ProductStep } from './ProductStep'
+import { BusinessSync } from './BusinessSync'
 
 export {
   BusinessAdd,
@@ -211,5 +212,6 @@ export {
   ProductStartGuide,
   ImportersButton,
   RestaurantSelectGuide,
-  ProductStep
+  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

@@ -185,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

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/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`