ordering-ui-admin-external 1.42.10 → 1.42.12

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

@@ -10,8 +10,10 @@ import {
   WrapperNoneOrders,
   WrapperOrderListContent,
   InnerNoneOrdersContainer,
-  InfoMessage
+  InfoMessage,
+  ColumnPopoverContainer
 } from './styles'
+import { ColumnAllowSettingPopover } from '../../Shared'
 
 export const OrdersListing = memo((props) => {
   const {
@@ -67,6 +69,84 @@ export const OrdersListing = memo((props) => {
     }
   }
 
+  const optionsDefault = [
+    {
+      value: 'status',
+      content: t('STATUS', 'Status')
+    },
+    {
+      value: 'orderNumber',
+      content: t('INVOICE_ORDER_NO', 'Order No.')
+    },
+    {
+      value: 'agent',
+      content: t('AGENT', 'Agent')
+    },
+    {
+      value: 'cartGroupId',
+      content: t('GROUP_ORDER', 'Group Order')
+    },
+    {
+      value: 'driverGroupId',
+      content: t('EXPORT_DRIVER_GROUP_ID', 'Driver Group Id')
+    },
+    {
+      value: 'dateTime',
+      content: t('DATE_TIME', 'Date and time')
+    },
+    {
+      value: 'business',
+      content: t('BUSINESS', 'Business')
+    },
+    {
+      value: 'customer',
+      content: t('CUSTOMER', 'Customer')
+    },
+    {
+      value: 'driver',
+      content: t('DRIVER', 'Driver')
+    },
+    {
+      value: 'advanced',
+      content: t('ADVANCED_LOGISTICS', 'Advance Logistics')
+    },
+    {
+      value: 'timer',
+      content: t('SLA_TIMER', 'SLA’s timer')
+    },
+    {
+      value: 'eta',
+      content: t('ETA', 'ETA')
+    },
+    {
+      value: 'total',
+      content: t('EXPORT_TOTAL', 'Total')
+    },
+    {
+      value: 'externalId',
+      content: t('EXTERNAL_ID', 'External id')
+    },
+    {
+      value: 'channel',
+      content: t('CHANNEL', 'Channel')
+    }
+  ]
+
+  const handleChangeAllowColumns = (type) => {
+    let _column = {}
+    if (type === 'channel') {
+      _column = { visable: allowColumns[type].visable, title: t('CHANNEL', 'Channel'), className: 'channelInfo', draggable: true, colSpan: 1, order: 12 }
+    } else {
+      _column = allowColumns[type]
+    }
+    const updatedAllowColumns = {
+      ...allowColumns,
+      [type]: { ..._column, visable: !_column?.visable }
+    }
+    setAllowColumns(updatedAllowColumns)
+    saveUserSettings(JSON.parse(JSON.stringify(updatedAllowColumns)))
+  }
+
   useEffect(() => {
     if (orderList.loading || !messageListView) return
     if (orderList.orders.length === 0 || messageOrder) return
@@ -128,33 +208,46 @@ export const OrdersListing = memo((props) => {
               maxHeight={orderListView !== 'table'}
               onDoubleClick={handleDobleClick}
             >
+
               {orderListView === 'table' ? (
-                <OrdersTable
-                  hidePhoto={hidePhoto}
-                  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}
-                  saveUserSettings={saveUserSettings}
-                  isUseQuery={isUseQuery}
-                  franchisesList={props.franchisesList}
-                />
+                <>
+                  {allowColumns && !(Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0).length === 0) && (
+                    <ColumnPopoverContainer>
+                      <ColumnAllowSettingPopover
+                        allowColumns={allowColumns}
+                        optionsDefault={optionsDefault}
+                        handleChangeAllowColumns={handleChangeAllowColumns}
+                        isOrder
+                      />
+                    </ColumnPopoverContainer>
+                  )}
+                  <OrdersTable
+                    hidePhoto={hidePhoto}
+                    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}
+                    saveUserSettings={saveUserSettings}
+                    isUseQuery={isUseQuery}
+                    franchisesList={props.franchisesList}
+                  />
+                </>
               ) : (
                 <OrdersCards
                   isMessagesView={isMessagesView}

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

@@ -107,3 +107,15 @@ export const InfoMessage = styled.div`
     }
   }
 `
+
+export const ColumnPopoverContainer = styled.div`
+  position: relative;
+  button {
+    right: 0px;
+    position: absolute;
+    transform: translateY(-3px);
+    z-index: 1000;
+    background: white;
+    padding: 0 10px;
+  }
+`

package/src/components/Orders/OrdersTable/index.js

@@ -267,7 +267,7 @@ export const OrdersTable = memo((props) => {
       _column = { visable:allowColumns[type].visable ,title: t('CHANNEL', 'Channel'), className: 'channelInfo', draggable: true, colSpan: 1, order: 12 }
      }else{
       _column = allowColumns[type]
-     }
+    }
     const updatedAllowColumns = {
       ...allowColumns,
       [type]: { ..._column, visable: !_column?.visable }
@@ -460,14 +460,6 @@ export const OrdersTable = memo((props) => {
                                   </div>
                                 </DragTh>
                               )}
-                              <th className='orderPrice' key={`noDragTh-${i}`}>
-                                <ColumnAllowSettingPopover
-                                  allowColumns={allowColumns}
-                                  optionsDefault={optionsDefault}
-                                  handleChangeAllowColumns={handleChangeAllowColumns}
-                                  isOrder
-                                />
-                              </th>
                             </React.Fragment>
                           )
                         }

package/src/themes/origin/src/components/DriverMapMarkerAndInfo/index.js

@@ -11,7 +11,8 @@ import {
 } from './styles'
 export const DriverMapMarkerAndInfo = (props) => {
   const {
-    driver
+    driver,
+    timeStatus
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -67,6 +68,13 @@ export const DriverMapMarkerAndInfo = (props) => {
         offline={!(driver.enabled && driver.available && !driver.busy)}
         onMouseOver={() => setInfoShow(true)}
         onMouseLeave={() => setInfoShow(false)}
+        borderColor={timeStatus === 'delayed'
+          ? '#E63757'
+          : !driver?.available
+            ? '#6c757d'
+            : driver.busy
+              ? '#007bff'
+              : '#28a745'}
       >
         {driver.photo ? (
           <MapMarkerImg bgimage={driver.photo} />

package/src/themes/origin/src/components/DriverMapMarkerAndInfo/styles.js

@@ -4,16 +4,12 @@ export const WrapperMapMarker = styled.div`
   width: 40px;
   height: 40px;
   background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
-  border: 5px solid #F79B16;
+  border: 5px solid ${props => props.borderColor};
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 6px;
   position: absolute;
   transform: translate(-50%, -50%);
   z-index: 1;
-
-  ${({ offline }) => offline && css`
-    border: 5px solid #9D9B9B;
-  `}
 `
 const MapMarkerImgStyled = styled.div`
   display: flex;

package/src/themes/origin/src/components/DriversLocation/index.js

@@ -192,6 +192,7 @@ export const DriversLocation = (props) => {
             <DriverMapMarkerAndInfo
               key={driver.id}
               driver={driver}
+              timeStatus={interActionMapOrder?.time_status}
               lat={driver.location !== null ? driver.location.lat : defaultCenter.lat}
               lng={driver.location !== null ? driver.location.lng : defaultCenter.lng}
             />
@@ -201,6 +202,7 @@ export const DriversLocation = (props) => {
             <DriverMapMarkerAndInfo
               key={driver.id}
               driver={driver}
+              timeStatus={interActionMapOrder?.time_status}
               lat={driver.location !== null ? driver.location.lat : defaultCenter.lat}
               lng={driver.location !== null ? driver.location.lng : defaultCenter.lng}
             />
@@ -210,6 +212,7 @@ export const DriversLocation = (props) => {
             <DriverMapMarkerAndInfo
               key={driver.id}
               driver={driver}
+              timeStatus={interActionMapOrder?.time_status}
               lat={driver.location !== null ? driver.location.lat : defaultCenter.lat}
               lng={driver.location !== null ? driver.location.lng : defaultCenter.lng}
             />
@@ -235,6 +238,7 @@ export const DriversLocation = (props) => {
         {!(driverAvailable === 'online' || driverAvailable === 'offline') && interActionMapOrder !== null && interActionMapOrder?.driver !== null && (
           <InterActOrderMarker
             driver={interActionMapOrder?.driver}
+            timeStatus={interActionMapOrder?.time_status}
             lat={interActionOrderDriverLocation ? interActionOrderDriverLocation?.lat : defaultCenter.lat}
             lng={interActionOrderDriverLocation ? interActionOrderDriverLocation?.lng : defaultCenter.lng}
             image={interActionMapOrder?.driver?.photo}