From 12f9285058e4dd4b4483076a90ef43da1877e441 Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Tue, 13 Feb 2024 15:17:24 +0000
Subject: [PATCH] Added toast on form submit

---
 package.json                   |   1 +
 src/app/layout.tsx             |   1 +
 src/templates/ContactUs.tsx    | 298 +++++++++++++++++++--------------
 src/translation/contactus.json |   8 +
 yarn.lock                      |  12 ++
 5 files changed, 191 insertions(+), 129 deletions(-)

diff --git a/package.json b/package.json
index e548f69..259d65e 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "react-hook-form": "^7.50.1",
     "react-icons": "^4.11.0",
     "react-string-replace": "^1.1.1",
+    "react-toastify": "^10.0.4",
     "sharp": "^0.32.6"
   },
   "devDependencies": {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e3b998c..bf937a7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @next/next/no-page-custom-font */
 import clsx from "clsx";
 import "./globals.css";
+import "react-toastify/dist/ReactToastify.css";
 import type {Metadata} from "next";
 import {Inter} from "next/font/google";
 import {Almarai} from "next/font/google";
diff --git a/src/templates/ContactUs.tsx b/src/templates/ContactUs.tsx
index 337dcf7..d0eac73 100644
--- a/src/templates/ContactUs.tsx
+++ b/src/templates/ContactUs.tsx
@@ -1,149 +1,189 @@
 "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";
 
 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(`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.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
+        if (data.ok) {
+          toast.success(translation.ticketSuccess[language]);
+          return;
+        }
+      }
+    } catch (err) {}
 
-	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>
-	);
+    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>
+    </>
+  );
 }
diff --git a/src/translation/contactus.json b/src/translation/contactus.json
index 9b3cba8..4c00324 100644
--- a/src/translation/contactus.json
+++ b/src/translation/contactus.json
@@ -46,5 +46,13 @@
     "invalidEmail": {
         "en": "Invalid email",
         "ar": "بريد إلكتروني خطأ"
+    },
+    "ticketSuccess": {
+        "en": "Ticket submitted successfully!",
+        "ar": ""
+    },
+    "ticketError": {
+        "en": "Failed to submit the ticket!",
+        "ar": ""
     }
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 0a16734..acf617b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -623,6 +623,11 @@ clsx@^2.0.0:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
+clsx@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -2273,6 +2278,13 @@ react-string-replace@^1.1.1:
   resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-1.1.1.tgz#8413a598c60e397fe77df3464f2889f00ba25989"
   integrity sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==
 
+react-toastify@^10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.4.tgz#6ecdbbf923a07fc45850e69b0566efc7bf733283"
+  integrity sha512-etR3RgueY8pe88SA67wLm8rJmL1h+CLqUGHuAoNsseW35oTGJEri6eBTyaXnFKNQ80v/eO10hBYLgz036XRGgA==
+  dependencies:
+    clsx "^2.1.0"
+
 react@^18:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"