fix PaymentAlertsWidgetSettings

OpenDonationAssistant · Mar 20, 2024 · e484cc1 · e484cc1
1 parent c077ac7
commit e484cc1
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 5 deletions.
diff --git a/src/components/ConfigurationPage/ConfigurationPage.tsx b/src/components/ConfigurationPage/ConfigurationPage.tsx
@@ -124,7 +124,7 @@ export default function ConfigurationPage({}: {}) {
       case "payment-alerts": {
         return new PaymentAlertsWidgetSettings(
           savedSettings.config.properties,
-          savedSettings.config.alerts,
+          savedSettings.config.alerts ?? [],
         );
       }
       case "player-info": {
@@ -150,6 +150,8 @@ export default function ConfigurationPage({}: {}) {
       widgetSettings.set(it.id, createSettings(it).copy());
     });
 
+    log.debug({ settings: widgetSettings}, "loaded widget settings");
+
     setConfig(widgetSettings);
   }, [widgets]);
 

diff --git a/src/components/ConfigurationPage/WidgetConfiguration.tsx b/src/components/ConfigurationPage/WidgetConfiguration.tsx
@@ -13,6 +13,7 @@ import BaseSettings from "./settings/BaseSettings";
 import DonatersTopListSettings from "./settings/DonatersTopListSettings";
 import { socket } from "../../socket";
 import ReelWidgetSettings from "../../pages/Reel/ReelWidgetSettings";
+import { log } from "../../logging";
 
 interface WidgetConfigurationProps {
   id: string;
@@ -83,10 +84,12 @@ export default function WidgetConfiguration({
 
   function saveSettings() {
     const settings = config.get(id);
+    log.debug({ id: id, settings: settings}, "saving settings");
     const request = {
       name: newName,
       config: {
         properties: settings?.properties,
+        alerts: settings?.alerts
       },
     };
     return axios.patch(

diff --git a/src/components/ConfigurationPage/WidgetSettings.ts b/src/components/ConfigurationPage/WidgetSettings.ts
@@ -324,8 +324,9 @@ class PaymentsWidgetSettings extends AbstractWidgetSettings {
 }
 
 class PaymentAlertsWidgetSettings extends AbstractWidgetSettings {
-  alerts: any[];
+  public alerts: any[];
   constructor(properties: WidgetProperty[], alerts: any[]) {
+    log.debug({ alerts: alerts}, `creating payment-alerts settings`);
     super(
       properties,
       [
@@ -340,6 +341,12 @@ class PaymentAlertsWidgetSettings extends AbstractWidgetSettings {
     );
     this.alerts = alerts;
   }
+  public copy() {
+    return new PaymentAlertsWidgetSettings(
+      this.properties,
+      this.alerts
+    );
+  }
 }
 
 class PlayerInfoWidgetSettings extends AbstractWidgetSettings {

diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
@@ -5,6 +5,8 @@ import axios from "axios";
 import ColorPicker from "./ColorPicker";
 import BaseSettings from "./BaseSettings";
 import BooleanPropertyInput from "./properties/BooleanPropertyInput";
+import { log } from "../../../logging";
+import { PaymentAlertsWidgetSettings } from "../WidgetSettings";
 
 interface PaymentAlertSettingsProps {
   id: string;
@@ -347,6 +349,8 @@ export default function PaymentAlertSettings({
     onChange.call({});
   }
 
+  // log.debug({ settings: setting}, 'creaing alerts preview');
+
   const previews = () => (
     <div className="payment-alerts-previews">
       {config.get(id)?.alerts?.map((alert, number: number) => (

diff --git a/src/components/MediaWidget/MediaWidget.css b/src/components/MediaWidget/MediaWidget.css
@@ -80,6 +80,19 @@
   background-color: rgb(13, 110, 253);
 }
 
+.link-popup {
+  position: absolute;
+  width: 90%;
+  min-height: 30px;
+  background-color: white;
+}
+
+.link-popup input {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+}
+
 .item-buttons {
   display: none;
 }

diff --git a/src/components/MediaWidget/PlaylistComponent.tsx b/src/components/MediaWidget/PlaylistComponent.tsx
@@ -6,16 +6,18 @@ import { useLoaderData } from "react-router";
 import AddMediaPopup from "./AddMediaPopup";
 import { Playlist } from "../../logic/playlist/Playlist";
 import { Song } from "./types";
+import { WidgetData } from "../../types/WidgetData";
 
 export default function PlaylistComponent({
   playlist
 }: {
   playlist: Playlist
 }) {
-  const { recipientId, settings, widgetId } = useLoaderData();
+  const { settings, widgetId } = useLoaderData() as WidgetData;
   const activeRef = useRef<HTMLDivElement>(null);
   const [current, setCurrent] = useState<number|null>(null);
   const [songs, setSongs] = useState<Song[]>([]);
+  const [urlToCopy, setUrlToCopy] = useState<string>("");
 
   function onDragEnd(result) {
     if (!result.destination) {
@@ -107,9 +109,10 @@ export default function PlaylistComponent({
                           </button>
                           <button
                             className="btn btn-outline-light share"
-                            onClick={() =>
+                            onClick={() => {
                               navigator.clipboard.writeText(song.src)
-                            }
+                              setUrlToCopy(song.src);
+                            }}
                           >
                             <span className="material-symbols-sharp">
                               share