Switch to Sonner for toast notifications

cypress/pageobject/Facility/FacilityManage.ts

@@ -51,10 +51,13 @@ class FacilityManage {
     text: string | RegExp,
     isRegex = false,
   ) {
+    // Selector for the Sonner toast content
+    const toastSelector = "li[data-sonner-toast] div[data-title]";
+
     if (isRegex) {
-      cy.get(".pnotify-text").should("be.visible").contains(text);
+      cy.get(toastSelector).should("be.visible").contains(text);
     } else {
-      cy.get(".pnotify-text").should("be.visible").and("contain.text", text);
+      cy.get(toastSelector).should("be.visible").and("contain.text", text);
     }
   }
 

cypress/support/commands.ts

@@ -113,8 +113,13 @@ Cypress.Commands.add(
   },
 );
 
+//check sonner toast notification
 Cypress.Commands.add("verifyNotification", (text) => {
-  return cy.get(".pnotify-container").should("exist").contains(text);
+  return cy
+    .get("li[data-sonner-toast] div[data-title]")
+    .should("exist")
+    .and("be.visible")
+    .contains(text);
 });
 
 Cypress.Commands.add("clearAllFilters", () => {
@@ -221,7 +226,7 @@ Cypress.Commands.add("preventPrint", () => {
 });
 
 Cypress.Commands.add("closeNotification", () => {
-  cy.get(".pnotify")
+  cy.get("li[data-sonner-toast] div[data-title]")
     .should("exist")
     .each(($div) => {
       cy.wrap($div).click();

package.json

@@ -56,9 +56,7 @@
     "@googlemaps/typescript-guards": "^2.0.3",
     "@headlessui/react": "^2.2.0",
     "@hello-pangea/dnd": "^17.0.0",
-    "@pnotify/core": "^5.2.0",
-    "@pnotify/mobile": "^5.2.0",
-    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.0",
@@ -88,6 +86,7 @@
     "i18next": "^23.16.4",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
+    "next-themes": "^0.4.4",
     "postcss-loader": "^8.1.1",
     "qrcode.react": "^4.1.0",
     "raviger": "^4.1.2",
@@ -99,6 +98,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-pdf": "^9.1.1",
     "react-webcam": "^7.2.0",
+    "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "use-keyboard-shortcut": "^1.1.6",

src/App.tsx

@@ -7,7 +7,7 @@ import {
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Suspense } from "react";
 
-import { Toaster } from "@/components/ui/toaster";
+import { Toaster } from "@/components/ui/sonner";
 
 import Loading from "@/components/Common/Loading";
 
@@ -54,7 +54,14 @@ const App = () => {
               <Integrations.Sentry disabled={!import.meta.env.PROD} />
               <Integrations.Plausible />
             </HistoryAPIProvider>
-            <Toaster />
+            <Toaster
+              position="top-right"
+              theme="light"
+              richColors
+              // Voluntarily passing empty object as a workaround for `richColors`
+              // to work. Refer: https://github.com/shadcn-ui/ui/issues/2234.
+              toastOptions={{}}
+            />
           </PluginEngine>
         </PubSubProvider>
       </Suspense>

src/CAREUI/icons/Index.tsx

@@ -1,29 +1,28 @@
 /* eslint-disable i18next/no-literal-string */
 import { t } from "i18next";
 import React, { useState } from "react";
+import { toast } from "sonner";
 
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 import iconPaths from "@/CAREUI/icons/UniconPaths.json";
 
 import PageTitle from "@/components/Common/PageTitle";
 
-import { useToast } from "@/hooks/useToast";
-
 const IconIndex: React.FC = () => {
-  const { toast } = useToast();
   const [searchTerm, setSearchTerm] = useState("");
 
   const filteredIcons = Object.keys(iconPaths).filter((iconName) =>
     iconName.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-
-    toast({
-      description: "Icon copied to clipboard successfully",
-      variant: "success",
-    });
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(t("icon.copy.success"));
+    } catch (error) {
+      toast.error(t("icon.copy.error"));
+      console.error("Failed to copy to clipboard:", error);
+    }
   };
 
   return (

src/Utils/Notifications.js

@@ -1,38 +1,4 @@
-import { Stack, alert, defaultModules } from "@pnotify/core";
-import * as PNotifyMobile from "@pnotify/mobile";
-
-defaultModules.set(PNotifyMobile, {});
-
-const notifyStack = new Stack({
-  dir1: "down",
-  dir2: "left",
-  firstpos1: 25,
-  firstpos2: 25,
-  modal: false,
-  maxOpen: 3,
-  maxStrategy: "close",
-  maxClosureCausesWait: false,
-  push: "top",
-});
-
-const notify = (text, type) => {
-  const notification = alert({
-    type: type,
-    text: text,
-    styling: "brighttheme",
-    mode: "light",
-    sticker: false,
-    buttons: {
-      closer: false,
-      sticker: false,
-    },
-    stack: notifyStack,
-    delay: 3000,
-  });
-  notification.refs.elem.addEventListener("click", () => {
-    notification.close();
-  });
-};
+import { toast } from "sonner";
 
 /**
  * Formats input string to a more human readable format
@@ -74,27 +40,29 @@ const notifyError = (error) => {
       errorMsg += "\n";
     }
   }
-  notify(errorMsg, "error");
+  toast.error(errorMsg, { duration: 5000 });
 };
 
-/** Close all Notifications **/
+/** Close all Notifications (Sonner doesn't need this but can be kept for custom implementations) **/
 export const closeAllNotifications = () => {
-  notifyStack.close();
+  // Sonner doesn't require a close method, but you can manage this with custom logic if needed
+  // Example: toast.dismiss() could be used to close all toasts if necessary.
+  toast.dismiss();
 };
 
 /** Success message handler */
 export const Success = ({ msg }) => {
-  notify(msg, "success");
+  toast.success(msg, { duration: 3000 });
 };
 
 /** Error message handler */
 export const Error = ({ msg }) => {
-  notify(msg, "error");
+  toast.error(msg, { duration: 5000 });
 };
 
 /** Warning message handler */
 export const Warn = ({ msg }) => {
-  notify(msg, "notice");
+  toast.info(msg, { duration: 3000 });
 };
 
 /** 400 Bad Request handler */

src/components/Patient/DailyRounds.tsx

@@ -1,4 +1,3 @@
-import { error } from "@pnotify/core";
 import dayjs from "dayjs";
 import { navigate } from "raviger";
 import { useCallback, useEffect, useState } from "react";
@@ -339,7 +338,9 @@ export const DailyRounds = (props: any) => {
         );
 
         if (investigationError) {
-          Notification.Error({ msg: error });
+          Notification.Error({
+            msg: investigationError.message || investigationError,
+          });
           return;
         }
       }

src/components/ui/sonner.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-white group-[.toaster]:text-gray-950 group-[.toaster]:border-gray-200 group-[.toaster]:shadow-lg dark:group-[.toaster]:bg-gray-950 dark:group-[.toaster]:text-gray-50 dark:group-[.toaster]:border-gray-800",
+          description:
+            "group-[.toast]:text-gray-500 dark:group-[.toast]:text-gray-400",
+          actionButton:
+            "group-[.toast]:bg-gray-900 group-[.toast]:text-gray-50 dark:group-[.toast]:bg-gray-50 dark:group-[.toast]:text-gray-900",
+          cancelButton:
+            "group-[.toast]:bg-gray-100 group-[.toast]:text-gray-500 dark:group-[.toast]:bg-gray-800 dark:group-[.toast]:text-gray-400",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };