tm-landing/app/_inquires/form.tsx

"use client";
import { sanitizeText } from "@/lib/sanitize";
import api from "@/service/api";
import { CmsContact } from "@/types/TCms";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
import InputGroup from "../_components/InputGroup";
import Loading from "../_components/Loading";

type TInquiresForm = {
  [key: string]: string;
};

type InquiresFormProps = {
  columnsPerRow?: 1 | 2 | 3 | 4;
  buttonText?: string;
  contactData?: CmsContact;
};

const InquiresForm = ({
  columnsPerRow = 2,
  buttonText,
  contactData,
}: InquiresFormProps) => {
  const [isLoading, setIsLoading] = useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<TInquiresForm>();

  const onSubmit = async (data: TInquiresForm) => {
    setIsLoading(true);
    try {
      const response = (await api.post("inquiries", { ...data })).data;
      toast.success(response.message);
      reset();
    } catch (error) {
      console.log(error);
      toast.error("Something went wrong");
      throw error;
    } finally {
      setIsLoading(false);
    }
  };

  const gridColsClass = {
    1: "lg:grid-cols-1",
    2: "lg:grid-cols-2",
    3: "lg:grid-cols-3",
    4: "lg:grid-cols-4",
  }[columnsPerRow];

  const colSpanClass = {
    1: "lg:col-span-1",
    2: "lg:col-span-2",
    3: "lg:col-span-3",
    4: "lg:col-span-4",
  }[columnsPerRow];

  const defaultFields = [
    { name: "full_name", label: "Full Name", placeholder: "", required: false },
    {
      name: "company_name",
      label: "Company Name",
      placeholder: "",
      required: false,
    },
    {
      name: "work_email",
      label: "Work Email",
      placeholder: "",
      required: false,
    },
    {
      name: "phone_number",
      label: "Phone Number",
      placeholder: "",
      required: false,
    },
  ];

  const fields = contactData?.fields || defaultFields;
  const submitText =
    sanitizeText(contactData?.submit_button_text) || buttonText || "Submit";

  return (
    <form
      className={`w-full px-4 lg:px-16 py-10 grid ${gridColsClass} gap-4`}
      onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field) => {
        const inputType =
          field.name.includes("email") || field.name === "work_email"
            ? "email"
            : "text";
        const isPhoneField =
          field.name.includes("phone") || field.name === "phone_number";

        return (
          <InputGroup
            key={field.name}
            id={field.name}
            label={sanitizeText(field.label)}
            placeholder={sanitizeText(field.placeholder)}
            register={register}
            type={inputType}
            error={errors[field.name]?.message}
            validation={
              isPhoneField
                ? {
                    pattern: {
                      value: /^[+\d]+$/,
                      message: "Please enter a valid phone number",
                    },
                    required: field.required
                      ? "This field is required"
                      : undefined,
                  }
                : field.required
                ? { required: "This field is required" }
                : undefined
            }
          />
        );
      })}
      <div className={`${colSpanClass} flex justify-end`}>
        <button className="bg-(--primary) cursor-pointer w-fit text-white rounded-full py-4 px-6">
          {isLoading ? <Loading /> : submitText}
        </button>
      </div>
    </form>
  );
};

export default InquiresForm;