From 3e6eae515100f62f97292ade44097860fc3d8f13 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Fri, 12 Sep 2025 22:24:52 +0700
Subject: [PATCH] :sparkles: (feat) add toast element

Implement the toast element belonging to heroUI into the project and perform testing by adding the toast registry into
the provider, then running it as an error handler during authentication.
---
 features/oauth-callback/ui/LoadingProcess.tsx | 18 +++++++++++++++++-
 providers/HeroUIWrapper.tsx                   |  3 ++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/features/oauth-callback/ui/LoadingProcess.tsx b/features/oauth-callback/ui/LoadingProcess.tsx
index 29e0982..e5a7a7c 100644
--- a/features/oauth-callback/ui/LoadingProcess.tsx
+++ b/features/oauth-callback/ui/LoadingProcess.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import React from "react";
-import { CircularProgress } from "@heroui/react";
+import { addToast, Button, CircularProgress, Link } from "@heroui/react";
 import { SendCallbackToServer } from "../lib/sendCallbackToServer";
 import { useParams } from "next/navigation";
 import { useRunOnce } from "@/shared/hooks/useRunOnce";
+import { routes } from "@/shared/config/routes";
 
 const LoadingProcess = () => {
   // Access the URL parameters
@@ -20,6 +21,21 @@ const LoadingProcess = () => {
       window.close();
     } catch (error) {
       console.log(error);
+      addToast({
+        title: "Oops, lost connection!",
+        description: "Check your internet and try again",
+        color: "danger",
+        timeout: 0,
+        endContent: (
+          <Button
+            size="sm"
+            variant="flat"
+            onPress={() => (window.location.href = routes.login)}
+          >
+            Reload
+          </Button>
+        ),
+      });
     }
   });
   return (
diff --git a/providers/HeroUIWrapper.tsx b/providers/HeroUIWrapper.tsx
index b771966..9eba17e 100644
--- a/providers/HeroUIWrapper.tsx
+++ b/providers/HeroUIWrapper.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { HeroUIProvider } from "@heroui/react";
+import { HeroUIProvider, ToastProvider } from "@heroui/react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { useRouter } from "next/navigation";
 
@@ -17,6 +17,7 @@ const HeroUIWrapper = ({
 
   return (
     <HeroUIProvider navigate={router.push}>
+      <ToastProvider />
       {mounted ? (
         <NextThemesProvider attribute={"class"} defaultTheme="dark">
           <main>{children}</main>