Merge pull request #374 from PR0M3TH3AN/codex/change-send-button-to-done-after-zap

Make zap send button close dialog after success

js/ui/components/VideoModal.js

@@ -331,6 +331,10 @@ export class VideoModal {
     if (this.modalZapForm) {
       this.modalZapForm.addEventListener("submit", (event) => {
         event?.preventDefault?.();
+        if (this.modalZapSendBtn?.dataset.completed === "true") {
+          this.closeZapDialog();
+          return;
+        }
         if (this.modalZapSendBtn?.disabled) {
           return;
         }
@@ -342,6 +346,15 @@ export class VideoModal {
       });
     }
 
+    if (this.modalZapSendBtn) {
+      this.modalZapSendBtn.addEventListener("click", (event) => {
+        if (this.modalZapSendBtn?.dataset.completed === "true") {
+          event?.preventDefault?.();
+          this.closeZapDialog();
+        }
+      });
+    }
+
     if (this.modalZapAmountInput) {
       const amountHandler = () => {
         this.dispatch("zap:amount-change", {
@@ -712,6 +725,7 @@ export class VideoModal {
     this.setZapStatus("", "neutral");
     this.clearZapReceipts();
     this.setZapRetryPending(false);
+    this.setZapCompleted(false);
   }
 
   setZapSplitSummary(text) {
@@ -894,21 +908,67 @@ export class VideoModal {
     }
 
     if (pending) {
+      delete this.modalZapSendBtn.dataset.completed;
       this.modalZapSendBtn.dataset.retryPending = "true";
+      if (summary) {
+        this.modalZapSendBtn.dataset.retrySummary = summary;
+      } else {
+        delete this.modalZapSendBtn.dataset.retrySummary;
+      }
+    } else {
+      delete this.modalZapSendBtn.dataset.retryPending;
+      delete this.modalZapSendBtn.dataset.retrySummary;
+    }
+
+    this.applyZapSendButtonState();
+  }
+
+  setZapCompleted(completed) {
+    if (!this.modalZapSendBtn) {
+      return;
+    }
+
+    if (completed) {
+      delete this.modalZapSendBtn.dataset.retryPending;
+      delete this.modalZapSendBtn.dataset.retrySummary;
+      this.modalZapSendBtn.dataset.completed = "true";
+    } else {
+      delete this.modalZapSendBtn.dataset.completed;
+    }
+
+    this.applyZapSendButtonState();
+  }
+
+  applyZapSendButtonState() {
+    if (!this.modalZapSendBtn) {
+      return;
+    }
+
+    if (this.modalZapSendBtn.dataset.completed === "true") {
+      this.modalZapSendBtn.textContent = "Done";
+      this.modalZapSendBtn.setAttribute("aria-label", "Close zap dialog");
+      this.modalZapSendBtn.title = "Close zap dialog";
+      return;
+    }
+
+    if (this.modalZapSendBtn.dataset.retryPending === "true") {
       this.modalZapSendBtn.textContent = "Retry";
       this.modalZapSendBtn.setAttribute(
         "aria-label",
         "Retry failed zap shares"
       );
+      const summary = this.modalZapSendBtn.dataset.retrySummary;
       if (summary) {
         this.modalZapSendBtn.title = summary;
+      } else {
+        this.modalZapSendBtn.removeAttribute("title");
       }
-    } else {
-      delete this.modalZapSendBtn.dataset.retryPending;
-      this.modalZapSendBtn.textContent = "Send";
-      this.modalZapSendBtn.setAttribute("aria-label", "Send a zap");
-      this.modalZapSendBtn.removeAttribute("title");
+      return;
     }
+
+    this.modalZapSendBtn.textContent = "Send";
+    this.modalZapSendBtn.setAttribute("aria-label", "Send a zap");
+    this.modalZapSendBtn.removeAttribute("title");
   }
 
   getViewCountElement() {

js/ui/zapController.js

@@ -104,6 +104,7 @@ export default class ZapController {
     this.modalZapInFlight = false;
     this.resetRetryState();
     if (this.videoModal) {
+      this.videoModal.setZapCompleted(false);
       this.videoModal.resetZapForm({
         amount: preserveAmount ? this.modalZapAmountValue || "" : "",
         comment: "",
@@ -150,6 +151,8 @@ export default class ZapController {
       return;
     }
 
+    this.videoModal?.setZapCompleted(false);
+
     const numericAmount = Number.isFinite(Number(amount))
       ? Number(amount)
       : this.modalZapAmountValue;
@@ -182,10 +185,15 @@ export default class ZapController {
         Array.isArray(this.modalZapRetryState?.shares) &&
         this.modalZapRetryState.shares.length
       ) {
-        await this.executeRetry({
+        const retrySuccess = await this.executeRetry({
           walletSettings,
           comment: trimmedComment,
         });
+        if (retrySuccess) {
+          this.modalZapCommentValue = "";
+          this.videoModal?.resetZapForm({ amount: "", comment: "" });
+          this.videoModal?.setZapCompleted(true);
+        }
         this.applyDefaultAmount();
         return;
       }
@@ -215,6 +223,7 @@ export default class ZapController {
       this.resetRetryState();
       this.modalZapCommentValue = "";
       this.videoModal?.resetZapForm({ amount: "", comment: "" });
+      this.videoModal?.setZapCompleted(true);
       this.applyDefaultAmount();
     } catch (error) {
       this.handleZapError({ error, amount: roundedAmount, comment: trimmedComment, walletSettings });
@@ -240,6 +249,7 @@ export default class ZapController {
     if (!this.videoModal) {
       return;
     }
+    this.videoModal.setZapCompleted(false);
     this.videoModal.setZapStatus("", "neutral");
     this.videoModal.clearZapReceipts();
     this.videoModal.setZapRetryPending(false);