ordering-ui-admin-external 1.43.30 → 1.43.32

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} />
+}

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

@@ -0,0 +1,224 @@
+import styled, { css } from 'styled-components'
+
+export const BusinessLogsContainer = styled.div`
+  height: calc(100% - 100px);
+  padding: 20px;
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-top: 5px;
+  }
+
+  ${({ disabled }) => disabled && css`
+    opacity: 0.7;
+    pointer-events: none;
+  `}
+`
+
+export const TableWrapper = styled.div`
+  overflow: auto;
+  height: 100%;
+`
+
+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(3) {
+          width: 35%;
+          padding-left: 15px;
+          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(3) {
+        width: 35%;
+      }
+      &: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;
+`
+
+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 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;
+`

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

@@ -74,7 +74,7 @@ export const BusinessSummary = (props) => {
     window.open(storeUrl, '_blank')
   }
 
-  const itemsExcluded = !!spoonityConfig ? ['publishing', 'personalization'] : ['publishing', 'spoonity_key', 'personalization']
+  const itemsExcluded = spoonityConfig ? ['publishing', 'personalization', 'logs'] : ['publishing', 'spoonity_key', 'personalization', 'logs']
 
   const businessConfigs = [
     {
@@ -141,13 +141,15 @@ export const BusinessSummary = (props) => {
       key: 'webhooks',
       value: t('WEBHOOKS', 'Webhooks')
     },
-    // {
-    //   key: 'places',
-    //   value: t('PLACES', 'Places')
-    // },
     {
+      key: 'places',
+      value: t('PLACES', 'Places')
+    }, {
       key: 'spoonity_key',
       value: t('SPOONITY_KEY', 'Sponity key')
+    }, {
+      key: 'logs',
+      value: t('LOGS', 'Logs')
     }
   ]
 

package/src/components/Stores/index.js

@@ -17,6 +17,7 @@ import { BusinessImages } from './BusinessImages'
 import { BusinessInformation } from './BusinessInformation'
 import { BusinessInfoSettingList } from './BusinessInfoSettingList'
 import { BusinessLocation } from './BusinessLocation'
+import { BusinessLogs } from './BusinessLogs'
 import { BusinessMenu } from './BusinessMenu'
 import { BusinessNotifications } from './BusinessNotifications'
 import { BusinessOrderingChannels } from './BusinessOrderingChannels'
@@ -135,6 +136,7 @@ export {
   BusinessInformation,
   BusinessInfoSettingList,
   BusinessLocation,
+  BusinessLogs,
   BusinessMenu,
   BusinessNotifications,
   BusinessOrderingChannels,

package/src/components/Users/UserFormDetails/index.js

@@ -6,10 +6,11 @@ import parsePhoneNumber from 'libphonenumber-js'
 import { formatPhoneNumber } from 'react-phone-number-input'
 import { Alert, InputPhoneNumber, RangeCalendar } from '../../Shared'
 import { sortInputFields } from '../../../utils'
-import { Switch, Input, Button } from '../../../styles'
+import { Switch, Input, Button, DefaultSelect } from '../../../styles'
 import { Eye, EyeSlash } from 'react-bootstrap-icons'
 import { UserTypeSelector } from '../UserTypeSelector'
 import { OccupationSelector } from '../OccupationSelector'
+import { timezones } from '../../../config/constants'
 
 import {
   FormInput,
@@ -19,7 +20,8 @@ import {
   WrapperPassword,
   TogglePassword,
   CalendarWrapper,
-  WrapperUserTypeSelector
+  WrapperUserTypeSelector,
+  InputWrapper
 } from './styles'
 
 export const UserFormDetailsUI = (props) => {
@@ -49,6 +51,8 @@ export const UserFormDetailsUI = (props) => {
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [timezonesOptions, setTimezonesOptions] = useState([])
+  const [timezoneSearchValue, setTimezoneSearchValue] = useState('')
   const [, { setUserCustomer }] = useCustomer()
   const emailInput = useRef(null)
 
@@ -219,6 +223,18 @@ export const UserFormDetailsUI = (props) => {
     })
   }, [formMethods])
 
+  useEffect(() => {
+    const _timezonesOptions = timezones
+      .filter(timezone => timezone.toLocaleLowerCase().includes(timezoneSearchValue.toLocaleLowerCase()))
+      .map(timezone => {
+        return {
+          value: timezone,
+          content: timezone
+        }
+      })
+    setTimezonesOptions(_timezonesOptions)
+  }, [timezoneSearchValue])
+
   return (
     <>
       <FormInput onSubmit={formMethods.handleSubmit(onSubmit)} isCheckout={isCheckout}>
@@ -269,6 +285,20 @@ export const UserFormDetailsUI = (props) => {
                 </React.Fragment>
               )
             )}
+            <InputWrapper isTimezone>
+              <DefaultSelect
+                placeholder={t('SELECT_TIMEZONE', 'Select a timezone')}
+                defaultValue={formState?.changes?.timezone ?? user?.timezone ?? ''}
+                options={timezonesOptions}
+                onChange={val => handleChangeSwtich('timezone', val)}
+                optionInnerMaxHeight='300px'
+                isShowSearchBar
+                searchBarIsCustomLayout
+                searchBarIsNotLazyLoad
+                searchValue={timezoneSearchValue}
+                handleChangeSearch={setTimezoneSearchValue}
+              />
+            </InputWrapper>
             {isProfessional && occupations?.length > 0 && (
               <OccupationSelector
                 occupationId={user?.occupation_id}

package/src/components/Users/UserFormDetails/styles.js

@@ -171,3 +171,29 @@ export const WrapperUserTypeSelector = styled.div`
     color: ${props => props.theme.colors.secundaryContrast};
   }
 `
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 20px;
+
+  .select {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    border: none;
+    background-color: ${props => props.theme.colors.secundary};
+    font-size: 14px;
+
+    ${({ isTimezone }) => isTimezone && css`
+      > div:first-child {
+        > div {
+          overflow: hidden;
+        }
+      }
+      .list-wrapper {
+        font-size: 12px;
+        max-height: 220px;
+      }
+    `}
+  }
+`

package/src/index.js

@@ -245,6 +245,7 @@ import {
   BusinessOwners,
   BusinessTypes,
   BusinessLocation,
+  BusinessLogs,
   BusinessImages,
   BusinessVideos,
   SeoOptions,
@@ -674,6 +675,7 @@ export {
   BusinessOwners,
   BusinessTypes,
   BusinessLocation,
+  BusinessLogs,
   BusinessImages,
   BusinessVideos,
   SeoOptions,