Merge pull request #2295 from bluewave-labs/test-email-implementation-in-details-page

Email test button added in details page.

client/src/Components/MonitorDetailsControlHeader/index.jsx

@@ -5,12 +5,15 @@ import Button from "@mui/material/Button";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
 import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined";
+import EmailIcon from '@mui/icons-material/Email';
 
 // Utils
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
 import { usePauseMonitor } from "../../Hooks/useMonitorControls";
+import { useSendTestEmail } from "../../Hooks/useSendTestEmail";
+import { useTranslation } from "react-i18next";
 
 /**
  * MonitorDetailsControlHeader component displays the control header for monitor details.
@@ -34,11 +37,14 @@ const MonitorDetailsControlHeader = ({
 }) => {
 	const navigate = useNavigate();
 	const theme = useTheme();
+	const { t } = useTranslation();
 	const [pauseMonitor, isPausing, error] = usePauseMonitor({
 		monitorId: monitor?._id,
 		triggerUpdate,
 	});
 
+	const [isSending, emailError, sendTestEmail] = useSendTestEmail();
+
 	if (isLoading) {
 		return <Skeleton />;
 	}
@@ -54,6 +60,15 @@ const MonitorDetailsControlHeader = ({
 				direction="row"
 				gap={theme.spacing(2)}
 			>
+				<Button
+					variant="contained"
+					color="secondary"
+					loading={isSending}
+					startIcon={<EmailIcon />}
+					onClick={sendTestEmail}
+				>
+					{t("sendTestEmail")}
+				</Button>
 				<Button
 					variant="contained"
 					color="secondary"

client/src/Hooks/useSendTestEmail.js

@@ -2,11 +2,13 @@ import { useState } from "react";
 import { networkService } from "../main";
 import { useSelector } from "react-redux";
 import { createToast } from "../Utils/toastUtils";
+import { useTranslation } from "react-i18next";
 
 const useSendTestEmail = () => {
 	const [isSending, setIsSending] = useState(false);
 	const [error, setError] = useState(null);
 	const user = useSelector((state) => state.auth.user);
+	const { t } = useTranslation();
 
 	const sendTestEmail = async () => {
 		try {
@@ -16,12 +18,15 @@ const useSendTestEmail = () => {
 			const response = await networkService.sendTestEmail({ to: user.email });
 			if (typeof response?.data?.data?.messageId !== "undefined") {
 				createToast({
-					body: "Test email sent successfully",
+					body: t("emailSent"),
 				});
 			} else {
-				throw new Error("Failed to send test email");
+				throw new Error(t("failedToSendEmail"));
 			}
 		} catch (error) {
+			createToast({
+				body: t("failedToSendEmail"),
+			});
 			setError(error);
 		} finally {
 			setIsSending(false);

client/src/locales/gb.json

@@ -536,5 +536,8 @@
 		"passwordRequirements": "New password must contain at least 8 characters and must have at least one uppercase letter, one lowercase letter, one number and one special character.",
 		"saving": "Saving..."
 	},
-	"uptimeCreateSelectURL": "Enter the URL or IP to monitor (e.g., https://example.com/ or 192.168.1.100) and add a clear display name that appears on the dashboard."
+	"uptimeCreateSelectURL": "Enter the URL or IP to monitor (e.g., https://example.com/ or 192.168.1.100) and add a clear display name that appears on the dashboard.",
+	"sendTestEmail": "Send test email",
+	"emailSent": "Email sent successfully",
+	"failedToSendEmail": "Failed to send email"
 }