NFT checkout styling fixes, USD conversions added in more places, ext…

…ended cart qty input width, add multiple NFTs to cart from NFT page
soonaverse · Feb 22, 2024 · a905a88 · a905a88
1 parent 2f0738a
commit a905a88
Show file tree

Hide file tree

Showing 8 changed files with 259 additions and 114 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
@@ -98,15 +98,15 @@ <h4 class="modal-title">Your Cart</h4>
 
                   <!-- Quantity -->
                   <div>
-                    <div class="underline font-bold">Qty Added / Available</div>
+                    <div class="underline font-bold">Qty / Available</div>
                     <nz-form-item class="grow">
                       <nz-form-control
                         i18n-nzErrorTip
                         nzErrorTip="Minimum 1 and maximum {{
                           cartService.getAvailableNftQuantity(item) | async
                         }}"
                       >
-                        <nz-input-group nzSize="default" [nzSuffix]="suffixMaxQty" class="w-40">
+                        <nz-input-group nzSize="default" [nzSuffix]="suffixMaxQty" class="w-full">
                           <input
                             nz-input
                             type="number"
@@ -267,7 +267,7 @@ <h4 class="modal-title">Your Cart</h4>
                   </ng-container>
                 </div>
 
-                <div class="text-lg font-bold truncate flex-1 mr-4">
+                <div class="font-bold truncate flex-1 mr-4">
                   <div class="flex items-baseline">
                     <nz-form-item class="grow">
                       <nz-form-control
@@ -276,7 +276,7 @@ <h4 class="modal-title">Your Cart</h4>
                           cartService.getAvailableNftQuantity(item) | async
                         }}"
                       >
-                        <nz-input-group nzSize="default" [nzSuffix]="suffixMaxQty" class="w-30">
+                        <nz-input-group nzSize="default" [nzSuffix]="suffixMaxQty" class="w-full">
                           <input
                             nz-input
                             type="number"

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
diff --git a/src/app/components/nft/components/nft-checkout/nft-checkout.component.less b/src/app/components/nft/components/nft-checkout/nft-checkout.component.less
@@ -0,0 +1,3 @@
+.alignCenter {
+  text-align: center;
+}
diff --git a/src/app/components/nft/components/nft-checkout/nft-checkout.component.ts b/src/app/components/nft/components/nft-checkout/nft-checkout.component.ts
@@ -21,9 +21,7 @@ import { PreviewImageService } from '@core/services/preview-image';
 import { TransactionService } from '@core/services/transaction';
 import { UnitsService } from '@core/services/units';
 import {
-  getItem,
   removeItem,
-  setItem,
   StorageItem,
   setCheckoutTransaction,
   getCheckoutTransaction,
@@ -45,6 +43,7 @@ import {
 } from '@build-5/interfaces';
 import dayjs from 'dayjs';
 import { BehaviorSubject, firstValueFrom, interval, Subscription, take } from 'rxjs';
+import { CartService } from '@components/cart/services/cart.service';
 
 export enum StepType {
   CONFIRM = 'Confirm',
@@ -72,7 +71,6 @@ export class NftCheckoutComponent implements OnInit, OnDestroy {
   @Input() currentStep = StepType.CONFIRM;
 
   @Input() set isOpen(value: boolean) {
-    // console.log('Is Open changed:', value);
     this._isOpen = value;
     this.checkoutService.modalOpen$.next(value);
   }
@@ -95,7 +93,6 @@ export class NftCheckoutComponent implements OnInit, OnDestroy {
 
       if (this.currentStep === StepType.CONFIRM) {
         this.targetPrice = this._nft.availablePrice || this._nft.price || 0;
-        // console.log('targetPrice set, _nft.availablePrice, _nft.price, targetPrice: ', this._nft.availablePrice,  this._nft.price, this.targetPrice);
       }
     }
   }
@@ -165,17 +162,16 @@ export class NftCheckoutComponent implements OnInit, OnDestroy {
     private nftApi: NftApi,
     private fileApi: FileApi,
     private cache: CacheService,
+    public cartService: CartService,
   ) {}
 
   public ngOnInit(): void {
-    // console.log('[nft-checkout] loaded, qty passed in: ', this.nftQuantity);
     this.receivedTransactions = false;
     const listeningToTransaction: string[] = [];
     this.transaction$.pipe(untilDestroyed(this)).subscribe((val) => {
       if (val && val.type === TransactionType.ORDER) {
         this.targetAddress = val.payload.targetAddress;
         this.targetAmount = val.payload.amount;
-        // console.log('target amount set using val.payload.amount.  val: ', val);
         const expiresOn: dayjs.Dayjs = dayjs(val.payload.expiresOn!.toDate());
         if (expiresOn.isBefore(dayjs()) || val.payload?.void || val.payload?.reconciled) {
           // It's expired.
@@ -457,9 +453,12 @@ export class NftCheckoutComponent implements OnInit, OnDestroy {
         this.notification
           .processRequest(this.orderApi.orderNfts(sc), $localize`Order created.`, finish)
           .subscribe((val: any) => {
-            this.transSubscription?.unsubscribe();
-            setItem(StorageItem.CheckoutTransaction, val.uid);
-            this.transSubscription = this.orderApi
+            this.transSubscription$?.unsubscribe();
+            setCheckoutTransaction({
+              transactionId: val.uid,
+              source: 'nftCheckout',
+            });
+            this.transSubscription$ = this.orderApi
               .listen(val.uid)
               .subscribe(<any>this.transaction$);
             this.pushToHistory(val, val.uid, dayjs(), $localize`Waiting for transaction...`);
@@ -474,23 +473,26 @@ export class NftCheckoutComponent implements OnInit, OnDestroy {
         params.nft = this.nft.uid;
       }
 
-    if (this.nft.owner) {
-      params.nft = this.nft.uid;
-    }
+      if (this.nft.owner) {
+        params.nft = this.nft.uid;
+      }
 
-    await this.auth.sign(params, (sc, finish) => {
-      this.notification
-        .processRequest(this.orderApi.orderNft(sc), $localize`Order created.`, finish)
-        .subscribe((val: any) => {
-          this.transSubscription$?.unsubscribe();
-          setCheckoutTransaction({
-            transactionId: val.uid,
-            source: 'nftCheckout',
+      await this.auth.sign(params, (sc, finish) => {
+        this.notification
+          .processRequest(this.orderApi.orderNft(sc), $localize`Order created.`, finish)
+          .subscribe((val: any) => {
+            this.transSubscription$?.unsubscribe();
+            setCheckoutTransaction({
+              transactionId: val.uid,
+              source: 'nftCheckout',
+            });
+            this.transSubscription$ = this.orderApi
+              .listen(val.uid)
+              .subscribe(<any>this.transaction$);
+            this.pushToHistory(val, val.uid, dayjs(), $localize`Waiting for transaction...`);
           });
-          this.transSubscription$ = this.orderApi.listen(val.uid).subscribe(<any>this.transaction$);
-          this.pushToHistory(val, val.uid, dayjs(), $localize`Waiting for transaction...`);
-        });
-    });
+      });
+    }
   }
 
   public getTitle(): any {

diff --git a/src/app/components/nft/components/nft-checkout/nft-checkout.module.ts b/src/app/components/nft/components/nft-checkout/nft-checkout.module.ts
@@ -19,6 +19,7 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NftCheckoutComponent } from './nft-checkout.component';
+import { UsdBelowTwoDecimalsModule } from '@core/pipes/usd-below-two-decimals/usd-below-two-decimals.module';
 
 @NgModule({
   declarations: [NftCheckoutComponent],
@@ -42,6 +43,7 @@ import { NftCheckoutComponent } from './nft-checkout.component';
     ModalDrawerModule,
     WalletDeeplinkModule,
     TermsAndConditionsModule,
+    UsdBelowTwoDecimalsModule,
   ],
   exports: [NftCheckoutComponent],
 })

diff --git a/src/app/pages/nft/pages/nft/nft.page.html b/src/app/pages/nft/pages/nft/nft.page.html
@@ -77,24 +77,35 @@ <h1 class="mt-2 mb-1">{{ getTitle(data.nft$ | async) }}</h1>
           <div class="text-xs font-medium text-foregrounds-secondary" i18n>Current price</div>
           <div class="flex items-center mt-2">
             <ng-container
-              *ngIf="((data.nft$ | async)?.availablePrice || (data.nft$ | async)?.price); else noPrice"
+              *ngIf="(data.nft$ | async)?.availablePrice || (data.nft$ | async)?.price; else noPrice"
             >
               <div
                 class="mr-2 text-xs font-medium line-through truncate text-foregrounds-secondary"
                 *ngIf="discount(data.collection$ | async, data.nft$ | async) < 1"
               >
-                {{(((data.nft$ | async)?.availablePrice || (data.nft$ | async)?.price) |
+                {{ (((data.nft$ | async)?.availablePrice || (data.nft$ | async)?.price) |
                 formatToken: ((data.nft$ | async)?.placeholderNft ? (data.collection$ |
-                async)?.mintingData?.network : (data.nft$ | async)?.mintingData?.network): true |
-                async)}}
+                async)?.mintingData?.network : (data.nft$ | async)?.mintingData?.network):true) |
+                async }} ({{ unitsService.getUsd(cartService.valueDivideExponent({ value:
+                ((data.nft$ | async)?.availablePrice || (data.nft$ | async)?.price) || 0, exponents:
+                cartService.getDefaultNetworkDecimals() }), ((data.nft$ | async)?.placeholderNft ?
+                (data.collection$ | async)?.mintingData?.network : (data.nft$ |
+                async)?.mintingData?.network)) | async | currency: 'USD':'symbol':'1.0-2' }} USD)
               </div>
               <div class="text-lg font-bold truncate">
-                {{(calc(((data.nft$ | async)?.availablePrice || (data.nft$ | async)?.price),
+                {{ (calc(((data.nft$ | async)?.availablePrice || (data.nft$ | async)?.price),
                 discount(data.collection$ | async, data.nft$ | async)) | formatToken: ((data.nft$ |
                 async)?.placeholderNft ? (data.collection$ | async)?.mintingData?.network :
-                (data.nft$ | async)?.mintingData?.network): true | async)}}
+                (data.nft$ | async)?.mintingData?.network):true) | async }} ({{
+                unitsService.getUsd(cartService.valueDivideExponent({ value: calc(((data.nft$ |
+                async)?.availablePrice || (data.nft$ | async)?.price), discount(data.collection$ |
+                async, data.nft$ | async)) || 0, exponents: cartService.getDefaultNetworkDecimals()
+                }), ((data.nft$ | async)?.placeholderNft ? (data.collection$ |
+                async)?.mintingData?.network : (data.nft$ | async)?.mintingData?.network)) | async |
+                currency: 'USD':'symbol':'1.0-2' }} USD)
               </div>
             </ng-container>
+
             <ng-template #noPrice>
               <div class="text-lg font-bold truncate">-</div>
             </ng-template>

diff --git a/src/app/pages/nft/pages/nft/nft.page.ts b/src/app/pages/nft/pages/nft/nft.page.ts
@@ -443,6 +443,7 @@ export class NFTPage implements OnInit, OnDestroy {
       this.data.collection$.value,
       this.data.nft$.value,
     );
+    const startingValue = this.nftQtySelected;
     const parsedQuantity = Math.round(Number(this.nftQtySelected));
 
     if (isNaN(parsedQuantity) || parsedQuantity <= 0) {
@@ -453,7 +454,9 @@ export class NFTPage implements OnInit, OnDestroy {
       this.nftQtySelected = parsedQuantity;
     }
 
-    if (parsedQuantity === this.nftQtySelected) {
+    this.cd.markForCheck();
+
+    if (startingValue === this.nftQtySelected) {
       return;
     } else {
       this.resetInput();
@@ -613,7 +616,7 @@ export class NFTPage implements OnInit, OnDestroy {
     if (nft && this.data.collection$) {
       this.data.collection$.pipe(take(1)).subscribe((collection) => {
         if (collection) {
-          this.cartService.addToCart(nft, collection);
+          this.cartService.addToCart(nft, collection, this.nftQtySelected);
         }
       });
     }

diff --git a/src/app/pages/nft/services/helper.service.ts b/src/app/pages/nft/services/helper.service.ts
@@ -217,18 +217,6 @@ export class HelperService {
     return 0;
   }
 
-  public getAvailNftQty(nft?: Nft | null, col?: Collection | null): number {
-    const isAvailableForSale = this.isAvailableForSale(nft, col);
-
-    if (nft?.placeholderNft && isAvailableForSale) {
-      return col?.availableNfts || 0;
-    } else if (isAvailableForSale) {
-      return 1;
-    }
-
-    return 0;
-  }
-
   public canBeSetForSale(nft?: Nft | null): boolean {
     if (nft?.auctionFrom || nft?.availableFrom) {
       return false;