feat(inquires): Make contact form configurable via CMS data

- Add CmsContact type support to FooterForm, Inquires, and InquiresForm components
- Make form fields dynamic by accepting contactData prop with configurable Fields array
- Add placeholder prop to InputGroup component for enhanced field customization
- Replace hardcoded form fields with dynamic field mapping from CMS data
- Support dynamic form title and description from contactData
- Use CMS-provided submit button text with fallback to default "Submit"
- Implement field-level validation configuration including required field handling
- Auto-detect input type based on field name (email, phone, text)
- Pass contact data from marketing page to FooterForm component
- Maintain backward compatibility with default fields when contactData is not provided

app/_inquires/form.tsx

@@ -1,5 +1,6 @@
 "use client";
 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";
@@ -7,20 +8,19 @@ import InputGroup from "../_components/InputGroup";
 import Loading from "../_components/Loading";
 
 type TInquiresForm = {
-  full_name: string;
-  company_name: string;
-  work_email: string;
-  phone_number: string;
+  [key: string]: string;
 };
 
 type InquiresFormProps = {
   columnsPerRow?: 1 | 2 | 3 | 4;
   buttonText?: string;
+  contactData?: CmsContact;
 };
 
 const InquiresForm = ({
   columnsPerRow = 2,
-  buttonText = "Submit",
+  buttonText,
+  contactData,
 }: InquiresFormProps) => {
   const [isLoading, setIsLoading] = useState(false);
   const {
@@ -59,44 +59,73 @@ const InquiresForm = ({
     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 = contactData?.SubmitButtonText || buttonText || "Submit";
+
   return (
     <form
       className={`w-full px-4 lg:px-16 py-10 grid ${gridColsClass} gap-4`}
       onSubmit={handleSubmit(onSubmit)}>
-      <InputGroup
-        id="full_name"
-        label="Full Name"
-        register={register}
-        type="text"
-      />
-      <InputGroup
-        id="company_name"
-        label="Company Name"
-        register={register}
-        type="text"
-      />
-      <InputGroup
-        id="work_email"
-        label="Work Email"
-        register={register}
-        type="email"
-      />
-      <InputGroup
-        id="phone_number"
-        label="Phone Number"
-        register={register}
-        type="text"
-        error={errors.phone_number?.message}
-        validation={{
-          pattern: {
-            value: /^[+\d]+$/,
-            message: "Please enter a valid phone number",
-          },
-        }}
-      />
+      {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={field.Label}
+            placeholder={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 /> : buttonText}
+          {isLoading ? <Loading /> : submitText}
         </button>
       </div>
     </form>