Cart item remove button disable logic now includes expiry of pending …

…purchase transaction plus some minor UI styling tweaks.
soonaverse · Feb 28, 2024 · 49bba17 · 49bba17
1 parent 0d33e81
commit 49bba17
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 26 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
@@ -357,13 +357,15 @@ <h4 class="modal-title">Your Cart</h4>
                     nzType="default"
                     [disabled]="
                       (cartService.getCurrentStep() !== stepType.CONFIRM &&
+                        !helper.isExpired(cartService.pendingTransaction$ | async) &&
                         cartService.getSelectedNetwork() === item.pricing.tokenSymbol) ||
                       (isLoading$ | async)
                     "
                     (click)="removeFromCart(item)"
                     nz-tooltip
                     [nzTooltipTitle]="
                       cartService.getCurrentStep() !== stepType.CONFIRM &&
+                      !helper.isExpired(cartService.pendingTransaction$ | async) &&
                       cartService.getSelectedNetwork() === 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)

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,19 +1,14 @@
-import {
-  Component,
-  OnInit,
-  OnDestroy,
-  ChangeDetectorRef,
-  ChangeDetectionStrategy,
-} from '@angular/core';
-import { Network } from '@build-5/interfaces';
-import { Subscription, take, of, Observable } from 'rxjs';
+import { Component, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { Network, Transaction } from '@build-5/interfaces';
+import { Subscription, take, of, Observable, BehaviorSubject } from 'rxjs';
 import { CartService, CartItem } from '@components/cart/services/cart.service';
 import { AuthService } from '@components/auth/services/auth.service';
 import { Router } from '@angular/router';
 import { ROUTER_UTILS } from '@core/utils/router.utils';
 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';
 
 export enum StepType {
   CONFIRM = 'Confirm',
@@ -58,6 +53,7 @@ export class CartModalComponent implements OnDestroy {
     private router: Router,
     public unitsService: UnitsService,
     public deviceService: DeviceService,
+    public helper: HelperService,
   ) {}
 
   trackByItemId(index: number, item: CartItem): string {

diff --git a/src/app/components/cart/components/checkout/checkout-overlay.component.html b/src/app/components/cart/components/checkout/checkout-overlay.component.html
@@ -310,7 +310,7 @@ <h3 nz-typography nzTitle level="4" class="mb-2">
 
   <nz-divider></nz-divider>
 
-  <div [ngSwitch]="currentStep" class="w-full">
+  <div [ngSwitch]="currentStep" class="w-full pb-2">
     <ng-container *ngSwitchCase="stepType.CONFIRM">
       <ng-container *ngTemplateOutlet="confirmTemplate"></ng-container>
     </ng-container>

diff --git a/src/app/components/cart/services/cart.service.ts b/src/app/components/cart/services/cart.service.ts
@@ -80,7 +80,7 @@ export class CartService {
   private currentStepSubject$ = new BehaviorSubject<StepType>(StepType.CONFIRM);
   public currentStep$ = this.currentStepSubject$.asObservable();
   private checkoutOverlayModalRef: NzModalRef | null = null;
-  private pendingTransaction$: BehaviorSubject<Transaction | undefined> = new BehaviorSubject<
+  public pendingTransaction$: BehaviorSubject<Transaction | undefined> = new BehaviorSubject<
     Transaction | undefined
   >(undefined);
   private memberSpacesSubject$ = new BehaviorSubject<string[]>([]);

diff --git a/src/app/components/nft/components/nft-checkout/nft-checkout.component.html b/src/app/components/nft/components/nft-checkout/nft-checkout.component.html
@@ -70,7 +70,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
         >
           <ng-container *ngIf="!nftQuantity || nftQuantity <= 1">
             <div
-              class="text-xxs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
+              class="text-xs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
               i18n
             >
               Total price
@@ -178,7 +178,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
               <!-- Price Each -->
               <div class="flex flex-col items-center mr-4">
                 <div
-                  class="text-xxs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark underline"
+                  class="text-xs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark underline"
                   i18n
                 >
                   Price
@@ -188,7 +188,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                   *ngIf="discount() < 1 && currentStep === stepType.CONFIRM"
                 >
                   <div
-                    class="mr-2 font-bold line-through text-foregrounds-tertiary alignCenter text-xxs"
+                    class="mr-2 font-bold line-through text-foregrounds-tertiary alignCenter text-xs"
                   >
                     {{
                       targetPrice | formatToken : collection?.mintingData?.network : true | async
@@ -209,7 +209,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                       }})
                     </span>
                   </div>
-                  <div class="mr-2 font-bold truncate alignCenter text-xxs">
+                  <div class="mr-2 font-bold truncate alignCenter text-xs">
                     {{
                       calc(targetPrice, discount())
                         | formatToken : collection?.mintingData?.network : true
@@ -236,7 +236,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                   class="flex items-center mt-2 text-sm"
                   *ngIf="discount() === 1 || currentStep !== stepType.CONFIRM"
                 >
-                  <div class="mr-2 font-bold truncate alignCenter text-xxs">
+                  <div class="mr-2 font-bold truncate alignCenter text-xs">
                     {{
                       (currentStep !== stepType.CONFIRM ? pricePerItem : targetPrice)
                         | formatToken : collection?.mintingData?.network : true
@@ -265,7 +265,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
               <!-- Order Qty -->
               <div class="flex flex-col items-center mr-4">
                 <div
-                  class="text-xxs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark underline"
+                  class="text-xs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark underline"
                   i18n
                 >
                   Quantity
@@ -281,7 +281,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
               <!-- Total Price -->
               <div class="flex flex-col items-center">
                 <div
-                  class="text-xxs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark underline"
+                  class="text-xs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark underline"
                   i18n
                 >
                   Total
@@ -291,7 +291,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                   *ngIf="discount() < 1 && currentStep === stepType.CONFIRM && targetPrice !== null"
                 >
                   <div
-                    class="mr-2 font-bold line-through text-foregrounds-tertiary alignCenter text-xxs"
+                    class="mr-2 font-bold line-through text-foregrounds-tertiary alignCenter text-xs"
                   >
                     {{
                       targetPrice * nftQuantity
@@ -314,7 +314,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                       }})
                     </span>
                   </div>
-                  <div class="mr-2 font-bold truncate alignCenter text-xxs">
+                  <div class="mr-2 font-bold truncate alignCenter text-xs">
                     {{
                       calc(targetPrice, discount()) * nftQuantity
                         | formatToken : collection?.mintingData?.network : true
@@ -344,7 +344,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                     (currentStep !== stepType.CONFIRM && targetAmount !== null)
                   "
                 >
-                  <div class="mr-2 font-bold truncate alignCenter text-xxs">
+                  <div class="mr-2 font-bold truncate alignCenter text-xs">
                     {{
                       (currentStep !== stepType.CONFIRM && targetAmount !== null
                         ? targetAmount
@@ -396,7 +396,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                 <div class="flex flex-col items-center mr-4">
                   <div class="flex flex-col items-center mr-4">
                     <div
-                      class="text-xxs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
+                      class="text-xs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
                       i18n
                     >
                       Target Price
@@ -410,7 +410,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                 <div class="flex flex-col items-center mr-4">
                   <div class="flex flex-col items-center mr-4">
                     <div
-                      class="text-xxs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
+                      class="text-xs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
                       i18n
                     >
                       Target Amount
@@ -424,7 +424,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                 <div class="flex flex-col items-center mr-4">
                   <div class="flex flex-col items-center mr-4">
                     <div
-                      class="text-xxs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
+                      class="text-xs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
                       i18n
                     >
                       Quantity Selected
@@ -438,7 +438,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                 <div class="flex flex-col items-center mr-4">
                   <div class="flex flex-col items-center mr-4">
                     <div
-                      class="text-xxs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
+                      class="text-xs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
                       i18n
                     >
                       Discount
@@ -452,7 +452,7 @@ <h3 class="mb-1 text-2xl font-bold truncate">{{ getTitle() }}</h3>
                 <div class="flex flex-col items-center mr-4">
                   <div class="flex flex-col items-center mr-4">
                     <div
-                      class="text-xxs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
+                      class="text-xs font-medium text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
                       i18n
                     >
                       Purchase Workflow Step