ordering-ui-external 1.8.7 → 1.8.9

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { MultiSelect } from '../../../styles/MultiSelect'
+
+import {
+  Option,
+  PlaceholderTitle
+} from './styles'
+
+export const DeliveryTypeSelector = (props) => {
+  const {
+    filterValues,
+    handleChangeDeliveryType
+  } = props
+
+  const [, t] = useLanguage()
+
+  const deliveryTypes = [
+    { value: 1, content: <Option>{t('DELIVERY', 'Delivery')}</Option> },
+    { value: 2, content: <Option>{t('PICKUP', 'Pickup')}</Option> },
+    { value: 3, content: <Option>{t('EAT_IN', 'Eat in')}</Option> },
+    { value: 4, content: <Option>{t('CURBSIDE', 'Curbside')}</Option> },
+    { value: 5, content: <Option>{t('DRIVE_THRU', 'Drive thru')}</Option> }
+  ]
+  const placeholder = <PlaceholderTitle>{t('SELECT_DELIVERY_TYPE', 'Select delivery type')}</PlaceholderTitle>
+
+  return (
+    <MultiSelect
+      placeholder={placeholder}
+      defaultValue={filterValues.deliveryTypes}
+      options={deliveryTypes}
+      onChange={(deliveryType) => handleChangeDeliveryType(deliveryType)}
+    />
+  )
+}

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

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

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

@@ -0,0 +1,79 @@
+import React, { useRef, useState, useEffect } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+
+import {
+  WrapperMapMarker,
+  MapMarkerImg,
+  DriverInfo,
+  TextContainer,
+  Text
+} from './styles'
+export const DriverMapMarkerAndInfo = (props) => {
+  const {
+    driver
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ parseDate, optimizeImage }] = useUtils()
+  const [infoShow, setInfoShow] = useState(false)
+  const infoRef = useRef(null)
+  const [infoTop, setInfoTop] = useState('0px')
+
+  useEffect(() => {
+    if (!infoShow) return
+    setInfoTop(`-${infoRef.current.scrollHeight + 55}px`)
+  }, [infoShow])
+
+  return (
+    <>
+      {infoShow && (
+        <DriverInfo ref={infoRef} style={{ transform: `translate(-50%, ${infoTop})` }}>
+          <TextContainer>
+            <Text fontWeight='bold'>
+              {t('NAME', 'Name')}:
+            </Text>
+            <Text>{driver.name} {driver.lastname}</Text>
+          </TextContainer>
+          {driver?.last_order_assigned_at && (
+            <TextContainer>
+              <Text fontWeight='bold'>
+                {t('LAST_ORDER_AT', 'Last order at')}:
+              </Text>
+              <Text>{parseDate(driver.last_order_assigned_at, { utc: false })}</Text>
+            </TextContainer>
+          )}
+          {driver?.drivergroups?.length > 0 && (
+            <TextContainer>
+              <Text fontWeight='bold'>
+                {t('DRIVER_GROUP', 'Driver group')}:
+              </Text>
+              {driver.drivergroups.map(group => (
+                <Text key={group.id}>{group.name},</Text>
+              ))}
+            </TextContainer>
+          )}
+          {driver?.last_location_at && (
+            <TextContainer>
+              <Text fontWeight='bold'>
+                {t('LAST_LOCATION', 'Last location')}:
+              </Text>
+              <Text>{parseDate(driver.last_location_at, { utc: false })}</Text>
+            </TextContainer>
+          )}
+        </DriverInfo>
+      )}
+      <WrapperMapMarker
+        offline={!(driver.enabled && driver.available && !driver.busy)}
+        onMouseOver={() => setInfoShow(true)}
+        onMouseLeave={() => setInfoShow(false)}
+      >
+        {driver.photo ? (
+          <MapMarkerImg bgimage={optimizeImage(driver.photo, 'h_50,c_limit')} />
+        ) : (
+          <MapMarkerImg bgimage={theme?.images?.icons?.noDriver} />
+        )}
+      </WrapperMapMarker>
+    </>
+  )
+}

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

@@ -0,0 +1,81 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const WrapperMapMarker = styled.div`
+  width: 50px;
+  height: 50px;
+  background: #9D9B9B;
+  border: 3px solid #F79B16;
+  border-radius: 100%;
+  position: absolute;
+  transform: translate(-50%, -100%);
+  z-index: 1;
+
+  ${({ offline }) => offline && css`
+    border: 3px solid #9D9B9B;
+  `}
+
+  &:after {
+    content:'';
+    position: absolute;
+    top: 77%;
+    left: 50%;
+    margin-left: -22px;
+    width: 0;
+    height: 0;
+    border-top: solid 22px #F79B16;
+    ${({ offline }) => offline && css`
+      border-top: solid 22px #9D9B9B;
+    `}
+    border-left: solid 22px transparent;
+    border-right: solid 22px transparent;
+    z-index: 10;
+  }
+`
+const MapMarkerImgStyled = 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: 100%;
+  z-index: 100;
+`
+export const MapMarkerImg = (props) => {
+  return (
+    <MapMarkerImgStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </MapMarkerImgStyled>
+  )
+}
+
+export const DriverInfo = styled.div`
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  position: absolute;
+  border-radius: 5px;
+  padding: 10px;
+  row-gap: 5px;
+  z-index: 200;
+  box-shadow: 0px 2px 2px #00000029;
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+`
+export const TextContainer = styled.div`
+  display: flex;
+  column-gap: 10px;
+`
+export const Text = styled.span`
+  ${({ fontWeight }) => fontWeight && css`
+    font-weight: 600;
+  `}
+  font-size: 14px;
+  white-space: nowrap;
+`

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

@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, DriverListDashboard } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+import { Select } from '../../../styles/Select/DashboardSelect'
+import { Select as FirstSelect } from '../../../styles/Select/FirstSelect'
+import { MultiSelect } from '../../../styles/MultiSelect'
+
+import {
+  Option,
+  OptionContent,
+  DriverNameContainer,
+  WrapperDriverImage,
+  DriverImage,
+  DriverName,
+  DriverText,
+  PlaceholderTitle
+} from './styles'
+
+const DriverSelectorUI = (props) => {
+  const {
+    isFirstSelect,
+    order,
+    driversList,
+    defaultValue,
+    isPhoneView,
+    isFilterView,
+    small,
+    padding,
+    orderView,
+    handleAssignDriver,
+    handleChangeDriver,
+    filterValues,
+    isTourOpen,
+    setCurrentTourStep,
+    handleOpenMessages
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [defaultOption, setDefaultOption] = useState(null)
+  const [driversOptionList, setDriversOptionList] = useState([])
+  const [driversMultiOptionList, setDriversMultiOptionList] = useState([])
+  const [searchValue, setSearchValue] = useState(null)
+  const driversLoading = [{ value: 'default', content: <Option small={small}>{t('LOADING', 'loading')}...</Option> }]
+  useEffect(() => {
+    const _driversOptionList = [
+      {
+        value: 'default',
+        content: (
+          <Option
+            padding={orderView ? padding : '0px'}
+          >
+            {orderView ? (
+              <>
+                <WrapperDriverImage small={small} className='driver-photo'>
+                  <DriverImage bgimage={theme?.images?.icons?.noDriver} small={small} />
+                </WrapperDriverImage>
+                <OptionContent>
+                  <DriverNameContainer className='driver-info'>
+                    <DriverName small={small}>{t('NO_DRIVER', 'No Driver')}</DriverName>
+                  </DriverNameContainer>
+                </OptionContent>
+              </>
+            ) : (
+              t('SELECT_DRIVER', 'Select driver')
+            )}
+          </Option>
+        ),
+        color: 'primary',
+        disabled: !isFilterView,
+        showDisable: true
+      }
+    ]
+    if (!isFilterView) {
+      _driversOptionList.push({
+        value: 'remove',
+        content: (
+          <Option isRemove>{t('REMOVE_DRIVER', 'Remove assigned driver')}</Option>
+        ),
+        disabled: defaultValue === 'default'
+      })
+    }
+    if (!driversList.loading) {
+      let _driverList
+      if (searchValue) {
+        _driverList = driversList.drivers.filter(driver => (driver.name + driver.lastname).toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      } else {
+        _driverList = driversList.drivers
+      }
+      const _driversOptionListTemp = _driverList.map((driver, i) => {
+        return {
+          value: driver.id,
+          showDisable: isFilterView ? true : !(isFilterView || (driver?.available && !driver?.busy)),
+          content: (
+            <Option small={small} isPhoneView={isPhoneView} padding={padding} isFilterView={isFilterView}>
+              <WrapperDriverImage small={small} className='driver-photo'>
+                <DriverImage bgimage={driver.photo || theme.images.icons?.noDriver} small={small} />
+              </WrapperDriverImage>
+              <OptionContent>
+                <DriverNameContainer className='driver-info'>
+                  <DriverName small={small}>{driver.name} {driver.lastname}</DriverName>
+                  <DriverText small={small}>{t('DRIVER', 'Driver')}</DriverText>
+                </DriverNameContainer>
+              </OptionContent>
+            </Option>
+          )
+        }
+      })
+
+      setDriversMultiOptionList(_driversOptionListTemp)
+
+      for (const option of _driversOptionListTemp) {
+        _driversOptionList.push(option)
+      }
+    }
+    setDriversOptionList(_driversOptionList)
+  }, [driversList, defaultValue, searchValue])
+
+  const changeDriver = (driverId) => {
+    if (isFilterView) {
+      if (driverId === 'default') {
+        handleChangeDriver(null)
+      } else {
+        handleChangeDriver(driverId)
+      }
+      return
+    }
+    if (driverId === 'default') return
+    if (driverId === 'remove') {
+      driverId = null
+    }
+    handleAssignDriver({ orderId: order.id, driverId: driverId })
+    if (isTourOpen && setCurrentTourStep) {
+      handleOpenMessages('chat')
+      setTimeout(() => {
+        isTourOpen && setCurrentTourStep && setCurrentTourStep(3)
+      }, 50)
+    }
+  }
+
+  useEffect(() => {
+    setDefaultOption(defaultValue)
+  }, [defaultValue])
+
+  const Placeholder = <PlaceholderTitle>{t('SELECT_DRIVER', 'Select driver')}</PlaceholderTitle>
+
+  const handleSearch = (val) => {
+    setSearchValue(val)
+  }
+
+  if (isFilterView) {
+    return (
+      <>
+        {!driversList.loading ? (
+          <MultiSelect
+            defaultValue={filterValues.driverIds}
+            placeholder={Placeholder}
+            options={driversMultiOptionList}
+            optionInnerMargin='10px'
+            optionInnerMaxHeight='150px'
+            onChange={(driver) => handleChangeDriver(driver)}
+          />
+        ) : (
+          <MultiSelect
+            defaultValue='default'
+            options={driversLoading}
+            optionInnerMargin='10px'
+            optionInnerMaxHeight='150px'
+            className='driver-select'
+          />
+        )}
+      </>
+    )
+  } else {
+    return (
+      <>
+        {!driversList.loading ? (
+          <>
+            {isFirstSelect ? (
+              <FirstSelect
+                defaultValue={defaultOption || 'default'}
+                options={driversOptionList}
+                optionInnerMaxHeight='200px'
+                onChange={(driverId) => changeDriver(driverId)}
+                isShowSearchBar
+                searchBarPlaceholder={t('SEARCH', 'Search')}
+                searchBarIsCustomLayout
+                searchBarIsNotLazyLoad
+                searchValue={searchValue}
+                handleChangeSearch={handleSearch}
+                className='driver-select'
+              />
+            ) : (
+              <Select
+                defaultValue={defaultOption || 'default'}
+                options={driversOptionList}
+                optionInnerMaxHeight='200px'
+                onChange={(driverId) => changeDriver(driverId)}
+                isShowSearchBar
+                searchBarIsNotLazyLoad
+                searchBarPlaceholder={t('SEARCH', 'Search')}
+                searchBarIsCustomLayout
+                searchValue={searchValue}
+                handleChangeSearch={handleSearch}
+                className='driver-select'
+              />
+            )}
+          </>
+        ) : (
+          <>
+            <Select
+              placeholder={t('SELECT_DRIVER', 'Select driver')}
+              defaultValue='default'
+              options={driversLoading}
+              optionInnerMargin='10px'
+              optionInnerMaxHeight='200px'
+              className='driver-select'
+            />
+          </>
+        )}
+      </>
+    )
+  }
+}
+
+export const DriverSelector = (props) => {
+  const DriversControlProps = {
+    ...props,
+    UIComponent: DriverSelectorUI,
+    propsToFetch: ['id', 'name', 'lastname', 'cellphone', 'photo']
+  }
+  return (
+    <>
+      <DriverListDashboard {...DriversControlProps} />
+    </>
+  )
+}

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

@@ -0,0 +1,142 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${props => props.theme.colors?.headingColor};
+  padding: ${({ padding }) => padding || '5px 10px'};
+  white-space: nowrap;
+  ${({ isPhoneView }) => isPhoneView && css`
+    width: 100%;
+  `}
+  ${({ isRemove }) => isRemove && css`
+    color: ${props => props.theme.colors.danger};
+    padding: 3px 10px;
+    font-size: 14px;
+  `}
+
+  img {
+    width: 45px;
+    border-radius: 8px;
+  }
+
+  ${({ small }) => small && css`
+    padding: ${({ padding }) => padding || '5px 0px'};
+    img {
+      width: 25px;
+    }
+  `}
+
+  @media (max-width: 576px) {
+    padding: ${({ padding }) => padding || '5px 0px'};
+    ${({ isFilterView }) => isFilterView && css`
+      ${props => props.theme?.rtl ? css`
+        margin-right: 10px;
+      ` : css`
+        margin-left: 10px;
+      `}
+    `}
+  }
+`
+
+export const OptionContent = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const DriverNameContainer = styled.div`
+  line-height: 1.3;
+  color: #263238;
+`
+
+export const DriverName = styled.p`
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: ${props => props.theme.colors.headingColor};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  margin: 0px;
+
+  ${({ small }) => small && css`
+    font-weight: 400;
+  `}
+
+  @media (max-width: 576px) {
+    max-width: 90px;
+  }
+`
+export const DriverText = styled.span`
+  font-size: 12px;
+  color: ${props => props.theme.colors.lightGray};
+  ${({ small }) => small && css`
+    display: none;
+  `}
+`
+
+export const WrapperDriverImage = styled.div`
+  width: 45px;
+  height: 45px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  display: flex;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 7px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+
+  ${({ small }) => small && css`
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    svg {
+      padding: 3px;
+    }
+  `}
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 8px;
+  ` : css`
+    margin-right: 8px;
+  `}
+`
+const DriverImageStyled = 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: 8px;
+`
+export const DriverImage = (props) => {
+  return (
+    <DriverImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </DriverImageStyled>
+  )
+}
+
+export const PlaceholderTitle = styled(Option)`
+  padding: 10px;
+
+  ${({ isSingle }) => isSingle && css`
+    padding: 0px;
+    font-size: 14px;
+  `}
+`

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { Button } from '../../../styles/Buttons'
+import MdClose from '@meronex/icons/ios/MdClose'
+
+import {
+  Container
+} from './styles'
+
+export const DriversBusyStatusFilter = (props) => {
+  const {
+    driversSubfilter,
+    handleChangeDriversSubFilter,
+    numberOfbusyDrivers,
+    numberOfnotBusyDrivers
+  } = props
+  const [, t] = useLanguage()
+  return (
+    <Container>
+      <Button
+        color={driversSubfilter.busy ? 'primary' : 'secundary'}
+        onClick={() => handleChangeDriversSubFilter({ ...driversSubfilter, busy: !driversSubfilter.busy })}
+      >
+        {t('BUSY', 'Busy')}
+        <span>({numberOfbusyDrivers ?? 0})</span>
+        {driversSubfilter.busy && <MdClose />}
+      </Button>
+      <Button
+        color={driversSubfilter.notBusy ? 'primary' : 'secundary'}
+        onClick={() => handleChangeDriversSubFilter({ ...driversSubfilter, notBusy: !driversSubfilter.notBusy })}
+      >
+        {t('NOT_BUSY', 'Not busy')}
+        <span>({numberOfnotBusyDrivers ?? 0})</span>
+        {driversSubfilter.notBusy && <MdClose />}
+      </Button>
+    </Container>
+  )
+}

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

@@ -0,0 +1,20 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  dispaly: flex;
+  button {
+    margin: 10px;
+    white-space: nowrap;
+    font-size: 14px;
+
+    svg {
+      font-size: 20px;
+
+      ${props => props.theme?.rtl ? css`
+        margin-right: 10px;
+      ` : css`
+        margin-left: 10px;
+      `}
+    }
+  }
+`