[accelerator] improve SCA UX

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html

@@ -1,4 +1,4 @@
-<div class="box card w-100" style="background: var(--box-bg)" id=acceleratePreviewAnchor>
+<div class="box card w-100 accelerate-checkout-inner" [class.input-disabled]="checkoutLocked" style="background: var(--box-bg)" id=acceleratePreviewAnchor>
   @if (accelerateError) {
     <div class="row mb-1 text-center">
       <div class="col-sm">
@@ -361,7 +361,7 @@
         <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>
         </div>
-        @if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) {
+        @if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay)) {
           <div class="row">
             <div class="col-sm text-center d-flex flex-column justify-content-center align-items-center">
               <p><ng-container i18n="accelerator.your-account-will-be-debited">Your account will be debited no more than</ng-container>&nbsp;<small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></p>
@@ -484,6 +484,11 @@
           </div>
           }
         </div>
+        @if (tokenizing) {
+          <div class="d-flex flex-row justify-content-center">
+            <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
+          </div>
+        }
       </div>
     </div>
 

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss

@@ -8,6 +8,13 @@
   color: var(--green)
 }
 
+.accelerate-checkout-inner {
+  &.input-disabled {
+    pointer-events: none;
+    opacity: 0.75;
+  }
+}
+
 .paymentMethod {
   padding: 10px;
   background-color: var(--secondary);

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts

@@ -76,6 +76,8 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
 
   calculating = true;
   processing = false;
+  checkoutLocked = false;
+  tokenizing = false;
   selectedOption: 'wait' | 'accel';
   cantPayReason = '';
   quoteError = ''; // error fetching estimate or initial data
@@ -504,6 +506,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
           this.loadingApplePay = false;
           applePayButton.addEventListener('click', async event => {
             event.preventDefault();
+            try {
+              // lock the checkout UI and show a loading spinner until the square modals are finished
+              this.checkoutLocked = true;
+              this.tokenizing = true;
               const tokenResult = await this.applePay.tokenize();
               if (tokenResult?.status === 'OK') {
                 const card = tokenResult.details?.card;
@@ -554,6 +560,11 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                 }
                 throw new Error(errorMessage);
               }
+            } finally {
+              // always unlock the checkout once we're finished
+              this.tokenizing = false;
+              this.checkoutLocked = false;
+            }
           });
         } catch (e) {
           this.processing = false;
@@ -603,7 +614,12 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
 
         document.getElementById('google-pay-button').addEventListener('click', async event => {
           event.preventDefault();
+          try {
+            // lock the checkout UI and show a loading spinner until the square modals are finished
+            this.checkoutLocked = true;
+            this.tokenizing = true;
             const tokenResult = await this.googlePay.tokenize();
+            tokenResult.token = 'ccof:customer-card-id-requires-verification';
             if (tokenResult?.status === 'OK') {
               const card = tokenResult.details?.card;
               if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
@@ -661,6 +677,11 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
               }
               throw new Error(errorMessage);
             }
+          } finally {
+            // always unlock the checkout once we're finished
+            this.tokenizing = false;
+            this.checkoutLocked = false;
+          }
         });
       }
     );