[ui] polish pizza accelerator

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

@@ -1,6 +1,5 @@
-import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef, SimpleChanges } from '@angular/core';
 import { Subscription, tap, of, catchError } from 'rxjs';
-import { WebsocketService } from '../../services/websocket.service';
 import { ServicesApiServices } from '../../services/services-api.service';
 import { nextRoundNumber } from '../../shared/common.utils';
 import { StateService } from '../../services/state.service';
@@ -14,6 +13,7 @@ import { AudioService } from '../../services/audio.service';
 export class AccelerateCheckout implements OnInit, OnDestroy {
   @Input() eta: number = Date.now() + 123456789;
   @Input() txid: string = '70c18d76cdb285a1b5bd87fdaae165880afa189809c30b4083ff7c0e69ee09ad';
+  @Input() scrollEvent: boolean;
   @Output() close = new EventEmitter<null>();
 
   calculating = true;
@@ -34,10 +34,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   cashAppPay: any;
   cashAppSubscription: Subscription;
   conversionsSubscription: Subscription;
-  step: 'cta' | 'checkout' | 'processing' | 'completed' = 'cta';
+  step: 'cta' | 'checkout' | 'processing' = 'cta';
 
   constructor(
-    private websocketService: WebsocketService,
     private servicesApiService: ServicesApiServices,
     private stateService: StateService,
     private audioService: AudioService,
@@ -72,7 +71,33 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     }
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.scrollEvent) {
+      this.scrollToPreview('acceleratePreviewAnchor', 'start');
+    }
+  }
+
   /**
+  * Scroll to element id with or without setTimeout
+  */
+  scrollToPreviewWithTimeout(id: string, position: ScrollLogicalPosition) {
+    setTimeout(() => {
+      this.scrollToPreview(id, position);
+    }, 1000);
+  }
+  scrollToPreview(id: string, position: ScrollLogicalPosition) {
+    const acceleratePreviewAnchor = document.getElementById(id);
+    if (acceleratePreviewAnchor) {
+      this.cd.markForCheck();
+      acceleratePreviewAnchor.scrollIntoView({
+        behavior: 'smooth',
+        inline: position,
+        block: position,
+      });
+    }
+  }
+
+ /**
    * Accelerator
    */
   estimate() {
@@ -206,10 +231,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
             ).subscribe({
               next: () => {
                 that.audioService.playSound('ascend-chime-cartoon');
-                that.step = 'completed';
-                setTimeout(() => {
-                  that.closeModal();
-                }, 10000);
+                that.closeModal();
               },
               error: (response) => {
                 if (response.status === 403 && response.error === 'not_available') {
@@ -236,10 +258,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   }
   selectedOptionChanged(event) {
     this.choosenOption = event.target.id;
-    if (this.choosenOption === 'wait') {
-      this.restart();
-      this.closeModal();
-    }
   }
   restart() {
     this.step = 'cta';