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

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

@@ -1,7 +1,7 @@
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";
@@ -16,9 +16,9 @@ interface PageProps {
} }
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");
} }
@@ -26,22 +26,19 @@ async function getCountryManagers(country: string) {
} }
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" },
}: PageProps) {
const contact = await getCountryManagers(country) as Contact;
return ( return (
<main className="text-mti-black flex h-screen w-full flex-col bg-white"> <main className="text-mti-black flex h-screen w-full flex-col bg-white">
<Navbar currentPage={page} language={language} /> <Navbar currentPage={page} language={language} />

73
src/templates/ContactUs.tsx
View File

@@ -1,12 +1,12 @@
"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;
@@ -21,12 +21,12 @@ interface Props {
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],
@@ -42,7 +42,7 @@ export default function App({ language, page }: Props) {
}, },
]; ];
const { register, control, handleSubmit, formState } = useForm<FormValues>({ const {register, control, handleSubmit, formState} = useForm<FormValues>({
defaultValues: { defaultValues: {
name: "", name: "",
email: "", email: "",
@@ -52,7 +52,7 @@ export default function App({ language, page }: Props) {
}, },
}); });
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`, {
@@ -67,7 +67,7 @@ export default function App({ language, page }: Props) {
}, },
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,
@@ -90,10 +90,7 @@ export default function App({ language, page }: Props) {
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"
dir={language === "ar" ? "rtl" : "ltr"}
>
<Navbar currentPage={page} language={language} /> <Navbar currentPage={page} language={language} />
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16"> <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"> <div className="w-full h-full flex flex-col items-center justify-center">
@@ -101,48 +98,33 @@ export default function App({ language, page }: Props) {
</div> </div>
</section> </section>
<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32"> <section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
<form <form onSubmit={handleSubmit(onSubmit)} className="form-control items-center gap-2 text-mti-black flex flex-col w-96">
onSubmit={handleSubmit(onSubmit)}
className="form-control items-center gap-2 text-mti-black flex flex-col w-96"
>
<input <input
id="name" id="name"
type="text" type="text"
placeholder={translation.name[language]} placeholder={translation.name[language]}
{...register("name", { required: true })} {...register("name", {required: true})}
className="input input-bordered md:w-full sm:w-1/2 max-w-md" className="input input-bordered md:w-full sm:w-1/2 max-w-md"
/> />
{errors.name && errors.name.type === "required" && ( {errors.name && errors.name.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
<ErrorMessage message={translation.fieldRequired[language]} />
)}
<input <input
id="email" id="email"
placeholder={translation.email[language]} placeholder={translation.email[language]}
type="text" type="text"
{...register("email", { required: true, pattern: /^\S+@\S+$/i })} {...register("email", {required: true, pattern: /^\S+@\S+$/i})}
className="input input-bordered md:w-full sm:w-1/2 max-w-md" className="input input-bordered md:w-full sm:w-1/2 max-w-md"
/> />
{errors.email && errors.email.type === "required" && ( {errors.email && errors.email.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
<ErrorMessage message={translation.fieldRequired[language]} /> {errors.email && errors.email.type === "pattern" && <ErrorMessage message={translation.invalidEmail[language]} />}
)}
{errors.email && errors.email.type === "pattern" && (
<ErrorMessage message={translation.invalidEmail[language]} />
)}
<input <input
id="subject" id="subject"
placeholder={translation.subject[language]} placeholder={translation.subject[language]}
type="text" type="text"
{...register("subject", { required: true })} {...register("subject", {required: true})}
className="input input-bordered md:w-full sm:w-1/2 max-w-md" className="input input-bordered md:w-full sm:w-1/2 max-w-md"
/> />
{errors.subject && errors.subject.type === "required" && ( {errors.subject && errors.subject.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
<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">
)}
<select
id="type"
{...register("type", { required: true })}
className="select select-bordered md:w-full sm:w-1/2 max-w-md"
>
<option value="" disabled> <option value="" disabled>
{translation.selectType[language]} {translation.selectType[language]}
</option> </option>
@@ -152,34 +134,21 @@ export default function App({ language, page }: Props) {
</option> </option>
))} ))}
</select> </select>
{errors.type && errors.type.type === "required" && ( {errors.type && errors.type.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
<ErrorMessage message={translation.fieldRequired[language]} />
)}
<textarea <textarea
id="description" id="description"
placeholder={translation.description[language]} placeholder={translation.description[language]}
{...register("description", { required: true })} {...register("description", {required: true})}
className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md" className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
rows={5} rows={5}
/> />
{errors.description && errors.description.type === "required" && ( {errors.description && errors.description.type === "required" && (
<ErrorMessage message={translation.fieldRequired[language]} /> <ErrorMessage message={translation.fieldRequired[language]} />
)} )}
<input <input type="submit" className="btn" disabled={!isDirty || !isValid} value={translation.submit[language]} />
type="submit"
className="btn"
disabled={!isDirty || !isValid}
value={translation.submit[language]}
/>
</form> </form>
<div className="flex flex-col"> <div className="flex flex-col">
<Image <Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />
src="/person_laptop_focus.jpg"
alt="Contact Us"
width={500}
height={340}
className="rounded-xl"
/>
</div> </div>
</section> </section>
<Footer language={language} /> <Footer language={language} />