ordering-ui-external 1.8.7 → 1.8.9

package/src/themes/callcenterOriginal/src/components/Orders/DriversDashboard/index.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import { DriversLocation } from '../DriversLocation'
+import { DriversList } from '../DriversList'
+import { DriversOnlineOfflineFilter } from '../DriversOnlineOfflineFilter'
+import { DriversBusyStatusFilter } from '../DriversBusyStatusFilter'
+import {
+  DriversDashboardContainer,
+  DriversContainer,
+  FilterContainer,
+  WrapperDriversList,
+  WrapperDriversLocation
+} from './styles'
+
+export const DriversDashboard = (props) => {
+  const {
+    driversList,
+    onlineDrivers,
+    offlineDrivers,
+    driversIsOnline,
+    driversSubfilter,
+    selectedDriver,
+    handleChangeDriver,
+    handleChangeDriverIsOnline,
+    handleChangeDriversSubFilter,
+    handleOpenDriverOrders
+  } = props
+
+  const numberOfonlineDrivers = onlineDrivers?.length
+  const numberOfofflineDrivers = offlineDrivers?.length
+  const numberOfbusyDrivers = driversIsOnline ? onlineDrivers.filter(ele => ele.busy)?.length : offlineDrivers.filter(ele => ele.busy)?.length
+  const numberOfnotBusyDrivers = driversIsOnline ? onlineDrivers.filter(ele => !ele.busy)?.length : offlineDrivers.filter(ele => !ele.busy)?.length
+
+  return (
+    <DriversDashboardContainer>
+      <DriversContainer>
+        <FilterContainer>
+          <DriversOnlineOfflineFilter
+            driversIsOnline={driversIsOnline}
+            handleChangeDriverIsOnline={handleChangeDriverIsOnline}
+            numberOfonlineDrivers={numberOfonlineDrivers}
+            numberOfofflineDrivers={numberOfofflineDrivers}
+          />
+          <DriversBusyStatusFilter
+            driversSubfilter={driversSubfilter}
+            handleChangeDriversSubFilter={handleChangeDriversSubFilter}
+            numberOfbusyDrivers={numberOfbusyDrivers}
+            numberOfnotBusyDrivers={numberOfnotBusyDrivers}
+          />
+        </FilterContainer>
+        <WrapperDriversList id='driversList'>
+          <DriversList
+            loading={driversList.loading}
+            driversIsOnline={driversIsOnline}
+            onlineDrivers={onlineDrivers}
+            offlineDrivers={offlineDrivers}
+            selectedDriver={selectedDriver}
+            handleChangeDriver={handleChangeDriver}
+            handleOpenDriverOrders={handleOpenDriverOrders}
+          />
+        </WrapperDriversList>
+      </DriversContainer>
+      <WrapperDriversLocation>
+        <DriversLocation
+          driversIsOnline={driversIsOnline}
+          selectedDriver={selectedDriver}
+          onlineDrivers={onlineDrivers}
+          offlineDrivers={offlineDrivers}
+          driversList={driversList}
+        />
+      </WrapperDriversLocation>
+    </DriversDashboardContainer>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/DriversDashboard/styles.js

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components'
+
+export const DriversDashboardContainer = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  margin-top: 0px;
+
+  @media (min-width: 760px) {
+    margin-top: 15px
+  }
+
+  @media (min-width: 1024px) {
+    flex-direction: row;
+    height: calc(100vh - 100px);
+  }
+`
+
+export const FilterContainer = styled.div`
+  position: sticky;
+  top: 0px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  z-index: 100;
+`
+
+export const DriversContainer = styled.div`
+  border: 1px solid #E9ECEF;
+  border-radius: 8px;
+  height: 100%;
+  overflow: hidden;
+  margin-top: 20px;
+  padding: 10px;
+
+  @media (min-width: 1024px) {
+    width: 330px;
+    max-width: 330px;
+    margin-top: 0px;
+  }
+
+  @media (min-width: 1300px) {
+    max-width: 500px;
+    width: 500px;
+  }
+`
+
+export const WrapperDriversList = styled.div`
+  height: calc(100% - 100px);
+  overflow-x: hidden;
+`
+
+export const WrapperDriversLocation = styled.div`
+  height: calc(var(--vh, 1vh) * 100 - 190px);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-top: 20px;
+  
+  @media (min-width: 1024px) {
+    margin-top: 0px;
+    height: 100%;
+    flex: 1;
+    ${props => props.theme?.rtl ? css`
+      margin-right: 15px;
+    ` : css`
+      margin-left: 15px;
+    `}
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/DriversGroupTypeSelector/index.js

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { MultiSelect } from '../../../styles/MultiSelect'
+
+import { PlaceholderTitle, Option } from './styles'
+
+export const DriversGroupTypeSelector = (props) => {
+  const {
+    driverGroupList,
+    filterValues,
+    handleChangeGroup
+  } = props
+
+  const [, t] = useLanguage()
+
+  const placeholder = (
+    <PlaceholderTitle>
+      {t('DRIVER_GROUP', 'Driver group')}
+    </PlaceholderTitle>
+  )
+  const [groupTypes, setGroupTypes] = useState([])
+  const groupTypesLoading = [{ value: 'default', content: <Option>{t('GROUP_LOADING', 'Group loading')}...</Option> }]
+
+  useEffect(() => {
+    const _groupList = []
+    if (!driverGroupList.loading) {
+      const _groupsOption = driverGroupList.groups.map((group) => {
+        return {
+          value: group.id,
+          content: (
+            <Option>{group.id}. {group.name}</Option>
+          )
+        }
+      })
+
+      for (const option of _groupsOption) {
+        _groupList.push(option)
+      }
+    }
+    setGroupTypes(_groupList)
+  }, [driverGroupList])
+
+  return (
+    <>
+      {!driverGroupList.loading ? (
+        <MultiSelect
+          placeholder={placeholder}
+          defaultValue={filterValues.groupTypes}
+          options={groupTypes}
+          onChange={(groupType) => handleChangeGroup(groupType)}
+        />
+      ) : (
+        <MultiSelect
+          defaultValue='default'
+          options={groupTypesLoading}
+          optionBottomBorder
+        />
+      )}
+    </>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/DriversGroupTypeSelector/styles.js

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components'
+
+export const PlaceholderTitle = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px;
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 15px;
+  column-gap: 20px;
+
+  svg {
+    margin-right: 5px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `} 
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/DriversList/index.js

@@ -0,0 +1,98 @@
+import React from 'react'
+import { useUtils, useLanguage } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import BsDot from '@meronex/icons/bs/BsDot'
+import { useTheme } from 'styled-components'
+import { getStarWidth } from '../../../../../../utils'
+import {
+  DriversListContainer,
+  DriverCard,
+  WrapperImage,
+  Image,
+  DriverInfo,
+  WrapperStar,
+  AssignedOrdersCount
+} from './styles'
+
+export const DriversList = (props) => {
+  const {
+    loading,
+    driversIsOnline,
+    onlineDrivers,
+    offlineDrivers,
+    selectedDriver,
+    handleChangeDriver,
+    handleOpenDriverOrders
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+
+  const handleClickDriver = (e, driver) => {
+    const isInvalid = e.target.closest('.driver-orders')
+    if (isInvalid) return
+    handleChangeDriver(driver)
+  }
+
+  const onOpenDriverOrdersDetail = (driver) => {
+    if (selectedDriver?.id !== driver.id) {
+      handleChangeDriver(driver)
+    }
+    handleOpenDriverOrders(driver)
+  }
+
+  return (
+    <DriversListContainer>
+      {loading ? (
+        <>
+          {[...Array(10).keys()].map(i => (
+            <DriverCard
+              key={i}
+            >
+              <WrapperImage>
+                <Skeleton width={45} height={45} />
+              </WrapperImage>
+              <DriverInfo>
+                <div>
+                  <Skeleton width={100} />
+                </div>
+                <Skeleton width={100} />
+              </DriverInfo>
+            </DriverCard>
+          ))}
+        </>
+      ) : (
+        <>
+          {(driversIsOnline ? onlineDrivers : offlineDrivers).map(driver => (
+            <DriverCard
+              key={driver.id}
+              onClick={(e) => handleClickDriver(e, driver)}
+              active={selectedDriver?.id === driver.id}
+            >
+              <WrapperImage>
+                <Image bgimage={optimizeImage(driver?.photo || theme.images?.icons?.noDriver, 'h_50,c_limit')} />
+              </WrapperImage>
+              <DriverInfo>
+                <div>
+                  <p>{driver.name} {driver.lastname}</p>
+                  <BsDot />
+                  <AssignedOrdersCount
+                    className='driver-orders'
+                    disabled={!driver?.assigned_orders_count || driver?.assigned_orders_count === 0}
+                    onClick={() => onOpenDriverOrdersDetail(driver)}
+                  >
+                    {driver?.assigned_orders_count} {t('ORDERS', 'Orders')}
+                  </AssignedOrdersCount>
+                </div>
+                {driver?.qualification && (
+                  <WrapperStar width={getStarWidth(driver?.qualification)} />
+                )}
+              </DriverInfo>
+            </DriverCard>
+          ))}
+        </>
+      )}
+    </DriversListContainer>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/DriversList/styles.js

@@ -0,0 +1,146 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const DriversListContainer = styled.div`
+  padding: 15px 10px;
+`
+
+export const DriverCard = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  position: relative;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  box-sizing: border-box;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  padding: 10px 15px;
+
+  &:hover {
+    background-color: ${props => props.theme.colors.lightPrimary};
+  }
+  
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.lightPrimary};
+    border: 1px solid ${props => props.theme.colors.primary};
+  `}
+`
+
+export const WrapperImage = styled.div`
+  max-width: 45px;
+  max-height: 45px;
+  height: 45px;
+  width: 45px;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 8px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 7px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+`
+
+const ImageStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 10px;
+`
+export const Image = (props) => {
+  return (
+    <ImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </ImageStyled>
+  )
+}
+
+export const WrapperStar = styled.div`
+  unicode-bidi: bidi-override;
+  color: #c5c5c5;
+  font-size: 17px;
+  position: relative;
+  width: fit-content;
+
+  &::before { 
+    content: '★★★★★';
+    opacity: .3;
+  }
+
+  &::after {
+    color: #F9D853;
+    content: '★★★★';
+    position: absolute;
+    z-index: 1;
+    display: block;
+    left: 0;
+    top:0;
+    width: ${({ width }) => width};
+    overflow: hidden;
+  }
+`
+
+export const DriverInfo = styled.div`
+  ${props => props.theme?.rtl ? css`
+    margin-right: 15px;
+  ` : css`
+    margin-left: 15px;
+  `}
+  > div:first-child {
+    display: flex;
+    align-items: center;
+
+    svg {
+      margin: 0 5px;
+    }
+    
+    p {
+      font-size: 14px;
+      color: ${props => props.theme.colors?.headingColor};
+      font-weight: 600;
+      margin: 0px;
+      flex: 1;
+    }
+  }
+`
+
+export const AssignedOrdersCount = styled.span`
+  font-size: 14px;
+  cursor: pointer;
+  color: ${props => props.theme.colors.primary};
+
+  ${({ disabled }) => disabled && css`
+    pointer-events: none;
+    opacity: 0.5;
+  `}
+`
+export const Timestatus = styled.div`
+  width: 4px;
+  height: 42px;
+  border-radius: 20px;
+  margin-right: 10px;
+  ${props => props.theme?.rtl && css`
+    margin-right: 0px;
+    margin-left: 10px;
+ `}
+ ${({ timeState }) => timeState === 'in_time' && css`
+    background-color: #00D27A;
+  `}
+  ${({ timeState }) => timeState === 'at_risk' && css`
+    background-color: #FFC700;
+  `}
+  ${({ timeState }) => timeState === 'delayed' && css`
+    background-color: #E63757;
+  `}
+`

package/src/themes/callcenterOriginal/src/components/Orders/DriversLocation/index.js

@@ -0,0 +1,169 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { useConfig } from 'ordering-components-external'
+import GoogleMapReact, { fitBounds } from 'google-map-react'
+import { DriverMapMarkerAndInfo } from '../DriverMapMarkerAndInfo'
+
+import {
+  WrapperMap
+} from './styles'
+
+export const DriversLocation = (props) => {
+  const {
+    driversIsOnline,
+    onlineDrivers,
+    offlineDrivers,
+    selectedDriver
+  } = props
+
+  const [configState] = useConfig()
+  const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
+
+  const defaultLatitude = Number(configState?.configs?.location_default_latitude?.value)
+  const defaultLongitude = Number(configState?.configs?.location_default_longitude?.value)
+  const isInvalidDefaultLocation = isNaN(defaultLatitude) || isNaN(defaultLongitude)
+  const defaultCenter = {
+    lat: !isInvalidDefaultLocation ? defaultLatitude : 40.7744146,
+    lng: !isInvalidDefaultLocation ? defaultLongitude : -73.9678064
+  }
+  const defaultZoom = 10
+
+  const [mapCenter, setMapCenter] = useState(defaultCenter)
+  const [mapZoom, setMapZoom] = useState(defaultZoom)
+  const [mapLoaded, setMapLoaded] = useState(true)
+  const [mapFitted, setMapFitted] = useState(false)
+
+  const mapRef = useRef(null)
+
+  const [showDrivers, setShowDrivers] = useState([])
+
+  const mapFit = () => {
+    const bounds = new window.google.maps.LatLngBounds()
+
+    if (showDrivers.length === 1) {
+      setMapCenter(
+        (showDrivers[0].location !== null && typeof showDrivers[0].location === 'object' && showDrivers[0].location?.lat && showDrivers[0].location?.lng)
+          ? showDrivers[0].location
+          : typeof showDrivers[0].location === 'string'
+            ? {
+              lat: parseFloat(showDrivers[0]?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
+              lng: parseFloat(showDrivers[0]?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+            }
+            : defaultCenter
+      )
+      setMapZoom(mapZoom)
+      return
+    }
+
+    for (const driver of showDrivers) {
+      const marker = (driver.location !== null && typeof driver.location === 'object' && driver.location?.lat && driver.location?.lng)
+        ? driver.location
+        : typeof driver?.location === 'string'
+          ? {
+            lat: parseFloat(driver?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
+            lng: parseFloat(driver?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+          }
+          : defaultCenter
+      const newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
+      bounds.extend(newPoint)
+    }
+
+    const newBounds = {
+      ne: {
+        lat: bounds.getNorthEast()?.lat?.(),
+        lng: bounds.getNorthEast()?.lng?.()
+      },
+      sw: {
+        lat: bounds.getSouthWest()?.lat?.(),
+        lng: bounds.getSouthWest()?.lng?.()
+      }
+    }
+
+    const mapSize = {
+      width: mapRef.current.clientWidth,
+      height: mapRef.current.clientHeight
+    }
+    const { center, zoom } = fitBounds(newBounds, mapSize)
+    setMapZoom(zoom)
+    setMapCenter(center)
+    setMapFitted(true)
+  }
+
+  // Fit bounds on mount, and when the markers change
+  useEffect(() => {
+    if (mapLoaded) return
+    if (showDrivers.length === 0) {
+      setMapZoom(defaultZoom)
+      setMapCenter(defaultCenter)
+      setMapFitted(false)
+      return
+    }
+    if (!mapFitted) {
+      mapFit()
+    }
+  }, [showDrivers, mapLoaded, mapFitted])
+
+  useEffect(() => {
+    if (selectedDriver) {
+      setShowDrivers([selectedDriver])
+    } else {
+      if (driversIsOnline) {
+        setShowDrivers(onlineDrivers)
+      } else {
+        setShowDrivers(offlineDrivers)
+      }
+    }
+  }, [onlineDrivers, offlineDrivers, driversIsOnline, selectedDriver])
+
+  const handleMapChange = (data) => {
+    setMapZoom(data?.zoom)
+  }
+
+  useEffect(() => {
+    if (!selectedDriver?.id) return
+    setMapFitted(false)
+  }, [selectedDriver?.id])
+
+  return (
+    <WrapperMap ref={mapRef} className='drivers-location'>
+      {googleMapsApiKey && (
+        <GoogleMapReact
+          bootstrapURLKeys={{
+            key: window.document.getElementById('__googleMapsScriptId') ? null : googleMapsApiKey,
+            libraries: ['places', 'geometry', 'drawing', 'visualization']
+          }}
+          onGoogleApiLoaded={() => setMapLoaded(false)}
+          defaultCenter={defaultCenter}
+          center={mapCenter}
+          defaultZoom={defaultZoom}
+          zoom={mapZoom}
+          options={{ fullscreenControl: true }}
+          className='map'
+          onChange={(data) => handleMapChange(data)}
+          yesIWantToUseGoogleMapApiInternals
+        >
+          {showDrivers.length !== 0 &&
+            showDrivers.map((driver) => (
+              <DriverMapMarkerAndInfo
+                key={driver.id}
+                driver={driver}
+                lat={
+                  (driver.location !== null && typeof driver.location === 'object' && driver.location?.lat)
+                    ? driver.location.lat
+                    : typeof driver.location === 'string'
+                      ? parseFloat(driver?.location?.split(',')[0].replace(/[^-.0-9]/g, ''))
+                      : defaultCenter.lat
+                }
+                lng={
+                  (driver.location !== null && typeof driver.location === 'object' && driver.location?.lng)
+                    ? driver.location.lng
+                    : typeof driver.location === 'string'
+                      ? parseFloat(driver?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+                      : defaultCenter.lng
+                }
+              />
+            ))}
+        </GoogleMapReact>
+      )}
+    </WrapperMap>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/DriversLocation/styles.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+export const WrapperMap = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: #EEE;
+  position: relative;
+`