contact component react

contact.tsx

import React, { useState } from 'react'
import { useSnackbar } from 'notistack';
import { Button, CircularProgress, Grid } from '@mui/material';
import { IEmail, sendEmail } from '../../module/gmail';

interface ContactProps {
   children?: React.ReactNode;
}

export const fromDefault = "Juliana Rodrigues Mensagem Automatica <[email protected]>";  // O remetente sempre sera o email que foi utilizado para obter o REFRESH_TOKEN
export const toDefault = "Google Service Account BOT - Jonathas Borges <[email protected]>";

const Contact: React.FC<ContactProps> = () => {
  const { enqueueSnackbar } = useSnackbar();

  const [lead, setLead] = useState<string>('')
  const [subject, setSubject] = useState<string>('');
  const [body, setBody] = useState<string>('');

  const handleLeadChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setLead(event.target.value);
  } 

  const handleSubjectChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSubject(event.target.value);
  }
  
  const handleBodyChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setBody(event.target.value);
  } 

  const [loadEmail, setLoadEmail] = useState<boolean>(false);

  const handleSendMessage = async (event: React.FormEvent) => {
    event.preventDefault();
    try {
      setLoadEmail(true);
      
      // o Google Service Account BOT acessa sua conta e envia um email automaticamente como se fosse voce
      // Substituir o "from" com base nas credenciais usadas no momento de obter REFRESH_TOKEN - Ex: "from: nome do proprietario <[email protected]>" 
      const emailData: IEmail = {
        lead: lead,
        from: fromDefault, 
        to: toDefault, // Substitua pelo e-mail do destinatário
        cc: [`Lead <${lead}>`,'Suporte Tecnico <[email protected]>','Juliana Rodrigues Advogada <[email protected]>'],
        subject: subject, //'Assunto do E-mail',
        body: body, // 'Corpo do E-mail',
      }

      await sendEmail(emailData);
      console.log("Email Enviado com sucesso");
      enqueueSnackbar('Email enviado com sucesso!', { variant: 'success' });

    } catch (error) {
      console.error(error);
      enqueueSnackbar('Erro ao enviar o Email.', { variant: 'error' });

    }finally{
      setLoadEmail(false);
    }
  }

   return (
      <Grid container sx={{border:"0px solid red", pt:10, justifyContent:"center", alignItems:"center", textAlign:"center" }}>
         <Grid item xs={11}>
            <form onSubmit={handleSendMessage}>
              <label htmlFor="email">Email: </label>
              <input id="email" type="email" value={lead} onChange={handleLeadChange} required/>

              <br /><br />
              <label htmlFor="subject">Assunto:</label>
              <input id="subject" type="text" value={subject} onChange={handleSubjectChange}  required/>

              <br /><br />
              <label htmlFor="bodyEmail">Mensagem:</label>
              <textarea id="bodyEmail" value={body} onChange={handleBodyChange} required/>

              <br /><br />

              {loadEmail ? <CircularProgress/> : <Button variant='contained' type="submit">Enviar</Button>}
            </form>
         </Grid>
      </Grid>
   )
}

export default Contact;