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

Updated the code to send the full page link

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-02-27 14:22:59 +00:00
parent e02dce8878
commit 902d3adf55
2 changed files with 188 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/app/contacts/[country]/page.tsx
View File

@@ -1,76 +1,73 @@
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar"; import Navbar from "@/components/Navbar";
import Title from "@/components/Title"; import Title from "@/components/Title";
import { Contact } from "@/types/contact"; import {Contact} from "@/types/contact";
type Language = "en" | "ar"; type Language = "en" | "ar";
interface PageProps { interface PageProps {
params: { params: {
country: string; country: string;
}; };
searchParams: { searchParams: {
page: string; page: string;
language: Language; language: Language;
}; };
} }
async function getCountryManagers(country: string) { 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) { if (!res.ok) {
throw new Error("Failed to fetch contacts"); throw new Error("Failed to fetch contacts");
} }
return res.json(); return res.json();
} }
export async function generateStaticParams() { 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 // down the line, this is required to be loaded from a CMS
// for now, we'll just use a JSON file // for now, we'll just use a JSON file
// do not forget the actually render this as multiple languages // do not forget the actually render this as multiple languages
return contacts.map(({ key }) => ({ return contacts.map(({key}) => ({
country: key.toLowerCase().replaceAll(" ", ""), country: key.toLowerCase().replaceAll(" ", ""),
})); }));
} }
export default async function Page({ export default async function Page({params: {country}, searchParams: {page = "/contacts", language = "en"}}: PageProps) {
params: { country }, const contact = (await getCountryManagers(country)) as Contact;
searchParams: { page = "/contacts", language = "en" }, return (
}: PageProps) { <main className="text-mti-black flex h-screen w-full flex-col bg-white">
const contact = await getCountryManagers(country) as Contact; <Navbar currentPage={page} language={language} />
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"> <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"> <div className="flex h-full w-full flex-col items-center justify-center">
<Title>{`${contact.label} Contacts`}</Title> <Title>{`${contact.label} Contacts`}</Title>
</div> </div>
</section> </section>
<section className="bg-white h-full w-full p-8 md:p-16 flex gap-16 justify-center flex-wrap"> <section className="bg-white h-full w-full p-8 md:p-16 flex gap-16 justify-center flex-wrap">
{contact.entries.map((entry) => ( {contact.entries.map((entry) => (
<div key={entry.name}> <div key={entry.name}>
<h2> <h2>
<strong>Name: </strong> <strong>Name: </strong>
{entry.name} {entry.name}
</h2> </h2>
<p> <p>
<strong>Number: </strong> <strong>Number: </strong>
{entry.number} {entry.number}
</p> </p>
<p> <p>
<strong>Email: </strong> <strong>Email: </strong>
{entry.email} {entry.email}
</p> </p>
</div> </div>
))} ))}
</section> </section>
<Footer language={language} /> <Footer language={language} />
</main> </main>
); );
} }

305
src/templates/ContactUs.tsx
View File

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