add button for running test alerts. Also add warning for unsaved changes

OpenDonationAssistant · Jan 17, 2025 · ca8949e · ca8949e
1 parent d12bf1d
commit ca8949e
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 27 deletions.
diff --git a/src/components/ConfigurationPage/WidgetConfiguration.tsx b/src/components/ConfigurationPage/WidgetConfiguration.tsx
@@ -1,4 +1,4 @@
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 
 import "./css/Widget.css";
 import "./css/WidgetList.css";
@@ -7,17 +7,17 @@ import "./css/WidgetSettings.css";
 import TestAlertButton from "./settings/TestAlertButton";
 
 import { publish, socket } from "../../socket";
-import { Button, Flex, Input, Modal } from "antd";
+import { Button, Flex, Input, Modal, notification } from "antd";
 import { useLoaderData } from "react-router";
 import { WidgetData } from "../../types/WidgetData";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import Dropdown from "antd/es/dropdown/dropdown";
 import { ResizableBox } from "react-resizable";
 import classes from "./WidgetConfiguration.module.css";
 import { observer } from "mobx-react-lite";
 import { Widget } from "../../types/Widget";
 import LabeledContainer from "../LabeledContainer/LabeledContainer";
-import { makeAutoObservable } from "mobx";
+import { makeAutoObservable, reaction } from "mobx";
 import { SelectionContext } from "./ConfigurationPage";
 import { AbstractWidgetSettings } from "./widgetsettings/AbstractWidgetSettings";
 import WidgetUrlModal from "./WidgetUrlModal";
@@ -34,6 +34,7 @@ import { DonationGoalWidgetSettings } from "./widgetsettings/DonationGoalWidgetS
 import { DonatersTopList } from "../../pages/DonatersTopList/DonatersTopList";
 import { DonatersTopListWidgetSettings } from "./widgetsettings/DonatersTopListWidgetSettings";
 import { DemoListStore } from "../../pages/DonatersTopList/DemoListStore";
+import { NotificationPlacement } from "antd/es/notification/interface";
 
 interface WidgetConfigurationProps {
   widget: Widget;
@@ -229,13 +230,34 @@ export default function WidgetConfiguration({
   widget,
   open,
 }: WidgetConfigurationProps) {
-  const { recipientId, conf } = useLoaderData() as WidgetData;
+  const { conf } = useLoaderData() as WidgetData;
   const { t } = useTranslation();
   const renameModalState = useRef(new RenameModalState(widget));
   const [showUrlModal, setShowUrlModal] = useState<boolean>(false);
+  const [api, context] = notification.useNotification();
+
+  useEffect(() => {
+    reaction(
+      () => widget.config.unsaved,
+      (unsaved) => {
+        if (unsaved) {
+          api.warning({
+            message: <Trans i18nKey="unsaved-notification-title"/>,
+            description: <Trans i18nKey="unsaved-notification-description"/>,
+            placement: "bottomRight",
+            duration: 0,
+            closeIcon: <div></div>
+          });
+        } else {
+          api.destroy();
+        }
+      },
+    );
+  }, [widget]);
 
   return (
     <div className={`widget ${open ? "extended" : "collapsed"}`}>
+      {context}
       <RenameModal state={renameModalState.current} />
       <div className="widget-header">
         <NameComponent widget={widget} />

diff --git a/src/components/ConfigurationPage/settings/TestAlertButton.tsx b/src/components/ConfigurationPage/settings/TestAlertButton.tsx
@@ -27,6 +27,7 @@ export default function TestAlertButton({ config }: { config: Config }) {
     });
     log.debug("Send test alert");
   }
+
   return (
     <>
       <PopupComponent buttonText={t("button-testalert")}>

diff --git a/src/components/ConfigurationPage/widgetsettings/alerts/AlertComponent.tsx b/src/components/ConfigurationPage/widgetsettings/alerts/AlertComponent.tsx
@@ -16,6 +16,10 @@ import BooleanPropertyInput from "../../components/BooleanPropertyInput";
 import ImageTab from "./ImageTab";
 import GeneralTab from "./GeneralTab";
 import classes from "./AlertComponent.module.css";
+import { publish } from "../../../../socket";
+import { WidgetData } from "../../../../types/WidgetData";
+import { useLoaderData } from "react-router";
+import { uuidv7 } from "uuidv7";
 
 function playAudio(url: string | null) {
   if (!url) {
@@ -39,6 +43,21 @@ function uploadFile(file: File, name: string) {
   );
 }
 
+function testAlert(topic: string, alert: Alert) {
+  publish(topic, {
+    id: uuidv7(), // TODO: сделать опциональным
+    alertId: alert.id,
+    nickname: "Тестовый алерт",
+    message: "Тестовое сообщение",
+    amount: {
+      major: 100,
+      minor: 0,
+      currency: "RUB",
+    },
+  });
+  log.debug("Send test alert");
+}
+
 function copyAlert(alert: Alert) {
   alert.copy();
 }
@@ -254,11 +273,18 @@ const VoiceTab = observer(({ alert }: { alert: Alert }) => {
 
 export const AlertComponent = observer(({ alert }: { alert: Alert }) => {
   const { t } = useTranslation();
+  const { conf } = useLoaderData() as WidgetData;
   log.debug({ alert: toJS(alert) }, "render alert");
 
   return (
     <div key={alert.id} className="payment-alerts-previews-item">
       <Flex className={`${classes.alertbuttons}`}>
+        <button
+          className="menu-button"
+          onClick={() => testAlert(conf.topic.alerts, alert)}
+        >
+          <span className="material-symbols-sharp">play_circle</span>
+        </button>
         <button className="menu-button" onClick={() => copyAlert(alert)}>
           <span className="material-symbols-sharp">content_copy</span>
         </button>

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -245,5 +245,7 @@
   "max-width":"Max width",
   "max-height":"Max height",
   "button-news": "News",
-  "widget-donaterslist-show-header": "Show Header"
+  "widget-donaterslist-show-header": "Show Header",
+  "unsaved-notification-title": "Unsaved changes",
+  "unsaved-notification-description": "You have unsaved changes in widget settings"
 }
diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json
@@ -246,5 +246,7 @@
   "max-width":"Ширина",
   "max-height":"Высота",
   "button-news": "Новости",
-  "widget-donaterslist-show-header": "Показывать заголовок"
+  "widget-donaterslist-show-header": "Показывать заголовок",
+  "unsaved-notification-title": "Несохраненные изменения",
+  "unsaved-notification-description": "У вас есть несохраненные изменения в настройках виджетов"
 }
diff --git a/src/logic/alert/AlertController.ts b/src/logic/alert/AlertController.ts
@@ -162,42 +162,63 @@ export class AlertController {
   }
 
   findAlert(json) {
-    const index = this.sortedAlerts.findLastIndex((alert) => {
-      const trigger = alert.triggers.at(0);
-      log.debug({ trigger: trigger }, "checking trigger");
-      if (!trigger) {
-        return false;
-      }
-      if (trigger.type === "fixed-donation-amount") {
-        return trigger.amount === json.amount.major;
-      }
-      if (trigger.type === "at-least-donation-amount") {
-        return trigger.min <= json.amount.major;
-      }
-    });
+    let index = -1;
+    if (json.alertId) {
+      index = this.sortedAlerts.findIndex((alert) => alert.id === json.alertId);
+    } else {
+      index = this.sortedAlerts.findLastIndex((alert) => {
+        const trigger = alert.triggers.at(0);
+        log.debug({ trigger: trigger }, "checking trigger");
+        if (!trigger) {
+          return false;
+        }
+        if (trigger.type === "fixed-donation-amount") {
+          return trigger.amount === json.amount.major;
+        }
+        if (trigger.type === "at-least-donation-amount") {
+          return trigger.min <= json.amount.major;
+        }
+      });
 
-    log.debug(`choosen alert index: ${index}`);
+      log.debug(`choosen alert index: ${index}`);
+    }
     if (index === -1) {
       return null;
     }
     const choosenAlert = this.sortedAlerts[index];
     if (choosenAlert.triggers.at(0).type === "fixed-donation-amount") {
       const choosenAlertPool = this.sortedAlerts
-        .filter((alert) => alert.triggers.at(0).type === "fixed-donation-amount" )
-        .filter((alert) => alert.triggers.at(0).amount === choosenAlert.triggers.at(0).amount);
+        .filter(
+          (alert) => alert.triggers.at(0).type === "fixed-donation-amount",
+        )
+        .filter(
+          (alert) =>
+            alert.triggers.at(0).amount === choosenAlert.triggers.at(0).amount,
+        );
       if (choosenAlertPool.length > 0) {
         const selected = getRndInteger(0, choosenAlertPool.length);
-        log.debug({ index: selected, pool: choosenAlertPool }, "choosen alert pool");
+        log.debug(
+          { index: selected, pool: choosenAlertPool },
+          "choosen alert pool",
+        );
         return choosenAlertPool[selected];
       }
     }
     if (choosenAlert.triggers.at(0).type === "at-least-donation-amount") {
       const choosenAlertPool = this.sortedAlerts
-        .filter((alert) => alert.triggers.at(0).type === "at-least-donation-amount" )
-        .filter((alert) => alert.triggers.at(0).min === choosenAlert.triggers.at(0).min);
+        .filter(
+          (alert) => alert.triggers.at(0).type === "at-least-donation-amount",
+        )
+        .filter(
+          (alert) =>
+            alert.triggers.at(0).min === choosenAlert.triggers.at(0).min,
+        );
       if (choosenAlertPool.length > 0) {
         const selected = getRndInteger(0, choosenAlertPool.length);
-        log.debug({ index: selected, pool: choosenAlertPool }, "choosen alert pool");
+        log.debug(
+          { index: selected, pool: choosenAlertPool },
+          "choosen alert pool",
+        );
         return choosenAlertPool[selected];
       }
     }
-Original file line number
+Diff line change
@@ Expand Up @@
         });
         log.debug("Send test alert");
       }
       return (
         <>
           <PopupComponent buttonText={t("button-testalert")}>
@@ Expand Down @@