ordering-ui-admin-external 1.43.18 → 1.43.19

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

@@ -26,10 +26,12 @@ export const OrderDashboardSLASettingUI = (props) => {
   const {
     settingsState,
     handleInputChange,
-    handleClickUpdate
+    handleClickUpdate,
+    settingOptionOpen,
+    setSettingOptionOpen
   } = props
   const [, t] = useLanguage()
-  const [settingOpen, setSettingOpen] = useState(false)
+  const [settingOpen, setSettingOpen] = useState(settingOptionOpen)
   const [currentTabItem, setCurrentTabItem] = useState(1)
   const [selectedTabStatus, setSelectedTabStatus] = useState(null)
   const theme = useTheme()
@@ -70,12 +72,14 @@ export const OrderDashboardSLASettingUI = (props) => {
 
   const handleCloseSettings = () => {
     setSettingOpen(false)
+    setSettingOptionOpen && setSettingOptionOpen(false)
   }
 
   const onSubmit = (data) => {
     if (data && Object.keys(data).length > 0) {
       handleClickUpdate()
       setSettingOpen(false)
+      setSettingOptionOpen && setSettingOptionOpen(false)
     }
   }
 
@@ -110,12 +114,14 @@ export const OrderDashboardSLASettingUI = (props) => {
 
   return (
     <SettingContainer>
-      <Button
-        color='secundary'
-        onClick={() => setSettingOpen(true)}
-      >
-        {t('SLA_SETTING', 'SLA’s settings')}
-      </Button>
+      {!settingOptionOpen && (
+        <Button
+          color='secundary'
+          onClick={() => setSettingOpen(true)}
+        >
+          {t('SLA_SETTING', 'SLA’s settings')}
+        </Button>
+      )}
       <Modal
         open={settingOpen}
         onClose={() => handleCloseSettings()}

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

@@ -56,11 +56,6 @@ export const OrdersCards = (props) => {
     return imageKeys
   }, {})
 
-  const filterOptions = (configState?.configs?.filter_order_options?.value.split('|').map(value => value) || [])
-  const optionsToCheck = ['external_id', 'driver', 'driver_group_general']
-
-  const matchingFilterOptions = filterOptions.filter(option => optionsToCheck.includes(option)).length
-
   const handleChangePage = (page) => {
     getPageOrders(pagination.pageSize, page)
   }
@@ -185,7 +180,7 @@ export const OrdersCards = (props) => {
 
   return (
     <>
-      <OrdersListContainer matchingFilterOptions={matchingFilterOptions}>
+      <OrdersListContainer>
         {orderList.loading ? (
           [...Array(10).keys()].map(i => (
             <OrderCard key={i}>
@@ -261,15 +256,15 @@ export const OrdersCards = (props) => {
                       <p className={order?.time_status}>{displayDelayedTime(order)}</p>
                     </Timer>
                   )}
-                  { order?.codigoPod && (
-                    <div style={{paddingTop: 50}}>
+                  {order?.codigoPod && (
+                    <div style={{ paddingTop: 50 }}>
                       <p>
                         {
                           `${t('PODS', 'Pod')}: ${order?.codigoPod}` 
                         }
                       </p>
                     </div>
-                   )}
+                  )}
                 </CardHeading>
                 {isMessagesView && order?.unread_count > 0 && (
                   <UnreadMessageCounter>

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

@@ -1,33 +1,13 @@
 import styled, { css } from 'styled-components'
 
-const calculateHeight = (matchingFilterOptions, customMappings) => {
-  const defaultMapping = {
-    3: 'calc(100% - 410px)',
-    2: 'calc(100% - 350px)',
-    1: 'calc(100% - 280px)',
-    default: 'calc(100% - 200px)'
-  }
-
-  const mappings = { ...defaultMapping, ...customMappings }
-
-  return mappings[matchingFilterOptions] || mappings.default
-}
-
 export const OrdersListContainer = styled.div`
-  height: ${({ matchingFilterOptions }) => calculateHeight(matchingFilterOptions)};
+  height: calc(100% - 200px);
   padding: 0 12px 15px 12px;
   box-sizing: border-box;
   overflow-x: hidden;
 
   @media (min-width: 1024px) and (max-width: 1300px) {
-    height: ${({ matchingFilterOptions }) =>
-      calculateHeight(matchingFilterOptions, {
-        3: 'calc(100% - 400px)',
-        2: 'calc(100% - 340px)',
-        1: 'calc(100% - 270px)',
-        default: 'calc(100% - 230px)'
-      }
-    )};
+    height: calc(100% - 230px);
   }
 `
 export const OrderNunberContainer = styled.div`

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

@@ -4,13 +4,13 @@ import { SearchBar } from '../../Shared'
 import { OrdersFilterGroup } from '../OrdersFilterGroup'
 import { List as MenuIcon, LifePreserver } from 'react-bootstrap-icons'
 import { OrdersDashboardSLAControls } from '../OrdersDashboardSLAControls'
-import { OrderDashboardSLASetting } from '../OrderDashboardSLASetting'
 import { IconButton } 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 { OrdersHeaderFilterGroup } from '../OrdersHeaderFilterGroup'
 
 import {
   OrderContentHeaderContainer,
@@ -18,10 +18,11 @@ import {
   HeaderTitle,
   TopRightSection,
   SLAControlsWrapper,
-  WrapperSearchAndFilter
+  WrapperSearchAndFilter,
+  WrapperHeaderFilterGroup
 } from './styles'
 
-export const OrdersContentHeader = memo((props) => {
+export const OrdersContentHeader = (props) => {
   const {
     isLateralBar,
     isDisableTitle,
@@ -91,24 +92,32 @@ export const OrdersContentHeader = memo((props) => {
 
           </HeaderSection>
         )}
-        <TopRightSection isCustomLayout={isSelectedOrders}>
+        <TopRightSection isCustomLayout={isSelectedOrders} isCollapse={isCollapse}>
+          <WrapperHeaderFilterGroup>
+            <OrdersHeaderFilterGroup
+              isSelectedOrders={isSelectedOrders}
+              driverGroupList={driverGroupList}
+              driversList={driversList}
+              searchValue={searchValue}
+              handleChangeFilterValues={handleChangeFilterValues}
+              handleChangeSearch={handleChangeSearch}
+            />
+          </WrapperHeaderFilterGroup>
           <WebsocketStatus />
           {isShowMapsKeySettingButton && (
             <GoogleMapsApiKeySettingButton />
           )}
           {(configState?.configs?.order_deadlines_enabled?.value === '1') && (
             <SLAControlsWrapper>
-              <OrderDashboardSLASetting
-                setSlaSettingTime={setSlaSettingTime}
-              />
               <OrdersDashboardSLAControls
                 setTimeStatus={setTimeStatus}
+                setSlaSettingTime={setSlaSettingTime}
               />
             </SLAControlsWrapper>
           )}
           <WrapperSearchAndFilter
             fullWidth={isDisableTitle}
-            >
+          >
             {isShowSearchFilters && (
               <SearchBar
                 isCustomLayout
@@ -136,4 +145,4 @@ export const OrdersContentHeader = memo((props) => {
       </OrderContentHeaderContainer>
     </>
   )
-})
+}

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

@@ -66,8 +66,10 @@ export const HeaderTitle = styled.p`
 export const TopRightSection = styled.div`
   width: 100%;
   display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
+  flex-direction: column-reverse;
+  flex-wrap: nowrap;
+  margin: 5px 0px 10px 15px;
+
   ${({ isCustomLayout }) => !isCustomLayout && css`
     justify-content: flex-end;
   `}
@@ -78,12 +80,16 @@ export const TopRightSection = styled.div`
     }
   `}
 
-  @media (min-width: 768px) {
-    flex-direction: row;
-    align-items: center;
+  @media (min-width: 799px) {
+    flex-direction: ${({ isCustomLayout }) => (isCustomLayout) ? 'column-reverse' : 'row'};
+    align-items: ${({ isCustomLayout }) => (isCustomLayout) ? 'flex-start' : 'center'};
   }
 `
 
+export const WrapperHeaderFilterGroup = styled.div`
+  width: 100%;
+  max-width: 850px
+`
 export const SLAControlsWrapper = styled.div`
   display: flex;
   align-items: center;

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 
 import { Select as FirstSelect } from '../../../styles/Select/FirstSelect'
+import { OrderDashboardSLASetting } from '../OrderDashboardSLASetting'
 
 import {
   OrdersDashboardSLAControlsContainer,
@@ -11,9 +12,10 @@ import {
 } from './styles'
 
 export const OrdersDashboardSLAControls = (props) => {
-  const { setTimeStatus } = props
+  const { setTimeStatus, setSlaSettingTime } = props
   const [defaultOptionValue, setDefaultOptionValue] = useState('default')
   const [filteredTimeStatus, setFilteredTimeStatus] = useState([])
+  const [settingOptionOpen, setSettingOptionOpen] = useState(false)
   const [, t] = useLanguage()
 
   const timeStatus = [
@@ -56,10 +58,23 @@ export const OrdersDashboardSLAControls = (props) => {
           <p>{t('DELAYED', 'Delayed')}</p>
         </Option>
       )
+    },
+    {
+      value: 'sla_settings',
+      name: t('SLA_SETTING', 'SLA’s settings'),
+      content: (
+        <Option noPadding>
+          <p>{t('SLA_SETTING', 'SLA’s settings')}</p>
+        </Option>
+      )
     }
   ]
 
   const changeOrderTimeStatus = (val) => {
+    if (val === 'sla_settings') {
+      setSettingOptionOpen(true)
+      return
+    }
     setDefaultOptionValue(val)
     if (val === 'default') {
       setTimeStatus(null)
@@ -92,6 +107,13 @@ export const OrdersDashboardSLAControls = (props) => {
           handleChangeSearch={handleChangeSearch}
         />
       </OrderTimeStatusSelectWrapper>
+      {settingOptionOpen && (
+        <OrderDashboardSLASetting
+          setSlaSettingTime={setSlaSettingTime}
+          settingOptionOpen={settingOptionOpen}
+          setSettingOptionOpen={setSettingOptionOpen}
+        />
+      )}
     </OrdersDashboardSLAControlsContainer>
   )
 }

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

@@ -27,7 +27,7 @@ export const OrdersDashboardSLAControlsContainer = styled.div`
 
 export const OrderTimeStatusSelectWrapper = styled.div`
   .timeStatusSelect {
-    width: 168px;
+    width: fit-content;
     height: 43px;
     line-height: 43px;
     border: none;

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

@@ -2,10 +2,8 @@ import styled, { css } from 'styled-components'
 
 export const WrapperRow = styled.div`
   display: flex;
-  width: 100% !important;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding-top: 10px;
+  width: 100%;
+  align-items: center;
   padding-bottom: 0px;
 
   & > div {
@@ -13,7 +11,6 @@ export const WrapperRow = styled.div`
     height: 47px;
     max-width: 1000px;
     margin-right: 10px;
-    margin-bottom: 20px;
     background-color: ${props => props.theme.colors.secundary};
     border: none;
     font-size: 14px;
@@ -53,18 +50,24 @@ export const WrapperRow = styled.div`
 
   .external_id {
     @media (max-width: 1200px) {
-    flex: auto;
-  }
-
+     flex: auto;
+    }
   }
 
-  @media (min-width: 992px) {
-    flex-direction: row;
+  @media (max-width: 798px) {
+    flex-direction: column !important;
+    padding: 10px 15px 0 0px;
+    & > div {
+      margin-top: 15px;
+    }
   }
 
-  ${({ wrapperWidth, isSelectedOrders }) => wrapperWidth < 992 && css`
+  ${({ isSelectedOrders }) => isSelectedOrders && css`
       flex-direction: column !important;
-      padding: ${!isSelectedOrders && '15px 10px 0 10px'};
+      padding: ${!isSelectedOrders && '10px 15px 0 0px'};
+      & > div {
+        margin-top: 15px;
+      }
   `}
 `
 export const Option = styled.div`

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

@@ -195,14 +195,6 @@ const OrdersManagerUI = (props) => {
           setSlaSettingTime={setSlaSettingTime}
           isLateralBar={isLateralBar}
         />
-        <OrdersHeaderFilterGroup
-          isSelectedOrders={isSelectedOrders}
-          driverGroupList={driverGroupList}
-          driversList={driversList}
-          searchValue={searchValue}
-          handleChangeFilterValues={handleChangeFilterValues}
-          handleChangeSearch={handleChangeSearch}
-        />
         <OrderStatusFilterBar
           isUseQuery={isUseQuery}
           selectedOrderStatus={ordersStatusGroup}

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

@@ -72,7 +72,7 @@ const SocketStatusUI = (props) => {
         onClick={() => setOpenModal(true)}
       >
         <StatusContainer>
-          <span>{t('CONNECTION_STATUS', 'Connection status')}</span>
+          <span>{t('CONNECTION', 'Connection')}</span>
           <WebsocketStatusDot
             status={socketStatus}
           />