Adição completa de componentes de para agendamento ao finalizar o atendimento

frontend/package.json

@@ -5,8 +5,8 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
+    "@emotion/styled": "^11.6.0", 
-    "@material-ui/core": "^4.11.0",
+    "@material-ui/core": "^4.12.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/pickers": "^3.3.10",

frontend/src/components/ChatEnd/ModalChatEnd/index.js

@@ -63,6 +63,7 @@ const Modal = (props) => {
   const [timerPicker, setTimerPicker] = useState(new Date()) 
   const [textArea1, setTextArea1] = useState()
   const [textArea2, setTextArea2] = useState()
+  const [textFieldCpfCnpj, setTextField] = useState()
 
   const [data] = useState([
     {'id': 1, 'name': 'STATUS1'},
@@ -79,6 +80,15 @@ const Modal = (props) => {
     setOpen(false);
   };
 
+  const handleChatEnd = (event, reason) => {
+
+    if (reason && reason === "backdropClick") 
+        return;
+
+    setOpen(false);
+  };
+
+
   const descriptionElementRef = useRef(null);
   useEffect(() => {
     if (open) {
@@ -120,6 +130,12 @@ const textArea2Value = (data) => {
   setTextArea2(data)
 }
 
+
+const handleTextFieldChange = (event) => {
+
+  console.log('CPF/CNPJ: ',(event.target.value));  
+  setTextField(event.target.value);
+};
   
 
   return ( 
@@ -154,26 +170,7 @@ const textArea2Value = (data) => {
                     height: 430,
                     // backgroundColor: 'primary.dark',
                     // '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
-                  }}>
+                  }}> 
-
-                    
-                    {/* <Box  sx={{
-                          display: 'grid',  
-                        }}>
-                        <Item>
-                             
-                          <SelectField  
-                            func={textFieldSelect} 
-                            header={'Status de atendimento'} 
-                            currencies={data.map((obj)=>{return {'value': obj.id, 'label': obj.name}})}  
-                          /> 
-                            
-                            
-
-                        </Item> 
-
-                      </Box>   */}
-
 
                       <Box  sx={{
                           display: 'grid',  
@@ -193,7 +190,15 @@ const textArea2Value = (data) => {
                                     maxWidth: '100%',
                                   }}
                                 >
-                                  <TextField fullWidth label="CPF/CNPJ" id="fullWidth" size="small" margin="dense"/>
+                                  <TextField 
+                                  fullWidth 
+                                  label="CPF/CNPJ" 
+                                  id="fullWidth" 
+                                  size="small" 
+                                  margin="dense"
+                                  onChange={handleTextFieldChange}  
+                                
+                                  />
                                 </Box>
                             </Item> 
 
@@ -215,13 +220,13 @@ const textArea2Value = (data) => {
                       </Box>
 
 
-                      {/* <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> 
+                      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> 
                         
                         <Item><TextArea1 func={textArea1Value} hint={'Lembrete'}/> </Item> 
                         
                         <Item><TextArea2 func={textArea2Value} hint={'Mensagem para cliente'}/></Item>
                             
-                      </Box> */}
+                      </Box>
 
                     </Item>
                       
@@ -231,9 +236,9 @@ const textArea2Value = (data) => {
  
         <DialogActions>     
           <div style={{marginRight:'50px'}}>
-             <div>footer</div>
+          <Button onClick={handleClose}>Cancelar</Button>  
           </div>
-          <Button onClick={handleClose}>Ok</Button>  
+          <Button onClick={handleChatEnd}>Ok</Button>  
         </DialogActions>
       </Dialog> 
  

frontend/src/components/ChatEnd/TextArea/index.js

@@ -1,13 +1,19 @@
-import * as React from 'react';
+import React, { useState, useEffect } from "react";
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 
 
 
 const MinHeightTextarea = (props) => {
   
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
 
-  props.func(value);
+  // props.func(value);
+
+  useEffect(()=>{
+    
+    props.func(value);
+
+  }, [value])
 
   const handleChange = (event) => {
     setValue(event.target.value);

frontend/src/components/Ticket/index.js

@@ -88,6 +88,8 @@ const Ticket = () => {
     const delayDebounceFn = setTimeout(() => {
       const fetchTicket = async () => {
         try {
+          
+          
           const { data } = await api.get("/tickets/" + ticketId);
 
           setContact(data.contact);