From e08fba1b76a910e4f920949c8a082f10e7ce5440 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 7 Jul 2025 15:34:45 -0700
Subject: [PATCH] add delete confirmation dialog to notificiaton page

---
 .../src/Pages/Notifications/create/index.jsx  | 21 +++++++++++++------
 client/src/locales/en.json                    |  5 ++++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/client/src/Pages/Notifications/create/index.jsx b/client/src/Pages/Notifications/create/index.jsx
index 9ef958abb..de5ee39b9 100644
--- a/client/src/Pages/Notifications/create/index.jsx
+++ b/client/src/Pages/Notifications/create/index.jsx
@@ -7,6 +7,7 @@ import ConfigBox from "../../../Components/ConfigBox";
 import Box from "@mui/material/Box";
 import Select from "../../../Components/Inputs/Select";
 import TextInput from "../../../Components/Inputs/TextInput";
+import Dialog from "../../../Components/Dialog";
 
 // Utils
 import { useState } from "react";
@@ -60,10 +61,9 @@ const CreateNotifications = () => {
 	const [errors, setErrors] = useState({});
 	const { t } = useTranslation();
 
-	const [notificationIsLoading] = useGetNotificationById(
-		notificationId,
-		setNotification
-	);
+	const [notificationIsLoading] = useGetNotificationById(notificationId, setNotification);
+
+	const [isOpen, setIsOpen] = useState(false);
 
 	// handlers
 	const onSubmit = (e) => {
@@ -220,14 +220,14 @@ const CreateNotifications = () => {
 						color="secondary"
 						onClick={onTestNotification}
 					>
-						{t("testNotification")}
+						{t("createNotifications.testNotification")}
 					</Button>
 					{notificationId && (
 						<Button
 							loading={isDeleting}
 							variant="contained"
 							color="error"
-							onClick={onDelete}
+							onClick={() => setIsOpen(true)}
 						>
 							{t("delete")}
 						</Button>
@@ -242,6 +242,15 @@ const CreateNotifications = () => {
 					</Button>
 				</Stack>
 			</Stack>
+			<Dialog
+				open={isOpen}
+				onClose={() => setIsOpen(false)}
+				onCancel={() => setIsOpen(false)}
+				title={t("createNotifications.dialogDeleteTitle")}
+				confirmationButtonLabel={t("createNotifications.dialogDeleteConfirm")}
+				onConfirm={onDelete}
+				isLoading={isDeleting}
+			/>
 		</Stack>
 	);
 };
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index a5d0d132a..ddc07f166 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -284,7 +284,10 @@
 			"title": "Webhook",
 			"webhookLabel": "Webhook URL",
 			"webhookPlaceholder": "https://your-server.com/webhook"
-		}
+		},
+		"testNotification": "Test notification",
+		"dialogDeleteTitle": "Are you sure you want to delete this notification?",
+		"dialogDeleteConfirm": "Delete"
 	},
 	"createYour": "Create your",
 	"date&Time": "Date & Time",