agx-chat-web 0.4.9

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

@@ -0,0 +1,126 @@
+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'
+
+
+interface IProps {
+  submitNewChat: (values: FormData) => void
+  cancelNewChat: () => void
+  reasons: Array<IOption>
+  products: Array<IOption>
+  loading: boolean
+}
+
+function NewChatForm ({ submitNewChat, cancelNewChat, reasons, products, loading }: 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 { theme } = useTheme()
+
+  const onSubmit = (event: FormEvent) => {
+    const data2 = new FormData()
+    event.preventDefault()
+
+    fileList.forEach(file => {
+      data2.append(`images`, 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 }}>Novo Chamado</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
+        }}
+      >
+        Seu chamado será respondido o mais breve possível! Caso você se ausente do chamado pelo período de <b>uma hora</b> o mesmo será automaticamente fechado.
+      </h3>
+      <form onSubmit={onSubmit} className="messenger__new-chat-fields">
+        <Select
+          onChange={(value) => setReason(value)}
+          options={reasons}
+          placeholder='Selecione um motivo para o chamado'
+          name="reasons"
+          value={reason}
+          label="Motivos"
+        />
+
+        <Select
+          onChange={(value) => setProduct(value)}
+          options={products}
+          placeholder='Selecione o relacionado ao erro'
+          value={product}
+          name="product"
+          label="Produto (opcional)"
+        />
+
+        <InputFile
+          fileList={fileList}
+          onUpdateFile={onUpdateFile}
+          onRemoveFile={onRemoveFile}
+          label='Imagem (opcional)'
+        />
+
+        <Textarea
+          onChange={(value) => setMessage(value)}
+          placeholder="Digite sua mensagem aqui"
+          name="message"
+          label="Mensagem"
+        />
+
+        <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
+          }}
+        >
+          Enviar novo chamado
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default NewChatForm

package/src/assets/right-arrow.svg

@@ -0,0 +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>

package/src/index.ts

@@ -0,0 +1,17 @@
+import './styles/index.less'
+
+import MessengerList from './app/Messenger/views/MessengerList'
+import MessengerMessages from './app/Messenger/views/MessengerMessages'
+import MessengerListItem from './app/Messenger/views/MessengerListItem'
+import MessengerThemeWrapper from './app/Messenger/components/MessengerThemeWrapper/MessengerThemeWrapper'
+import NewChatButton from './app/Messenger/components/ChatButton/ChatButton'
+import { useConversations } from './app/Messenger/hooks/useConversations'
+
+export {
+  MessengerList,
+  MessengerMessages,
+  MessengerListItem,
+  MessengerThemeWrapper,
+  NewChatButton,
+  useConversations
+}

package/src/react-app-env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react-scripts" />
+
+declare module "*.module.less" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module "*.json" {
+  const value: any;
+  export default value;
+}

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/src/styles/abstracts/animations.less

@@ -0,0 +1,8 @@
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/styles/abstracts/mixins.less

@@ -0,0 +1,5 @@
+.flex-full-center() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/styles/abstracts/variables.less

@@ -0,0 +1,25 @@
+// ANTD MEDIA QUERIES
+@phone-xs: ~"only screen and (max-width: 480px)";
+@phone-sm: ~"only screen and (max-width: 576px)";
+@tab-md: ~"only screen and (max-width: 768px)";
+@tab-lg: ~"only screen and (max-width: 992px)";
+@tab-lg-min: ~"only screen and (min-width: 992px)";
+@tab-xl: ~"only screen and (max-width: 1200px)";
+// [1200 - 1600] - normal style //
+@desktop-xxl: ~"only screen and (min-width: 1600px)";
+
+@grey-1: #94989D;
+@grey-2: #707070;
+@border-color: #AAAAAA;
+@messenger-primary-color: #00A73E;
+@messenger-messages-bg: #eeeeee;
+@secondary-bg-color-chat: #484C52;
+@card-background: #DDDDDD;
+@upload-file-icon-color: #8696a0;
+@border-radius: 20px;
+@body-background: blue;
+@component-background: #232831;
+@full-content-height: calc(100vh - 23px);
+@title-form-color: #476077;
+@border-radius: 20px;
+

package/src/styles/base/base.less

@@ -0,0 +1,6 @@
+*,
+::after,
+::before {
+  padding: 0;
+  margin: 0;
+}

package/src/styles/index.less

@@ -0,0 +1,6 @@
+@import '../app/Messenger/views/Messenger.less';
+@import './base/base.less';
+@import './abstracts/variables';
+@import './abstracts/mixins';
+@import './abstracts/animations';
+

package/src/types.ts

@@ -0,0 +1,166 @@
+import React from 'react'
+export type _chatNature = 'helpdesk' | 'communication' | 'proposal'
+
+interface IChatUsers {
+  applicationId: string
+  createdAt: string
+  image?: string
+  ticketAdmin: boolean
+  uniqueCode: string
+  updatedAt: string
+  username: string
+  _id: string
+}
+
+interface IList {
+  applicationId: string
+  creator: Omit<IChatUsers, '_id'>
+  creatorId: string
+  nature: _chatNature
+  protocol: string
+  reason?: string
+  subject?: string
+  createdAt: Date
+  uniqueCode: string
+  updatedAt: string
+  userIdList: string[]
+  totalUnreadMessages: number
+  SLATimePassed: number
+  users: IChatUsers[]
+  status: {
+    current: {
+      state: string
+      systemicValue: string
+    }
+  }
+  _id: string
+  currentTime: string
+}
+
+interface ICommonProps {
+  tab?: 'list' | 'messages'
+  className?: string
+}
+
+interface IMessagesBalloon {
+  message: string
+  date: string
+  read: boolean
+  hasFile?: boolean
+  id:string
+  formatDate: (date: string | Date) => string | undefined 
+  file?: {
+    contentType: string
+    location: string
+    mimeType: string
+    orignalname: string
+    size: number
+  } | Iimages
+}
+
+interface IMesssengerAvatar extends Omit<ICommonProps, 'tab'> {
+  image?: string
+  children?: React.ReactNode;
+}
+
+interface IImagesContainer {
+  file: File| null,
+  onClose: () => void
+}
+
+interface IInconmingMessage extends Omit<IMessagesBalloon, 'read'> {
+  isSystemMessage?: boolean
+  user: {
+    avatar?: string
+    name: string
+  }
+}
+
+interface INewChat {
+  images?: File[]
+  issueOrigin?: string 
+  message?: string
+  reason?: string 
+}
+
+
+interface IMessengerSubmit {
+  message?: string
+  file?: FileList | null
+}
+
+interface Iimages 
+  {
+    key: string
+    location: string
+    & File
+  }
+
+interface IMessages {
+  images: Iimages[]
+  applicationId: string
+  content: string
+  createdAt: string
+  everybodyHasRead: boolean
+  isSystemMessage?: boolean
+  hasFile?: boolean
+  sender: {
+    image: string
+    username: string
+    uniqueCode: string
+  }
+  file?: {
+    contentType: string
+    location: string
+    mimeType: string
+    orignalname: string
+    size: number
+  }
+  readByList: string[]
+  senderId: string
+  senderUniqueCode?: string
+  ticketId: string
+  messagecode: number
+}
+
+interface IGetMessages {
+  chatId: string,
+  messageCount: number,
+  callback: (result?: {messages: IMessages[], total: number}, error?: Error) => void
+}
+
+interface IGetChats {
+  nature: _chatNature,
+  status?: 'inprogress' | 'closed' | 'proposal',
+  search?: string,
+  token?: string
+  callback: (tickets?: IList[], error?: Error) => void
+}
+
+interface ISocketMessage {
+  message: IMessages,
+  markAsRead: boolean
+}
+
+interface IOption {
+  label: string
+  value: string
+}
+
+export type {
+  ICommonProps,
+  IImagesContainer,
+  IInconmingMessage,
+  IMessagesBalloon,
+  IMessengerSubmit,
+  IMesssengerAvatar,
+  IList,
+  IMessages,
+  INewChat,
+  IGetMessages,
+  IGetChats,
+  IChatUsers,
+  ISocketMessage,
+  Iimages,
+  IOption
+}