From 73b5c641d2d75eb76c8b5c267da57aea76b1d24e Mon Sep 17 00:00:00 2001
From: stCarolas <stcarolas@gmail.com>
Date: Sat, 25 May 2024 11:12:41 +0300
Subject: [PATCH] add TestAlert button to PaymentAlertsSettings

---
 .../ConfigurationPage/css/WidgetButton.css    |  1 -
 .../settings/DonationTimerSettings.tsx        | 40 ----------
 .../settings/PaymentAlertsSettings.tsx        | 13 +--
 .../settings/TestAlertButton.tsx              | 79 +++++++++++++++++++
 .../DonationGoalProperty.module.css           |  1 -
 .../widgetproperties/DonationGoalProperty.tsx |  1 -
 .../widgetproperties/ReelItemListProperty.tsx |  2 +-
 src/components/MediaWidget/AddMediaPopup.tsx  |  3 +-
 src/components/Payments/Payments.tsx          |  2 +-
 .../Popup/PopupComponent.module.css           | 13 +++
 src/components/Popup/PopupComponent.tsx       | 32 ++++++++
 11 files changed, 136 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/ConfigurationPage/settings/DonationTimerSettings.tsx
 create mode 100644 src/components/ConfigurationPage/settings/TestAlertButton.tsx
 create mode 100644 src/components/Popup/PopupComponent.module.css
 create mode 100644 src/components/Popup/PopupComponent.tsx

diff --git a/src/components/ConfigurationPage/css/WidgetButton.css b/src/components/ConfigurationPage/css/WidgetButton.css
index 17b10a0..538435c 100644
--- a/src/components/ConfigurationPage/css/WidgetButton.css
+++ b/src/components/ConfigurationPage/css/WidgetButton.css
@@ -29,7 +29,6 @@
   font-size: 16px;
   font-weight: 400;
   height: 40px;
-  width: 40px;
   outline: none;
   outline: 0;
   text-align: center;
diff --git a/src/components/ConfigurationPage/settings/DonationTimerSettings.tsx b/src/components/ConfigurationPage/settings/DonationTimerSettings.tsx
deleted file mode 100644
index f5133b0..0000000
--- a/src/components/ConfigurationPage/settings/DonationTimerSettings.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useContext } from "react";
-import BaseSettings from "./BaseSettings";
-import { WidgetsContext } from "../WidgetsContext";
-import BooleanPropertyInput from "./properties/BooleanPropertyInput";
-
-export default function DonationTimerSettings({
-  id,
-  onChange,
-}: {
-  id: string;
-  onChange: Function;
-}) {
-  const { updateConfig } = useContext(WidgetsContext);
-
-  function timerModeToggler(prop) {
-    return (
-      <>
-        {prop.name === "resetOnLoad" && (
-          <BooleanPropertyInput
-            prop={prop}
-            onChange={(e) => {
-              updateConfig(id, prop.name, !prop.value);
-              onChange.apply({});
-            }}
-          />
-        )}
-      </>
-    );
-  }
-
-  return (
-    <>
-      <BaseSettings
-        id={id}
-        onChange={onChange}
-        customHandler={timerModeToggler}
-      />
-    </>
-  );
-}
diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
index e2d44ec..94f1151 100644
--- a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
+++ b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
@@ -5,6 +5,7 @@ import axios from "axios";
 import ColorPicker from "./ColorPicker";
 import BaseSettings from "./BaseSettings";
 import BooleanPropertyInput from "./properties/BooleanPropertyInput";
+import TestAlertButton from "./TestAlertButton";
 
 interface PaymentAlertSettingsProps {
   id: string;
@@ -59,6 +60,7 @@ export default function PaymentAlertSettings({
   const [tab, setTab] = useState("trigger");
   const [selected, setSelected] = useState<number>(-2);
   const { config, setConfig } = useContext(WidgetsContext);
+  const [showTestAlert, setShowTestAlert] = useState<boolean>(false);
 
   function addDefaultAlert(): void {
     let alerts = config.get(id)?.alerts;
@@ -272,7 +274,7 @@ export default function PaymentAlertSettings({
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target.files[0];
-      const name = file.name.replace(/[^0-9a-z\.]/gi, '');
+      const name = file.name.replace(/[^0-9a-z\.]/gi, "");
       uploadFile(file, name).then((ignore) => {
         setConfig((oldConfig) => {
           const alertConfig = oldConfig.get(id);
@@ -292,7 +294,7 @@ export default function PaymentAlertSettings({
   const handleVideoUpload = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target.files[0];
-      const name = file.name.replace(/[^0-9a-z\.]/gi, '');
+      const name = file.name.replace(/[^0-9a-z\.]/gi, "");
       uploadFile(file, name).then((ignore) => {
         setConfig((oldConfig) => {
           const alertConfig = oldConfig.get(id);
@@ -312,7 +314,7 @@ export default function PaymentAlertSettings({
   const handleAudioUpload = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target.files[0];
-      const name = file.name.replace(/[^0-9a-z\.]/gi, '');
+      const name = file.name.replace(/[^0-9a-z\.]/gi, "");
       uploadFile(file, name).then((ignore) => {
         setConfig((oldConfig) => {
           const alertConfig = oldConfig.get(id);
@@ -560,7 +562,7 @@ export default function PaymentAlertSettings({
       )}
       {"image" === tab && (
         <div className="upload-button-container">
-          <label className="upload-button" style={{marginRight: "10px"}}>
+          <label className="upload-button" style={{ marginRight: "10px" }}>
             <input type="file" onChange={handleVideoUpload} />
             Загрузить видео
           </label>
@@ -593,7 +595,8 @@ export default function PaymentAlertSettings({
 
   return (
     <>
-      <BaseSettings id={id}/>
+      <TestAlertButton config={config}/>
+      <BaseSettings id={id} />
       {previews()}
       {selected > -1 && (
         <div className="payment-alert-settings">
diff --git a/src/components/ConfigurationPage/settings/TestAlertButton.tsx b/src/components/ConfigurationPage/settings/TestAlertButton.tsx
new file mode 100644
index 0000000..4ec4ad8
--- /dev/null
+++ b/src/components/ConfigurationPage/settings/TestAlertButton.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import PopupComponent from "../../Popup/PopupComponent";
+import { publish } from "../../../socket";
+import { log } from "../../../logging";
+import { Config } from "../../../config";
+import { useLoaderData } from "react-router";
+import { WidgetData } from "../../../types/WidgetData";
+
+export default function TestAlertButton({ config }: { config: Config }) {
+  const [nickname, setNickname] = useState("");
+  const [message, setMessage] = useState("");
+  const [amount, setAmount] = useState("");
+  const { conf } = useLoaderData() as WidgetData;
+
+  function sendTestAlert() {
+    publish(conf.topic.alerts, {
+      id: "ae7d3c02-209b-4b69-a95b-2a60de4aff9b",
+      nickname: nickname ? nickname : "Аноним",
+      message: message ? message : "Тестовое сообщение",
+      amount: {
+        major: amount ? parseInt(amount) : 40,
+        minor: 0,
+        currency: "RUB",
+      },
+    });
+    log.debug("Send test alert");
+  }
+  return (
+    <>
+      <PopupComponent buttonText="Тестовый алерт">
+        <div>
+          <div className="test-alert-field-container">
+            <div className="test-alert-field-label">Nickname</div>
+            <input
+              value={nickname}
+              placeholder="Аноним"
+              autoComplete="off"
+              onChange={(e) => {
+                setNickname(e.target.value);
+              }}
+            />
+          </div>
+          <div className="test-alert-field-container">
+            <div className="test-alert-field-label">Message</div>
+            <textarea
+              value={message}
+              placeholder="Тестовое сообщение"
+              autoComplete="off"
+              onChange={(e) => {
+                setMessage(e.target.value);
+              }}
+            />
+          </div>
+          <div className="test-alert-field-container">
+            <div className="test-alert-field-label">Amount</div>
+            <input
+              value={amount}
+              placeholder="40"
+              autoComplete="off"
+              onChange={(e) => {
+                setAmount(e.target.value);
+              }}
+            />
+          </div>
+          <div className="test-alert-buttons">
+            <button
+              className="btn btn-dark"
+              onClick={() => {
+                sendTestAlert();
+              }}
+            >
+              Test alert
+            </button>
+          </div>
+        </div>
+      </PopupComponent>
+    </>
+  );
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.module.css b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.module.css
index 8790a58..8788135 100644
--- a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.module.css
+++ b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.module.css
@@ -5,6 +5,5 @@
 }
 
 .button {
-  width: unset!important;
   margin-bottom: 10px;
 }
diff --git a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx
index dd33f41..05325fd 100644
--- a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx
+++ b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx
@@ -143,7 +143,6 @@ export class DonationGoalProperty extends DefaultWidgetProperty {
             <div style={{ textAlign: "right" }}>
               <button
                 className="widget-button"
-                style={{ width: "unset" }}
                 onClick={(e) => {
                   this.deleteGoal(updateConfig, index);
                 }}
diff --git a/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.tsx b/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.tsx
index 08e89f9..72c3097 100644
--- a/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.tsx
+++ b/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.tsx
@@ -22,7 +22,7 @@ export class ReelItemListProperty extends DefaultWidgetProperty {
     updateConfig(this.widgetId, "optionList", updated);
   }
 
-  copy(){
+  copy() {
     return new ReelItemListProperty(this.widgetId, this.value);
   }
 
diff --git a/src/components/MediaWidget/AddMediaPopup.tsx b/src/components/MediaWidget/AddMediaPopup.tsx
index 6af5793..2189a06 100644
--- a/src/components/MediaWidget/AddMediaPopup.tsx
+++ b/src/components/MediaWidget/AddMediaPopup.tsx
@@ -5,11 +5,12 @@ import { useLoaderData } from "react-router";
 import { log } from "../../logging";
 import { Playlist } from "../../logic/playlist/Playlist";
 import { Song } from "./types";
+import { WidgetData } from "../../types/WidgetData";
 
 export default function AddMediaPopup({ playlist }: { playlist: Playlist }) {
   const [showNewMediaPopup, setShowNewMediaPopup] = useState(false);
   const [savedPlaylists, setSavedPlaylists] = useState<Playlist[]>([]);
-  const { recipientId } = useLoaderData();
+  const { recipientId } = useLoaderData() as WidgetData;
 
   useEffect(() => {
     function toggle() {
diff --git a/src/components/Payments/Payments.tsx b/src/components/Payments/Payments.tsx
index fe4f295..9a10553 100644
--- a/src/components/Payments/Payments.tsx
+++ b/src/components/Payments/Payments.tsx
@@ -253,7 +253,7 @@ function Payments({}: {}) {
         }}
       />
       <div style={{ marginBottom: "5px", marginLeft: "5px" }}>
-        <TestAlertPopup config={conf} socket={clientRef.current} />
+        <TestAlertPopup config={conf}/>
         <Menu>
           <MenuEventButton
             event="toggleSendAlertPopup"
diff --git a/src/components/Popup/PopupComponent.module.css b/src/components/Popup/PopupComponent.module.css
new file mode 100644
index 0000000..5d332ba
--- /dev/null
+++ b/src/components/Popup/PopupComponent.module.css
@@ -0,0 +1,13 @@
+.popup {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  width: 100%;
+  background: rgba(30, 30, 30, 0.9);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/Popup/PopupComponent.tsx b/src/components/Popup/PopupComponent.tsx
new file mode 100644
index 0000000..902ea3c
--- /dev/null
+++ b/src/components/Popup/PopupComponent.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import classes from "./PopupComponent.module.css";
+
+export default function PopupComponent({
+  children,
+  buttonText,
+}: {
+  children: React.ReactNode;
+  buttonText: string;
+}) {
+  const [showPopup, setShowPopup] = useState<boolean>(false);
+
+  return (
+    <>
+      <button
+        className={`widget-button`}
+        onClick={() => setShowPopup(!showPopup)}
+      >
+        {buttonText}
+      </button>
+      <div
+        className={`${classes.popup} ${showPopup ? "" : "visually-hidden"}`}
+        tabIndex={-1}
+      >
+        <button id="close-add-media-popup" onClick={() => setShowPopup(false)}>
+          <span className="material-symbols-sharp">close</span>
+        </button>
+        {children}
+      </div>
+    </>
+  );
+}