From 3325db48830291c482f329cadee3a8bbfeefbb76 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Mon, 13 Jan 2025 11:06:21 +0900
Subject: [PATCH] [accelerator] add btcpay invoice retry button and polish
 checkout UI

---
 .../accelerate-checkout.component.html         | 15 +++++++++------
 .../accelerate-checkout.component.scss         | 18 ++++++++++++++++++
 .../accelerate-checkout.component.ts           |  5 +++--
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
index df67de65c..3fd92939a 100644
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
@@ -357,9 +357,9 @@
           <app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true" class="ml-2"></app-active-acceleration-box>
         </div>
       </div>
-      <div class="payment-area mt-2 p-2" style="font-size: 14px;">
+      <div class="payment-area" style="font-size: 14px;">
         <div class="row text-center justify-content-center mx-2">
-          <p i18n="accelerator.payment-to-mempool-space">Payment to mempool.space for acceleration of txid <a [routerLink]="'/tx/' + tx.txid" target="_blank">{{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}</a></p>
+          <span i18n="accelerator.payment-to-mempool-space">Payment to mempool.space for acceleration of txid <a [routerLink]="'/tx/' + tx.txid" target="_blank">{{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}</a></span>
         </div>
         @if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) {
           <div class="row">
@@ -378,9 +378,12 @@
                   <p><ng-container i18n="transaction.pay|Pay button label">Pay</ng-container>&nbsp;<span><small style="font-family: monospace;">{{ ((invoice.btcDue * 100_000_000) || cost) | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span></p>
                   <app-bitcoin-invoice style="width: 100%;" [invoice]="invoice" [minimal]="true" (completed)="bitcoinPaymentCompleted()"></app-bitcoin-invoice>
                 } @else if (btcpayInvoiceFailed) {
-                  <p i18n="accelerator.failed-to-load-invoice">Failed to load invoice</p>
-                  <div class="d-flex flex-column align-items-center justify-content-center" style="width: 100%; height: 292px;">
-                    <fa-icon style="font-size: 24px; color: var(--red)" [icon]="['fas', 'circle-xmark']"></fa-icon>
+                  <div class="btcpay-invoice">
+                    <fa-icon style="font-size: 20px; color: var(--red)" [icon]="['fas', 'circle-xmark']"></fa-icon>
+                    <span i18n="accelerator.failed-to-load-invoice">Failed to load invoice</span>
+                    @if (!loadingBtcpayInvoice) {
+                      <button class="btn btn-sm btn-secondary mt-0 mt-md-1" (click)="requestBTCPayInvoice()">Retry ↻</button>
+                    }
                   </div>
                 } @else {
                   <p i18n="accelerator.loading-invoice">Loading invoice...</p>
@@ -391,7 +394,7 @@
               </div>
               @if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay) {
                 <div class="col-sm text-center flex-grow-0  d-flex flex-column justify-content-center align-items-center">
-                  <p class="text-nowrap">&mdash;<span i18n="or">OR</span>&mdash;</p>
+                  <p class="text-nowrap">&mdash;&mdash;<span i18n="or"> OR </span>&mdash;&mdash;</p>
                 </div>
               }
             }
diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
index ad085ed20..fd9ad06ec 100644
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
@@ -146,6 +146,11 @@
 
 .payment-area {
   background: var(--bg);
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  @media (max-width: 575px) {
+    padding-bottom: 1.25rem;
+  }
 }
 
 .col.pie {
@@ -212,4 +217,17 @@
 }
 .apple-pay-button-white-with-line {
     -apple-pay-button-style: white-outline;
+}
+
+.btcpay-invoice {
+  display: flex;
+  height: 292px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  @media (max-width: 575px) {
+    height: 75px;
+    flex-direction: row;
+    gap: 5px;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
index 4c935c57f..e675b6440 100644
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
@@ -214,7 +214,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     }
     if (this._step === 'checkout' && this.canPayWithBitcoin) {
       this.btcpayInvoiceFailed = false;
-      this.loadingBtcpayInvoice = true;
       this.invoice = null;
       this.requestBTCPayInvoice();
     } else if (this._step === 'cashapp' && this.cashappEnabled) {
@@ -323,7 +322,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
           }
 
           if (this.step === 'checkout' && this.canPayWithBitcoin && !this.loadingBtcpayInvoice) {
-            this.loadingBtcpayInvoice = true;
             this.requestBTCPayInvoice();
           }
 
@@ -782,16 +780,19 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
    * BTCPay
    */
   async requestBTCPayInvoice(): Promise<void> {
+    this.loadingBtcpayInvoice = true;
     this.servicesApiService.generateBTCPayAcceleratorInvoice$(this.tx.txid, this.userBid).pipe(
       switchMap(response => {
         return this.servicesApiService.retreiveInvoice$(response.btcpayInvoiceId);
       }),
       catchError(error => {
         console.log(error);
+        this.loadingBtcpayInvoice = false;
         this.btcpayInvoiceFailed = true;
         return of(null);
       })
     ).subscribe((invoice) => {
+        this.loadingBtcpayInvoice = false;
         this.invoice = invoice;
         this.cd.markForCheck();
     });