Website/components/custom/Schedule.js

"use client";
import React, { useState } from "react";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";
import { useToast } from "@/lib/toast-hook";

export default function Schedule({ onFormSubmit }) {
  const { showLoading, dismissToast, showSuccess, showError } = useToast();
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    emailAddress: "",
    phoneNumber: "",
    companyName: "",
    websiteUrl: "",
    annualRevenue: "",
    learnFrom: "",
    additionalInfo: "",
    checkbox: false,
  });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: type === "checkbox" ? checked : value,
    }));
  };

  const handlePhoneChange = (value) => {
    setFormData((prevState) => ({
      ...prevState,
      phoneNumber: value,
    }));
  };

  const handleSubmit = async (e) => {
    const loadingToastId = showLoading("Submitting schedule request...");
    e.preventDefault();
    try {
      const response = await fetch("/api/schedule-send", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      dismissToast(loadingToastId);
      if (response.ok) {
        showSuccess("Appointment Scheduled Successfully!");
        document.cookie = `prospectClient=true; path=/; max-age=31536000`;
        onFormSubmit();
      } else {
        showError("Something went wrong");
      }
    } catch (error) {
      dismissToast(loadingToastId);
      showError(
        error instanceof Error ? error.message : "Something went wrong"
      );
    }
  };

  return (
    <div className="contact__form-wrap">
      <form id="contact-form" onSubmit={handleSubmit}>
        <div className="row">
          <div className="col-md-6">
            <div className="form-grp">
              <input
                type="text"
                name="firstName"
                placeholder="First Name"
                value={formData.firstName}
                onChange={handleChange}
                required
              />
            </div>
          </div>
          <div className="col-md-6">
            <div className="form-grp">
              <input
                type="text"
                name="lastName"
                placeholder="Last Name"
                value={formData.lastName}
                onChange={handleChange}
              />
            </div>
          </div>
          <div className="col-md-6">
            <div className="form-grp">
              <input
                type="email"
                name="emailAddress"
                placeholder="Email Address"
                value={formData.emailAddress}
                onChange={handleChange}
                required
              />
            </div>
          </div>
          <div className="col-md-6">
            <div className="form-grp">
              <PhoneInput
                international
                defaultCountry="US"
                value={formData.phoneNumber}
                onChange={handlePhoneChange}
              />
            </div>
          </div>
          <div className="col-md-6">
            <div className="form-grp">
              <input
                type="text"
                name="companyName"
                placeholder="Company Name"
                value={formData.companyName}
                onChange={handleChange}
                required
              />
            </div>
          </div>
          <div className="col-md-6">
            <div className="form-grp">
              <input
                type="text"
                name="websiteUrl"
                placeholder="Website URL"
                value={formData.websiteUrl}
                onChange={handleChange}
              />
            </div>
          </div>
        </div>
        <div className="form-grp">
          <h6>Estimated Annual Revenue*</h6>
          <select
            className="form-select"
            name="annualRevenue"
            value={formData.annualRevenue}
            onChange={handleChange}
            required
          >
            <option disabled selected value="" className="display-none">
              Select an option
            </option>
            <option value="250K Less">Less than $250K a year</option>
            <option value="250K-500K">$250K - $500K a year</option>
            <option value="500K-1M">$500K - $1M a year</option>
            <option value="1M More">$1M a year or more</option>
          </select>
        </div>
        <div className="form-grp">
          <h6>How Did You Learn About RankRunners?*</h6>
          <select
            className="form-select"
            name="learnFrom"
            required
            value={formData.learnFrom}
            onChange={handleChange}
          >
            <option disabled selected value="" className="display-none">
              Select an option
            </option>
            <option value="Instagram">Instagram</option>
            <option value="Facebook">Facebook</option>
            <option value="LinkedIn">LinkedIn</option>
            <option value="Google Search">Google Search</option>
            <option value="Phone Call">Phone Call</option>
            <option value="Email">Email</option>
            <option value="Podcast / Webinar">Podcast / Webinar</option>
            <option value="Networking Event">Networking Event</option>
            <option value="Referral">Referral</option>
            <option value="Other">Other</option>
          </select>
        </div>
        <div className="form-grp">
          <textarea
            name="additionalInfo"
            placeholder="Additional Information"
            value={formData.additionalInfo}
            onChange={handleChange}
          />
        </div>
        {/* <div className="form-grp checkbox-grp">
                    <input
                        type="checkbox"
                        name="checkbox"
                        id="checkbox"
                        checked={formData.checkbox}
                        onChange={handleChange}
                        required
                    />
                    <label htmlFor="checkbox">
                        I'm serious about growing my business and understand services start at $1,500
                    </label>
                </div> */}
        <button type="submit" className="btn">
          Submit Request
        </button>
      </form>
      <p className="ajax-response mb-0" />
    </div>
  );
}