add PaymentPageConfigComponent

OpenDonationAssistant · Dec 27, 2023 · 150eecc · 150eecc
1 parent 82aee2a
commit 150eecc
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 6 deletions.
diff --git a/src/components/MediaWidget/PaymentPageConfig.ts b/src/components/MediaWidget/PaymentPageConfig.ts
@@ -3,7 +3,10 @@ import { log } from "../../logging";
 
 export class PaymentPageConfig {
   config: any = {};
-  requestsEnabled: boolean = true;
+  requestsEnabled = true;
+  requestsDisabledPermanently = false;
+  requestCost = 100;
+
   constructor() {
     log.debug("Loading PaymentPageConfig");
     axios
@@ -12,26 +15,61 @@ export class PaymentPageConfig {
       .then((json) => {
         this.config = json;
         this.requestsEnabled = json.value["media.requests.enabled"];
+        this.requestsEnabled = this.requestsEnabled
+          ? this.requestsEnabled
+          : true;
+        this.requestsDisabledPermanently =
+          json.value["media.requests.disabled.permanently"];
+        this.requestsDisabledPermanently = this.requestsDisabledPermanently
+          ? this.requestsDisabledPermanently
+          : false;
+        this.requestCost = json.value["media.requests.cost"];
+        this.requestCost = this.requestCost ? this.requestCost : 100;
         this.sendMediaRequestsEnabledState();
+        this.sendEventPaymentPageUpdated();
       });
   }
 
   sendMediaRequestsEnabledState() {
-		log.debug(`send media-requests-enabled state: ${this.requestsEnabled}`);
+    log.debug(`send media-requests-enabled state: ${this.requestsEnabled}`);
     document.dispatchEvent(
       new CustomEvent("toggleMediaRequests", {
         detail: this.requestsEnabled,
       }),
     );
   }
 
+  sendEventPaymentPageUpdated() {
+    log.debug(`send media-requests-enabled state: ${this.requestsEnabled}`);
+    document.dispatchEvent(new CustomEvent("paymentPageUpdated"));
+  }
+
   toggleMediaRequests() {
     this.requestsEnabled = !this.requestsEnabled;
     this.config.value["media.requests.enabled"] = this.requestsEnabled;
+    this.updateConfig(this.config);
+    this.sendMediaRequestsEnabledState();
+  }
+
+  toggleRequestsPermanently() {
+    this.requestsDisabledPermanently = !this.requestsDisabledPermanently;
+    this.config.value["media.requests.disabled.permanently"] =
+      this.requestsDisabledPermanently;
+    this.updateConfig(this.config);
+    this.sendEventPaymentPageUpdated();
+  }
+
+  setRequestsCost(cost: number) {
+    this.requestCost = cost;
+    this.config.value["media.requests.cost"] = this.requestCost;
+    this.updateConfig(this.config);
+    this.sendEventPaymentPageUpdated();
+  }
+
+  updateConfig(config: any) {
     axios.post(
       `${process.env.REACT_APP_CONFIG_API_ENDPOINT}/config/${this.config.id}`,
-      this.config,
+      config,
     );
-    this.sendMediaRequestsEnabledState();
   }
 }
diff --git a/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx b/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx
@@ -1,8 +1,9 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
 import Toolbar, { Page } from "../ConfigurationPage/Toolbar";
 import classes from "./PaymentPageConfig.module.css";
 import { useLoaderData, useNavigate } from "react-router";
 import axios from "axios";
+import { PaymentPageConfig } from "../MediaWidget/PaymentPageConfig";
 
 const backgroundColor = (
   <style
@@ -27,14 +28,25 @@ function uploadFile(file, name) {
 export default function PaymentPageConfigComponent({}: {}) {
   const { recipientId } = useLoaderData();
   const navigate = useNavigate();
+  const paymentPageConfig = useRef<PaymentPageConfig>(null);
   const [isRequestsEnabled, setRequestsEnabled] = useState(false);
+  const [requestCost, setRequestCost] = useState(100);
+
+  function listenPaymentPageConfigUpdated() {
+    setRequestCost(paymentPageConfig.current?.requestCost ?? 100);
+    setRequestsEnabled(
+      !paymentPageConfig.current?.requestsDisabledPermanently ?? false,
+    );
+  }
+
   const handleBackUpload = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target.files[0];
       console.log(file);
       uploadFile(file, `back-${recipientId}.jpg`).then(() => navigate(0));
     }
   };
+
   const handleLogoUpload = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target.files[0];
@@ -45,10 +57,26 @@ export default function PaymentPageConfigComponent({}: {}) {
 
   const handleTogglingRequests = (e: ChangeEvent<HTMLSelectElement>) => {
     if (e.target.value) {
-      setRequestsEnabled(e.target.value === "enabled");
+      paymentPageConfig.current?.toggleRequestsPermanently();
     }
   };
 
+  useEffect(() => {
+    paymentPageConfig.current = new PaymentPageConfig();
+  }, [recipientId]);
+
+  useEffect(() => {
+    document.addEventListener(
+      "paymentPageUpdated",
+      listenPaymentPageConfigUpdated,
+    );
+    return () =>
+      document.removeEventListener(
+        "paymentPageUpdated",
+        listenPaymentPageConfigUpdated,
+      );
+  }, [recipientId]);
+
   return (
     <div className={classes.paymentpage}>
       {backgroundColor}
@@ -98,7 +126,11 @@ export default function PaymentPageConfigComponent({}: {}) {
           </div>
           <input
             type="number"
+            value={requestCost}
             className={classes.widgetsettingsvalue}
+            onChange={(e) =>
+              paymentPageConfig.current?.setRequestsCost(e.target.value)
+            }
           />
         </div>
       </div>