ordering-ui-admin-external 1.33.1 → 1.35.0

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

@@ -2,6 +2,8 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useConfig } from 'ordering-components-admin-external'
 import GoogleMapReact, { fitBounds } from 'google-map-react'
 import { DriverMapMarkerAndInfo } from '../DriverMapMarkerAndInfo'
+import { InterActOrderMarker } from '../InterActOrderMarker'
+import { SpinnerLoader } from '../../Shared'
 
 import {
   WrapperMap
@@ -12,7 +14,9 @@ export const DriversLocation = (props) => {
     driversIsOnline,
     onlineDrivers,
     offlineDrivers,
-    selectedDriver
+    selectedDriver,
+    selectedOrder,
+    assignedOrders
   } = props
 
   const [configState] = useConfig()
@@ -39,7 +43,7 @@ export const DriversLocation = (props) => {
   const mapFit = () => {
     const bounds = new window.google.maps.LatLngBounds()
 
-    if (showDrivers.length === 1) {
+    if (showDrivers.length === 1 && !selectedOrder && !assignedOrders?.orders?.length) {
       setMapCenter(
         (showDrivers[0].location !== null && typeof showDrivers[0].location === 'object' && showDrivers[0].location?.lat && showDrivers[0].location?.lng)
           ? showDrivers[0].location
@@ -67,6 +71,29 @@ export const DriversLocation = (props) => {
       bounds.extend(newPoint)
     }
 
+    let marker, newPoint
+    if (selectedDriver && selectedOrder) {
+      marker = selectedOrder?.business?.location !== null ? selectedOrder?.business?.location : defaultCenter
+      newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
+      bounds.extend(newPoint)
+
+      marker = selectedOrder?.customer?.location !== null && selectedOrder?.customer?.location?.lat ? selectedOrder.customer.location : defaultCenter
+      newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
+      bounds.extend(newPoint)
+    }
+
+    if (selectedDriver && assignedOrders?.orders?.length) {
+      assignedOrders.orders.forEach(order => {
+        marker = order?.business?.location !== null ? order?.business?.location : defaultCenter
+        newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
+        bounds.extend(newPoint)
+
+        marker = order?.customer?.location !== null && order?.customer?.location?.lat ? order.customer.location : defaultCenter
+        newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
+        bounds.extend(newPoint)
+      })
+    }
+
     const newBounds = {
       ne: {
         lat: bounds.getNorthEast().lat(),
@@ -97,10 +124,14 @@ export const DriversLocation = (props) => {
       setMapFitted(false)
       return
     }
+    if ((selectedOrder && selectedDriver) || (selectedDriver && assignedOrders?.orders?.length)) {
+      mapFit()
+      return
+    }
     if (!mapFitted) {
       mapFit()
     }
-  }, [showDrivers, mapLoaded, mapFitted])
+  }, [showDrivers, mapLoaded, mapFitted, selectedOrder, assignedOrders?.orders])
 
   useEffect(() => {
     if (selectedDriver) {
@@ -124,46 +155,89 @@ export const DriversLocation = (props) => {
   }, [selectedDriver?.id])
 
   return (
-    <WrapperMap ref={mapRef} className='drivers-location'>
-      {googleMapsApiKey && (
-        <GoogleMapReact
-          bootstrapURLKeys={{
-            key: window.document.getElementById('__googleMapsScriptId') ? null : googleMapsApiKey,
-            libraries: ['places', 'geometry', 'drawing', 'visualization']
-          }}
-          onGoogleApiLoaded={() => setMapLoaded(false)}
-          defaultCenter={defaultCenter}
-          center={mapCenter}
-          defaultZoom={defaultZoom}
-          zoom={mapZoom}
-          options={{ fullscreenControl: true }}
-          className='map'
-          onChange={(data) => handleMapChange(data)}
-          yesIWantToUseGoogleMapApiInternals
-        >
-          {showDrivers.length !== 0 &&
-            showDrivers.map((driver) => (
-              <DriverMapMarkerAndInfo
-                key={driver.id}
-                driver={driver}
-                lat={
-                  (driver.location !== null && typeof driver.location === 'object' && driver.location?.lat)
-                    ? driver.location.lat
-                    : typeof driver.location === 'string'
-                      ? parseFloat(driver?.location?.split(',')[0].replace(/[^-.0-9]/g, ''))
-                      : defaultCenter.lat
-                }
-                lng={
-                  (driver.location !== null && typeof driver.location === 'object' && driver.location?.lng)
-                    ? driver.location.lng
-                    : typeof driver.location === 'string'
-                      ? parseFloat(driver?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
-                      : defaultCenter.lng
-                }
-              />
-            ))}
-        </GoogleMapReact>
+    <>
+      {selectedDriver && assignedOrders?.loading && (
+        <SpinnerLoader primary />
       )}
-    </WrapperMap>
+      <WrapperMap ref={mapRef} className='drivers-location'>
+        {googleMapsApiKey && (
+          <GoogleMapReact
+            bootstrapURLKeys={{
+              key: window.document.getElementById('__googleMapsScriptId') ? null : googleMapsApiKey,
+              libraries: ['places', 'geometry', 'drawing', 'visualization']
+            }}
+            onGoogleApiLoaded={() => setMapLoaded(false)}
+            defaultCenter={defaultCenter}
+            center={mapCenter}
+            defaultZoom={defaultZoom}
+            zoom={mapZoom}
+            options={{ fullscreenControl: true }}
+            className='map'
+            onChange={(data) => handleMapChange(data)}
+            yesIWantToUseGoogleMapApiInternals
+          >
+            {showDrivers.length !== 0 &&
+              showDrivers.map((driver) => (
+                <DriverMapMarkerAndInfo
+                  key={driver.id}
+                  driver={driver}
+                  lat={
+                    (driver.location !== null && typeof driver.location === 'object' && driver.location?.lat)
+                      ? driver.location.lat
+                      : typeof driver.location === 'string'
+                        ? parseFloat(driver?.location?.split(',')[0].replace(/[^-.0-9]/g, ''))
+                        : defaultCenter.lat
+                  }
+                  lng={
+                    (driver.location !== null && typeof driver.location === 'object' && driver.location?.lng)
+                      ? driver.location.lng
+                      : typeof driver.location === 'string'
+                        ? parseFloat(driver?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+                        : defaultCenter.lng
+                  }
+                />
+              ))}
+            {selectedDriver && selectedOrder && (
+              <InterActOrderMarker
+                customer={selectedOrder?.customer}
+                lat={selectedOrder?.customer?.location?.lat ? selectedOrder?.customer?.location?.lat : defaultCenter.lat}
+                lng={selectedOrder?.customer?.location?.lng ? selectedOrder?.customer?.location?.lng : defaultCenter.lng}
+                image={selectedOrder?.customer?.photo}
+              />
+            )}
+            {selectedDriver && selectedOrder && (
+              <InterActOrderMarker
+                business={selectedOrder?.business}
+                lat={selectedOrder?.business?.location?.lat}
+                lng={selectedOrder?.business?.location?.lng}
+                image={selectedOrder?.business?.logo}
+              />
+            )}
+            {selectedDriver && assignedOrders?.orders?.length > 0 && (
+              assignedOrders.orders.map(order => (
+                <InterActOrderMarker
+                  key={order.id}
+                  customer={order?.customer}
+                  lat={order?.customer?.location?.lat ? order?.customer?.location?.lat : defaultCenter.lat}
+                  lng={order?.customer?.location?.lng ? order?.customer?.location?.lng : defaultCenter.lng}
+                  image={order?.customer?.photo}
+                />
+              ))
+            )}
+            {selectedDriver && assignedOrders?.orders?.length > 0 && (
+              assignedOrders.orders.map(order => (
+                <InterActOrderMarker
+                  key={order.id}
+                  business={order?.business}
+                  lat={order?.business?.location?.lat}
+                  lng={order?.business?.location?.lng}
+                  image={order?.business?.logo}
+                />
+              ))
+            )}
+          </GoogleMapReact>
+        )}
+      </WrapperMap>
+    </>
   )
 }

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

@@ -23,7 +23,9 @@ const DriversManagerUI = (props) => {
     onDriverRedirect,
     handleChangeSearch,
     searchValue,
-    driversIsOnline
+    driversIsOnline,
+    selectedDriver,
+    setSelectedDriver
   } = props
 
   const { drivers, loading } = props.driversList
@@ -35,7 +37,6 @@ const DriversManagerUI = (props) => {
 
   const query = new URLSearchParams(useLocation().search)
   const [isOpenDriverOrders, setIsOpenDriverOrders] = useState(false)
-  const [selectedDriver, setSelectedDriver] = useState(null)
   const [openDriver, setOpenDriver] = useState(null)
 
   const handleBackRedirect = () => {

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

@@ -6,7 +6,7 @@ export const DriversContainer = styled.div`
   padding: 20px;
   box-sizing: border-box;
   max-height: 100vh;
-  overflow: auto;
+  overflow-x: hidden;
 
   @media print {
     display: none;

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

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, GiftCardsList as GiftCardsListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { List as MenuIcon } from 'react-bootstrap-icons'
 import { IconButton } from '../../../styles'
 import { Pagination, SearchBar } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -27,12 +29,16 @@ const GiftCardsListingUI = (props) => {
     setActiveStatus,
     getGiftCards,
     searchValue,
-    onSearch
+    onSearch,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
 
+  const query = new URLSearchParams(useLocation().search)
+  const defaultStatus = query.get('status')
+
   const handleChangePage = (page) => {
     getGiftCards(page, paginationProps.pageSize)
   }
@@ -42,6 +48,30 @@ const GiftCardsListingUI = (props) => {
     getGiftCards(expectedPage, pageSize)
   }
 
+  const handleChangeStatus = (status) => {
+    setActiveStatus(status)
+    if (isUseQuery) {
+      addQueryToUrl({ status: status })
+    }
+  }
+
+  useEffect(() => {
+    if (!isUseQuery) return
+    if (defaultStatus) {
+      setActiveStatus(defaultStatus)
+      return
+    }
+    addQueryToUrl({ status: 'pending' })
+  }, [])
+
+  useEffect(() => {
+    if (!isUseQuery || !paginationProps?.currentPage || !paginationProps?.pageSize || !paginationProps?.totalPages) return
+    addQueryToUrl({
+      page: paginationProps.currentPage,
+      pageSize: paginationProps.pageSize
+    })
+  }, [paginationProps?.currentPage, paginationProps?.pageSize, paginationProps?.totalPages])
+
   return (
     <Container>
       <HeaderContainer>
@@ -69,13 +99,13 @@ const GiftCardsListingUI = (props) => {
       <TabsWrapper>
         <Tab
           active={activeStatus === 'pending'}
-          onClick={() => setActiveStatus('pending')}
+          onClick={() => handleChangeStatus('pending')}
         >
           {t('ORDER_PENDING', 'Pending')}
         </Tab>
         <Tab
           active={activeStatus === 'activated'}
-          onClick={() => setActiveStatus('activated')}
+          onClick={() => handleChangeStatus('activated')}
         >
           {t('REDEEMED', 'Redeemed')}
         </Tab>
@@ -166,13 +196,22 @@ const GiftCardsListingUI = (props) => {
 }
 
 export const GiftCardsListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultStatus = query.get('status')
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   const giftCardsProps = {
     ...props,
     UIComponent: GiftCardsListingUI,
     isSearchById: true,
     isSearchByAuthorName: true,
     isSearchByAuthorEmail: true,
-    isSearchByAuthorPhone: true
+    isSearchByAuthorPhone: true,
+    defaultStatus: defaultStatus,
+    paginationSettings: {
+      initialPage: Number(defaultPage),
+      pageSize: Number(defaultPageSize)
+    }
   }
   return <GiftCardsListController {...giftCardsProps} />
 }

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useUtils, useLanguage, useSession, Messages as MessagesController } from 'ordering-components-admin-external'
 import { useForm, Controller } from 'react-hook-form'
 import { useTheme } from 'styled-components'
@@ -8,6 +8,7 @@ import AiOutlineInfoCircle from '@meronex/icons/ai/AiOutlineInfoCircle'
 import MdcCloseOctagonOutline from '@meronex/icons/mdc/MdcCloseOctagonOutline'
 import MdClose from '@meronex/icons/md/MdClose'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   MessagesContainer,
@@ -83,7 +84,6 @@ export const MessagesUI = (props) => {
     getHistoryComment
   } = props
 
-  const routerHistory = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -303,9 +303,9 @@ export const MessagesUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setTabActive(tab)
     if (!isInitialRender) {
-      const orderId = query.get('id')
-      const section = query.get('section')
-      routerHistory.replace(`${location.pathname}?id=${orderId}&section=${section}&tab=${tab}`)
+      addQueryToUrl({
+        tab: tab
+      })
     }
   }
 

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

@@ -39,8 +39,9 @@ export const OrderContactInformation = (props) => {
     handleOpenMessages,
     isServiceOrder,
     handleUpdateCustomerInfo,
-    setIsCommentPopup,
-    setAddressState
+    setAddressState,
+    setCommentInfostate,
+    commentInfoState
   } = props
 
   const [, t] = useLanguage()
@@ -54,8 +55,6 @@ export const OrderContactInformation = (props) => {
   const [currentCustomer, setCurrentCustomer] = useState(null)
   const [isEdit, setIsEdit] = useState(false)
 
-  console.log(customerInfoState, 'customerInfoState')
-
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
   const handleReviewCustomer = (customer) => {
@@ -230,6 +229,13 @@ export const OrderContactInformation = (props) => {
                   autoComplete='new-password'
                   countryCode={configs?.country_autocomplete?.value || '*'}
                 />
+                <Input
+                  placeholder={t('NOTES', 'Notes')}
+                  defaultValue={customerInfoState?.customer?.address_notes ?? order?.customer?.address_notes ?? ''}
+                  onChange={(e) => {
+                    handleChangeCustomerInfoState({ address_notes: e.target.value })
+                  }}
+                />
                 {/* <ReviewWrapper>
                   <label>{t('REVIEW_FROM_DRIVER_OR_ADMIN', 'Review from driver or admin')}</label>
                   <TextArea
@@ -325,20 +331,20 @@ export const OrderContactInformation = (props) => {
               />
             </CompanySelectorContainer>
           )}
-          {!order?.driver_company_id && (
+          {!order?.driver_company_id && !commentInfoState?.open && (
             <DriverSelectorContainer>
               <p>{t('DRIVER_ASSIGN', 'Driver assign')}</p>
               <DriverSelector
                 small
                 isPhoneView
-                defaultValue={order?.driver_id ?? 'default'}
+                defaultValue={commentInfoState?.driverId ?? order?.driver_id ?? 'default'}
                 order={order}
                 isTourOpen={isTourOpen}
                 setCurrentTourStep={setCurrentTourStep}
                 handleOpenMessages={handleOpenMessages}
                 isOrderDrivers
                 orderId={order?.id}
-                setIsCommentPopup={setIsCommentPopup}
+                setCommentInfostate={setCommentInfostate}
               />
             </DriverSelectorContainer>
           )}

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

@@ -202,7 +202,7 @@ export const StatusBlock = (props) => {
             style={{ width: inputWidth }}
             onChange={(e) => handleMiuteChange(e)}
             onKeyPress={(e) => {
-              if (!/^[0-9.]$/.test(e.key)) {
+              if (!/^-?\d*$/.test(e.target.value)) {
                 e.preventDefault()
               }
             }}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage, useUtils, useSession, OrderDetails as OrderDetailsController } from 'ordering-components-admin-external'
 import { ProductItemAccordion } from '../ProductItemAccordion'
@@ -15,7 +15,7 @@ import { NotFoundSource, Modal, Alert } from '../../Shared'
 import { Button, IconButton, TextArea } from '../../../styles'
 import { OrderToPrint } from '../OrderToPrint'
 import { OrderToPrintTicket } from '../OrderToPrintTicket'
-import { getOrderStatuPickUp, getOrderStatus, getCurrenySymbol } from '../../../utils'
+import { getOrderStatuPickUp, getOrderStatus, getCurrenySymbol, addQueryToUrl, removeQueryToUrl } from '../../../utils'
 import { useForm } from 'react-hook-form'
 
 import {
@@ -71,7 +71,6 @@ const OrderDetailsUI = (props) => {
     handleSubmit,
     formState: { errors }
   } = useForm()
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -87,7 +86,7 @@ const OrderDetailsUI = (props) => {
   const [extraOpen, setExtraOpen] = useState(false)
   const [isExpand, setIsExpand] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-  const [isCommentPopup, setIsCommentPopup] = useState(false)
+  const [commentInfoState, setCommentInfostate] = useState({ open: false, driverId: null })
 
   const placeSpotEnabled = [3, 4]
   const {
@@ -156,8 +155,9 @@ const OrderDetailsUI = (props) => {
     setExtraOpen(true)
 
     if (!isInitialRender) {
-      const orderId = query.get('id')
-      history.replace(`${location.pathname}?id=${orderId}&section=${option}`)
+      addQueryToUrl({
+        section: option
+      })
     }
   }
 
@@ -267,13 +267,12 @@ const OrderDetailsUI = (props) => {
     setExtraOpen(false)
     setOpenMessages({ chat: false, history: false })
     setShowOption(null)
-    const orderId = query.get('id')
-    history.replace(`${location.pathname}?id=${orderId}`)
+    removeQueryToUrl(['section', 'tab'])
   }
 
   const onSubmit = (data) => {
-    handleUpdateComment(data?.manual_driver_assignment_comment)
-    setIsCommentPopup(false)
+    handleUpdateComment({ comment: data?.manual_driver_assignment_comment, driverId: commentInfoState?.driverId })
+    setCommentInfostate({ ...commentInfoState, open: false })
   }
 
   useEffect(() => {
@@ -342,9 +341,9 @@ const OrderDetailsUI = (props) => {
           <OrderStatus isDisabled={isTourOpen && currentTourStep === 1}>
             <div>
               <h2>{t('ORDER_STATUS_TEXT', 'Order status')}</h2>
-              {order?.delivery_datetime_utc &&
-              <p>{parseDate(order?.delivery_datetime_utc)}</p>
-              }
+              {order?.delivery_datetime_utc && (
+                <p>{parseDate(order?.delivery_datetime_utc)}</p>
+              )}
               {order?.delivery_datetime && (
                 <p>{parseDate(order?.delivery_datetime, { utc: false })}  {`(${t('BUSINESS_TIME', 'Business time')})`}</p>
               )}
@@ -408,7 +407,8 @@ const OrderDetailsUI = (props) => {
               setCurrentTourStep={setCurrentTourStep}
               setAddressState={setAddressState}
               handleShowOption={handleShowOption}
-              setIsCommentPopup={setIsCommentPopup}
+              setCommentInfostate={setCommentInfostate}
+              commentInfoState={commentInfoState}
             />
             <OrderProducts>
               <h2>{t('EXPORT_SUMMARY', 'Summary')}</h2>
@@ -570,9 +570,9 @@ const OrderDetailsUI = (props) => {
       />
       <Modal
         width='500px'
-        open={isCommentPopup}
+        open={commentInfoState?.open}
         title={t('ORDERING', 'Ordering')}
-        onClose={() => setIsCommentPopup(false)}
+        onClose={() => setCommentInfostate({ driverId: null, open: false })}
       >
         <AssigmentCommentContainer onSubmit={handleSubmit(onSubmit)}>
           <FormControl isError={errors.manual_driver_assignment_comment}>

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

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { DragScroll } from '../../Shared'
 import CgSpinnerTwoAlt from '@meronex/icons/cg/CgSpinnerTwoAlt'
+import { useLocation } from 'react-router-dom'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   OrderStatusFilterContainer,
@@ -10,17 +12,32 @@ import {
 
 export const OrderStatusFilterBar = (props) => {
   const {
+    isUseQuery,
     selectedOrderStatus,
     changeOrderStatus,
     ordersAmountByStatus
   } = props
 
+  const [, t] = useLanguage()
+  const query = new URLSearchParams(useLocation().search)
+  const defaultStatus = query.get('status')
+
   const changeSelectedOrderStatus = (orderStatus) => {
     window.scrollTo(0, 0)
     changeOrderStatus(orderStatus)
+    if (isUseQuery) {
+      addQueryToUrl({ status: orderStatus })
+    }
   }
 
-  const [, t] = useLanguage()
+  useEffect(() => {
+    if (!isUseQuery) return
+    if (defaultStatus) {
+      changeOrderStatus(defaultStatus)
+      return
+    }
+    addQueryToUrl({ status: 'pending' })
+  }, [])
 
   return (
     <>

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

@@ -6,6 +6,7 @@ import Skeleton from 'react-loading-skeleton'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { Pagination } from '../../Shared'
 import { useWindowSize } from '../../../hooks/useWindowSize'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   OrdersListContainer,
@@ -34,7 +35,8 @@ export const OrdersCards = (props) => {
     handleOrderCardClick,
     handleUpdateDriverLocation,
     slaSettingTime,
-    isDelivery
+    isDelivery,
+    isUseQuery
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -159,6 +161,14 @@ export const OrdersCards = (props) => {
     })
   }, [configState.loading])
 
+  useEffect(() => {
+    if (!isUseQuery || !pagination?.currentPage || !pagination?.pageSize || !pagination?.total) return
+    addQueryToUrl({
+      page: pagination.currentPage,
+      pageSize: pagination.pageSize
+    })
+  }, [pagination?.currentPage, pagination?.pageSize, pagination?.total])
+
   return (
     <>
       <OrdersListContainer>

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

@@ -17,7 +17,9 @@ export const OrdersDashboardControls = (props) => {
     handleDeleteMultiOrders,
     handleChangeMultiOrdersStatus,
     handleOpenCustomOrderDetail,
-    handleOpenOrderDetail
+    handleOpenOrderDetail,
+    ordersStatusGroup,
+    selectedSubOrderStatus
   } = props
 
   const [{ user }] = useSession()
@@ -27,7 +29,11 @@ export const OrdersDashboardControls = (props) => {
       <OrderDashboardControlsContainer>
         <InnerContnet>
           <CreateCustomOrder handleOpenCustomOrderDetail={handleOpenCustomOrderDetail} handleOpenOrderDetail={handleOpenOrderDetail} />
-          <OrdersExportCSV filterValues={filterValues} />
+          <OrdersExportCSV
+            filterValues={filterValues}
+            ordersStatusGroup={ordersStatusGroup}
+            selectedSubOrderStatus={selectedSubOrderStatus}
+          />
           {selectedOrderNumber > 0 && (
             <>
               {user?.level !== 5 && (