refactored cross tab checkout state management

soonaverse · Mar 3, 2024 · 5d984e4 · 5d984e4
1 parent 49bba17
commit 5d984e4
Show file tree

Hide file tree

Showing 4 changed files with 236 additions and 117 deletions.
diff --git a/src/app/components/cart/components/cart-modal/cart-modal.component.html b/src/app/components/cart/components/cart-modal/cart-modal.component.html
@@ -356,17 +356,17 @@ <h4 class="modal-title">Your Cart</h4>
                     nz-button
                     nzType="default"
                     [disabled]="
-                      (cartService.getCurrentStep() !== stepType.CONFIRM &&
-                        !helper.isExpired(cartService.pendingTransaction$ | async) &&
-                        cartService.getSelectedNetwork() === item.pricing.tokenSymbol) ||
+                      ((cartService.pendingTransaction$ | async) &&
+                      !helper.isExpired(cartService.pendingTransaction$ | async) &&
+                      (cartService.selectedNetwork$ | async) === item.pricing.tokenSymbol) ||
                       (isLoading$ | async)
                     "
                     (click)="removeFromCart(item)"
                     nz-tooltip
                     [nzTooltipTitle]="
-                      cartService.getCurrentStep() !== stepType.CONFIRM &&
+                      (cartService.pendingTransaction$ | async) &&
                       !helper.isExpired(cartService.pendingTransaction$ | async) &&
-                      cartService.getSelectedNetwork() === item.pricing.tokenSymbol
+                      (cartService.selectedNetwork$ | async) === item.pricing.tokenSymbol
                         ? 'Item is part of a pending transaction. Please wait for the transaction to expire or be completed before removing this item from the cart.'
                         : (isLoading$ | async)
                         ? 'Cart items are loading. Please wait.'
@@ -383,6 +383,11 @@ <h4 class="modal-title">Your Cart</h4>
           </ng-template>
         </div>
         <ng-template #emptyCart>Your cart is empty.</ng-template>
+        <div class="tester">
+          Pending Transaction: {{ (cartService.pendingTransaction$ | async) }}
+          <br />
+          Transaction Expired: {{ helper.isExpired(cartService.pendingTransaction$ | async) }}
+        </div>
       </ng-container>
 
       <div class="text-center" *nzModalFooter>
@@ -398,11 +403,11 @@ <h4 class="modal-title">Your Cart</h4>
         </button>
 
         <button
-          *ngIf="cartService.getCurrentStep() === stepType.CONFIRM && cartItems.length"
+          *ngIf="cartItems.length"
           nz-button
           nzType="default"
           (click)="clearCart()"
-          [disabled]="isLoading$ | async"
+          [disabled]="(cartService.pendingTransaction$ | async) && !helper.isExpired(cartService.pendingTransaction$ | async) || (isLoading$ | async)"
           nz-tooltip
           [nzTooltipTitle]="(isLoading$ | async) ? 'Waiting for cart items to finish loading' : ''"
           class="text-red-600 hover:text-red-800"
@@ -420,6 +425,7 @@ <h4 class="modal-title">Your Cart</h4>
           Checkout
         </button>
       </div>
+
     </div>
   </nz-modal>
 </ng-container>
diff --git a/src/app/components/cart/components/cart-modal/cart-modal.component.ts b/src/app/components/cart/components/cart-modal/cart-modal.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { Network, Transaction } from '@build-5/interfaces';
-import { Subscription, take, of, Observable, BehaviorSubject } from 'rxjs';
+import { Subscription, take, of, Observable, BehaviorSubject, Subject } from 'rxjs';
 import { CartService, CartItem } from '@components/cart/services/cart.service';
 import { AuthService } from '@components/auth/services/auth.service';
 import { Router } from '@angular/router';
@@ -9,6 +9,7 @@ import { UnitsService } from '@core/services/units/units.service';
 import { map, switchMap, tap } from 'rxjs/operators';
 import { DeviceService } from '@core/services/device';
 import { HelperService } from '@pages/nft/services/helper.service';
+import {  } from '@angular/core';
 
 export enum StepType {
   CONFIRM = 'Confirm',
@@ -23,7 +24,7 @@ export enum StepType {
   styleUrls: ['./cart-modal.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CartModalComponent implements OnDestroy {
+export class CartModalComponent implements OnInit, OnDestroy {
   private subscriptions$ = new Subscription();
   public collectionPath: string = ROUTER_UTILS.config.collection.root;
   public nftPath: string = ROUTER_UTILS.config.nft.root;
@@ -40,12 +41,20 @@ export class CartModalComponent implements OnDestroy {
   public cartModalOpen$ = this.cartService.cartModalOpen$;
   public currentStep$ = this.cartService.currentStep$;
 
+  public selectedNetwork$ = this.cartService.selectedNetwork$;
+
   public memberSpaces$ = this.cartService.memberSpaces$;
   public memberGuardianSpaces$ = this.cartService.memberGuardianSpaces$;
   public memberAwards$ = this.cartService.memberAwards$;
 
   public isLoading$ = this.cartService.isLoading$;
 
+  public currentStep: StepType | null = null;
+  public isTransactionExpired: boolean | null = null;
+  public selectedNetwork: string | null = null;
+  public isLoading: boolean = false;
+  public pendingTransaction: Transaction | undefined = undefined;
+
   constructor(
     public cartService: CartService,
     private cd: ChangeDetectorRef,
@@ -56,6 +65,52 @@ export class CartModalComponent implements OnDestroy {
     public helper: HelperService,
   ) {}
 
+  ngOnInit() {
+    this.subscriptions$.add(
+        this.cartService.currentStep$.subscribe(step => {
+            this.currentStep = step;
+            this.triggerChangeDetection();
+        })
+    );
+
+    this.subscriptions$.add(
+      this.cartService.selectedNetwork$.subscribe(network => {
+          this.selectedNetwork = network;
+          this.triggerChangeDetection();
+      })
+    );
+
+    this.subscriptions$.add(
+      this.cartService.pendingTransaction$.subscribe(transaction => {
+        this.pendingTransaction = transaction;
+        this.triggerChangeDetection();
+      })
+    );
+
+    this.subscriptions$.add(
+        this.cartService.isLoading$.subscribe(loading => {
+            this.isLoading = loading;
+            this.triggerChangeDetection();
+        })
+    );
+
+    this.subscriptions$.add(
+        this.cartService.cartUpdateObservable$.subscribe(() => {
+            this.triggerChangeDetection();
+        })
+    );
+
+    this.subscriptions$.add(
+      this.cartService.triggerChangeDetectionSubject$.subscribe(() => {
+          this.triggerChangeDetection();
+      })
+    );
+  }
+
+  public triggerChangeDetection(): void {
+    this.cd.markForCheck();
+  }
+
   trackByItemId(index: number, item: CartItem): string {
     return item.nft.uid;
   }

diff --git a/src/app/components/cart/components/checkout/checkout-overlay.component.html b/src/app/components/cart/components/checkout/checkout-overlay.component.html
@@ -26,7 +26,7 @@
         <div nz-col nzSpan="20">
           <h3 nz-typography nzTitle level="4" class="mb-2">
             Network: <span class="uppercase">{{ group.tokenSymbol }}</span> -
-            <span class="font-bold">{{ group.items.length }}</span> unique NFTs in network group
+            <span class="font-bold">{{ group.totalQuantity }}</span> NFTs in network group
             with total Price of
             {{ group.totalPrice | formatToken : group.network : true : true | async }} ({{
               unitsService.getUsd(