Merged in contact-form-toast (pull request #7)

Added toast on form submit

Approved-by: Tiago Ribeiro

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": {

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";

src/templates/ContactUs.tsx

@@ -1,11 +1,12 @@
 "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;
@@ -20,12 +21,12 @@ interface Props {
   page: string;
 }
 
-const ErrorMessage = ({message}: {message: string}) => (
+const ErrorMessage = ({ message }: { message: string }) => (
   <div className="w-full">
     <span className="text-mti-red">{message}</span>
   </div>
 );
-export default function App({language, page}: Props) {
+export default function App({ language, page }: Props) {
   const selectOptions = [
     {
       label: translation.feedback[language],
@@ -41,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: {
       name: "",
       email: "",
@@ -51,8 +52,7 @@ export default function App({language, page}: Props) {
     },
   });
 
-	const {errors, isDirty, isValid} = formState;
+  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`, {
@@ -77,14 +77,23 @@ export default function App({language, page}: Props) {
       if (response.status === 200) {
         const data = await response.json();
         // Pass data to the page via props
-				console.log(data);
+        if (data.ok) {
+          toast.success(translation.ticketSuccess[language]);
           return;
         }
+      }
     } catch (err) {}
+
+    toast.error(translation.ticketError[language]);
   };
 
   return (
-		<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
+    <>
+      <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">
@@ -92,33 +101,48 @@ export default function App({language, page}: Props) {
           </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">
+          <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})}
+              {...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]} />}
+            {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})}
+              {...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 === "required" && (
-					{errors.email && errors.email.type === "pattern" && <ErrorMessage message={translation.invalidEmail[language]} />}
+              <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})}
+              {...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]} />}
+            {errors.subject && errors.subject.type === "required" && (
-					<select id="type" {...register("type", {required: true})} className="select select-bordered md:w-full sm:w-1/2 max-w-md">
+              <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>
@@ -128,22 +152,38 @@ export default function App({language, page}: Props) {
                 </option>
               ))}
             </select>
-					{errors.type && errors.type.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
+            {errors.type && errors.type.type === "required" && (
+              <ErrorMessage message={translation.fieldRequired[language]} />
+            )}
             <textarea
               id="description"
               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"
               rows={5}
             />
-					{errors.description && errors.description.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
+            {errors.description && errors.description.type === "required" && (
-					<input type="submit" className="btn" disabled={!isDirty || !isValid} value={translation.submit[language]} />
+              <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" />
+            <Image
+              src="/person_laptop_focus.jpg"
+              alt="Contact Us"
+              width={500}
+              height={340}
+              className="rounded-xl"
+            />
           </div>
         </section>
         <Footer language={language} />
       </main>
+    </>
   );
 }

src/translation/contactus.json

@@ -1,7 +1,7 @@
 {
     "title": {
         "en": "Submit a ticket",
-        "ar": "تقديم ملاحظة / مشكلة "
+        "ar": "تحدث إلينا "
     },
     "name": {
         "en": "Name",
@@ -46,5 +46,13 @@
     "invalidEmail": {
         "en": "Invalid email",
         "ar": "بريد إلكتروني خطأ"
+    },
+    "ticketSuccess": {
+        "en": "Ticket submitted successfully!",
+        "ar": "تم إرسال ملاحظتكم بنجاح"
+    },
+    "ticketError": {
+        "en": "Failed to submit the ticket!",
+        "ar": "فشل في إرسال الملاحظات"
     }
 }

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"