agx-chat-web 1.2.0 → 1.2.2

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

@@ -1,145 +1,145 @@
-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
+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 +1,36 @@
-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)
-}
+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 +1,64 @@
-{
-  "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."
-    }
-  }
-}
+{
+  "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."
+    }
+  }
+}

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

@@ -1,64 +1,64 @@
-{
-  "messengerList": {
-    "noChatFound": "Nenhuma conversa encontrada",
-    "messengerAvatar": {
-      "alt": "imagem de um avatar de usuário"
-    },
-    "searchInput": {
-      "placeholder": "Pesquisar conversa..."
-    }
-  },
-  "messengerMessages": {
-    "selectConversation": "Selecione uma conversa para visualizar as mensagens",
-    "noMessagesFound": "Nenhuma mensagem encontrada",
-    "errorSearchingMaxFileSize": "Erro ao buscar o tamanho máximo do arquivo:",
-    "incommingMessage": {
-      "messageImage": "imagem na mensagem"
-    },
-    "sendMessageForm": {
-      "maxFileField": "Tamanho máximo: {{maxFileField}}",
-      "chatEnded": "Conversa finalizada",
-      "typeMessage": "Digite uma mensagem",
-      "rightIcon": "Ícone para a direita"
-    },
-    "renderFileIcon": {
-      "altImage": "arquivos enviados pelo chat agx"
-    }
-  },
-  "newFormChat": {
-    "newChat": "Novo Chamado",
-    "description": {
-      "1": "Seu chamado será respondido o mais breve possível! Caso você se ausente do chamado pelo período de",
-      "1/2bold": "uma hora",
-      "2": "o mesmo será automaticamente fechado."
-    },
-    "fields": {
-      "reasons": {
-        "label": "Motivos",
-        "placeholder": "Selecione um motivo para o chamado"
-      },
-      "product": {
-        "label": "Produto (opcional)",
-        "placeholder": "Selecione o produto relacionado ao erro"
-      },
-      "message": {
-        "label": "Mensagem",
-        "placeholder": "Digite sua mensagem aqui"
-      },
-      "document": {
-        "label": "Documento (opcional)",
-        "placeholder": "Selecione um documento para o chamado"
-      }
-    },
-    "buttons": {
-      "send": "Enviar novo chamado",
-      "sendingButton": "Enviando..."
-    },
-    "inputFile": {
-      "chooseFile": "Escolha o arquivo",
-      "allowDocuments": "Só são aceitos arquivos no formato .png, .jpg, .pdf, .csv, .mp4, .doc ou .docx",
-      "allowSizeDocument": "Tamanho máximo: {{maxSize}}",
-      "documentSendError": "Escolha uma imagem JPG/PNG, PDF, CSV, MP4 ou arquivo DOC/DOCX."
-    }
-  }
-}
+{
+  "messengerList": {
+    "noChatFound": "Nenhuma conversa encontrada",
+    "messengerAvatar": {
+      "alt": "imagem de um avatar de usuário"
+    },
+    "searchInput": {
+      "placeholder": "Pesquisar conversa..."
+    }
+  },
+  "messengerMessages": {
+    "selectConversation": "Selecione uma conversa para visualizar as mensagens",
+    "noMessagesFound": "Nenhuma mensagem encontrada",
+    "errorSearchingMaxFileSize": "Erro ao buscar o tamanho máximo do arquivo:",
+    "incommingMessage": {
+      "messageImage": "imagem na mensagem"
+    },
+    "sendMessageForm": {
+      "maxFileField": "Tamanho máximo: {{maxFileField}}",
+      "chatEnded": "Conversa finalizada",
+      "typeMessage": "Digite uma mensagem",
+      "rightIcon": "Ícone para a direita"
+    },
+    "renderFileIcon": {
+      "altImage": "arquivos enviados pelo chat agx"
+    }
+  },
+  "newFormChat": {
+    "newChat": "Novo Chamado",
+    "description": {
+      "1": "Seu chamado será respondido o mais breve possível! Caso você se ausente do chamado pelo período de",
+      "1/2bold": "uma hora",
+      "2": "o mesmo será automaticamente fechado."
+    },
+    "fields": {
+      "reasons": {
+        "label": "Motivos",
+        "placeholder": "Selecione um motivo para o chamado"
+      },
+      "product": {
+        "label": "Produto (opcional)",
+        "placeholder": "Selecione o produto relacionado ao erro"
+      },
+      "message": {
+        "label": "Mensagem",
+        "placeholder": "Digite sua mensagem aqui"
+      },
+      "document": {
+        "label": "Documento (opcional)",
+        "placeholder": "Selecione um documento para o chamado"
+      }
+    },
+    "buttons": {
+      "send": "Enviar novo chamado",
+      "sendingButton": "Enviando..."
+    },
+    "inputFile": {
+      "chooseFile": "Escolha o arquivo",
+      "allowDocuments": "Só são aceitos arquivos no formato .png, .jpg, .pdf, .csv, .mp4, .doc ou .docx",
+      "allowSizeDocument": "Tamanho máximo: {{maxSize}}",
+      "documentSendError": "Escolha uma imagem JPG/PNG, PDF, CSV, MP4 ou arquivo DOC/DOCX."
+    }
+  }
+}

package/src/assets/right-arrow.svg

@@ -1,10 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
-<desc>Created with Fabric.js 1.7.22</desc>
-<defs>
-</defs>
-<g transform="translate(128 128) scale(0.72 0.72)" style="">
-	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05000000000004) scale(3.89 3.89)" >
-	<path d="M 87.85 41.551 L 5.545 1.167 C 2.414 -0.369 -0.979 2.725 0.263 5.984 l 14.342 37.648 c 0.336 0.881 0.336 1.854 0 2.735 L 0.263 84.016 c -1.241 3.259 2.152 6.353 5.282 4.817 L 87.85 48.449 C 90.717 47.043 90.717 42.957 87.85 41.551 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
-</g>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05000000000004) scale(3.89 3.89)" >
+	<path d="M 87.85 41.551 L 5.545 1.167 C 2.414 -0.369 -0.979 2.725 0.263 5.984 l 14.342 37.648 c 0.336 0.881 0.336 1.854 0 2.735 L 0.263 84.016 c -1.241 3.259 2.152 6.353 5.282 4.817 L 87.85 48.449 C 90.717 47.043 90.717 42.957 87.85 41.551 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
 </svg>