agx-chat-web 1.2.2 → 1.2.4

package/src/app/Messenger/classes/slaCalculations.ts

@@ -1,197 +0,0 @@
-import dayjs, { ConfigType, Dayjs } from 'dayjs'
-import dayjsBR from 'dayjs/locale/pt-br'
-import utc from 'dayjs/plugin/utc'
-import timezone from 'dayjs/plugin/timezone'
-import isToday from 'dayjs/plugin/isToday'
-const serverTz = 'America/Sao_Paulo'
-
-dayjs.extend(utc)
-dayjs.extend(timezone)
-dayjs.extend(isToday)
-dayjs.locale(dayjsBR)
-
-export const timeAsDayjs = (
-  value: ConfigType = new Date(),
-  options?: { server?: boolean; applyTimezone?: boolean }
-): Dayjs => {
-  const server = options?.server
-  const applyTimezone = options?.applyTimezone
-
-  let timezone = dayjs.tz.guess()
-  if (!(applyTimezone ?? true)) timezone = 'GMT'
-  else if (server ?? false) timezone = serverTz
-
-  return dayjs.tz(value, timezone)
-}
-
-export const time = (
-  value: ConfigType = new Date(),
-  options?: { server?: boolean; applyTimezone?: boolean }
-): Date => {
-  const server = options?.server
-  const applyTimezone = options?.applyTimezone
-  let aux: Dayjs
-
-  if (!(applyTimezone ?? true))
-    aux = dayjs.tz(value, 'GMT') // Set applyTimezone to false when timezone is applied incorrectly (usually when working with JSDate and timestamps)
-  else if (server ?? false) aux = dayjs.tz(value, serverTz)
-  else aux = dayjs.tz(value, dayjs.tz.guess())
-
-  return new Date(
-    Date.UTC(
-      aux.year(),
-      aux.month(),
-      aux.date(),
-      aux.hour(),
-      aux.minute(),
-      aux.second(),
-      aux.millisecond()
-    )
-  )
-}
-
-export class SlaDates {
-  public seconds: number | null
-
-  constructor (seconds: number) {
-    this.seconds = seconds
-  }
-
-  private holidays = {
-    2023: ['09-07', '10-12', '10-17', '11-02', '11-15', '11-20', '12-25'],
-  }
-
-  private isWorkingDay (date: Dayjs) {
-    const dayOfWeek = date.day()
-    return dayOfWeek >= 1 && dayOfWeek <= 5 // Monday to Friday (1 to 5)
-  }
-
-  private isWorkingHour (date: Dayjs) {
-    const hour = date.hour()
-    return hour >= 9 && hour <= 18 // Between 9 AM and 5 PM (inclusive)
-  }
-
-  public isWeekendOrHoliday (date: Dayjs | Date | string): boolean {
-    const weekDay = timeAsDayjs(date, { applyTimezone: false }).day()
-    if ([6, 0].includes(weekDay)) return true
-
-    const formatedDate = timeAsDayjs(date).format('MM-DD')
-    const isHollyday = this.holidays[2023].includes(formatedDate)
-    return isHollyday
-  }
-
-  private isHoliday (date: Dayjs) {
-    const formatedDate = timeAsDayjs(date, { applyTimezone: false }).format(
-      'MM-DD'
-    )
-    const isHollyday = this.holidays[2023].includes(formatedDate)
-    return isHollyday
-  }
-
-  public canUpdateClock (date: Dayjs) {
-    const isWorking = this.isWorkingDay(date) && this.isWorkingHour(date)
-    return !this.isWeekendOrHoliday(date) && isWorking
-  }
-
-  public getDiffInSeconds (
-    startDate: dayjs.Dayjs,
-    endDate: dayjs.Dayjs
-  ): number {
-    const diffInSeconds = endDate.diff(startDate, 'second')
-    return diffInSeconds
-  }
-
-  calculateWorkingTime (
-    startDate: Dayjs,
-    endDate: Dayjs,
-    workingHours: { start: number; end: number }
-  ) {
-    let current = startDate.clone()
-    let workingTime = 0
-
-    while (current.isBefore(endDate)) {
-      // Skip weekends (Saturday and Sunday) and Holydays
-
-      if (this.isWorkingDay(current) && !this.isHoliday(current)) {
-        const startOfDay = current
-          .clone()
-          .startOf('day')
-          .add(workingHours.start, 'hour')
-        const endOfDay = current
-          .clone()
-          .startOf('day')
-          .add(workingHours.end, 'hour')
-
-        if (current.isBefore(startOfDay)) {
-          // If current time is before the start of working hours, move to the start of working hours
-          current = startOfDay.clone()
-        }
-
-        if (current.isAfter(endOfDay)) {
-          current = current.clone().add(1, 'day').startOf('day')
-        } else if (endDate.isAfter(endOfDay)) {
-          // If end date is after the end of working hours, add a full working day
-
-          workingTime += Math.abs(endOfDay.clone().diff(current, 'second'))
-          current = current
-            .clone()
-            .add(1, 'day')
-            .startOf('day')
-            .add(workingHours.start, 'hour')
-        } else {
-          // Calculate working time for the last day (end date)
-          workingTime += Math.abs(endDate.clone().diff(current, 'second'))
-
-          break
-        }
-      } else {
-        // Move to the next day
-        current = current.clone().add(1, 'day').startOf('day')
-      }
-    }
-
-    return workingTime
-  }
-
-  // Function to calculate the difference in seconds between two dates considering working hours
-  getDifferenceInSeconds (
-    startDate: Dayjs,
-    endDate: Dayjs,
-    workingHours: { start: number; end: number }
-  ) {
-    if (endDate.isBefore(startDate)) {
-      throw new Error('End date should be after the start date.')
-    }
-
-    const workingTimeInSeconds = this.calculateWorkingTime(
-      startDate,
-      endDate,
-      workingHours
-    )
-    return workingTimeInSeconds
-  }
-
-  static secondsInHours (currentSeconds: number) {
-    const hours = Math.floor(currentSeconds / 3600)
-    const minutes = Math.floor((currentSeconds % 3600) / 60)
-    const seconds = currentSeconds % 60
-    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
-  }
-
-  static getColorsByTime (seconds: number) {
-    const hours = seconds / 3600
-    if (hours <= 2) {
-      return '#00CF7B'
-    }
-
-    if (hours >= 2 && hours < 3) {
-      return '#FF9838'
-    }
-
-    if (hours >= 3 && hours < 4) {
-      return '#DD4E4E'
-    }
-
-    return '#151919'
-  }
-}

package/src/app/Messenger/components/ChatButton/ChatButton.tsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import useTheme from '../../hooks/useThemes'
-
-interface INewChatButton {
-  removeActiveItem: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
-  messegerView: 'empty' | 'messages' | 'newChat'
-  chatButtons: {
-    label: string
-    onClick: () => void
-    type: string
-    canSee: boolean
-    disabled?: boolean
-  }[]
-}
-
-function ChatButtons ({ chatButtons, removeActiveItem }: INewChatButton) {
-  const { theme } = useTheme()
-
-  const getButtonType = (type: string, disabled?: boolean) => {
-    if (type === 'primary')
-      return {
-        background: disabled ? theme?.buttonsDisabled : theme?.buttonPrimary,
-        color: theme?.buttonPrimaryText,
-      }
-
-    if (type === 'outlined')
-      return {
-        background: 'transparent',
-        color: theme?.asideFontColor,
-        border: `${theme?.asideFontColor} 1px solid`,
-      }
-    return
-  }
-
-  return (
-    <>
-      {chatButtons.map((button) => {
-        return (
-          button.canSee && (
-            <>
-              <button
-                key={`button-${button.label}`}
-                className={
-                  button.disabled
-                    ? 'messenger__chat-button messenger__chat-button--disabled'
-                    : 'messenger__chat-button'
-                }
-                onClick={(event) => {
-                  button.onClick()
-                  removeActiveItem(event)
-                }}
-                style={getButtonType(button.type, button.disabled)}
-              >
-                {button.label}
-              </button>
-            </>
-          )
-        )
-      })}
-    </>
-  )
-}
-
-export default ChatButtons

package/src/app/Messenger/components/ChatTabs/ChatTabs.less

@@ -1,18 +0,0 @@
-.chat-tabs {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  &__button {
-    background: transparent;
-    border: none;
-    border-bottom: 1px solid transparent;
-    cursor: pointer;
-    padding: 0.5rem 1rem;
-    margin-bottom: 0.5rem;
-
-    &--active {
-      border-bottom: 1px solid var(--secondary-color);
-      transition: 0.5s;
-    }
-  }
-}

package/src/app/Messenger/components/ChatTabs/ChatTabs.tsx

@@ -1,32 +0,0 @@
-import useTheme from '../../hooks/useThemes'
-import { activeItem } from '../../views/MessengerListItem'
-import React from 'react'
-
-interface IProps {
-  handleChangeTickets: (tab: string) => void
-  chatListTabs: { value: string; label: string }[]
-}
-
-function ChatTabs ({ handleChangeTickets, chatListTabs }: IProps) {
-  const { theme } = useTheme()
-  return (
-    <div className='chat-tabs' style={{ color: theme.asideFontColor }}>
-      {chatListTabs.map((tab, index) => {
-        return (
-          <button
-            key={`chatListTab-${index}`}
-            className={`chat-tabs__button ${index === 0 && 'chat-tabs__button--active'}`}
-            onClick={(e) => {
-              handleChangeTickets(tab.value)
-              activeItem(e, 'chat-tabs__button', 'chat-tabs__button--active')
-            }}
-          >
-            {tab.label}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
-
-export default ChatTabs

package/src/app/Messenger/components/DocMessage/DocMessage.less

@@ -1,71 +0,0 @@
-.messenger {
-  &__messages-row--sender {
-    display: flex;
-    justify-content: flex-end;
-    margin: 10px 0;
-  }
-
-  &__messages-sender {
-    max-width: 80%;
-    padding: 10px;
-    border-radius: 8px;
-    font-family: 'Arial', sans-serif;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-
-  &__file-card {
-    display: flex;
-    align-items: center;
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    padding: 10px;
-  }
-
-  &__file-icon {
-    flex-shrink: 0;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    margin-right: 10px;
-  }
-
-  &__file-details {
-    flex-grow: 1;
-    margin-right: 10px;
-  }
-
-  &__file-name {
-    font-weight: bold;
-    font-size: 14px;
-    margin: 0;
-  }
-
-  &__file-info {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &__file-download {
-    font-size: 12px;
-    text-decoration: none;
-  }
-
-  &__file-download:hover {
-    text-decoration: underline;
-  }
-
-  &__message--bottom {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 5px;
-  }
-
-  &__message--date {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.8);
-  }
-}

package/src/app/Messenger/components/DocMessage/DocMessage.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import DownloadMinimalistIcon from '../../icons/DownloadMinimalistIcon'
-import { IMessagesBalloon } from 'types'
-import RenderFileIcon from '../RenderFileIcon/RenderFileIcon'
-
-export function formatFileSize (size = 0) {
-  if (size % 1 === 0) {
-    return `${size.toFixed(0)} MB`
-  }
-  return `${size.toFixed(2)} MB`
-}
-
-function DocMessage ({ file }: IMessagesBalloon) {
-  const fileType = file?.location?.split('.').pop()?.toUpperCase()
-  const fileName = file && file.originalname
-  const filePages = file && file.pages
-  const fileSize = file && formatFileSize(file?.size)
-
-  return (
-    <div className='messenger__messages-row--sender'>
-      <span>
-        {
-          <div className='messenger__file-card'>
-            <div className='messenger__file-icon'>
-              <RenderFileIcon fileType={file?.mimetype} />
-            </div>
-            <div className='messenger__file-details'>
-              <p className='messenger__file-name'>{fileName}</p>
-              <p className='messenger__file-info'>
-                {filePages && filePages + ' página(s) •'} {fileSize} •{' '}
-                {fileType}
-              </p>
-            </div>
-            <a
-              href={file?.location}
-              target='_blank'
-              rel='noopener noreferrer'
-              className='messenger__file-download'
-              style={{ color: 'blue' }}
-            >
-              <DownloadMinimalistIcon width='24' height='24' color='white' />
-            </a>
-          </div>
-        }
-      </span>
-    </div>
-  )
-}
-
-export default DocMessage

package/src/app/Messenger/components/ImagesContainer/ImagesContainer.less

@@ -1,79 +0,0 @@
-.images-container {
-  width: 100%;
-  height: 90%;
-  border: 2px solid @secondary-bg-color-chat;
-  background-color: @component-background;
-  border-bottom: none;
-  border-radius: 0 @border-radius 0 0;
-  @media @tab-md {
-    border-radius: @border-radius @border-radius 0 0 !important;
-  }
-
-  &__close {
-    width: 100%;
-    position: relative;
-    margin-top: 15px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    &--icon {
-      width: 32px;
-      height: 32px;
-      cursor: pointer;
-      background-color: transparent;
-      outline: none;
-      border: none;
-
-      &:hover {
-        opacity: 75%;
-        transition: 200ms;
-      }
-
-      &::before,
-      &::after {
-        position: absolute;
-        right: 25px;
-        top: 0;
-        content: ' ';
-        height: 33px;
-        width: 2px;
-        background-color: red;
-      }
-
-      &:after {
-        transform: rotate(45deg);
-      }
-
-      &:before {
-        transform: rotate(-45deg);
-      }
-    }
-  }
-
-  &__container {
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: @title-form-color;
-  }
-
-  &__image {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    padding: 0 10px;
-    max-width: 700px;
-    max-height: 300px;
-  }
-
-  &__title-img {
-    width: 100%;
-    text-align: center;
-    word-wrap: break-word;
-  }
-}

package/src/app/Messenger/components/ImagesContainer/ImagesContainer.tsx

@@ -1,51 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { IImagesContainer } from 'types'
-import RenderFileIcon from '../RenderFileIcon/RenderFileIcon'
-
-function ImagesContainer ({ file, onClose }: IImagesContainer) {
-  const [fileInfo, setFileInfo] = useState<{ name: string; type: string }>({
-    name: '',
-    type: '',
-  })
-
-  const [b64, setB64] = useState<string>('')
-
-  useEffect(() => {
-    function getBase64 (file: File) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-        reader.readAsDataURL(file)
-        reader.onload = () => resolve(reader.result)
-        reader.onerror = (error) => reject(error)
-      })
-    }
-
-    if (file) getBase64(file).then((base64) => setB64(base64 as string))
-  }, [file])
-
-  useEffect(() => {
-    if (file) {
-      setFileInfo({
-        name: file.name,
-        type: file.type,
-      })
-    }
-  }, [file])
-
-  return (
-    <div className='images-container'>
-      <div className='images-container__close'>
-        <button className='images-container__close--icon' onClick={onClose} />
-      </div>
-
-      <div className='images-container__container'>
-        <div className='images-container__image'>
-          <RenderFileIcon fileType={fileInfo.type} b64={b64} />
-          <span className='images-container__title-img'>{fileInfo.name}</span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ImagesContainer