ordering-ui-admin-external 1.43.30 → 1.43.31

package/_modules/index.js

@@ -321,6 +321,12 @@ Object.defineProperty(exports, "BusinessLocation", {
     return _Stores.BusinessLocation;
   }
 });
+Object.defineProperty(exports, "BusinessLogs", {
+  enumerable: true,
+  get: function get() {
+    return _Stores.BusinessLogs;
+  }
+});
 Object.defineProperty(exports, "BusinessManagerBusinesses", {
   enumerable: true,
   get: function get() {

package/_modules/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.widgetURL = exports.verifyDecimals = exports.stringToSlug = exports.sortInputFields = exports.shape = exports.setStorageItem = exports.scrollTo = exports.ribbonValues = exports.reviewCommentList = exports.removeStorageItem = exports.removeQueryToUrl = exports.queryStringToObject = exports.orderStatus = exports.orderRejectCommentList = exports.optimizeImage = exports.getUniqueId = exports.getStorageItem = exports.getStarWidth = exports.getSeconds = exports.getOrderStatus = exports.getOrderStatuPickUp = exports.getMinutes = exports.getLocale = exports.getIconCard = exports.getHours = exports.getCurrenySymbol = exports.getCurrentDiffDays = exports.getAgoMinutes = exports.formatUrlVideo = exports.formatSeconds = exports.firstLetterCapital = exports.findExitingCountryPhoneCode = exports.findExitingCode = exports.fieldsToSort = exports.disableReasons = exports.convertHoursToMinutes = exports.convertHMS = exports.checkValidUrlFormat = exports.checkSiteUrl = exports.checkPreSiteUrl = exports.capitalize = exports.bytesConverter = exports.addQueryToUrl = exports.TwentyFourHours = exports.TwelveHours = exports.DriverTipsOptions = void 0;
+exports.widgetURL = exports.verifyDecimals = exports.stringToSlug = exports.sortInputFields = exports.shape = exports.setStorageItem = exports.scrollTo = exports.ribbonValues = exports.reviewCommentList = exports.removeStorageItem = exports.removeQueryToUrl = exports.queryStringToObject = exports.orderStatus = exports.orderRejectCommentList = exports.optimizeImage = exports.getUniqueId = exports.getStorageItem = exports.getStarWidth = exports.getSeconds = exports.getOrderStatus = exports.getOrderStatuPickUp = exports.getMinutes = exports.getLocale = exports.getIconCard = exports.getHours = exports.getCurrenySymbol = exports.getCurrentDiffDays = exports.getAttributeName = exports.getAgoMinutes = exports.formatUrlVideo = exports.formatSeconds = exports.firstLetterCapital = exports.findExitingCountryPhoneCode = exports.findExitingCode = exports.fieldsToSort = exports.disableReasons = exports.convertHoursToMinutes = exports.convertHMS = exports.checkValidUrlFormat = exports.checkSiteUrl = exports.checkPreSiteUrl = exports.capitalize = exports.bytesConverter = exports.addQueryToUrl = exports.TwentyFourHours = exports.TwelveHours = exports.DriverTipsOptions = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _FaCcMastercard = _interopRequireDefault(require("@meronex/icons/fa/FaCcMastercard"));
 var _FaCcVisa = _interopRequireDefault(require("@meronex/icons/fa/FaCcVisa"));
@@ -437,104 +437,104 @@ var reviewCommentList = exports.reviewCommentList = function reviewCommentList(t
   var reviews = {
     1: {
       1: {
-        title: t('CUSTOMER_QUICK_COMMENT_TITLE_1', "What went wrong?"),
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_1', 'What went wrong?'),
         list: [{
           key: 0,
-          content: t('CUSTOMER_QUICK_COMMENT_1_0', "Not handled with care")
+          content: t('CUSTOMER_QUICK_COMMENT_1_0', 'Not handled with care')
         }, {
           key: 1,
-          content: t('CUSTOMER_QUICK_COMMENT_1_1', "Poor communication")
+          content: t('CUSTOMER_QUICK_COMMENT_1_1', 'Poor communication')
         }, {
           key: 2,
-          content: t('CUSTOMER_QUICK_COMMENT_1_2', "COVID-19 issue")
+          content: t('CUSTOMER_QUICK_COMMENT_1_2', 'COVID-19 issue')
         }, {
           key: 3,
           content: t('CUSTOMER_QUICK_COMMENT_1_3', "Didn't follow instructions")
         }, {
           key: 4,
-          content: t('CUSTOMER_QUICK_COMMENT_1_4', "Rude")
+          content: t('CUSTOMER_QUICK_COMMENT_1_4', 'Rude')
         }, {
           key: 5,
-          content: t('CUSTOMER_QUICK_COMMENT_1_5', "Not on-time")
+          content: t('CUSTOMER_QUICK_COMMENT_1_5', 'Not on-time')
         }]
       },
       2: {
-        title: t('CUSTOMER_QUICK_COMMENT_TITLE_2', "What went wrong?"),
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_2', 'What went wrong?'),
         list: [{
           key: 0,
-          content: t('CUSTOMER_QUICK_COMMENT_2_0', "Not handled with care")
+          content: t('CUSTOMER_QUICK_COMMENT_2_0', 'Not handled with care')
         }, {
           key: 1,
-          content: t('CUSTOMER_QUICK_COMMENT_2_1', "Poor communication")
+          content: t('CUSTOMER_QUICK_COMMENT_2_1', 'Poor communication')
         }, {
           key: 2,
-          content: t('CUSTOMER_QUICK_COMMENT_2_2', "COVID-19 issue")
+          content: t('CUSTOMER_QUICK_COMMENT_2_2', 'COVID-19 issue')
         }, {
           key: 3,
           content: t('CUSTOMER_QUICK_COMMENT_2_3', "Didn't follow instructions")
         }, {
           key: 4,
-          content: t('CUSTOMER_QUICK_COMMENT_2_4', "Rude")
+          content: t('CUSTOMER_QUICK_COMMENT_2_4', 'Rude')
         }, {
           key: 5,
-          content: t('CUSTOMER_QUICK_COMMENT_2_5', "Not on-time")
+          content: t('CUSTOMER_QUICK_COMMENT_2_5', 'Not on-time')
         }]
       },
       3: {
-        title: t('CUSTOMER_QUICK_COMMENT_TITLE_3', "What could have been better?"),
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_3', 'What could have been better?'),
         list: [{
           key: 0,
-          content: t('CUSTOMER_QUICK_COMMENT_3_0', "Not handled with care")
+          content: t('CUSTOMER_QUICK_COMMENT_3_0', 'Not handled with care')
         }, {
           key: 1,
-          content: t('CUSTOMER_QUICK_COMMENT_3_1', "Poor communication")
+          content: t('CUSTOMER_QUICK_COMMENT_3_1', 'Poor communication')
         }, {
           key: 2,
-          content: t('CUSTOMER_QUICK_COMMENT_3_2', "COVID-19 issue")
+          content: t('CUSTOMER_QUICK_COMMENT_3_2', 'COVID-19 issue')
         }, {
           key: 3,
           content: t('CUSTOMER_QUICK_COMMENT_3_3', "Didn't follow instructions")
         }, {
           key: 4,
-          content: t('CUSTOMER_QUICK_COMMENT_3_4', "Rude")
+          content: t('CUSTOMER_QUICK_COMMENT_3_4', 'Rude')
         }, {
           key: 5,
-          content: t('CUSTOMER_QUICK_COMMENT_3_5', "Not on-time")
+          content: t('CUSTOMER_QUICK_COMMENT_3_5', 'Not on-time')
         }]
       },
       4: {
-        title: t('CUSTOMER_QUICK_COMMENT_TITLE_4', " Tell us more"),
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_4', ' Tell us more'),
         list: [{
           key: 0,
-          content: t('CUSTOMER_QUICK_COMMENT_4_0', "Not handled with care")
+          content: t('CUSTOMER_QUICK_COMMENT_4_0', 'Not handled with care')
         }, {
           key: 1,
-          content: t('CUSTOMER_QUICK_COMMENT_4_1', "Poor communication")
+          content: t('CUSTOMER_QUICK_COMMENT_4_1', 'Poor communication')
         }, {
           key: 2,
-          content: t('CUSTOMER_QUICK_COMMENT_4_2', "COVID-19 issue")
+          content: t('CUSTOMER_QUICK_COMMENT_4_2', 'COVID-19 issue')
         }, {
           key: 3,
           content: t('CUSTOMER_QUICK_COMMENT_4_3', "Didn't follow instructions")
         }, {
           key: 4,
-          content: t('CUSTOMER_QUICK_COMMENT_4_4', "Rude")
+          content: t('CUSTOMER_QUICK_COMMENT_4_4', 'Rude')
         }, {
           key: 5,
-          content: t('CUSTOMER_QUICK_COMMENT_4_5', "Not on-time")
+          content: t('CUSTOMER_QUICK_COMMENT_4_5', 'Not on-time')
         }]
       },
       5: {
-        title: t('CUSTOMER_QUICK_COMMENT_TITLE_5', "What went well?"),
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_5', 'What went well?'),
         list: [{
           key: 0,
-          content: t('CUSTOMER_QUICK_COMMENT_5_0', "Good communication")
+          content: t('CUSTOMER_QUICK_COMMENT_5_0', 'Good communication')
         }, {
           key: 1,
-          content: t('CUSTOMER_QUICK_COMMENT_5_1', "Friendly")
+          content: t('CUSTOMER_QUICK_COMMENT_5_1', 'Friendly')
         }, {
           key: 2,
-          content: t('CUSTOMER_QUICK_COMMENT_5_2', "Above and beyond")
+          content: t('CUSTOMER_QUICK_COMMENT_5_2', 'Above and beyond')
         }]
       }
     }
@@ -895,4 +895,81 @@ var disableReasons = exports.disableReasons = function disableReasons() {
   return disableReasonDictionary;
 };
 var TwelveHours = exports.TwelveHours = ['12:00 AM', '01:00 AM', '02:00 AM', '03:00 AM', '04:00 AM', '05:00 AM', '06:00 AM', '07:00 AM', '08:00 AM', '09:00 AM', '10:00 AM', '11:00 AM', '12:00 PM', '01:00 PM', '02:00 PM', '03:00 PM', '04:00 PM', '05:00 PM', '06:00 PM', '07:00 PM', '08:00 PM', '09:00 PM', '10:00 PM', '11:00 PM'];
-var TwentyFourHours = exports.TwentyFourHours = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
+var TwentyFourHours = exports.TwentyFourHours = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
+var getAttributeName = exports.getAttributeName = function getAttributeName(key) {
+  var _useLanguage5 = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage6 = _slicedToArray(_useLanguage5, 2),
+    t = _useLanguage6[1];
+  var attributes = [{
+    key: 'autoassign_amount_drivers',
+    content: t('AUTO_ASSIGN_GROUP_ORDERS_TO_DRIVERS', 'Auto assign the order of group to this amount of drivers')
+  }, {
+    key: 'orders_group_max_orders',
+    content: t('MAX_NUMBER_ORDERS', 'Maximum Number of Orders')
+  }, {
+    key: 'autoassign_autoaccept_by_driver',
+    content: t('ORDER_CONFIRMED_ACCEPTED_BY_DRIVER', 'Accepted by Driver')
+  }, {
+    key: 'orders_group_max_time_between',
+    content: t('MAX_ORDER_TIME_BETWEEN', 'Maximum time between orders in seconds')
+  }, {
+    key: 'orders_group_max_distance_between_pickup',
+    content: t('MAX_DISTANCE_BETWEEN_BUSINESS', 'Maximum distance between businesses in meters')
+  }, {
+    key: 'orders_group_max_distance_between_delivery',
+    content: t('MAX_DISTANCE_BETWEEN_DELIVERY', 'Maximum distance between deliveries in meters')
+  }, {
+    key: 'orders_group_use_maps_api',
+    content: t('USE_MAPS_API', 'Use maps api')
+  }, {
+    key: 'orders_group_max_time_between_pickup',
+    content: t('MAX_DISTANCE_BETWEEN_BUSINESS', 'Maximum distance between businesses in meters')
+  }, {
+    key: 'orders_group_max_time_between_delivery',
+    content: t('MAX_DISTANCE_BETWEEN_DELIVERY', 'Maximum distance between deliveries in meters')
+  }, {
+    key: 'autoassign_forced_assignment',
+    content: t('AUTO_ASSIGN_FORCED_ASSIGNMENT', 'Forced assignment')
+  }, {
+    key: 'autoassign_customer_max_distance_from_business',
+    content: t('MAX_CUSTOMER_DISTANCE_FROM_BUSINESS', 'Max distance between customer and business')
+  }, {
+    key: 'autoassign_initial_radius',
+    content: t('INITIAL_RADIUS', 'Initial radius in meters')
+  }, {
+    key: 'autoassign_increment_radius',
+    content: t('INCREMENT_RADIUS', 'Radius increase in meters')
+  }, {
+    key: 'autoassign_max_radius',
+    content: t('MAX_RADIUS', 'Maximum radius in meters')
+  }, {
+    key: 'autoassign_autoreject_time',
+    content: t('AUTO_REJECT_ORDER_GROUP_AFTER', 'Auto reject Orders After')
+  }, {
+    key: 'autoassign_max_orders',
+    content: t('MAX_AMOUNT_ORDERS_PER_DRIVER', 'Maximum amount of orders per drivers')
+  }, {
+    key: 'autoassign_max_in_pending',
+    content: t('ORDER_PENDING', 'Pending')
+  }, {
+    key: 'available',
+    content: t('AVAILABLE', 'Available')
+  }, {
+    key: 'enabled',
+    content: t('ENABLED', 'Enabled')
+  }, {
+    key: 'last_available_at',
+    content: t('LAST_AVAILABLE_AT', 'Last available at')
+  }, {
+    key: 'busy',
+    content: t('BUSY', 'Busy')
+  }];
+  var found = attributes.find(function (attribute) {
+    return attribute.key === key;
+  });
+  if (found) {
+    return found.content;
+  } else {
+    return key;
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.43.30",
+  "version": "1.43.31",
   "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.43.18",
+    "ordering-components-admin-external": "1.43.20",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/Delivery/DriversGroupLogs/index.js

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import { useLanguage, useUtils, DriversGroupLogs as DriversGroupLogsController, useConfig } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Modal, Pagination } from '../../Shared'
+import { getAttributeName } from '../../../utils'
 
 import {
   DriversGroupLogsContainer,
@@ -40,38 +41,6 @@ export const DriversGroupLogsUI = (props) => {
   const [{ configs }] = useConfig()
   const formatTime = configs?.general_hour_format?.value
 
-  const getAttributeName = (key) => {
-    const attributes = [
-      { key: 'autoassign_amount_drivers', content: t('AUTO_ASSIGN_GROUP_ORDERS_TO_DRIVERS', 'Auto assign the order of group to this amount of drivers') },
-      { key: 'orders_group_max_orders', content: t('MAX_NUMBER_ORDERS', 'Maximum Number of Orders') },
-      { key: 'autoassign_autoaccept_by_driver', content: t('ORDER_CONFIRMED_ACCEPTED_BY_DRIVER', 'Accepted by Driver') },
-      { key: 'orders_group_max_time_between', content: t('MAX_ORDER_TIME_BETWEEN', 'Maximum time between orders in seconds') },
-      { key: 'orders_group_max_distance_between_pickup', content: t('MAX_DISTANCE_BETWEEN_BUSINESS', 'Maximum distance between businesses in meters') },
-      { key: 'orders_group_max_distance_between_delivery', content: t('MAX_DISTANCE_BETWEEN_DELIVERY', 'Maximum distance between deliveries in meters') },
-      { key: 'orders_group_use_maps_api', content: t('USE_MAPS_API', 'Use maps api') },
-      { key: 'orders_group_max_time_between_pickup', content: t('MAX_DISTANCE_BETWEEN_BUSINESS', 'Maximum distance between businesses in meters') },
-      { key: 'orders_group_max_time_between_delivery', content: t('MAX_DISTANCE_BETWEEN_DELIVERY', 'Maximum distance between deliveries in meters') },
-      { key: 'autoassign_forced_assignment', content: t('AUTO_ASSIGN_FORCED_ASSIGNMENT', 'Forced assignment') },
-      { key: 'autoassign_customer_max_distance_from_business', content: t('MAX_CUSTOMER_DISTANCE_FROM_BUSINESS', 'Max distance between customer and business') },
-      { key: 'autoassign_initial_radius', content: t('INITIAL_RADIUS', 'Initial radius in meters') },
-      { key: 'autoassign_increment_radius', content: t('INCREMENT_RADIUS', 'Radius increase in meters') },
-      { key: 'autoassign_max_radius', content: t('MAX_RADIUS', 'Maximum radius in meters') },
-      { key: 'autoassign_autoreject_time', content: t('AUTO_REJECT_ORDER_GROUP_AFTER', 'Auto reject Orders After') },
-      { key: 'autoassign_max_orders', content: t('MAX_AMOUNT_ORDERS_PER_DRIVER', 'Maximum amount of orders per drivers') },
-      { key: 'autoassign_max_in_pending', content: t('ORDER_PENDING', 'Pending') },
-      { key: 'available', content: t('AVAILABLE', 'Available') },
-      { key: 'enabled', content: t('ENABLED', 'Enabled') },
-      { key: 'last_available_at', content: t('LAST_AVAILABLE_AT', 'Last available at') },
-      { key: 'busy', content: t('BUSY', 'Busy') }
-    ]
-    const found = attributes.find(attribute => attribute.key === key)
-    if (found) {
-      return found.content
-    } else {
-      return key
-    }
-  }
-
   const handleChangePage = (page) => {
     getDriversGroupLogs(page, 10)
   }

package/src/components/Stores/BusinessDetails/index.js

@@ -19,6 +19,7 @@ import { BusinessOrderingChannels } from '../BusinessOrderingChannels'
 import { BusinessFrontLayout } from '../BusinessFrontLayout'
 // import { BusinessPublishing } from '../BusinessPublishing'
 import { BusinessPlaceGroupList } from '../BusinessPlaceGroupList'
+import { BusinessLogs } from '../BusinessLogs'
 import { SpoonityApiKey } from '../SpoonityApiKey'
 
 import { MoreSidebarLayout, Personalization, Alert } from '../../Shared'
@@ -348,6 +349,11 @@ export const BusinessDetailsUI = (props) => {
               spoonityKeyState={spoonityKeyState}
             />
           )}
+          {selectedItem === 'logs' && (
+            <BusinessLogs
+              businessId={businessState?.business?.id}
+            />
+          )}
         </MoreSidebarLayout>
       )}
 

package/src/components/Stores/BusinessLogs/index.js

@@ -0,0 +1,304 @@
+import React, { useEffect } from 'react'
+import { useLanguage, useUtils, useConfig, BusinessLogs as BusinessLogsController } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import { Modal, Pagination } from '../../Shared'
+import { getAttributeName } from '../../../utils'
+import {
+  BusinessLogsContainer,
+  TableWrapper,
+  Table,
+  UserInfoContainer,
+  DateTimeWrapper,
+  NoData,
+  WrapperPagination,
+  DataListTable,
+  EventTypeContainer,
+  SeeChanges,
+  SchedulesWrapper,
+  Schedules,
+  ScheduleDay,
+  ScheduleLapses,
+  ScheduleTitle
+} from './styles'
+import moment from 'moment'
+
+export const BusinessLogsUI = (props) => {
+  const {
+    logsList,
+    paginationProps,
+    getBusinessLogs,
+    actionDisabled
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const [open, setOpen] = React.useState(false)
+  const [schedules, setSchedules] = React.useState({
+    newSchedule: [],
+    oldSchedule: []
+  })
+  const [{ configs }] = useConfig()
+  const formatTime = configs?.general_hour_format?.value
+
+  const handleChangePage = (page) => {
+    getBusinessLogs(page, 10)
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(paginationProps.from / pageSize)
+    getBusinessLogs(expectedPage, pageSize)
+  }
+
+  const getValidLogData = (data) => {
+    return typeof data === 'object'
+      ? Object.values(data)
+      : typeof data === 'string' ? JSON.parse(data) : data
+  }
+
+  const handleSchedules = (_schedules) => {
+    setSchedules({
+      newSchedule: typeof _schedules?.new === 'string' ? JSON.parse(_schedules?.new) : _schedules?.new,
+      oldSchedule: typeof _schedules?.old === 'string' ? JSON.parse(_schedules?.old) : _schedules?.old
+    })
+  }
+
+  const scheduleModalData = (_schedules) => {
+    setOpen(true)
+    handleSchedules(_schedules)
+  }
+
+  useEffect(() => {
+    if (logsList.loading || logsList.logs.length > 0 || paginationProps.totalPages <= 1 || logsList.error) return
+    if (paginationProps.currentPage !== paginationProps.totalPages) {
+      handleChangePage(paginationProps.currentPage)
+    } else {
+      handleChangePage(paginationProps.currentPage - 1)
+    }
+  }, [logsList.logs, paginationProps])
+
+  const daysOptions = [
+    t('DAY7', 'Sunday'),
+    t('DAY1', 'Monday'),
+    t('DAY2', 'Tuesday'),
+    t('DAY3', 'Wednesday'),
+    t('DAY4', 'Thursday'),
+    t('DAY5', 'Friday'),
+    t('DAY6', 'Saturday')
+  ]
+
+  const checkTime = (val) => (val < 10 ? `0${val}` : val)
+  const timeFormated = (time) => {
+    return moment(`1900-01-01 ${checkTime(time.hour)}:${checkTime(time.minute)}`).format(formatTime)
+  }
+
+  const getSchedule = (_schedules) => {
+    return ((!_schedules?.length && _schedules?.length < 1) ? <p>{t('NONE', 'None')}</p> : _schedules?.map((schedule, i) => {
+      return (
+        <ScheduleDay key={i}>
+          <span>{daysOptions[i]}</span>
+          <ScheduleLapses>
+            {schedule?.enabled && schedule?.lapses?.map((item, i) => {
+              return <p key={i}>{`${timeFormated(item?.open)} - ${timeFormated(item?.close)}`}</p>
+            })}
+            {!schedule?.enabled && (
+              <p>{t('UNAVAILABLE', 'Unavailable')}</p>
+            )}
+          </ScheduleLapses>
+        </ScheduleDay>
+      )
+    })
+    )
+  }
+
+  return (
+    <>
+      <BusinessLogsContainer
+        disabled={actionDisabled}
+      >
+        <h1>{t('LOGS', 'Logs')}</h1>
+        <TableWrapper>
+          {(logsList.loading || logsList.logs.length > 0) ? (
+            <Table>
+              <thead>
+                <tr>
+                  <th>{t('CONTROL_PANEL_USERS', 'Users')}</th>
+                  <th>{t('EVENTS_TYPE', 'Events type')}</th>
+                  <th>{t('DETAILS', 'Details')}</th>
+                  <th>{t('NEW', 'New')}</th>
+                  <th>{t('OLD', 'Old')}</th>
+                  <th>{t('EXPORT_DATE', 'Date')}</th>
+                  <th>{t('USER_AGENT', 'User agent')}</th>
+                </tr>
+              </thead>
+              {logsList.loading ? (
+                [...Array(10).keys()].map(i => (
+                  <tbody key={i}>
+                    <tr>
+                      <td>
+                        <UserInfoContainer>
+                          <p><Skeleton width={100} /></p>
+                          <p><Skeleton width={120} /></p>
+                        </UserInfoContainer>
+                      </td>
+                      <td>
+                        <DataListTable>
+                          <tbody>
+                            <tr>
+                              <td><Skeleton width={100} /></td>
+                              <td><Skeleton width={20} /></td>
+                              <td><Skeleton width={20} /></td>
+                            </tr>
+                          </tbody>
+                        </DataListTable>
+                      </td>
+                      <td>
+                        <DateTimeWrapper>
+                          <Skeleton />
+                        </DateTimeWrapper>
+                      </td>
+                      <td>
+                        <Skeleton />
+                      </td>
+                    </tr>
+                  </tbody>
+                ))
+              ) : (
+                !logsList.error && logsList.logs?.map(log => (
+                  <tbody key={log.id}>
+                    <tr>
+                      <td>
+                        <UserInfoContainer>
+                          <p>{log?.author?.name || log?.user?.name} {log?.author?.lastname || log?.user?.lastname}</p>
+                          <p>{log?.author?.email || log?.user?.email}</p>
+                        </UserInfoContainer>
+                      </td>
+                      <td>
+                        <EventTypeContainer>
+                          <p>{t((log?.event || '').toUpperCase())}</p>
+                        </EventTypeContainer>
+                      </td>
+                      <td>
+                        <DataListTable>
+                          {log?.data && getValidLogData(log?.data).filter(item => item.attribute !== 'schedule_ranges').map((item, i) => (
+                            <tbody key={i}>
+                              <tr>
+                                <td>{getAttributeName(item?.attribute)}</td>
+                              </tr>
+                            </tbody>
+                          ))}
+                        </DataListTable>
+                      </td>
+                      <td>
+                        <DataListTable>
+                          {log?.data && getValidLogData(log?.data).filter(item => item.attribute !== 'schedule_ranges').map((item, i) => (
+                            <tbody key={i}>
+                              <tr>
+                                {(item.attribute !== 'schedule')
+                                  ? (
+                                    <td>
+                                      {
+                                        (typeof item?.new !== 'undefined' && item?.new !== null)
+                                          ? `${item?.new}`
+                                          : item?.added?.length > 0 ? item?.added?.toString() : t('NONE', 'None')
+                                      }
+                                    </td>
+                                  )
+                                  : (
+                                    <td>
+                                      <SeeChanges onClick={() => scheduleModalData(item, 'new')}>{t('SEE_CHANGES', 'See changes')}</SeeChanges>
+                                    </td>
+                                  )}
+                              </tr>
+                            </tbody>
+                          ))}
+                        </DataListTable>
+                      </td>
+                      <td>
+                        <DataListTable>
+                          {log?.data && getValidLogData(log?.data).filter(item => item.attribute !== 'schedule_ranges').map((item, i) => (
+                            <tbody key={i}>
+                              <tr>
+                                {item.attribute !== 'schedule'
+                                  ? (
+                                    <td>
+                                      {
+                                        (typeof item?.old !== 'undefined' && item?.old !== null)
+                                          ? `${item?.old}`
+                                          : item?.removed?.length > 0 ? item?.removed?.toString() : t('NONE', 'None')
+                                      }
+                                    </td>
+                                  )
+                                  : (
+                                    <td>
+                                      <SeeChanges onClick={() => scheduleModalData(item, 'old')}>{t('SEE_CHANGES', 'See changes')}</SeeChanges>
+                                    </td>
+                                  )}
+                              </tr>
+                            </tbody>
+                          ))}
+                        </DataListTable>
+                      </td>
+                      <td>
+                        <DateTimeWrapper>
+                          {parseDate(log.created_at, { utc: false })}
+                        </DateTimeWrapper>
+                      </td>
+                      <td>
+                        {log?.user_agent}
+                      </td>
+                    </tr>
+                  </tbody>
+                ))
+              )}
+            </Table>
+          ) : (
+            <NoData>{t('NO_DATA', 'No Data')}</NoData>
+          )}
+        </TableWrapper>
+        {logsList?.logs.length > 0 && (
+          <WrapperPagination>
+            <Pagination
+              isHidePagecontrol
+              currentPage={paginationProps.currentPage}
+              totalPages={paginationProps.totalPages}
+              handleChangePage={handleChangePage}
+              handleChangePageSize={handleChangePageSize}
+            />
+          </WrapperPagination>
+        )}
+      </BusinessLogsContainer>
+      <Modal
+        width='40%'
+        height='60vh'
+        style={{ overflowY: 'auto' }}
+        padding='30px'
+        title={t('SCHEDULE_CHANGES', 'Schedule changes')}
+        open={open}
+        onClose={() => setOpen(false)}
+      >
+        <SchedulesWrapper border={!!schedules?.oldSchedule}>
+          {schedules?.newSchedule && (
+            <Schedules>
+              <ScheduleTitle>{t('NEW', 'New')}</ScheduleTitle>
+              {getSchedule(schedules?.newSchedule)}
+            </Schedules>
+          )}
+          {schedules?.oldSchedule && (
+            <Schedules>
+              <ScheduleTitle>{t('OLD', 'Old')}</ScheduleTitle>
+              {getSchedule(schedules?.oldSchedule)}
+            </Schedules>
+          )}
+        </SchedulesWrapper>
+      </Modal>
+    </>
+  )
+}
+
+export const BusinessLogs = (props) => {
+  const businessLogsProps = {
+    ...props,
+    UIComponent: BusinessLogsUI
+  }
+  return <BusinessLogsController {...businessLogsProps} />
+}