devops/encoach_landingpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the whole website to work according to the CMS

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-03-19 01:02:07 +00:00
parent 91ee920b42
commit 5ee1364afb
36 changed files with 617 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/templates/ContactUs.tsx
View File

@@ -7,6 +7,7 @@ import Title from "@/components/Title";
import translation from "@/translation/contactus.json";
import Image from "next/image";
import {toast, ToastContainer} from "react-toastify";
import ContactPage from "@/types/cms/contact";
type FormValues = {
name: string;
@@ -18,6 +19,7 @@ type FormValues = {
interface Props {
language: "en" | "ar";
data: ContactPage;
page: string;
}
@@ -26,18 +28,18 @@ const ErrorMessage = ({message}: {message: string}) => (
<span className="text-mti-red">{message}</span>
</div>
);
export default function App({language, page}: Props) {
export default function App({language, data, page}: Props) {
const selectOptions = [
{
label: translation.feedback[language],
label: data.Feedback,
value: "feedback",
},
{
label: translation.bug[language],
label: data.Bug,
value: "bug",
},
{
label: translation.help[language],
label: data.Help,
value: "help",
},
];
@@ -53,7 +55,7 @@ export default function App({language, page}: Props) {
});
const {errors, isDirty, isValid} = formState;
const onSubmit: SubmitHandler<FormValues> = async (data) => {
const onSubmit: SubmitHandler<FormValues> = async (body) => {
try {
const response = await fetch(`https://platform.encoach.com/api/tickets`, {
method: "POST",
@@ -62,29 +64,29 @@ export default function App({language, page}: Props) {
},
body: JSON.stringify({
reporter: {
name: data.name,
email: data.email,
name: body.name,
email: body.email,
},
subject: data.subject,
type: data.type,
subject: body.subject,
type: body.type,
reportedFrom: window?.location.toString() || "",
status: "submitted",
date: new Date().toISOString(),
description: data.description,
description: body.description,
}),
});
if (response.status === 200) {
const data = await response.json();
const body = await response.json();
// Pass data to the page via props
if (data.ok) {
toast.success(translation.ticketSuccess[language]);
if (body.ok) {
toast.success(data.TicketSuccess);
return;
}
}
} catch (err) {}
toast.error(translation.ticketError[language]);
toast.error(data.TicketError);
};
return (
@@ -94,7 +96,7 @@ export default function App({language, page}: Props) {
<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>
<Title>{data.Title}</Title>
</div>
</section>
<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
@@ -102,31 +104,31 @@ export default function App({language, page}: Props) {
<input
id="name"
type="text"
placeholder={translation.name[language]}
placeholder={data.Name}
{...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]} />}
{errors.name && errors.name.type === "required" && <ErrorMessage message={data.FieldRequired} />}
<input
id="email"
placeholder={translation.email[language]}
placeholder={data.Email}
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]} />}
{errors.email && errors.email.type === "required" && <ErrorMessage message={data.FieldRequired} />}
{errors.email && errors.email.type === "pattern" && <ErrorMessage message={data.InvalidEmail} />}
<input
id="subject"
placeholder={translation.subject[language]}
placeholder={data.Subject}
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]} />}
{errors.subject && errors.subject.type === "required" && <ErrorMessage message={data.FieldRequired} />}
<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]}
{data.SelectType}
</option>
{selectOptions.map((option) => (
<option key={option.value} value={option.value}>
@@ -134,18 +136,16 @@ export default function App({language, page}: Props) {
</option>
))}
</select>
{errors.type && errors.type.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
{errors.type && errors.type.type === "required" && <ErrorMessage message={data.FieldRequired} />}
<textarea
id="description"
placeholder={translation.description[language]}
placeholder={data.Description}
{...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]} />
{errors.description && errors.description.type === "required" && <ErrorMessage message={data.FieldRequired} />}
<input type="submit" className="btn" disabled={!isDirty || !isValid} value={data.Submit} />
</form>
<div className="flex flex-col">
<Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />