feat(form): enhance and refactor contact form to inquiries form

This commit refactors the contact form into a more robust inquiries form, relocating it from `/contact-us` to a new `/inquires` route.

Key changes include:
- Renamed and moved the component from `ContactUs` to `Inquires`.
- Updated form fields: removed "Company Name", added "Message", and renamed "Work Email" and "Phone Number" for clarity.
- Implemented comprehensive client-side validation for all fields using `react-hook-form`.
- Added a loading state to the submit button to provide user feedback during submission.
- The form now automatically resets upon successful submission.
- Introduced new reusable `TextareaGroup` and `Loading` components to support the enhanced form functionality.

app/_contact-us/form.tsx

@@ -1,42 +1,47 @@
 "use client";
 import api from "@/service/api";
+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";
+import TextareaGroup from "../_components/Textarea";
 
 type TContactUsForm = {
   full_name: string;
-  company_name: string;
-  work_email: string;
-  phone_number: string;
+  email: string;
+  phone: string;
+  message: string;
 };
-
-type ContactUsFormProps = {
+interface IProps {
   columnsPerRow?: 1 | 2 | 3 | 4;
   buttonText?: string;
-};
-
+}
 const ContactUsForm = ({
-  columnsPerRow = 2,
   buttonText = "Submit",
-}: ContactUsFormProps) => {
+  columnsPerRow = 1,
+}: IProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const {
     register,
     handleSubmit,
     formState: { errors },
+    reset,
   } = useForm<TContactUsForm>();
-
   const onSubmit = async (data: TContactUsForm) => {
+    setIsLoading(() => true);
     try {
-      const response = (await api.post("inquiries", { ...data })).data;
+      const response = (await api.post("contacts", { ...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",
@@ -59,36 +64,88 @@ const ContactUsForm = ({
         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={{
+          required: {
+            message: "This field is required",
+            value: true,
+          },
+          minLength: {
+            value: 2,
+            message: "Please enter at least 2 characters",
+          },
+          maxLength: {
+            value: 100,
+            message: "Please enter at most 100 characters",
+          },
+        }}
+        type="text"
+        error={errors.full_name?.message}
+      />
+      <InputGroup
+        id="email"
+        label="Email"
+        register={register}
+        validation={{
+          required: {
+            message: "This field is required",
+            value: true,
+          },
+          pattern: {
+            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+            message: "Please enter a valid email address",
+          },
+        }}
+        type="email"
+        error={errors.email?.message}
+      />
+      <InputGroup
+        id="phone"
+        label="Phone"
+        register={register}
+        validation={{
+          required: {
+            message: "This field is required",
+            value: true,
+          },
+          minLength: {
+            value: 10,
+            message: "Please enter at least 10 characters",
+          },
+          maxLength: {
+            value: 20,
+            message: "Please enter at most 20 characters",
+          },
           pattern: {
             value: /^[+\d]+$/,
             message: "Please enter a valid phone number",
           },
         }}
+        type="text"
+        error={errors.phone?.message}
+      />
+      <TextareaGroup
+        id="message"
+        label="Message"
+        register={register}
+        error={errors.message?.message}
+        validation={{
+          required: {
+            value: true,
+            message: "This field is required",
+          },
+          maxLength: {
+            value: 1000,
+            message: "Please enter at most 1000 characters",
+          },
+          minLength: {
+            value: 10,
+            message: "Please enter at least 10 characters",
+          },
+        }}
       />
       <div className={`${colSpanClass} flex justify-end`}>
-        <button className="bg-(--primary) w-fit text-white rounded-full py-4 px-6">
-          {buttonText}
+        <button className="bg-(--primary) cursor-pointer w-fit text-white rounded-full py-4 px-6">
+          {isLoading ? <Loading /> : buttonText}
         </button>
       </div>
     </form>