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

/* eslint-disable no-console */
import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef, SimpleChanges, HostListener } from '@angular/core';
import { Subscription, tap, of, catchError, Observable, switchMap } from 'rxjs';
import { ServicesApiServices } from '@app/services/services-api.service';
import { md5 } from '@app/shared/common.utils';
import { StateService } from '@app/services/state.service';
import { AudioService } from '@app/services/audio.service';
import { ETA, EtaService } from '@app/services/eta.service';
import { Transaction } from '@interfaces/electrs.interface';
import { MiningStats } from '@app/services/mining.service';
import { IAuth, AuthServiceMempool } from '@app/services/auth.service';
import { EnterpriseService } from '@app/services/enterprise.service';
import { ApiService } from '@app/services/api.service';
import { isDevMode } from '@angular/core';

export type PaymentMethod = 'balance' | 'bitcoin' | 'cashapp' | 'applePay' | 'googlePay' | 'cardOnFile';

export type AccelerationEstimate = {
  hasAccess: boolean;
  txSummary: TxSummary;
  nextBlockFee: number;
  targetFeeRate: number;
  userBalance: number;
  enoughBalance: boolean;
  cost: number;
  mempoolBaseFee: number;
  vsizeFee: number;
  pools: number[];
  availablePaymentMethods: Record<PaymentMethod, {min: number, max: number, card?: {card_id: string, last_4: string, brand: string, name: string, billing: any}}>;
  unavailable?: boolean;
  options: { // recommended bid options
    fee: number; // recommended userBid in sats
  }[];
}
export type TxSummary = {
  txid: string; // txid of the current transaction
  effectiveVsize: number; // Total vsize of the dependency tree
  effectiveFee: number;  // Total fee of the dependency tree in sats
  ancestorCount: number; // Number of ancestors
}

export interface RateOption {
  fee: number;
  rate: number;
  index: number;
}

export const MIN_BID_RATIO = 1;
export const DEFAULT_BID_RATIO = 2;
export const MAX_BID_RATIO = 4;

type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'applepay' | 'googlepay' | 'cardonfile' | 'processing' | 'paid' | 'success';

@Component({
  selector: 'app-accelerate-checkout',
  templateUrl: './accelerate-checkout.component.html',
  styleUrls: ['./accelerate-checkout.component.scss']
})
export class AccelerateCheckout implements OnInit, OnDestroy {
  @Input() tx: Transaction;
  @Input() accelerating: boolean = false;
  @Input() miningStats: MiningStats;
  @Input() eta: ETA;
  @Input() scrollEvent: boolean;
  @Input() cashappEnabled: boolean = true;
  @Input() applePayEnabled: boolean = false;
  @Input() googlePayEnabled: boolean = true;
  @Input() cardOnFileEnabled: boolean = true;
  @Input() advancedEnabled: boolean = false;
  @Input() forceMobile: boolean = false;
  @Input() showDetails: boolean = false;
  @Input() noCTA: boolean = false;
  @Output() unavailable = new EventEmitter<boolean>();
  @Output() completed = new EventEmitter<boolean>();
  @Output() hasDetails = new EventEmitter<boolean>();
  @Output() changeMode = new EventEmitter<boolean>();

  calculating = true;
  processing = false;
  isCheckoutLocked = 0; // reference counter, 0 = unlocked, >0 = locked
  isTokenizing = 0; // reference counter, 0 = false, >0 = true
  selectedOption: 'wait' | 'accel';
  cantPayReason = '';
  quoteError = ''; // error fetching estimate or initial data
  accelerateError = ''; // error executing acceleration
  btcpayInvoiceFailed = false;
  timePaid: number = 0; // time acceleration requested
  math = Math;
  isMobile: boolean = window.innerWidth <= 767.98;
  isProdDomain = false;

  private _step: CheckoutStep = 'summary';
  simpleMode: boolean = true;
  timeoutTimer: any;

  authSubscription$: Subscription;
  auth: IAuth | null = null;

  // accelerator stuff
  accelerationSubscription: Subscription;
  difficultySubscription: Subscription;
  estimateSubscription: Subscription;
  estimate: AccelerationEstimate;
  maxBidBoost: number; // sats
  cost: number; // sats
  etaInfo$: Observable<{ hashratePercentage: number, ETA: number, acceleratedETA: number }>;
  showSuccess = false;
  hasAncestors: boolean = false;
  minExtraCost = 0;
  minBidAllowed = 0;
  maxBidAllowed = 0;
  defaultBid = 0;
  userBid = 0;
  selectFeeRateIndex = 1;
  maxRateOptions: RateOption[] = [];

  // square
  loadingCashapp = false;
  loadingApplePay = false;
  loadingGooglePay = false;
  loadingCardOnFile = false;
  payments: any;
  cashAppPay: any;
  applePay: any;
  googlePay: any;
  conversionsSubscription: Subscription;
  conversions: Record<string, number>;

  // btcpay
  loadingBtcpayInvoice = false;
  invoice = undefined;

  constructor(
    public stateService: StateService,
    private apiService: ApiService,
    private servicesApiService: ServicesApiServices,
    private etaService: EtaService,
    private audioService: AudioService,
    private cd: ChangeDetectorRef,
    private authService: AuthServiceMempool,
    private enterpriseService: EnterpriseService,
  ) {
    this.isProdDomain = this.stateService.env.PROD_DOMAINS.indexOf(document.location.hostname) > -1;

    // Check if Apple Pay available
    // https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/checking_for_apple_pay_availability#overview
    if (window['ApplePaySession']) {
      this.applePayEnabled = true;
    }
  }

  ngOnInit(): void {
    this.authSubscription$ = this.authService.getAuth$().subscribe((auth) => {
      if (this.auth?.user?.userId !== auth?.user?.userId) {
        this.auth = auth;
        this.estimate = null;
        this.quoteError = null;
        this.accelerateError = null;
        this.timePaid = 0;
        this.btcpayInvoiceFailed = false;
        this.moveToStep('summary', true);
      } else {
        this.auth = auth;
      }
    });
    this.authService.refreshAuth$().subscribe();

    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('cash_request_id')) { // Redirected from cashapp
      this.moveToStep('processing', true);
      this.insertSquare();
      this.setupSquare();
    } else {
      this.moveToStep('summary', true);
    }

    this.conversionsSubscription = this.stateService.conversions$.subscribe(
      async (conversions) => {
        this.conversions = conversions;
      }
    );
  }

  ngOnDestroy(): void {
    if (this.estimateSubscription) {
      this.estimateSubscription.unsubscribe();
    }
    if (this.authSubscription$) {
      this.authSubscription$.unsubscribe();
    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.scrollEvent && this.scrollEvent) {
      this.scrollToElement('acceleratePreviewAnchor', 'start');
    }
    if (changes.accelerating && this.accelerating) {
      if (this.step === 'processing' || this.step === 'paid') {
        this.moveToStep('success', true);
      } else { // Edge case where the transaction gets accelerated by someone else or on another session
        this.closeModal();
      }
    }
  }

  moveToStep(step: CheckoutStep, force: boolean = false): void {
    if (this.isCheckoutLocked > 0 && !force) {
      return;
    }
    this.processing = false;
    this._step = step;
    if (this.timeoutTimer) {
      clearTimeout(this.timeoutTimer);
    }
    if (!this.estimate && ['quote', 'summary', 'checkout'].includes(this.step)) {
      this.fetchEstimate();
    }
    if (this._step === 'checkout') {
      this.insertSquare();
      this.enterpriseService.goal(8);
    }
    if (this._step === 'checkout' && this.canPayWithBitcoin) {
      this.btcpayInvoiceFailed = false;
      this.loadingBtcpayInvoice = true;
      this.invoice = null;
      this.requestBTCPayInvoice();
    } else if (this._step === 'cashapp' && this.cashappEnabled) {
      this.loadingCashapp = true;
      this.setupSquare();
      this.scrollToElementWithTimeout('confirm-title', 'center', 100);
    } else if (this._step === 'applepay' && this.applePayEnabled) {
      this.loadingApplePay = true;
      this.setupSquare();
      this.scrollToElementWithTimeout('confirm-title', 'center', 100);
    } else if (this._step === 'googlepay' && this.googlePayEnabled) {
      this.loadingGooglePay = true;
      this.setupSquare();
      this.scrollToElementWithTimeout('confirm-title', 'center', 100);
    } else if (this._step === 'cardonfile' && this.cardOnFileEnabled) {
      this.loadingCardOnFile = true;
      this.setupSquare();
      this.scrollToElementWithTimeout('confirm-title', 'center', 100);
    } else if (this._step === 'paid') {
      this.timePaid = Date.now();
      this.timeoutTimer = setTimeout(() => {
        if (this.step === 'paid') {
          this.accelerateError = 'internal_server_error';
        }
      }, 120000);
    }
    this.hasDetails.emit(this._step === 'quote');
  }

  closeModal(): void {
    this.completed.emit(true);
    this.moveToStep('summary', true);
  }

  /**
   * Scroll to element id with or without setTimeout
   */
  scrollToElementWithTimeout(id: string, position: ScrollLogicalPosition, timeout: number = 1000): void {
    setTimeout(() => {
      this.scrollToElement(id, position);
    }, timeout);
  }
  scrollToElement(id: string, position: ScrollLogicalPosition): void {
    const acceleratePreviewAnchor = document.getElementById(id);
    if (acceleratePreviewAnchor) {
      this.cd.markForCheck();
      acceleratePreviewAnchor.scrollIntoView({
        behavior: 'smooth',
        inline: position,
        block: position,
      });
    }
  }

  /**
   * Accelerator
   */
  fetchEstimate(): void {
    if (this.estimateSubscription) {
      this.estimateSubscription.unsubscribe();
    }
    this.calculating = true;
    this.quoteError = null;
    this.accelerateError = null;
    this.estimateSubscription = this.servicesApiService.estimate$(this.tx.txid).pipe(
      tap((response) => {
        if (response.status === 204) {
          this.quoteError = `cannot_accelerate_tx`;
          if (this.step === 'summary') {
            this.unavailable.emit(true);
          }
        } else {
          this.estimate = response.body;
          if (!this.estimate) {
            this.quoteError = `cannot_accelerate_tx`;
            if (this.step === 'summary') {
              this.unavailable.emit(true);
            }
            return;
          }
          if (this.estimate.hasAccess === true && this.estimate.userBalance <= 0) {
            if (this.isLoggedIn()) {
              this.quoteError = `not_enough_balance`;
            }
          }
          if (this.estimate.unavailable) {
            this.quoteError = `temporarily_unavailable`;
          }
          this.hasAncestors = this.estimate.txSummary.ancestorCount > 1;
          this.etaInfo$ = this.etaService.getProjectedEtaObservable(this.estimate, this.miningStats);

          this.maxRateOptions = this.estimate.options.map((option, index) => ({
            fee: option.fee,
            rate: (this.estimate.txSummary.effectiveFee + option.fee) / this.estimate.txSummary.effectiveVsize,
            index
          }));

          this.defaultBid = this.maxRateOptions[1].fee;
          this.userBid = this.defaultBid;
          this.cost = this.userBid + this.estimate.mempoolBaseFee + this.estimate.vsizeFee;

          this.validateChoice();

          if (!this.couldPay) {
            this.quoteError = `cannot_accelerate_tx`;
            if (this.step === 'summary') {
              this.unavailable.emit(true);
            }
            return;
          }

          if (this.step === 'checkout' && this.canPayWithBitcoin && !this.loadingBtcpayInvoice) {
            this.loadingBtcpayInvoice = true;
            this.requestBTCPayInvoice();
          }

          this.calculating = false;
          this.cd.markForCheck();
        }
      }),

      catchError(() => {
        this.estimate = undefined;
        this.quoteError = `cannot_accelerate_tx`;
        this.estimateSubscription.unsubscribe();
        if (this.step === 'summary') {
          this.unavailable.emit(true);
        } else {
          this.accelerateError = 'cannot_accelerate_tx';
        }
        return of(null);
      })
    ).subscribe();
  }

  validateChoice(): void {
    if (!this.canPay) {
      if (this.estimate?.availablePaymentMethods?.balance) {
        if (this.cost >= this.estimate?.userBalance) {
          this.cantPayReason = 'not_enough_balance';
        }
      } else {
        this.cantPayReason = 'cannot_accelerate_tx';
      }
    } else {
      this.cantPayReason = '';
    }
  }

  /**
   * User changed his bid
   */
  setUserBid({ fee, index }: { fee: number, index: number}): void {
    if (this.estimate) {
      this.selectFeeRateIndex = index;
      this.userBid = Math.max(0, fee);
      this.cost = this.userBid + this.estimate.mempoolBaseFee + this.estimate.vsizeFee;
      this.validateChoice();
    }
  }

  /**
   * Account-based acceleration request
   */
  accelerateWithMempoolAccount(): void {
    if (!this.canPay || this.calculating || this.processing) {
      return;
    }
    this.processing = true;
    if (this.accelerationSubscription) {
      this.accelerationSubscription.unsubscribe();
    }
    this.accelerationSubscription = this.servicesApiService.accelerate$(
      this.tx.txid,
      this.userBid,
    ).subscribe({
      next: () => {
        this.processing = false;
        this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
        this.audioService.playSound('ascend-chime-cartoon');
        this.showSuccess = true;
        this.estimateSubscription.unsubscribe();
        this.moveToStep('paid', true);
      },
      error: (response) => {
        this.processing = false;
        this.accelerateError = response.error;
      }
    });
  }

  /**
   * Square
   */
  insertSquare(): void {
    if (!this.isProdDomain && !isDevMode()) {
      return;
    }
    if (window['Square']) {
      return;
    }
    let statsUrl = 'https://sandbox.web.squarecdn.com/v1/square.js';
    if (this.isProdDomain) {
      statsUrl = '/square/v1/square.js';
    }

    (function(): void {
      const d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
      g.type='text/javascript'; g.src=statsUrl; s.parentNode.insertBefore(g, s);
    })();
  }
  setupSquare(): void {
    if (!this.isProdDomain && !isDevMode()) {
      return;
    }
    const init = (): void => {
      this.initSquare();
    };

    if (!window['Square']) {
      console.debug('Square.js failed to load properly. Retrying.');
      setTimeout(this.setupSquare.bind(this), 100);
    } else {
      init();
    }
  }
  async initSquare(): Promise<void> {
    try {
      this.servicesApiService.setupSquare$().subscribe({
        next: async (ids) => {
          this.payments = window['Square'].payments(ids.squareAppId, ids.squareLocationId);
          const urlParams = new URLSearchParams(window.location.search);
          if (this._step === 'cashapp' || urlParams.get('cash_request_id')) {
            await this.requestCashAppPayment();
          } else if (this._step === 'applepay') {
            await this.requestApplePayPayment();
          } else if (this._step === 'googlepay') {
            await this.requestGooglePayPayment();
          } else if (this._step === 'cardonfile') {
            this.loadingCardOnFile = false;
          }
        },
        error: () => {
          console.debug('Error loading Square Payments');
          this.accelerateError = 'cannot_setup_square';
        }
      });
    } catch (e) {
      console.debug('Error loading Square Payments', e);
      this.accelerateError = 'cannot_setup_square';
    }
  }

  /**
   * APPLE PAY
   */
  async requestApplePayPayment(): Promise<void> {
    if (this.processing) {
      return;
    }
    if (this.conversionsSubscription) {
      this.conversionsSubscription.unsubscribe();
    }

    this.processing = true;
    this.conversionsSubscription = this.stateService.conversions$.subscribe(
      async (conversions) => {
        this.conversions = conversions;
        if (this.applePay) {
          this.applePay.destroy();
        }

        const costUSD = this.cost / 100_000_000 * conversions.USD;
        const paymentRequest = this.payments.paymentRequest({
          countryCode: 'US',
          currencyCode: 'USD',
          total: {
            amount: costUSD.toFixed(2),
            label: 'Total',
          },
        });

        try {
          this.applePay = await this.payments.applePay(paymentRequest);
          const applePayButton = document.getElementById('apple-pay-button');
          if (!applePayButton) {
            console.error(`Unable to find apple pay button id='apple-pay-button'`);
            // Try again
            setTimeout(this.requestApplePayPayment.bind(this), 500);
            this.processing = false;
            return;
          }
          this.loadingApplePay = false;
          applePayButton.addEventListener('click', async event => {
            if (this.isCheckoutLocked > 0 || this.isTokenizing > 0) {
              return;
            }
            event.preventDefault();
            try {
              // lock the checkout UI and show a loading spinner until the square modals are finished
              this.isCheckoutLocked++;
              this.isTokenizing++;
              const tokenResult = await this.applePay.tokenize();
              if (tokenResult?.status === 'OK') {
                const card = tokenResult.details?.card;
                if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
                  console.error(`Cannot retreive payment card details`);
                  this.accelerateError = 'apple_pay_no_card_details';
                  this.processing = false;
                  return;
                }
                const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
                // keep checkout in loading state until the acceleration request completes
                this.isTokenizing++;
                this.isCheckoutLocked++;
                this.servicesApiService.accelerateWithApplePay$(
                  this.tx.txid,
                  tokenResult.token,
                  cardTag,
                  `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
                  costUSD
                ).subscribe({
                  next: () => {
                    this.processing = false;
                    this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
                    this.audioService.playSound('ascend-chime-cartoon');
                    if (this.applePay) {
                      this.applePay.destroy();
                    }
                    setTimeout(() => {
                      this.isTokenizing--;
                      this.isCheckoutLocked--;
                      this.moveToStep('paid', true);
                    }, 1000);
                  },
                  error: (response) => {
                    this.processing = false;
                    this.accelerateError = response.error;
                    if (!(response.status === 403 && response.error === 'not_available')) {
                      setTimeout(() => {
                        this.isTokenizing--;
                        this.isCheckoutLocked--;
                        // Reset everything by reloading the page :D, can be improved
                        const urlParams = new URLSearchParams(window.location.search);
                        window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
                      }, 10000);
                    }
                  }
                });
              } else {
                this.processing = false;
                let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
                if (tokenResult.errors) {
                  errorMessage += ` and errors: ${JSON.stringify(
                    tokenResult.errors,
                  )}`;
                }
                throw new Error(errorMessage);
              }
            } finally {
              // always unlock the checkout once we're finished
              this.isTokenizing--;
              this.isCheckoutLocked--;
            }
          });
        } catch (e) {
          this.processing = false;
          console.error(e);
        }
      }
    );
  }

  /**
   * GOOGLE PAY
   */
  async requestGooglePayPayment(): Promise<void> {
    if (this.processing) {
      return;
    }
    if (this.conversionsSubscription) {
      this.conversionsSubscription.unsubscribe();
    }
    
    this.processing = true;
    this.conversionsSubscription = this.stateService.conversions$.subscribe(
      async (conversions) => {
        this.conversions = conversions;
        if (this.googlePay) {
          this.googlePay.destroy();
        }

        const costUSD = this.cost / 100_000_000 * conversions.USD;
        const paymentRequest = this.payments.paymentRequest({
          countryCode: 'US',
          currencyCode: 'USD',
          total: {
            amount: costUSD.toFixed(2),
            label: 'Total'
          }
        });
        this.googlePay = await this.payments.googlePay(paymentRequest , {
          referenceId: `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
        });

        await this.googlePay.attach(`#google-pay-button`, {
          buttonType: 'pay',
          buttonSizeMode: 'fill',
        });
        this.loadingGooglePay = false;

        document.getElementById('google-pay-button').addEventListener('click', async event => {
          if (this.isCheckoutLocked > 0 || this.isTokenizing > 0) {
            return;
          }
          event.preventDefault();
          try {
            // lock the checkout UI and show a loading spinner until the square modals are finished
            this.isCheckoutLocked++;
            this.isTokenizing++;
            const tokenResult = await this.googlePay.tokenize();
            if (tokenResult?.status === 'OK') {
              const card = tokenResult.details?.card;
              if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
                console.error(`Cannot retreive payment card details`);
                this.accelerateError = 'apple_pay_no_card_details';
                this.processing = false;
                return;
              }
              const verificationToken = await this.$verifyBuyer(this.payments, tokenResult.token, tokenResult.details, costUSD.toFixed(2));
              if (!verificationToken || !verificationToken.token) {
                console.error(`SCA verification failed`);
                this.accelerateError = 'SCA Verification Failed. Payment Declined.';
                this.processing = false;
                return;
              }
              const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
              // keep checkout in loading state until the acceleration request completes
              this.isCheckoutLocked++;
              this.isTokenizing++;
              this.servicesApiService.accelerateWithGooglePay$(
                this.tx.txid,
                tokenResult.token,
                verificationToken.token,
                cardTag,
                `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
                costUSD,
                verificationToken.userChallenged
              ).subscribe({
                next: () => {
                  this.processing = false;
                  this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
                  this.audioService.playSound('ascend-chime-cartoon');
                  if (this.googlePay) {
                    this.googlePay.destroy();
                  }
                  setTimeout(() => {
                    this.isTokenizing--;
                    this.isCheckoutLocked--;
                    this.moveToStep('paid', true);
                  }, 1000);
                },
                error: (response) => {
                  this.processing = false;
                  this.accelerateError = response.error;
                  this.isTokenizing--;
                  this.isCheckoutLocked--;
                  if (!(response.status === 403 && response.error === 'not_available')) {
                    setTimeout(() => {
                      // Reset everything by reloading the page :D, can be improved
                      const urlParams = new URLSearchParams(window.location.search);
                      window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
                    }, 10000);
                  }
                }
              });
            } else {
              this.processing = false;
              let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
              if (tokenResult.errors) {
                errorMessage += ` and errors: ${JSON.stringify(
                  tokenResult.errors,
                )}`;
              }
              throw new Error(errorMessage);
            }
          } finally {
            // always unlock the checkout once we're finished
            this.isTokenizing--;
            this.isCheckoutLocked--;
          }
        });
      }
    );
  }

  /**
   * Card On File
   */
  async requestCardOnFilePayment(): Promise<void> {
    if (this.processing) {
      return;
    }
    if (this.conversionsSubscription) {
      this.conversionsSubscription.unsubscribe();
    }
    
    this.processing = true;
    this.conversionsSubscription = this.stateService.conversions$.subscribe(
      async (conversions) => {
        this.conversions = conversions;

        const costUSD = this.cost / 100_000_000 * conversions.USD;
        if (this.isCheckoutLocked > 0) {
          return;
        }
        const cardOnFile = this.estimate?.availablePaymentMethods?.cardOnFile;
        if (!cardOnFile?.card) {
          this.accelerateError = 'card_on_file_not_found';
          return;
        }
        this.loadingCardOnFile = false;
        
        try {
          this.isCheckoutLocked += 2;
          this.isTokenizing += 2;
          
          const nameParts = cardOnFile.card.name.split(' ');
          const assumedGivenName = nameParts[0];
          const assumedFamilyName = nameParts.length > 1 ? nameParts[1] : undefined;
          const verificationDetails = {
            card: {
              billing: {
                givenName: assumedGivenName,
                familyName: assumedFamilyName,
                addressLines: [cardOnFile.card.billing.addressLine1 ?? ''],
                city: cardOnFile.card.billing.locality ?? '',
                state: cardOnFile.card.billing.administrativeDistrictLevel1 ?? '',
                countyCode: cardOnFile.card.billing.country,
              }
            }
          };
          const verificationToken = await this.$verifyBuyer(this.payments, cardOnFile.card.card_id, verificationDetails, costUSD.toFixed(2));
          if (!verificationToken || !verificationToken.token) {
            console.error(`SCA verification failed`);
            this.accelerateError = 'SCA Verification Failed. Payment Declined.';
            this.processing = false;
            return;
          }

          this.servicesApiService.accelerateWithCardOnFile$(
            this.tx.txid,
            cardOnFile.card.card_id,
            verificationToken.token,
            `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
            costUSD,
            verificationToken.userChallenged
          ).subscribe({
            next: () => {
              this.processing = false;
              this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
              this.audioService.playSound('ascend-chime-cartoon');
              setTimeout(() => {
                this.isCheckoutLocked--;
                this.isTokenizing--;
                this.moveToStep('paid', true);
              }, 1000);
            },
            error: (response) => {
              this.processing = false;
              this.accelerateError = response.error;
              this.isCheckoutLocked--;
              this.isTokenizing--;
              if (!(response.status === 403 && response.error === 'not_available')) {
                setTimeout(() => {
                  // Reset everything by reloading the page :D, can be improved
                  const urlParams = new URLSearchParams(window.location.search);
                  window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
                }, 3000);
              }
            }
          });

        } catch (e) {
          console.log(e);
          this.isCheckoutLocked--;
          this.isTokenizing--;
          this.processing = false;
          this.accelerateError = e.message;

        } finally {
          // always unlock the checkout once we're finished
          this.isCheckoutLocked--;
          this.isTokenizing--;
        }
      }
    );
  }

  /**
   * CASHAPP
   */
  async requestCashAppPayment(): Promise<void> {
    if (this.processing) {
      return;
    }
    if (this.conversionsSubscription) {
      this.conversionsSubscription.unsubscribe();
    }

    this.processing = true;
    this.conversionsSubscription = this.stateService.conversions$.subscribe(
      async (conversions) => {
        this.conversions = conversions;
        if (this.cashAppPay) {
          this.cashAppPay.destroy();
        }

        const redirectHostname = document.location.hostname === 'localhost' ? `http://localhost:4200`: `https://${document.location.hostname}`;
        const costUSD = this.step === 'processing' ? 69.69 : (this.cost / 100_000_000 * conversions.USD); // When we're redirected to this component, the payment data is already linked to the payment token, so does not matter what amonut we put in there, therefore it's 69.69
        const paymentRequest = this.payments.paymentRequest({
          countryCode: 'US',
          currencyCode: 'USD',
          total: {
            amount: costUSD.toFixed(2),
            label: 'Total',
            pending: true,
            productUrl: `${redirectHostname}/tx/${this.tx.txid}`,
          }
        });
        this.cashAppPay = await this.payments.cashAppPay(paymentRequest, {
          redirectURL: `${redirectHostname}/tx/${this.tx.txid}`,
          referenceId: `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`
        });

        await this.cashAppPay.attach(`#cash-app-pay`, { theme: 'dark' });
        this.loadingCashapp = false;

        this.cashAppPay.addEventListener('ontokenization', event => {
          const { tokenResult, error } = event.detail;
          if (error) {
            this.processing = false;
            this.accelerateError = error;
          } else if (tokenResult.status === 'OK') {
            this.servicesApiService.accelerateWithCashApp$(
              this.tx.txid,
              tokenResult.token,
              tokenResult.details.cashAppPay.cashtag,
              tokenResult.details.cashAppPay.referenceId,
              costUSD
            ).subscribe({
              next: () => {
                this.processing = false;
                this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
                this.audioService.playSound('ascend-chime-cartoon');
                if (this.cashAppPay) {
                  this.cashAppPay.destroy();
                }
                setTimeout(() => {
                  this.moveToStep('paid', true);
                  if (window.history.replaceState) {
                    const urlParams = new URLSearchParams(window.location.search);
                    window.history.replaceState(null, null, window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ''));
                  }
                }, 1000);
              },
              error: (response) => {
                this.processing = false;
                this.accelerateError = response.error;
                if (!(response.status === 403 && response.error === 'not_available')) {
                  setTimeout(() => {
                    // Reset everything by reloading the page :D, can be improved
                    const urlParams = new URLSearchParams(window.location.search);
                    window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
                  }, 10000);
                }
              }
            });
          }
        });
      }
    );
  }

  /**
   * https://developer.squareup.com/docs/sca-overview
   */
  async $verifyBuyer(payments, token, details, amount): Promise<{token: string, userChallenged: boolean}> {
    const verificationDetails = {
      amount: amount,
      currencyCode: 'USD',
      intent: 'CHARGE',
      billingContact: {
        givenName: details.card?.billing?.givenName,
        familyName: details.card?.billing?.familyName,
        phone: details.card?.billing?.phone,
        addressLines: details.card?.billing?.addressLines,
        city: details.card?.billing?.city,
        state: details.card?.billing?.state,
        countryCode: details.card?.billing?.countryCode,
      },
    };

    const verificationResults = await payments.verifyBuyer(
      token,
      verificationDetails,
    );
    return verificationResults;
  }

  /**
   * BTCPay
   */
  async requestBTCPayInvoice(): Promise<void> {
    this.servicesApiService.generateBTCPayAcceleratorInvoice$(this.tx.txid, this.userBid).pipe(
      switchMap(response => {
        return this.servicesApiService.retreiveInvoice$(response.btcpayInvoiceId);
      }),
      catchError(error => {
        console.log(error);
        this.btcpayInvoiceFailed = true;
        return of(null);
      })
    ).subscribe((invoice) => {
        this.invoice = invoice;
        this.cd.markForCheck();
    });
  }

  bitcoinPaymentCompleted(): void {
    this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
    this.audioService.playSound('ascend-chime-cartoon');
    this.estimateSubscription.unsubscribe();
    this.moveToStep('paid', true);
  }

  isLoggedIn(): boolean {
    return this.auth !== null;
  }

  /**
   * UI events
   */
  selectedOptionChanged(event): void {
    this.selectedOption = event.target.id;
  }

  get step(): CheckoutStep {
    return this._step;
  }

  get paymentMethods(): PaymentMethod[] {
    return Object.keys(this.estimate?.availablePaymentMethods || {}) as PaymentMethod[];
  }

  get couldPayWithBitcoin(): boolean {
    return !!this.estimate?.availablePaymentMethods?.bitcoin;
  }

  get couldPayWithCashapp(): boolean {
    if (!this.cashappEnabled) {
      return false;
    }
    return !!this.estimate?.availablePaymentMethods?.cashapp;
  }

  get couldPayWithApplePay(): boolean {
    if (!this.applePayEnabled) {
      return false;
    }
    return !!this.estimate?.availablePaymentMethods?.applePay;
  }

  get couldPayWithGooglePay(): boolean {
    if (!this.googlePayEnabled) {
      return false;
    }
    return !!this.estimate?.availablePaymentMethods?.googlePay;
  }

  get couldPayWithBalance(): boolean {
    if (!this.hasAccessToBalanceMode) {
      return false;
    }
    return !!this.estimate?.availablePaymentMethods?.balance;
  }

  get couldPay(): boolean {
    return this.couldPayWithBalance || this.couldPayWithBitcoin || this.couldPayWithCashapp || this.couldPayWithApplePay || this.couldPayWithGooglePay;
  }

  get canPayWithBitcoin(): boolean {
    const paymentMethod = this.estimate?.availablePaymentMethods?.bitcoin;
    return paymentMethod && this.cost >= paymentMethod.min && this.cost <= paymentMethod.max;
  }

  get canPayWithCashapp(): boolean {
    if (!this.cashappEnabled || !this.conversions || (!this.isProdDomain && !isDevMode())) {
      return false;
    }

    const paymentMethod = this.estimate?.availablePaymentMethods?.cashapp;
    if (paymentMethod) {
      const costUSD = (this.cost / 100_000_000 * this.conversions.USD);
      if (costUSD >= paymentMethod.min && costUSD <= paymentMethod.max) {
        return true;
      }
    }

    return false;
  }

  get canPayWithApplePay(): boolean {
    if (!this.applePayEnabled || !this.conversions || (!this.isProdDomain && !isDevMode())) {
      return false;
    }

    const paymentMethod = this.estimate?.availablePaymentMethods?.applePay;
    if (paymentMethod) {
      const costUSD = (this.cost / 100_000_000 * this.conversions.USD);
      if (costUSD >= paymentMethod.min && costUSD <= paymentMethod.max) {
        return true;
      }
    }

    return false;
  }

  get canPayWithGooglePay(): boolean {
    if (!this.googlePayEnabled || !this.conversions || (!this.isProdDomain && !isDevMode())) {
      return false;
    }

    const paymentMethod = this.estimate?.availablePaymentMethods?.googlePay;
    if (paymentMethod) {
      const costUSD = (this.cost / 100_000_000 * this.conversions.USD);
      if (costUSD >= paymentMethod.min && costUSD <= paymentMethod.max) {
        return true;
      }
    }

    return false;
  }

  get canPayWithCardOnFile(): boolean {
    if (!this.cardOnFileEnabled || !this.conversions || (!this.isProdDomain && !isDevMode())) {
      return false;
    }

    const paymentMethod = this.estimate?.availablePaymentMethods?.cardOnFile;
    if (paymentMethod) {
      const costUSD = (this.cost / 100_000_000 * this.conversions.USD);
      if (costUSD >= paymentMethod.min && costUSD <= paymentMethod.max) {
        return true;
      }
    }

    return false;
  }

  get canPayWithBalance(): boolean {
    if (!this.hasAccessToBalanceMode) {
      return false;
    }
    const paymentMethod = this.estimate?.availablePaymentMethods?.balance;
    return paymentMethod && this.cost >= paymentMethod.min && this.cost <= paymentMethod.max && this.cost <= this.estimate?.userBalance;
  }

  get canPay(): boolean {
    return this.canPayWithBalance || this.canPayWithBitcoin || this.canPayWithCashapp || this.canPayWithApplePay || this.canPayWithGooglePay;
  }

  get hasAccessToBalanceMode(): boolean {
    return this.isLoggedIn() && this.estimate?.hasAccess;
  }

  get timeSincePaid(): number {
    return Date.now() - this.timePaid;
  }

  @HostListener('window:resize', ['$event'])
  onResize(): void {
    this.isMobile = window.innerWidth <= 767.98;
  }
}