ordering-ui-admin-external 1.30.7 → 1.31.1

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

@@ -33,7 +33,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var BusinessSummary = function BusinessSummary(props) {
-  var _businessState$busine5, _businessState$busine6, _businessState$busine7, _businessState$busine8, _theme$images, _businessState$busine9;
+  var _configs$white_label_, _businessState$busine5, _businessState$busine6, _businessState$busine7, _businessState$busine8, _theme$images, _businessState$busine9;
   var isAdmin = props.isAdmin,
     businessState = props.businessState,
     actionSidebar = props.actionSidebar,
@@ -81,6 +81,7 @@ var BusinessSummary = function BusinessSummary(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     confirm = _useState6[0],
     setConfirm = _useState6[1];
+  var isEnabledWhiteLabelModule = configs === null || configs === void 0 || (_configs$white_label_ = configs.white_label_module) === null || _configs$white_label_ === void 0 ? void 0 : _configs$white_label_.value;
   var handleOpenCategory = function handleOpenCategory() {
     var _businessState$busine;
     events.emit('go_to_page', {
@@ -200,7 +201,7 @@ var BusinessSummary = function BusinessSummary(props) {
     onClick: function onClick() {
       return handleDuplicateBusiness();
     }
-  }, t('DUPLICATE', 'Duplicate')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+  }, t('DUPLICATE', 'Duplicate')), !isEnabledWhiteLabelModule && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     onClick: function onClick() {
       return handleSelectedItem('personalization');
     }
@@ -231,7 +232,7 @@ var BusinessSummary = function BusinessSummary(props) {
     borderRadius: "8px",
     onClick: handleOpenCategory,
     disabled: businessState === null || businessState === void 0 ? void 0 : businessState.loading
-  }, t('CATEGORIES_AND_PRODUCTS', 'Categories & products')), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+  }, t('CATEGORIES_AND_PRODUCTS', 'Categories & products')), !isEnabledWhiteLabelModule && /*#__PURE__*/_react.default.createElement(_styles.Button, {
     color: "primary",
     outline: true,
     borderRadius: "8px",
@@ -245,7 +246,9 @@ var BusinessSummary = function BusinessSummary(props) {
     return configs.key !== 'spoonity_key';
   }) : businessConfigs.filter(function (c) {
     return !itemsExcluded.includes(c.key);
-  })).map(function (config) {
+  })).filter(function (item) {
+    return isEnabledWhiteLabelModule ? item.key !== 'personalization' : true;
+  }).map(function (config) {
     return /*#__PURE__*/_react.default.createElement(_styles2.BusinessConfigItem, {
       key: config.key,
       active: selectedItem === config.key,

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

@@ -96,6 +96,12 @@ var BusinessWebhooksUI = function BusinessWebhooksUI(props) {
   }, {
     value: 'orders_delivery_failed_driver',
     content: t('ORDERS_DELIVERY_FAILED_DRIVER')
+  }, {
+    value: 'preorder_updated',
+    content: t('PREORDER_UPDATED', 'Preorder updated')
+  }, {
+    value: 'drivers_changes',
+    content: t('DRIVERS_CHANGES', 'Driver changes')
   }];
   var timeList = [{
     value: '',

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

@@ -65,6 +65,8 @@ var ProductExtraOptionDetailsUI = function ProductExtraOptionDetailsUI(props) {
     handleChangeItem = props.handleChangeItem,
     isAddForm = props.isAddForm,
     setIsAddForm = props.setIsAddForm,
+    handleDuplicateOption = props.handleDuplicateOption,
+    handleDuplicateSubOption = props.handleDuplicateSubOption,
     dragoverSubOptionId = props.dragoverSubOptionId,
     isSubOptionsBottom = props.isSubOptionsBottom,
     handleDragStart = props.handleDragStart,
@@ -231,6 +233,8 @@ var ProductExtraOptionDetailsUI = function ProductExtraOptionDetailsUI(props) {
       }));
     }
   }, t('CUSTOM_FIELDS', 'Custom Fields')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    onClick: handleDuplicateOption
+  }, t('DUPLICATE', 'Duplicate')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     onClick: function onClick() {
       return setOpenModal(_objectSpread(_objectSpread({}, openModal), {}, {
         externalId: true
@@ -293,7 +297,8 @@ var ProductExtraOptionDetailsUI = function ProductExtraOptionDetailsUI(props) {
       handleDragStart: handleDragStart,
       hanldeDragOver: hanldeDragOver,
       handleDrop: handleDrop,
-      handleDragEnd: handleDragEnd
+      handleDragEnd: handleDragEnd,
+      handleDuplicateSubOption: handleDuplicateSubOption
     });
   }), isAddForm && /*#__PURE__*/_react.default.createElement(_styles2.AdddSubOptionForm, {
     onSubmit: handleSubmit(handleAddOption)

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

@@ -61,7 +61,9 @@ var ProductExtraOptionsUI = function ProductExtraOptionsUI(props) {
     hanldeDragOver = props.hanldeDragOver,
     handleDrop = props.handleDrop,
     handleDragEnd = props.handleDragEnd,
-    handleUpdateExtraState = props.handleUpdateExtraState;
+    handleUpdateExtraState = props.handleUpdateExtraState,
+    handleDuplicateExtra = props.handleDuplicateExtra,
+    setExtraState = props.setExtraState;
   var theme = (0, _styledComponents.useTheme)();
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -281,6 +283,8 @@ var ProductExtraOptionsUI = function ProductExtraOptionsUI(props) {
       }));
     }
   }, t('CUSTOM_FIELDS', 'Custom Fields')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    onClick: handleDuplicateExtra
+  }, t('DUPLICATE', 'Duplicate')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     onClick: function onClick() {
       return setOpenModal(_objectSpread(_objectSpread({}, openModal), {}, {
         externalId: true
@@ -468,7 +472,9 @@ var ProductExtraOptionsUI = function ProductExtraOptionsUI(props) {
     },
     handleUpdateBusinessState: handleUpdateBusinessState,
     handleSucccessDeleteOption: handleSucccessDeleteOption,
-    isMaxError: isMaxError
+    isMaxError: isMaxError,
+    parentExtraState: extraState,
+    setParentExtraState: setExtraState
   })), /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
     width: "70%",
     open: openModal === null || openModal === void 0 ? void 0 : openModal.metaField,

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

@@ -50,7 +50,8 @@ var ProductExtraSuboption = function ProductExtraSuboption(props) {
     handleDragStart = props.handleDragStart,
     hanldeDragOver = props.hanldeDragOver,
     handleDrop = props.handleDrop,
-    handleDragEnd = props.handleDragEnd;
+    handleDragEnd = props.handleDragEnd,
+    handleDuplicateSubOption = props.handleDuplicateSubOption;
   var theme = (0, _styledComponents.useTheme)();
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -360,6 +361,10 @@ var ProductExtraSuboption = function ProductExtraSuboption(props) {
       }));
     }
   }, t('CUSTOM_FIELDS', 'Custom fields')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    onClick: function onClick() {
+      return handleDuplicateSubOption(subOption === null || subOption === void 0 ? void 0 : subOption.id);
+    }
+  }, t('DUPLICATE', 'Duplicate')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     onClick: function onClick() {
       return setExternalIdOpen(true);
     }

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.1",
   "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.32.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}>