ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,94 @@
+import styled from 'styled-components'
+import React from 'react'
+
+export const WrapperMap = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: #EEE;
+  position: relative;
+`
+export const WrapperOnlineDrivers = styled.div`
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 0px 3px 6px #00000029;
+  max-width: 60%;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  overflow-y: hidden;
+  & > p {
+    font-weight: 600;
+    font-size: 14px;
+    color: ${props => props.theme.colors.primary};
+    margin: 0 0 5px 0;
+  }
+`
+export const OnlineDrivers = styled.div`
+  display: flex;
+`
+export const WrapDriverInfo = styled.div`
+  display: flex;
+  column-gap: 10px;
+  align-items: center;
+  margin: 0 10px;
+  color: ${props => props.theme.colors?.headingColor};
+`
+export const WrapperDriverImage = styled.div`
+  width: 50px;
+  height: 50px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  box-shadow: 0px 3px 6px #00000029;
+  border-radius: 6px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    padding: 3px;
+    box-sizing: border-box;
+    border: none;
+    background: none;
+  }
+`
+const DriverImgStyled = 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: 5px;
+`
+export const DriverImage = (props) => {
+  return (
+    <DriverImgStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </DriverImgStyled>
+  )
+}
+
+export const DriverInfo = styled.div`
+  p {
+    margin: 0px;
+    &:first-child {
+      font-size: 14px;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:last-child {
+      font-size: 12px;
+    }
+  }
+`

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

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useLanguage, useConfig, OrdersManage as OrdersManageController } from 'ordering-components-external'
+import { OrdersContentHeader } from '../OrdersContentHeader'
+import { OrderDetails } from '../OrderDetails'
+import { OrderNotification } from '../OrderNotification'
+import { DeliveryDashboard } from '../DeliveryDashboard'
+
+import {
+  DeliveriesContainer,
+  OrdersContent,
+  WrapItemView
+} from './styles'
+
+const DeliveriesManagerUI = (props) => {
+  const {
+    searchValue,
+    driverGroupList,
+    driversList,
+    paymethodsList,
+    businessesList,
+    ordersStatusGroup,
+    filterValues,
+    deletedOrderId,
+    handleChangeSearch,
+    handleChangeFilterValues,
+    handleOrdersStatusGroupFilter,
+    handleSelectedOrderIds,
+    selectedSubOrderStatus,
+    handleSelectedSubOrderStatus,
+    onOrderRedirect,
+    numberOfOrdersByStatus,
+    numberOfOrdersBySubstatus
+  } = props
+
+  const [, t] = useLanguage()
+  const query = new URLSearchParams(useLocation().search)
+  const [isOpenOrderDetail, setIsOpenOrderDetail] = useState(false)
+  const [orderDetailId, setOrderDetailId] = useState(null)
+  const [detailsOrder, setDetailsOrder] = useState(null)
+  const [filterModalOpen, setFilterModalOpen] = useState(false)
+  const [timeStatus, setTimeStatus] = useState(null)
+  const [slaSettingTime, setSlaSettingTime] = useState(60000)
+
+  const [configState] = useConfig()
+  const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
+
+  const handleBackRedirect = () => {
+    setIsOpenOrderDetail(false)
+    onOrderRedirect()
+  }
+
+  const handleOpenOrderDetail = (order) => {
+    setDetailsOrder(order)
+    setOrderDetailId(order.id)
+    onOrderRedirect(order.id)
+    setIsOpenOrderDetail(true)
+  }
+
+  useEffect(() => {
+    const id = query.get('id')
+    if (id === null) setIsOpenOrderDetail(false)
+    else {
+      setOrderDetailId(id)
+      onOrderRedirect(id)
+      setIsOpenOrderDetail(true)
+    }
+  }, [])
+
+  return (
+    <>
+      <DeliveriesContainer>
+        <OrdersContentHeader
+          isDisableControl
+          title={t('DELIVERY_DASHBOARD', 'Delivery dashboard')}
+          isShowMapsKeySettingButton={!googleMapsApiKey}
+          searchValue={searchValue}
+          driverGroupList={driverGroupList}
+          driversList={driversList}
+          paymethodsList={paymethodsList}
+          businessesList={businessesList}
+          filterValues={filterValues}
+          handleChangeSearch={handleChangeSearch}
+          handleChangeFilterValues={handleChangeFilterValues}
+          filterModalOpen={filterModalOpen}
+          setFilterModalOpen={setFilterModalOpen}
+          setTimeStatus={setTimeStatus}
+          setSlaSettingTime={setSlaSettingTime}
+        />
+        <OrdersContent>
+          <WrapItemView>
+            <DeliveryDashboard
+              searchValue={searchValue}
+              filterValues={filterValues}
+              driversList={driversList}
+              deletedOrderId={deletedOrderId}
+              ordersStatusGroup={ordersStatusGroup}
+              selectedSubOrderStatus={selectedSubOrderStatus}
+              handleSelectedOrderIds={handleSelectedOrderIds}
+              handleOpenOrderDetail={handleOpenOrderDetail}
+              handleOrdersStatusGroupFilter={handleOrdersStatusGroupFilter}
+              handleSelectedSubOrderStatus={handleSelectedSubOrderStatus}
+              isOnlyDelivery
+              setFilterModalOpen={setFilterModalOpen}
+              slaSettingTime={slaSettingTime}
+              timeStatus={timeStatus}
+              numberOfOrdersByStatus={numberOfOrdersByStatus}
+              numberOfOrdersBySubstatus={numberOfOrdersBySubstatus}
+            />
+          </WrapItemView>
+        </OrdersContent>
+      </DeliveriesContainer>
+
+      {isOpenOrderDetail && (
+        <OrderDetails
+          open={isOpenOrderDetail}
+          order={detailsOrder}
+          orderId={orderDetailId}
+          driversList={driversList}
+          onClose={() => handleBackRedirect()}
+        />
+      )}
+      <OrderNotification
+        isOnlyDelivery
+      />
+    </>
+  )
+}
+
+export const DeliveriesManager = (props) => {
+  const OrdersListControlProps = {
+    ...props,
+    UIComponent: DeliveriesManagerUI,
+    driversPropsToFetch: ['id', 'name', 'lastname', 'location', 'enabled', 'available', 'busy', 'driver_groups', 'assigned_orders_count', 'last_order_assigned_at', 'last_location_at', 'cellphone', 'photo', 'qualification']
+  }
+  return <OrdersManageController {...OrdersListControlProps} />
+}

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

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const DeliveriesContainer = 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 OrdersContent = styled.div`
+`
+export const WrapItemView = styled.div`
+  width: 100%;
+`

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

@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+import { DeliveriesLocation } from '../DeliveriesLocation'
+import { OrdersDashboardList } from '../OrdersDashboardList'
+import { OrderStatusFilterBar } from '../OrderStatusFilterBar'
+import { OrderStatusSubFilter } from '../OrderStatusSubFilter'
+import {
+  DeliveryDashboardContainer,
+  OrdersContainer,
+  FilterContainer,
+  WrapperOrderlist,
+  WrapperDeliveriesLocation
+} from './styles'
+export const DeliveryDashboard = (props) => {
+  const {
+    driversList,
+    ordersStatusGroup,
+    selectedSubOrderStatus,
+    handleOrdersStatusGroupFilter,
+    handleSelectedSubOrderStatus,
+    numberOfOrdersByStatus,
+    numberOfOrdersBySubstatus
+  } = props
+
+  const [interActionMapOrder, setInterActionMapOrder] = useState(null)
+
+  const handleUpdateDriverLocation = (order) => {
+    setInterActionMapOrder({ ...order })
+  }
+
+  const handleLocation = (order) => {
+    if (interActionMapOrder?.id === order?.id) {
+      setInterActionMapOrder(null)
+    } else {
+      setInterActionMapOrder({ ...order })
+    }
+  }
+
+  return (
+    <DeliveryDashboardContainer>
+      <OrdersContainer>
+        <FilterContainer>
+          <OrderStatusFilterBar
+            selectedOrderStatus={ordersStatusGroup}
+            changeOrderStatus={handleOrdersStatusGroupFilter}
+            numberOfOrdersByStatus={numberOfOrdersByStatus}
+          />
+          <OrderStatusSubFilter
+            ordersStatusGroup={ordersStatusGroup}
+            selectedSubOrderStatus={selectedSubOrderStatus}
+            handleSelectedSubOrderStatus={handleSelectedSubOrderStatus}
+            numberOfOrdersBySubstatus={numberOfOrdersBySubstatus}
+          />
+        </FilterContainer>
+        <WrapperOrderlist id='cardOrders'>
+          <OrdersDashboardList
+            {...props}
+            orderListView='card'
+            selectedOrderCard={interActionMapOrder}
+            handleOrderCardClick={handleLocation}
+            handleUpdateDriverLocation={handleUpdateDriverLocation}
+          />
+        </WrapperOrderlist>
+      </OrdersContainer>
+      <WrapperDeliveriesLocation>
+        <DeliveriesLocation
+          driversList={driversList}
+          interActionMapOrder={interActionMapOrder}
+        />
+      </WrapperDeliveriesLocation>
+    </DeliveryDashboardContainer>
+  )
+}

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

@@ -0,0 +1,65 @@
+import styled, { css } from 'styled-components'
+
+export const DeliveryDashboardContainer = 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'};
+  padding: 0 12px;
+  z-index: 100;
+`
+
+export const OrdersContainer = styled.div`
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 8px;
+  height: 100%;
+  overflow: hidden;
+  margin-top: 20px;
+
+  @media (min-width: 1024px) {
+    width: 330px;
+    max-width: 330px;
+    margin-top: 0px;
+  }
+
+  @media (min-width: 1300px) {
+    max-width: 500px;
+    width: 500px;
+  }
+`
+
+export const WrapperOrderlist = styled.div`
+  height: 100%;
+`
+
+export const WrapperDeliveriesLocation = styled.div`
+  height: calc(var(--vh, 1vh) * 100 - 180px);
+  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/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;
+`