AmirReza Jamali
645b397396
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.
107 lines
2.5 KiB
TypeScript
107 lines
2.5 KiB
TypeScript
"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";
|
|
|
|
type TInquiresForm = {
|
|
full_name: string;
|
|
company_name: string;
|
|
work_email: string;
|
|
phone_number: string;
|
|
};
|
|
|
|
type InquiresFormProps = {
|
|
columnsPerRow?: 1 | 2 | 3 | 4;
|
|
buttonText?: string;
|
|
};
|
|
|
|
const InquiresForm = ({
|
|
columnsPerRow = 2,
|
|
buttonText = "Submit",
|
|
}: 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];
|
|
|
|
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",
|
|
},
|
|
}}
|
|
/>
|
|
<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}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default InquiresForm;
|