|
|
|
|
@@ -1,149 +1,189 @@
|
|
|
|
|
"use client";
|
|
|
|
|
import React from "react";
|
|
|
|
|
import {useForm, SubmitHandler, Controller} from "react-hook-form";
|
|
|
|
|
import { useForm, SubmitHandler, Controller } from "react-hook-form";
|
|
|
|
|
import Footer from "@/components/Footer";
|
|
|
|
|
import Navbar from "@/components/Navbar";
|
|
|
|
|
import Title from "@/components/Title";
|
|
|
|
|
import translation from "@/translation/contactus.json";
|
|
|
|
|
import Image from "next/image";
|
|
|
|
|
import { toast, ToastContainer } from "react-toastify";
|
|
|
|
|
|
|
|
|
|
type FormValues = {
|
|
|
|
|
name: string;
|
|
|
|
|
email: string;
|
|
|
|
|
description: string;
|
|
|
|
|
subject: string;
|
|
|
|
|
type: "feedback" | "bug" | "help" | "";
|
|
|
|
|
name: string;
|
|
|
|
|
email: string;
|
|
|
|
|
description: string;
|
|
|
|
|
subject: string;
|
|
|
|
|
type: "feedback" | "bug" | "help" | "";
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
language: "en" | "ar";
|
|
|
|
|
page: string;
|
|
|
|
|
language: "en" | "ar";
|
|
|
|
|
page: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ErrorMessage = ({message}: {message: string}) => (
|
|
|
|
|
<div className="w-full">
|
|
|
|
|
<span className="text-mti-red">{message}</span>
|
|
|
|
|
</div>
|
|
|
|
|
const ErrorMessage = ({ message }: { message: string }) => (
|
|
|
|
|
<div className="w-full">
|
|
|
|
|
<span className="text-mti-red">{message}</span>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
export default function App({language, page}: Props) {
|
|
|
|
|
const selectOptions = [
|
|
|
|
|
{
|
|
|
|
|
label: translation.feedback[language],
|
|
|
|
|
value: "feedback",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: translation.bug[language],
|
|
|
|
|
value: "bug",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: translation.help[language],
|
|
|
|
|
value: "help",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
export default function App({ language, page }: Props) {
|
|
|
|
|
const selectOptions = [
|
|
|
|
|
{
|
|
|
|
|
label: translation.feedback[language],
|
|
|
|
|
value: "feedback",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: translation.bug[language],
|
|
|
|
|
value: "bug",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: translation.help[language],
|
|
|
|
|
value: "help",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const {register, control, handleSubmit, formState} = useForm<FormValues>({
|
|
|
|
|
defaultValues: {
|
|
|
|
|
name: "",
|
|
|
|
|
email: "",
|
|
|
|
|
description: "",
|
|
|
|
|
subject: "",
|
|
|
|
|
type: "",
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
const { register, control, handleSubmit, formState } = useForm<FormValues>({
|
|
|
|
|
defaultValues: {
|
|
|
|
|
name: "",
|
|
|
|
|
email: "",
|
|
|
|
|
description: "",
|
|
|
|
|
subject: "",
|
|
|
|
|
type: "",
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const {errors, isDirty, isValid} = formState;
|
|
|
|
|
console.log("formState", formState.isSubmitSuccessful);
|
|
|
|
|
const onSubmit: SubmitHandler<FormValues> = async (data) => {
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch(`https://platform.encoach.com/api/tickets`, {
|
|
|
|
|
method: "POST",
|
|
|
|
|
headers: {
|
|
|
|
|
"Content-Type": "application/json",
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
reporter: {
|
|
|
|
|
name: data.name,
|
|
|
|
|
email: data.email,
|
|
|
|
|
},
|
|
|
|
|
subject: data.subject,
|
|
|
|
|
type: data.type,
|
|
|
|
|
reportedFrom: window.location.href,
|
|
|
|
|
status: "submitted",
|
|
|
|
|
date: new Date().toISOString(),
|
|
|
|
|
description: data.description,
|
|
|
|
|
}),
|
|
|
|
|
});
|
|
|
|
|
const { errors, isDirty, isValid } = formState;
|
|
|
|
|
const onSubmit: SubmitHandler<FormValues> = async (data) => {
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch(`https://platform.encoach.com/api/tickets`, {
|
|
|
|
|
method: "POST",
|
|
|
|
|
headers: {
|
|
|
|
|
"Content-Type": "application/json",
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
reporter: {
|
|
|
|
|
name: data.name,
|
|
|
|
|
email: data.email,
|
|
|
|
|
},
|
|
|
|
|
subject: data.subject,
|
|
|
|
|
type: data.type,
|
|
|
|
|
reportedFrom: window.location.href,
|
|
|
|
|
status: "submitted",
|
|
|
|
|
date: new Date().toISOString(),
|
|
|
|
|
description: data.description,
|
|
|
|
|
}),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
// Pass data to the page via props
|
|
|
|
|
console.log(data);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {}
|
|
|
|
|
};
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
// Pass data to the page via props
|
|
|
|
|
if (data.ok) {
|
|
|
|
|
toast.success(translation.ticketSuccess[language]);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
|
|
|
|
|
<Navbar currentPage={page} language={language} />
|
|
|
|
|
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
|
|
|
|
|
<div className="w-full h-full flex flex-col items-center justify-center">
|
|
|
|
|
<Title>{translation.title[language]}</Title>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
|
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)} className="form-control items-center gap-2 text-mti-black flex flex-col w-96">
|
|
|
|
|
<input
|
|
|
|
|
id="name"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder={translation.name[language]}
|
|
|
|
|
{...register("name", {required: true})}
|
|
|
|
|
className="input input-bordered md:w-full sm:w-1/2 max-w-md"
|
|
|
|
|
/>
|
|
|
|
|
{errors.name && errors.name.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
|
|
|
|
|
<input
|
|
|
|
|
id="email"
|
|
|
|
|
placeholder={translation.email[language]}
|
|
|
|
|
type="text"
|
|
|
|
|
{...register("email", {required: true, pattern: /^\S+@\S+$/i})}
|
|
|
|
|
className="input input-bordered md:w-full sm:w-1/2 max-w-md"
|
|
|
|
|
/>
|
|
|
|
|
{errors.email && errors.email.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
|
|
|
|
|
{errors.email && errors.email.type === "pattern" && <ErrorMessage message={translation.invalidEmail[language]} />}
|
|
|
|
|
<input
|
|
|
|
|
id="subject"
|
|
|
|
|
placeholder={translation.subject[language]}
|
|
|
|
|
type="text"
|
|
|
|
|
{...register("subject", {required: true})}
|
|
|
|
|
className="input input-bordered md:w-full sm:w-1/2 max-w-md"
|
|
|
|
|
/>
|
|
|
|
|
{errors.subject && errors.subject.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
|
|
|
|
|
<select id="type" {...register("type", {required: true})} className="select select-bordered md:w-full sm:w-1/2 max-w-md">
|
|
|
|
|
<option value="" disabled>
|
|
|
|
|
{translation.selectType[language]}
|
|
|
|
|
</option>
|
|
|
|
|
{selectOptions.map((option) => (
|
|
|
|
|
<option key={option.value} value={option.value}>
|
|
|
|
|
{option.label}
|
|
|
|
|
</option>
|
|
|
|
|
))}
|
|
|
|
|
</select>
|
|
|
|
|
{errors.type && errors.type.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
|
|
|
|
|
<textarea
|
|
|
|
|
id="description"
|
|
|
|
|
placeholder={translation.description[language]}
|
|
|
|
|
{...register("description", {required: true})}
|
|
|
|
|
className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
|
|
|
|
|
rows={5}
|
|
|
|
|
/>
|
|
|
|
|
{errors.description && errors.description.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
|
|
|
|
|
<input type="submit" className="btn" disabled={!isDirty || !isValid} value={translation.submit[language]} />
|
|
|
|
|
</form>
|
|
|
|
|
<div className="flex flex-col">
|
|
|
|
|
<Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<Footer language={language} />
|
|
|
|
|
</main>
|
|
|
|
|
);
|
|
|
|
|
toast.error(translation.ticketError[language]);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<ToastContainer />
|
|
|
|
|
<main
|
|
|
|
|
className="text-mti-black flex h-screen w-full flex-col bg-white"
|
|
|
|
|
dir={language === "ar" ? "rtl" : "ltr"}
|
|
|
|
|
>
|
|
|
|
|
<Navbar currentPage={page} language={language} />
|
|
|
|
|
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
|
|
|
|
|
<div className="w-full h-full flex flex-col items-center justify-center">
|
|
|
|
|
<Title>{translation.title[language]}</Title>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
|
|
|
|
|
<form
|
|
|
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
|
|
|
className="form-control items-center gap-2 text-mti-black flex flex-col w-96"
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
id="name"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder={translation.name[language]}
|
|
|
|
|
{...register("name", { required: true })}
|
|
|
|
|
className="input input-bordered md:w-full sm:w-1/2 max-w-md"
|
|
|
|
|
/>
|
|
|
|
|
{errors.name && errors.name.type === "required" && (
|
|
|
|
|
<ErrorMessage message={translation.fieldRequired[language]} />
|
|
|
|
|
)}
|
|
|
|
|
<input
|
|
|
|
|
id="email"
|
|
|
|
|
placeholder={translation.email[language]}
|
|
|
|
|
type="text"
|
|
|
|
|
{...register("email", { required: true, pattern: /^\S+@\S+$/i })}
|
|
|
|
|
className="input input-bordered md:w-full sm:w-1/2 max-w-md"
|
|
|
|
|
/>
|
|
|
|
|
{errors.email && errors.email.type === "required" && (
|
|
|
|
|
<ErrorMessage message={translation.fieldRequired[language]} />
|
|
|
|
|
)}
|
|
|
|
|
{errors.email && errors.email.type === "pattern" && (
|
|
|
|
|
<ErrorMessage message={translation.invalidEmail[language]} />
|
|
|
|
|
)}
|
|
|
|
|
<input
|
|
|
|
|
id="subject"
|
|
|
|
|
placeholder={translation.subject[language]}
|
|
|
|
|
type="text"
|
|
|
|
|
{...register("subject", { required: true })}
|
|
|
|
|
className="input input-bordered md:w-full sm:w-1/2 max-w-md"
|
|
|
|
|
/>
|
|
|
|
|
{errors.subject && errors.subject.type === "required" && (
|
|
|
|
|
<ErrorMessage message={translation.fieldRequired[language]} />
|
|
|
|
|
)}
|
|
|
|
|
<select
|
|
|
|
|
id="type"
|
|
|
|
|
{...register("type", { required: true })}
|
|
|
|
|
className="select select-bordered md:w-full sm:w-1/2 max-w-md"
|
|
|
|
|
>
|
|
|
|
|
<option value="" disabled>
|
|
|
|
|
{translation.selectType[language]}
|
|
|
|
|
</option>
|
|
|
|
|
{selectOptions.map((option) => (
|
|
|
|
|
<option key={option.value} value={option.value}>
|
|
|
|
|
{option.label}
|
|
|
|
|
</option>
|
|
|
|
|
))}
|
|
|
|
|
</select>
|
|
|
|
|
{errors.type && errors.type.type === "required" && (
|
|
|
|
|
<ErrorMessage message={translation.fieldRequired[language]} />
|
|
|
|
|
)}
|
|
|
|
|
<textarea
|
|
|
|
|
id="description"
|
|
|
|
|
placeholder={translation.description[language]}
|
|
|
|
|
{...register("description", { required: true })}
|
|
|
|
|
className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
|
|
|
|
|
rows={5}
|
|
|
|
|
/>
|
|
|
|
|
{errors.description && errors.description.type === "required" && (
|
|
|
|
|
<ErrorMessage message={translation.fieldRequired[language]} />
|
|
|
|
|
)}
|
|
|
|
|
<input
|
|
|
|
|
type="submit"
|
|
|
|
|
className="btn"
|
|
|
|
|
disabled={!isDirty || !isValid}
|
|
|
|
|
value={translation.submit[language]}
|
|
|
|
|
/>
|
|
|
|
|
</form>
|
|
|
|
|
<div className="flex flex-col">
|
|
|
|
|
<Image
|
|
|
|
|
src="/person_laptop_focus.jpg"
|
|
|
|
|
alt="Contact Us"
|
|
|
|
|
width={500}
|
|
|
|
|
height={340}
|
|
|
|
|
className="rounded-xl"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<Footer language={language} />
|
|
|
|
|
</main>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
Joao Ramos