ordering-ui-admin-external 1.39.9 → 1.40.0

package/src/components/Settings/SettingsLogs/index.js

@@ -0,0 +1,307 @@
+import React, { useEffect } from 'react'
+import { useLanguage, useUtils, useConfig, SettingsLogs as SettingsLogsController } from 'ordering-components-admin-external'
+ import Skeleton from 'react-loading-skeleton'
+ import { Modal, Pagination } from '../../Shared'
+
+ import {
+  DriversGroupLogsContainer,
+  TableWrapper,
+  Table,
+  UserInfoContainer,
+  DateTimeWrapper,
+  NoData,
+  WrapperPagination,
+  DataListTable,
+  EventTypeContainer,
+  SeeChanges,
+  SchedulesWrapper,
+  Schedules,
+  ScheduleDay,
+  ScheduleLapses,
+  ScheduleTitle,
+  HeaderContainer,
+  HeaderTitleContainer,
+  ConfigListTable
+} from './styles'
+
+const SettingsLogsUI = (props) => {
+
+  const { logsList, paginationProps, getSettingsLogs } = 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) => {
+    getSettingsLogs(page, 10)
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(paginationProps.from / pageSize)
+    getDriversGroupLogs(expectedPage, pageSize)
+  }
+
+  const getValidLogData = (data) => {
+    return typeof data === 'object'
+      ? Object.values(data)
+      : typeof data === 'string' ? JSON.parse(data) : data
+  }
+
+  const handleSchedules = (_schedules) => {
+    setSchedules({
+      newSchedule: _schedules?.new,
+      oldSchedule: _schedules?.old
+    })
+  }
+
+  const scheduleModalData = (_schedules) => {
+    setOpen(true)
+    handleSchedules(_schedules)
+  }
+
+  useEffect(() => {
+    if (logsList.loading || logsList.logs.length > 0 || paginationProps.totalPages <= 1) 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?.lapses?.map((item, i) => {
+              return <p key={i}>{`${timeFormated(item?.open)} - ${timeFormated(item?.close)}`}</p>
+            })}
+          </ScheduleLapses>
+        </ScheduleDay>
+      )
+    })
+    )
+  }
+
+  return (
+    <>
+    <DriversGroupLogsContainer>
+      <HeaderContainer>
+        <HeaderTitleContainer>
+          <h1>{t('SETTINGS_LOGS', 'Settings Logs')}</h1>
+        </HeaderTitleContainer>
+      </HeaderContainer>
+      <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('CONFIG', 'Config')}</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>
+                      <ConfigListTable>
+                        <p>{t((log?.config?.key || '').toUpperCase(), (log?.config?.key || '').replaceAll('_',' '))}</p>
+                      </ConfigListTable>
+                    </td>
+                    <td>
+                      <DataListTable>
+                        {log?.data && getValidLogData(log?.data).map((item, i) => (
+                          <tbody key={i}>
+                            <tr>
+                              <td>{t(item?.attribute.toUpperCase(), item?.attribute.replaceAll('_',' '))}</td>
+                            </tr>
+                          </tbody>
+                        ))}
+                      </DataListTable>
+                    </td>
+                    <td>
+                      <DataListTable>
+                        {log?.data && getValidLogData(log?.data).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).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>
+      )}
+    </DriversGroupLogsContainer>
+    <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 SettingsLogs = (props) => {
+  const settingsLogsProps = {
+    ...props,
+    UIComponent: SettingsLogsUI
+  }
+  return <SettingsLogsController {...settingsLogsProps} />
+}

package/src/components/Settings/SettingsLogs/styles.js

@@ -0,0 +1,268 @@
+import styled, { css } from 'styled-components'
+
+export const DriversGroupLogsContainer = styled.div`
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  overflow: auto;
+`
+
+export const TableWrapper = styled.div`
+  overflow: auto;
+  max-height: calc(100vh - 200px);
+`
+
+export const SeeChanges = styled.span`
+  color: ${props => props.theme.colors.primary};
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+export const Table = styled.table`
+  width: 100%;
+  min-width: 1000px;
+  color: ${props => props.theme.colors?.headingColor};
+
+  thead {
+    tr {
+      border-bottom: solid 1px ${props => props.theme.colors.disabled};
+      th {
+        padding: 13px 0;
+        font-size: 12px;
+        &:first-child {
+          width: 10%;
+          ${props => props.theme?.rtl ? css`
+            padding-left: 15px;
+          ` : css`
+            padding-right: 15px;
+          `}
+          box-sizing: border-box;
+        }
+        &:nth-child(4) {
+          ${props => props.theme?.rtl ? css`
+            padding-right: 15px;
+          ` : css`
+            padding-left: 15px;
+          `}
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
+
+  > tbody {
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    td {
+      padding: 13px 0;
+      font-size: 12px;
+      &:first-child {
+        width: 10%;
+        ${props => props.theme?.rtl ? css`
+          padding-left: 15px;
+        ` : css`
+          padding-right: 15px;
+        `}
+        box-sizing: border-box;
+      }
+      &:nth-child(4) {
+        ${props => props.theme?.rtl ? css`
+          padding-right: 15px;
+        ` : css`
+          padding-left: 15px;
+        `}
+        box-sizing: border-box;
+      }
+    }
+  }
+`
+
+export const UserInfoContainer = styled.div`
+  p {
+    color: ${props => props.theme.colors.lightGray};
+    margin: 0px;
+    font-size: 12px;
+    &:first-child {
+      color: ${props => props.theme.colors.headingColor};
+      font-weight: 500;
+    }
+  }
+`
+
+export const DateTimeWrapper = styled.div`
+  white-space: nowrap;
+  font-size: 12px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+
+  ${props => props.theme?.rtl ? css`
+    padding-left: 15px;
+    margin-left: 15px;
+    border-left: 1px solid ${props => props.theme.colors.borderColor};
+  ` : css`
+    padding-right: 15px;
+    margin-right: 15px;
+    border-right: 1px solid ${props => props.theme.colors.borderColor};
+  `}
+`
+
+export const NoData = styled.div`
+  font-size: 16px;
+`
+export const WrapperPagination = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+  justify-content: flex-end;
+`
+
+export const DataListTable = styled.table`
+  width: 100%;
+  border-right: 1px solid ${props => props.theme.colors.borderColor};
+
+  tbody {
+    border-bottom: none;
+    td {
+      box-sizing: border-box;
+      &:first-child {
+        width: 50% !important;
+        padding-left: 15px;
+        padding-right: 15px;
+        box-sizing: border-box;
+      }
+      &:not(:first-child) {
+        width: initial !important;
+      }
+      white-space: nowrap;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      ${props => props.theme?.rtl ? css`
+        padding-left: 15px;
+      ` : css`
+        padding-right: 15px;
+      `}
+    }
+  }
+`
+
+export const ConfigListTable = styled.table`
+  width: 100%;
+  border-right: 1px solid ${props => props.theme.colors.borderColor};
+  text-transform: capitalize;
+
+  tbody {
+    border-bottom: none;
+    td {
+      box-sizing: border-box;
+      &:first-child {
+        width: 50% !important;
+        padding-left: 15px;
+        padding-right: 15px;
+        box-sizing: border-box;
+      }
+      &:not(:first-child) {
+        width: initial !important;
+      }
+      white-space: nowrap;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      ${props => props.theme?.rtl ? css`
+        padding-left: 15px;
+      ` : css`
+        padding-right: 15px;
+      `}
+    }
+  }
+`
+
+export const EventTypeContainer = styled.div`
+  white-space: nowrap;
+  font-size: 12px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-left: 15px;
+  margin-right: 10px;
+  border-right: 1px solid ${props => props.theme.colors.borderColor};
+  border-left: 1px solid ${props => props.theme.colors.borderColor};
+  p{
+    margin-bottom: 0px;
+  }
+`
+
+export const SchedulesWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  justify-content: center;
+
+  ${props => props?.border && css`
+    div:first-child {
+    border-right: 1px solid #E9ECEF;
+    padding-right: 30px;
+    `
+  }
+`
+
+export const Schedules = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`
+
+export const ScheduleDay = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: space-between;
+`
+
+export const ScheduleLapses = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #E9ECEF;
+  padding-left: 10px;
+
+  p  {
+    margin: 0px;
+  }
+`
+
+export const ScheduleTitle = styled.h2`
+  text-align: center;
+`
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+
+  input {
+    border: none;
+    background: #F8F9FA;
+    border-radius: 50px;
+  }
+
+  @media (min-width: 992px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+`
+
+export const HeaderTitleContainer = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  h1 {
+    font-size: 20px;
+    margin: 10px 0 0 0;
+    font-weight: bold;
+    color: ${props => props.theme.colors.headingColor};
+  }
+`

package/src/components/Settings/index.js

@@ -11,6 +11,7 @@ import { LalaMoveConnect } from './LalaMoveConnect'
 import { SettingsDetail } from './SettingsDetail'
 import { EmailSetting } from './EmailSetting'
 import { SettingsList } from './SettingsList'
+import { SettingsLogs } from './SettingsLogs'
 import { NotificationSetting } from './NotificationSetting'
 import { SettingsSelectUI } from './SettingsSelectUI'
 import { SettingsCountryFilter } from './SettingsCountryFilter'
@@ -47,6 +48,7 @@ export {
   SettingsDetail,
   EmailSetting,
   SettingsList,
+  SettingsLogs,
   NotificationSetting,
   SettingsSelectUI,
   SettingsCountryFilter,

package/src/components/SidebarMenu/index.js

@@ -287,6 +287,12 @@ const SidebarMenuUI = (props) => {
       title: t('LANGUAGE_MANAGER', 'Language manager'),
       pageName: 'language',
       url: '/settings/language'
+    },
+    {
+      id: 8,
+      title: t('SETTINGS_LOGS', 'Settings logs'),
+      pageName: 'logs',
+      url: '/settings/logs'
     }
   ]
 
@@ -841,7 +847,8 @@ const SidebarMenuUI = (props) => {
                           location.pathname === '/settings/integrations' ||
                           location.pathname === '/settings/places' ||
                           location.pathname === '/settings/advanced' ||
-                          location.pathname === '/settings/language'
+                          location.pathname === '/settings/language' ||
+                          location.pathname === '/settings/logs'
                         }
                       >
                         <GearIcon />

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

@@ -87,6 +87,15 @@ export const BusinessDetails = (props) => {
             </WrapperMap>
           )}
         </GoogleMapContainer>
+        <FormControl>
+          <label>{t('SLUG', 'Slug')}</label>
+          <Input
+            name='slug'
+            placeholder={t('SLUG', 'Slug')}
+            value={formState?.changes?.slug ?? ''}
+            onChange={handleChangeInput}
+          />
+        </FormControl>
         <FormControl noBottom>
           <label>{t('PHONE_NUMBER', 'Phone number')}</label>
           <Input

package/src/index.js

@@ -185,6 +185,7 @@ import {
   SettingsDetail,
   EmailSetting,
   SettingsList,
+  SettingsLogs,
   NotificationSetting,
   SettingsSelectUI,
   SettingsCountryFilter,
@@ -604,6 +605,7 @@ export {
   SettingsDetail,
   EmailSetting,
   SettingsList,
+  SettingsLogs,
   NotificationSetting,
   SettingsSelectUI,
   SettingsCountryFilter,

package/template/app.js

@@ -85,6 +85,7 @@ import { BusinessAdd } from './pages/BusinessAdd'
 import { CustomProject } from './pages/CustomProject'
 import { OrderingWidgets } from './pages/OrderingWidgets'
 import { BusinessDevicesList } from './pages/BusinessDevicesList'
+import { SettingsLogs } from './pages/SettingsLogs'
 
 export const App = () => {
   const history = useHistory()
@@ -431,6 +432,9 @@ export const App = () => {
                     <ProtectedRoute path='/settings/language' allowedLevels={[0]}>
                       <LanguageManager />
                     </ProtectedRoute>
+                    <ProtectedRoute path='/settings/logs' allowedLevels={[0]}>
+                      <SettingsLogs />
+                    </ProtectedRoute>
 
                     <ProtectedRoute path='/support' allowedLevels={[0]}>
                       <Support />

package/template/components/ListenPageChanges/index.js

@@ -34,6 +34,7 @@ export const ListenPageChanges = ({ children }) => {
     places: '/settings/places',
     integrations: '/settings/integrations',
     language: '/settings/language',
+    logs: '/settings/logs',
     business_analytics: '/intelligence/business',
     drivers_analytics: '/intelligence/drivers',
     invoice: '/intelligence/invoice',

package/template/helmetdata.json

@@ -104,6 +104,13 @@
     "robots": "index, follow",
     "canonicalUrl": ""
   },
+  "logs": {
+    "title": "Settings logs",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
   "store": {
     "title": "Store",
     "description": "a dummy description about this page",

package/template/pages/SettingsLogs/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HelmetTags } from '../../components/HelmetTags'
+import { SettingsLogs as SettingsLogsController } from '../../../src/components/Settings/SettingsLogs'
+
+export const SettingsLogs = (props) => {
+  return (
+    <>
+      <HelmetTags page='logs' />
+      <SettingsLogsController {...props} />
+    </>
+  )
+}