add deleteCustomCss button

OpenDonationAssistant · May 23, 2024 · 6a5c6e2 · 6a5c6e2
1 parent 961f14a
commit 6a5c6e2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/src/components/MediaWidget/PaymentPageConfig.ts b/src/components/MediaWidget/PaymentPageConfig.ts
@@ -140,6 +140,7 @@ export class PaymentPageConfig {
   public set customCss(value: string) {
     this._customCss = value;
     this.config.value["customCss"] = value;
+    this.sendEventPaymentPageUpdated();
   }
 
   async reloadConfig(): Promise<void> {

diff --git a/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx b/src/components/PaymentPageConfig/PaymentPageConfigComponent.tsx
@@ -39,6 +39,7 @@ export default function PaymentPageConfigComponent({}: {}) {
   const [arbitraryText, setArbitraryText] = useState<string | null>(null);
   const [hasChanges, setHasChanges] = useState<boolean>(false);
   const [payButtonText, setPayButtonText] = useState<string | null>(null);
+  const [hasCustomCss, setHasCustomCss] = useState<boolean>(false);
 
   function listenPaymentPageConfigUpdated() {
     if (!paymentPageConfig.current) {
@@ -54,6 +55,9 @@ export default function PaymentPageConfigComponent({}: {}) {
     setInn(paymentPageConfig.current?.inn ?? "");
     setArbitraryText(paymentPageConfig.current?.arbitraryText ?? null);
     setPayButtonText(paymentPageConfig.current?.payButtonText ?? null);
+    if (paymentPageConfig.current?.customCss) {
+      setHasChanges(true);
+    }
   }
 
   const handleBackUpload = (e: ChangeEvent<HTMLInputElement>) => {
@@ -67,19 +71,19 @@ export default function PaymentPageConfigComponent({}: {}) {
     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.customCss = `${process.env.REACT_APP_CDN_ENDPOINT}/css-${recipientId}.css`;
         paymentPageConfig.current.save();
       }
       uploadFile(file, `css-${recipientId}.css`);
     }
   };
 
   const deleteCustomCss = () => {
-    if (paymentPageConfig.current){
+    if (paymentPageConfig.current) {
       paymentPageConfig.current.customCss = "";
       paymentPageConfig.current.save();
     }
-  }
+  };
 
   const handleLogoUpload = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
@@ -185,12 +189,24 @@ export default function PaymentPageConfigComponent({}: {}) {
             />
           </label>
         </div>
-        <div className={classes.widgetsettingsitem}>
+        <div
+          style={{ alignItems: "baseline" }}
+          className={classes.widgetsettingsitem}
+        >
           <div className={classes.widgetsettingsname}>Custom css</div>
           <label className="upload-button">
             <input type="file" onChange={handleCssUpload} />
             Загрузить
           </label>
+          {hasCustomCss && (<button
+            style={{marginLeft: "10px"}}
+            className="oda-button"
+            onClick={() => {
+              deleteCustomCss();
+            }}
+          >
+            Удалить
+          </button>)}
         </div>
         <div className={classes.widgetsettingsitem}>
           <div className={classes.widgetsettingsname}>Текст на странице</div>
@@ -236,10 +252,10 @@ export default function PaymentPageConfigComponent({}: {}) {
             Реквесты музыки/видео
           </div>
           <select
-            value={ isRequestsEnabled ? "enabled" : "disabled" }
+            value={isRequestsEnabled ? "enabled" : "disabled"}
             className="widget-settings-value select"
             style={{ width: "120px", backgroundColor: "#0c122e" }}
-            onChange={ handleTogglingRequests }
+            onChange={handleTogglingRequests}
           >
             <option key="enabled">enabled</option>
             <option key="disabled">disabled</option>
@@ -264,7 +280,9 @@ export default function PaymentPageConfigComponent({}: {}) {
           />
         </div>
         <div className={classes.widgetsettingsitem}>
-          <div className={classes.widgetsettingsname}>Текст кнопки "Задонатить"</div>
+          <div className={classes.widgetsettingsname}>
+            Текст кнопки "Задонатить"
+          </div>
           <input
             value={payButtonText}
             className={classes.widgetsettingsvalue}

diff --git a/src/index.css b/src/index.css
@@ -64,6 +64,18 @@ code {
   width: 100%;
   text-align: right;
 }
+
+.oda-button {
+  border: none;
+  background-color: #151a33;
+  color: #7885bd;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 20px;
+  border-radius: 4px;
+}
 .upload-button {
   background-color: #151a33;
   color: #7885bd;