ordering-ui-external 10.0.0 → 10.1.0

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

@@ -20,6 +20,7 @@ import {
   CardHeading,
   Timer
 } from './styles'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
 
 export const OrdersCards = (props) => {
   const {
@@ -32,10 +33,12 @@ export const OrdersCards = (props) => {
     selectedOrderCard,
     handleOrderCardClick,
     handleUpdateDriverLocation,
-    slaSettingTime
+    slaSettingTime,
+    isDelivery
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
+  const { width } = useWindowSize()
   const [{ parseDate, optimizeImage }] = useUtils()
   const [, setCurrentTime] = useState()
   const [configState] = useConfig()
@@ -57,6 +60,8 @@ export const OrdersCards = (props) => {
     const isInvalid = e.target.closest('.view-details') || e.target.closest('.driver-selector')
     if (isInvalid) return
     handleOrderCardClick(order)
+    const element = document.getElementById('deliveryDashboard')
+    if ((isDelivery || isMessagesView) && width < 993 && element) element.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
 
   const getOrderStatus = (s) => {
@@ -123,11 +128,11 @@ export const OrdersCards = (props) => {
     return finalTaget
   }
 
-  const getStatusClassName = (minutes) => {
-    if (isNaN(Number(minutes))) return 'in_time'
-    const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
-    return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
-  }
+  // const getStatusClassName = (minutes) => {
+  //   if (isNaN(Number(minutes))) return 'in_time'
+  //   const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
+  //   return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
+  // }
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -207,7 +212,11 @@ export const OrdersCards = (props) => {
                     <p>{getOrderStatus(order.status)?.value}</p>
                     <div>
                       <p>
-                        {parseDate(order?.delivery_datetime, { utc: false })}
+                        {
+                          order?.delivery_datetime_utc
+                            ? parseDate(order?.delivery_datetime_utc)
+                            : parseDate(order?.delivery_datetime, { utc: false })
+                        }
                       </p>
                       <ViewDetails
                         className='view-details'
@@ -220,7 +229,7 @@ export const OrdersCards = (props) => {
                   {allowColumns?.timer && (
                     <Timer>
                       <p className='bold'>Timer</p>
-                      <p className={getStatusClassName(getDelayMinutes(order))}>{displayDelayedTime(order)}</p>
+                      <p className={order?.time_status}>{displayDelayedTime(order)}</p>
                     </Timer>
                   )}
                 </CardHeading>
@@ -260,7 +269,7 @@ export const OrdersCards = (props) => {
                   </InfoItemContainer>
                 </CardContent>
                 {allowColumns?.slaBar && (
-                  <Timestatus timeState={getStatusClassName(getDelayMinutes(order))} />
+                  <Timestatus timeState={order?.time_status} />
                 )}
               </OrderCard>
             ))}

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

@@ -100,8 +100,10 @@ export const ViewDetails = styled.a`
   cursor: pointer;
   color: ${props => props.theme.colors.primary};
   font-size: 12px;
-  text-decoration: underline;
   margin: 0 10px;
+  &:hover {
+    text-decoration: underline;
+  }
 `
 
 export const InfoItemContainer = styled.div`

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

@@ -11,6 +11,7 @@ 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 {
   OrderContentHeaderContainer,
@@ -58,7 +59,8 @@ export const OrdersContentHeader = (props) => {
     } else {
       _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.driverIds.length > 0 || filterValues.paymethodIds.length > 0 || filterValues.statuses.length > 0 || filterValues?.metafield?.length > 0 ||
+        filterValues?.externalId
     }
     setFilterApplied(_filterApplied)
   }, [filterValues])
@@ -103,6 +105,7 @@ export const OrdersContentHeader = (props) => {
           </HeaderSection>
         )}
         <TopRightSection>
+          <WebsocketStatus />
           {isShowMapsKeySettingButton && (
             <GoogleMapsApiKeySettingButton />
           )}

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

@@ -3,6 +3,7 @@ import { useSession } from 'ordering-components-external'
 import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
 import { OrdersExportCSV } from '../OrdersExportCSV'
 import { OrderDelete } from '../OrderDelete'
+import { CreateCustomOrder } from '../CreateCustomOrder'
 import {
   OrderDashboardControlsContainer,
   InnerContnet,
@@ -14,7 +15,8 @@ export const OrdersDashboardControls = (props) => {
     selectedOrderNumber,
     filterValues,
     handleDeleteMultiOrders,
-    handleChangeMultiOrdersStatus
+    handleChangeMultiOrdersStatus,
+    handleOpenCustomOrderDetail
   } = props
 
   const [{ user }] = useSession()
@@ -23,6 +25,7 @@ export const OrdersDashboardControls = (props) => {
     <>
       <OrderDashboardControlsContainer>
         <InnerContnet>
+          <CreateCustomOrder handleOpenCustomOrderDetail={handleOpenCustomOrderDetail} />
           <OrdersExportCSV filterValues={filterValues} />
           {selectedOrderNumber > 0 && (
             <>

package/src/themes/callcenterOriginal/src/components/Orders/OrdersDashboardControls/styles.js

@@ -4,20 +4,22 @@ export const OrderDashboardControlsContainer = styled.div`
   display: flex;
   margin-top: 10px;
 
-  button {
-    height: 42px;
-    ${props => props.theme?.rtl ? css`
-      margin-left: 14px;
-    ` : css`
-      margin-right: 14px;
-    `}
-
-    svg {
+  > div {
+    > button {
+      height: 42px;
       ${props => props.theme?.rtl ? css`
-        margin-right: 5px;
+        margin-left: 14px;
       ` : css`
-        margin-left: 5px;
+        margin-right: 14px;
       `}
+  
+      svg {
+        ${props => props.theme?.rtl ? css`
+          margin-right: 5px;
+        ` : css`
+          margin-left: 5px;
+        `}
+      }
     }
   }
 

package/src/themes/callcenterOriginal/src/components/Orders/OrdersDashboardList/index.js

@@ -22,6 +22,7 @@ export const OrdersDashboardList = (props) => {
     isSearchByCustomerEmail: true,
     isSearchByCustomerPhone: true,
     isSearchByBusinessName: true,
+    isSearchByDriverName: true,
     driverId: props.driverId
   }
 

package/src/themes/callcenterOriginal/src/components/Orders/OrdersExportCSV/styles.js

@@ -2,6 +2,22 @@ import styled, { css } from 'styled-components'
 
 export const ExportContainer = styled.div`
   position: relative;
+  > button {
+    height: 42px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 14px;
+    ` : css`
+      margin-right: 14px;
+    `}
+
+    svg {
+      ${props => props.theme?.rtl ? css`
+        margin-right: 5px;
+      ` : css`
+        margin-left: 5px;
+      `}
+    }
+  }
 `
 
 export const PopoverContainer = styled.div`

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

@@ -1,22 +1,25 @@
-import React from 'react'
+import React, { useState, useRef, useEffect } from 'react'
+import { PlusCircle, Trash3 } from 'react-bootstrap-icons'
 import { useLanguage, OrdersFilter as OrdersFilterController } from 'ordering-components-external'
 import { BusinessesSelector } from '../BusinessesSelector'
 import { DriversGroupTypeSelector } from '../DriversGroupTypeSelector'
 import { DateTypeSelector } from '../DateTypeSelector'
 import { DriverSelector } from '../DriverSelector'
 import { CitySelector, Modal } from '../../Shared'
-import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
+// import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
 import { DeliveryTypeSelector } from '../DeliveryTypeSelector'
 import { PaymethodTypeSelector } from '../PaymethodTypeSelector'
 import { CountryFilter } from '../CountryFilter'
-import { Button, Input } from '../../../styles'
+import { Button, IconButton, Input } from '../../../styles'
 import { CurrencyFilter } from '../CurrencyFilter'
+import { getUniqueId } from '../../../../../../utils'
 
 import {
   FilterGroupListContainer,
   WrapperRow,
-  MultiSelectContainer,
-  ButtonGroup
+  ButtonGroup,
+  AddInputWrapper,
+  AddMetaFiled
 } from './styles'
 
 const OrdersFilterGroupUI = (props) => {
@@ -36,17 +39,24 @@ const OrdersFilterGroupUI = (props) => {
     handleChangeBusinesses,
     handleChangeDriver,
     handleChangeCity,
-    handleChangeOrderStatus,
+    // handleChangeOrderStatus,
     handleChangeDeliveryType,
     handleChangePaymethodType,
     handleResetFilterValues,
     handleChangeFilterValues,
     handleChangeOrderId,
     handleChangeCountryCode,
-    handleChangeCurrency
+    handleChangeCurrency,
+    handleChangeMetaFieldValue,
+    handleAddMetaField,
+    handleDeleteMetafield,
+    handleChangeExternalId
   } = props
 
   const [, t] = useLanguage()
+  const [metafield, setMetaField] = useState({ key: '', value: '' })
+  const [isShow, setIsShow] = useState(false)
+  const metafieldRef = useRef()
 
   const handleAcceptFilter = () => {
     handleChangeFilterValues(filterValues)
@@ -58,6 +68,33 @@ const OrdersFilterGroupUI = (props) => {
     handleChangeFilterValues({})
   }
 
+  const handleAddMetafieldValue = () => {
+    handleAddMetaField({
+      id: getUniqueId(),
+      key: metafield?.key,
+      value: metafield?.value
+    })
+    setMetaField({ key: '', value: '' })
+    setIsShow(false)
+  }
+
+  const handleDeleteMetafieldValue = (id) => {
+    handleDeleteMetafield(id)
+  }
+
+  const handleClickOutside = (e) => {
+    if (!isShow) return
+    const outsideCalendar = !metafieldRef.current?.contains(e.target)
+    if (outsideCalendar) {
+      setIsShow(false)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleClickOutside)
+    return () => window.removeEventListener('mouseup', handleClickOutside)
+  }, [isShow])
+
   return (
     <Modal
       width='80%'
@@ -75,6 +112,13 @@ const OrdersFilterGroupUI = (props) => {
             value={filterValues?.orderId || ''}
             onChange={(e) => handleChangeOrderId(e)}
           />
+          <Input
+            type='text'
+            placeholder={t('EXTERNAL_ID', 'External Id')}
+            autoComplete='off'
+            value={filterValues?.externalId || ''}
+            onChange={handleChangeExternalId}
+          />
         </WrapperRow>
         <WrapperRow>
           <DriversGroupTypeSelector
@@ -103,18 +147,22 @@ const OrdersFilterGroupUI = (props) => {
           />
         </WrapperRow>
         <WrapperRow>
+          <CountryFilter
+            filterValues={filterValues}
+            handleChangeCountryCode={handleChangeCountryCode}
+          />
           <CitySelector
             cities={citiesList}
             filterValues={filterValues}
             handleChangeCity={handleChangeCity}
           />
-          <MultiSelectContainer>
+          {/* <MultiSelectContainer>
             <OrderStatusTypeSelector
               isFilterView
               filterValues={filterValues}
               handleChangeOrderStatus={handleChangeOrderStatus}
             />
-          </MultiSelectContainer>
+          </MultiSelectContainer> */}
         </WrapperRow>
         <WrapperRow>
           <DeliveryTypeSelector
@@ -128,15 +176,74 @@ const OrdersFilterGroupUI = (props) => {
           />
         </WrapperRow>
         <WrapperRow>
-          <CountryFilter
-            filterValues={filterValues}
-            handleChangeCountryCode={handleChangeCountryCode}
-          />
           <CurrencyFilter
             filterValues={filterValues}
             handleChangeCurrency={handleChangeCurrency}
           />
         </WrapperRow>
+        {filterValues?.metafield.map(item => (
+          <WrapperRow key={item.id}>
+            <Input
+              type='text'
+              name='key'
+              placeholder={t('METAFIELD_NAME', 'Metafield name')}
+              autoComplete='off'
+              value={item.key || ''}
+              onChange={(e) => handleChangeMetaFieldValue(e, item.id)}
+            />
+            {item?.key && (
+              <AddInputWrapper>
+                <Input
+                  type='text'
+                  name='value'
+                  placeholder={t('METAFIELD_VALUE', 'Metafield value')}
+                  autoComplete='off'
+                  value={item?.value || ''}
+                  onChange={(e) => handleChangeMetaFieldValue(e, item.id)}
+                />
+                <IconButton
+                  color='black'
+                  onClick={() => handleDeleteMetafieldValue(item.id)}
+                >
+                  <Trash3 />
+                </IconButton>
+              </AddInputWrapper>
+            )}
+          </WrapperRow>
+        ))}
+        {!isShow && (
+          <AddMetaFiled onClick={() => setIsShow(true)}>{t('ADD_METAFIELD', 'Add a metafield')}</AddMetaFiled>
+        )}
+        {isShow && (
+          <WrapperRow ref={metafieldRef}>
+            <Input
+              type='text'
+              name='key'
+              placeholder={t('METAFIELD_NAME', 'Metafield name')}
+              autoComplete='off'
+              value={metafield.key || ''}
+              onChange={(e) => setMetaField({ ...metafield, key: e.target.value })}
+            />
+            {metafield?.key && (
+              <AddInputWrapper>
+                <Input
+                  type='text'
+                  name='value'
+                  placeholder={t('METAFIELD_VALUE', 'Metafield value')}
+                  autoComplete='off'
+                  value={metafield.value || ''}
+                  onChange={(e) => setMetaField({ ...metafield, value: e.target.value })}
+                />
+                <IconButton
+                  color='primary'
+                  onClick={handleAddMetafieldValue}
+                >
+                  <PlusCircle />
+                </IconButton>
+              </AddInputWrapper>
+            )}
+          </WrapperRow>
+        )}
         <ButtonGroup>
           <Button
             color='primary'

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

@@ -123,3 +123,29 @@ export const ButtonGroup = styled.div`
     }
   }
 `
+
+export const AddInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: transparent !important;
+  input {
+    flex: 1;
+    height: 57px;
+  }
+  button {
+    width: 30px;
+    height: 30px;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const AddMetaFiled = styled.span`
+  font-size: 14px;
+  color: ${props => props.theme.colors.primary};
+  cursor: pointer;
+  width: 100%;
+`

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, useUtils } from 'ordering-components-external'
 import { useWindowSize } from '../../../../../../hooks/useWindowSize'
-import { XLg } from 'react-bootstrap-icons'
+import { XLg, ArrowsAngleExpand, ArrowsAngleContract } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 import { OrdersManager } from '../OrdersManager'
 import { IconButton } from '../../../styles/Buttons'
@@ -29,8 +29,9 @@ export const OrdersLateralBar = (props) => {
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
   const theme = useTheme()
-
   const { width } = useWindowSize()
+
+  const [isExpand, setIsExpand] = useState(false)
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [isOpenDriverOrderDetails, setIsOpenDriverOrderDetails] = useState(false)
 
@@ -83,6 +84,15 @@ export const OrdersLateralBar = (props) => {
     }
   }
 
+  const expandSideBar = () => {
+    const element = document.getElementById('driver_lateral_bar')
+    if (!element) return
+
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!open) return
     document.addEventListener('keydown', onCloseSidebar)
@@ -93,6 +103,14 @@ export const OrdersLateralBar = (props) => {
     <LateralBarContainer id='driver_lateral_bar'>
       <OrdersContainer>
         <CloseButtonWrapper>
+          {width > 576 && (
+            <IconButton
+              color='black'
+              onClick={() => expandSideBar()}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+          )}
           <IconButton
             color='black'
             onClick={() => props.onClose()}

package/src/themes/callcenterOriginal/src/components/Orders/OrdersLateralBar/styles.js

@@ -21,7 +21,7 @@ export const LateralBarContainer = styled.div`
 `
 
 export const OrdersContainer = styled.div`
-  max-width: 560px;
+  /* max-width: 560px; */
 
   #orderTable {
     border-top: 1px solid ${props => props.theme.colors.borderColor};
@@ -34,6 +34,8 @@ export const OrdersContainer = styled.div`
 `
 
 export const CloseButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
   position: absolute;
   top: 25px;
   cursor: pointer;

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

@@ -13,6 +13,7 @@ import {
 
 export const OrdersListing = (props) => {
   const {
+    hidePhoto,
     isSelectedOrders,
     orderList,
     selectedOrderIds,
@@ -46,7 +47,9 @@ export const OrdersListing = (props) => {
 
     allowColumns,
     setAllowColumns,
-    handleDrop
+    handleDrop,
+    isDelivery,
+    saveUserSettings
   } = props
 
   const theme = useTheme()
@@ -109,6 +112,7 @@ export const OrdersListing = (props) => {
             >
               {orderListView === 'table' ? (
                 <OrdersTable
+                  hidePhoto={hidePhoto}
                   setSelectedOrderIds={setSelectedOrderIds}
                   isSelectedOrders={isSelectedOrders}
                   orderList={orderList}
@@ -129,6 +133,7 @@ export const OrdersListing = (props) => {
                   allowColumns={allowColumns}
                   setAllowColumns={setAllowColumns}
                   handleDrop={handleDrop}
+                  saveUserSettings={saveUserSettings}
                 />
               ) : (
                 <OrdersCards
@@ -146,6 +151,7 @@ export const OrdersListing = (props) => {
                   handleOrderCardClick={handleOrderCardClick}
                   handleUpdateDriverLocation={handleUpdateDriverLocation}
                   slaSettingTime={slaSettingTime}
+                  isDelivery={isDelivery}
                 />
               )}
             </WrapperOrderListContent>

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

@@ -31,9 +31,8 @@ const OrdersManagerUI = (props) => {
     citiesList,
     ordersStatusGroup,
     filterValues,
-    deletedOrderId,
+    deletedOrderIds,
     startMulitOrderStatusChange,
-    startMulitOrderDelete,
     handleChangeSearch,
     handleChangeFilterValues,
     handleOrdersStatusGroupFilter,
@@ -46,7 +45,9 @@ const OrdersManagerUI = (props) => {
     handleSelectedSubOrderStatus,
     handleCustomOrderDetail,
     setSelectedOrderIds,
-    numberOfOrdersByStatus
+    numberOfOrdersByStatus,
+    allowColumns,
+    setAllowColumns
   } = props
 
   const [, t] = useLanguage()
@@ -125,10 +126,10 @@ const OrdersManagerUI = (props) => {
   }
 
   useEffect(() => {
-    if (startMulitOrderStatusChange || startMulitOrderDelete) {
+    if (startMulitOrderStatusChange) {
       setTotalSelectedOrder(selectedOrderIds.length)
     }
-  }, [startMulitOrderStatusChange, startMulitOrderDelete])
+  }, [startMulitOrderStatusChange])
 
   useEffect(() => {
     if (selectedOrderIds.length === 0) {
@@ -147,7 +148,6 @@ const OrdersManagerUI = (props) => {
         handleBackRedirect()
       } else {
         setOrderDetailId(id)
-        onOrderRedirect && onOrderRedirect(id)
         setIsOpenOrderDetail(true)
       }
     }
@@ -190,7 +190,7 @@ const OrdersManagerUI = (props) => {
           changeOrderStatus={handleOrdersStatusGroupFilter}
           numberOfOrdersByStatus={numberOfOrdersByStatus}
         />
-        <OrderSubFilterControls isColumn={selectedOrderIds?.length}>
+        <OrderSubFilterControls>
           <OrderStatusSubFilterWrapper isColumn={selectedOrderIds?.length}>
             <OrderStatusSubFilter
               ordersStatusGroup={ordersStatusGroup}
@@ -204,6 +204,10 @@ const OrdersManagerUI = (props) => {
               filterValues={filterValues}
               handleChangeMultiOrdersStatus={handleChangeMultiOrdersStatus}
               handleDeleteMultiOrders={handleDeleteMultiOrders}
+              handleOpenCustomOrderDetail={(id) => {
+                setOrderDetailId(id)
+                setIsOpenOrderDetail(true)
+              }}
             />
           )}
         </OrderSubFilterControls>
@@ -218,7 +222,7 @@ const OrdersManagerUI = (props) => {
                 searchValue={searchValue}
                 filterValues={filterValues}
                 selectedOrderIds={selectedOrderIds}
-                deletedOrderId={deletedOrderId}
+                deletedOrderIds={deletedOrderIds}
                 driversList={driversList}
                 ordersStatusGroup={ordersStatusGroup}
                 selectedSubOrderStatus={selectedSubOrderStatus}
@@ -233,6 +237,8 @@ const OrdersManagerUI = (props) => {
                 setFilterModalOpen={setFilterModalOpen}
                 timeStatus={timeStatus}
                 slaSettingTime={slaSettingTime}
+                allowColumns={allowColumns}
+                setAllowColumns={setAllowColumns}
               />
             </WrapItemView>
           </OrdersInnerContent>
@@ -256,7 +262,7 @@ const OrdersManagerUI = (props) => {
         />
       )}
 
-      <OrderNotification />
+      <OrderNotification customerId={props.customerId} />
 
       {totalSelectedOrder > 0 && (
         <WrapperIndicator>

package/src/themes/callcenterOriginal/src/components/Orders/OrdersManager/styles.js

@@ -42,21 +42,8 @@ export const WrapItemView = styled.div`
 export const OrderSubFilterControls = styled.div`
   display: flex;
   width: 100%;
-
-  ${({ isColumn }) => isColumn ? css`
-    flex-direction: column;
-    > div:last-child {
-      margin-top: 0;
-      margin-bottom: 10px;
-      > div {
-        justify-content: space-between;
-        width: 100%;
-      }
-    }
-  ` : css`
-    flex-direction: row;
-    justify-content: space-between;
-  `}
+  flex-direction: row;
+  justify-content: space-between;
 `
 export const OrderStatusSubFilterWrapper = styled.div`
   flex: 1;