ordering-ui-external 1.8.8 → 1.8.9

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

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

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useLanguage, useConfig, DriverListDashboard as DriverListController } from 'ordering-components-external'
+import { DriversDashboard } from '../DriversDashboard'
+import { OrdersLateralBar } from '../OrdersLateralBar'
+import { SearchBar } from '../../Shared'
+import { OrderNotification } from '../OrderNotification'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import { IconButton } from '../../../styles/Buttons'
+import { useInfoShare } from '../../../../../../contexts/InfoShareContext'
+import { GoogleMapsApiKeySettingButton } from '../GoogleMapsApiKeySettingButton'
+
+import {
+  DriversHeader,
+  HeaderTitleContainer,
+  DriversContainer,
+  DriversContent
+} from './styles'
+
+const DriversManagerUI = (props) => {
+  const {
+    onDriverRedirect,
+    handleChangeSearch,
+    searchValue,
+    driversIsOnline,
+    driversList
+  } = props
+
+  const drivers = driversList?.drivers
+  const loading = driversList?.loading
+  const [, t] = useLanguage()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const [configState] = useConfig()
+  const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
+
+  const query = new URLSearchParams(useLocation().search)
+  const [isOpenDriverOrders, setIsOpenDriverOrders] = useState(false)
+  const [selectedDriver, setSelectedDriver] = useState(null)
+  const [openDriver, setOpenDriver] = useState(null)
+
+  const handleBackRedirect = () => {
+    setIsOpenDriverOrders(false)
+    onDriverRedirect()
+  }
+
+  const handleChangeDriver = (driver) => {
+    if (selectedDriver?.id === driver.id) {
+      setSelectedDriver(null)
+    } else {
+      setSelectedDriver(driver)
+    }
+  }
+
+  const handleOpenDriverOrders = (driver) => {
+    onDriverRedirect(driver?.id)
+    setOpenDriver(driver)
+    setIsOpenDriverOrders(true)
+  }
+
+  useEffect(() => {
+    if (loading) return
+    const id = query.get('id')
+    if (id === null) setIsOpenDriverOrders(false)
+    else {
+      const driver = drivers.find(_driver => _driver.id === parseInt(id))
+      setOpenDriver(driver)
+      setIsOpenDriverOrders(true)
+    }
+  }, [drivers, loading])
+
+  useEffect(() => {
+    setSelectedDriver(null)
+  }, [driversIsOnline])
+
+  return (
+    <>
+      <DriversContainer>
+        <DriversHeader>
+          <HeaderTitleContainer>
+            {isCollapse && (
+              <IconButton
+                color='black'
+                onClick={() => handleMenuCollapse(false)}
+              >
+                <MenuIcon />
+              </IconButton>
+            )}
+            <h1>{t('DRIVERS_DASHBOARD', 'Drivers dashboard')}</h1>
+          </HeaderTitleContainer>
+          {!googleMapsApiKey && (
+            <GoogleMapsApiKeySettingButton />
+          )}
+          <SearchBar
+            isCustomLayout
+            lazyLoad
+            onSearch={handleChangeSearch}
+            search={searchValue}
+            placeholder={t('SEARCH', 'Search')}
+          />
+        </DriversHeader>
+        <DriversContent>
+          <DriversDashboard
+            {...props}
+            selectedDriver={selectedDriver}
+            handleChangeDriver={handleChangeDriver}
+            handleOpenDriverOrders={handleOpenDriverOrders}
+          />
+        </DriversContent>
+
+        {isOpenDriverOrders && openDriver && (
+          <OrdersLateralBar
+            isDriver
+            open={isOpenDriverOrders}
+            user={openDriver}
+            onClose={() => handleBackRedirect()}
+          />
+        )}
+
+        <OrderNotification />
+      </DriversContainer>
+    </>
+  )
+}
+
+export const DriversManager = (props) => {
+  const DriversControlProps = {
+    ...props,
+    asDashboard: true,
+    UIComponent: DriversManagerUI
+  }
+  return (
+    <>
+      <DriverListController {...DriversControlProps} />
+    </>
+  )
+}

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

@@ -0,0 +1,71 @@
+import styled, { css } from 'styled-components'
+
+export const DriversContainer = styled.div`
+  flex: 1;
+  transition: all 0.5s;
+  padding: 20px;
+  box-sizing: border-box;
+  max-height: 100vh;
+  overflow: auto;
+
+  @media print {
+    display: none;
+  }
+`
+
+export const DriversHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  > div:last-child {
+    margin-top: 20px;
+  }
+
+  input {
+    background: ${props => props.theme.colors.secundary};
+    border: none;
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    > div:last-child {
+      margin-top: 0px;
+    }
+  }
+`
+
+export const HeaderTitleContainer = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+
+  h1 {
+    color: ${(props) => props.theme.colors.headingColor};
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 30px;
+    margin: 0px;
+    text-transform: capitalize;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+
+export const DriversContent = styled.div`
+`

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import {
+  Container,
+  Tab
+} from './styles'
+
+export const DriversOnlineOfflineFilter = (props) => {
+  const {
+    driversIsOnline,
+    handleChangeDriverIsOnline,
+    numberOfonlineDrivers,
+    numberOfofflineDrivers
+  } = props
+  const [, t] = useLanguage()
+  return (
+    <Container>
+      <Tab
+        active={driversIsOnline}
+        onClick={() => handleChangeDriverIsOnline(true)}
+      >
+        {t('ONLINE', 'Online')}
+        <span>({numberOfonlineDrivers ?? 0})</span>
+      </Tab>
+      <Tab
+        active={!driversIsOnline}
+        onClick={() => handleChangeDriverIsOnline(false)}
+      >
+        {t('INACTIVE_DRIVERS', 'Offline')}
+        <span>({numberOfofflineDrivers ?? 0})</span>
+      </Tab>
+    </Container>
+  )
+}

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

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  border-bottom: 1px solid #CCC;
+`
+
+export const Tab = styled.div`
+  padding: 10px 15px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  white-space: nowrap;
+
+  ${({ active }) => active && css`
+    border-bottom: 3px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: #909BA9;
+  `}
+`