Updated the code to send the full page link
This commit is contained in:
Tiago Ribeiro
@@ -1,76 +1,73 @@
|
||||
import Footer from "@/components/Footer";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Title from "@/components/Title";
|
||||
import { Contact } from "@/types/contact";
|
||||
import {Contact} from "@/types/contact";
|
||||
|
||||
type Language = "en" | "ar";
|
||||
|
||||
interface PageProps {
|
||||
params: {
|
||||
country: string;
|
||||
};
|
||||
searchParams: {
|
||||
page: string;
|
||||
language: Language;
|
||||
};
|
||||
params: {
|
||||
country: string;
|
||||
};
|
||||
searchParams: {
|
||||
page: string;
|
||||
language: Language;
|
||||
};
|
||||
}
|
||||
|
||||
async function getCountryManagers(country: string) {
|
||||
const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents/${country}`);
|
||||
const res = await fetch(`https://platform.encoach.com/api/users/agents/${country}`);
|
||||
|
||||
if(!res.ok) {
|
||||
throw new Error("Failed to fetch contacts");
|
||||
}
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to fetch contacts");
|
||||
}
|
||||
|
||||
return res.json();
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const contacts = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents`).then((res) => res.json()) as Contact[];
|
||||
const contacts = (await fetch(`https://platform.encoach.com/api/users/agents`).then((res) => res.json())) as Contact[];
|
||||
|
||||
// down the line, this is required to be loaded from a CMS
|
||||
// for now, we'll just use a JSON file
|
||||
// down the line, this is required to be loaded from a CMS
|
||||
// for now, we'll just use a JSON file
|
||||
|
||||
// do not forget the actually render this as multiple languages
|
||||
return contacts.map(({ key }) => ({
|
||||
country: key.toLowerCase().replaceAll(" ", ""),
|
||||
}));
|
||||
// do not forget the actually render this as multiple languages
|
||||
return contacts.map(({key}) => ({
|
||||
country: key.toLowerCase().replaceAll(" ", ""),
|
||||
}));
|
||||
}
|
||||
|
||||
export default async function Page({
|
||||
params: { country },
|
||||
searchParams: { page = "/contacts", language = "en" },
|
||||
}: PageProps) {
|
||||
const contact = await getCountryManagers(country) as Contact;
|
||||
return (
|
||||
<main className="text-mti-black flex h-screen w-full flex-col bg-white">
|
||||
<Navbar currentPage={page} language={language} />
|
||||
export default async function Page({params: {country}, searchParams: {page = "/contacts", language = "en"}}: PageProps) {
|
||||
const contact = (await getCountryManagers(country)) as Contact;
|
||||
return (
|
||||
<main className="text-mti-black flex h-screen w-full flex-col bg-white">
|
||||
<Navbar currentPage={page} language={language} />
|
||||
|
||||
<section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<Title>{`${contact.label} Contacts`}</Title>
|
||||
</div>
|
||||
</section>
|
||||
<section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<Title>{`${contact.label} Contacts`}</Title>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white h-full w-full p-8 md:p-16 flex gap-16 justify-center flex-wrap">
|
||||
{contact.entries.map((entry) => (
|
||||
<div key={entry.name}>
|
||||
<h2>
|
||||
<strong>Name: </strong>
|
||||
{entry.name}
|
||||
</h2>
|
||||
<p>
|
||||
<strong>Number: </strong>
|
||||
{entry.number}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Email: </strong>
|
||||
{entry.email}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
<Footer language={language} />
|
||||
</main>
|
||||
);
|
||||
<section className="bg-white h-full w-full p-8 md:p-16 flex gap-16 justify-center flex-wrap">
|
||||
{contact.entries.map((entry) => (
|
||||
<div key={entry.name}>
|
||||
<h2>
|
||||
<strong>Name: </strong>
|
||||
{entry.name}
|
||||
</h2>
|
||||
<p>
|
||||
<strong>Number: </strong>
|
||||
{entry.number}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Email: </strong>
|
||||
{entry.email}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
<Footer language={language} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,189 +1,158 @@
|
||||
"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";
|
||||
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;
|
||||
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.toString() || "",
|
||||
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
|
||||
if (data.ok) {
|
||||
toast.success(translation.ticketSuccess[language]);
|
||||
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) {}
|
||||
|
||||
toast.error(translation.ticketError[language]);
|
||||
};
|
||||
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>
|
||||
</>
|
||||
);
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user