diff --git a/src/components/MediaWidget/PaymentPageConfig.ts b/src/components/MediaWidget/PaymentPageConfig.ts index 479d45e..cbc6b43 100644 --- 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,12 +15,23 @@ 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, @@ -25,13 +39,37 @@ export class PaymentPageConfig { ); } + 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 index c0f5f20..49b0a3d 100644 --- 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 = (