ordering-ui-external 10.0.1 → 10.2.0

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

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react'
+import { useConfig, DriversList as DriversController } from 'ordering-components-external'
+import { OrdersLateralBar } from '../../OrdersLateralBar'
+import { GoogleMapsApiKeySettingButton } from '../../GoogleMapsApiKeySettingButton'
+import { DriversOnlineOfflineFilter } from '../../DriversOnlineOfflineFilter'
+import { DriversBusyStatusFilter } from '../../DriversBusyStatusFilter'
+import { DriversList } from '../../DriversList'
+
+import {
+  DriversHeader,
+  DriversContainer,
+  DriversContent,
+
+  DriverListContainer,
+  FilterContainer,
+  WrapperDriversList
+} from './styles'
+
+const DriversManagerUI = (props) => {
+  const {
+    driversIsOnline,
+    driversList,
+    handleChangeDriverIsOnline,
+    driversSubfilter,
+    handleChangeDriversSubFilter,
+    onlineDrivers,
+    offlineDrivers,
+    setMapsData
+  } = props
+
+  const [configState] = useConfig()
+  const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
+
+  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
+
+  const [isOpenDriverOrders, setIsOpenDriverOrders] = useState(false)
+  const [selectedDriver, setSelectedDriver] = useState(null)
+  const [openDriver, setOpenDriver] = useState(null)
+
+  const handleBackRedirect = () => {
+    setIsOpenDriverOrders(false)
+  }
+
+  const handleChangeDriver = (driver) => {
+    if (selectedDriver?.id === driver.id) {
+      setSelectedDriver(null)
+    } else {
+      setSelectedDriver(driver)
+    }
+  }
+
+  const handleOpenDriverOrders = (driver) => {
+    setOpenDriver(driver)
+    setIsOpenDriverOrders(true)
+  }
+
+  useEffect(() => {
+    setSelectedDriver(null)
+  }, [driversIsOnline])
+
+  useEffect(() => {
+    setMapsData({
+      driversIsOnline: driversIsOnline,
+      onlineDrivers: onlineDrivers,
+      offlineDrivers: offlineDrivers,
+      selectedDriver: selectedDriver
+    })
+  }, [driversIsOnline, selectedDriver, onlineDrivers, offlineDrivers])
+
+  return (
+    <>
+      <DriversContainer>
+        <DriversHeader>
+          {!googleMapsApiKey && (
+            <GoogleMapsApiKeySettingButton />
+          )}
+        </DriversHeader>
+        <DriversContent>
+          <DriverListContainer>
+            <FilterContainer>
+              <DriversOnlineOfflineFilter
+                driversIsOnline={driversIsOnline}
+                handleChangeDriverIsOnline={handleChangeDriverIsOnline}
+                numberOfonlineDrivers={numberOfonlineDrivers}
+                numberOfofflineDrivers={numberOfofflineDrivers}
+              />
+              <DriversBusyStatusFilter
+                driversSubfilter={driversSubfilter}
+                handleChangeDriversSubFilter={handleChangeDriversSubFilter}
+                numberOfbusyDrivers={numberOfbusyDrivers}
+                numberOfnotBusyDrivers={numberOfnotBusyDrivers}
+              />
+            </FilterContainer>
+            <WrapperDriversList>
+              <DriversList
+                hidePhoto
+                loading={driversList.loading}
+                driversIsOnline={driversIsOnline}
+                onlineDrivers={onlineDrivers}
+                offlineDrivers={offlineDrivers}
+                selectedDriver={selectedDriver}
+                handleChangeDriver={handleChangeDriver}
+                handleOpenDriverOrders={handleOpenDriverOrders}
+              />
+            </WrapperDriversList>
+          </DriverListContainer>
+        </DriversContent>
+
+        {isOpenDriverOrders && openDriver && (
+          <OrdersLateralBar
+            isDriver
+            open={isOpenDriverOrders}
+            user={openDriver}
+            onClose={() => handleBackRedirect()}
+          />
+        )}
+      </DriversContainer>
+    </>
+  )
+}
+
+export const DriversManager = (props) => {
+  const DriversControlProps = {
+    ...props,
+    asDashboard: true,
+    propsToFetch: ['id', 'name', 'lastname', 'location', 'enabled', 'available', 'busy', 'driver_groups', 'assigned_orders_count', 'last_order_assigned_at', 'last_location_at', 'cellphone', 'photo', 'qualification'],
+    UIComponent: DriversManagerUI
+  }
+  return (
+    <>
+      <DriversController {...DriversControlProps} />
+    </>
+  )
+}

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

@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+
+export const DriversContainer = styled.div`
+  box-sizing: border-box;
+`
+
+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 DriversContent = styled.div`
+`
+
+export const DriverListContainer = styled.div`
+  height: 100%;
+  overflow: hidden;
+  margin-top: 20px;
+  @media (min-width: 992px) {
+    width: 350px;
+    max-width: 350px;
+    margin-top: 0px;
+  }
+`
+export const FilterContainer = styled.div`
+  position: sticky;
+  top: 0px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  z-index: 100;
+`
+export const WrapperDriversList = styled.div`
+  overflow-x: hidden;
+  @media (min-width: 992px) {
+    max-height: calc(var(--vh, 1vh) * 100 - 410px);
+  }
+`

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

@@ -0,0 +1,339 @@
+import React, { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useLanguage, useSession, OrdersManage as OrdersManageController } from 'ordering-components-external'
+import { OrderStatusFilterBar } from '../OrderStatusFilterBar'
+import { OrdersContentHeader } from '../OrdersContentHeader'
+import { OrderDetails } from '../OrderDetails'
+import { OrdersDashboardControls } from '../OrdersDashboardControls'
+import { Alert } from '../../Shared'
+import { DriversManager } from './DriversManager'
+import { DriversLocation } from '../DriversLocation'
+
+import {
+  MainContentContainer,
+  TopContent,
+  DriversContainer,
+  OrdersContainer,
+  WrapperDriversLocation,
+  OrdersListContainer,
+  OrdersContent,
+  OrdersInnerContent,
+  WrapItemView,
+  WrapperIndicator,
+  OrderSubFilterControls,
+  OrderStatusSubFilterWrapper
+} from './styles'
+import { OrdersDashboard } from '../OrdersDashboard'
+import { OrderStatusSubFilter } from '../OrderStatusSubFilter'
+import { OrderNotification } from '../OrderNotification'
+import { WizardOrders } from '../WizardOrders'
+
+const OrdersManagerUI = (props) => {
+  const {
+    isSelectedOrders,
+    searchValue,
+    driverGroupList,
+    driversList,
+    paymethodsList,
+    businessesList,
+    citiesList,
+    ordersStatusGroup,
+    filterValues,
+    deletedOrderId,
+    startMulitOrderStatusChange,
+    startMulitOrderDelete,
+    handleChangeSearch,
+    handleChangeFilterValues,
+    handleOrdersStatusGroupFilter,
+    handleChangeMultiOrdersStatus,
+    handleDeleteMultiOrders,
+    handleSelectedOrderIds,
+    selectedOrderIds,
+    onOrderRedirect,
+    selectedSubOrderStatus,
+    handleSelectedSubOrderStatus,
+    handleCustomOrderDetail,
+    setSelectedOrderIds,
+    numberOfOrdersByStatus,
+    allowColumns,
+    setAllowColumns
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+
+  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 [isTourOpen, setIsTourOpen] = useState(false)
+  const [currentTourStep, setCurrentTourStep] = useState(0)
+  const [isTourFlag, setIsTourFlag] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [timeStatus, setTimeStatus] = useState(null)
+  const [slaSettingTime, setSlaSettingTime] = useState(60000)
+  const [totalSelectedOrder, setTotalSelectedOrder] = useState(0)
+
+  const [mapsData, setMapsData] = useState({
+    driversIsOnline: true,
+    onlineDrivers: [],
+    offlineDrivers: [],
+    selectedDriver: null
+  })
+
+  const handleBackRedirect = () => {
+    setIsOpenOrderDetail(false)
+    setDetailsOrder(null)
+    setOrderDetailId(null)
+    if (!isSelectedOrders) {
+      onOrderRedirect()
+    } else {
+      handleCustomOrderDetail && handleCustomOrderDetail(false)
+    }
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleOpenOrderDetail = (order, isKeydown = false) => {
+    if (isTourOpen && currentTourStep === 4 && !isKeydown) {
+      setIsTourOpen(false)
+      return
+    }
+    setDetailsOrder(order)
+    setOrderDetailId(order.id)
+    setIsOpenOrderDetail(true)
+    if (!isSelectedOrders) {
+      onOrderRedirect(order.id)
+    } else {
+      handleCustomOrderDetail && handleCustomOrderDetail(true)
+    }
+    if (isTourOpen && currentTourStep === 4) {
+      setIsTourFlag(true)
+    }
+    if (isTourOpen && currentTourStep === 0) {
+      setTimeout(() => {
+        setCurrentTourStep(1)
+      }, 1)
+    }
+  }
+
+  const handleOpenTour = () => {
+    const tourElement = document.querySelector('[data-tour="tour_start"]')
+    if (!tourElement) {
+      setAlertState({
+        open: true,
+        content: t('ONE_ORDER_IS_REQUIRED', 'One order is required')
+      })
+      return
+    }
+
+    const orderElement = document.getElementById('orderTable')
+    if (orderElement) orderElement.scrollTo(0, 0)
+    setCurrentTourStep(0)
+    setIsTourOpen(true)
+    handleBackRedirect()
+  }
+
+  useEffect(() => {
+    if (startMulitOrderStatusChange || startMulitOrderDelete) {
+      setTotalSelectedOrder(selectedOrderIds.length)
+    }
+  }, [startMulitOrderStatusChange, startMulitOrderDelete])
+
+  useEffect(() => {
+    if (selectedOrderIds.length === 0) {
+      setTimeout(() => {
+        setTotalSelectedOrder(0)
+      }, 500)
+    }
+  }, [selectedOrderIds])
+
+  useEffect(() => {
+    if (isSelectedOrders) return
+    const id = query.get('id')
+    if (id === null) setIsOpenOrderDetail(false)
+    else {
+      if (user?.level === 5) {
+        handleBackRedirect()
+      } else {
+        setOrderDetailId(id)
+        setIsOpenOrderDetail(true)
+      }
+    }
+  }, [user])
+
+  useEffect(() => {
+    if (isTourOpen) return
+    setIsTourFlag(false)
+  }, [isTourOpen])
+
+  return (
+    <>
+      <OrdersListContainer
+        isSelectedOrders={isSelectedOrders}
+      >
+        <OrdersContentHeader
+          isDisableTitle={isSelectedOrders}
+          isDisableControl={isSelectedOrders}
+          title={t('ORDER_MANAGER', 'Orders manager')}
+          searchValue={searchValue}
+          driverGroupList={driverGroupList}
+          driversList={driversList}
+          citiesList={citiesList}
+          paymethodsList={paymethodsList}
+          businessesList={businessesList}
+          filterValues={filterValues}
+          handleChangeSearch={handleChangeSearch}
+          handleChangeFilterValues={handleChangeFilterValues}
+          selectedOrderIds={selectedOrderIds}
+          handleDeleteMultiOrders={handleDeleteMultiOrders}
+          handleChangeMultiOrdersStatus={handleChangeMultiOrdersStatus}
+          handleOpenTour={() => handleOpenTour()}
+          filterModalOpen={filterModalOpen}
+          setFilterModalOpen={setFilterModalOpen}
+          setTimeStatus={setTimeStatus}
+          setSlaSettingTime={setSlaSettingTime}
+        />
+
+        <MainContentContainer>
+          <TopContent>
+            <DriversContainer>
+              <DriversManager
+                setMapsData={setMapsData}
+              />
+            </DriversContainer>
+            <OrdersContainer>
+              <OrderStatusFilterBar
+                selectedOrderStatus={ordersStatusGroup}
+                changeOrderStatus={handleOrdersStatusGroupFilter}
+                numberOfOrdersByStatus={numberOfOrdersByStatus}
+              />
+              <OrderSubFilterControls isColumn={selectedOrderIds?.length}>
+                <OrderStatusSubFilterWrapper isColumn={selectedOrderIds?.length}>
+                  <OrderStatusSubFilter
+                    ordersStatusGroup={ordersStatusGroup}
+                    selectedSubOrderStatus={selectedSubOrderStatus}
+                    handleSelectedSubOrderStatus={handleSelectedSubOrderStatus}
+                  />
+                </OrderStatusSubFilterWrapper>
+                {!isSelectedOrders && (
+                  <OrdersDashboardControls
+                    selectedOrderNumber={selectedOrderIds?.length}
+                    filterValues={filterValues}
+                    handleChangeMultiOrdersStatus={handleChangeMultiOrdersStatus}
+                    handleDeleteMultiOrders={handleDeleteMultiOrders}
+                  />
+                )}
+              </OrderSubFilterControls>
+              <OrdersContent>
+                <OrdersInnerContent className='order-content'>
+                  <WrapItemView>
+                    <OrdersDashboard
+                      hidePhoto
+                      isSelectedOrders={isSelectedOrders}
+                      driverId={props.driverId}
+                      customerId={props.customerId}
+                      businessId={props.businessId}
+                      searchValue={searchValue}
+                      filterValues={filterValues}
+                      selectedOrderIds={selectedOrderIds}
+                      deletedOrderId={deletedOrderId}
+                      driversList={driversList}
+                      ordersStatusGroup={ordersStatusGroup}
+                      selectedSubOrderStatus={selectedSubOrderStatus}
+                      handleSelectedOrderIds={handleSelectedOrderIds}
+                      orderDetailId={orderDetailId}
+                      handleOpenOrderDetail={handleOpenOrderDetail}
+                      setSelectedOrderIds={setSelectedOrderIds}
+                      currentTourStep={currentTourStep}
+                      handleOpenTour={handleOpenTour}
+                      isTourOpen={isTourOpen}
+                      setIsTourOpen={setIsTourOpen}
+                      setFilterModalOpen={setFilterModalOpen}
+                      timeStatus={timeStatus}
+                      slaSettingTime={slaSettingTime}
+                      allowColumns={allowColumns}
+                      setAllowColumns={setAllowColumns}
+                    />
+                  </WrapItemView>
+                </OrdersInnerContent>
+              </OrdersContent>
+            </OrdersContainer>
+          </TopContent>
+          <WrapperDriversLocation>
+            <DriversLocation
+              driversIsOnline={mapsData.driversIsOnline}
+              selectedDriver={mapsData.selectedDriver}
+              onlineDrivers={mapsData.onlineDrivers}
+              offlineDrivers={mapsData.offlineDrivers}
+            />
+          </WrapperDriversLocation>
+        </MainContentContainer>
+      </OrdersListContainer>
+
+      {isOpenOrderDetail && (
+        <OrderDetails
+          isSelectedOrders={isSelectedOrders}
+          open={isOpenOrderDetail}
+          order={detailsOrder}
+          orderId={orderDetailId}
+          isTourOpen={isTourOpen}
+          onClose={() => handleBackRedirect()}
+          setCurrentTourStep={setCurrentTourStep}
+          currentTourStep={currentTourStep}
+          isTourFlag={isTourFlag}
+          setIsTourFlag={setIsTourFlag}
+          setIsTourOpen={setIsTourOpen}
+          drivers={driversList.drivers}
+        />
+      )}
+
+      <OrderNotification customerId={props.customerId} />
+
+      {totalSelectedOrder > 0 && (
+        <WrapperIndicator>
+          {selectedOrderIds.length}/{totalSelectedOrder}
+        </WrapperIndicator>
+      )}
+
+      <WizardOrders
+        isTourOpen={isTourOpen}
+        setIsTourOpen={setIsTourOpen}
+        currentStep={currentTourStep}
+        detailsOrder={detailsOrder}
+      />
+      <Alert
+        title={t('ORDERS_MANAGER', 'Orders manager')}
+        content={alertState.content}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+      <Alert
+        title={t('ORDERS_MANAGER', 'Orders manager')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const AllInOne = (props) => {
+  const OrdersListControlProps = {
+    ...props,
+    UIComponent: OrdersManagerUI,
+    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/AllInOne/styles.js

@@ -0,0 +1,144 @@
+import styled, { css } from 'styled-components'
+
+export const OrdersListContainer = styled.div`
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  overflow: auto;
+  height: calc(var(--vh,1vh) * 100);
+  ${({ isSelectedOrders }) => isSelectedOrders && css`
+    margin-top: 0px;
+    padding: 20px 0 0 0;
+  `}
+  @media print {
+    display: none;
+  }
+`
+export const OrdersContent = styled.div`
+`
+export const OrdersInnerContent = styled.div`
+`
+export const WrapperIndicator = styled.div`
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 100px;
+  height: 50px;
+  border-radius: 5px;
+  background: #151824;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: 500;
+  font-size: 24px;
+`
+
+export const WrapItemView = styled.div`
+  width: 100%;
+`
+export const OrderSubFilterControls = styled.div`
+  display: flex;
+  width: 100%;
+  ${({ isColumn }) => isColumn ? css`
+    flex-direction: column;
+    > div:last-child {
+      margin-top: 0;
+      margin-bottom: 10px;
+      > div {
+        justify-content: space-between;
+        width: 100%;
+      }
+    }
+  ` : css`
+    flex-direction: row;
+    justify-content: space-between;
+  `}
+`
+export const OrderStatusSubFilterWrapper = styled.div`
+  flex: 1;
+  display: inline-block;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 15px;
+  ` : css`
+    margin-right: 20px;
+  `}
+  ${({ isColumn }) => isColumn ? css`
+    width: 100%;
+  ` : css`
+    width: 50%;
+  `}
+`
+
+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 MainContentContainer = styled.div`
+  margin-top: 15px;
+`
+export const TopContent = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  margin-bottom: 20px;
+  border-bottom: 5px solid ${props => props.theme.colors.borderColor};
+  @media (min-width: 992px) {
+    flex-direction: row;
+    #orderTable {
+      max-height: calc(var(--vh, 1vh) * 100 - 475px);
+    }
+  }
+`
+export const WrapperDriversLocation = styled.div`
+  border-radius: 8px;
+  overflow: hidden;
+  height: 700px;
+`
+export const DriversContainer = styled.div`
+  box-sizing: border-box;
+  @media (min-width: 992px) {
+    ${props => props.theme?.rtl ? css`
+      border-left: 5px solid ${props => props.theme.colors.borderColor};
+      padding-left: 8px;
+    ` : css`
+      border-right: 5px solid ${props => props.theme.colors.borderColor};
+      padding-right: 8px;
+    `}
+  }
+`
+
+export const OrdersContainer = styled.div`
+  box-sizing: border-box;
+  ${props => props.theme?.rtl ? css`
+    padding-right: 8px;
+  ` : css`
+    padding-left: 8px;
+  `}
+  @media (min-width: 992px) {
+    width: calc(100% - 355px);
+  }
+`