AmirReza Jamali
71094f6c86
This commit refactors the contact form for better reusability and moves it from the global footer to a dedicated section on the homepage. Additionally, it enhances the user experience on the 404 page. Key changes: - The `ContactUsForm` component is now configurable with props for grid layout (`columnsPerRow`) and button text, making it more versatile. - The contact form has been removed from the shared footer in the main layout and is now explicitly included only on the homepage. - The 404 "Not Found" page has been updated to include a direct link to the homepage for easier navigation. - Minor style adjustments were made to the 404 page layout and input field padding for improved visual consistency.
99 lines
2.2 KiB
TypeScript
99 lines
2.2 KiB
TypeScript
"use client";
|
|
import api from "@/service/api";
|
|
import { useForm } from "react-hook-form";
|
|
import { toast } from "react-toastify";
|
|
import InputGroup from "../_components/InputGroup";
|
|
|
|
type TContactUsForm = {
|
|
full_name: string;
|
|
company_name: string;
|
|
work_email: string;
|
|
phone_number: string;
|
|
};
|
|
|
|
type ContactUsFormProps = {
|
|
columnsPerRow?: 1 | 2 | 3 | 4;
|
|
buttonText?: string;
|
|
};
|
|
|
|
const ContactUsForm = ({
|
|
columnsPerRow = 2,
|
|
buttonText = "Submit",
|
|
}: ContactUsFormProps) => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<TContactUsForm>();
|
|
|
|
const onSubmit = async (data: TContactUsForm) => {
|
|
try {
|
|
const response = (await api.post("inquiries", { ...data })).data;
|
|
toast.success(response.message);
|
|
} catch (error) {
|
|
console.log(error);
|
|
toast.error("Something went wrong");
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const gridColsClass = {
|
|
1: "md:grid-cols-1",
|
|
2: "md:grid-cols-2",
|
|
3: "md:grid-cols-3",
|
|
4: "md:grid-cols-4",
|
|
}[columnsPerRow];
|
|
|
|
const colSpanClass = {
|
|
1: "md:col-span-1",
|
|
2: "md:col-span-2",
|
|
3: "md:col-span-3",
|
|
4: "md:col-span-4",
|
|
}[columnsPerRow];
|
|
|
|
return (
|
|
<form
|
|
className={`w-full px-4 md: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) w-fit text-white rounded-full py-4 px-6">
|
|
{buttonText}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default ContactUsForm;
|