ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,71 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+  padding: 5px 10px;
+
+  img {
+    width: 45px;
+  }
+`
+
+export const PlaceholderTitle = styled(Option)`
+  padding: 10px;
+`
+
+export const OptionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const OptionName = styled.div`
+  color: #263238;
+  font-size: 16px;
+  line-height: 1.3;
+`
+export const OptionCategory = styled.div`
+  color: #263238;
+  font-size: 12px;
+  line-height: 1.3;
+`
+
+export const WrapperBusinessImage = styled.div`
+  width: 45px;
+  height: 45px;
+  border: 1px solid #E3E3E3;
+  border-radius: 10px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+`
+
+const BusinessImageStyled = 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 BusinessImage = (props) => {
+  return (
+    <BusinessImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </BusinessImageStyled>
+  )
+}

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

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, CountryList as CountryListControler } from 'ordering-components-external'
+import { MultiSelect } from '../../../styles/MultiSelect'
+import { PlaceholderTitle, Option, SkeletonWrapper } from './styles'
+import Skeleton from 'react-loading-skeleton'
+
+const CountryFilterUI = (props) => {
+  const {
+    countriesState,
+    filterValues,
+    handleChangeCountryCode
+  } = props
+
+  const [, t] = useLanguage()
+
+  const placeholder = (
+    <PlaceholderTitle>
+      {t('SELECT_A_COUNTRY', 'Select a country')}
+    </PlaceholderTitle>
+  )
+
+  const [countryTypes, setCountryTypes] = useState([])
+
+  useEffect(() => {
+    const _countryList = []
+    if (!countriesState.loading) {
+      const _groupsOption = countriesState.countries.map((country) => {
+        return {
+          value: country.code,
+          content: (
+            <Option>{country.name}</Option>
+          )
+        }
+      })
+
+      for (const option of _groupsOption) {
+        _countryList.push(option)
+      }
+    }
+    setCountryTypes(_countryList)
+  }, [countriesState])
+
+  return (
+    <>
+      {!countriesState.loading ? (
+        <MultiSelect
+          placeholder={placeholder}
+          defaultValue={filterValues.countryCode}
+          options={countryTypes}
+          onChange={(code) => handleChangeCountryCode(code)}
+          optionInnerMaxHeight='200px'
+        />
+      ) : (
+        <SkeletonWrapper>
+          <Skeleton style={{ height: '57px' }} />
+        </SkeletonWrapper>
+      )}
+    </>
+  )
+}
+
+export const CountryFilter = (props) => {
+  const countryFilterProps = {
+    ...props,
+    UIComponent: CountryFilterUI
+  }
+  return <CountryListControler {...countryFilterProps} />
+}

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

@@ -0,0 +1,29 @@
+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;
+    `} 
+  }
+`
+
+export const SkeletonWrapper = styled.div`
+  > span {
+    display: flex;
+  }
+`

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

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { MultiSelect } from '../../../styles/MultiSelect'
+import { PlaceholderTitle, Option } from './styles'
+import { currencyList } from '../../../../../../config/constants'
+
+export const CurrencyFilter = (props) => {
+  const {
+    filterValues,
+    handleChangeCurrency
+  } = props
+
+  const [, t] = useLanguage()
+
+  const placeholder = (
+    <PlaceholderTitle>
+      {t('SELECT_A_CURRENCY', 'Select a currency')}
+    </PlaceholderTitle>
+  )
+
+  const [countryTypes, setCountryTypes] = useState([])
+
+  useEffect(() => {
+    const _countryList = []
+    const _groupsOption = currencyList.map((country) => {
+      return {
+        value: country.value,
+        content: (
+          <Option>{country.text}</Option>
+        )
+      }
+    })
+
+    for (const option of _groupsOption) {
+      _countryList.push(option)
+    }
+    setCountryTypes(_countryList)
+  }, [currencyList])
+
+  return (
+    <MultiSelect
+      placeholder={placeholder}
+      defaultValue={filterValues.currency}
+      options={countryTypes}
+      onChange={(code) => handleChangeCurrency(code)}
+      optionInnerMaxHeight='200px'
+    />
+  )
+}

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

@@ -0,0 +1,29 @@
+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;
+    `} 
+  }
+`
+
+export const SkeletonWrapper = styled.div`
+  > span {
+    display: flex;
+  }
+`

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

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import DatePicker from 'react-datepicker'
+import 'react-datepicker/dist/react-datepicker.css'
+import dayjs from 'dayjs'
+
+import { Select } from '../../../styles/Select/FirstSelect'
+import { Option, DateContainer, PlaceholderTitle } from './styles'
+
+export const DateTypeSelector = (props) => {
+  const {
+    filterValues,
+    handleChangeDateType,
+    handleChangeFromDate,
+    handleChangeEndDate
+  } = props
+
+  const [, t] = useLanguage()
+  const [startDate, setStartDate] = useState(null)
+  const [endDate, setEndDate] = useState(null)
+
+  const dateTypes = [
+    { value: 'default', content: <PlaceholderTitle>{t('SELECT_DATE', 'Select date')}</PlaceholderTitle> },
+    { value: 'today', content: <Option>{t('TODAY', 'Today')}</Option> },
+    { value: 'yesterday', content: <Option>{t('YESTERDAY', 'Yesterday')}</Option> },
+    { value: 'last7', content: <Option>{t('LAST_7_DAYS', 'Last 7 dyas')}</Option> },
+    { value: 'last30', content: <Option>{t('LAST_30_DAYS', 'Last 30 days')}</Option> },
+    {
+      value: 'term',
+      content: (
+        <Option isDateOption>
+          <DateContainer>
+            <span>{t('FROM', 'From')}</span>
+            <DatePicker
+              selected={startDate}
+              placeholderText='mm/dd/yyyy'
+              className='startDate'
+              isClearable
+              onChange={date => _handleChangeFromDate(date)}
+            />
+          </DateContainer>
+          <DateContainer>
+            <span>{t('TO', 'To')}</span>
+            <DatePicker
+              selected={endDate}
+              minDate={new Date(startDate)}
+              placeholderText='mm/dd/yyyy'
+              className='endDate'
+              onChange={date => _handleChangeEndDate(date)}
+            />
+          </DateContainer>
+        </Option>
+      )
+    }
+  ]
+
+  const changeDateType = (dateType) => {
+    handleChangeDateType(dateType)
+  }
+
+  const _handleChangeFromDate = (date) => {
+    setStartDate(date)
+    if (date !== null) {
+      handleChangeFromDate(dayjs(date).format('YYYY-MM-DD'))
+    } else {
+      handleChangeFromDate(null)
+    }
+  }
+
+  const _handleChangeEndDate = (date) => {
+    setEndDate(date)
+    if (date !== null) {
+      handleChangeEndDate(dayjs(date).format('YYYY-MM-DD'))
+    } else {
+      handleChangeEndDate(null)
+    }
+  }
+  useEffect(() => {
+    if (filterValues.dateType !== 'term') return
+
+    if (filterValues.deliveryFromDatetime !== null) {
+      setStartDate(new Date(filterValues.deliveryFromDatetime))
+    }
+    if (filterValues.deliveryEndDatetime !== null) {
+      setEndDate(new Date(filterValues.deliveryEndDatetime))
+    }
+  }, [filterValues])
+
+  return (
+    <Select
+      defaultValue={filterValues.dateType || 'default'}
+      options={dateTypes}
+      onChange={(dateType) => changeDateType(dateType)}
+      className='date-filter-container'
+    />
+  )
+}

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

@@ -0,0 +1,61 @@
+import styled, { css } from 'styled-components'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 5px 15px;
+
+  svg {
+    margin-right: 5px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `} 
+  }
+
+  ${({ isDateOption }) => isDateOption && css`
+    max-width: calc(100vw - 60px);
+    overflow: auto;
+    ${props => props.theme?.rtl ? css`
+      > div:first-child {
+        margin-left: 10px;
+      }
+    ` : css`
+      > div:first-child {
+        margin-right: 10px;
+      }
+    `}
+  `}
+`
+
+export const PlaceholderTitle = styled(Option)`
+  padding: 10px;
+`
+
+export const DateContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+
+  input {
+    border-radius: 20px;
+    width: 140px;
+    outline: none;
+    padding: 3px 10px;
+    border: 1px solid #F2F2F2;
+  }
+
+  ${props => props.theme?.rtl ? css`
+    span {
+      margin-left: 10px;
+    }
+  ` : css`
+    span {
+      margin-right: 10px;
+    }
+  `}
+
+  @media (min-width: 768px) {
+    padding: 0;
+  }
+`

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

@@ -0,0 +1,282 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { useConfig, useLanguage } from 'ordering-components-external'
+import GoogleMapReact, { fitBounds } from 'google-map-react'
+import { DriverMapMarkerAndInfo } from '../DriverMapMarkerAndInfo'
+import { InterActOrderMarker } from '../InterActOrderMarker'
+import { AutoScroll } from '../../Shared'
+import { useTheme } from 'styled-components'
+
+import {
+  WrapperMap,
+  WrapperOnlineDrivers,
+  OnlineDrivers,
+  WrapperDriverImage,
+  DriverImage,
+  WrapDriverInfo,
+  DriverInfo
+} from './styles'
+
+export const DeliveriesLocation = (props) => {
+  const {
+    driversList,
+    interActionMapOrder
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  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 [mapCenter, setMapCenter] = useState(defaultCenter)
+  const [mapZoom, setMapZoom] = useState(10)
+  const [activeDrivers, setActiveDrivers] = useState([])
+  const [mapLoaded, setMapLoaded] = useState(true)
+  const [mapFitted, setMapFitted] = useState(false)
+
+  const [interActionOrderDriverLocation, setInterActionOrderDriverLocation] = useState(null)
+  const defaultZoom = 10
+  const mapRef = useRef(null)
+
+  const mapFit = () => {
+    const _onlineDrivers = driversList.drivers.filter(
+      (driver) => driver.enabled && driver.available && !driver.busy
+    )
+    setActiveDrivers(_onlineDrivers)
+
+    const bounds = new window.google.maps.LatLngBounds()
+
+    if (interActionMapOrder === null) {
+      if (driversList.drivers.length === 1) {
+        setMapCenter(
+          (driversList.drivers[0].location !== null && typeof driversList.drivers[0].location === 'object' && driversList.drivers[0].location?.lat && driversList.drivers[0].location?.lng)
+            ? driversList.drivers[0].location
+            : typeof driversList.drivers[0].location === 'string'
+              ? {
+                lat: parseFloat(driversList.drivers[0]?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
+                lng: parseFloat(driversList.drivers[0]?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+              }
+              : defaultCenter
+        )
+        setMapZoom(defaultZoom)
+        return
+      }
+      for (const driver of driversList.drivers) {
+        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)
+      }
+    }
+
+    if (interActionMapOrder !== null) {
+      let marker, newPoint
+      marker = interActionMapOrder?.business?.location !== null ? interActionMapOrder?.business?.location : defaultCenter
+      newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
+      bounds.extend(newPoint)
+
+      marker = interActionMapOrder?.customer?.location !== null && interActionMapOrder?.customer?.location?.lat ? interActionMapOrder.customer.location : defaultCenter
+      newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
+      bounds.extend(newPoint)
+
+      if (interActionMapOrder.driver !== null) {
+        marker = (interActionOrderDriverLocation !== null && typeof interActionOrderDriverLocation === 'object' && interActionOrderDriverLocation?.lat && interActionOrderDriverLocation?.lng) ? interActionOrderDriverLocation : defaultCenter
+        newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
+        bounds.extend(newPoint)
+      } else {
+        for (const activeDriver of activeDrivers) {
+          const marker = (activeDriver.location !== null && typeof activeDriver.location === 'object' && activeDriver.location?.lat && activeDriver.location?.lng) ? activeDriver.location : 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 (driversList.loading || driversList.drivers.length === 0 || mapLoaded) return
+    if (interActionMapOrder !== null) {
+      for (const driver of driversList.drivers) {
+        if (driver.id === interActionMapOrder?.driver?.id) {
+          setInterActionOrderDriverLocation(driver.location)
+        }
+      }
+    }
+    if (!mapFitted) {
+      mapFit()
+    }
+  }, [interActionMapOrder, mapLoaded, driversList, mapFitted])
+
+  useEffect(() => {
+    setMapFitted(false)
+  }, [interActionMapOrder])
+
+  const handleMapChange = (data) => {
+    setMapZoom(data?.zoom)
+  }
+
+  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
+        >
+
+          {interActionMapOrder === null && driversList.drivers.length !== 0 &&
+            driversList.drivers.filter(driver => driver?.enabled).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
+                }
+              />
+            ))}
+
+          {interActionMapOrder !== null && (
+            <InterActOrderMarker
+              business={interActionMapOrder?.business}
+              lat={interActionMapOrder?.business?.location?.lat}
+              lng={interActionMapOrder?.business?.location?.lng}
+              image={interActionMapOrder?.business?.logo}
+            />
+          )}
+          {interActionMapOrder !== null && (
+            <InterActOrderMarker
+              customer={interActionMapOrder?.customer}
+              lat={interActionMapOrder?.customer?.location?.lat ? interActionMapOrder?.customer?.location?.lat : defaultCenter.lat}
+              lng={interActionMapOrder?.customer?.location?.lng ? interActionMapOrder?.customer?.location?.lng : defaultCenter.lng}
+              image={interActionMapOrder?.customer?.photo}
+            />
+          )}
+
+          {interActionMapOrder !== null && interActionMapOrder?.driver !== null && (
+            <InterActOrderMarker
+              driver={interActionMapOrder?.driver}
+              lat={
+                (interActionOrderDriverLocation !== null && typeof interActionOrderDriverLocation === 'object' && interActionOrderDriverLocation?.lat)
+                  ? interActionOrderDriverLocation.lat
+                  : typeof interActionOrderDriverLocation === 'string'
+                    ? parseFloat(interActionOrderDriverLocation?.split(',')[0].replace(/[^-.0-9]/g, ''))
+                    : defaultCenter.lat
+              }
+              lng={
+                (interActionOrderDriverLocation !== null && typeof interActionOrderDriverLocation === 'object' && interActionOrderDriverLocation?.lng)
+                  ? interActionOrderDriverLocation.lng
+                  : typeof interActionOrderDriverLocation === 'string'
+                    ? parseFloat(interActionOrderDriverLocation?.split(',')[1].replace(/[^-.0-9]/g, ''))
+                    : defaultCenter.lng
+              }
+              image={interActionMapOrder?.driver?.photo}
+            />
+          )}
+          {interActionMapOrder !== null && interActionMapOrder?.driver === null && activeDrivers.length > 0 && (
+            activeDrivers.map((driver) => (
+              <InterActOrderMarker
+                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
+                }
+                image={driver?.photo}
+              />
+            ))
+          )}
+        </GoogleMapReact>
+      )}
+
+      {interActionMapOrder !== null && interActionMapOrder?.driver === null && activeDrivers.length > 0 && (
+        <WrapperOnlineDrivers>
+          <p>{t('ACTIVE_DRIVERS', 'Drivers online')}</p>
+          <OnlineDrivers>
+            <AutoScroll innerScroll>
+              {activeDrivers.length > 0 && (
+                <>
+                  {activeDrivers.map(driver => (
+                    <WrapDriverInfo key={driver.id}>
+                      <WrapperDriverImage>
+                        <DriverImage bgimage={driver?.photo || theme?.images?.icons?.noDriver} />
+                      </WrapperDriverImage>
+                      <DriverInfo>
+                        <p>{driver.name} {driver.lastname}</p>
+                        <p>{t('DRIVER', 'Driver')}</p>
+                      </DriverInfo>
+                    </WrapDriverInfo>
+                  ))}
+                </>
+              )}
+            </AutoScroll>
+          </OnlineDrivers>
+        </WrapperOnlineDrivers>
+      )}
+    </WrapperMap>
+  )
+}