From c31a74b835ad2d87e65082601bdf76891dc39dd1 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.err@outlook.com>
Date: Tue, 13 Feb 2024 00:50:38 +0000
Subject: [PATCH] Hardcoded the platform URL due to problems with using ENV
 variables when deploying

---
 src/templates/ContactUs.tsx | 291 ++++++++++++++++--------------------
 1 file changed, 129 insertions(+), 162 deletions(-)

diff --git a/src/templates/ContactUs.tsx b/src/templates/ContactUs.tsx
index af75996..337dcf7 100644
--- a/src/templates/ContactUs.tsx
+++ b/src/templates/ContactUs.tsx
@@ -1,6 +1,6 @@
 "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";
@@ -8,175 +8,142 @@ import translation from "@/translation/contactus.json";
 import Image from "next/image";
 
 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;
-  console.log("formState", formState.isSubmitSuccessful);
-  const onSubmit: SubmitHandler<FormValues> = async (data) => {
-    try {
-      const response = await fetch(
-        `${process.env.NEXT_PUBLIC_APP_URL}/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;
+	console.log("formState", formState.isSubmitSuccessful);
+	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,
+				}),
+			});
 
-      if (response.status === 200) {
-        const data = await response.json();
-        // Pass data to the page via props
-        console.log(data);
-        return;
-      }
-    } catch (err) {}
-  };
+			if (response.status === 200) {
+				const data = await response.json();
+				// Pass data to the page via props
+				console.log(data);
+				return;
+			}
+		} catch (err) {}
+	};
 
-  return (
-    <main className="text-mti-black flex h-screen w-full flex-col bg-white">
-      <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 (
+		<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>
+	);
 }