ordering-ui-admin-external 1.7.4 → 1.8.0

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

@@ -0,0 +1,278 @@
+import React, { useState, useEffect, useRef } from 'react'
+import {
+  useConfig, useLanguage, useUtils, ExamineClick, BusinessZoneGoogleMaps as DriverGroupZoneGoogleMaps
+} from 'ordering-components-admin-external'
+import { Select } from '../../../styles/Select/FirstSelect'
+import { Button, Input } from '../../../styles'
+import { Alert } from '../../Shared'
+import { useForm } from 'react-hook-form'
+
+import {
+  FormContainer,
+  TypeSelectWrapper,
+  WrapperMap,
+  ErrorText,
+  FormControl,
+  Row,
+  KmlButtonWrapper
+} from './styles'
+
+export const DriverGroupDeliveryZoneInformation = (props) => {
+  const {
+    zone,
+    driverGroupsZones,
+    formState,
+    handleChangeInput,
+    handleChangeFormState,
+    handleUpdateDriverGroupDeliveryZone,
+    handleAddDriverGroupDeliveryZone,
+    handleUploadKmlFiles,
+    kmlData
+  } = props
+
+  const [, t] = useLanguage()
+  const { handleSubmit, register, errors } = useForm()
+  const [{ parseNumber }] = useUtils()
+  const [configState] = useConfig()
+  const [clearState, setClearState] = useState(false)
+  const [infoContentString, setInfoContentString] = useState('')
+  const [zoneType, setZoneType] = useState(zone?.type || 2)
+  const [zoneData, setZoneData] = useState(zone?.data)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isShowMap, setIsShowMap] = useState(false)
+  const kmlRef = useRef(null)
+
+  const typeOptions = [
+    { value: 1, content: t('CIRCLE', 'Circle') },
+    { value: 2, content: t('POLYGON', 'Polygon') },
+    { value: 4, content: t('EVERYWHERE', 'Everywhere') },
+  ]
+
+  const googleMapsControls = {
+    defaultZoom: 8,
+    zoomControl: true,
+    streetViewControl: false,
+    fullscreenControl: false,
+    mapTypeId: 'roadmap', // 'roadmap', 'satellite', 'hybrid', 'terrain'
+    mapTypeControl: false,
+    mapTypeControlOptions: {
+      mapTypeIds: ['roadmap', 'satellite']
+    },
+    isMarkerDraggable: false,
+    defaultPosition: { lat: 40.77473399999999, lng: -73.9653844 }
+  }
+
+  const fillStyle = {
+    fillColor: '#2C7BE5',
+    strokeColor: '#03459E',
+    fillOpacity: 0.2,
+    strokeWeight: 2,
+    editable: true
+  }
+
+  const greenFillStyle = {
+    fillColor: '#008000',
+    fillOpacity: 0.3,
+    strokeColor: '#008000',
+    strokeOpacity: 0.8,
+    strokeWeight: 2
+  }
+
+  const handleChangeType = (type) => {
+    handleChangeFormState({ type: type })
+    setClearState(true)
+    setZoneType(type)
+  }
+
+  const handleZoneData = (data) => {
+    setZoneData(data)
+    handleChangeFormState({ data: data })
+  }
+
+  const onSubmit = () => {
+    if (formState?.changes?.data || zoneType === 4) {
+      if (!zone) handleAddDriverGroupDeliveryZone()
+      else handleUpdateDriverGroupDeliveryZone()
+    } else {
+      setAlertState({
+        open: true,
+        content: t('REQUIRED_POLYGON_CIRCLE', 'Add a distance based or draw a polygon or circle.')
+      })
+    }
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    if (clearState) {
+      handleZoneData(null)
+    }
+  }, [clearState])
+
+  useEffect(() => {
+    if (zoneType === 2 || zoneType === 4) return
+    let content = '<div style="width: 90px; height: 30px">' + '<span>Radius: </span>'
+    content += parseNumber(zoneData?.radio || zoneData?.distance)
+    content += `<span>${zoneType === 5 ? configState?.configs?.distance_unit?.value : 'km'}</span>` + '</div>'
+    setInfoContentString(content)
+  }, [zoneData, zoneType])
+
+  useEffect(() => {
+    setClearState(false)
+    setZoneType(zone?.type || 2)
+    setZoneData(zone?.data)
+    setIsShowMap(false)
+    setTimeout(() => {
+      setIsShowMap(true)
+    }, [100])
+  }, [zone?.id])
+
+  useEffect(() => {
+    if (Object?.keys(errors)?.length > 0) {
+      setAlertState({
+        open: true,
+        content: Object?.values(errors)?.map((error) => error?.message)
+      })
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (formState?.error) {
+      setAlertState({
+        open: true,
+        content: formState?.error
+      })
+    }
+  }, [formState])
+
+  return (
+    <>
+      <FormContainer onSubmit={handleSubmit(onSubmit)} autoComplete='off'>
+        <Row>
+          <FormControl>
+            <label>{t('NAME', 'Name')}</label>
+            <Input
+              placeholder={t('NAME', 'Name')}
+              name='name'
+              value={formState?.changes?.name ?? zone?.name ?? ''}
+              onChange={handleChangeInput}
+              ref={register({
+                required: t('NAME_REQUIRED', 'The name is required.')
+              })}
+            />
+          </FormControl>
+          <FormControl>
+            <label>{t('TYPE', 'Type')}</label>
+            <TypeSelectWrapper>
+              <Select
+                defaultValue={parseInt(formState?.changes?.type || zoneType)}
+                options={typeOptions}
+                onChange={handleChangeType}
+              />
+            </TypeSelectWrapper>
+          </FormControl>
+        </Row>
+        <Row>
+          <FormControl>
+            <label>{t('MINIMUN_PURCHASED', 'Minimum purchase')}</label>
+            <Input
+              placeholder='$0.00'
+              name='minimum'
+              value={formState?.changes?.minimum ?? zone?.minimum ?? ''}
+              onChange={handleChangeInput}
+              ref={register({
+                required: t('MINIMUN_PURCHASED_REQUIRED', 'The minimum purchase is required.')
+              })}
+            />
+          </FormControl>
+          <FormControl>
+            <label>{t('DELIVERY_FEE', 'Delivery fee')}</label>
+            <Input
+              placeholder='$0.00'
+              name='price'
+              value={formState?.changes?.price ?? zone?.price ?? ''}
+              onChange={handleChangeInput}
+              ref={register({
+                required: t('DELIVERY_PRICE_REQUIRED', 'The delivery price is required.')
+              })}
+            />
+          </FormControl>
+        </Row>
+        {zoneType !== 4 && isShowMap && (
+          configState?.configs?.google_maps_api_key?.value ? (
+            <WrapperMap>
+              <button
+                type='button'
+                onClick={() => setClearState(true)}
+              >
+                {t('CLEAR', 'Clear')}
+              </button>
+              <DriverGroupZoneGoogleMaps
+                distance={formState?.changes?.data?.distance}
+                apiKey={configState?.configs?.google_maps_api_key?.value}
+                mapControls={googleMapsControls}
+                clearState={clearState}
+                setClearState={setClearState}
+                type={zoneType}
+                data={formState?.changes?.data || zoneData}
+                handleData={handleZoneData}
+                fillStyle={fillStyle}
+                infoContentString={infoContentString}
+                greenFillStyle={greenFillStyle}
+                isAddMode={!zone}
+                businessZones={driverGroupsZones}
+                kmlData={kmlData}
+                isDriverGroup
+              />
+            </WrapperMap>
+          ) : (
+            <ErrorText>{t('REQUIRED_GOOGLE_MAP_API_KEY', 'Google Maps api key is required')}</ErrorText>
+          )
+        )}
+        {!zone && (
+          <KmlButtonWrapper>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              type='button'
+              onClick={() => kmlRef.current.click()}
+            >
+              <ExamineClick
+                onFiles={files => handleUploadKmlFiles(files)}
+                childRef={e => { kmlRef.current = e }}
+                accept='.kml,.kmz'
+              >
+                <span>{t('UPLOAD_KML', 'Upload KML')}</span>
+              </ExamineClick>
+            </Button>
+          </KmlButtonWrapper>
+        )}
+
+        <Button
+          color='primary'
+          borderRadius='8px'
+          type='submit'
+          disabled={formState?.loading || Object?.keys(formState?.changes)?.length === 0}
+        >
+          {
+            !zone ? t('ADD', 'Add') : t('SAVE', 'Save')
+          }
+        </Button>
+      </FormContainer>
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState?.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState?.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,93 @@
+import styled, { css } from 'styled-components'
+
+export const FormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100% - 130px);
+
+  > button {
+    width: fit-content;
+    position: sticky;
+    top: 100%;
+    margin-top: 30px;
+    height: 42px;
+  }
+`
+export const TypeSelectWrapper = styled.div`
+  .select {
+    background: ${props => props.theme.colors.secundary};
+    width: 100%;
+    border: none;
+    font-size: 14px;
+    color: ${props => props.theme.colors.headingColor};
+    > div:first-child {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+  }
+`
+export const WrapperMap = styled.div`
+  width: 100%;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 29px 0 20px 0;
+  position: relative;
+  > div {
+    position: relative !important; 
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 8px;
+  }
+
+  > button {
+    position: absolute;
+    font-size: 14px;
+    padding: 0 5px;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    top: 10px;
+    z-index: 10;
+    border: none;
+    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px;
+    color: ${props => props.theme.colors.headingColor};
+    ${props => props.theme?.rtl ? css`
+      right: 10px;
+    ` : css`
+      left: 10px;
+    `}
+    &:hover {
+      background: #eee;
+    }
+  }
+`
+
+export const ErrorText = styled.div`
+  font-size: 14px;
+  color: ${props => props.theme.colors.lightGray};
+  text-align: center;
+  margin: 20px 0;
+`
+export const FormControl = styled.div`
+  display: flex;
+  flex-direction: column;
+  label {
+    font-size: 14px;
+    margin-bottom: 9px;
+  }
+  input {
+    width: 100%;
+  }
+`
+export const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 29px;
+
+  > div {
+    width: 45%;
+  }
+`
+export const KmlButtonWrapper = styled.div`
+  margin-bottom: 20px;
+`

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

@@ -0,0 +1,134 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { DriverGroupDeliveryZoneDetails } from '../DriversGroupsDeliveryZoneDetails'
+import { SideBar } from '../../Shared'
+import { ChevronRight } from 'react-bootstrap-icons'
+import { Checkbox } from '../../../styles'
+
+import {
+  ZoneContainer,
+  DeliveryZonesTable,
+  AddDeliveryZoneButton,
+  ZoneTbody,
+  CheckboxWrapper,
+  DeliveryZonesTableWrapper,
+  CheckSkeleteon,
+  InfoBlock
+} from './styles'
+import Skeleton from 'react-loading-skeleton'
+
+export const DriverGroupDeliveryZoneList = (props) => {
+  const {
+    drivergroup,
+    setIsExtendExtraOpen,
+    handleSuccessUpdate,
+    zoneListState,
+    handleChangeZoneState,
+    handleChangeAllZoneState,
+    handleParentSidebarMove,
+    zoneList,
+    setZoneList,
+    setIsOpenDetails,
+    isOpenDetails
+  } = props
+
+  const [, t] = useLanguage()
+  const [curZone, setCurZone] = useState(null)
+
+  const handleCloseOption = () => {
+    setIsOpenDetails(false)
+    setIsExtendExtraOpen(false)
+    setCurZone(null)
+    handleParentSidebarMove(0)
+  }
+
+  const handleOpenZone = (e, zone) => {
+    const isInvalid = e.target.closest('.zone-enabled')
+    if (isInvalid) return
+    setCurZone(zone)
+    handleParentSidebarMove(500)
+    setIsExtendExtraOpen(true)
+    setIsOpenDetails(true)
+  }
+
+  return (
+    <>
+      <ZoneContainer>
+        {zoneList.loading ? (
+          [...Array(5).keys()].map(i => (
+            <DeliveryZonesTableWrapper key={i}>
+              <CheckSkeleteon>
+                <Skeleton width={18} height={18} />
+              </CheckSkeleteon>
+              <InfoBlock>
+                <Skeleton width='100%' height={18} />
+              </InfoBlock>
+            </DeliveryZonesTableWrapper>
+          ))
+        ) :
+          <DeliveryZonesTable>
+            <thead>
+              <tr>
+                <th>
+                  <CheckboxWrapper>
+                    <Checkbox
+                      checked={zoneListState?.isCheckAll}
+                      onChange={e => handleChangeAllZoneState(e.target.checked)}
+                    />
+                  </CheckboxWrapper>
+                </th>
+                <th>{t('NAME', 'Name')}</th>
+                <th>{t('MINIMUM', 'Minimum')}</th>
+                <th>{t('PRICE', 'Price')}</th>
+                <th />
+              </tr>
+            </thead>
+            {zoneList?.zones?.filter(zone => zone?.type !== 3)?.map(zone => (
+              <ZoneTbody
+                key={zone?.id}
+                active={zone?.id === curZone?.id}
+                onClick={(e) => handleOpenZone(e, zone)}
+              >
+                <tr>
+                  <td>
+                    <CheckboxWrapper className='zone-enabled'>
+                      <Checkbox
+                        checked={!!zoneListState?.changes[zone.id]}
+                        onChange={e => handleChangeZoneState(zone?.id, e?.target?.checked)}
+                      />
+                    </CheckboxWrapper>
+                  </td>
+                  <td>{zone?.name}</td>
+                  <td>{zone?.minimum}</td>
+                  <td>{zone?.price}</td>
+                  <td className='arrow'><ChevronRight /></td>
+                </tr>
+              </ZoneTbody>
+            ))}
+          </DeliveryZonesTable>
+        }
+        <AddDeliveryZoneButton
+          onClick={(e) => handleOpenZone(e, null)}
+        >
+          {t('ADD_DELIVERY_ZONE', 'Add delivery zone')}
+        </AddDeliveryZoneButton>
+      </ZoneContainer>
+      {isOpenDetails && (
+        <SideBar
+          isBorderShow
+          open={isOpenDetails}
+          onClose={() => handleCloseOption()}
+        >
+          <DriverGroupDeliveryZoneDetails
+            zone={curZone}
+            setZoneList={setZoneList}
+            drivergroup={drivergroup}
+            onClose={() => handleCloseOption()}
+            handleSuccessUpdate={handleSuccessUpdate}
+            driverGroupsZones={zoneList}
+          />
+        </SideBar>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,87 @@
+import styled, { css } from 'styled-components'
+
+export const ZoneContainer = styled.div`
+  margin: 30px 0 20px 0;
+  @media (min-width: 1000px) {
+    max-width: 500px;
+  }
+`
+
+export const DeliveryZonesTable = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  thead {
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    tr {
+      th {
+        font-size: 12px;
+        font-weight: 700;
+        padding: 10px 0;
+      }
+    }
+  }
+`
+
+export const DeliveryZonesTableWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  margin-bottom: 20px;
+`
+
+export const CheckSkeleteon = styled.div`
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+`
+
+export const InfoBlock = styled.div`
+  width: 100%;
+`
+
+export const ZoneTbody = styled.tbody`
+  cursor: pointer;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  tr {
+    td {
+      font-size: 14px;
+      padding: 13px 0;
+      &.arrow {
+        font-size: 13px;
+        color: ${props => props.theme.colors.secundaryLight};
+      }
+    }
+  }
+  &:hover {
+    background-color: ${props => props.theme.colors.lightPrimary};
+  }
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.lightPrimary};
+    td {
+      border-top: 1px solid ${props => props.theme.colors.primary};
+      border-bottom: 1px solid ${props => props.theme.colors.primary};
+    }
+  `}
+`
+export const ActionsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const AddDeliveryZoneButton = styled.div`
+  color: ${props => props.theme.colors.lightGray};
+  font-size: 14px;
+  padding: 10px 0;
+  cursor: pointer;
+  width: fit-content;
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+export const CheckboxWrapper = styled.div`
+  display: flex;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 10px;
+  ` : css`
+    margin-right: 10px;
+  `}
+`

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

@@ -14,6 +14,8 @@ import { DriversGroupBusinesses } from '../DriversGroupBusinesses'
 import { DriversGroupPaymethods } from '../DriversGroupPaymethods'
 import { DriversGroupLogistics } from '../DriversGroupLogistics'
 import { DriversGroupLogs } from '../DriversGroupLogs'
+import { DriverGroupDeliveryDetails } from '../DriversGroupDeliveryDetails'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
   DetailsContainer,
@@ -30,11 +32,13 @@ const DriversGroupDetailsUI = (props) => {
     handleParentSidebarMove,
     handleDeleteDriversGroup,
     handleNextTour,
-    handleUpdateDriversGroup
+    handleUpdateDriversGroup,
+    setIsExtendExtraOpen
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
   const [configState] = useConfig()
 
   const autoAssignType = configState?.configs?.autoassign_type?.value
@@ -44,12 +48,14 @@ const DriversGroupDetailsUI = (props) => {
   const [driversGroupMenus, setDriversGroupMenus] = useState([])
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isOpenDetails, setIsOpenDetails] = useState(false)
 
   useEffect(() => {
     const _driversGroupMenus = !driversGroupState.driversGroup
       ? [
         { key: 'general', value: t('GENERAL', 'General') },
-        { key: 'businesses', value: t('BUSINESSES', 'Businesses') }
+        { key: 'businesses', value: t('BUSINESSES', 'Businesses') },
+        { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') }
       ]
       : (useAdvanced && autoAssignType !== 'basic')
         ? [
@@ -57,18 +63,20 @@ const DriversGroupDetailsUI = (props) => {
           { key: 'businesses', value: t('BUSINESSES', 'Businesses') },
           { key: 'paymethods', value: t('PAYMENT_METHODS', 'Payment methods') },
           { key: 'advanced_logistics', value: t('ADVANCED_LOGISTICS', 'Advanced logistics') },
-          { key: 'logs', value: t('LOGS', 'Logs') }
+          { key: 'logs', value: t('LOGS', 'Logs') },
+          { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') }
         ]
         : [
           { key: 'general', value: t('GENERAL', 'General') },
           { key: 'businesses', value: t('BUSINESSES', 'Businesses') },
           { key: 'paymethods', value: t('PAYMENT_METHODS', 'Payment methods') },
-          { key: 'logs', value: t('LOGS', 'Logs') }
+          { key: 'logs', value: t('LOGS', 'Logs') },
+          { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') }
         ]
     setDriversGroupMenus(_driversGroupMenus)
   }, [useAdvanced])
 
-  const onDeleteGroup = (driversGroupId) => {
+  const onDeleteGroup = () => {
     setConfirm({
       open: true,
       content: t('QUESTION_DELETE_DRIVER_GROUP', 'Are you sure to remove this driver group?'),
@@ -79,6 +87,10 @@ const DriversGroupDetailsUI = (props) => {
     })
   }
 
+  useEffect(() => {
+    if (width > 1000) setIsExtendExtraOpen(false)
+  }, [width])
+
   const handleNextClick = () => {
     setShowMenu('businesses')
     handleNextTour()
@@ -90,7 +102,9 @@ const DriversGroupDetailsUI = (props) => {
 
   useEffect(() => {
     handleParentSidebarMove(0)
-  }, [showMenu])
+    setIsOpenDetails(false)
+    setIsExtendExtraOpen(false)
+  }, [showMenu, driversGroupState.driversGroup?.id])
 
   useEffect(() => {
     if (!actionState?.error) return
@@ -166,6 +180,15 @@ const DriversGroupDetailsUI = (props) => {
         {showMenu === 'logs' && (
           <DriversGroupLogs driversGroupId={driversGroupState.driversGroup?.id} />
         )}
+        {showMenu === 'delivery_zones' && (
+          <DriverGroupDeliveryDetails {...props}
+            handleParentSidebarMove={handleParentSidebarMove}
+            drivergroup={driversGroupState.driversGroup}
+            setIsExtendExtraOpen={setIsExtendExtraOpen}
+            setIsOpenDetails={setIsOpenDetails}
+            isOpenDetails={isOpenDetails}
+          />
+        )}
       </DetailsContainer>
       <Alert
         title={t('WEB_APPNAME', 'Ordering')}