Codigificação para atendente poder escolher hora de envio de mensagem como lembrete para retorno de agendamento

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

@@ -10,6 +10,10 @@ import DialogTitle from '@mui/material/DialogTitle';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box'; 
 import SelectField from "../../Report/SelectField"; 
+
+import TextFieldSelectHourBefore from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+
 import DatePicker from '../../Report/DatePicker'  
 import TimerPickerSelect from '../TimerPickerSelect' 
 
@@ -21,7 +25,7 @@ import TimerPickerSelect from '../TimerPickerSelect'
 
 import TextareaAutosize from '@mui/material/TextareaAutosize'; 
 
-import { addHours, subHours } from "date-fns"; 
+import { addHours, subHours, subMinutes } from "date-fns"; 
 
 
 
@@ -84,6 +88,7 @@ Item.propTypes = {
   ]),
 }; 
  
+ 
 
 const Modal = (props) => {
 
@@ -98,7 +103,12 @@ const Modal = (props) => {
  
 
   const [data] = useState(props.schedules) 
+ 
   const [schedulesContact] = useState(props.schedulesContact)
+
+  const [currencyHourBefore, setCurrency] = useState(formatedTimeHour(subHours(timerPicker,1)));
+  const [currenciesTimeBefore, setCurrenciesTimeBefore] = useState( );
+  const [test, setTest] = useState(null);
  
   const handleCancel = (event, reason) => {
 
@@ -109,6 +119,7 @@ const Modal = (props) => {
   };
 
  
+ 
 
   function greetMessageSchedule(scheduleDate){
     return  `podemos confirmar sua consulta agendada para hoje às ${scheduleDate}?`
@@ -118,6 +129,35 @@ const Modal = (props) => {
     return  `${timer.getHours().toString().padStart(2, '0')}:${timer.getMinutes().toString().padStart(2, '0')}`
   }
 
+  function hoursBeforeAvalible(timer){
+
+
+      let hours = []
+      let hour = 1
+
+      while(subHours(timer, hour).getHours()>=6 /*&& subHours(timer, hour).getHours()>=new Date().getHours()*/){
+
+        console.log('******** TIMER: ', formatedTimeHour(subHours(timer,hour)))
+
+        hours.push(
+          {value: formatedTimeHour(subHours(timer,hour)), 
+          label: `${hour} HORA ANTES DO HORÁRIO DO AGENDAMENTO`})
+
+        hour++;
+      }
+
+      if(hours){ 
+         setCurrency(hours[0].value) 
+      }
+
+   
+      return hours
+
+      console.log('HOURS: ',hours)
+
+  }
+ 
+
 
   // Get from child 2
 const datePickerValue = (data) => { 
@@ -143,6 +183,7 @@ const dateCurrentFormated = () => {
 }
 
   const handleChatEnd = (event, reason) => {   
+ 
 
     if (reason && reason === "backdropClick") 
         return;
@@ -158,28 +199,35 @@ const dateCurrentFormated = () => {
       alert('Horário comercial inválido!\n Selecione um horário de lembrete válido entre às 07:00 e 20:00')
       return
     }
-    else if(startDate === dateCurrentFormated()){      
+    // else if(startDate === dateCurrentFormated()){    
+    //   if(  
+    //       (new Date(subHours(timerPicker, 1)).getHours() <= new Date().getHours() && 
+    //       new Date(subHours(timerPicker, 1)).getMinutes() <= new Date().getMinutes()) ||
 
-      if(((new Date(timerPicker).getHours() === new Date().getHours()) &&
+    //       (new Date(subHours(timerPicker, 1)).getHours() == new Date().getHours() && 
-         (new Date(timerPicker).getMinutes() <= new Date().getMinutes())) ||
+    //       new Date(subHours(timerPicker, 1)).getMinutes() <= new Date().getMinutes())
-         (new Date(timerPicker).getHours() < new Date().getHours())
+          
-      ){
+    //       )
-        alert('Para agendamentos do dia, é necessário que o horário do lembrete seja maior que o horário atual!')
+    //   {
-        return
-      }
-    } 
 
-    // console.log('NEW DATE: ', formatedTimeHour(subHours(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`), 1))+':00')
+    //     alert('Para agendamentos do dia, é necessário que o horário do lembrete seja no mínimo uma hora adiantado!')
-    
+
+    //     return
+    //   }
+    // }    
+
+
+   
+ 
 
     props.func({ 
-      'scheduleId': scheduleId,  
+      'scheduleId': scheduleId,   
+      // 'schedulingDate': startDate+' '+formatedTimeHour(subHours(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`), 1))+':00',
       // 'schedulingDate': `${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`,
-      'schedulingDate': startDate+' '+formatedTimeHour(subHours(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`), 1))+':00',
+      'schedulingDate': `${startDate} ${currencyHourBefore}:00`,
       'message': textArea1  
-    });
+    }); 
-
+ 
-    
 
     setOpen(false);
   };
@@ -203,6 +251,17 @@ const textFieldSelect = (data) => {
 }
 
 
+const handleChangeHourBefore = (event) => {
+
+  console.log('textFihandleChangeHourBefore: ',event.target.value);  
+
+  setCurrency(event.target.value);
+};
+
+
+ 
+
+
 
 // Get from child 4
 // const textArea1Value = (data) => { 
@@ -225,7 +284,9 @@ useEffect(()=>{
     // setTextArea1('Boa noite, '+greetMessageSchedule( formatedTimeHour(addHours(new Date(timerPicker), 1)))) 
     setTextArea1('Boa noite, '+greetMessageSchedule( formatedTimeHour(new Date(timerPicker), 1)))
   }    
-  
+ 
+  setCurrenciesTimeBefore(hoursBeforeAvalible(timerPicker))
+ 
      
 },[timerPicker]) 
 
@@ -235,6 +296,8 @@ const handleChange = (event) => {
   setTextArea1(event.target.value);
 
 };
+ 
+
 
   return ( 
  
@@ -275,13 +338,15 @@ const handleChange = (event) => {
                           display: 'grid',  
                         }}>
                         <Item>
-                            <span>Selecione uma opção para encerrar o Atendimento</span>
+                            <span>Selecione uma opção para encerrar o Atendimento</span> 
-
+                            
-                            <Item>  
+                            <SelectField func={textFieldSelect} 
-                            <SelectField func={textFieldSelect} emptyField={false} header={'Opções de encerramento do atendimento'} currencies={data.map((obj)=>{
+                            emptyField={false} 
+                            header={'Opções de encerramento do atendimento'} 
+                            currencies={data.map((obj)=>{
                                       return {'value': obj.id, 'label': obj.name}
                                     })}/>
-                            </Item>   
+                            
 
                         </Item> 
 
@@ -295,26 +360,43 @@ const handleChange = (event) => {
 
                       <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> 
                         
-                        <Item><DatePicker func={datePickerValue} minDate = {true} title={'Data do retorno'}/></Item>
+                        <Item><DatePicker func={datePickerValue} minDate = {true} title={'Data do agendamento'}/></Item>
                         
-                        <Item><TimerPickerSelect func={timerPickerValue} title={'Hora do lembrete'}/></Item>
+                        <Item><TimerPickerSelect func={timerPickerValue} title={'Hora do agendamento'}/></Item>
                            
                       </Box>
 
 
-                      <Box sx={{display: 'flex', flexDirection: 'column' }}>                         
+                      <Box sx={{display: 'flex', flexDirection: 'column' }}>    
+
+                      <Item>                      
+                        <TextFieldSelectHourBefore
+                        id="outlined-select-currency"
+                        select
+                        label="Enviar mensagem para cliente"
+                        value={currencyHourBefore}
+                        size="small"
+                        onChange={handleChangeHourBefore} 
+                      >
+                        {currenciesTimeBefore.map((option) => (
+                          <MenuItem key={option.value} value={option.value}>
+                            {option.label}
+                          </MenuItem>
+                        ))}
+                      </TextFieldSelectHourBefore>
+                      </Item>
+
                         
-                        {/* <Item><TextArea1 func={textArea1Value} greetRemember={greetRemember} hint={'Mensagem para cliente'}/></Item> */}
+                        <Item>
-                            <Item>
+                          <TextareaAutosize 
-                              <TextareaAutosize 
+                              aria-label="minimum height"
-                                  aria-label="minimum height"
+                              minRows={3} 
-                                  minRows={3} 
+                              value={textArea1}
-                                  value={textArea1}
+                              placeholder={'Mensagem para lembrar cliente'}   
-                                  placeholder={'Mensagem para lembrar cliente'}   
+                              onChange={ handleChange}  
-                                  onChange={ handleChange}  
+                              style={{ width: '100%' }}
-                                  style={{ width: '100%' }}
+                          />
-                              />
+                        </Item>
-                            </Item>
                       </Box>
 
                     </Item>

frontend/src/components/Report/SelectField/index.js

@@ -15,7 +15,7 @@ const SelectTextFields = (props) => {
 
 
   useEffect(()=>{
-     
+  
       props.func(currency);  
        
   },[currency, props])