ordering-ui-admin-external 1.30.7 → 1.31.0

package/_modules/components/Stores/ProductExtras/index.js

@@ -49,7 +49,8 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
     hanldeDragOver = props.hanldeDragOver,
     handleDrop = props.handleDrop,
     handleDragEnd = props.handleDragEnd,
-    handleUpdateExtraState = props.handleUpdateExtraState;
+    handleUpdateExtraState = props.handleUpdateExtraState,
+    setExtrasState = props.setExtrasState;
   var history = (0, _reactRouterDom.useHistory)();
   var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var theme = (0, _styledComponents.useTheme)();
@@ -248,7 +249,9 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
     extra: currentExtra,
     handleChangeExtraName: handleChangeExtraInput,
     handleUpdateBusinessState: handleUpdateBusinessState,
-    handleUpdateExtraState: handleUpdateExtraState
+    handleUpdateExtraState: handleUpdateExtraState,
+    extrasState: extrasState,
+    setExtrasState: setExtrasState
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, openExtraDetails && /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
     width: "80%",
     open: openExtraDetails,
@@ -265,7 +268,9 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
     extra: currentExtra,
     handleChangeExtraName: handleChangeExtraInput,
     handleUpdateBusinessState: handleUpdateBusinessState,
-    handleUpdateExtraState: handleUpdateExtraState
+    handleUpdateExtraState: handleUpdateExtraState,
+    extrasState: extrasState,
+    setExtrasState: setExtrasState
   }))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
     title: t('WEB_APPNAME', 'Ordering'),
     content: alertState.content,

package/_modules/components/Stores/ProductSummary/index.js

@@ -42,7 +42,8 @@ var ProductSummary = function ProductSummary(props) {
     handleDeleteProduct = props.handleDeleteProduct,
     showProductOption = props.showProductOption,
     isExpand = props.isExpand,
-    setIsExpand = props.setIsExpand;
+    setIsExpand = props.setIsExpand,
+    handleDuplicateProduct = props.handleDuplicateProduct;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -164,6 +165,8 @@ var ProductSummary = function ProductSummary(props) {
       return setIsProductPreview(true);
     }
   }, t('PREVIEW', 'Preview')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    onClick: handleDuplicateProduct
+  }, t('DUPLICATE', 'Duplicate')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     onClick: function onClick() {
       return handleShowOption('custom_fields');
     }

package/_modules/components/Users/UserAddForm/index.js

@@ -48,7 +48,6 @@ var UserAddFormUI = function UserAddFormUI(props) {
     handleChangeUserType = props.handleChangeUserType,
     handlechangeImage = props.handlechangeImage,
     handleChangeSwtich = props.handleChangeSwtich,
-    defaultCountry = props.defaultCountry,
     defaultPhoneNumber = props.defaultPhoneNumber,
     isFromCustomOrder = props.isFromCustomOrder,
     hideUserTypeSelector = props.hideUserTypeSelector;
@@ -302,7 +301,6 @@ var UserAddFormUI = function UserAddFormUI(props) {
       autoComplete: "off"
     }));
   }), !!showInputPhoneNumber && /*#__PURE__*/_react.default.createElement(_Shared.InputPhoneNumber, {
-    defaultCountry: defaultCountry,
     value: userPhoneNumber,
     setValue: handleChangePhoneNumber,
     handleIsValid: setIsValidPhoneNumber

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.30.7",
+  "version": "1.31.0",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.30.6",
+    "ordering-components-admin-external": "1.31.0",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/BusinessIntelligence/AnalyticsDriverOrders/index.js

@@ -30,29 +30,48 @@ export const AnalyticsDriverOrders = (props) => {
   const [dataOptions, setDataOptions] = useState(null)
 
   const generateData = () => {
-    const values = chartDataList.data.dataset.dataset.map((item, index) => {
+    if (!isOrders) {
+      const values = chartDataList.data.dataset.dataset.map((item, index) => {
+        const list = []
+        if (item?.data?.length > 0) {
+          for (const value of item?.data) {
+            list.push(value.y)
+          }
+        }
+        return {
+          label: item.label,
+          data: [...list],
+          fill: false,
+          backgroundColor: 'rgba(75,192,192,0.2)',
+          borderColor: lighten(index / 10, '#2C7BE5'),
+          tension: 0.4,
+          borderWidth: 3
+        }
+      })
+      return values
+    } else {
       const list = []
-      if (item?.data?.length > 0) {
-        for (const value of item?.data) {
+      if (chartDataList.data.dataset.dataset?.data?.length > 0) {
+        for (const value of chartDataList.data.dataset.dataset?.data) {
           list.push(value.y)
         }
       }
-      return {
-        label: item.label,
+      return [{
+        label: chartDataList.data.dataset?.dataset?.label,
         data: [...list],
         fill: false,
         backgroundColor: 'rgba(75,192,192,0.2)',
-        borderColor: lighten(index / 10, '#2C7BE5'),
+        borderColor: '#2C7BE5',
         tension: 0.4,
         borderWidth: 3
-      }
-    })
-    return values
+      }]
+    }
   }
 
   const generateLabel = () => {
     const values = []
-    chartDataList?.data?.dataset?.dataset?.[0]?.data && chartDataList.data.dataset.dataset[0].data.forEach(data => {
+    const chartData = isOrders ? chartDataList?.data?.dataset?.dataset?.data : chartDataList?.data?.dataset?.dataset?.[0]?.data
+    chartData && chartData.forEach(data => {
       values.push(data.x)
     })
     return values
@@ -83,8 +102,8 @@ export const AnalyticsDriverOrders = (props) => {
 
   const TotalOrders = () => {
     let orders = 0
-    if (!chartDataList?.data?.dataset?.dataset[0]?.data || chartDataList?.data?.dataset?.dataset[0]?.data.length === 0) return orders
-    for (const data of chartDataList?.data?.dataset?.dataset[0]?.data) {
+    if (!chartDataList?.data?.dataset?.dataset?.data || chartDataList?.data?.dataset?.dataset?.data.length === 0) return orders
+    for (const data of chartDataList?.data?.dataset?.dataset?.data) {
       orders += data.y
     }
     return orders
@@ -108,7 +127,8 @@ export const AnalyticsDriverOrders = (props) => {
 
   const downloadCSV = () => {
     let csv = `${t('TIME', 'Time')}, ${isOrders ? t('ORDERS', 'Orders') : t('SALES', 'Sales')}\n`
-    for (const row of chartDataList?.data?.dataset?.dataset[0]?.data) {
+    const chartData = isOrders ? chartDataList?.data?.dataset?.dataset?.data : chartDataList?.data?.dataset?.dataset[0]?.data
+    for (const row of chartData) {
       csv += `${row.x},`
       csv += `${row.y},`
       csv += '\n'
@@ -126,12 +146,14 @@ export const AnalyticsDriverOrders = (props) => {
   }
 
   const previewChart = () => {
-    if (chartDataList?.data?.dataset?.dataset[0]?.data.length === 0) return
+    const chartData = isOrders ? chartDataList?.data?.dataset?.dataset?.data : chartDataList?.data?.dataset?.dataset[0]?.data
+    if (chartData.length === 0) return
     setIsShowPreview(true)
   }
 
   useEffect(() => {
-    if (chartDataList?.data?.dataset?.dataset[0]?.data && chartDataList?.data?.dataset?.dataset[0]?.data?.length > 0) {
+    const chartData = isOrders ? chartDataList?.data?.dataset?.dataset?.data : chartDataList?.data?.dataset?.dataset[0]?.data
+    if (chartData && chartData?.length > 0) {
       const defaultData = {
         labels: generateLabel(),
         datasets: generateData()
@@ -145,7 +167,7 @@ export const AnalyticsDriverOrders = (props) => {
       <Container>
         <ChartHeaderContainer>
           <p>{isOrders ? t('ORDERS', 'Orders') : t('SALES', 'Sales')}</p>
-          <ActionBlock disabled={!chartDataList?.data?.dataset?.dataset[0]?.data.length}>
+          <ActionBlock disabled={!(isOrders ? chartDataList?.data?.dataset?.dataset?.data : chartDataList?.data?.dataset?.dataset[0]?.data)?.length}>
             <BsArrowsAngleExpand onClick={previewChart} />
             <BsDownload className='download-view' onClick={downloadCSV} />
           </ActionBlock>
@@ -155,7 +177,7 @@ export const AnalyticsDriverOrders = (props) => {
             chartDataList?.loading ? (
               <Skeleton height={150} />
             ) : (
-              (chartDataList?.data?.dataset?.dataset[0]?.data.length > 0 && dataOptions) ? <Line data={dataOptions} options={options} ref={chartRef} /> : <EmptyContent>{t('NO_DATA', 'No Data')}</EmptyContent>
+              ((isOrders ? chartDataList?.data?.dataset?.dataset?.data : chartDataList?.data?.dataset?.dataset[0]?.data)?.length > 0 && dataOptions) ? <Line data={dataOptions} options={options} ref={chartRef} /> : <EmptyContent>{t('NO_DATA', 'No Data')}</EmptyContent>
             )
           }
         </ChartContentWrapper>

package/src/components/BusinessIntelligence/BusinessAnalytics/index.js

@@ -16,6 +16,7 @@ import { AnalyticsRegisterUsers } from '../AnalyticsRegisterUsers'
 import { AnalyticsCustomerSatisfaction } from '../AnalyticsCustomerSatisfaction'
 import { AnalyticsOrdersAcceptSpend } from '../AnalyticsOrdersAcceptSpend'
 import { AnalyticsSpendList } from '../AnalyticsSpendList'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 
 import {
   BusinessAnalyticsContainer,
@@ -25,7 +26,8 @@ import {
   BusinessFilterWrapper,
   BusinessCalendarWrapper,
   AnalyticsContentWrapper,
-  MapWrraper
+  MapWrraper,
+  AnalyticsTimeZoneWrapper
 } from './styles'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
 import { CountryFilter } from '../CountryFilter'
@@ -88,6 +90,9 @@ const BusinessAnalyticsUI = (props) => {
               {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
             </Button>
           </BusinessFilterWrapper>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
           <BusinessCalendarWrapper>
             <AnalyticsCalendar
               {...props}

package/src/components/BusinessIntelligence/BusinessAnalytics/styles.js

@@ -109,6 +109,8 @@ export const BusinessCalendarWrapper = styled(BusinessFilterWrapper)`
   }
 `
 
+export const AnalyticsTimeZoneWrapper = styled(BusinessFilterWrapper)``
+
 export const AnalyticsContentWrapper = styled.div`
   > div {
     margin-top: 40px;

package/src/components/BusinessIntelligence/ReportsAverageSales/index.js

@@ -7,6 +7,7 @@ import { AnalyticsCalendar } from '../AnalyticsCalendar'
 import { Modal } from '../../Shared'
 import { ReportsDriverGroupFilter } from '../ReportsDriverGroupFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 import {
   OrderStatusContainer,
   Title,
@@ -20,7 +21,9 @@ import {
   Tbody,
   Tfoot,
   TableWrapper,
-  EmptyContent
+  EmptyContent,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 
 const ReportsAverageSalesUI = (props) => {
@@ -110,12 +113,17 @@ const ReportsAverageSalesUI = (props) => {
               {t('BRAND', 'Brand')} ({filterList?.franchises_id ? filterList?.franchises_id?.length : t('ALL', 'All')})
             </Button>
           </BrandBusinessWrapper>
-          <CalendarWrapper>
-            <AnalyticsCalendar
-              handleChangeDate={handleChangeDate}
-              defaultValue={filterList}
-            />
-          </CalendarWrapper>
+          <TimeZoneAndCalendar>
+            <AnalyticsTimeZoneWrapper>
+              <AnalyticsFilterTimeZone {...props} />
+            </AnalyticsTimeZoneWrapper>
+            <CalendarWrapper>
+              <AnalyticsCalendar
+                handleChangeDate={handleChangeDate}
+                defaultValue={filterList}
+              />
+            </CalendarWrapper>
+          </TimeZoneAndCalendar>
         </ButtonActionList>
         <OrderStatusTableWrapper>
           <DistanceTitleBlock active={reportData?.content?.body?.rows?.length > 0}>

package/src/components/BusinessIntelligence/ReportsAverageSales/styles.js

@@ -204,3 +204,37 @@ export const EmptyContent = styled.div`
   justify-content: center;
   padding: 10px;
 `
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

package/src/components/BusinessIntelligence/ReportsBusinessDistance/index.js

@@ -10,6 +10,7 @@ import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
 import { ReportsBarChart } from '../ReportsBarChart'
 import { CountryFilter } from '../CountryFilter'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 import {
   ReportsDistanceContainer,
   Title,
@@ -26,7 +27,9 @@ import {
   EmptyContent,
   CustomerLegend,
   LegendItem,
-  LegendContent
+  LegendContent,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 
 const ReportsBusinessDistanceUI = (props) => {
@@ -162,12 +165,17 @@ const ReportsBusinessDistanceUI = (props) => {
             </Button>
           )}
         </BrandBusinessWrapper>
+        <TimeZoneAndCalendar>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
           <CalendarWrapper>
             <AnalyticsCalendar
               handleChangeDate={handleChangeDate}
               defaultValue={filterList}
             />
           </CalendarWrapper>
+        </TimeZoneAndCalendar>
       </ButtonActionList>
       <DistancePerBrandWrapper>
         <DistanceTitleBlock active={reportData?.content?.body?.rows?.length > 0}>

package/src/components/BusinessIntelligence/ReportsBusinessDistance/styles.js

@@ -248,3 +248,37 @@ export const LegendContent = styled.div`
     color: ${props => props.theme?.colors.lightGray};
   }
 `
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

package/src/components/BusinessIntelligence/ReportsBusinessSpend/index.js

@@ -12,6 +12,7 @@ import { Modal } from '../../Shared'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
 import { CountryFilter } from '../CountryFilter'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 import {
   ReportsBusinessSpendContainer,
   Title,
@@ -25,7 +26,9 @@ import {
   Tbody,
   Tfoot,
   TableWrapper,
-  EmptyContent
+  EmptyContent,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 
 const ReportsBusinessSpendUI = (props) => {
@@ -129,12 +132,17 @@ const ReportsBusinessSpendUI = (props) => {
             </Button>
           )}
         </BrandBusinessWrapper>
+        <TimeZoneAndCalendar>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
           <CalendarWrapper>
             <AnalyticsCalendar
               handleChangeDate={handleChangeDate}
               defaultValue={filterList}
             />
           </CalendarWrapper>
+        </TimeZoneAndCalendar>
       </ButtonActionList>
       <DistancePerBrandWrapper>
         <DistanceTitleBlock active={reportData?.content?.body?.rows?.length > 0}>

package/src/components/BusinessIntelligence/ReportsBusinessSpend/styles.js

@@ -214,3 +214,37 @@ export const EmptyContent = styled.div`
   justify-content: center;
   padding: 10px;
 `
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

package/src/components/BusinessIntelligence/ReportsCustomer/index.js

@@ -6,6 +6,7 @@ import {
 import { Download } from 'react-bootstrap-icons'
 import { Bar } from 'react-chartjs-2'
 import Skeleton from 'react-loading-skeleton'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 
 import {
   ReportsTopDriversContainer,
@@ -16,7 +17,9 @@ import {
   ChartBlockWrapper,
   ChartTitleBlock,
   ChartWrapper,
-  EmptyContent
+  EmptyContent,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 import { Button } from '../../../styles'
 import { AnalyticsCalendar } from '../AnalyticsCalendar'
@@ -143,12 +146,17 @@ const ReportsCustomerUI = (props) => {
             {t('APP_ID', 'App id')} ({filterList?.app_ids ? filterList?.app_ids.length : t('ALL', 'All')})
           </Button>
         </BrandBusinessWrapper>
-        <CalendarWrapper>
-          <AnalyticsCalendar
-            handleChangeDate={handleChangeDate}
-            defaultValue={filterList}
-          />
-        </CalendarWrapper>
+        <TimeZoneAndCalendar>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
+          <CalendarWrapper>
+            <AnalyticsCalendar
+              handleChangeDate={handleChangeDate}
+              defaultValue={filterList}
+            />
+          </CalendarWrapper>
+        </TimeZoneAndCalendar>
       </ButtonActionList>
       <ChartBlockWrapper>
         <ChartTitleBlock active={reportData?.content?.dataset?.dataset?.data?.length > 0}>

package/src/components/BusinessIntelligence/ReportsCustomer/styles.js

@@ -134,3 +134,37 @@ export const EmptyContent = styled.div`
   justify-content: center;
   padding: 10px;
 `
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

package/src/components/BusinessIntelligence/ReportsDriverDistance/index.js

@@ -9,6 +9,7 @@ import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsDriverFilter } from '../ReportsDriverFilter'
 import { ReportsDriverGroupFilter } from '../ReportsDriverGroupFilter'
 import { CountryFilter } from '../CountryFilter'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 import {
   DriverDistanceContainer,
   Title,
@@ -22,7 +23,9 @@ import {
   Tbody,
   Tfoot,
   TableWrapper,
-  EmptyContent
+  EmptyContent,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 
 const ReportsDriverDistanceUI = (props) => {
@@ -138,12 +141,17 @@ const ReportsDriverDistanceUI = (props) => {
               </Button>
             )}
           </BrandBusinessWrapper>
+          <TimeZoneAndCalendar>
+            <AnalyticsTimeZoneWrapper>
+              <AnalyticsFilterTimeZone {...props} />
+            </AnalyticsTimeZoneWrapper>
             <CalendarWrapper>
               <AnalyticsCalendar
                 handleChangeDate={handleChangeDate}
                 defaultValue={filterList}
               />
             </CalendarWrapper>
+          </TimeZoneAndCalendar>
         </ButtonActionList>
         <DistancePerBrandWrapper>
           <DistanceTitleBlock active={reportData?.content?.body?.rows?.length > 0}>
@@ -254,7 +262,7 @@ const ReportsDriverDistanceUI = (props) => {
         />
       </DriverDistanceContainer>
       <Alert
-        title={t('DRIVER_SCHEDULE', 'Driver schedule')}
+        title={t('DRIVER_DISTANCE', 'Driver distance')}
         content={alertState.content}
         acceptText={t('ACCEPT', 'Accept')}
         open={alertState.open}

package/src/components/BusinessIntelligence/ReportsDriverDistance/styles.js

@@ -210,3 +210,37 @@ export const EmptyContent = styled.div`
   justify-content: center;
   padding: 10px;
 `
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

package/src/components/BusinessIntelligence/ReportsDriverOrder/index.js

@@ -8,6 +8,7 @@ import { Modal } from '../../Shared'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
 import { CountryFilter } from '../CountryFilter'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 import {
   ReportsBusinessSpendContainer,
   Title,
@@ -21,7 +22,9 @@ import {
   Tbody,
   Tfoot,
   TableWrapper,
-  EmptyContent
+  EmptyContent,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 
 const ReportsDriverOrderUI = (props) => {
@@ -112,12 +115,17 @@ const ReportsDriverOrderUI = (props) => {
             </Button>
           )}
         </BrandBusinessWrapper>
+        <TimeZoneAndCalendar>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
           <CalendarWrapper>
             <AnalyticsCalendar
               handleChangeDate={handleChangeDate}
               defaultValue={filterList}
             />
           </CalendarWrapper>
+        </TimeZoneAndCalendar>
       </ButtonActionList>
       <DistancePerBrandWrapper>
         <DistanceTitleBlock active={reportData?.content?.body?.rows?.length > 0}>