130 lines
5.2 KiB
React
130 lines
5.2 KiB
React
|
"use client"; // Ensure this is a Client Component
|
||
|
|
|
||
|
|
import { X } from "lucide-react";
|
||
|
|
import { useLocale, useTranslations } from "next-intl";
|
||
|
|
import { toast } from "react-toastify";
|
||
|
|
import graphql from "src/utils/graphql";
|
||
|
|
|
||
|
|
const gql = `
|
||
|
|
mutation CreateInbox($data: InboxInput!,$locale:I18NLocaleCode) {
|
||
|
|
createInbox(data: $data, locale: $locale) {
|
||
|
|
documentId
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
export default function ContactModal({ close, open }) {
|
||
|
|
|
||
|
|
const t = useTranslations("ContactModal");
|
||
|
|
const locale = useLocale()
|
||
|
|
|
||
|
|
const submitForm = async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const email = e.target.email.value;
|
||
|
|
const companyName = e.target.company.value;
|
||
|
|
const message = e.target.message.value;
|
||
|
|
if (!email || !companyName || !message) {
|
||
|
|
toast.error(t("error.fillAllFields"));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!email.includes("@")) {
|
||
|
|
toast.error(t("error.invalidEmail"));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const {createInbox} = await graphql(gql, {
|
||
|
|
data: {
|
||
|
|
email,
|
||
|
|
companyName,
|
||
|
|
message
|
||
|
|
},
|
||
|
|
locale
|
||
|
|
})
|
||
|
|
if (createInbox.documentId) {
|
||
|
|
toast.success(t("success"));
|
||
|
|
close();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
|
||
|
|
|
||
|
|
{/* Modal Overlay */}
|
||
|
|
{open && (
|
||
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||
|
|
{/* Modal Content */}
|
||
|
|
<div className="bg-white rounded-lg shadow-lg w-full max-w-md p-6">
|
||
|
|
<div className="flex justify-between items-center mb-4">
|
||
|
|
<h2 className="text-xl font-semibold">{t("title")}</h2>
|
||
|
|
<button
|
||
|
|
onClick={close}
|
||
|
|
className="text-gray-500 hover:text-gray-700"
|
||
|
|
>
|
||
|
|
<X className="h-6 w-6" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Form */}
|
||
|
|
<form onSubmit={submitForm} className="space-y-4">
|
||
|
|
{/* Email Field */}
|
||
|
|
<div>
|
||
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
|
||
|
|
{t("email")}
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
id="email"
|
||
|
|
name="email"
|
||
|
|
placeholder={t("emailPlaceholder")}
|
||
|
|
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Company Field */}
|
||
|
|
<div>
|
||
|
|
<label htmlFor="company" className="block text-sm font-medium text-gray-700">
|
||
|
|
{t("company")}
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="company"
|
||
|
|
name="company"
|
||
|
|
placeholder={t("companyPlaceholder")}
|
||
|
|
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Message Field */}
|
||
|
|
<div>
|
||
|
|
<label htmlFor="message" className="block text-sm font-medium text-gray-700">
|
||
|
|
{t("message")}
|
||
|
|
</label>
|
||
|
|
<textarea
|
||
|
|
id="message"
|
||
|
|
name="message"
|
||
|
|
rows={4}
|
||
|
|
placeholder={t("messagePlaceholder")}
|
||
|
|
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Submit Button */}
|
||
|
|
<div>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
className="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors"
|
||
|
|
>
|
||
|
|
{t("sendButton")}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|