ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-external'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
+import { XLg } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import { OrdersManager } from '../OrdersManager'
+import { IconButton } from '../../../styles/Buttons'
+
+import {
+  LateralBarContainer,
+  OrdersContainer,
+  CloseButtonWrapper,
+  Info,
+  WrapperImage,
+  Image,
+  Name
+} from './styles'
+
+export const OrdersLateralBar = (props) => {
+  const {
+    open,
+    user,
+    business,
+    isDriver,
+    isCustomer,
+    isBusiness
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const theme = useTheme()
+
+  const { width } = useWindowSize()
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isOpenDriverOrderDetails, setIsOpenDriverOrderDetails] = useState(false)
+
+  const actionSidebar = (value) => {
+    if (!value) {
+      props.onClose()
+    }
+    setIsMenuOpen(value)
+  }
+
+  const handleCustomOrderDetail = (open) => {
+    setIsOpenDriverOrderDetails(open)
+  }
+
+  const toggleMainContent = () => {
+    if (isMenuOpen) {
+      if (width <= 500) {
+        document.getElementById('driver_lateral_bar').style.width = '100vw'
+      } else {
+        if (isOpenDriverOrderDetails && width >= 1000) {
+          document.getElementById('driver_lateral_bar').style.width = '1100px'
+        } else {
+          document.getElementById('driver_lateral_bar').style.width = '600px'
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    toggleMainContent()
+  }, [width])
+
+  useEffect(() => {
+    if (!open) return
+    actionSidebar(true)
+  }, [open])
+
+  useEffect(() => {
+    if (width < 1000) return
+    if (isOpenDriverOrderDetails) {
+      document.getElementById('driver_lateral_bar').style.width = '1100px'
+    } else {
+      toggleMainContent()
+    }
+  }, [isOpenDriverOrderDetails])
+
+  const onCloseSidebar = (e) => {
+    if (e.code === 'Escape') {
+      props.onClose() && props.onClose()
+    }
+  }
+
+  useEffect(() => {
+    if (!open) return
+    document.addEventListener('keydown', onCloseSidebar)
+    return () => document.removeEventListener('keydown', onCloseSidebar)
+  }, [open])
+
+  return (
+    <LateralBarContainer id='driver_lateral_bar'>
+      <OrdersContainer>
+        <CloseButtonWrapper>
+          <IconButton
+            color='black'
+            onClick={() => props.onClose()}
+          >
+            <XLg />
+          </IconButton>
+        </CloseButtonWrapper>
+        <Info>
+          <WrapperImage>
+            {isBusiness ? (
+              <Image bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} />
+            ) : (
+              <Image bgimage={optimizeImage(user?.photo || theme.images?.icons?.noDriver, 'h_50,c_limit')} />
+            )}
+          </WrapperImage>
+          <Name>
+            <p>
+              {isBusiness ? (
+                business.name
+              ) : (
+                <>{user?.name} {user?.lastname}</>
+              )}
+            </p>
+            <p>
+              {isDriver && t('DRIVER', 'Driver')}
+              {isCustomer && t('CUSTOMER', 'Customer')}
+              {isBusiness && t('BUSINESS', 'Business')}
+            </p>
+          </Name>
+        </Info>
+        <OrdersManager
+          isSelectedOrders
+          driverId={isDriver ? user.id : null}
+          customerId={isCustomer ? user.id : null}
+          businessId={isBusiness ? business.id : null}
+          handleCustomOrderDetail={handleCustomOrderDetail}
+        />
+      </OrdersContainer>
+    </LateralBarContainer>
+  )
+}

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

@@ -0,0 +1,109 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const LateralBarContainer = styled.div`
+  width: 0;
+  padding: 28px 20px;
+  position: fixed;
+  z-index: 1005;
+  top: 0;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  overflow-x: hidden;
+  transition: 0.3s;
+  height: calc(var(--vh, 1vh) * 100);
+  box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.16);
+
+  ${props => props.theme?.rtl ? css`
+    left: 0;
+  ` : css`
+    right: 0;
+  `}
+`
+
+export const OrdersContainer = styled.div`
+  max-width: 560px;
+
+  #orderTable {
+    border-top: 1px solid ${props => props.theme.colors.borderColor};
+
+    table {
+      min-width: initial;
+      width: 100%;
+    }
+  }
+`
+
+export const CloseButtonWrapper = styled.div`
+  position: absolute;
+  top: 25px;
+  cursor: pointer;
+
+  ${props => props.theme?.rtl ? css`
+    left: 10px;
+  ` : css`
+    right: 10px;
+  `}
+`
+
+export const Info = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const WrapperImage = styled.div`
+  max-width: 50px;
+  max-height: 50px;
+  height: 50px;
+  width: 50px;
+  border: 1px solid #E3E3E3;
+  border-radius: 10px;
+
+  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 Name = styled.div`
+  ${props => props.theme?.rtl ? css`
+    margin-right: 15px;
+  ` : css`
+    margin-left: 15px;
+  `}
+  p {
+    margin: 0px;
+    color: ${props => props.theme.colors?.headingColor};
+    font-size: 14px;
+
+    &:first-child {
+      font-size: 20px;
+      font-weight: 600;
+    }
+  }
+`

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

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+import { OrdersTable } from '../OrdersTable'
+import { OrdersCards } from '../OrdersCards'
+import { Button } from '../../../styles'
+
+import {
+  WrapperNoneOrders,
+  WrapperOrderListContent,
+  InnerNoneOrdersContainer
+} from './styles'
+
+export const OrdersListing = (props) => {
+  const {
+    isSelectedOrders,
+    orderList,
+    selectedOrderIds,
+    orderListView,
+    handleUpdateOrderStatus,
+    handleSelectedOrderIds,
+    pagination,
+    handleOpenOrderDetail,
+    handleOpenMessage,
+    handleOrderCardClick,
+    handleUpdateDriverLocation,
+    messageOrder,
+    selectedOrderCard,
+    messageListView,
+    messageType,
+    loadMoreOrders,
+    getPageOrders,
+    ordersStatusGroup,
+    groupStatus,
+    orderDetailId,
+    filterValues,
+    setFilterModalOpen,
+
+    isMessagesView,
+    setSelectedOrderIds,
+    handleOpenTour,
+    currentTourStep,
+    isTourOpen,
+    setIsTourOpen,
+    slaSettingTime,
+
+    allowColumns,
+    setAllowColumns,
+    handleDrop
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [filterApplied, setFilterApplied] = useState(false)
+
+  useEffect(() => {
+    if (orderList.loading || !messageListView) return
+    if (orderList.orders.length === 0 || messageOrder) return
+    handleOpenMessage && handleOpenMessage(orderList.orders[0], messageType)
+  }, [orderList.loading, messageListView])
+
+  useEffect(() => {
+    if (!isMessagesView || orderList.loading || selectedOrderCard) return
+    if (orderList?.orders.length > 0) {
+      handleOrderCardClick(orderList.orders[0])
+    }
+  }, [isMessagesView, orderList, selectedOrderCard])
+
+  useEffect(() => {
+    let _filterApplied = false
+    if (Object.keys(filterValues).length === 0) {
+      _filterApplied = false
+    } else {
+      _filterApplied = filterValues?.groupTypes?.length || filterValues?.businessIds?.length > 0 || filterValues?.cityIds?.length > 0 ||
+        filterValues?.deliveryEndDatetime !== null || filterValues?.deliveryFromDatetime !== null || filterValues?.deliveryTypes?.length > 0 ||
+        filterValues?.driverIds?.length > 0 || filterValues?.paymethodIds?.length > 0 || filterValues?.statuses?.length > 0
+    }
+    setFilterApplied(_filterApplied)
+  }, [filterValues])
+
+  return (
+    <>
+      {((ordersStatusGroup === groupStatus) || isMessagesView) && (
+        <>
+          {!orderList.loading && pagination?.total === 0 ? (
+            <WrapperNoneOrders>
+              <InnerNoneOrdersContainer small={orderListView === 'small'}>
+                <img src={theme?.images?.dummies?.noOrders} alt='none' />
+                {filterApplied ? (
+                  <>
+                    <p>{t('NOT_FOUND_FILTERED_ORDERS', 'No orders with the current filters applied.')}</p>
+                    <Button
+                      outline
+                      borderRadius='8px'
+                      color='primary'
+                      onClick={() => setFilterModalOpen(true)}
+                    >
+                      {t('FILTERS', 'Filters')}
+                    </Button>
+                  </>
+                ) : (
+                  <p>{t('MOBILE_NO_ORDERS', 'No Orders yet.')}</p>
+                )}
+              </InnerNoneOrdersContainer>
+            </WrapperNoneOrders>
+          ) : (
+            <WrapperOrderListContent
+              maxHeight={orderListView !== 'table'}
+            >
+              {orderListView === 'table' ? (
+                <OrdersTable
+                  setSelectedOrderIds={setSelectedOrderIds}
+                  isSelectedOrders={isSelectedOrders}
+                  orderList={orderList}
+                  pagination={pagination}
+                  selectedOrderIds={selectedOrderIds}
+                  orderDetailId={orderDetailId}
+                  loadMoreOrders={loadMoreOrders}
+                  getPageOrders={getPageOrders}
+                  handleUpdateOrderStatus={handleUpdateOrderStatus}
+                  handleSelectedOrderIds={handleSelectedOrderIds}
+                  handleOpenOrderDetail={handleOpenOrderDetail}
+                  currentTourStep={currentTourStep}
+                  isTourOpen={isTourOpen}
+                  handleOpenTour={handleOpenTour}
+                  setIsTourOpen={setIsTourOpen}
+                  slaSettingTime={slaSettingTime}
+                  groupStatus={groupStatus}
+                  allowColumns={allowColumns}
+                  setAllowColumns={setAllowColumns}
+                  handleDrop={handleDrop}
+                />
+              ) : (
+                <OrdersCards
+                  isMessagesView={isMessagesView}
+
+                  orderList={orderList}
+                  pagination={pagination}
+                  selectedOrderIds={selectedOrderIds}
+                  loadMoreOrders={loadMoreOrders}
+                  getPageOrders={getPageOrders}
+                  handleUpdateOrderStatus={handleUpdateOrderStatus}
+                  handleSelectedOrderIds={handleSelectedOrderIds}
+                  handleOpenOrderDetail={handleOpenOrderDetail}
+                  selectedOrderCard={selectedOrderCard}
+                  handleOrderCardClick={handleOrderCardClick}
+                  handleUpdateDriverLocation={handleUpdateDriverLocation}
+                  slaSettingTime={slaSettingTime}
+                />
+              )}
+            </WrapperOrderListContent>
+          )}
+        </>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components'
+
+export const WrapperNoneOrders = styled.div`
+  overflow: auto;
+
+  `
+export const InnerNoneOrdersContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 15px;
+  img {
+    width: 250px;
+  }
+
+  p {
+    font-size: 16px;
+    margin: 0px 0 40px 0;
+  }
+
+  button {
+    height: 44px;
+  }
+
+  ${({ small }) => small && css`
+    img {
+      width: 150px;
+    }
+  `}
+
+  @media (min-width: 768px) {
+    img {
+      width: 305px;
+    }
+    ${({ small }) => small && css`
+      img {
+        width: 250px;
+      }
+    `}
+  }
+`
+
+export const WrapperOrderListContent = styled.div`
+  ${({ maxHeight }) => maxHeight && css`
+    height: 100%;
+  `}
+`