From b44d1429202f0539c88bc262e0d641a508b9ad7a Mon Sep 17 00:00:00 2001
From: Skorpios <cosmicray23@hotmail.com>
Date: Sat, 1 Mar 2025 22:36:07 -0800
Subject: [PATCH] Implemented notification modal.

---
 src/Pages/Uptime/Create/index.jsx             |  15 +-
 .../NotificationIntegrationModal.jsx          | 413 ++++++++++++++++++
 2 files changed, 427 insertions(+), 1 deletion(-)
 create mode 100644 src/Pages/Uptime/Details/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx

diff --git a/src/Pages/Uptime/Create/index.jsx b/src/Pages/Uptime/Create/index.jsx
index edad33d20..b9bb7eb8f 100644
--- a/src/Pages/Uptime/Create/index.jsx
+++ b/src/Pages/Uptime/Create/index.jsx
@@ -23,6 +23,7 @@ import Radio from "../../../Components/Inputs/Radio";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Select from "../../../Components/Inputs/Select";
 import ConfigBox from "../../../Components/ConfigBox";
+import NotificationIntegrationModal from "../Details/Components/NotificationIntegrationModal/NotificationIntegrationModal";
 const CreateMonitor = () => {
 	const MS_PER_MINUTE = 60000;
 	const SELECT_VALUES = [
@@ -80,6 +81,11 @@ const CreateMonitor = () => {
 	];
 
 	// State
+	const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false);
+
+	const handleOpenNotificationModal = () => {
+  		setIsNotificationModalOpen(true);
+		};
 	const [errors, setErrors] = useState({});
 	const [https, setHttps] = useState(true);
 	const [monitor, setMonitor] = useState({
@@ -411,7 +417,7 @@ const CreateMonitor = () => {
 					<Button
 						variant="contained"
 						color="accent"
-						onClick={handleAddNotification}
+						onClick={handleOpenNotificationModal}
 					>
 						Notification Integration
 					</Button>
@@ -512,6 +518,13 @@ const CreateMonitor = () => {
 					</Button>
 				</Stack>
 			</Stack>
+
+			<NotificationIntegrationModal
+      		open={isNotificationModalOpen}
+			onClose={() => setIsNotificationModalOpen(false)}
+			monitor={monitor}
+			setMonitor={setMonitor}
+    		/>
 		</Box>
 	);
 };
diff --git a/src/Pages/Uptime/Details/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx b/src/Pages/Uptime/Details/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
new file mode 100644
index 000000000..eca6a78d0
--- /dev/null
+++ b/src/Pages/Uptime/Details/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
@@ -0,0 +1,413 @@
+import { useState } from "react";
+import { 
+  Dialog, 
+  DialogTitle, 
+  DialogContent, 
+  DialogActions,
+  Button, 
+  Stack, 
+  Typography, 
+  Box,
+  Tabs,
+  Tab,
+  Divider
+} from "@mui/material";
+import { useTheme } from "@emotion/react";
+import TextInput from "../../../../../../src/Components/Inputs/TextInput";
+import Checkbox from "../../../../../../src/Components/Inputs/Checkbox";
+
+// Tab Panel component
+function TabPanel({ children, value, index, ...other }) {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`notification-tabpanel-${index}`}
+      aria-labelledby={`notification-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ pt: 3 }}>
+          {children}
+        </Box>
+      )}
+    </div>
+  );
+}
+
+const NotificationIntegrationModal = ({ 
+  open, 
+  onClose, 
+  monitor,
+  setMonitor
+}) => {
+  const theme = useTheme();
+  const [tabValue, setTabValue] = useState(0);
+  const [integrations, setIntegrations] = useState({
+    slack: monitor?.notifications?.some(n => n.type === "slack") || false,
+    slackWebhook: monitor?.notifications?.find(n => n.type === "slack")?.webhook || "",
+    discord: monitor?.notifications?.some(n => n.type === "discord") || false,
+    discordWebhook: monitor?.notifications?.find(n => n.type === "discord")?.webhook || "",
+    telegram: monitor?.notifications?.some(n => n.type === "telegram") || false,
+    telegramToken: monitor?.notifications?.find(n => n.type === "telegram")?.token || "",
+    telegramChatId: monitor?.notifications?.find(n => n.type === "telegram")?.chatId || "",
+    webhook: monitor?.notifications?.some(n => n.type === "webhook") || false,
+    webhookUrl: monitor?.notifications?.find(n => n.type === "webhook")?.url || "",
+  });
+  
+  const testNotificationButtonStyle = {
+    textDecoration: 'underline',
+    color: '#344054',
+    textTransform: 'none',
+    padding: '0 !important',
+    margin: 0,
+    fontSize: '0.9rem',
+    fontWeight: 'normal',
+    backgroundColor: 'transparent !important',
+    '&:hover': {
+      backgroundColor: 'transparent !important',
+      textDecoration: 'underline'
+    },
+    '&.Mui-disabled': {
+      backgroundColor: 'transparent !important'
+    },
+    minWidth: '0 !important',
+    boxShadow: 'none !important',
+    border: 'none !important'
+  };
+
+  const handleChangeTab = (event, newValue) => {
+    setTabValue(newValue);
+  };
+
+  const handleIntegrationChange = (type, checked) => {
+    setIntegrations(prev => ({
+      ...prev,
+      [type]: checked
+    }));
+  };
+
+  const handleInputChange = (type, value) => {
+    setIntegrations(prev => ({
+      ...prev,
+      [type]: value
+    }));
+  };
+
+  const handleTestNotification = (type) => {
+    console.log(`Testing ${type} notification`);
+    // Here you would implement the actual test notification functionality
+  };
+
+  const handleSave = () => {
+    // Create notifications array based on selected integrations
+    const notifications = [...(monitor?.notifications || [])];
+    
+    // Filter out existing integrations that will be updated
+    const existingTypes = ["slack", "discord", "telegram", "webhook"];
+    const filteredNotifications = notifications.filter(
+      notification => !existingTypes.includes(notification.type)
+    );
+
+    // Add selected integrations
+    if (integrations.slack) {
+      filteredNotifications.push({
+        type: "slack",
+        webhook: integrations.slackWebhook
+      });
+    }
+    
+    if (integrations.discord) {
+      filteredNotifications.push({
+        type: "discord",
+        webhook: integrations.discordWebhook
+      });
+    }
+    
+    if (integrations.telegram) {
+      filteredNotifications.push({
+        type: "telegram",
+        token: integrations.telegramToken,
+        chatId: integrations.telegramChatId
+      });
+    }
+    
+    if (integrations.webhook) {
+      filteredNotifications.push({
+        type: "webhook",
+        url: integrations.webhookUrl
+      });
+    }
+
+    // Update monitor with new notifications
+    setMonitor(prev => ({
+      ...prev,
+      notifications: filteredNotifications
+    }));
+    
+    onClose();
+  };
+
+  return (
+    <Dialog 
+      open={open} 
+      onClose={onClose}
+      fullWidth
+      maxWidth="md"
+      sx={{
+        '& .MuiDialog-paper': {
+          backgroundColor: theme.palette.primary.main,
+          color: '#344054'
+        }
+      }}
+    >
+   
+      <DialogContent>
+        <Box sx={{ display: 'flex', height: '500px' }}>
+          {/* Left sidebar with tabs */}
+          <Box sx={{ 
+            borderRight: 1, 
+            borderColor: 'divider', 
+            minWidth: '200px',
+            pr: 20
+          }}>
+            <Typography variant="subtitle1" sx={{ my: 2, fontWeight: 'bold', fontSize: '0.9rem', color: '#344054'}}>
+            Add or edit notifications
+            </Typography>
+            
+            <Tabs
+              orientation="vertical"
+              variant="scrollable"
+              value={tabValue}
+              onChange={handleChangeTab}
+              aria-label="Notification tabs"
+              sx={{ 
+                backgroundColor: theme.palette.primary.main,
+                '& .MuiTab-root': { 
+                  alignItems: 'flex-start',
+                  px: 2,
+                  fontSize: '0.9rem',
+                  color: theme.palette.primary.contrastText,
+                  backgroundColor: theme.palette.primary.main,
+                  border: 'none',
+                  borderBottom: 'none',
+                  borderRight: 'none',
+                  '&.Mui-selected': {
+                    color: theme.palette.primary.contrastText,
+                    backgroundColor: theme.palette.primary.main,
+                    opacity: 1,
+                    border: 'none',
+                    borderBottom: 'none',
+                    borderRight: 'none'
+                  },
+                  '&:hover': {
+                    backgroundColor: theme.palette.tertiary.main,
+                    border: 'none'
+                  }
+                },
+                '& .MuiTabs-indicator': {
+                  backgroundColor: 'transparent'
+                }
+              }}
+            >
+              <Tab label="Slack" />
+              <Tab label="Discord" />
+              <Tab label="Telegram" />
+              <Tab label="Webhooks" />
+            </Tabs>
+          </Box>
+
+          {/* Right side content */}
+          <Box sx={{ flex: 1, pl: 15 }}>
+            {/* Slack Tab */}
+            <TabPanel value={tabValue} index={0}>
+              <Typography variant="subtitle1" component="h4" sx={{ fontWeight: 'bold' }}>Slack</Typography>
+              <Typography sx={{ mt: 1, mb: 3 }}>
+                To enable Slack notifications, create a Slack app and enable incoming webhooks. After that, simply provide the webhook URL here.
+              </Typography>
+              
+              <Box sx={{ pl: 3 }}> 
+              <Checkbox
+                id="enable-slack"
+                label="Enable Slack notifications"
+                isChecked={integrations.slack}
+                onChange={(e) => handleIntegrationChange('slack', e.target.checked)}
+              />
+            </Box>
+              
+              <Box sx={{ mt: 2 }}>
+                <Typography sx={{ mb: 4, fontWeight: 'bold' }}>Webhook URL</Typography>
+                <TextInput
+                  id="slack-webhook"
+                  type="text"
+                  placeholder="https://hooks.slack.com/services/..."
+                  value={integrations.slackWebhook}
+                  onChange={(e) => handleInputChange('slackWebhook', e.target.value)}
+                  disabled={!integrations.slack}
+                />
+              </Box>
+              
+              <Box sx={{ mt: 2 }}>
+                <Button 
+                  variant="text" 
+                  color="info"
+                  onClick={() => handleTestNotification('slack')}
+                  disabled={!integrations.slack || !integrations.slackWebhook}
+                  sx={testNotificationButtonStyle}
+                >
+                  Test notification
+                </Button>
+              </Box>
+            </TabPanel>
+
+            {/* Discord Tab */}
+            <TabPanel value={tabValue} index={1}>
+              <Typography variant="subtitle1" component="h4" sx={{ fontWeight: 'bold' }}>Discord</Typography>
+              <Typography sx={{ mt: 1, mb: 3 }}>
+                To send data to a Discord channel from Checkmate via Discord notifications using webhooks, you can use Discord's incoming Webhooks feature.
+              </Typography>
+              
+              <Box sx={{ pl: 3 }}>
+                <Checkbox
+                  id="enable-discord"
+                  label="Enable Discord notifications"
+                  isChecked={integrations.discord}
+                  onChange={(e) => handleIntegrationChange('discord', e.target.checked)}
+                />
+              </Box>
+              
+              <Box sx={{ mt: 2 }}>
+                <Typography sx={{ mb: 4, fontWeight: 'bold' }}>Discord Webhook URL</Typography>
+                <TextInput
+                  id="discord-webhook"
+                  type="text"
+                  placeholder="https://discord.com/api/webhooks/..."
+                  value={integrations.discordWebhook}
+                  onChange={(e) => handleInputChange('discordWebhook', e.target.value)}
+                  disabled={!integrations.discord}
+                />
+              </Box>
+              
+              <Box sx={{ mt: 2 }}>
+                <Button 
+                  variant="text" 
+                  color="info"
+                  onClick={() => handleTestNotification('discord')}
+                  disabled={!integrations.discord || !integrations.discordWebhook}
+                  sx={testNotificationButtonStyle}
+                >
+                  Test notification
+                </Button>
+              </Box>
+            </TabPanel>
+
+            {/* Telegram Tab */}
+            <TabPanel value={tabValue} index={2}>
+              <Typography variant="subtitle1" component="h4" sx={{ fontWeight: 'bold' }}>Telegram</Typography>
+              <Typography sx={{ mt: 1, mb: 3 }}>
+                To enable Telegram notifications, create a Telegram bot using BotFather, an official bot for creating and managing Telegram bots. Then, get the API token and chat ID and write them down here.
+              </Typography>
+              
+              <Box sx={{ pl: 3 }}>
+                <Checkbox
+                  id="enable-telegram"
+                  label="Enable Telegram notifications"
+                  isChecked={integrations.telegram}
+                  onChange={(e) => handleIntegrationChange('telegram', e.target.checked)}
+                />
+              </Box>
+              
+              <Box sx={{ mt: 2 }}>
+                <Typography sx={{ mb: 4, fontWeight: 'bold' }}>Your bot token</Typography>
+                <TextInput
+                  id="telegram-token"
+                  type="text"
+                  placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
+                  value={integrations.telegramToken}
+                  onChange={(e) => handleInputChange('telegramToken', e.target.value)}
+                  disabled={!integrations.telegram}
+                />
+              </Box>
+              
+              <Box sx={{ mt: 2 }}>
+                <Typography sx={{ mb: 4, fontWeight: 'bold' }}>Your Chat ID</Typography>
+                <TextInput
+                  id="telegram-chat-id"
+                  type="text"
+                  placeholder="-1001234567890"
+                  value={integrations.telegramChatId}
+                  onChange={(e) => handleInputChange('telegramChatId', e.target.value)}
+                  disabled={!integrations.telegram}
+                />
+              </Box>
+              
+              <Box sx={{ mt: 2 }}>
+                <Button 
+                  variant="text" 
+                  color="info"
+                  onClick={() => handleTestNotification('telegram')}
+                  disabled={!integrations.telegram || !integrations.telegramToken || !integrations.telegramChatId}
+                  sx={testNotificationButtonStyle}
+                >
+                  Test notification
+                </Button>
+              </Box>
+            </TabPanel>
+
+            {/* Webhooks Tab */}
+            <TabPanel value={tabValue} index={3}>
+              <Typography variant="subtitle1" component="h4" sx={{ fontWeight: 'bold' }}>Webhooks</Typography>
+              <Typography sx={{ mt: 1, mb: 3 }}>
+                You can set up a custom webhook to receive notifications when incidents occur.
+              </Typography>
+              
+              <Box sx={{ pl: 3 }}>
+                <Checkbox
+                  id="enable-webhook"
+                  label="Enable Webhook notifications"
+                  isChecked={integrations.webhook}
+                  onChange={(e) => handleIntegrationChange('webhook', e.target.checked)}
+                />
+              </Box>
+              
+              <Box sx={{ mt: 2 }}>
+                <Typography sx={{ mb: 4, fontWeight: 'bold' }}>Webhook URL</Typography>
+                <TextInput
+                  id="webhook-url"
+                  type="text"
+                  placeholder="https://your-server.com/webhook"
+                  value={integrations.webhookUrl}
+                  onChange={(e) => handleInputChange('webhookUrl', e.target.value)}
+                  disabled={!integrations.webhook}
+                />
+              </Box>
+              
+              <Box sx={{ mt: 2 }}>
+                <Button 
+                  variant="text" 
+                  color="info"
+                  onClick={() => handleTestNotification('webhook')}
+                  disabled={!integrations.webhook || !integrations.webhookUrl}
+                  sx={testNotificationButtonStyle}
+                >
+                  Test notification
+                </Button>
+              </Box>
+            </TabPanel>
+          </Box>
+        </Box>
+      </DialogContent>
+      <DialogActions sx={{ p: theme.spacing(4) }}>
+        <Button 
+          variant="contained" 
+          color="accent" 
+          onClick={handleSave}
+        >
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default NotificationIntegrationModal;
\ No newline at end of file