ordering-ui-admin-external 1.25.0 → 1.26.0

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

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+export const Container = 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: 11px 0;
+    border: none;
+    background-color: ${props => props.theme.colors.secundary};
+  }
+  .list {
+    .options {
+      > div {
+        > div {
+          padding: 7px 10px;
+        }
+      }
+    }
+  }
+`

package/src/components/Delivery/DriversGroupAddForm/PaymethodsForm/index.js

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { SearchBar } from '../../../Shared'
+import { Button, Checkbox } from '../../../../styles'
+
+import {
+  Container,
+  SearchBarWrapper,
+  ButtonGroup,
+  GroupsContainer,
+  GroupWrapper
+} from './styles'
+
+export const PaymethodsForm = (props) => {
+  const {
+    paymethods,
+    actionState,
+    selectedPaymethodIds,
+    handleSelectPaymethod,
+    handleSelectAllPaymethod
+  } = props
+  const [, t] = useLanguage()
+  const [searchValue, setSearchValue] = useState(null)
+  const [filteredPaymethods, setFilteredPaymethods] = useState([])
+
+  useEffect(() => {
+    let _filteredPaymethods = []
+    if (searchValue) {
+      _filteredPaymethods = paymethods.filter(paymethod => paymethod?.name?.toLowerCase().includes(searchValue?.toLowerCase()))
+    } else {
+      _filteredPaymethods = [...paymethods]
+    }
+    setFilteredPaymethods(_filteredPaymethods)
+  }, [searchValue])
+
+  return (
+    <>
+      <Container>
+        <h2>{t('PAYMENT_METHODS', 'Payment methods')}</h2>
+        <SearchBarWrapper>
+          <SearchBar
+            placeholder={t('SEARCH', 'Search')}
+            isCustomLayout
+            lazyLoad
+            search={searchValue}
+            onSearch={val => setSearchValue(val)}
+          />
+        </SearchBarWrapper>
+        <ButtonGroup>
+          <Button
+            type='button'
+            color='secundaryDark'
+            onClick={() => handleSelectAllPaymethod(true)}
+          >
+            {t('SELECT_ALL', 'Select all')}
+          </Button>
+          <Button
+            type='button'
+            color='secundaryDark'
+            onClick={() => handleSelectAllPaymethod(false)}
+          >
+            {t('SELECT_NONE', 'Select none')}
+          </Button>
+        </ButtonGroup>
+        <GroupsContainer>
+          {filteredPaymethods.map(paymethod => (
+            <GroupWrapper
+              key={paymethod.id}
+              isDisabed={actionState.loading}
+            >
+              <Checkbox
+                checked={selectedPaymethodIds.includes(paymethod.id)}
+                onChange={e => handleSelectPaymethod(paymethod.id, e.target.checked)}
+              />
+              <p>{t(paymethod?.gateway?.toUpperCase(), paymethod?.name)}</p>
+            </GroupWrapper>
+          ))}
+        </GroupsContainer>
+      </Container>
+    </>
+  )
+}

package/src/components/Delivery/DriversGroupAddForm/PaymethodsForm/styles.js

@@ -0,0 +1,46 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div``
+
+export const SearchBarWrapper = styled.div`
+  margin-bottom: 10px;
+`
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  button:first-child {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 7px;
+    ` : css`
+      margin-right: 7px;
+    `}
+  }
+`
+
+export const GroupsContainer = styled.div`
+  overflow: auto;
+  max-height: 460px;
+`
+
+export const GroupWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+
+  p {
+    margin: 0px;
+    font-size: 14px;
+    ${props => props.theme?.rtl ? css`
+      padding-right: 15px;
+    ` : css`
+      padding-left: 15px;
+    `}
+  }
+
+  ${({ isDisabed }) => isDisabed && css`
+    pointer-events: none;
+  `}
+`

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

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react'
+import {
+  useLanguage,
+  useConfig,
+  DriversGroupDetails as DriversGroupDetailsController
+} 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 { BusinessesForm } from './BusinessesForm'
+import { PaymethodsForm } from './PaymethodsForm'
+import { AdvancedLogisticsForm } from './AdvancedLogisticsForm'
+
+import {
+  Container,
+  SectionContainer,
+  ButtonsContainer
+} from './styles'
+
+const DriversGroupAddFormUI = (props) => {
+  const {
+    actionState,
+    changesState,
+    handleAddDriversGroup
+  } = props
+
+  const [, t] = useLanguage()
+  const [configState] = useConfig()
+  const formMethods = useForm()
+  const autoAssignType = configState?.configs?.autoassign_type?.value
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  useEffect(() => {
+    if (!actionState?.error) return
+    setAlertState({
+      open: true,
+      content: actionState?.error
+    })
+  }, [actionState?.error])
+
+  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?.type === 0 && !changesState?.drivers) {
+      setAlertState({
+        open: true,
+        content: [t('VALIDATION_ERROR_REQUIRED', 'The drivers is required.').replace('_attribute_', t('DRIVERS', 'Drivers'))]
+      })
+      return
+    }
+    if (changesState?.type === 1 && !changesState?.driver_companies) {
+      setAlertState({
+        open: true,
+        content: [t('VALIDATION_ERROR_REQUIRED', 'The Driver company is required.').replace('_attribute_', t('DRIVER_COMPANY', 'Driver company'))]
+      })
+      return
+    }
+    if (!changesState?.business) {
+      setAlertState({
+        open: true,
+        content: [t('VALIDATION_ERROR_REQUIRED', 'The drivers is required.').replace('_attribute_', t('BUSINESSES', 'Businesses'))]
+      })
+      return
+    }
+    handleAddDriversGroup()
+  }
+
+  return (
+    <FormProvider {...formMethods}>
+      <Container onSubmit={formMethods.handleSubmit(onSubmit)} data-tour='tour_fill_group'>
+        <SectionContainer>
+          <GeneralForm {...props} />
+        </SectionContainer>
+        <SectionContainer>
+          <BusinessesForm {...props} />
+        </SectionContainer>
+        <SectionContainer>
+          <PaymethodsForm {...props} />
+        </SectionContainer>
+        {autoAssignType !== 'basic' && (
+          <SectionContainer>
+            <AdvancedLogisticsForm {...props} />
+          </SectionContainer>
+        )}
+        <ButtonsContainer>
+          <Button
+            borderRadius='8px'
+            color='primary'
+            type='submit'
+            disabled={Object.keys(changesState).length === 0}
+          >
+            {t('SAVE', 'Save')}
+          </Button>
+          <Button
+            color='secundary'
+            onClick={() => props.onClose()}
+            type='button'
+          >
+            {t('CANCEL', 'Cancel')}
+          </Button>
+        </ButtonsContainer>
+      </Container>
+      <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}
+      />
+    </FormProvider>
+  )
+}
+
+export const DriversGroupAddForm = (props) => {
+  const driversGroupAddFormProps = {
+    ...props,
+    UIComponent: DriversGroupAddFormUI
+  }
+  return <DriversGroupDetailsController {...driversGroupAddFormProps} />
+}

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

@@ -0,0 +1,38 @@
+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;
+  padding: 20px;
+  position: sticky;
+  z-index: 100;
+  bottom: 0;
+  background-color: ${props => props.theme.colors.backgroundPage};
+
+  > button {
+    border-radius: 8px;
+    height: 44px;
+    &:last-child {
+      margin: 0 10px;
+    }
+  }
+`

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

@@ -25,6 +25,7 @@ export const ButtonGroup = styled.div`
 export const GroupsContainer = styled.div`
   height: calc(100% - 130px);
   overflow: auto;
+  max-height: 460px;
 `
 
 export const GroupWrapper = styled.div`

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

@@ -33,6 +33,7 @@ export const ButtonGroup = styled.div`
 export const BusinessesContainer = styled.div`
   height: calc(100% - 130px);
   overflow: auto;
+  max-height: 610px;
 `
 
 export const BusinessWrapper = styled.div`

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

@@ -37,7 +37,7 @@ const DriversGroupOrdersUI = (props) => {
       <FieldWrapper>
         <label>{t('MAX_NUMBER_ORDERS', 'Maxiumum number of orders')}</label>
         <Input
-          value={changesState?.orders_group_max_orders ?? curDriversGroup?.orders_group_max_orders}
+          value={changesState?.orders_group_max_orders ?? curDriversGroup?.orders_group_max_orders ?? 0}
           onChange={e => onChangeNumberInput('orders_group_max_orders', e.target.value)}
         />
       </FieldWrapper>
@@ -89,7 +89,7 @@ const DriversGroupOrdersUI = (props) => {
       <FieldWrapper>
         <UseMapsApiCheckboxContainer>
           <Checkbox
-            checked={changesState?.orders_group_use_maps_api ?? curDriversGroup?.orders_group_use_maps_api}
+            checked={changesState?.orders_group_use_maps_api ?? curDriversGroup?.orders_group_use_maps_api ?? false}
             onChange={e => handleChangesState({ orders_group_use_maps_api: e.target.checked })}
           />
           <MapsApiDescriptionContainer>

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

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

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

@@ -10,6 +10,7 @@ import { Alert, Confirm, SearchBar, SideBar } from '../../Shared'
 import { WizardDelivery } from '../WizardDelivery'
 import { DriversGroupsList } from '../DriversGroupsList'
 import { DriversGroupDetails } from '../DriversGroupDetails'
+import { DriversGroupAddForm } from '../DriversGroupAddForm'
 
 import {
   DriversGroupsListingContainer,
@@ -49,6 +50,7 @@ const DriversGroupsListingUI = (props) => {
   const [curDriversGroup, setCurDriversGroup] = useState(null)
   const [curDriversGroupId, setCurDriversGroupId] = useState(null)
   const [isExtendExtraOpen, setIsExtendExtraOpen] = useState(false)
+  const [isAddMode, setIsAddMode] = useState(false)
 
   const [isTourOpen, setIsTourOpen] = useState(false)
   const [currentTourStep, setCurrentTourStep] = useState(4)
@@ -60,6 +62,7 @@ const DriversGroupsListingUI = (props) => {
     setOpenDetails(true)
 
     if (!driverGroup) {
+      setIsAddMode(true)
       setTimeout(() => {
         setCurrentTourStep(5)
       }, 50)
@@ -193,20 +196,39 @@ const DriversGroupsListingUI = (props) => {
             />
           </HeaderRightContainer>
         </HeaderContainer>
-        <DriversGroupsList
-          curDriversGroup={curDriversGroup}
-          driversGroupsState={driversGroupsState}
-          searchValue={searchValue}
-          handleOpenDetails={handleOpenDetails}
-          handleUpdateDriversGroup={handleUpdateDriversGroup}
-          handleDeleteDriversGroup={handleDeleteDriversGroup}
-          selectedGroupList={selectedGroupList}
-          handleSelectGroup={handleSelectGroup}
-          handleAllSelectGroup={handleAllSelectGroup}
-          actionDisabled={actionDisabled}
-        />
+        {!isAddMode ? (
+          <DriversGroupsList
+            curDriversGroup={curDriversGroup}
+            driversGroupsState={driversGroupsState}
+            searchValue={searchValue}
+            handleOpenDetails={handleOpenDetails}
+            handleUpdateDriversGroup={handleUpdateDriversGroup}
+            handleDeleteDriversGroup={handleDeleteDriversGroup}
+            selectedGroupList={selectedGroupList}
+            handleSelectGroup={handleSelectGroup}
+            handleAllSelectGroup={handleAllSelectGroup}
+            actionDisabled={actionDisabled}
+          />
+        ) : (
+          <DriversGroupAddForm
+            driversGroupsState={driversGroupsState}
+            setDriversGroupsState={setDriversGroupsState}
+            curDriversGroup={curDriversGroup}
+            driversGroupId={curDriversGroupId}
+            driversManagers={driversManagersList?.managers}
+            businesses={businessesList?.businesses}
+            paymethods={paymethodsList?.paymethods}
+            drivers={driversList?.drivers}
+            companies={driversCompanyList?.companies}
+            onClose={() => {
+              setOpenDetails(false)
+              setIsAddMode(false)
+            }}
+            actionDisabled={actionDisabled}
+          />
+        )}
       </DriversGroupsListingContainer>
-      {openDetails && (
+      {openDetails && !isAddMode && (
         <SideBar
           sidebarId='driver_group_details'
           defaultSideBarWidth={!isExtendExtraOpen ? 540 + moveDistance : 1040}

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

@@ -2,7 +2,6 @@ import styled, { css } from 'styled-components'
 
 export const DriversGroupsListingContainer = styled.div`
   flex: 1;
-  padding: 20px;
   box-sizing: border-box;
   transition: all 0.5s;
   max-height: 100vh;
@@ -11,6 +10,7 @@ export const DriversGroupsListingContainer = 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/UserAddForm/index.js

@@ -8,7 +8,7 @@ import {
   ExamineClick,
   UserFormDetails as UserFormDetailsController
 } from 'ordering-components-admin-external'
-import { Button, Input } from '../../../styles'
+import { Button, Input, DefaultSelect } from '../../../styles'
 import { Alert, InputPhoneNumber, Modal, ImageCrop } from '../../Shared'
 import { sortInputFields, bytesConverter, setStorageItem } from '../../../utils'
 import parsePhoneNumber from 'libphonenumber-js'
@@ -17,6 +17,7 @@ import BiImage from '@meronex/icons/bi/BiImage'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import MdCheckBoxOutlineBlank from '@meronex/icons/md/MdCheckBoxOutlineBlank'
 import MdCheckBox from '@meronex/icons/md/MdCheckBox'
+import { timezones } from '../../../config/constants'
 
 import {
   FormContainer,
@@ -31,7 +32,8 @@ import {
   MainInformationContainer,
   DriverGroupListContainer,
   DriverGroupItem,
-  CheckboxWrapper
+  CheckboxWrapper,
+  InputWrapper
 } from './styles'
 
 const UserAddFormUI = (props) => {
@@ -63,6 +65,8 @@ const UserAddFormUI = (props) => {
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isSuccessSubmitted, setIsSuccessSubmitted] = useState(false)
+  const [timezonesOptions, setTimezonesOptions] = useState([])
+  const [timezoneSearchValue, setTimezoneSearchValue] = useState('')
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
   const emailInput = useRef(null)
   const inputRef = useRef(null)
@@ -75,6 +79,18 @@ const UserAddFormUI = (props) => {
     cleanFormState && cleanFormState({ result: { error: false } })
   }
 
+  useEffect(() => {
+    const _timezonesOptions = timezones
+      .filter(timezone => timezone.toLocaleLowerCase().includes(timezoneSearchValue.toLocaleLowerCase()))
+      .map(timezone => {
+        return {
+          value: timezone,
+          content: timezone
+        }
+      })
+    setTimezonesOptions(_timezonesOptions)
+  }, [timezoneSearchValue])
+
   const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
 
   const onSubmit = () => {
@@ -323,6 +339,22 @@ const UserAddFormUI = (props) => {
                     </React.Fragment>
                   )
                 )}
+                {isDriversPage && (
+                  <InputWrapper>
+                    <DefaultSelect
+                      placeholder={t('SELECT_TIMEZONE', 'Select a timezone')}
+                      defaultValue={formState?.changes?.timezone}
+                      options={timezonesOptions}
+                      onChange={val => handleChangeSwtich('timezone', val)}
+                      optionInnerMaxHeight='300px'
+                      isShowSearchBar
+                      searchBarIsCustomLayout
+                      searchBarIsNotLazyLoad
+                      searchValue={timezoneSearchValue}
+                      handleChangeSearch={setTimezoneSearchValue}
+                    />
+                  </InputWrapper>
+                )}
                 {!!showInputPhoneNumber && (
                   <InputPhoneNumber
                     value={userPhoneNumber}

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

@@ -25,6 +25,31 @@ export const UserImage = styled.div`
   }
 `
 
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+
+  .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;
+      }
+    `}
+  }
+`
+
 export const Image = styled.div`
   position: relative;
   width: 90px;

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

@@ -4,7 +4,7 @@ import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useLanguage, UserDetails as UserDetailsController } from 'ordering-components-admin-external'
-import { OrdersManager } from '../../Orders'
+import { OrdersManager } from '../../Orders/OrdersManager'
 import { AddressList } from '../AddressList'
 import { Personalization, Modal, Schedule } from '../../Shared'
 import { UserDetailsMenu } from '../UserDetailsMenu'