Component.tsx

/* eslint-disable no-useless-escape */
import { FormACWrapper } from "./styled";
import { useState } from "react";
import { SubmitHandler, useForm } from "react-hook-form";
import Typography from "../Typography";
import Button from "../Button";

type Inputs = {
  email: string;
  phone: string;
};

function FormAC() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Inputs>();

  const [state, setState] = useState({
    isSubmitted: false,
    isError: false,
  });

  const onSubmit: SubmitHandler<Inputs> = (data) => {
    fetch("https://rodrigotrg93.activehosted.com/proc.php", {
      method: "POST",
      body: {
        u: "1",
        phone: data.phone,
        // RESTANTE DO QUE TU PRECISA AQUI
      },
      mode: "no-cors",
    })
      .then(() => {
        setState({ ...state, isSubmitted: true });
      })
      .catch(() => {
        setState({ ...state, isError: true });
      });
  };
  return (
    <FormACWrapper>
      {state.isError && <div>DEU PAU</div>}
    
      {!state.isSubmitted && !state.isError && (
        <fieldset>
          <form onSubmit={handleSubmit(onSubmit)}>
            <Typography component={"span"} font={"Poppins"}>
              {
                "Cadastre-se e entre para o grupo exclusivo do evento no whatsapp"
              }
            </Typography>
            <div>
              <input
                id="email"
                placeholder="Seu melhor e-mail"
                {...register("email", {
                  required: true,
                  pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/,
                })}
              />
              {errors.email && (
                <Typography component={"p"}>
                  Por favor usar um e-mail válido.
                </Typography>
              )}
            </div>
            <div>
              <input
                type="tel"
                id="phone"
                placeholder="DDD + Whatsapp"
                {...register("phone", {
                  required: true,
                  pattern:
                    /^(?:(?:\+|00)?(55)\s?)?(?:\(?([1-9][0-9])\)?\s?)(?:((?:9\d|[2-9])\d{3})\-?(\d{4}))$/,
                })}
              />
              {errors.phone && (
                <Typography component={"p"}>
                  Por favor passar DDD + Whatsapp.
                </Typography>
              )}
            </div>
            <div>
              <Button fullWidth variant="contained" color="secondary">
                SIM, QUERO PARTICIPAR!
              </Button>
            </div>
          </form>
        </fieldset>
      )
      
      { state.isSubmited && (
        <p>
          Obrigado por se cadastrar. Você receberar uma menssagem via Whatsapp
          para entrar no nosso grupo
        </p>
        )
    }
    </FormACWrapper>
  );
}

export default FormAC;