agx-chat-web 0.4.9

package/src/app/Messenger/views/MessengerList.tsx

@@ -0,0 +1,172 @@
+import React, { Fragment } from 'react'
+import { IList } from 'types'
+import ChatTabs from '../components/ChatTabs/ChatTabs'
+import ChatButtons from '../components/ChatButton/ChatButton'
+import SearchInput from '../components/SearchInput/SearchInput'
+import MessengerListItem, { activeItem } from './MessengerListItem'
+import useTheme from '../hooks/useThemes'
+import EmptyIcon from '../icons/EmptyIcon'
+import InfiniteScroll from '../components/InfiniteScroll/InfiniteScroll'
+
+interface IMessengerList {
+  affix?: React.ReactElement
+  loading: boolean
+  conversations: IList[]
+  currentId?: string
+  failed?: boolean
+  showBadge: boolean
+  tab?: 'list' | 'messages'
+  className?: string
+  onClick: (item: IList) => void
+  searchChat: (search: string, key: string) => void
+  searchKeys: { label: string, value: string }[]
+  messegerView: 'empty' | 'messages' | 'newChat'
+  helpDesk: boolean
+  handleChangeTickets: (tab: string) => void
+  loadingSearch: boolean
+  chatListTabs: { value: string, label: string }[]
+  chatButtons: {
+    label: string
+    onClick: () => void
+    type: string
+    canSee: boolean
+    disabled?: boolean
+  }[]
+  canSeeTimer: boolean
+  hasNext: boolean
+  onIntersect: () => void
+  sliceCount: number
+}
+
+const ListLoading = () => {
+  const {theme} = useTheme()
+  return (
+    <Fragment>
+      {new Array(5).fill('').map((_, idx) => (
+        <button
+          key={`asideSkeleton${idx}`}
+          style={{background: theme.listItemHover}}
+          className="messenger__aside-skeleton"
+        />
+      ))}
+    </Fragment>
+  )
+}
+
+const ShowProtocol = ({ item }: { item: IList }) => {
+  const { theme } = useTheme()
+  return (
+    <span
+      className='messenger__aside-protocol'
+      style={{
+        background: theme.buttonPrimary,
+        color: theme.buttonPrimaryText
+      }}
+    >
+      #{item.protocol}
+    </span>
+  )
+}
+
+
+function MessengerList({
+  affix,
+  conversations,
+  tab,
+  className = '',
+  loading,
+  failed,
+  showBadge,
+  currentId,
+  onClick,
+  searchChat,
+  searchKeys,
+  messegerView,
+  helpDesk,
+  handleChangeTickets,
+  chatListTabs,
+  chatButtons,
+  loadingSearch,
+  canSeeTimer,
+  hasNext,
+  onIntersect,
+  sliceCount
+}: IMessengerList) {
+  const { theme } = useTheme()
+
+  return (
+    <aside
+      className={`messenger__aside ${className} ${tab === 'messages' ? 'mobile-hide' : ''}`}
+      style={{
+        border: `1px solid ${theme.borderColor}`,
+        borderRadius: '20px 0 0 20px',
+        background: theme.asideBg
+      }}
+    >
+      <div className="messenger__buttons-container">
+        <ChatButtons
+          chatButtons={chatButtons}
+          messegerView={messegerView}
+          removeActiveItem={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            activeItem(e, 'messenger__aside-list-item', 'messenger__aside-list-item--active')
+          }}
+        />
+
+        {helpDesk &&
+          <SearchInput
+            searchKeys={searchKeys}
+            searchChat={searchChat}
+            loadingSearch={loadingSearch}
+          />
+        }
+      </div>
+
+      {affix && (
+        <div className="messenger__aside-header">
+          {React.cloneElement(affix)}
+        </div>
+      )}
+
+      <ChatTabs
+        chatListTabs={chatListTabs}
+        handleChangeTickets={handleChangeTickets}
+      />
+
+      <div className="messenger__aside-list">
+        <InfiniteScroll
+          root={document.querySelector('.messenger__aside-list')}
+          loading={loading}
+          loadingCover={<ListLoading />}
+          more={hasNext}
+          fetch={onIntersect}
+        >
+          {Array.isArray(conversations) && conversations.length > 0 && conversations.slice(0, sliceCount).map((item) => {
+            return (
+              <div
+                key={item?._id}
+                className={`messenger__aside-item-container ${showBadge ? 'messenger__active-badge' : ''}`}
+              >
+                <ShowProtocol item={item} />
+                <MessengerListItem
+                  canSeeTimer={canSeeTimer}
+                  currentId={currentId}
+                  item={item}
+                  onClick={onClick}
+                />
+              </div>
+            )
+          })}
+        </InfiniteScroll>
+
+        {failed || (conversations?.length === 0 && !loading) && (
+          <div className="messenger__aside-empty">
+            <EmptyIcon />
+            <p>Nenhuma conversa encontrada</p>
+          </div>
+        )}
+      </div>
+    </aside>
+  )
+}
+
+export default MessengerList

package/src/app/Messenger/views/MessengerListItem.tsx

@@ -0,0 +1,136 @@
+import React, { useState, useMemo, useEffect } from 'react'
+import { IList } from 'types'
+import { SlaDates, timeAsDayjs } from '../classes/slaCalculations'
+import MessengerAvatar from '../components/MessengerAvatar/MessengerAvatar'
+import useTheme from '../hooks/useThemes'
+import TimerIcon from '../icons/TimerIcon'
+
+interface IListItem {
+  onClick: (item: IList) => void
+  item: IList
+  currentId?: string
+  canSeeTimer: boolean
+}
+
+export function activeItem(e: React.MouseEvent<HTMLElement, MouseEvent>, defaultClass: string, activeClass: string,) {
+  const click = document.querySelectorAll(`.${defaultClass}`)
+  click.forEach((item) => {
+    item.classList.remove(activeClass)
+  })
+
+  e.currentTarget.className += ` ${activeClass} `
+}
+
+function MessengerListItem ({ item, onClick, canSeeTimer, currentId }: IListItem) {
+  const [unreadMessages, setUnreadMessages] = useState<typeof item.totalUnreadMessages>(item.totalUnreadMessages)
+  const closedChat = useMemo(() => item.status.current.state === 'final' ? 'messenger__aside-list-item--closed' : '', [item])
+  const [background, setBackground] = useState<string | undefined>('')
+  const [counter, setCounter] = useState<number | null>(null)  
+
+  const { theme } = useTheme()
+  const isInprogress = item.status?.current?.systemicValue === 'inprogress'
+
+  useEffect(() => {    
+    let interval: NodeJS.Timer
+    if (isInprogress && canSeeTimer) {
+      const sla = new SlaDates(timeAsDayjs(item.currentTime).diff(item.createdAt, 'second'))
+      const diference = sla.calculateWorkingTime(
+        timeAsDayjs(item.createdAt),
+        timeAsDayjs(), { start: 9, end: 18 }
+      )
+
+      setCounter(diference)
+      if (sla.canUpdateClock(timeAsDayjs())) {
+        interval = setInterval(() => {
+          setCounter(prev => prev !== null ? prev + 1 : null)
+        }, 1000)        
+      }
+    } else {
+      setCounter(item.SLATimePassed ?? null)
+    }
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
+  useEffect(() => {
+    setUnreadMessages(item.totalUnreadMessages)
+  }, [item])
+
+  function handleClick(e: React.MouseEvent<HTMLElement, MouseEvent>, item: IList) {
+    activeItem(e, 'messenger__aside-list-item', 'messenger__aside-list-item--active')
+    onClick(item)
+  }
+
+  function formatUnreadMessages(unread: number) {
+    if (!unread) return 0
+    if (unread >= 99) return 99
+    return unread
+  }
+
+  const onMouseOver = () => {
+    setBackground(theme?.listItemHover)
+  }
+
+  const onMouseLeave = () => {
+    setBackground('')
+  }
+
+
+  const ShowTimer = () => {
+    if (counter === null) return null
+
+    return (
+      <span
+        className='messenger__aside-timer'
+        style={{
+          background: SlaDates.getColorsByTime(counter),
+          color: 'white'
+        }}
+      >
+        <TimerIcon />&nbsp;
+
+        <b>
+          {SlaDates.secondsInHours(counter)}
+        </b>
+      </span>
+    )
+  }
+
+  return (
+    <>
+      <div
+        className={`messenger__aside-list-item ${closedChat}`}
+        onClick={(e) => handleClick(e, item)}
+        onMouseOver={onMouseOver}
+        onMouseLeave={onMouseLeave}
+        style={{
+          color: theme?.asideFontColor,
+          backgroundColor: currentId === item._id ? theme?.active : background,
+        }}
+      >
+        <MessengerAvatar image={item?.creator?.image}>
+          {(item?.creator && item?.creator.username) ? item?.creator.username.slice(0, 1) : ''}
+        </MessengerAvatar>
+
+        <div className="messenger__aside-list-item--info">
+          <p className="messenger__aside-list-item--title">{item?.creator?.username}</p>
+          {item?.reason && (<p className="messenger__aside-list-item--description">{item.reason}</p>)}
+        </div>
+
+        <div className="messenger__aside-list-item--additional">
+          {unreadMessages > 0 && (
+            <div className="messenger__aside-list-item--unread">
+              <span>{formatUnreadMessages(unreadMessages)}</span>
+            </div>
+          )}
+        </div>
+
+        {canSeeTimer && <ShowTimer />}
+      </div>
+    </>
+  )
+}
+
+export default MessengerListItem

package/src/app/Messenger/views/MessengerMessages.tsx

@@ -0,0 +1,287 @@
+import React, { Fragment, MutableRefObject, useMemo, useRef, useState } from 'react'
+import ImagesContainer from '../components/ImagesContainer/ImagesContainer'
+import MessageBalloon from '../components/MessageBallon/MessageBalloon'
+import AttachFileIcon from '../icons/AttachFileIcon'
+import MessageIcon from '../icons/MessageIcon'
+import rightArrow from '../../../assets/right-arrow.svg'
+import { ICommonProps, IList, IMessages, IOption } from 'types'
+import useTheme from '../hooks/useThemes'
+
+import NewChatForm from './NewFormChat'
+import EmptyIcon from '../icons/EmptyIcon'
+
+interface IMessengerMessages extends ICommonProps {
+  header: React.ReactElement
+  current?: IList
+  creatorId?: string
+  loading: boolean
+  allowImages: boolean
+  tab?: 'list' | 'messages'
+  messegerView: 'empty' | 'messages' | 'newChat',
+  className?: string
+  messages: IMessages[]
+  onSubmit: (value: FormData, callback: () => void) => void
+  cancelNewChat: () => void
+  formatDate: (date: string | Date) => string | undefined
+  onScroll: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void
+  reasons: Array<IOption>
+  products: Array<IOption>
+  submitNewChat: (values: FormData) => void,
+  newChatLoading: boolean
+}
+
+interface IMessengerForm {
+  children: React.ReactElement,
+  messegerView: 'empty' | 'messages' | 'newChat',
+  reasons: Array<IOption>
+  products: Array<IOption>
+  submitNewChat: (values: FormData) => void,
+  cancelNewChat: () => void,
+  newChatLoading: boolean
+}
+
+function MessengerEmpty({ children, messegerView }: { children: React.ReactElement, messegerView: 'empty' | 'messages' | 'newChat' }) {
+  const { theme } = useTheme()
+
+  if (messegerView === 'empty') {
+    return (
+      <div className="messenger__messages-container--empty" style={{ backgroundColor: theme?.messengerNotSelectedBg }}>
+        <MessageIcon width="72" height="72" />
+        <p>Selecione uma conversa para visualizar as mensagens</p>
+      </div>
+    )
+  }
+
+  return children
+}
+
+function MessengerForm({
+  children,
+  messegerView,
+  submitNewChat,
+  cancelNewChat,
+  reasons,
+  products,
+  newChatLoading
+}: IMessengerForm) {
+  if (messegerView === 'newChat') {
+    return (
+      <NewChatForm reasons={reasons} products={products} submitNewChat={submitNewChat} cancelNewChat={cancelNewChat} loading={newChatLoading}/>
+    )
+  }
+  return children
+}
+
+function Loading({ loading }: { loading: boolean }) {
+  if (loading) {
+    return (
+      (
+        <div className="messenger__messages-loading">
+          <div className="messenger__messages-loading--loader" />
+        </div>
+      )
+    )
+  }
+
+  return <></>
+}
+
+function Messages({ messages, creatorId, formatDate }: { messages: IMessages[], creatorId?: string, formatDate: (date: string | Date) => string | undefined }) {
+  if (messages && Array.isArray(messages)) {
+    return <>
+      {messages.map((item, idx) => {
+        return (
+          <Fragment key={`${item.ticketId}_${item.senderId}_${idx}`}>
+            <MessageBalloon
+              id={`message_${idx}`}
+              formatDate={formatDate}
+              creatorId={creatorId}
+              item={item}
+            />
+          </Fragment>
+        )
+      })}
+    </>
+  }
+
+  return <></>
+}
+
+function NoMessages({ messages, loading }: { messages: IMessages[], loading: boolean }) {
+  const { theme } = useTheme()
+  if (!messages || messages.length === 0 && !loading) {
+    return <div className="messenger__message-empty"
+      style={{color: theme.emptyMessagesFontColor}}
+    >
+      <EmptyIcon />
+      <p>Nenhuma mensagem encontrada</p>
+    </div>
+  }
+  return <></>
+}
+
+function AllowImages({ allowImages, attachFile, handleFile, closedChat }: { allowImages: boolean, attachFile: MutableRefObject<HTMLInputElement | null>, handleFile: (e: React.ChangeEvent<HTMLInputElement>) => void, closedChat: boolean }) {
+  if (allowImages) {
+    return <Fragment>
+      <input
+        type="file"
+        size={1}
+        className="messenger__messages-send--file"
+        ref={attachFile}
+        onChange={handleFile}
+        accept="image/*"
+      />
+
+      <AttachFileIcon
+        className={`messenger__messages-send__attach ${closedChat ? 'messenger__messages-send__attach--disabled' : ''}`}
+        onClick={() => !closedChat ? attachFile.current?.click() : null}
+      />
+    </Fragment>
+  }
+  return <></>
+}
+
+function MessengerMessages({
+  header,
+  tab,
+  className = '',
+  current,
+  messages,
+  allowImages,
+  creatorId,
+  loading,
+  onSubmit,
+  submitNewChat,
+  cancelNewChat,
+  reasons,
+  products,
+  messegerView,
+  formatDate,
+  onScroll,
+  newChatLoading
+}: IMessengerMessages) {
+
+  const [file, setFile] = useState<File | null>()
+  const [sending, setSending] = useState<boolean>(false)
+
+  const inputRef: MutableRefObject<HTMLTextAreaElement | null> = useRef(null)
+  const attachFile: MutableRefObject<HTMLInputElement | null> = useRef(null)
+  const closedChat = useMemo(() => current?.status.current.state === 'final', [current])
+  const { theme } = useTheme()
+
+  function handleSubmit(e?: React.FormEvent<HTMLFormElement>) {
+    e?.preventDefault()
+    if (sending) return
+    setSending(true)
+
+    const data = new FormData()
+    if (file) data.append('file', file)
+    if (inputRef.current?.value) data.append('message', inputRef.current?.value)
+
+    onSubmit(data, () => {
+      if (inputRef.current) inputRef.current.value = ''
+      if (file) setFile(null)
+      setSending(false)
+    })
+  }
+
+  function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e.target.files) {
+      const file = e.target.files[0]
+      if (file?.type?.includes('image/')) setFile(e.target.files[0])
+    }
+  }
+
+  return (
+    <div className={`${className} ${tab === 'list' ? 'mobile-hide' : ''} messenger__messages`}>
+      <MessengerEmpty messegerView={messegerView}>
+        <Fragment>
+          <MessengerForm
+            newChatLoading={newChatLoading}
+            reasons={reasons}
+            products={products}
+            submitNewChat={submitNewChat}
+            cancelNewChat={cancelNewChat}
+            messegerView={messegerView}
+          >
+            <>
+              {file ? (<ImagesContainer file={file} onClose={() => setFile(null)} />) : (
+                <Fragment>
+                  <div
+                    className="messenger__messages-header"
+                    style={
+                      { backgroundColor: theme?.headerAndSenderBg,
+                        border: `1px solid ${theme.borderColor}`
+                      }}
+                  >
+                    {React.cloneElement(header)}
+                  </div>
+
+                  <div 
+                    className="messenger__messages-container" onScroll={onScroll} 
+                    style={{ 
+                      padding: '1rem',
+                      backgroundColor: theme?.messengerMessagesBg ,
+                      border: `1px solid ${theme.borderColor}`
+                    }}
+                  >
+                    <Loading loading={loading} />
+                    <Messages formatDate={formatDate} messages={messages} creatorId={creatorId} />
+                    <NoMessages messages={messages} loading={loading} />
+                  </div>
+                </Fragment>
+              )}
+              <div
+                className="messenger__messages-send"
+                style={{ 
+                  backgroundColor: theme?.headerAndSenderBg,
+                  border: `1px solid ${theme.borderColor}`,
+                }}
+              >
+                <form
+                  onSubmit={handleSubmit}
+                  className="messenger__messages-send--form"
+                >
+                  <textarea
+                    cols={30}
+                    rows={10}
+                    placeholder={closedChat ? 'Conversa finalizada' : 'Digite uma mensagem'}
+                    ref={inputRef}
+                    onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) handleSubmit() }}
+                    className={`messenger__messages-send__input ${closedChat || sending ? 'messenger__messages-send__input--disabled' : ''} `}
+                    disabled={closedChat || sending}
+                    style={{
+                      backgroundColor: theme?.inputBg,
+                      border: theme?.chatInputBorder ? `1px solid ${theme?.chatInputBorder}` : ''
+                    }}
+                  />
+
+                  <AllowImages allowImages={allowImages} handleFile={handleFile} attachFile={attachFile} closedChat={closedChat} />
+
+                  <button
+                    type="submit"
+                    className={`messenger__messages-send__button ${closedChat || sending ? 'messenger__messages-send__button--disabled' : ''}`}
+                    disabled={closedChat || sending}
+                    style={{
+                      backgroundColor: theme?.buttonPrimary
+                    }}
+                  >
+                    <img
+                      alt='Icone para a direita'
+                      height={25}
+                      width={25}
+                      className="ml-1"
+                      src={rightArrow}
+                    />
+                  </button>
+                </form>
+              </div>
+            </>
+          </MessengerForm>
+        </Fragment>
+      </MessengerEmpty>
+    </div>
+  )
+}
+
+export default MessengerMessages