add minimal amount settings

src/components/MediaWidget/PaymentPageConfig.ts

@@ -11,6 +11,7 @@ export class PaymentPageConfig {
   requestsEnabled = true;
   requestsDisabledPermanently = false;
   requestCost = 100;
+  private _minimalAmount: Number = 40;
   private _goals: Goal[] = [];
 
   constructor(recipientId: string) {
@@ -29,6 +30,7 @@ export class PaymentPageConfig {
         this.inn = json.value["inn"] ?? "";
         this.arbitraryText = json.value["arbitraryText"] ?? null;
         this.goals = json.value["goals"] ?? [];
+        this.minimalAmount = json.value["minimalAmount"] ?? 40;
         this.sendMediaRequestsEnabledState();
         this.sendEventPaymentPageUpdated();
       });
@@ -108,6 +110,14 @@ export class PaymentPageConfig {
   public set goals(value: Goal[]) {
       this._goals = value;
   }
+  public get minimalAmount() {
+      return this._minimalAmount;
+  }
+  public set minimalAmount(value) {
+    this._minimalAmount = value;
+    this.config.value["minimalAmount"] = value;
+    this.sendEventPaymentPageUpdated();
+  }
 
   async reloadConfig(): Promise<void> {
     const data = await axios.get(
@@ -121,6 +131,7 @@ export class PaymentPageConfig {
     this.email = this.config.value["email"] ?? "";
     this.fio = this.config.value["fio"] ?? "";
     this.inn = this.config.value["inn"] ?? "";
+    this.minimalAmount = this.config.value["minimalAmount"] ?? 40;
     this.arbitraryText = this.config.value["arbitraryText"] ?? null;
     this.sendMediaRequestsEnabledState();
     this.sendEventPaymentPageUpdated();

src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx

@@ -4,6 +4,7 @@ import classes from "./PaymentPageConfig.module.css";
 import { useLoaderData, useNavigate } from "react-router";
 import axios from "axios";
 import { PaymentPageConfig } from "../MediaWidget/PaymentPageConfig";
+import { WidgetData } from "../../types/WidgetData";
 
 const backgroundColor = (
   <style
@@ -26,18 +27,23 @@ function uploadFile(file, name: string) {
 }
 
 export default function PaymentPageConfigComponent({}: {}) {
-  const { recipientId } = useLoaderData();
+  const { recipientId } = useLoaderData() as WidgetData;
   const navigate = useNavigate();
   const paymentPageConfig = useRef<PaymentPageConfig | null>(null);
   const [isRequestsEnabled, setRequestsEnabled] = useState(false);
   const [requestCost, setRequestCost] = useState(100);
+  const [minimalAmount, setMinimalAmount] = useState<Number>(40);
   const [email, setEmail] = useState("");
   const [fio, setFio] = useState("");
   const [inn, setInn] = useState("");
   const [arbitraryText, setArbitraryText] = useState<string | null>(null);
   const [hasChanges, setHasChanges] = useState<boolean>(false);
 
   function listenPaymentPageConfigUpdated() {
+    if (!paymentPageConfig.current) {
+      return;
+    }
+    setMinimalAmount(paymentPageConfig.current.minimalAmount);
     setRequestCost(paymentPageConfig.current?.requestCost ?? 100);
     setRequestsEnabled(
       !paymentPageConfig.current?.requestsDisabledPermanently ?? false,
@@ -179,6 +185,24 @@ export default function PaymentPageConfigComponent({}: {}) {
             }}
           />
         </div>
+        <div className={classes.widgetsettingsitem}>
+          <div className={classes.widgetsettingsname}>
+            Минимальная сумма доната
+          </div>
+          <input
+            type="number"
+            value={minimalAmount}
+            className={classes.widgetsettingsvalue}
+            onChange={(e) => {
+              if (paymentPageConfig.current) {
+                paymentPageConfig.current.minimalAmount = Number(e.target.value);
+              }
+              if (!hasChanges) {
+                setHasChanges(true);
+              }
+            }}
+          />
+        </div>
         <div className={classes.widgetsettingsitem}>
           <div className={classes.widgetsettingsname}>
             Реквесты музыки/видео