projeto-hit/frontend/src/components/ConfigModal/index.js

import React, { useState, useEffect, } from 'react'
// import * as Yup from 'yup'
import { Formik, Form, Field, } from 'formik'
import { toast } from 'react-toastify'

import { makeStyles } from '@material-ui/core/styles'
import { green } from '@material-ui/core/colors' 

import { TimePicker } from 'formik-material-ui-pickers'

import DateFnsUtils from '@date-io/date-fns'

import ptBrLocale from "date-fns/locale/pt-BR"


import {
    MuiPickersUtilsProvider,
} from '@material-ui/pickers'

import {
    Dialog,
    DialogContent,
    DialogTitle,
    Button,
    DialogActions,
    CircularProgress,
    TextField,
    Switch,
    FormControlLabel,
} from '@material-ui/core'

import api from '../../services/api'
import { i18n } from '../../translate/i18n'
import toastError from '../../errors/toastError'

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
    },

    multFieldLine: {
        display: 'flex',
        '& > *:not(:last-child)': {
            marginRight: theme.spacing(1),
        },
    },

    btnWrapper: {
        position: 'relative',
    },

    buttonProgress: {
        color: green[500],
        position: 'absolute',
        top: '50%',
        left: '50%',
        marginTop: -12,
        marginLeft: -12,
    },
}))

// const SessionSchema = Yup.object().shape({
//     name: Yup.string()
//         .min(2, 'Too Short!')
//         .max(100, 'Too Long!')
//         .required('Required'),
// })

const ConfigModal = ({ open, onClose, change }) => {
    const classes = useStyles()
    const initialState = {
        startTimeBus: new Date(),
        endTimeBus: new Date(),
        messageBus: '',
        businessTimeEnalbe: false,
        ticketTimeExpiration: new Date(),
        ticketExpirationMsg: '',
        ticketExpirationEnable: false,
    }

    const [config, setConfig] = useState(initialState)

    useEffect(() => {
        const fetchSession = async () => {

            try {
                const { data } = await api.get('/settings')

                setConfig({
                    startTimeBus: data.outBusinessHours.startTime,
                    endTimeBus: data.outBusinessHours.endTime,
                    messageBus: data.outBusinessHours.message,
                    businessTimeEnalbe: data.outBusinessHours.value === 'enabled' ? true : false,
                    ticketTimeExpiration: data.ticketExpiration.startTime,
                    ticketExpirationMsg: data.ticketExpiration.message,
                    ticketExpirationEnable: data.ticketExpiration.value === 'enabled' ? true : false
                })

            } catch (err) {
                toastError(err)
            }
        }
        fetchSession()
    }, [change])

    const handleSaveConfig = async (values) => {

        values = {
            outBusinessHours: {
                startTime: values.startTimeBus,
                endTime: values.endTimeBus,
                message: values.messageBus,
                value: values.businessTimeEnalbe ? 'enabled' : 'disabled'
            },
            ticketExpiration: {
                startTime: values.ticketTimeExpiration,
                message: values.ticketExpirationMsg,
                value: values.ticketExpirationEnable ? 'enabled' : 'disabled'
            }
        }


        try { 
            
            await api.put(`/settings/ticket`, values)  

            toast.success('Atualização realizada com sucesso!')
            handleClose()

        } catch (err) {
            toastError(err)
        }
    }

    const handleClose = () => {
        onClose()
        // setConfig(initialState)
    }

    return (
        <div className={classes.root}>
            <Dialog
                open={open}
                onClose={handleClose}
                maxWidth="sm"
                fullWidth
                scroll="paper"
            >
                <DialogTitle>
                    Configurações
                </DialogTitle>


                <Formik
                    initialValues={config}
                    enableReinitialize={true}
                    // validationSchema={SessionSchema} 
                    onSubmit={(values, actions) => {
                       
                        setTimeout(() => { 
                            handleSaveConfig(values) 
                            actions.setSubmitting(false) 
                        }, 100)
                    }}
                >
                    {({ values, touched, errors, isSubmitting }) => (
                        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBrLocale}>
                            <Form>

                                <DialogContent dividers>

                                    <div className={classes.multFieldLine}>
                                        <Field
                                            component={TimePicker}
                                            name="startTimeBus"
                                            label="Inicio atendimento"
                                            ampm={false}
                                            openTo="hours"
                                            views={['hours', 'minutes',]}
                                            format="HH:mm"
                                        />
                                        {' '}
                                        <Field
                                            component={TimePicker}
                                            name="endTimeBus"
                                            label="Fim atendimento"
                                            ampm={false}
                                            openTo="hours"
                                            views={['hours', 'minutes',]}
                                            format="HH:mm"
                                        />

                                        <FormControlLabel
                                            control={
                                                <Field
                                                    as={Switch}
                                                    color="primary"
                                                    name="businessTimeEnalbe"
                                                    checked={values.businessTimeEnalbe}
                                                />
                                            }
                                            label={'Ativar/Desativar'} />
                                    </div>

                                    <div>
                                        <Field
                                            as={TextField}
                                            label={'Mensagem fora do horário de atendimento'}
                                            type="messageBus"
                                            multiline
                                            rows={5}
                                            fullWidth
                                            name="messageBus"
                                            error={
                                                touched.messageBus && Boolean(errors.messageBus)
                                            }
                                            helperText={
                                                touched.messageBus && errors.messageBus
                                            }
                                            variant="outlined"
                                            margin="dense"
                                        />
                                    </div>

                                    <br />
                                    <div className={classes.multFieldLine}>
                                        <Field
                                            component={TimePicker}
                                            name="ticketTimeExpiration"
                                            label="Ticket expira em hh:mm"
                                            ampm={false}
                                            openTo="hours"
                                            views={['hours', 'minutes',]}
                                            format="HH:mm"
                                        /> 

                                        <FormControlLabel
                                            control={
                                                <Field
                                                    as={Switch}
                                                    color="primary"
                                                    name="ticketExpirationEnable"
                                                    checked={values.ticketExpirationEnable}
                                                />
                                            }
                                            label={'Ativar/Desativar'}
                                        />
                                    </div>
                                    <div>
                                        <Field
                                            as={TextField}
                                            label={'Mensagem por falta de atividade no atendimento'}
                                            type="ticketExpirationMsg"
                                            multiline
                                            rows={5}
                                            fullWidth
                                            name="ticketExpirationMsg"
                                            error={
                                                touched.ticketExpirationMsg && Boolean(errors.ticketExpirationMsg)
                                            }
                                            helperText={
                                                touched.ticketExpirationMsg && errors.ticketExpirationMsg
                                            }
                                            variant="outlined"
                                            margin="dense"
                                        />
                                    </div>

                                </DialogContent>
                                <DialogActions>
                                    <Button
                                        onClick={handleClose}
                                        color="secondary"
                                        disabled={isSubmitting}
                                        variant="outlined"
                                    >
                                        {i18n.t('whatsappModal.buttons.cancel')}
                                    </Button>
                                    <Button
                                        type="submit"
                                        color="primary"
                                        disabled={isSubmitting}
                                        variant="contained"
                                        className={classes.btnWrapper}
                                    >
                                        {isSubmitting ? (
                                            <CircularProgress
                                                size={24}
                                                className={classes.buttonProgress}
                                            />
                                        ) : 'Salvar'}
                                    </Button>
                                </DialogActions>
                            </Form>
                        </MuiPickersUtilsProvider>
                    )}
                </Formik>
            </Dialog>
        </div>
    )
}

export default React.memo(ConfigModal)