ordering-ui-admin-external 1.43.18 → 1.43.20

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,
@@ -41,7 +42,8 @@ export const OrdersContentHeader = memo((props) => {
     setFilterModalOpen,
     setTimeStatus,
     setSlaSettingTime,
-    isShowMapsKeySettingButton
+    isShowMapsKeySettingButton,
+    adminsList
   } = props
 
   const { width } = useWindowSize()
@@ -91,24 +93,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
@@ -127,6 +137,7 @@ export const OrdersContentHeader = memo((props) => {
               paymethodsList={paymethodsList}
               businessesList={businessesList}
               citiesList={citiesList}
+              adminsList={adminsList}
               handleChangeFilterValues={handleChangeFilterValues}
               searchValue={searchValue}
               handleChangeSearch={handleChangeSearch}
@@ -136,4 +147,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/OrdersFilterGroup/index.js

@@ -14,6 +14,7 @@ import { PaymethodTypeSelector } from '../PaymethodTypeSelector'
 import { CountryFilter } from '../CountryFilter'
 import { Button, IconButton, Input, LinkButton } from '../../../styles'
 import { CurrencyFilter } from '../CurrencyFilter'
+import { AdminsSelector } from '../AdminsSelector'
 import { getUniqueId } from '../../../utils'
 import { Select } from '../../../styles/Select/FirstSelect'
 import { useFilterValues } from '../../../contexts/FilterValuesContext'
@@ -44,6 +45,7 @@ const OrdersFilterGroupUI = (props) => {
     paymethodsList,
     businessesList,
     citiesList,
+    adminsList,
     handleChangeGroup,
     handleChangeDateType,
     handleChangeFromDate,
@@ -61,6 +63,7 @@ const OrdersFilterGroupUI = (props) => {
     handleChangeCurrency,
     handleChangeMetaFieldValue,
     handleAddMetaField,
+    handleChangeAdmin,
     handleDeleteMetafield,
     handleChangeExternalId,
     handleChangeChildFilterValue,
@@ -329,6 +332,11 @@ const OrdersFilterGroupUI = (props) => {
                 onChange={(value) => handleChangeChildFilterValue({ assigned: value })}
               />
             </SelectWrapper>
+            <AdminsSelector
+              filterValues={filterValues}
+              adminsList={adminsList}
+              handleChangeAdmin={handleChangeAdmin}
+            />
           </WrapperRow>
           {filterValues?.metafield.map(item => (
             <WrapperRow key={item.id}>

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

@@ -31,6 +31,7 @@ const OrdersManagerUI = (props) => {
     paymethodsList,
     businessesList,
     citiesList,
+    adminsList,
     ordersStatusGroup,
     filterValues,
     deletedOrderIds,
@@ -183,6 +184,7 @@ const OrdersManagerUI = (props) => {
           citiesList={citiesList}
           paymethodsList={paymethodsList}
           businessesList={businessesList}
+          adminsList={adminsList}
           handleChangeSearch={handleChangeSearch}
           handleChangeFilterValues={handleChangeFilterValues}
           selectedOrderIds={selectedOrderIds}
@@ -195,14 +197,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}
           />

package/src/contexts/FilterValuesContext/index.js

@@ -35,6 +35,7 @@ export const FilterValuesProvider = ({ children }) => {
     customerEmail: null,
     customerCellphone: null,
     customerLastname: null,
+    administratorIds: [],
     coupon: null,
     offerId: null
   })