ordering-ui-admin-external 1.23.5 → 1.24.0

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;
+      }
+    `}
+  }
+`

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Schedule } from '../../../Shared'
+import { useLanguage } from 'ordering-components-admin-external'
+
+import {
+  ScheduleContainer,
+  ScheduleInnerContainer
+} from './styles'
+
+export const ScheduleForm = (props) => {
+  const {
+    handleChangeScheduleState
+  } = props
+
+  const [, t] = useLanguage()
+
+  return (
+    <>
+      <ScheduleContainer>
+        <h2>{t('SCHEDULE', 'Schedule')}</h2>
+        <ScheduleInnerContainer>
+          <Schedule
+            handleChangeScheduleState={handleChangeScheduleState}
+          />
+        </ScheduleInnerContainer>
+      </ScheduleContainer>
+    </>
+  )
+}

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+export const ScheduleContainer = styled.div`
+  > button {
+    margin: 30px 0 20px;
+    height: 44px;
+  }
+`
+
+export const ScheduleInnerContainer = styled.div`
+`

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Input } from '../../../../styles'
+import { useFormContext } from 'react-hook-form'
+
+import {
+  FormContainer,
+  InputWrapper
+} from './styles'
+
+export const WebhooksForm = (props) => {
+  const {
+    changesState,
+    handleChangesState
+  } = props
+
+  const [, t] = useLanguage()
+  const { register } = useFormContext()
+
+  return (
+    <>
+      <FormContainer>
+        <h2>{t('WEBHOOKS', 'Webhooks')}</h2>
+        <InputWrapper>
+          <label>{t('WEBHOOK_NEW_ORDER', 'Webhook new order')}</label>
+          <Input
+            name='webhook_new_order'
+            defaultValue={changesState?.webhook_new_order ?? ''}
+            onChange={e => handleChangesState('webhook_new_order', e.target.value)}
+            placeholder={t('WEBHOOK_NEW_ORDER', 'Webhook new order')}
+            ref={register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'Name is required'
+              ).replace('_attribute_', t('WEBHOOK_NEW_ORDER', 'Webhook new order'))
+            })}
+            autoComplete='off'
+          />
+        </InputWrapper>
+        <InputWrapper>
+          <label>{t('WEBHOOK_CANCEL_REQUEST', 'Webhook cancel request')}</label>
+          <Input
+            name='webhook_cancel_request'
+            defaultValue={changesState?.webhook_cancel_request ?? ''}
+            onChange={e => handleChangesState('webhook_cancel_request', e.target.value)}
+            placeholder={t('WEBHOOK_CANCEL_REQUEST', 'Webhook cancel request')}
+            ref={register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'Name is required'
+              ).replace('_attribute_', t('WEBHOOK_CANCEL_REQUEST', 'Webhook cancel request'))
+            })}
+            autoComplete='off'
+          />
+        </InputWrapper>
+        <InputWrapper>
+          <label>{t('WEBHOOK_ORDER_STATUS_CHANGED', 'Webhook order status changed')}</label>
+          <Input
+            name='webhook_order_status_changed'
+            defaultValue={changesState?.webhook_order_status_changed ?? ''}
+            onChange={e => handleChangesState('webhook_order_status_changed', e.target.value)}
+            placeholder={t('WEBHOOK_ORDER_STATUS_CHANGED', 'Webhook order status changed')}
+            autoComplete='off'
+          />
+        </InputWrapper>
+      </FormContainer>
+    </>
+  )
+}

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

@@ -0,0 +1,24 @@
+import styled 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;
+  }
+
+  div {
+    font-size: 14px;
+  }
+
+  .select {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    border: none;
+    background-color: ${props => props.theme.colors.secundary};
+  }
+`

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

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react'
+import {
+  useLanguage,
+  DriversCompanyDetails as DriversCompanyDetailsController
+} from 'ordering-components-admin-external'
+import { useForm, FormProvider } from 'react-hook-form'
+import { Alert } from '../../Shared'
+import { Button } from '../../../styles'
+import { GeneralForm } from './GeneralForm'
+import { ScheduleForm } from './ScheduleForm'
+import { WebhooksForm } from './WebhooksForm'
+
+import {
+  Container,
+  SectionContainer,
+  ButtonsContainer
+} from './styles'
+
+const DriversCompanyAddFormUI = (props) => {
+  const {
+    changesState,
+    actionState,
+    cleanActionState,
+    handleAddDriversCompany
+  } = props
+
+  const [, t] = useLanguage()
+  const formMethods = useForm()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const closeAlert = () => {
+    cleanActionState()
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    if (!actionState.loading && actionState.error) {
+      setAlertState({
+        open: true,
+        content: actionState.error || [t('ERROR')]
+      })
+    }
+  }, [actionState])
+
+  useEffect(() => {
+    if (Object.keys(formMethods.errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(formMethods.errors).map((error) => error.message)
+      })
+    }
+  }, [formMethods.errors])
+
+  const onSubmit = () => {
+    if (!(changesState?.timezone)) {
+      setAlertState({
+        open: true,
+        content: t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Name is required'
+        ).replace('_attribute_', t('TIMEZONE', 'Timezone'))
+      })
+      return
+    }
+    handleAddDriversCompany()
+  }
+
+  return (
+    <FormProvider {...formMethods}>
+      <Container onSubmit={formMethods.handleSubmit(onSubmit)}>
+        <SectionContainer>
+          <GeneralForm {...props} />
+        </SectionContainer>
+        <SectionContainer>
+          <ScheduleForm {...props} />
+        </SectionContainer>
+        <SectionContainer>
+          <WebhooksForm {...props} />
+        </SectionContainer>
+        <ButtonsContainer>
+          <Button
+            color='secundary'
+            onClick={() => props.onClose()}
+            type='button'
+          >
+            {t('CANCEL', 'Cancel')}
+          </Button>
+          <Button
+            borderRadius='8px'
+            color='primary'
+            type='submit'
+            disabled={Object.keys(changesState).length === 0}
+          >
+            {t('SAVE', 'Save')}
+          </Button>
+        </ButtonsContainer>
+      </Container>
+      <Alert
+        title={t('ERROR')}
+        content={alertState.content}
+        acceptText={t('ACCEPT')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </FormProvider>
+  )
+}
+
+export const DriversCompanyAddForm = (props) => {
+  const driversCompanyDetailsProps = {
+    ...props,
+    UIComponent: DriversCompanyAddFormUI
+  }
+  return <DriversCompanyDetailsController {...driversCompanyDetailsProps} />
+}

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

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+export const Container = styled.form`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0 0 29px 0;
+  }
+`
+
+export const SectionContainer = styled.div`
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 25px 38px;
+  margin: 25px 20px 34px 20px;
+
+  > div {
+    max-width: 1024px;
+  }
+`
+export const ButtonsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 20px;
+  position: sticky;
+  z-index: 100;
+  bottom: 0;
+  background-color: ${props => props.theme.colors.backgroundPage};
+
+  > button {
+    border-radius: 8px;
+    height: 44px;
+    &:first-child {
+      margin: 0 10px;
+    }
+  }
+`