forked from mrwyndham/fastpocket
257 lines
11 KiB
TypeScript
257 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import pb from "@/lib/pocketbase";
|
|
import { contactUsValidationSchema } from "@/utils/form";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import React from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { toast } from "react-toastify";
|
|
|
|
const FormLeftDescriptionRightContactUs = () => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(contactUsValidationSchema),
|
|
});
|
|
|
|
const onSubmit = async (data: {
|
|
firstName: string;
|
|
lastName: string;
|
|
email: string;
|
|
phoneNumber?: string;
|
|
note?: string;
|
|
}) => {
|
|
try {
|
|
await pb.collection("contact").create({ source: "contactus", ...data });
|
|
localStorage.setItem("contactus", JSON.stringify(data));
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast.error(error.message, {
|
|
position: "bottom-left",
|
|
autoClose: 5000,
|
|
hideProgressBar: false,
|
|
closeOnClick: true,
|
|
pauseOnHover: true,
|
|
draggable: true,
|
|
progress: undefined,
|
|
theme: "colored",
|
|
});
|
|
}
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
{/* Contact Us */}
|
|
<div className="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto pb-10">
|
|
<div className="max-w-2xl lg:max-w-5xl mx-auto">
|
|
<div className="mt-12 grid items-start lg:grid-cols-2 gap-6 lg:gap-16">
|
|
{/* Card */}
|
|
<div className="flex flex-col rounded-xl p-4 sm:p-6 lg:p-8 bg-base-200 min-h-[20rem] shadow-lg">
|
|
<h2 className="mb-8 text-xl font-semibold text-base-content ">
|
|
Fill in the form
|
|
</h2>
|
|
{typeof window !== "undefined" &&
|
|
!localStorage.getItem("contactus") ? (
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="grid gap-4 gap-y-0">
|
|
{/* Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-0">
|
|
<div>
|
|
<label
|
|
htmlFor="hs-firstname-contacts-1"
|
|
className="sr-only"
|
|
>
|
|
First Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="hs-firstname-contacts-1"
|
|
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="First Name"
|
|
{...register("firstName")}
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.firstName?.message}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="hs-lastname-contacts-1"
|
|
className="sr-only"
|
|
>
|
|
Last Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="hs-lastname-contacts-1"
|
|
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="Last Name"
|
|
{...register("lastName")}
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.lastName?.message}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* End Grid */}
|
|
<div>
|
|
<label htmlFor="hs-email-contacts-1" className="sr-only">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="hs-email-contacts-1"
|
|
autoComplete="email"
|
|
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="Email"
|
|
{...register("email")}
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.email?.message}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="hs-phone-number-1" className="sr-only">
|
|
Phone Number
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="hs-phone-number-1"
|
|
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="Phone Number"
|
|
{...register("phoneNumber")}
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.phoneNumber?.message}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="hs-about-contacts-1" className="sr-only">
|
|
Details
|
|
</label>
|
|
<textarea
|
|
id="hs-about-contacts-1"
|
|
rows={4}
|
|
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="Details"
|
|
defaultValue={""}
|
|
{...register("note")}
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.note?.message}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* End Grid */}
|
|
<div className="mt-4 grid">
|
|
<button type="submit" className="btn btn-primary">
|
|
Send inquiry
|
|
</button>
|
|
</div>
|
|
<div className="mt-3 text-center">
|
|
<p className="text-sm text-base-content ">
|
|
We'll get back to you in 1-2 business days.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
) : (
|
|
<p className="text-sm text-base-content">
|
|
We have received your details and will be in touch!
|
|
</p>
|
|
)}
|
|
</div>
|
|
{/* End Card */}
|
|
<div className="divide-y divide-white ">
|
|
{/* Icon Block */}
|
|
<div className="flex gap-x-7 py-6">
|
|
<svg
|
|
className="flex-shrink-0 size-6 mt-1.5 text-base-content "
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={24}
|
|
height={24}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
|
|
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
|
|
</svg>
|
|
<div className="grow">
|
|
<h3 className="font-semibold text-base-content ">FAQ</h3>
|
|
<p className="mt-1 text-sm text-base-content ">
|
|
Search our FAQ for answers to anything you might ask.
|
|
</p>
|
|
<a
|
|
className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-base-content hover:text-base-content "
|
|
href="/"
|
|
>
|
|
Visit FAQ
|
|
<svg
|
|
className="flex-shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1"
|
|
width={16}
|
|
height={16}
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/* End Icon Block */}
|
|
|
|
{/* Icon Block */}
|
|
<div className=" flex gap-x-7 py-6">
|
|
<svg
|
|
className="flex-shrink-0 size-6 mt-1.5 text-base-content "
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={24}
|
|
height={24}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z" />
|
|
<path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10" />
|
|
</svg>
|
|
<div className="grow">
|
|
<h3 className="font-semibold text-base-content ">
|
|
Contact us by email
|
|
</h3>
|
|
<p className="mt-1 text-sm text-base-content ">
|
|
If you wish to write us an email instead please use
|
|
</p>
|
|
<a
|
|
className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-base-content hover:text-base-content "
|
|
href="mailto:developer@biz365.com.au"
|
|
>
|
|
developer@biz365.com.au
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/* End Icon Block */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* End Contact Us */}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FormLeftDescriptionRightContactUs;
|