ordering-ui-admin-external 1.30.7 → 1.31.0

package/src/components/Orders/CreateCustomOrder/CustomOrderDetails/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react'
-import { useLanguage, useOrder, CustomOrderDetails as CustomOrderDetailsController } from 'ordering-components-admin-external'
+import { useLanguage, useOrder, useValidationFields, CustomOrderDetails as CustomOrderDetailsController } from 'ordering-components-admin-external'
 import { SelectCustomer } from '../SelectCustomer'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { SelectBusinesses } from '../SelectBusinesses'
@@ -7,9 +7,15 @@ import { Map } from '../Map'
 import { SelectProducts } from '../SelectProducts'
 import { Checkout } from '../Checkout'
 import { Alert } from '../../../Shared'
+import { Button, Input, TextArea } from '../../../../styles'
+import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
 
 import {
-  DetailsContainer
+  DetailsContainer,
+  FormControl,
+  ToggleOptions,
+  RaidoButton,
+  ButtonWrapper
 } from './styles'
 
 const CustomOrderDetailsUI = (props) => {
@@ -31,19 +37,56 @@ const CustomOrderDetailsUI = (props) => {
     cart,
     onClose,
     handleOpenCustomOrderDetail,
-    defaultCountryCodeState
+    handlePlaceOrderByTotal,
+    extraFields,
+    setExtraFields,
+    actionState
   } = props
 
   const [, t] = useLanguage()
+  const [validationFields] = useValidationFields()
   const [orderState, { changeAddress }] = useOrder()
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isOrderByProducts, setIsOrderByProducts] = useState(true)
 
   const handleCloseAlert = () => {
     setCustomersPhones({ ...customersPhones, error: null })
     setAlertState({ open: false, content: [] })
   }
 
+  const handlePlaceOrder = () => {
+    const errMessage = []
+
+    if (!selectedBusiness) {
+      errMessage.push(t(
+        'VALIDATION_ERROR_REQUIRED',
+        'Name is required'
+      ).replace('_attribute_', t('BUSINESS', 'Business')))
+    }
+    if (!extraFields?.total) {
+      errMessage.push(t(
+        'VALIDATION_ERROR_REQUIRED',
+        'Name is required'
+      ).replace('_attribute_', t('TOTAL', 'Total')))
+    }
+    if (validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && !extraFields?.comment) {
+      errMessage.push(t(
+        'VALIDATION_ERROR_REQUIRED',
+        'Name is required'
+      ).replace('_attribute_', t('COMMENT', 'Comment')))
+    }
+    if (errMessage.length > 0) {
+      setAlertState({
+        open: true,
+        content: errMessage
+      })
+      return
+    }
+
+    handlePlaceOrderByTotal()
+  }
+
   const customerAddress = useMemo(() => {
     let address = null
     if (selectedUser?.addresses) {
@@ -68,6 +111,18 @@ const CustomOrderDetailsUI = (props) => {
     }
   }, [customersPhones?.error])
 
+  useEffect(() => {
+    if (actionState?.error) {
+      setAlertState({ open: true, content: actionState?.error })
+    }
+  }, [actionState])
+
+  useEffect(() => {
+    if (!isOrderByProducts) {
+      setExtraFields({ external_id: extraFields?.external_id })
+    }
+  }, [isOrderByProducts])
+
   return (
     <>
       <DetailsContainer className='custom-order-content'>
@@ -80,7 +135,6 @@ const CustomOrderDetailsUI = (props) => {
           onChangeNumber={onChangeNumber}
           handleParentSidebarMove={handleParentSidebarMove}
           customerAddress={customerAddress}
-          defaultCountryCodeState={defaultCountryCodeState}
         />
         {customerAddress?.location && (
           <>
@@ -95,7 +149,53 @@ const CustomOrderDetailsUI = (props) => {
               customerLocation={customerAddress?.location}
               business={selectedBusiness}
             />
-            {selectedBusiness && (
+            <ToggleOptions>
+              <RaidoButton onClick={() => setIsOrderByProducts(true)}>
+                {isOrderByProducts ? <RecordCircleFill className='active' /> : <Circle />}
+                <span>{t('ORDER_BY_PRODUCTS', 'Order by products')}</span>
+              </RaidoButton>
+              <RaidoButton onClick={() => setIsOrderByProducts(false)}>
+                {isOrderByProducts ? <Circle /> : <RecordCircleFill className='active' />}
+                <span>{t('ORDER_BY_TOTAL', 'Order by total')}</span>
+              </RaidoButton>
+            </ToggleOptions>
+            {!isOrderByProducts && (
+              <FormControl>
+                <label>{t('TOTAL', 'Total')}</label>
+                <Input
+                  value={extraFields?.total || ''}
+                  onKeyPress={(e) => {
+                    if (!/^[0-9]$/.test(e.key)) {
+                      e.preventDefault()
+                    }
+                  }}
+                  onChange={(e) => setExtraFields({ ...extraFields, total: e.target.value })}
+                  placeholder={t('TOTAL', 'Total')}
+                />
+              </FormControl>
+            )}
+            <FormControl>
+              <label>
+                {t('EXTERNAL_ID', 'External id')}
+                <span>{t('OPTIONAL', 'Optional')}</span>
+              </label>
+              <Input
+                value={extraFields?.external_id || ''}
+                onChange={(e) => setExtraFields({ ...extraFields, external_id: e.target.value })}
+                placeholder={t('EXTERNAL_ID', 'External id')}
+              />
+            </FormControl>
+            {!isOrderByProducts && (
+              <FormControl>
+                <label>{t('COMMENT', 'Comment')}</label>
+                <TextArea
+                  value={extraFields?.comment || ''}
+                  onChange={(e) => setExtraFields({ ...extraFields, comment: e.target.value })}
+                  placeholder={t('COMMENT', 'Comment')}
+                />
+              </FormControl>
+            )}
+            {selectedBusiness && isOrderByProducts && (
               <SelectProducts
                 productList={productList}
                 getProducts={getProducts}
@@ -104,15 +204,27 @@ const CustomOrderDetailsUI = (props) => {
                 business={selectedBusiness}
               />
             )}
-            {cart && cart?.products.length > 0 && (
+            {cart && cart?.products.length > 0 && isOrderByProducts && (
               <Checkout
                 cartUuid={cart.uuid}
                 onPlaceOrderClick={(data, paymethod, cart) => {
                   cart?.uuid && handleOpenCustomOrderDetail(cart.uuid)
                   onClose()
                 }}
+                extraFields={extraFields}
               />
             )}
+            {!isOrderByProducts && (
+              <ButtonWrapper>
+                <Button
+                  color='primary'
+                  onClick={handlePlaceOrder}
+                  disabled={actionState?.loading}
+                >
+                  {t('PLACE_ORDER', 'Place Order')}
+                </Button>
+              </ButtonWrapper>
+            )}
           </>
         )}
         <Alert

package/src/components/Orders/CreateCustomOrder/CustomOrderDetails/styles.js

@@ -26,3 +26,59 @@ export const DetailsContainer = styled.div`
     margin-bottom: 4px;
   }
 `
+
+export const FormControl = styled.div`
+  margin-top: 20px;
+  label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    margin-bottom: 10px;
+    span {
+      font-size: 12px;
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+  input, textarea {
+    width: 100%;
+  }
+`
+
+export const ToggleOptions = styled.div`
+  margin-top: 30px;
+`
+
+export const RaidoButton = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  cursor: pointer;
+
+  svg {
+    color: ${props => props.theme.colors.secundaryLight};
+    &.active {
+      color: ${props => props.theme.colors.primary};
+    }
+    font-size: 16px;
+    min-width: 16px;
+    margin-right: 12px;
+    ${props => props.theme.rtl && css`
+      margin-left: 13px;
+      margin-right: 0px;
+    `}
+  }
+  span {
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0px;
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  margin-top: 30px;
+  button {
+    border-radius: 8px;
+    height: 44px;
+  }
+`

package/src/components/Orders/CreateCustomOrder/OrderTypeSelector/index.js

@@ -28,7 +28,7 @@ const OrderTypeSelectorUI = (props) => {
       <p>{t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will you delivery type?')}</p>
       <Select
         placeholder={<Option>{t('SELECT_DELIVERY_TYPE', 'Select delivery type')}</Option>}
-        options={configTypes
+        options={configTypes.length > 0
           ? orderTypes.filter(type => configTypes?.includes(type.value)).filter(type => type.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
           : orderTypes.filter(type => type.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))}
         defaultValue={defaultType || typeSelected || defaultValue}

package/src/components/Orders/CreateCustomOrder/SelectCustomer/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, useUtils, useCustomer } from 'ordering-components-admin-external'
+import { useLanguage, useUtils, useCustomer, useConfig } from 'ordering-components-admin-external'
 import { UserAddForm } from '../../../Users'
 import { AddressList } from '../../../Delivery'
 import { Dot, HouseDoor } from 'react-bootstrap-icons'
@@ -29,13 +29,13 @@ export const SelectCustomer = (props) => {
     setSelectedUser,
     onChangeNumber,
     handleParentSidebarMove,
-    customerAddress,
-    defaultCountryCodeState
+    customerAddress
   } = props
 
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
   const [, { setUserCustomer }] = useCustomer()
+  const [{ configs }] = useConfig()
 
   const [searchInputFocus, setSearchInputFocus] = useState(false)
   const [showSearchbar, setShowSearchbar] = useState(true)
@@ -77,11 +77,22 @@ export const SelectCustomer = (props) => {
     onChangeNumber(trimmedValue)
   }
 
+  const handleOpenAddressListSidebar = () => {
+    setOpenSidebar('address_list')
+    handleParentSidebarMove(500)
+  }
+
   useEffect(() => {
     setOpenSidebar(null)
     handleParentSidebarMove(0)
   }, [customerAddress?.location])
 
+  useEffect(() => {
+    if (!customerAddress?.address && selectedUser) {
+      handleOpenAddressListSidebar()
+    }
+  }, [customerAddress?.address, selectedUser])
+
   return (
     <>
       <SectionContainer>
@@ -169,7 +180,7 @@ export const SelectCustomer = (props) => {
           <Button
             borderRadius='8px'
             color='primary'
-            disabled={openSidebar === 'user_add_form' || defaultCountryCodeState.loading}
+            disabled={openSidebar === 'user_add_form'}
             onClick={() => handleOpenAddForm()}
           >
             {t('USERS_REGISTER', 'New user')}
@@ -184,10 +195,7 @@ export const SelectCustomer = (props) => {
               </div>
             )}
             <LinkButton
-              onClick={() => {
-                setOpenSidebar('address_list')
-                handleParentSidebarMove(500)
-              }}
+              onClick={() => handleOpenAddressListSidebar()}
             >
               {customerAddress?.address ? t('CHANGE', 'Change') : t('ADD_NEW_ADDRESS', 'Add new address')}
             </LinkButton>
@@ -205,8 +213,7 @@ export const SelectCustomer = (props) => {
           <UserAddForm
             isFromCustomOrder
             hideUserTypeSelector
-            defaultCountry={defaultCountryCodeState.code}
-            defaultPhoneNumber={(selectedUser?.cellphone || phone) && `+${findExitingCountryPhoneCode(defaultCountryCodeState?.code)} ${selectedUser?.cellphone || phone}`}
+            defaultPhoneNumber={(selectedUser?.cellphone || phone) && `+${findExitingCountryPhoneCode(configs?.default_country_code?.value?.toUpperCase())} ${selectedUser?.cellphone || phone}`}
             handleSuccessAdd={onSelectUser}
             onClose={() => handleCloseSidebar()}
           />
@@ -221,11 +228,12 @@ export const SelectCustomer = (props) => {
           open={openSidebar === 'address_list'}
           onClose={() => handleCloseSidebar()}
         >
-          <SavedPlaces>
+          <SavedPlaces openExtraAdddress={openExtraAdddress}>
             <h2>{selectedUser?.name} {selectedUser?.lastname}</h2>
             <p>{t('SELECT_CUSTOMER_ADDRESS', 'Select customer address')}</p>
             <AddressListWrapper>
               <AddressList
+                isAutoOpenAddNewAddress
                 isSeletectedUserAddresses
                 userId={selectedUser?.id}
                 addresses={selectedUser?.addresses}

package/src/components/Orders/CreateCustomOrder/SelectCustomer/styles.js

@@ -172,6 +172,9 @@ export const SavedPlaces = styled.div`
   width: 100%;
   padding: 25px 20px;
   overflow: auto;
+  ${({ openExtraAdddress }) => openExtraAdddress && css`
+    z-index: 10;
+  `}
 
   > h2 {
     font-size: 20px;

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

@@ -29,7 +29,6 @@ const DeliveriesManagerUI = (props) => {
     selectedSubOrderStatus,
     handleSelectedSubOrderStatus,
     onOrderRedirect,
-    numberOfOrdersByStatus,
     numberOfOrdersBySubstatus,
     timeStatus,
     setTimeStatus
@@ -42,6 +41,12 @@ const DeliveriesManagerUI = (props) => {
   const [detailsOrder, setDetailsOrder] = useState(null)
   const [filterModalOpen, setFilterModalOpen] = useState(false)
   const [slaSettingTime, setSlaSettingTime] = useState(60000)
+  const [ordersAmountByStatus, setOrdersAmountByStatus] = useState({
+    pending: null,
+    inProgress: null,
+    completed: null,
+    cancelled: null
+  })
 
   const [configState] = useConfig()
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
@@ -104,7 +109,8 @@ const DeliveriesManagerUI = (props) => {
               setFilterModalOpen={setFilterModalOpen}
               slaSettingTime={slaSettingTime}
               timeStatus={timeStatus}
-              numberOfOrdersByStatus={numberOfOrdersByStatus}
+              ordersAmountByStatus={ordersAmountByStatus}
+              setOrdersAmountByStatus={setOrdersAmountByStatus}
               numberOfOrdersBySubstatus={numberOfOrdersBySubstatus}
             />
           </WrapItemView>

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

@@ -17,8 +17,8 @@ export const DeliveryDashboard = (props) => {
     selectedSubOrderStatus,
     handleOrdersStatusGroupFilter,
     handleSelectedSubOrderStatus,
-    numberOfOrdersByStatus,
-    numberOfOrdersBySubstatus
+    ordersAmountByStatus,
+    setOrdersAmountByStatus
   } = props
 
   const [interActionMapOrder, setInterActionMapOrder] = useState(null)
@@ -42,13 +42,12 @@ export const DeliveryDashboard = (props) => {
           <OrderStatusFilterBar
             selectedOrderStatus={ordersStatusGroup}
             changeOrderStatus={handleOrdersStatusGroupFilter}
-            numberOfOrdersByStatus={numberOfOrdersByStatus}
+            ordersAmountByStatus={ordersAmountByStatus}
           />
           <OrderStatusSubFilter
             ordersStatusGroup={ordersStatusGroup}
             selectedSubOrderStatus={selectedSubOrderStatus}
             handleSelectedSubOrderStatus={handleSelectedSubOrderStatus}
-            numberOfOrdersBySubstatus={numberOfOrdersBySubstatus}
           />
         </FilterContainer>
         <WrapperOrderlist id='cardOrders'>
@@ -59,6 +58,7 @@ export const DeliveryDashboard = (props) => {
             handleOrderCardClick={handleLocation}
             handleUpdateDriverLocation={handleUpdateDriverLocation}
             isDelivery
+            setOrdersAmountByStatus={setOrdersAmountByStatus}
           />
         </WrapperOrderlist>
       </OrdersContainer>

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

@@ -9,11 +9,15 @@ import { Alert, Modal } from '../../Shared'
 import 'react-toastify/dist/ReactToastify.css'
 import { toast } from 'react-toastify'
 import { useTheme } from 'styled-components'
+import { CheckSquareFill, Square } from 'react-bootstrap-icons'
 
 import {
   ModalContainer,
-  ToastWrapper
+  ToastWrapper,
+  AlarmContent,
+  CheckBoxWrapper
 } from './styles'
+import { Button } from '../../../styles'
 
 toast.configure()
 
@@ -27,6 +31,8 @@ const OrderNotificationUI = (props) => {
   const [, t] = useLanguage()
   const [events] = useEvent()
   const theme = useTheme()
+  const [showModal, setShowModal] = useState(false)
+  const [isChecked, setIsChecked] = useState(false)
 
   const [notificationModalOpen, setNotificationModalOpen] = useState(false)
   const [registerOrderIds, setRegisterOrderIds] = useState([])
@@ -110,12 +116,17 @@ const OrderNotificationUI = (props) => {
   }, [configState, registerOrderIds, customerId])
 
   useEffect(() => {
-    setAlertState({
-      open: true,
-      content: t('SOUND_WILL_BE_PLAYED', 'The sound will be played on this page whenever a new order is received.')
-    })
+    const isSaved = localStorage.getItem('new_order_notification')
+    if (!isSaved) setShowModal(true)
   }, [])
 
+  const handleClose = () => {
+    setShowModal(false)
+    if (isChecked) {
+      localStorage.setItem('new_order_notification', '1')
+    }
+  }
+
   return (
     <>
       <Modal
@@ -147,6 +158,21 @@ const OrderNotificationUI = (props) => {
         onAccept={() => setAlertState({ open: false, content: [] })}
         closeOnBackdrop={false}
       />
+      <Modal
+        open={showModal}
+        width='700px'
+        onClose={handleClose}
+        title={t('ORDERING', 'Ordering')}
+      >
+        <AlarmContent>
+          <span>{t('SOUND_WILL_BE_PLAYED', 'The sound will be played on this page whenever a new order is received.')}</span>
+          <CheckBoxWrapper onClick={() => setIsChecked(prev => !prev)} isChecked={isChecked}>
+            {isChecked ? <CheckSquareFill /> : <Square />}
+            <span>{t('DONT_SHOW_AGAIN', 'Don\'t show again')}</span>
+          </CheckBoxWrapper>
+          <Button color='primary' onClick={handleClose}>{t('ACCEPT', 'Accept')}</Button>
+        </AlarmContent>
+      </Modal>
     </>
   )
 }

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

@@ -79,3 +79,40 @@ export const ToastWrapper = styled.div`
     }
   }
 `
+
+export const AlarmContent = styled.div`
+  button {
+    height: 44px;
+    width: 100%;
+    border-radius: 8px;
+    margin-top: 20px;
+  }
+  > span {
+    font-weight: 500;
+  }
+`
+
+export const CheckBoxWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-top: 10px;
+  span {
+    font-size: 14px;
+  }
+  svg {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 10px;
+    ` : css`
+      margin-right: 10px;
+    `}
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+  }
+
+  ${({ isChecked }) => isChecked && css`
+    svg {
+      color: ${props => props.theme.colors?.primary};
+    }
+  `}
+`

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

@@ -12,7 +12,7 @@ export const OrderStatusFilterBar = (props) => {
   const {
     selectedOrderStatus,
     changeOrderStatus,
-    numberOfOrdersByStatus
+    ordersAmountByStatus
   } = props
 
   const changeSelectedOrderStatus = (orderStatus) => {
@@ -21,6 +21,7 @@ export const OrderStatusFilterBar = (props) => {
   }
 
   const [, t] = useLanguage()
+
   return (
     <>
       <OrderStatusFilterContainer className='order_status_filter'>
@@ -31,8 +32,8 @@ export const OrderStatusFilterBar = (props) => {
           >
             {t('PENDING', 'pending')}
             <span>(
-              {numberOfOrdersByStatus?.result ? (
-                numberOfOrdersByStatus?.result?.pending ?? 0
+              {!isNaN(ordersAmountByStatus?.pending) && ordersAmountByStatus?.pending !== null ? (
+                ordersAmountByStatus?.pending ?? 0
               ) : (
                 <CgSpinnerTwoAlt />
               )}
@@ -46,8 +47,8 @@ export const OrderStatusFilterBar = (props) => {
           >
             {t('IN_PROGRESS', 'in progress')}
             <span>(
-              {numberOfOrdersByStatus?.result ? (
-                numberOfOrdersByStatus?.result?.inProgress ?? 0
+              {!isNaN(ordersAmountByStatus?.inProgress) && ordersAmountByStatus?.inProgress !== null ? (
+                ordersAmountByStatus?.inProgress ?? 0
               ) : (
                 <CgSpinnerTwoAlt />
               )}
@@ -61,8 +62,8 @@ export const OrderStatusFilterBar = (props) => {
           >
             {t('COMPLETED', 'completed')}
             <span>(
-              {numberOfOrdersByStatus?.result ? (
-                numberOfOrdersByStatus?.result?.completed ?? 0
+              {!isNaN(ordersAmountByStatus?.completed) && ordersAmountByStatus?.completed !== null ? (
+                ordersAmountByStatus?.completed ?? 0
               ) : (
                 <CgSpinnerTwoAlt />
               )}
@@ -76,8 +77,8 @@ export const OrderStatusFilterBar = (props) => {
           >
             {t('CANCELLED', 'cancelled')}
             <span>(
-              {numberOfOrdersByStatus?.result ? (
-                numberOfOrdersByStatus?.result?.cancelled ?? 0
+              {!isNaN(ordersAmountByStatus?.cancelled) && ordersAmountByStatus?.cancelled !== null ? (
+                ordersAmountByStatus?.cancelled ?? 0
               ) : (
                 <CgSpinnerTwoAlt />
               )}

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

@@ -6,12 +6,13 @@ import { Funnel, List as MenuIcon, LifePreserver } from 'react-bootstrap-icons'
 import MdcFilterOff from '@meronex/icons/mdc/MdcFilterOff'
 import { OrdersDashboardSLAControls } from '../OrdersDashboardSLAControls'
 import { OrderDashboardSLASetting } from '../OrderDashboardSLASetting'
-import { IconButton } from '../../../styles'
+import { IconButton, LinkButton } from '../../../styles'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { GoogleMapsApiKeySettingButton } from '../GoogleMapsApiKeySettingButton'
 import { WebsocketStatus } from '../WebsocketStatus'
+import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
 
 import {
   OrderContentHeaderContainer,
@@ -19,7 +20,8 @@ import {
   HeaderTitle,
   TopRightSection,
   SLAControlsWrapper,
-  WrapperSearchAndFilter
+  WrapperSearchAndFilter,
+  WarningMessage
 } from './styles'
 
 export const OrdersContentHeader = (props) => {
@@ -52,6 +54,11 @@ export const OrdersContentHeader = (props) => {
   const [filterApplied, setFilterApplied] = useState(false)
   const [configState] = useConfig()
 
+  const handleClearFilters = () => {
+    if (searchValue) handleChangeSearch('')
+    if (filterApplied) handleChangeFilterValues({})
+  }
+
   useEffect(() => {
     let _filterApplied = false
     if (Object.keys(filterValues).length === 0) {
@@ -60,7 +67,7 @@ export const OrdersContentHeader = (props) => {
       _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 || filterValues?.metafield?.length > 0 ||
-        filterValues?.externalId || filterValues?.logisticStatus !== null
+        filterValues?.externalId || filterValues?.logisticStatus !== null || filterValues?.assigned !== null
     }
     setFilterApplied(_filterApplied)
   }, [filterValues])
@@ -136,6 +143,13 @@ export const OrdersContentHeader = (props) => {
             >
               {filterApplied ? <Funnel /> : <MdcFilterOff />}
             </IconButton>
+            {(filterApplied || !!searchValue) && (
+              <WarningMessage>
+                <TiWarningOutline />
+                <span>{t('WARNING_FILTER_APPLIED', 'Notifications Paused. Filters applied. You may miss new orders.')}</span>
+                <LinkButton onClick={() => handleClearFilters()}>{t('CLEAR_FILTERS', 'Clear filters')}</LinkButton>
+              </WarningMessage>
+            )}
           </WrapperSearchAndFilter>
         </TopRightSection>
       </OrderContentHeaderContainer>