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

Added toast on form submit Approved-by: Tiago Ribeiro
2024-02-14 00:06:01 +00:00
parent 339f86e112 07b216c282
commit 86f7dd4a89
5 changed files with 192 additions and 130 deletions
--- 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": {
--- 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";
--- a/src/templates/ContactUs.tsx
+++ b/src/templates/ContactUs.tsx
@@ -6,6 +6,7 @@ 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;
@@ -52,7 +53,6 @@ export default function App({language, page}: Props) {
  });

  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,7 +101,10 @@ 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"
@@ -100,7 +112,9 @@ export default function App({language, page}: Props) {
              {...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]}
@@ -108,8 +122,12 @@ export default function App({language, page}: Props) {
              {...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]} />}
+            {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]}
@@ -117,8 +135,14 @@ export default function App({language, page}: Props) {
              {...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">
+            {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>
@@ -128,7 +152,9 @@ 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]}
@@ -136,14 +162,28 @@ export default function App({language, page}: Props) {
              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]} />
+            {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" />
+            <Image
+              src="/person_laptop_focus.jpg"
+              alt="Contact Us"
+              width={500}
+              height={340}
+              className="rounded-xl"
+            />
          </div>
        </section>
        <Footer language={language} />
      </main>
+    </>
  );
 }
--- a/src/translation/contactus.json
+++ b/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": "فشل في إرسال الملاحظات"
    }
 }
--- 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"