Contact Form - TypeScript | Formik | Yup

contact-form.tsx

import React from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import axios from "axios";
import classNames from "classnames";
import Button from "@styleguide/components/button";
import Input from "@styleguide/components/input";

import css from "./index.scss";

const ContactForm = () => {
  const formValidationSchema = React.useMemo(() => {
    return Yup.object().shape({
      name: Yup.string().required("Name is required"),
      phone: Yup.string().required("Phone number is required"),
      email: Yup.string()
        .email("Email not valid")
        .required("Email is required"),
      message: Yup.string().required("Message is required")
    });
  }, []);

  const Form = useFormik({
    initialValues: { name: "", email: "", phone: "", message: "" },
    validationSchema: formValidationSchema,
    validateOnChange: true,
    validateOnBlur: true,
    onSubmit: (values, { setSubmitting, setErrors, resetForm, setStatus }) => {
      const { name, email, phone, message } = values;
      setStatus({ success: false });
      axios
        .post("/api/send-email", { name, phone, email, message })
        .then(result => {
          setStatus({ success: false });
          if (result.data.messageId === undefined) {
            // Failed
            setErrors({ email: "Error: " + result.data.response });
          } else {
            // Success
            setStatus({ success: true });
            setSubmitting(false);
            setTimeout(() => {
              resetForm(); // It clear status state too :(
            }, 3000);
          }
        });
    }
  });

  const {
    values: { name, phone, email, message },
    handleChange,
    touched,
    errors,
    handleSubmit,
    handleBlur,
    isSubmitting,
    status
  } = Form;

  return (
    <form onSubmit={handleSubmit} id="ContactForm" className={css.contactForm}>
      <div className={css.fieldRow}>
        <div>
          <Input
            type="text"
            name="name"
            id="name"
            placeholder="Name"
            className={css.inputField}
            onChange={handleChange}
            onBlur={handleBlur}
            value={name}
            disabled={isSubmitting}
          />
          {touched.name && errors.name && (
            <div className={css.error}>{errors.name}</div>
          )}
        </div>
        <div>
          <Input
            type="text"
            name="phone"
            id="phone"
            placeholder="Phone no."
            className={css.inputField}
            onChange={handleChange}
            onBlur={handleBlur}
            value={phone}
            disabled={isSubmitting}
          />
          {touched.phone && errors.phone && (
            <div className={css.error}>{errors.phone}</div>
          )}
        </div>
      </div>
      <div className={css.fieldRowFluid}>
        <Input
          type="email"
          name="email"
          id="email"
          placeholder="Email"
          className={css.inputField}
          onChange={handleChange}
          onBlur={handleBlur}
          value={email}
          disabled={isSubmitting}
        />
        {touched.email && errors.email && (
          <div className={css.error}>{errors.email}</div>
        )}
      </div>
      <div className={css.fieldRowFluid}>
        <textarea
          name="message"
          id="message"
          rows={6}
          placeholder="Your message"
          className={css.inputField}
          onChange={handleChange}
          onBlur={handleBlur}
          value={message}
          disabled={isSubmitting}
        ></textarea>
        {touched.message && errors.message && (
          <div className={css.error}>{errors.message}</div>
        )}
      </div>
      <div className={css.fieldRow}>
        <Button
          type="submit"
          className={classNames(
            css.button,
            isSubmitting ? css.buttonDisabled : ""
          )}
        >
          {isSubmitting ? "Please wait..." : "Send"}
        </Button>
        <div className={css.formMessage}>
          {status && status.success === true ? (
            <div className={css.success}>Message is sent successfully.</div>
          ) : null}
        </div>
      </div>
    </form>
  );
};

export default ContactForm;