Finished minimum viable functionality for cart checkout review, netwo…

…rk selection and completion for bulk buys.

src/app/@api/order.api.ts

@@ -7,6 +7,7 @@ import {
   WEN_FUNC,
   Build5Request,
   NftPurchaseRequest,
+  NftPurchaseBulkRequest,
   OrderTokenRequest,
   AddressValidationRequest,
   NftBidRequest,
@@ -27,6 +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 orderToken = (
     req: Build5Request<OrderTokenRequest>,
   ): Observable<Transaction | undefined> => this.request(WEN_FUNC.orderToken, req);

src/app/@shell/ui/header/header.component.html

@@ -275,7 +275,9 @@
 </header>
 
 <wen-sign-in-modal></wen-sign-in-modal>
-<app-cart-modal></app-cart-modal>
+<!--<app-cart-modal (openCheckout)="openCartCheckout()"></app-cart-modal>-->
+
+<app-cart-modal (openCartModal)="handleOpenCartModal()"></app-cart-modal>
 
 <wen-nft-checkout
   *ngIf="isCheckoutOpen"

src/app/@shell/ui/header/header.component.ts

@@ -6,6 +6,8 @@ import {
   OnInit,
   TemplateRef,
   ViewChild,
+  Output,
+  EventEmitter,
 } from '@angular/core';
 import { NavigationStart, Router } from '@angular/router';
 import { CollectionApi } from '@api/collection.api';
@@ -35,6 +37,7 @@ import {
   NotificationType,
   TRANSACTION_AUTO_EXPIRY_MS,
   Transaction,
+  TransactionPayloadType
 } from '@build-5/interfaces';
 import dayjs from 'dayjs';
 import { NzNotificationRef, NzNotificationService } from 'ng-zorro-antd/notification';
@@ -49,6 +52,9 @@ import {
 } from 'rxjs';
 import { MemberApi } from './../../../@api/member.api';
 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;
 
@@ -77,6 +83,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
   public isMobileMenuVisible = false;
   public isScrolled = false;
   public isCheckoutOpen = false;
+  public isCartCheckoutOpen = false;
   public currentCheckoutNft?: Nft;
   public currentCheckoutCollection?: Collection;
   public notifications$: BehaviorSubject<Notification[]> = new BehaviorSubject<Notification[]>([]);
@@ -91,6 +98,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
   public cartItemCount = 0;
   private cartItemsSubscription!: Subscription;
 
+  @Output() openCartModal = new EventEmitter<void>();
+
   constructor(
     public auth: AuthService,
     public deviceService: DeviceService,
@@ -105,7 +114,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
     private cd: ChangeDetectorRef,
     private nzNotification: NzNotificationService,
     private checkoutService: CheckoutService,
-    private cartService: CartService,
+    public cartService: CartService,
+    private modalService: NzModalService,
   ) {}
 
   public ngOnInit(): void {
@@ -234,6 +244,14 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
   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)
+    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')
+      this.openCartModal.emit();
+      this.openCheckoutOverlay();
+    }
+
     if (!t?.payload.nft || !t.payload.collection) {
       return;
     }
@@ -257,6 +275,24 @@ export class HeaderComponent implements OnInit, OnDestroy {
     }
   }
 
+  private openCheckoutOverlay(): void {
+    const cartItems = this.cartService.getCartItems().getValue();
+
+    this.modalService.create({
+      nzTitle: 'Checkout',
+      nzContent: CheckoutOverlayComponent,
+      nzComponentParams: { items: cartItems },
+      nzFooter: null,
+      nzWidth: '80%',
+    });
+  }
+
+  public handleOpenCartModal(): void {
+    this.openCartModal.emit();
+  }
+
+
+
   public get filesizes(): typeof FILE_SIZES {
     return FILE_SIZES;
   }
@@ -278,6 +314,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.isCheckoutOpen = false;
   }
 
+  public closeCartCheckout() {
+    this.isCartCheckoutOpen = false;
+  }
+
   public goToMyProfile(): void {
     if (this.member$.value?.uid) {
       this.router.navigate([
@@ -393,6 +433,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.cartService.showCart();
   }
 
+  public handleCartCheckout(): void {
+    this.isCartCheckoutOpen = true;
+    this.cd.markForCheck();
+  }
+
+
   public ngOnDestroy(): void {
     this.cancelAccessSubscriptions();
     this.subscriptionNotification$?.unsubscribe();

src/app/@shell/ui/header/header.module.ts

@@ -51,7 +51,7 @@ import { CartModule } from '@components/cart/cart.module';
     NftCheckoutModule,
     MobileMenuModule,
     MobileHeaderModule,
-    CartModule
+    CartModule,
   ],
   exports: [HeaderComponent],
 })

src/app/components/cart/cart.module.ts

@@ -13,6 +13,18 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+import { TermsAndConditionsModule } from '@components/terms-and-conditions/terms-and-conditions.module';
+import { TimeModule } from '@core/pipes/time/time.module';
+import { CountdownTimeModule } from '@core/pipes/countdown-time/countdown-time.module';
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+import { NetworkModule } from '@components/network/network.module';
+import { RouterModule } from '@angular/router';
+import { WalletDeeplinkModule } from '@components/wallet-deeplink/wallet-deeplink.module';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @NgModule({
   declarations: [
@@ -33,7 +45,22 @@ import { NzInputModule } from 'ng-zorro-antd/input';
     ReactiveFormsModule,
     NzFormModule,
     NzInputModule,
+    NzDividerModule,
+    NzTableModule,
+    NzTagModule,
+    NzEmptyModule,
+    TermsAndConditionsModule,
+    TimeModule,
+    CountdownTimeModule,
+    NzAlertModule,
+    NetworkModule,
+    RouterModule,
+    WalletDeeplinkModule,
+    NzRadioModule,
+  ],
+  exports: [
+    CartModalComponent,
+    CheckoutOverlayComponent,
   ],
-  exports: [CartModalComponent],
 })
 export class CartModule {}

src/app/components/cart/components/cart-modal/cart-modal.component.html

@@ -50,19 +50,6 @@ <h4 class="modal-title">Your Cart</h4>
 
               <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>
-                <!--<input type="number" [ngModel]="item.quantity" (change)="updateQuantity($event, item.nft.uid)" min="0" max="{{ cartItemsQuantities[i] }}" />-->
-                <!--
-                <nz-input-number
-                  i18n
-                  nzSize="small"
-                  [ngModel]="item.quantity"
-                  min="0"
-                  [nzMax]="{{ cartItemsQuantities[i] }}"
-                  (change)="updateQuantity($event, item.nft.uid)"
-                ></nz-input-number>
-                <span>/ {{ cartItemsQuantities[i] }}</span>
-                -->
-
                 <div class="flex items-baseline">
                   <nz-form-item class="grow">
                     <nz-form-control i18n-nzErrorTip nzErrorTip="Minimum 1 and maximum {{ cartItemsQuantities[i] }}.">
@@ -84,15 +71,6 @@ <h4 class="modal-title">Your Cart</h4>
                       </nz-input-group>
                     </nz-form-control>
                   </nz-form-item>
-                  <!--
-                  <wen-icon-question-circle
-                    class="ml-3 text-foregrounds-secondary dark:text-foregrounds-secondary-dark"
-                    nz-tooltip
-                    nzTooltipPlacement="right"
-                    i18n-nzTooltipTitle
-                    nzTooltipTitle="The amount of badges you want to make available for this award. This can also be thought of as how many awards you want to give out."
-                  ></wen-icon-question-circle>
-                  -->
                 </div>
               </div>
 
@@ -111,7 +89,6 @@ <h4 class="modal-title">Your Cart</h4>
                 </ng-template>
               </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>
                 <button nz-button nzType="default" (click)="removeFromCart(item.nft.uid)">
@@ -130,7 +107,7 @@ <h4 class="modal-title">Your Cart</h4>
         <button nz-button nzType="text" nzType="default" class="wen-btn-link" (click)="handleClose()" i18n>
           Close
         </button>
-        <button nz-button nzType="primary" (click)="handleCheckout()" i18n>
+        <button nz-button nzType="primary" (click)="handleCartCheckout()" i18n>
           Checkout
         </button>
       </div>

src/app/components/cart/components/cart-modal/cart-modal.component.ts

@@ -4,7 +4,9 @@ import {
   OnInit,
   OnDestroy,
   ChangeDetectorRef,
-  ChangeDetectionStrategy
+  ChangeDetectionStrategy,
+  EventEmitter,
+  Output,
 } from '@angular/core';
 import {
   Nft,
@@ -14,12 +16,12 @@ import {
 import { Subscription, forkJoin, map, take, catchError, of } from 'rxjs';
 import { CartService, CartItem } from './../../services/cart.service';
 import { AuthService } from '@components/auth/services/auth.service';
-//import { ActivatedRoute, Router } from '@angular/router';
 import { ROUTER_UTILS } from '@core/utils/router.utils';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { CheckoutOverlayComponent } from '../checkout/checkout-overlay.component';
 import { NftApi } from '@api/nft.api';
-//import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+
 
 @Component({
   selector: 'app-cart-modal',
@@ -33,13 +35,17 @@ export class CartModalComponent implements OnInit, OnDestroy {
   public nftPath: string = ROUTER_UTILS.config.nft.root;
   public cartItemsQuantities: number[] = [];
   cartItemPrices: { [key: string]: { originalPrice: number, discountedPrice: number } } = {};
+  isCartCheckoutOpen = false;
+
+  @Output() onCartCheckout = new EventEmitter<void>();
 
   constructor(
     public cartService: CartService,
     private cd: ChangeDetectorRef,
     public auth: AuthService,
     private modalService: NzModalService,
     private nftApi: NftApi,
+    private notification: NzNotificationService,
   ) {}
 
   ngOnInit() {
@@ -96,7 +102,6 @@ export class CartModalComponent implements OnInit, OnDestroy {
 
         this.cartService.updateCartItems(freshCartItems);
 
-        // Perform existing refresh operations
         this.cartItemsStatus = freshCartItems.map(item => this.cartItemStatus(item));
         this.cartItemsQuantities = freshCartItems.map(item => this.cartItemSaleAvailableQty(item));
         freshCartItems.forEach(item => {
@@ -110,9 +115,8 @@ export class CartModalComponent implements OnInit, OnDestroy {
         this.cd.markForCheck();
       },
       error => {
-        console.error('Error while refreshing cart items:', error);
-        // Handle the error appropriately
-        // Maybe show a user-friendly message or perform some recovery logic
+        console.error('Error while refreshing cart items: ', error);
+        this.notification.error($localize`Error while refreshing cart items: ` + error, '');
       }
     );
   }
@@ -159,7 +163,7 @@ export class CartModalComponent implements OnInit, OnDestroy {
     return finalPrice;
   }
 
-  private calcPrice(item: CartItem, discount: number): number {
+  public calcPrice(item: CartItem, discount: number): number {
     const itemPrice = item.nft?.availablePrice || item.nft?.price || 0;
     return this.calc(itemPrice, discount); // assuming calc method applies the discount
   }
@@ -182,22 +186,37 @@ export class CartModalComponent implements OnInit, OnDestroy {
     return availQty;
   }
 
-  handleClose(): void {
+  public handleClose(): void {
     this.cartService.hideCart();
   }
 
+  /*
   public handleCheckout(): void {
     const cartItems = this.cartService.getCartItems().getValue();
     //console.log('Proceeding to checkout with items:', cartItems);
 
-    // Open the checkout overlay here
     this.modalService.create({
       nzTitle: 'Checkout',
       nzContent: CheckoutOverlayComponent,
       nzComponentParams: {
         items: cartItems
       },
       nzFooter: null,
+      nzWidth: '80%'
+    });
+  }
+  */
+
+  public handleCartCheckout(): void {
+    const cartItems = this.cartService.getCartItems().getValue();
+
+    this.modalService.create({
+      nzTitle: 'Checkout',
+      nzContent: CheckoutOverlayComponent,
+      nzComponentParams: { items: cartItems },
+      nzFooter: null,
+      nzWidth: '80%',
+      nzOnOk: () => this.isCartCheckoutOpen = false  // Optionally handle the modal close event
     });
   }