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 e042b83f7..e224348a6 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html @@ -330,7 +330,10 @@ - +
+ + +
} @@ -442,8 +445,9 @@
-
- +
+ +
} @else if (step === 'cashapp' || step === 'applepay' || step === 'googlepay' || step === 'cardonfile' || step === 'bitcoin') { 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 261dde8f5..671952af1 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts @@ -71,6 +71,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { @Input() forceMobile: boolean = false; @Input() showDetails: boolean = false; @Input() noCTA: boolean = false; + @Input() initialStep: CheckoutStep = 'summary'; @Input() partnerCode: string | undefined; @Output() unavailable = new EventEmitter(); @Output() completed = new EventEmitter(); @@ -167,7 +168,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { this.accelerateError = null; this.timePaid = 0; this.btcpayInvoiceFailed = false; - this.moveToStep('summary', true); + this.moveToStep(this.initialStep, true); } else { this.auth = auth; } @@ -180,7 +181,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { this.insertSquare(); this.setupSquare(); } else { - this.moveToStep('summary', true); + this.moveToStep(this.initialStep, true); } this.conversionsSubscription = this.stateService.conversions$.subscribe( @@ -233,9 +234,11 @@ export class AccelerateCheckout implements OnInit, OnDestroy { if (this._step === 'checkout') { this.insertSquare(); this.enterpriseService.goal(8); - this.scrollToElementWithTimeout('acceleratePreviewAnchor', 'start', 100); + if (!this.startedPastSummary) { + this.scrollToElementWithTimeout('acceleratePreviewAnchor', 'start', 100); + } } - + if (this._step === 'checkout' && this.canPayWithBitcoin) { this.btcpayInvoiceFailed = false; this.invoice = undefined; @@ -312,14 +315,14 @@ export class AccelerateCheckout implements OnInit, OnDestroy { tap((response) => { if (response.status === 204) { this.quoteError = `cannot_accelerate_tx`; - if (this.step === 'summary') { + if (this.step === 'summary' || this.startedPastSummary) { this.unavailable.emit(true); } } else { this.estimate = response.body; if (!this.estimate) { this.quoteError = `cannot_accelerate_tx`; - if (this.step === 'summary') { + if (this.step === 'summary' || this.startedPastSummary) { this.unavailable.emit(true); } return; @@ -349,7 +352,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { if (!this.couldPay) { this.quoteError = `cannot_accelerate_tx`; - if (this.step === 'summary') { + if (this.step === 'summary' || this.startedPastSummary) { this.unavailable.emit(true); } return; @@ -368,7 +371,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { this.estimate = undefined; this.quoteError = `cannot_accelerate_tx`; this.estimateSubscription.unsubscribe(); - if (this.step === 'summary') { + if (this.step === 'summary' || this.startedPastSummary) { this.unavailable.emit(true); } else { this.accelerateError = 'cannot_accelerate_tx'; @@ -989,6 +992,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy { return this._step; } + get startedPastSummary(): boolean { + return this.initialStep !== 'summary'; + } + get paymentMethods(): PaymentMethod[] { return Object.keys(this.estimate?.availablePaymentMethods || {}) as PaymentMethod[]; } diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index 800d3b54e..94de0f9e1 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -1,5 +1,6 @@
+ @if (!acceleratorCheckoutActive) {
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index 459914f91..48d0d5c56 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/frontend/src/app/components/transaction/transaction.component.ts @@ -163,7 +163,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { acceleratorAvailable: boolean = this.stateService.env.ACCELERATOR_BUTTON && this.stateService.network === ''; eligibleForAcceleration: boolean = false; forceAccelerationSummary = false; - hideAccelerationSummary = false; accelerationFlowCompleted = false; showAccelerationDetails = false; hasAccelerationDetails = false; @@ -238,8 +237,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { window.location.hash = window.location.hash.replace(`&partnerCode=${this.partnerCode}`, '').replace(`#partnerCode=${this.partnerCode}`, ''); } - this.hideAccelerationSummary = this.stateService.isMempoolSpaceBuild ? this.storageService.getValue('hide-accelerator-pref') == 'true' : true; - if (!this.stateService.isLiquid()) { this.miningService.getMiningStats('1m').subscribe(stats => { this.miningStats = stats; @@ -576,7 +573,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { if (this.stateService.network === '') { if (!this.mempoolPosition.accelerated) { - if (!this.accelerationFlowCompleted && !this.hideAccelerationSummary && !this.showAccelerationSummary) { + if (!this.accelerationFlowCompleted && this.acceleratorCheckoutRequested && !this.showAccelerationSummary) { this.miningService.getMiningStats('1m').subscribe(stats => { this.miningStats = stats; }); @@ -1195,9 +1192,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { const anchor = Array.from(this.fragmentParams.entries()).find(([, value]) => value === '')?.[0] || null; this.inputIndex = inputIndex; this.outputIndex = outputIndex; - if (this.fragmentParams.has('accelerate')) { - this.forceAccelerationSummary = true; - } if (!anchor && !this.fragmentAnchor) { this.firstFragmentScroll = false; } @@ -1251,33 +1245,60 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { closeAccelerator(): void { this.router.navigate([], { fragment: this.formatFragment(this.fragmentParams), queryParamsHandling: 'merge' }); - this.hideAccelerationSummary = true; this.forceAccelerationSummary = false; - this.storageService.setValue('hide-accelerator-pref', 'true'); } openAccelerator(): void { this.router.navigate([], { fragment: this.formatFragment(this.fragmentParams, 'accelerate'), queryParamsHandling: 'merge' }); this.accelerationFlowCompleted = false; - this.hideAccelerationSummary = false; - this.storageService.setValue('hide-accelerator-pref', 'false'); } get showAccelerationSummary(): boolean { return ( this.tx + && !this.tx.status?.confirmed && !this.replaced && !this.isCached && this.acceleratorAvailable && this.eligibleForAcceleration - && ( - (!this.hideAccelerationSummary && !this.accelerationFlowCompleted) - || this.forceAccelerationSummary - ) + && !this.accelerationFlowCompleted + && (this.acceleratorCheckoutRequested || this.forceAccelerationSummary) && this.notAcceleratedOnLoad // avoid briefly showing accelerator checkout on already accelerated txs ); } + get acceleratorCheckoutRequested(): boolean { + return this.fragmentParams?.has('accelerate') === true; + } + + get acceleratorCheckoutLoading(): boolean { + if (!this.acceleratorCheckoutRequested || this.error || this.showAccelerationSummary) { + return false; + } + + return ( + this.isLoadingTx + || this.loadingCachedTx + || !!( + this.tx + && !this.tx.status?.confirmed + && !this.replaced + && !this.isCached + && this.acceleratorAvailable + && this.eligibleForAcceleration + && this.notAcceleratedOnLoad === null + ) + ); + } + + get acceleratorCheckoutActive(): boolean { + return this.acceleratorCheckoutReady || this.acceleratorCheckoutLoading; + } + + get acceleratorCheckoutReady(): boolean { + return this.acceleratorCheckoutRequested && !this.error && this.showAccelerationSummary; + } + ngOnDestroy() { this.subscription.unsubscribe(); this.fetchCpfpSubscription.unsubscribe();