add fio and inn to PaymentPageConfigComponent

OpenDonationAssistant · Dec 27, 2023 · cc402ff · cc402ff
1 parent 9b4b721
commit cc402ff
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 14 deletions.
diff --git a/src/components/MediaWidget/PaymentPageConfig.ts b/src/components/MediaWidget/PaymentPageConfig.ts
@@ -4,6 +4,8 @@ import { log } from "../../logging";
 export class PaymentPageConfig {
   config: any = {};
   email: string = "";
+	fio: string = "";
+	inn: string = "";
   requestsEnabled = true;
   requestsDisabledPermanently = false;
   requestCost = 100;
@@ -20,6 +22,8 @@ export class PaymentPageConfig {
           json.value["media.requests.disabled.permanently"] ?? false;
         this.requestCost = json.value["media.requests.cost"] ?? 100;
         this.email = json.value["email"] ?? "";
+				this.fio = json.value["fio"] ?? "";
+				this.inn = json.value["inn"] ?? "";
         this.sendMediaRequestsEnabledState();
         this.sendEventPaymentPageUpdated();
       });
@@ -68,6 +72,20 @@ export class PaymentPageConfig {
     this.sendEventPaymentPageUpdated();
   }
 
+	setFio(fio: string) {
+    this.fio = fio;
+    this.config.value["fio"] = this.fio;
+    this.updateConfig(this.config);
+    this.sendEventPaymentPageUpdated();
+	}
+
+	setInn(inn: string) {
+    this.inn = inn;
+    this.config.value["inn"] = this.inn;
+    this.updateConfig(this.config);
+    this.sendEventPaymentPageUpdated();
+	}
+
   updateConfig(config: any) {
     axios.post(
       `${process.env.REACT_APP_CONFIG_API_ENDPOINT}/config/${this.config.id}`,

diff --git a/src/components/PaymentPageConfig/PaymentPageConfig.module.css b/src/components/PaymentPageConfig/PaymentPageConfig.module.css
@@ -42,8 +42,12 @@
 .backgroundimage {
 	width: 400px;
 	height: 300px;
-	display: inline-block;
-	flex: 0 0 auto;
+  border: 1px solid #684aff;
+}
+
+.logoimage {
+	width: 110px;
+	height: 110px;
   border: 1px solid #684aff;
 }
 

diff --git a/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx b/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx
@@ -32,13 +32,17 @@ export default function PaymentPageConfigComponent({}: {}) {
   const [isRequestsEnabled, setRequestsEnabled] = useState(false);
   const [requestCost, setRequestCost] = useState(100);
   const [email, setEmail] = useState("");
+	const [fio, setFio] = useState("");
+	const [inn, setInn] = useState("");
 
   function listenPaymentPageConfigUpdated() {
     setRequestCost(paymentPageConfig.current?.requestCost ?? 100);
     setRequestsEnabled(
       !paymentPageConfig.current?.requestsDisabledPermanently ?? false,
     );
     setEmail(paymentPageConfig.current?.email ?? "");
+		setFio(paymentPageConfig.current?.fio ?? "");
+		setInn(paymentPageConfig.current?.inn ?? "");
   }
 
   const handleBackUpload = (e: ChangeEvent<HTMLInputElement>) => {
@@ -84,6 +88,39 @@ export default function PaymentPageConfigComponent({}: {}) {
       {backgroundColor}
       <Toolbar page={Page.PAYMENTPAGE} />
       <div className={classes.paymentpageconfig}>
+        <div className={classes.widgetsettingsitem}>
+          <div className={classes.widgetsettingsname}>ФИО</div>
+          <input
+            value={fio}
+            className={classes.widgetsettingsvalue}
+            style={{ width: "250px" }}
+            onChange={(e) =>
+              paymentPageConfig.current?.setFio(e.target.value)
+            }
+          />
+        </div>
+        <div className={classes.widgetsettingsitem}>
+          <div className={classes.widgetsettingsname}>ИНН</div>
+          <input
+            value={inn}
+            className={classes.widgetsettingsvalue}
+            style={{ width: "250px" }}
+            onChange={(e) =>
+              paymentPageConfig.current?.setInn(e.target.value)
+            }
+          />
+        </div>
+        <div className={classes.widgetsettingsitem}>
+          <div className={classes.widgetsettingsname}>Контактный e-mail</div>
+          <input
+            value={email}
+            className={classes.widgetsettingsvalue}
+            style={{ width: "250px" }}
+            onChange={(e) =>
+              paymentPageConfig.current?.setEmail(e.target.value)
+            }
+          />
+        </div>
         <div className={classes.widgetsettingsitem}>
           <div className={classes.widgetsettingsname}>Фоновое изображение</div>
           <label className="upload-button">
@@ -101,7 +138,7 @@ export default function PaymentPageConfigComponent({}: {}) {
           <label className="upload-button">
             <input type="file" onChange={handleLogoUpload} />
             <img
-              className={classes.backgroundimage}
+              className={classes.logoimage}
               src={`${
                 process.env.REACT_APP_CDN_ENDPOINT
               }/logo-${recipientId}.png?random=${Date.now()}`}
@@ -135,17 +172,6 @@ export default function PaymentPageConfigComponent({}: {}) {
             }
           />
         </div>
-        <div className={classes.widgetsettingsitem}>
-          <div className={classes.widgetsettingsname}>Контактный e-mail</div>
-          <input
-            value={email}
-            className={classes.widgetsettingsvalue}
-            style={{ width: "250px" }}
-            onChange={(e) =>
-              paymentPageConfig.current?.setEmail(e.target.value)
-            }
-          />
-        </div>
       </div>
     </div>
   );