agx-chat-web 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agx-chat-web",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Chat application using React and less",
   "module": "./dist/agx-chat.esm.js",
   "author": {
@@ -11,8 +11,7 @@
   "main": "./dist/agx-chat.umd.js",
   "types": "./dist/esm/index.d.ts",
   "files": [
-    "dist",
-    "src/**/*"
+    "dist"
   ],
   "repository": "git@github.com:AGX-Software/chat-web.git",
   "peerDependencies": {

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

@@ -1,122 +0,0 @@
-import { describe, expect, it } from '@jest/globals'
-import {
-  SlaDates,
-  timeAsDayjs,
-} from '../../../../app/Messenger/classes/slaCalculations'
-const workingHours = { start: 9, end: 18 }
-
-describe('slaCalculations class', () => {
-  it('Should return true seconds in working hour', () => {
-    const sla = new SlaDates(1300)
-
-    expect(
-      sla.canUpdateClock(
-        timeAsDayjs('2023-07-21T10:19:29.224+00:00', { applyTimezone: false })
-      )
-    ).toBeTruthy()
-  })
-
-  it('Should return false seconds from canUpdateClock', () => {
-    const sla = new SlaDates(1300)
-
-    expect(
-      sla.canUpdateClock(
-        timeAsDayjs('2023-07-21T20:19:29.224+00:00', { applyTimezone: false })
-      )
-    ).toBeFalsy()
-  })
-
-  it('Should return false in holiday', () => {
-    const sla = new SlaDates(1300)
-
-    expect(
-      sla.canUpdateClock(
-        timeAsDayjs('2023-10-12T10:19:29.224+00:00', { applyTimezone: false })
-      )
-    ).toBeFalsy()
-  })
-
-  it('Should return 3600 seconds diffence', () => {
-    const sla = new SlaDates(3600)
-
-    expect(
-      sla.getDifferenceInSeconds(
-        timeAsDayjs('2023-07-19T09:19:29.224+00:00', { applyTimezone: false }),
-        timeAsDayjs('2023-07-19T10:19:29.224+00:00', { applyTimezone: false }),
-        workingHours
-      )
-    ).toBe(3600)
-  })
-
-  it('Should return 7200 seconds diffence', () => {
-    const sla = new SlaDates(3600)
-
-    expect(
-      sla.getDifferenceInSeconds(
-        timeAsDayjs('2023-10-12T09:19:29.224+00:00', { applyTimezone: false }),
-        timeAsDayjs('2023-10-12T11:19:29.224+00:00', { applyTimezone: false }),
-        workingHours
-      )
-    ).toBe(0)
-  })
-
-  it('Should return 7200 seconds diffence', () => {
-    const sla = new SlaDates(3600)
-
-    expect(
-      sla.getDifferenceInSeconds(
-        timeAsDayjs('2023-07-21T17:00:00.000+00:00', { applyTimezone: false }),
-        timeAsDayjs('2023-07-24T10:00:00.000+00:00', { applyTimezone: false }),
-        workingHours
-      )
-    ).toBe(7200)
-  })
-
-  it('Should return 64800 seconds diffence', () => {
-    const sla = new SlaDates(3600)
-
-    expect(
-      sla.getDifferenceInSeconds(
-        timeAsDayjs('2023-07-21T09:00:00.000+00:00', { applyTimezone: false }),
-        timeAsDayjs('2023-07-24T18:00:00.000+00:00', { applyTimezone: false }),
-        workingHours
-      )
-    ).toBe(64800)
-  })
-
-  it('Should return 43200 seconds diffence', () => {
-    const sla = new SlaDates(3600)
-
-    expect(
-      sla.getDifferenceInSeconds(
-        timeAsDayjs('2023-07-21T09:00:00.000+00:00', { applyTimezone: false }),
-        timeAsDayjs('2023-07-24T12:00:00.000+00:00', { applyTimezone: false }),
-        workingHours
-      )
-    ).toBe(43200)
-  })
-
-  it('Should return 1800 seconds diffence', () => {
-    const sla = new SlaDates(3600)
-
-    expect(
-      sla.getDifferenceInSeconds(
-        timeAsDayjs('2023-07-24T07:00:00.000+00:00', { applyTimezone: false }),
-        timeAsDayjs('2023-07-24T09:30:00.000+00:00', { applyTimezone: false }),
-        workingHours
-      )
-    ).toBe(1800)
-  })
-
-  it('Should return 3600 seconds diffence', () => {
-    const sla = new SlaDates(3600)
-
-    expect(
-      sla.getDifferenceInSeconds(
-        timeAsDayjs('2023-07-24T22:00:00.000+00:00', { applyTimezone: false }),
-        timeAsDayjs('2023-07-25T10:00:00.000+00:00', { applyTimezone: false }),
-        workingHours
-      )
-    ).toBe(3600)
-  })
-})

package/src/app/ChatProvider/ChatProvider.tsx

@@ -1,20 +0,0 @@
-import React, { ReactNode, useEffect } from 'react'
-import { I18nextProvider } from 'react-i18next'
-import defaultI18n from '../i18n'
-
-interface ChatProviderProps {
-  children: ReactNode
-  locale?: string
-}
-
-function ChatProvider ({ children, locale }: ChatProviderProps) {
-  useEffect(() => {
-    if (locale) {
-      defaultI18n.changeLanguage(locale)
-    }
-  }, [locale])
-
-  return <I18nextProvider i18n={defaultI18n}>{children}</I18nextProvider>
-}
-
-export default ChatProvider

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;
-  }
-}