From 902d3adf559d84282fe86f26b2d0ef1a70a92aac Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Tue, 27 Feb 2024 14:22:59 +0000 Subject: [PATCH] Updated the code to send the full page link --- src/app/contacts/[country]/page.tsx | 105 +++++----- src/templates/ContactUs.tsx | 305 +++++++++++++--------------- 2 files changed, 188 insertions(+), 222 deletions(-) diff --git a/src/app/contacts/[country]/page.tsx b/src/app/contacts/[country]/page.tsx index cc44cde..3a8dd53 100644 --- a/src/app/contacts/[country]/page.tsx +++ b/src/app/contacts/[country]/page.tsx @@ -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 ( -
- +export default async function Page({params: {country}, searchParams: {page = "/contacts", language = "en"}}: PageProps) { + const contact = (await getCountryManagers(country)) as Contact; + return ( +
+ -
-
- {`${contact.label} Contacts`} -
-
+
+
+ {`${contact.label} Contacts`} +
+
-
- {contact.entries.map((entry) => ( -
-

- Name: - {entry.name} -

-

- Number: - {entry.number} -

-

- Email: - {entry.email} -

-
- ))} -
-
-
- ); +
+ {contact.entries.map((entry) => ( +
+

+ Name: + {entry.name} +

+

+ Number: + {entry.number} +

+

+ Email: + {entry.email} +

+
+ ))} +
+
+
+ ); } diff --git a/src/templates/ContactUs.tsx b/src/templates/ContactUs.tsx index d0eac73..d958083 100644 --- a/src/templates/ContactUs.tsx +++ b/src/templates/ContactUs.tsx @@ -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 }) => ( -
- {message} -
+const ErrorMessage = ({message}: {message: string}) => ( +
+ {message} +
); -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({ - defaultValues: { - name: "", - email: "", - description: "", - subject: "", - type: "", - }, - }); + const {register, control, handleSubmit, formState} = useForm({ + defaultValues: { + name: "", + email: "", + description: "", + subject: "", + type: "", + }, + }); - const { errors, isDirty, isValid } = formState; - const onSubmit: SubmitHandler = 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 = 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 ( - <> - -
- -
-
- {translation.title[language]} -
-
-
-
- - {errors.name && errors.name.type === "required" && ( - - )} - - {errors.email && errors.email.type === "required" && ( - - )} - {errors.email && errors.email.type === "pattern" && ( - - )} - - {errors.subject && errors.subject.type === "required" && ( - - )} - - {errors.type && errors.type.type === "required" && ( - - )} -