ordering-ui-admin-external 1.39.9 → 1.40.0

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

@@ -360,12 +360,7 @@ export const OrderStatusTypeSelector = (props) => {
         let extractOrderStatus = []
         switch (deliveryType) {
           case 1:
-            extractOrderStatus = orderStatuses.slice(0, 13)
-            _filteredOrderStatuses = [...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(15, 20)
-            _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(21, 28)
-            _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
+            _filteredOrderStatuses = orderStatuses
             if (searchValue) {
               _filteredOrderStatuses = [..._filteredOrderStatuses?.filter(orderStatus => orderStatus?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))]
             }
@@ -378,11 +373,11 @@ export const OrderStatusTypeSelector = (props) => {
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
             extractOrderStatus = orderStatuses.slice(13, 15)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(17, 19)
+            extractOrderStatus = orderStatuses.slice(19, 21)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(20, 24)
+            extractOrderStatus = orderStatuses.slice(22, 26)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(27, 29)
+            extractOrderStatus = orderStatuses.slice(29, 31)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
             if (searchValue) {
               _filteredOrderStatuses = [..._filteredOrderStatuses?.filter(orderStatus => orderStatus?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))]
@@ -394,11 +389,13 @@ export const OrderStatusTypeSelector = (props) => {
             _filteredOrderStatuses = [...extractOrderStatus]
             extractOrderStatus = orderStatuses.slice(4, 7)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(17, 19)
+            extractOrderStatus = orderStatuses.slice(10, 11)
+            _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
+            extractOrderStatus = orderStatuses.slice(19, 21)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(20, 24)
+            extractOrderStatus = orderStatuses.slice(22, 26)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(27, 29)
+            extractOrderStatus = orderStatuses.slice(29, 31)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
             if (searchValue) {
               _filteredOrderStatuses = [..._filteredOrderStatuses?.filter(orderStatus => orderStatus?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))]
@@ -412,11 +409,11 @@ export const OrderStatusTypeSelector = (props) => {
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
             extractOrderStatus = orderStatuses.slice(13, 15)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(17, 19)
+            extractOrderStatus = orderStatuses.slice(19, 21)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(20, 24)
+            extractOrderStatus = orderStatuses.slice(22, 26)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(27, 29)
+            extractOrderStatus = orderStatuses.slice(29, 31)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
             if (searchValue) {
               _filteredOrderStatuses = [..._filteredOrderStatuses?.filter(orderStatus => orderStatus?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))]
@@ -430,11 +427,11 @@ export const OrderStatusTypeSelector = (props) => {
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
             extractOrderStatus = orderStatuses.slice(13, 15)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(17, 19)
+            extractOrderStatus = orderStatuses.slice(19, 21)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(20, 24)
+            extractOrderStatus = orderStatuses.slice(22, 26)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(27, 29)
+            extractOrderStatus = orderStatuses.slice(29, 31)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
             if (searchValue) {
               _filteredOrderStatuses = [..._filteredOrderStatuses?.filter(orderStatus => orderStatus?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))]
@@ -442,12 +439,7 @@ export const OrderStatusTypeSelector = (props) => {
             setFilteredOrderStatuses(_filteredOrderStatuses)
             break
           case 7:
-            extractOrderStatus = orderStatuses.slice(0, 13)
-            _filteredOrderStatuses = [...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(15, 20)
-            _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(21, 28)
-            _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
+            _filteredOrderStatuses = orderStatuses
             if (searchValue) {
               _filteredOrderStatuses = [..._filteredOrderStatuses?.filter(orderStatus => orderStatus?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))]
             }
@@ -460,11 +452,11 @@ export const OrderStatusTypeSelector = (props) => {
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
             extractOrderStatus = orderStatuses.slice(13, 15)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(17, 19)
+            extractOrderStatus = orderStatuses.slice(19, 21)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(20, 24)
+            extractOrderStatus = orderStatuses.slice(22, 26)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
-            extractOrderStatus = orderStatuses.slice(27, 29)
+            extractOrderStatus = orderStatuses.slice(29, 31)
             _filteredOrderStatuses = [..._filteredOrderStatuses, ...extractOrderStatus]
             if (searchValue) {
               _filteredOrderStatuses = [..._filteredOrderStatuses?.filter(orderStatus => orderStatus?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))]

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

@@ -5,7 +5,7 @@ import {
   OrdersManageContainer
 } from './styles'
 
-export const OrdersDashboard = memo((props) => {
+export const OrdersDashboard = (props) => {
   const [{ configs }] = useConfig()
   const ordersDashboardListProps = {
     ...props
@@ -21,4 +21,4 @@ export const OrdersDashboard = memo((props) => {
       />
     </OrdersManageContainer>
   )
-})
+}

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

@@ -32,6 +32,7 @@ import { LogisticStatusDot } from '../OrdersTable/styles'
 
 const OrdersFilterGroupUI = (props) => {
   const {
+    isLateralBar,
     filterModalOpen,
     setFilterModalOpen,
     searchValue,
@@ -152,7 +153,7 @@ const OrdersFilterGroupUI = (props) => {
         {filterApplied ? <Funnel /> : <MdcFilterOff />}
       </IconButton>
       {(filterApplied || !!searchValue) && (
-        <WarningMessage>
+        <WarningMessage isLateralBar={isLateralBar}>
           <TiWarningOutline />
           <span>{t('WARNING_FILTER_APPLIED', 'Filters applied. You may miss new orders.')}</span>
           <LinkButton onClick={() => handleClearFilters()}>{t('CLEAR_FILTERS', 'Clear filters')}</LinkButton>

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

@@ -198,13 +198,13 @@ export const WarningMessage = styled.div`
   position: absolute;
   display: flex;
   align-items: center;
-  z-index: 10;
-  top: 100%;
+  z-index: 100;
+  bottom: 40px;
   background: ${props => props.theme.colors.warning100};
   border: 1px solid ${props => props.theme.colors.warning};
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
   border-radius: 7.6px;
-  padding: 6px 15px;
+  padding: 0px 15px;
   box-sizing: border-box;
   margin: 10px 0px 0px 0px !important;
 
@@ -233,10 +233,19 @@ export const WarningMessage = styled.div`
   }
 
   @media (min-width: 768px) {
-    padding: 8px 20px;
+    padding: 0px 20px;
     font-size: 14px;
     line-height: 24px;
-    right: 0px;
+    ${({ isLateralBar }) => isLateralBar ? css`
+      right: 0px;
+    ` : css`
+      right: 0px;
+    `}
+    ${({ isLateralBar }) => isLateralBar ? css`
+      bottom: -25px;
+    ` : css`
+      bottom: -20px;
+    `}
     ${props => props.theme?.rtl && css`
       left: 0px;
       right: initial;

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

@@ -142,6 +142,7 @@ export const OrdersLateralBar = (props) => {
           </Name>
         </Info>
         <OrdersManager
+          isLateralBar
           isSelectedOrders
           driverId={isDriver ? user.id : null}
           customerId={isCustomer ? user.id : null}

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

@@ -1,14 +1,16 @@
-import React, { memo, useState, useEffect } from 'react'
+import React, { memo, useState, useEffect, useRef } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { OrdersTable } from '../OrdersTable'
 import { OrdersCards } from '../OrdersCards'
-import { Button } from '../../../styles'
+import { Button, LinkButton } from '../../../styles'
+import AiOutlineInfoCircle from '@meronex/icons/ai/AiOutlineInfoCircle'
 
 import {
   WrapperNoneOrders,
   WrapperOrderListContent,
-  InnerNoneOrdersContainer
+  InnerNoneOrdersContainer,
+  InfoMessage
 } from './styles'
 
 export const OrdersListing = memo((props) => {
@@ -51,13 +53,20 @@ export const OrdersListing = memo((props) => {
     handleDrop,
     isDelivery,
     saveUserSettings,
-    isUseQuery
+    isUseQuery,
+    handleSetOpenOrderDetail
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
   const [filterApplied, setFilterApplied] = useState(false)
 
+  const handleDobleClick = () => {
+    if (handleSetOpenOrderDetail && orderDetailId) {
+      handleSetOpenOrderDetail(true)
+    }
+  }
+
   useEffect(() => {
     if (orderList.loading || !messageListView) return
     if (orderList.orders.length === 0 || messageOrder) return
@@ -117,6 +126,7 @@ export const OrdersListing = memo((props) => {
           ) : (
             <WrapperOrderListContent
               maxHeight={orderListView !== 'table'}
+              onDoubleClick={handleDobleClick}
             >
               {orderListView === 'table' ? (
                 <OrdersTable
@@ -168,6 +178,12 @@ export const OrdersListing = memo((props) => {
               )}
             </WrapperOrderListContent>
           )}
+          {(handleSetOpenOrderDetail && orderDetailId) && (
+            <InfoMessage>
+              <AiOutlineInfoCircle />
+              <span>{t('DOBLE_CLICK_OPEN_ORDER_INFO', 'Doble click order to open details')}</span>
+            </InfoMessage>
+          )}
         </>
       )}
     </>

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

@@ -45,3 +45,65 @@ export const WrapperOrderListContent = styled.div`
     height: 100%;
   `}
 `
+
+export const InfoMessage = styled.div`
+  display: flex;
+  align-items: center;
+  z-index: 100;
+  bottom: 40px;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.info};
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 6px 15px;
+  box-sizing: border-box;
+  margin: 10px 0px 0px 0px !important;
+  max-width: 300px;
+  right: 0px;
+  ${props => props.theme?.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  svg {
+    font-size: 20px;
+    color: ${props => props.theme.colors.info};
+  }
+
+  span {
+    font-size: 12px;
+    line-height: 18px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0 10px;
+    flex: 1;
+  }
+
+  a {
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  @media (min-width: 768px) {
+    padding: 8px 20px;
+    font-size: 14px;
+    line-height: 24px;
+    ${({ isLateralBar }) => isLateralBar ? css`
+      right: 0px;
+    ` : css`
+      right: 270px;
+    `}
+    ${({ isLateralBar }) => isLateralBar ? css`
+      bottom: 40px;
+    ` : css`
+      bottom: 0;
+    `}
+    ${props => props.theme?.rtl && css`
+      left: 0px;
+      right: initial;
+    `}
+
+    span {
+      white-space: nowrap;
+    }
+  }
+`

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

@@ -22,6 +22,7 @@ import { WizardOrders } from '../WizardOrders'
 
 const OrdersManagerUI = (props) => {
   const {
+    isLateralBar,
     isSelectedOrders,
     searchValue,
     driverGroupList,
@@ -191,6 +192,7 @@ const OrdersManagerUI = (props) => {
           setFilterModalOpen={setFilterModalOpen}
           setTimeStatus={setTimeStatus}
           setSlaSettingTime={setSlaSettingTime}
+          isLateralBar={isLateralBar}
         />
         <OrderStatusFilterBar
           isUseQuery={isUseQuery}