agx-chat-web 1.2.2 → 1.2.4

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

@@ -1,414 +0,0 @@
-import React, {
-  Fragment,
-  useState,
-  useRef,
-  MutableRefObject,
-  useEffect,
-} from 'react'
-import ImagesContainer from '../components/ImagesContainer/ImagesContainer'
-import MessageBalloon from '../components/MessageBallon/MessageBalloon'
-
-import MessageIcon from '../icons/MessageIcon'
-
-import { ICommonProps, IList, IMessages, IOption } from 'types'
-import useTheme from '../hooks/useThemes'
-
-import NewChatForm from './NewFormChat'
-import EmptyIcon from '../icons/EmptyIcon'
-import SendMessageForm from '../components/SendMessageForm/SendMessageForm'
-import InfiniteScroll from '../components/InfiniteScroll/InfiniteScroll'
-import { formatFileSize } from '../components/DocMessage/DocMessage'
-import { useTranslation } from 'react-i18next'
-
-interface IScrollableContainer {
-  loading: boolean
-  onIntersect: () => Promise<void>
-  hasNext: boolean
-}
-
-type MessengerView = 'empty' | 'messages' | 'newChat'
-
-interface IMessengerMessages extends ICommonProps, IScrollableContainer {
-  header: React.ReactElement
-  current?: IList
-  creatorId?: string
-  allowImages: boolean
-  tab?: 'list' | 'messages'
-  messegerView: MessengerView
-  className?: string
-  messages: IMessages[]
-  onSubmit: (value: FormData, callback: () => void) => Promise<void>
-  cancelNewChat: () => void
-  formatDate: (date: string | Date) => string | undefined
-  reasons: Array<IOption>
-  products: Array<IOption>
-  submitNewChat: (values: FormData) => void
-  newChatLoading: boolean
-  maxFileSize: () => Promise<{ data: { data: { maxFileSize: number } } }>
-}
-
-interface IMessengerForm {
-  children: React.ReactNode
-  messegerView: MessengerView
-  reasons: Array<IOption>
-  products: Array<IOption>
-  submitNewChat: (values: FormData) => void
-  cancelNewChat: () => void
-  newChatLoading: boolean
-  maxFileSize: string
-  loadingResources: boolean
-}
-
-function MessagesContainerView ({
-  children,
-  messegerView,
-  submitNewChat,
-  cancelNewChat,
-  reasons,
-  products,
-  newChatLoading,
-  maxFileSize,
-  loadingResources,
-}: IMessengerForm) {
-  const { theme } = useTheme()
-  const { t } = useTranslation('messengerMessages')
-
-  if (messegerView === 'empty') {
-    return (
-      <div
-        className='messenger__messages-container--empty'
-        style={{ backgroundColor: theme?.messengerNotSelectedBg }}
-      >
-        <MessageIcon width='72' height='72' />
-        <p>{t('selectConversation')}</p>
-      </div>
-    )
-  }
-
-  if (messegerView === 'newChat') {
-    return (
-      <NewChatForm
-        reasons={reasons}
-        products={products}
-        submitNewChat={submitNewChat}
-        cancelNewChat={cancelNewChat}
-        loading={newChatLoading}
-        maxFileSize={maxFileSize}
-        loadingResources={loadingResources}
-      />
-    )
-  }
-
-  return <>{children}</>
-}
-
-export function SpinLoading () {
-  return (
-    <div className='messenger__messages-loading'>
-      <div className='messenger__messages-loading--loader' />
-    </div>
-  )
-}
-
-function Messages ({
-  messages,
-  creatorId,
-  formatDate,
-  loading,
-}: {
-  messages: IMessages[]
-  creatorId?: string
-  formatDate: (date: string | Date) => string | undefined
-  loading: boolean
-}) {
-  const { theme } = useTheme()
-  const { t } = useTranslation('messengerMessages')
-
-  if (!messages || (messages.length === 0 && !loading)) {
-    return (
-      <div
-        className='messenger__message-empty'
-        style={{ color: theme.emptyMessagesFontColor }}
-      >
-        <EmptyIcon />
-        <p>{t('noMessagesFound')}</p>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      {messages.map((item, idx) => {
-        return (
-          <Fragment key={`${item.ticketId}_${item.senderId}_${idx}`}>
-            <MessageBalloon
-              id={`message_${idx}`}
-              formatDate={formatDate}
-              creatorId={creatorId}
-              item={item}
-            />
-          </Fragment>
-        )
-      })}
-    </>
-  )
-}
-
-const onScrollToBottom = (
-  scrollContainer: MutableRefObject<HTMLDivElement | null>
-) => {
-  if (scrollContainer.current) {
-    scrollContainer.current.scrollTop = Number.MAX_SAFE_INTEGER
-  }
-}
-
-function MessagesContainer ({
-  children,
-  fowardRef,
-  ...rest
-}: {
-  children: React.ReactNode
-  fowardRef: MutableRefObject<HTMLDivElement | null>
-} & React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
->) {
-  const { theme } = useTheme()
-
-  return (
-    <div
-      {...rest}
-      ref={fowardRef}
-      className='messenger__messages-container'
-      style={{
-        padding: '1rem',
-        backgroundColor: theme?.messengerMessagesBg,
-        border: `1px solid ${theme.borderColor}`,
-      }}
-    >
-      {children}
-    </div>
-  )
-}
-
-function ScrollableContainer ({
-  children,
-  loading,
-  onIntersect,
-  hasNext,
-  scrollContainerFowardRef,
-}: {
-  children: React.ReactNode
-  scrollContainerFowardRef: MutableRefObject<HTMLDivElement | null>
-} & IScrollableContainer) {
-  const intersetRootMargin = 300
-
-  const getElementScrollHeight = (divRef: HTMLDivElement | null) => {
-    if (!divRef) return null
-    return divRef.scrollHeight
-  }
-
-  const getElementScrollTop = (divRef: HTMLDivElement | null) => {
-    if (!divRef) return null
-    return divRef.scrollTop
-  }
-
-  const calculateScrollToDecrease = (
-    elementBeforeIntersetHeight: number,
-    elementAfterIntersectHeight: number,
-    intersetRootMargin: number
-  ) => {
-    return (
-      Math.abs(elementAfterIntersectHeight - elementBeforeIntersetHeight) +
-      intersetRootMargin
-    )
-  }
-
-  const isNill = (value: number | null | undefined) => {
-    return value === null && value === undefined
-  }
-
-  const onFetchInfiniteScroll = async () => {
-    const elementBeforeIntersetHeight = getElementScrollHeight(
-      scrollContainerFowardRef.current
-    )
-
-    await onIntersect()
-
-    const elementAfterIntersectHeight = getElementScrollHeight(
-      scrollContainerFowardRef.current
-    )
-
-    if (
-      scrollContainerFowardRef.current &&
-      !isNill(elementBeforeIntersetHeight) &&
-      !isNill(elementAfterIntersectHeight)
-    ) {
-      const currentScrollTop =
-        getElementScrollTop(scrollContainerFowardRef.current) || 0
-      scrollContainerFowardRef.current.scrollTop = calculateScrollToDecrease(
-        elementAfterIntersectHeight as number,
-        elementBeforeIntersetHeight as number,
-        currentScrollTop
-      )
-    }
-  }
-
-  useEffect(() => {
-    onScrollToBottom(scrollContainerFowardRef)
-  }, [])
-
-  return (
-    <MessagesContainer fowardRef={scrollContainerFowardRef}>
-      <InfiniteScroll
-        root={document.querySelector('.messenger__messages-container')}
-        loading={loading}
-        loadingCover={<SpinLoading />}
-        more={hasNext}
-        fetch={onFetchInfiniteScroll}
-        rootMargin={intersetRootMargin}
-        reverse
-      >
-        {children}
-      </InfiniteScroll>
-    </MessagesContainer>
-  )
-}
-
-function MessengerMessages ({
-  header,
-  tab,
-  className = '',
-  current,
-  messages,
-  allowImages,
-  creatorId,
-  loading,
-  onSubmit,
-  submitNewChat,
-  cancelNewChat,
-  reasons,
-  products,
-  messegerView,
-  formatDate,
-  hasNext,
-  onIntersect,
-  newChatLoading,
-  maxFileSize,
-}: IMessengerMessages) {
-  const { t } = useTranslation('messengerMessages')
-  const [file, setFile] = useState<File | null>()
-  const scrollContainerRef = useRef<HTMLDivElement | null>(null)
-  const [isSending, setIsSending] = useState(false)
-  const [maxSize, setMaxSize] = useState<string>('')
-
-  const { theme } = useTheme()
-
-  const styleClassnames = {
-    mobile: tab === 'list' ? 'messenger__mobile-hide' : '',
-  }
-
-  const updateFile = (file: File | null) => {
-    setFile(file)
-  }
-
-  const onSubmitNewMessage = async (
-    message: FormData,
-    callback: () => void
-  ) => {
-    setIsSending(true)
-    try {
-      await onSubmit(message, callback)
-      onScrollToBottom(scrollContainerRef)
-    } finally {
-      setIsSending(false)
-    }
-  }
-
-  useEffect(() => {
-    const fetchMaxFileSize = async () => {
-      try {
-        const response = await maxFileSize()
-        const size = formatFileSize(response.data.data.maxFileSize)
-        setMaxSize(size)
-      } catch (error) {
-        console.error(t('errorSearchingMaxFileSize'), error)
-      }
-    }
-
-    fetchMaxFileSize()
-  }, [maxSize])
-
-  return (
-    <div
-      className={`messenger__messages ${className} ${styleClassnames.mobile} `}
-    >
-      <MessagesContainerView
-        newChatLoading={newChatLoading}
-        reasons={reasons}
-        products={products}
-        submitNewChat={submitNewChat}
-        cancelNewChat={cancelNewChat}
-        messegerView={messegerView}
-        maxFileSize={maxSize}
-        loadingResources={loading}
-      >
-        {file ? (
-          <ImagesContainer file={file} onClose={() => setFile(null)} />
-        ) : (
-          <>
-            <div
-              className='messenger__messages-header'
-              style={{
-                backgroundColor: theme?.headerAndSenderBg,
-                border: `1px solid ${theme.borderColor}`,
-              }}
-            >
-              {React.cloneElement(header)}
-            </div>
-
-            {loading && !messages.length ? (
-              <MessagesContainer fowardRef={scrollContainerRef}>
-                <SpinLoading />
-              </MessagesContainer>
-            ) : (
-              <ScrollableContainer
-                scrollContainerFowardRef={scrollContainerRef}
-                loading={loading}
-                hasNext={hasNext}
-                onIntersect={onIntersect}
-              >
-                <Messages
-                  formatDate={formatDate}
-                  messages={messages}
-                  creatorId={creatorId}
-                  loading={loading}
-                />
-              </ScrollableContainer>
-            )}
-          </>
-        )}
-
-        <div
-          className='messenger__messages-send'
-          style={{
-            backgroundColor: theme?.headerAndSenderBg,
-            border: `1px solid ${theme.borderColor}`,
-          }}
-        >
-          <SendMessageForm
-            allowImages={allowImages}
-            onSubmit={onSubmitNewMessage}
-            file={file}
-            updateFile={updateFile}
-            current={current}
-            isLoading={isSending}
-            maxFileSize={maxSize}
-          />
-        </div>
-      </MessagesContainerView>
-    </div>
-  )
-}
-
-export default MessengerMessages

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

@@ -1,145 +0,0 @@
-import React, { FormEvent, useState } from 'react'
-
-import InputFile from '../components/InputFile/InputFile'
-import Select from '../components/Select/Select'
-import Textarea from '../components/TextArea/TextArea'
-import useTheme from '../hooks/useThemes'
-import CloseIcon from '../icons/CloseIcon'
-import { IOption } from 'types'
-import { useTranslation } from 'react-i18next'
-
-interface IProps {
-  submitNewChat: (values: FormData) => void
-  cancelNewChat: () => void
-  reasons: Array<IOption>
-  products: Array<IOption>
-  loading: boolean
-  maxFileSize: string
-  loadingResources: boolean
-}
-
-function NewChatForm ({
-  submitNewChat,
-  cancelNewChat,
-  reasons,
-  products,
-  loading,
-  maxFileSize,
-  loadingResources,
-}: IProps) {
-  const [reason, setReason] = useState<string>(reasons?.[0]?.value)
-  const [product, setProduct] = useState<string>(products?.[0]?.value)
-  const [message, setMessage] = useState<string>()
-  const [fileList, setFileList] = useState<File[]>([])
-  const { t } = useTranslation('newFormChat')
-
-  const { theme } = useTheme()
-
-  const onSubmit = (event: FormEvent) => {
-    const data2 = new FormData()
-    event.preventDefault()
-
-    fileList.forEach((file) => {
-      data2.append(`documents`, file, file.name)
-    })
-
-    if (reason) data2.append('reason', reason)
-    if (product) data2.append('product', product)
-
-    if (message) data2.append('message', message)
-    submitNewChat(data2)
-  }
-
-  const onUpdateFile = (file: File) => {
-    setFileList((files) => [...files, file])
-  }
-
-  const onRemoveFile = (file: File) => {
-    setFileList(fileList.filter((item: File) => item !== file))
-  }
-
-  return (
-    <div
-      className='messenger__new-chat-form'
-      style={{
-        backgroundColor: theme.newChatFormBg,
-        borderRadius: theme.newChatFormRadius,
-      }}
-    >
-      <div className='messenger__new-chat-form-header'>
-        <h2 className='messenger__new-chat-form-title'>
-          <b style={{ color: theme.newChatFormTexts }}>{t('newChat')}</b>
-        </h2>
-
-        <button
-          onClick={cancelNewChat}
-          className='messenger__new-chat-form-close'
-        >
-          <CloseIcon />
-        </button>
-      </div>
-
-      <h3
-        className='messenger__disclaimer'
-        style={{
-          borderColor: theme.disclaimerPrimaryColor,
-          color: theme.disclaimerTextColor,
-          backgroundColor: theme.disclaimerSecondaryColor,
-        }}
-      >
-        {t('description.1')} <b>{t('description.1/2bold')}</b>{' '}
-        {t('description.2')}
-      </h3>
-
-      <form onSubmit={onSubmit} className='messenger__new-chat-fields'>
-        <Select
-          onChange={(value) => setReason(value)}
-          options={reasons}
-          placeholder={t('fields.reasons.placeholder')}
-          name='reasons'
-          value={reason}
-          label={t('fields.reasons.label')}
-        />
-
-        <Select
-          onChange={(value) => setProduct(value)}
-          options={products}
-          placeholder={t('fields.product.placeholder')}
-          value={product}
-          name='product'
-          label={t('fields.product.label')}
-        />
-
-        <InputFile
-          fileList={fileList}
-          onUpdateFile={onUpdateFile}
-          onRemoveFile={onRemoveFile}
-          label={t('fields.document.label')}
-          maxSize={maxFileSize}
-          loading={loadingResources}
-        />
-
-        <Textarea
-          onChange={(value) => setMessage(value)}
-          placeholder={t('fields.message.placeholder')}
-          name='message'
-          label={t('fields.message.label')}
-        />
-
-        <button
-          className={`w-100 ${!loading ? 'messenger__new-chat-form-send' : 'messenger__new-chat-form-send messenger__new-chat-form-send--disabled'}`}
-          disabled={loading}
-          type='submit'
-          style={{
-            backgroundColor: !loading ? theme.buttonPrimary : '#ccc',
-            color: theme.buttonPrimaryText,
-          }}
-        >
-          {!loading ? t('buttons.send') : t('buttons.sendingButton')}
-        </button>
-      </form>
-    </div>
-  )
-}
-
-export default NewChatForm

package/src/app/i18n/index.ts

@@ -1,36 +0,0 @@
-import i18n from 'i18next'
-import { initReactI18next } from 'react-i18next'
-
-import pt from './locales/pt.json'
-import en from './locales/en.json'
-
-const resources = makeResources()
-function makeResources () {
-  return {
-    en: {
-      newFormChat: en.newFormChat,
-      messengerMessages: en.messengerMessages,
-      messengerList: en.messengerList,
-    },
-    pt: {
-      newFormChat: pt.newFormChat,
-      messengerMessages: pt.messengerMessages,
-      messengerList: pt.messengerList,
-    },
-  }
-}
-
-i18n.use(initReactI18next).init({
-  resources,
-  lng: 'pt',
-  fallbackLng: 'pt',
-  interpolation: {
-    escapeValue: false,
-  },
-})
-
-export default i18n
-
-export function setLanguage (lang: string) {
-  i18n.changeLanguage(lang)
-}

package/src/app/i18n/locales/en.json

@@ -1,64 +0,0 @@
-{
-  "messengerList": {
-    "noChatFound": "No chat found",
-    "messengerAvatar": {
-      "alt": "image of a user avatar"
-    },
-    "searchInput": {
-      "placeholder": "Search chat..."
-    }
-  },
-  "messengerMessages": {
-    "selectConversation": "Select a conversation to view messages",
-    "noMessagesFound": "No messages found",
-    "errorSearchingMaxFileSize": "Error fetching maximum file size:",
-    "incommingMessage": {
-      "messageImage": "image in message"
-    },
-    "sendMessageForm": {
-      "maxFileField": "Maximum size: {{maxFileField}}",
-      "chatEnded": "Conversation ended",
-      "typeMessage": "Type a message",
-      "rightIcon": "Right icon"
-    },
-    "renderFileIcon": {
-      "altImage": "files sent via agx chat"
-    }
-  },
-  "newFormChat": {
-    "newChat": "New Ticket",
-    "description": {
-      "1": "Your ticket will be answered as soon as possible! If you are absent from the ticket for",
-      "1/2bold": "one hour",
-      "2": "it will be automatically closed."
-    },
-    "fields": {
-      "reasons": {
-        "label": "Reasons",
-        "placeholder": "Select a reason for the ticket"
-      },
-      "product": {
-        "label": "Product (optional)",
-        "placeholder": "Select the product related to the error"
-      },
-      "message": {
-        "label": "Message",
-        "placeholder": "Type your message here"
-      },
-      "document": {
-        "label": "Document (optional)",
-        "placeholder": "Select a document for the ticket"
-      }
-    },
-    "buttons": {
-      "send": "Send new ticket",
-      "sendingButton": "Sending..."
-    },
-    "inputFile": {
-      "chooseFile": "Choose file",
-      "allowDocuments": "Only .png, .jpg, .pdf, .csv, .mp4, .doc or .docx files are accepted",
-      "allowSizeDocument": "Maximum size: {{maxSize}}",
-      "documentSendError": "Choose a JPG/PNG image, PDF, CSV, MP4 or DOC/DOCX file."
-    }
-  }
-}