From 309bef05cdc9513a51911e14fbb9098dd26efe3d Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqi@rankrunners.dev>
Date: Fri, 25 Apr 2025 01:46:48 +0700
Subject: [PATCH 1/2] fix: form submission toast success and error

---
 package.json                         |  1 +
 src/app/(main)/layout.tsx            |  4 +-
 src/components/blocks/Form/index.tsx | 72 ++++++++++++++++------------
 yarn.lock                            | 13 +++++
 4 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index 2fc68ab..d6e273d 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.1",
     "react-select": "^5.10.1",
+    "react-toastify": "^11.0.5",
     "swiper": "^11.2.6"
   },
   "devDependencies": {
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index 0592a8a..057ca7e 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -6,6 +6,7 @@ import { getDefaultMetadata } from "@/utils/metadata";
 import Header from "@/components/layouts/Header";
 import Footer from "@/components/layouts/Footer";
 import Image from "next/image";
+import { ToastContainer } from "react-toastify";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -86,7 +87,8 @@ export default function RootLayout({
           <Footer />
         </div>
 
-        <div className="snackbars" id="form-output-global"></div>
+        <ToastContainer theme="dark" position="bottom-center" stacked />
+        {/* <div className="snackbars" id="form-output-global"></div> */}
         <InitialScript />
       </body>
     </html>
diff --git a/src/components/blocks/Form/index.tsx b/src/components/blocks/Form/index.tsx
index 74b946d..a6c1e74 100644
--- a/src/components/blocks/Form/index.tsx
+++ b/src/components/blocks/Form/index.tsx
@@ -10,6 +10,7 @@ import { Button } from "./Button";
 import RichText from "./RichText";
 import { buildInitialFormState } from "./buildInitialFormState";
 import { fields } from "./fields";
+import { toast } from "react-toastify";
 
 export type Value = unknown;
 
@@ -63,8 +64,8 @@ export const FormBlock: React.FC<
     formState: { errors },
     handleSubmit,
     register,
-    // getValues,
-    // setValue,
+    reset,
+    setValue,
   } = formMethods;
 
   const [isLoading, setIsLoading] = useState(false);
@@ -75,6 +76,7 @@ export const FormBlock: React.FC<
   const onSubmit = useCallback(
     (data: Data) => {
       let loadingTimerID: ReturnType<typeof setTimeout>;
+
       const submitForm = async () => {
         setError(undefined);
 
@@ -83,6 +85,8 @@ export const FormBlock: React.FC<
           value,
         }));
 
+        const toastId = toast.loading("Sending...");
+
         // delay loading indicator by 1s
         loadingTimerID = setTimeout(() => {
           setIsLoading(true);
@@ -107,6 +111,8 @@ export const FormBlock: React.FC<
           if (req.status >= 400) {
             setIsLoading(false);
 
+            toast.error(res.errors?.[0]?.message || "Internal Server Error");
+            toast.dismiss(toastId);
             setError({
               message: res.errors?.[0]?.message || "Internal Server Error",
               status: res.status,
@@ -115,8 +121,11 @@ export const FormBlock: React.FC<
             return;
           }
 
+          toast.success(<RichText content={confirmationMessage} />);
+          toast.dismiss(toastId);
           setIsLoading(false);
           setHasSubmitted(true);
+          reset();
 
           if (confirmationType === "redirect" && redirect) {
             const { url } = redirect;
@@ -127,9 +136,12 @@ export const FormBlock: React.FC<
           }
         } catch (err) {
           console.warn(err);
+
+          toast.error("Something went wrong");
+          toast.dismiss(toastId);
           setIsLoading(false);
           setError({
-            message: "Something went wrong.",
+            message: "Something went wrong",
           });
         }
       };
@@ -144,36 +156,34 @@ export const FormBlock: React.FC<
       {!!formFromProps?.title && <h2>{formFromProps.title}</h2>}
       <div className="mt-4">
         {!!enableIntro && introContent && !hasSubmitted && <RichText content={introContent} />}
-        {!isLoading && hasSubmitted && confirmationType === "message" && <RichText content={confirmationMessage} />}
         {isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
         {error && <div className="text-red-500">{`${error.status || "500"}: ${error.message || ""}`}</div>}
-        {!hasSubmitted && (
-          <form id={formID} onSubmit={handleSubmit(onSubmit)} className="rd-form">
-            <div className="row space-y-4">
-              {formFromProps &&
-                formFromProps.fields &&
-                formFromProps.fields.map((field, index) => {
-                  const Field: React.FC<any> = fields?.[field.blockType];
-                  if (Field) {
-                    return (
-                      <React.Fragment key={index}>
-                        <Field
-                          form={formFromProps}
-                          {...field}
-                          {...formMethods}
-                          control={control}
-                          errors={errors}
-                          register={register}
-                        />
-                      </React.Fragment>
-                    );
-                  }
-                  return null;
-                })}
-            </div>
-            <Button appearance="primary" el="button" form={formID} label={submitButtonLabel} isLoading={isLoading} />
-          </form>
-        )}
+
+        <form id={formID} onSubmit={handleSubmit(onSubmit)} className="rd-form">
+          <div className="row space-y-4">
+            {formFromProps &&
+              formFromProps.fields &&
+              formFromProps.fields.map((field, index) => {
+                const Field: React.FC<any> = fields?.[field.blockType];
+                if (Field) {
+                  return (
+                    <React.Fragment key={index}>
+                      <Field
+                        form={formFromProps}
+                        {...field}
+                        {...formMethods}
+                        control={control}
+                        errors={errors}
+                        register={register}
+                      />
+                    </React.Fragment>
+                  );
+                }
+                return null;
+              })}
+          </div>
+          <Button appearance="primary" el="button" form={formID} label={submitButtonLabel} isLoading={isLoading} />
+        </form>
       </div>
     </div>
   );
diff --git a/yarn.lock b/yarn.lock
index d38c651..96966cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5059,6 +5059,7 @@ __metadata:
     react-dom: "npm:^19.0.0"
     react-hook-form: "npm:^7.56.1"
     react-select: "npm:^5.10.1"
+    react-toastify: "npm:^11.0.5"
     swiper: "npm:^11.2.6"
     tailwindcss: "npm:^4"
     typescript: "npm:^5"
@@ -8863,6 +8864,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-toastify@npm:^11.0.5":
+  version: 11.0.5
+  resolution: "react-toastify@npm:11.0.5"
+  dependencies:
+    clsx: "npm:^2.1.1"
+  peerDependencies:
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
+  checksum: 10c0/50f5b81323ebb1957b2efd0963fac24aa1407155d16ab756ffd6d0f42f8af17e796b3958a9fce13e9d1b945d6c3a5a9ebf13529478474d8a2af4bf1dd0db67d2
+  languageName: node
+  linkType: hard
+
 "react-transition-group@npm:4.4.5, react-transition-group@npm:^4.3.0":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"

From 0344b6a6fc98fc5e4c42548edbc22e42d8254a72 Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqi@rankrunners.dev>
Date: Fri, 25 Apr 2025 01:56:08 +0700
Subject: [PATCH 2/2] fix: form unused variable

---
 src/components/blocks/Form/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/blocks/Form/index.tsx b/src/components/blocks/Form/index.tsx
index a6c1e74..90d4265 100644
--- a/src/components/blocks/Form/index.tsx
+++ b/src/components/blocks/Form/index.tsx
@@ -65,7 +65,6 @@ export const FormBlock: React.FC<
     handleSubmit,
     register,
     reset,
-    setValue,
   } = formMethods;
 
   const [isLoading, setIsLoading] = useState(false);