ordering-ui-admin-external 1.23.4 → 1.24.0

package/src/components/CartRecovery/RecoveryActionAdd/index.js

@@ -0,0 +1,355 @@
+import React, { useState, useEffect } from 'react'
+import {
+  useLanguage,
+  RecoveryActionDetail as RecoveryActionDetailController
+} from 'ordering-components-admin-external'
+import { useForm } from 'react-hook-form'
+import {
+  Circle as UnCheckIcon,
+  RecordCircleFill as CheckIcon
+} from 'react-bootstrap-icons'
+import NumericInput from 'react-numeric-input'
+import { Button, Input, TextArea } from '../../../styles'
+import { Alert, HtmlEditor } from '../../Shared'
+import { Select } from '../../../styles/Select'
+
+import {
+  RecoveryActionAddContainer,
+  CardContainer,
+  ButtonsContainer,
+  InputWrapper,
+  LastTimeWrapper,
+  TypeWrapper,
+  ParentCheckBoxWrapper,
+  TimeBlock,
+  TimeContent,
+  DaysContent,
+  Option
+} from './styles'
+
+export const RecoveryActionAddUI = (props) => {
+  const {
+    onClose,
+    formState,
+    handleAddRecoveryAction,
+    handleChangeInput,
+    handleChangeItem,
+    actionState
+  } = props
+
+  const [, t] = useLanguage()
+  const { register, handleSubmit, errors } = useForm()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const [hours, setHours] = useState([])
+  const [minutes, setMinutes] = useState([])
+  const [seconds, setSeconds] = useState([])
+  const [curPreorderTime, setCurPreorderTime] = useState({ hour: '0', minute: '0', second: '0' })
+  const [curDayTime, setCurDayTime] = useState(0)
+  const [isTime, setIsTime] = useState(true)
+
+  const channelList = [
+    { value: 'email', content: <Option>{t('EMAIL', 'Email')}</Option> },
+    { value: 'sms', content: <Option>{t('SMS', 'SMS')}</Option> },
+    { value: 'notification', content: <Option>{t('PUSH_NOTIFICATION', 'Push notification')}</Option> }
+  ]
+
+  const setTimeList = () => {
+    const _hours = []
+    const _minutes = []
+    const _seconds = []
+    for (let i = 0; i < 24; i++) {
+      const text = (i < 10 ? '0' : ' ') + i
+      _hours.push({
+        text: text,
+        hour: i
+      })
+    }
+    for (let i = 0; i < 60; i++) {
+      const text = (i < 10 ? '0' : '') + i
+      _minutes.push({
+        text: text,
+        minute: i
+      })
+      _seconds.push({
+        text: text,
+        second: i
+      })
+    }
+    setHours(_hours)
+    setMinutes(_minutes)
+    setSeconds(_seconds)
+  }
+
+  const handleChangePreorderTime = (evt) => {
+    const type = evt.target.name
+    const value = evt.target.value
+    setCurPreorderTime({
+      ...curPreorderTime,
+      [type]: value
+    })
+    let preorderTime = 0
+    if (type === 'hour') preorderTime = parseInt(value) * 3600 + parseInt(curPreorderTime?.minute) * 60 + parseInt(curPreorderTime?.second)
+    else if (type === 'minute') preorderTime = parseInt(curPreorderTime?.hour) * 3600 + parseInt(value) * 60 + parseInt(curPreorderTime?.second)
+    else preorderTime = parseInt(curPreorderTime?.hour) * 3600 + parseInt(curPreorderTime?.minute) * 60 + parseInt(value)
+    handleChangeItem({ times: [preorderTime], launch_type: 'times' })
+  }
+
+  const handleChangeDay = (value) => {
+    setCurDayTime(value)
+    handleChangeItem({ times: [value * 24 * 3600], launch_type: 'times' })
+  }
+
+  const onSubmit = () => {
+    if (!formState.changes?.times?.[0]) {
+      setAlertState({
+        open: true,
+        content: [t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Name is required'
+        ).replace('_attribute_', t('TIME', 'Time'))]
+      })
+      return
+    }
+    if (!formState.changes?.channel) {
+      setAlertState({
+        open: true,
+        content: [t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Name is required'
+        ).replace('_attribute_', t('CHANNEL', 'Channel'))]
+      })
+      return
+    }
+    if (!formState.changes?.body) {
+      setAlertState({
+        open: true,
+        content: [t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Name is required'
+        ).replace('_attribute_', t('MESSAGE', 'Message'))]
+      })
+      return
+    }
+    handleAddRecoveryAction()
+  }
+
+  const handleSwitchTime = () => {
+    setIsTime(prev => !prev)
+  }
+
+  useEffect(() => {
+    setTimeList()
+  }, [])
+
+  useEffect(() => {
+    if (!actionState?.error || actionState.loading) return
+    setAlertState({
+      open: true,
+      content: actionState?.error
+    })
+  }, [actionState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(errors).map(error => error.message)
+      })
+    }
+  }, [errors])
+
+  return (
+    <>
+      <RecoveryActionAddContainer onSubmit={handleSubmit(onSubmit)}>
+        <CardContainer>
+          <h2>{t('GENERAL', 'General')}</h2>
+          <InputWrapper>
+            <label>{t('NAME', 'Name')}</label>
+            <Input
+              name='name'
+              type='text'
+              placeholder={t('NAME', 'name')}
+              value={formState?.changes?.name ?? ''}
+              ref={register({
+                required: t(
+                  'VALIDATION_ERROR_REQUIRED',
+                  'Name is required'
+                ).replace('_attribute_', t('NAME', 'Name'))
+              })}
+              onChange={handleChangeInput}
+              disabled={formState.loading}
+              autoComplete='off'
+            />
+          </InputWrapper>
+          <InputWrapper>
+            <label>{t('DESCRIPTION', 'Description')}</label>
+            <TextArea
+              placeholder={t('WRITE_LITTLE_DESCRIPTION', 'Write a little description')}
+              name='description'
+              rows={3}
+              value={
+                formState?.changes?.description ?? ''
+              }
+              onChange={handleChangeInput}
+              disabled={formState.loading}
+              autoComplete='off'
+            />
+          </InputWrapper>
+          <LastTimeWrapper>
+            <h3>{t('LAST_TIME_CART_WAS_OPENED', 'Last time the cart was opened')}</h3>
+            <TypeWrapper>
+              <ParentCheckBoxWrapper>
+                <div onClick={() => handleSwitchTime()}>
+                  {isTime ? <CheckIcon className='checked-icon' /> : <UnCheckIcon />}
+                  <span>{t('TIME', 'Time')}</span>
+                </div>
+              </ParentCheckBoxWrapper>
+              {isTime && (
+                <TimeContent>
+                  <TimeBlock>
+                    <select
+                      value={curPreorderTime?.hour}
+                      name='hour'
+                      onChange={handleChangePreorderTime}
+                    >
+                      {
+                        hours?.map((hour, i) => (
+                          <option value={hour.hour} key={i}>{hour.text}</option>
+                        ))
+                      }
+                    </select>
+                    <span>:</span>
+                    <select
+                      value={curPreorderTime?.minute}
+                      name='minute'
+                      onChange={handleChangePreorderTime}
+                    >
+                      {minutes?.map((minute, i) => (
+                        <option value={minute.minute} key={i}>{minute.text}</option>
+                      ))}
+                    </select>
+                    <span>:</span>
+                    <select
+                      value={curPreorderTime?.second}
+                      name='second'
+                      onChange={handleChangePreorderTime}
+                    >
+                      {seconds?.map((second, i) => (
+                        <option value={second.second} key={i}>{second.text}</option>
+                      ))}
+                    </select>
+                  </TimeBlock>
+                </TimeContent>
+              )}
+            </TypeWrapper>
+            <TypeWrapper>
+              <ParentCheckBoxWrapper>
+                <div onClick={() => handleSwitchTime()}>
+                  {!isTime ? <CheckIcon className='checked-icon' /> : <UnCheckIcon />}
+                  <span>{t('DAYS', 'Days')}</span>
+                </div>
+              </ParentCheckBoxWrapper>
+              {!isTime && (
+                <DaysContent>
+                  <NumericInput
+                    placeholder='00'
+                    onKeyPress={(e) => {
+                      if (!/^[0-9]$/.test(e.key)) {
+                        e.preventDefault()
+                      }
+                    }}
+                    value={curDayTime || ''}
+                    onChange={(value) => handleChangeDay(value)}
+                    min={0}
+                  />
+                </DaysContent>
+              )}
+            </TypeWrapper>
+          </LastTimeWrapper>
+        </CardContainer>
+        <CardContainer>
+          <h2>{t('NOTIFICATIONS', 'Notifications')}</h2>
+          <InputWrapper>
+            <label>{t('TITLE', 'Title')}</label>
+            <Input
+              name='title'
+              placeholder={t('TITLE', 'Title')}
+              defaultValue={formState?.changes?.title ?? ''}
+              onChange={handleChangeInput}
+              ref={register({
+                required: t(
+                  'VALIDATION_ERROR_REQUIRED',
+                  'Name is required'
+                ).replace('_attribute_', t('TITLE', 'Title'))
+              })}
+            />
+          </InputWrapper>
+          <InputWrapper>
+            <label>{t('CHANNEL', 'Channel')}</label>
+            <Select
+              placeholder={<Option>{t('SELECT_CHANNEL', 'Select a channel')}</Option>}
+              defaultValue={formState?.changes?.channel ?? ''}
+              options={channelList}
+              onChange={val => handleChangeItem({ channel: val })}
+            />
+          </InputWrapper>
+          <InputWrapper>
+            <label>{t('MESSAGE', 'Message')}</label>
+            {formState.changes?.channel === 'email' ? (
+              <HtmlEditor
+                handleChangeBody={val => handleChangeItem({ body: val })}
+              />
+            ) : (
+              <TextArea
+                name='body'
+                rows={3}
+                placeholder={t('WRITE_MESSAGE', 'Write a message')}
+                defaultValue={formState?.changes?.body ?? ''}
+                onChange={handleChangeInput}
+                ref={register({
+                  required: t(
+                    'VALIDATION_ERROR_REQUIRED',
+                    'Name is required'
+                  ).replace('_attribute_', t('MESSAGE', 'Message'))
+                })}
+              />
+            )}
+          </InputWrapper>
+        </CardContainer>
+        <ButtonsContainer>
+          <Button
+            color='secundary'
+            onClick={() => onClose()}
+          >
+            {t('CANCEL', 'Cancel')}
+          </Button>
+          <Button
+            color='primary'
+            type='submit'
+            disabled={Object.keys(formState.changes).length === 0 || formState.loading}
+          >
+            {t('SAVE', 'Save')}
+          </Button>
+        </ButtonsContainer>
+      </RecoveryActionAddContainer>
+      <Alert
+        title={t('RECOVERY_ACTIONS', 'Recovery actions')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const RecoveryActionAdd = (props) => {
+  const recoveryActionDetailProps = {
+    ...props,
+    UIComponent: RecoveryActionAddUI
+  }
+  return <RecoveryActionDetailController {...recoveryActionDetailProps} />
+}

package/src/components/CartRecovery/RecoveryGeneral/index.js

@@ -42,13 +42,15 @@ export const RecoveryGeneral = (props) => {
 
   const [hours, setHours] = useState([])
   const [minutes, setMinutes] = useState([])
-  const [curPreorderTime, setCurPreorderTime] = useState({})
+  const [seconds, setSeconds] = useState([])
+  const [curPreorderTime, setCurPreorderTime] = useState({ hour: '0', minute: '0', second: '0' })
   const [curDayTime, setCurDayTime] = useState(0)
   const [isTime, setIsTime] = useState(true)
 
   const setTimeList = () => {
     const _hours = []
     const _minutes = []
+    const _seconds = []
     for (let i = 0; i < 24; i++) {
       const text = (i < 10 ? '0' : ' ') + i
       _hours.push({
@@ -62,9 +64,14 @@ export const RecoveryGeneral = (props) => {
         text: text,
         minute: i
       })
+      _seconds.push({
+        text: text,
+        second: i
+      })
     }
     setHours(_hours)
     setMinutes(_minutes)
+    setSeconds(_seconds)
   }
 
   const handleChangePreorderTime = (evt) => {
@@ -75,8 +82,9 @@ export const RecoveryGeneral = (props) => {
       [type]: value
     })
     let preorderTime = 0
-    if (type === 'hour') preorderTime = parseInt(value) * 3600 + parseInt(curPreorderTime?.minute) * 60
-    else preorderTime = parseInt(curPreorderTime?.hour) * 3600 + parseInt(value) * 60
+    if (type === 'hour') preorderTime = parseInt(value) * 3600 + parseInt(curPreorderTime?.minute) * 60 + parseInt(curPreorderTime?.second)
+    else if (type === 'minute') preorderTime = parseInt(curPreorderTime?.hour) * 3600 + parseInt(value) * 60 + parseInt(curPreorderTime?.second)
+    else preorderTime = parseInt(curPreorderTime?.hour) * 3600 + parseInt(curPreorderTime?.minute) * 60 + parseInt(value)
     handleChangeItem({ times: [preorderTime], launch_type: 'times' })
   }
 
@@ -103,7 +111,8 @@ export const RecoveryGeneral = (props) => {
     setTimeList()
     setCurPreorderTime({
       hour: recoveryActionState?.action?.times ? (parseInt(recoveryActionState?.action?.times[0] / 3600)) : '0',
-      minute: recoveryActionState?.action?.times ? (recoveryActionState?.action?.times[0] % 3600 / 60) : '0'
+      minute: recoveryActionState?.action?.times ? (parseInt(recoveryActionState?.action?.times[0] % 3600 / 60)) : '0',
+      second: recoveryActionState?.action?.times ? (recoveryActionState?.action?.times[0] % 3600 % 60) : '0'
     })
     if (!recoveryActionState?.action?.times) return
 
@@ -231,6 +240,16 @@ export const RecoveryGeneral = (props) => {
                       <option value={minute.minute} key={i}>{minute.text}</option>
                     ))}
                   </select>
+                  <span>:</span>
+                  <select
+                    value={curPreorderTime?.second}
+                    name='second'
+                    onChange={handleChangePreorderTime}
+                  >
+                    {seconds?.map((second, i) => (
+                      <option value={second.second} key={i}>{second.text}</option>
+                    ))}
+                  </select>
                 </TimeBlock>
               </TimeContent>
             )}

package/src/components/Delivery/DriversCompaniesList/styles.js

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 
 export const DriversCompaniesContainer = styled.div`
-  margin-top: 20px;
+  padding: 20px;
 `
 
 export const TableWrapper = styled.div`

package/src/components/Delivery/DriversCompaniesListing/index.js

@@ -10,6 +10,7 @@ import { List as MenuIcon } from 'react-bootstrap-icons'
 import { Alert, Confirm, SearchBar, SideBar } from '../../Shared'
 import { DriversCompaniesList } from '../DriversCompaniesList'
 import { DriversCompanyDetailsForm } from '../DriversCompanyDetailsForm'
+import { DriversCompanyAddForm } from '../DriversCompanyAddForm'
 
 import {
   DriversCompaniesListContainer,
@@ -42,10 +43,15 @@ const DriversCompaniesListingUI = (props) => {
   const [curDriversCompanyId, setCurDriversCompanyId] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [isAddMode, setIsAddMode] = useState(false)
 
   const handleOpenDetails = (driverCompany, isInitialRender) => {
     setCurDriversCompany(driverCompany)
     setCurDriversCompanyId(driverCompany?.id)
+    if (!driverCompany) {
+      setIsAddMode(true)
+      return
+    }
     setOpenDetails(true)
     if (!isInitialRender) {
       history.replace(`${location.pathname}?id=${driverCompany?.id}`)
@@ -75,6 +81,7 @@ const DriversCompaniesListingUI = (props) => {
     setCurDriversCompany(null)
     setCurDriversCompanyId(null)
     setOpenDetails(false)
+    setIsAddMode(false)
     history.replace(`${location.pathname}`)
   }
 
@@ -124,18 +131,28 @@ const DriversCompaniesListingUI = (props) => {
           />
         </HeaderRightContainer>
       </HeaderContainer>
-      <DriversCompaniesList
-        driversCompaniesState={driversCompaniesState}
-        searchValue={searchValue}
-        handleOpenDetails={handleOpenDetails}
-        curDriversCompany={curDriversCompany}
-        handleUpdateDriversCompany={handleUpdateDriversCompany}
-        handleDeleteDriversCompany={handleDeleteDriversCompany}
-        handleSelectCompany={handleSelectCompany}
-        selectedCompanyList={selectedCompanyList}
-        handleAllSelectCompany={handleAllSelectCompany}
-      />
-      {openDetails && (
+      {!isAddMode ? (
+        <DriversCompaniesList
+          driversCompaniesState={driversCompaniesState}
+          searchValue={searchValue}
+          handleOpenDetails={handleOpenDetails}
+          curDriversCompany={curDriversCompany}
+          handleUpdateDriversCompany={handleUpdateDriversCompany}
+          handleDeleteDriversCompany={handleDeleteDriversCompany}
+          handleSelectCompany={handleSelectCompany}
+          selectedCompanyList={selectedCompanyList}
+          handleAllSelectCompany={handleAllSelectCompany}
+        />
+      ) : (
+        <DriversCompanyAddForm
+          driversCompaniesState={driversCompaniesState}
+          setDriversCompaniesState={setDriversCompaniesState}
+          driversCompany={curDriversCompany}
+          driversCompanyId={curDriversCompanyId}
+          onClose={() => handleCloseDetails()}
+        />
+      )}
+      {openDetails && !isAddMode && (
         <SideBar
           sidebarId='city-details'
           defaultSideBarWidth={550}

package/src/components/Delivery/DriversCompaniesListing/styles.js

@@ -2,7 +2,6 @@ import styled, { css } from 'styled-components'
 
 export const DriversCompaniesListContainer = styled.div`
   flex: 1;
-  padding: 20px;
   box-sizing: border-box;
   transition: all 0.5s;
   max-height: 100vh;
@@ -12,6 +11,7 @@ export const DriversCompaniesListContainer = styled.div`
 export const HeaderContainer = styled.div`
   display: flex;
   flex-direction: column;
+  padding: 20px 20px 0 20px;
 
   @media (min-width: 768px) {
     flex-direction: row;

package/src/components/Delivery/DriversCompanyAddForm/GeneralForm/index.js

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Input, DefaultSelect } from '../../../../styles'
+import { timezones } from '../../../../config/constants'
+import { useFormContext } from 'react-hook-form'
+
+import {
+  FormContainer,
+  InputWrapper
+} from './styles'
+
+export const GeneralForm = (props) => {
+  const {
+    changesState,
+    handleChangesState
+  } = props
+
+  const [, t] = useLanguage()
+  const { register } = useFormContext()
+  const [timezoneSearchValue, setTimezoneSearchValue] = useState('')
+  const [timezonesOptions, setTimezonesOptions] = useState([])
+
+  const priorityOptions = [
+    { value: -1, content: t('LOW', 'Low') },
+    { value: 0, content: t('NORMAL', 'Normal') },
+    { value: 1, content: t('HIGH', 'High') },
+    { value: 2, content: t('URGENT', 'Urgent') }
+  ]
+
+  useEffect(() => {
+    const _timezonesOptions = timezones
+      .filter(timezone => timezone.toLocaleLowerCase().includes(timezoneSearchValue.toLocaleLowerCase()))
+      .map(timezone => {
+        return {
+          value: timezone,
+          content: timezone
+        }
+      })
+    setTimezonesOptions(_timezonesOptions)
+  }, [timezoneSearchValue])
+
+  return (
+    <>
+      <FormContainer>
+        <h2>{t('GENERAL', 'General')}</h2>
+        <InputWrapper>
+          <label>{t('NAME', 'Name')}</label>
+          <Input
+            name='name'
+            defaultValue={changesState?.name ?? ''}
+            onChange={e => handleChangesState('name', e.target.value)}
+            placeholder={t('NAME', 'Name')}
+            ref={register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'Name is required'
+              ).replace('_attribute_', t('NAME', 'Name'))
+            })}
+            autoComplete='off'
+          />
+        </InputWrapper>
+        <InputWrapper>
+          <label>{t('LIMIT', 'Limit')}</label>
+          <Input
+            name='limit'
+            defaultValue={changesState?.limit ?? ''}
+            onChange={e => handleChangesState('limit', e.target.value)}
+            placeholder={t('LIMIT', 'Limit')}
+            autoComplete='off'
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+          />
+        </InputWrapper>
+        <InputWrapper>
+          <label>{t('PRIORITY', 'Priority')}</label>
+          <DefaultSelect
+            placeholder={t('SELECT_PRIORITY', 'Select priority')}
+            defaultValue={changesState?.priority}
+            options={priorityOptions}
+            onChange={val => handleChangesState('priority', val)}
+          />
+        </InputWrapper>
+        <InputWrapper isTimezone>
+          <label>{t('TIMEZONE', 'Timezone')}</label>
+          <DefaultSelect
+            placeholder={t('SELECT_TIMEZONE', 'Select a timezone')}
+            defaultValue={changesState?.timezone}
+            options={timezonesOptions}
+            onChange={val => handleChangesState('timezone', val)}
+            optionInnerMaxHeight='60vh'
+            isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            searchValue={timezoneSearchValue}
+            handleChangeSearch={setTimezoneSearchValue}
+          />
+        </InputWrapper>
+        <InputWrapper>
+          <label>{t('ADDRESS', 'Address')}</label>
+          <Input
+            name='address'
+            defaultValue={changesState?.address ?? ''}
+            placeholder={t('ADDRESS', 'Address')}
+            onChange={e => handleChangesState('address', e.target.value)}
+            ref={register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'Name is required'
+              ).replace('_attribute_', t('ADDRESS', 'Address'))
+            })}
+            autoComplete='off'
+          />
+        </InputWrapper>
+      </FormContainer>
+    </>
+  )
+}

package/src/components/Delivery/DriversCompanyAddForm/GeneralForm/styles.js

@@ -0,0 +1,32 @@
+import styled, { css } from 'styled-components'
+
+export const FormContainer = styled.div``
+
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 35px;
+
+  label {
+    font-size: 14px;
+  }
+
+  .select {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    border: none;
+    background-color: ${props => props.theme.colors.secundary};
+    font-size: 14px;
+
+    ${({ isTimezone }) => isTimezone && css`
+      > div:first-child {
+        > div {
+          overflow: hidden;
+        }
+      }
+      .list-wrapper {
+        font-size: 12px;
+      }
+    `}
+  }
+`