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"; 
 
 
 
@@ -85,6 +89,7 @@ Item.propTypes = {
 }; 
  
  
+
 const Modal = (props) => {
 
   const classes = useStyles();
@@ -98,8 +103,13 @@ 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) => {
 
     if (reason && reason === "backdropClick") 
@@ -110,6 +120,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) => { 
@@ -144,6 +184,7 @@ const dateCurrentFormated = () => {
 
   const handleChatEnd = (event, reason) => {   
  
+
     if (reason && reason === "backdropClick") 
         return;
 
@@ -158,29 +199,36 @@ 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()) ||
+
+    //       (new Date(subHours(timerPicker, 1)).getHours() == new Date().getHours() && 
+    //       new Date(subHours(timerPicker, 1)).getMinutes() <= new Date().getMinutes())
+          
+    //       )
+    //   {
+
+    //     alert('Para agendamentos do dia, é necessário que o horário do lembrete seja no mínimo uma hora adiantado!')
+
+    //     return
+    //   }
+    // }    
+
 
-      if(((new Date(timerPicker).getHours() === new Date().getHours()) &&
-         (new Date(timerPicker).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')
  
 
     props.func({ 
       '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) => { 
@@ -226,6 +285,8 @@ useEffect(()=>{
     setTextArea1('Boa noite, '+greetMessageSchedule( formatedTimeHour(new Date(timerPicker), 1)))
   }    
  
+  setCurrenciesTimeBefore(hoursBeforeAvalible(timerPicker))
+ 
      
 },[timerPicker]) 
 
@@ -236,6 +297,8 @@ const handleChange = (event) => {
 
 };
  
+
+
   return ( 
  
  
@@ -277,11 +340,13 @@ const handleChange = (event) => {
                         <Item>
                             <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' }}>    
 
-                        {/* <Item><TextArea1 func={textArea1Value} greetRemember={greetRemember} hint={'Mensagem para cliente'}/></Item> */}
+                      <Item>                      
-                            <Item>
+                        <TextFieldSelectHourBefore
-                              <TextareaAutosize 
+                        id="outlined-select-currency"
-                                  aria-label="minimum height"
+                        select
-                                  minRows={3} 
+                        label="Enviar mensagem para cliente"
-                                  value={textArea1}
+                        value={currencyHourBefore}
-                                  placeholder={'Mensagem para lembrar cliente'}   
+                        size="small"
-                                  onChange={ handleChange}  
+                        onChange={handleChangeHourBefore} 
-                                  style={{ width: '100%' }}
+                      >
-                              />
+                        {currenciesTimeBefore.map((option) => (
-                            </Item>
+                          <MenuItem key={option.value} value={option.value}>
+                            {option.label}
+                          </MenuItem>
+                        ))}
+                      </TextFieldSelectHourBefore>
+                      </Item>
+
+                        
+                        <Item>
+                          <TextareaAutosize 
+                              aria-label="minimum height"
+                              minRows={3} 
+                              value={textArea1}
+                              placeholder={'Mensagem para lembrar cliente'}   
+                              onChange={ handleChange}  
+                              style={{ width: '100%' }}
+                          />
+                        </Item>
                       </Box>
 
                     </Item>