add customization for payButtonText and css

OpenDonationAssistant · May 21, 2024 · e055224 · e055224
1 parent 7b908fa
commit e055224
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 4 deletions.
diff --git a/src/components/MediaWidget/PaymentPageConfig.ts b/src/components/MediaWidget/PaymentPageConfig.ts
@@ -14,12 +14,16 @@ export class PaymentPageConfig {
   private _minimalAmount: Number = 40;
   private _goals: Goal[] = [];
   private _recipientId: string = "";
+  private _payButtonText: string = "";
+  private _customCss: string = "";
 
   constructor(recipientId: string) {
     log.debug("Loading PaymentPageConfig");
     this._recipientId = recipientId;
     axios
-      .get(`${process.env.REACT_APP_CONFIG_API_ENDPOINT}/config/paymentpage?ownerId=${recipientId}`)
+      .get(
+        `${process.env.REACT_APP_CONFIG_API_ENDPOINT}/config/paymentpage?ownerId=${recipientId}`,
+      )
       .then((data) => data.data)
       .then((json) => {
         this.config = json;
@@ -32,7 +36,9 @@ export class PaymentPageConfig {
         this.inn = json.value["inn"] ?? "";
         this.arbitraryText = json.value["arbitraryText"] ?? null;
         this.goals = json.value["goals"] ?? [];
+        this._payButtonText = json.value["payButtonText"] ?? "";
         this.minimalAmount = json.value["minimalAmount"] ?? 40;
+        this._customCss = json.value["customCss"] ?? [];
         this.sendMediaRequestsEnabledState();
         this.sendEventPaymentPageUpdated();
       });
@@ -107,19 +113,34 @@ export class PaymentPageConfig {
   }
 
   public get goals(): Goal[] {
-      return this._goals;
+    return this._goals;
   }
   public set goals(value: Goal[]) {
-      this._goals = value;
+    this._goals = value;
   }
   public get minimalAmount() {
-      return this._minimalAmount;
+    return this._minimalAmount;
   }
   public set minimalAmount(value) {
     this._minimalAmount = value;
     this.config.value["minimalAmount"] = value;
     this.sendEventPaymentPageUpdated();
   }
+  public get payButtonText(): string {
+    return this._payButtonText;
+  }
+  public set payButtonText(value: string) {
+    this._payButtonText = value;
+    this.config.value["payButtonText"] = value;
+    this.sendEventPaymentPageUpdated();
+  }
+  public get customCss(): string {
+    return this._customCss;
+  }
+  public set customCss(value: string) {
+    this._customCss = value;
+    this.config.value["customCss"] = value;
+  }
 
   async reloadConfig(): Promise<void> {
     const data = await axios.get(

diff --git a/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx b/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx
@@ -38,6 +38,7 @@ export default function PaymentPageConfigComponent({}: {}) {
   const [inn, setInn] = useState("");
   const [arbitraryText, setArbitraryText] = useState<string | null>(null);
   const [hasChanges, setHasChanges] = useState<boolean>(false);
+  const [payButtonText, setPayButtonText] = useState<string | null>(null);
 
   function listenPaymentPageConfigUpdated() {
     if (!paymentPageConfig.current) {
@@ -52,6 +53,7 @@ export default function PaymentPageConfigComponent({}: {}) {
     setFio(paymentPageConfig.current?.fio ?? "");
     setInn(paymentPageConfig.current?.inn ?? "");
     setArbitraryText(paymentPageConfig.current?.arbitraryText ?? null);
+    setPayButtonText(paymentPageConfig.current?.payButtonText ?? null);
   }
 
   const handleBackUpload = (e: ChangeEvent<HTMLInputElement>) => {
@@ -61,6 +63,17 @@ export default function PaymentPageConfigComponent({}: {}) {
     }
   };
 
+  const handleCssUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const file = e.target.files[0];
+      if (paymentPageConfig.current) {
+        paymentPageConfig.current.customCss = `${process.env.REACT_APP_CDN_ENDPOINT}/css-${recipientId}.css`
+        paymentPageConfig.current.save();
+      }
+      uploadFile(file, `css-${recipientId}.css`);
+    }
+  };
+
   const handleLogoUpload = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target.files[0];
@@ -165,6 +178,13 @@ export default function PaymentPageConfigComponent({}: {}) {
             />
           </label>
         </div>
+        <div className={classes.widgetsettingsitem}>
+          <div className={classes.widgetsettingsname}>Custom css</div>
+          <label className="upload-button">
+            <input type="file" onChange={handleCssUpload} />
+            Загрузить
+          </label>
+        </div>
         <div className={classes.widgetsettingsitem}>
           <div className={classes.widgetsettingsname}>Текст на странице</div>
           <textarea
@@ -236,6 +256,22 @@ export default function PaymentPageConfigComponent({}: {}) {
             }}
           />
         </div>
+        <div className={classes.widgetsettingsitem}>
+          <div className={classes.widgetsettingsname}>Текст кнопки "Задонатить"</div>
+          <input
+            value={payButtonText}
+            className={classes.widgetsettingsvalue}
+            style={{ width: "250px" }}
+            onChange={(e) => {
+              if (paymentPageConfig.current) {
+                paymentPageConfig.current.payButtonText = e.target.value;
+              }
+              if (!hasChanges) {
+                setHasChanges(true);
+              }
+            }}
+          />
+        </div>
         {hasChanges && (
           <div className={classes.buttons}>
             <button