Prep for PR

soonaverse · Jan 24, 2024 · 0eda115 · 0eda115
1 parent 3a01530
commit 0eda115
Show file tree

Hide file tree

Showing 19 changed files with 364 additions and 181 deletions.
diff --git a/src/app/@api/order.api.ts b/src/app/@api/order.api.ts
@@ -28,8 +28,9 @@ export class OrderApi extends BaseApi<Transaction> {
   public orderNft = (req: Build5Request<NftPurchaseRequest>): Observable<Transaction | undefined> =>
     this.request(WEN_FUNC.orderNft, req);
 
-  public orderNfts = (req: Build5Request<NftPurchaseBulkRequest>): Observable<Transaction | undefined> =>
-    this.request(WEN_FUNC.orderNftBulk, req);
+  public orderNfts = (
+    req: Build5Request<NftPurchaseBulkRequest>,
+  ): Observable<Transaction | undefined> => this.request(WEN_FUNC.orderNftBulk, req);
 
   public orderToken = (
     req: Build5Request<OrderTokenRequest>,

diff --git a/src/app/@shell/ui/header/header.component.html b/src/app/@shell/ui/header/header.component.html
@@ -51,9 +51,14 @@
         (click)="openShoppingCart()"
       >
         <nz-badge *ngIf="cartItemCount > 0" [nzCount]="cartItemCount">
-          <wen-icon-cart class="text-foregrounds-primary dark:text-foregrounds-primary-dark"></wen-icon-cart>
+          <wen-icon-cart
+            class="text-foregrounds-primary dark:text-foregrounds-primary-dark"
+          ></wen-icon-cart>
         </nz-badge>
-        <wen-icon-cart *ngIf="cartItemCount === 0" class="text-foregrounds-primary dark:text-foregrounds-primary-dark"></wen-icon-cart>
+        <wen-icon-cart
+          *ngIf="cartItemCount === 0"
+          class="text-foregrounds-primary dark:text-foregrounds-primary-dark"
+        ></wen-icon-cart>
       </button>
 
       <button
@@ -185,9 +190,14 @@
       (click)="openShoppingCart()"
     >
       <nz-badge *ngIf="cartItemCount > 0" [nzCount]="cartItemCount">
-        <wen-icon-cart class="text-foregrounds-primary dark:text-foregrounds-primary-dark"></wen-icon-cart>
+        <wen-icon-cart
+          class="text-foregrounds-primary dark:text-foregrounds-primary-dark"
+        ></wen-icon-cart>
       </nz-badge>
-      <wen-icon-cart *ngIf="cartItemCount === 0" class="text-foregrounds-primary dark:text-foregrounds-primary-dark"></wen-icon-cart>
+      <wen-icon-cart
+        *ngIf="cartItemCount === 0"
+        class="text-foregrounds-primary dark:text-foregrounds-primary-dark"
+      ></wen-icon-cart>
     </button>
 
     <button

diff --git a/src/app/@shell/ui/header/header.component.ts b/src/app/@shell/ui/header/header.component.ts
@@ -37,7 +37,7 @@ import {
   NotificationType,
   TRANSACTION_AUTO_EXPIRY_MS,
   Transaction,
-  TransactionPayloadType
+  TransactionPayloadType,
 } from '@build-5/interfaces';
 import dayjs from 'dayjs';
 import { NzNotificationRef, NzNotificationService } from 'ng-zorro-antd/notification';
@@ -55,7 +55,6 @@ import { CartService } from './../../../components/cart/services/cart.service';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { CheckoutOverlayComponent } from '@components/cart/components/checkout/checkout-overlay.component';
 
-
 const IS_SCROLLED_HEIGHT = 20;
 
 export interface NotificationContent {
@@ -136,7 +135,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
       }
     });
 
-    this.cartItemsSubscription = this.cartService.getCartItems().subscribe(items => {
+    this.cartItemsSubscription = this.cartService.getCartItems().subscribe((items) => {
       this.cartItemCount = items.length;
     });
 
@@ -237,17 +236,19 @@ export class HeaderComponent implements OnInit, OnDestroy {
       }
     });
 
-    this.cartService.showCart$.subscribe(value => {
+    this.cartService.showCart$.subscribe((value) => {
       // console.log('Current value of showCart$: ', value);
     });
   }
 
   public async onOpenCheckout(): Promise<void> {
     const t = this.transaction$.getValue();
-    console.log('[header-onOpenCheckout] transaction: ', t)
-    console.log('[header-onOpenCheckout] t?.payload.type: ', t?.payload.type)
+    console.log('[header-onOpenCheckout] transaction: ', t);
+    console.log('[header-onOpenCheckout] t?.payload.type: ', t?.payload.type);
     if (t?.payload.type == TransactionPayloadType.NFT_PURCHASE_BULK) {
-      console.log('[header-onOpenCheckout] !t?.payload.type && t?.payload.type == TransactionPayloadType.NFT_PURCHASE_BULK equals true and isCartCheckoutOpen set to true')
+      console.log(
+        '[header-onOpenCheckout] !t?.payload.type && t?.payload.type == TransactionPayloadType.NFT_PURCHASE_BULK equals true and isCartCheckoutOpen set to true',
+      );
       this.openCartModal.emit();
       this.openCheckoutOverlay();
     }
@@ -291,7 +292,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.openCartModal.emit();
   }
 
-
   public get filesizes(): typeof FILE_SIZES {
     return FILE_SIZES;
   }
@@ -437,7 +437,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.cd.markForCheck();
   }
 
-
   public ngOnDestroy(): void {
     this.cancelAccessSubscriptions();
     this.subscriptionNotification$?.unsubscribe();

diff --git a/src/app/components/cart/cart.module.ts b/src/app/components/cart/cart.module.ts
@@ -27,10 +27,7 @@ import { WalletDeeplinkModule } from '@components/wallet-deeplink/wallet-deeplin
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @NgModule({
-  declarations: [
-    CartModalComponent,
-    CheckoutOverlayComponent,
-  ],
+  declarations: [CartModalComponent, CheckoutOverlayComponent],
   imports: [
     CommonModule,
     NzModalModule,
@@ -58,9 +55,6 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
     WalletDeeplinkModule,
     NzRadioModule,
   ],
-  exports: [
-    CartModalComponent,
-    CheckoutOverlayComponent,
-  ],
+  exports: [CartModalComponent, CheckoutOverlayComponent],
 })
 export class CartModule {}
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
@@ -15,36 +15,60 @@ <h4 class="modal-title">Your Cart</h4>
     <div class="flex flex-col mt-12 lg:flex-row lg:mt-9">
       <ng-container *nzModalContent>
         <div *ngIf="cartItems.length; else emptyCart" class="relative w-full">
-          <div *ngFor="let item of cartItems; let i = index; trackBy: trackByItemId" class="flex items-start justify-between mb-2 bg-backgrounds-secondary dark:bg-backgrounds-secondary-dark lg:grow rounded-xl p-4">
+          <div
+            *ngFor="let item of cartItems; let i = index; trackBy: trackByItemId"
+            class="flex items-start justify-between mb-2 bg-backgrounds-secondary dark:bg-backgrounds-secondary-dark lg:grow rounded-xl p-4"
+          >
             <div class="flex w-full">
               <div class="flex items-start font-semibold text-sm flex-1 mr-4">
-                <img src="{{item.nft.media}}" alt="{{item.nft.name}}" class="w-20 h-20 object-cover mr-4">
+                <img
+                  src="{{ item.nft.media }}"
+                  alt="{{ item.nft.name }}"
+                  class="w-20 h-20 object-cover mr-4"
+                />
                 <div>
-                  <div class="text-xs font-medium text-foregrounds-secondary underline" i18n>Info</div>
-                  <div>Collection:
-                    <span class="text-blue-500 hover:text-blue-600 cursor-pointer" (click)="goToCollection(item.collection.uid)">
-                      {{item.collection.name}}
+                  <div class="text-xs font-medium text-foregrounds-secondary underline" i18n>
+                    Info
+                  </div>
+                  <div>
+                    Collection:
+                    <span
+                      class="text-blue-500 hover:text-blue-600 cursor-pointer"
+                      (click)="goToCollection(item.collection.uid)"
+                    >
+                      {{ item.collection.name }}
                     </span>
                   </div>
-                  <div>NFT:
-                    <span class="text-blue-500 hover:text-blue-600 cursor-pointer" (click)="goToNft(item.nft.uid)">
-                      {{item.nft.name}}
+                  <div>
+                    NFT:
+                    <span
+                      class="text-blue-500 hover:text-blue-600 cursor-pointer"
+                      (click)="goToNft(item.nft.uid)"
+                    >
+                      {{ item.nft.name }}
                     </span>
                   </div>
                   <div>Royalties: {{ (item.collection.royaltiesFee || 0) * 100 }}%</div>
                 </div>
               </div>
 
               <div class="text-lg font-bold truncate flex-1 mr-4">
-                <div class="text-xs font-medium text-foregrounds-secondary underline mb-2" i18n>Status</div>
+                <div class="text-xs font-medium text-foregrounds-secondary underline mb-2" i18n>
+                  Status
+                </div>
                 {{ cartItemsStatus[i] }}
               </div>
 
               <div class="text-lg font-bold truncate flex-1 mr-4">
-                <div class="text-xs font-medium text-foregrounds-secondary underline mb-2" i18n>Qty Added / Available</div>
+                <div class="text-xs font-medium text-foregrounds-secondary underline mb-2" i18n>
+                  Qty Added / Available
+                </div>
                 <div class="flex items-baseline">
                   <nz-form-item class="grow">
-                    <nz-form-control i18n-nzErrorTip nzErrorTip="Minimum 1 and maximum {{ cartItemsQuantities[i] }}.">
+                    <nz-form-control
+                      i18n-nzErrorTip
+                      nzErrorTip="Minimum 1 and maximum {{ cartItemsQuantities[i] }}."
+                    >
                       <nz-input-group nzSize="default" [nzSuffix]="suffixMaxQty" class="w-30">
                         <input
                           nz-input
@@ -67,13 +91,36 @@ <h4 class="modal-title">Your Cart</h4>
               </div>
 
               <div class="text-lg font-bold truncate flex-1 mr-4">
-                <div class="text-xs font-medium text-foregrounds-secondary underline mb-2" i18n>Price Each</div>
+                <div class="text-xs font-medium text-foregrounds-secondary underline mb-2" i18n>
+                  Price Each
+                </div>
                 <ng-container *ngIf="cartItemPrices[item.nft.uid]">
-                  <div class="mr-2 text-xs font-medium line-through truncate text-foregrounds-secondary" *ngIf="discount(item.collection, item.nft) < 1">
-                    {{ (cartItemPrices[item.nft.uid]?.originalPrice | formatToken:(item.nft?.placeholderNft ? item.collection?.mintingData?.network : item.nft?.mintingData?.network):true:true) | async }}
+                  <div
+                    class="mr-2 text-xs font-medium line-through truncate text-foregrounds-secondary"
+                    *ngIf="discount(item.collection, item.nft) < 1"
+                  >
+                    {{
+                      cartItemPrices[item.nft.uid]?.originalPrice
+                        | formatToken
+                          : (item.nft?.placeholderNft
+                              ? item.collection?.mintingData?.network
+                              : item.nft?.mintingData?.network)
+                          : true
+                          : true
+                        | async
+                    }}
                   </div>
                   <div class="text-lg font-bold truncate">
-                    {{ (cartItemPrices[item.nft.uid]?.discountedPrice | formatToken:(item.nft?.placeholderNft ? item.collection?.mintingData?.network : item.nft?.mintingData?.network):true:true) | async }}
+                    {{
+                      cartItemPrices[item.nft.uid]?.discountedPrice
+                        | formatToken
+                          : (item.nft?.placeholderNft
+                              ? item.collection?.mintingData?.network
+                              : item.nft?.mintingData?.network)
+                          : true
+                          : true
+                        | async
+                    }}
                   </div>
                 </ng-container>
                 <ng-template #noPrice>
@@ -82,7 +129,9 @@ <h4 class="modal-title">Your Cart</h4>
               </div>
 
               <div class="text-lg font-bold truncate flex flex-col items-center">
-                <div class="text-xs font-medium text-foregrounds-secondary underline mb-2" i18n>Remove</div>
+                <div class="text-xs font-medium text-foregrounds-secondary underline mb-2" i18n>
+                  Remove
+                </div>
                 <button nz-button nzType="default" (click)="removeFromCart(item.nft.uid)">
                   <wen-icon-trash
                     class="text-foregrounds-primary dark:text-foregrounds-primary-dark"
@@ -96,10 +145,23 @@ <h4 class="modal-title">Your Cart</h4>
       </ng-container>
 
       <div class="text-center" *nzModalFooter>
-        <button nz-button nzType="text" nzType="default" class="wen-btn-link" (click)="handleClose()" i18n>
+        <button
+          nz-button
+          nzType="text"
+          nzType="default"
+          class="wen-btn-link"
+          (click)="handleClose()"
+          i18n
+        >
           Close
         </button>
-        <button *ngIf="cartItems.length" nz-button nzType="primary" (click)="handleCartCheckout()" i18n>
+        <button
+          *ngIf="cartItems.length"
+          nz-button
+          nzType="primary"
+          (click)="handleCartCheckout()"
+          i18n
+        >
           Checkout
         </button>
       </div>