Codigificação para atendente poder escolher hora de envio de mensagem como lembrete para retorno de agendamento
adriano
parent
f9ffa37b73
commit
68a421c567
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const SelectTextFields = (props) => {
|
|||
|
||||
|
||||
useEffect(()=>{
|
||||
|
||||
|
||||
props.func(currency);
|
||||
|
||||
},[currency, props])
|
||||
|
|
|
|||
Loading…
Reference in New Issue