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

pull/1/head
adriano 2022-03-11 00:01:58 -03:00
parent f9ffa37b73
commit 68a421c567
2 changed files with 120 additions and 38 deletions

View File

@ -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(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
}
}
// (new Date(subHours(timerPicker, 1)).getHours() == new Date().getHours() &&
// new Date(subHours(timerPicker, 1)).getMinutes() <= new Date().getMinutes())
// )
// {
// 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>
<Item>
<SelectField func={textFieldSelect} emptyField={false} header={'Opções de encerramento do atendimento'} currencies={data.map((obj)=>{
<span>Selecione uma opção para encerrar o Atendimento</span>
<SelectField func={textFieldSelect}
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>
<TextareaAutosize
aria-label="minimum height"
minRows={3}
value={textArea1}
placeholder={'Mensagem para lembrar cliente'}
onChange={ handleChange}
style={{ width: '100%' }}
/>
</Item>
<Item>
<TextareaAutosize
aria-label="minimum height"
minRows={3}
value={textArea1}
placeholder={'Mensagem para lembrar cliente'}
onChange={ handleChange}
style={{ width: '100%' }}
/>
</Item>
</Box>
</Item>

View File

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