Implement initial shopping cart system

src/app/@api/collection.api.ts

@@ -34,6 +34,10 @@ export class CollectionApi extends BaseApi<Collection> {
     super(Dataset.COLLECTION, httpClient);
   }
 
+  public getCollectionById(collectionId: string): Observable<Collection | undefined> {
+    return this.listen(collectionId);
+  }
+
   public mintCollection = (
     req: Build5Request<CollectionMintRequest>,
   ): Observable<Transaction | undefined> => this.request(WEN_FUNC.mintCollection, req);

src/app/@api/nft.api.ts

@@ -62,6 +62,10 @@ export class NftApi extends BaseApi<Nft> {
   public stakeNft = (req: Build5Request<NftStakeRequest>): Observable<Transaction | undefined> =>
     this.request(WEN_FUNC.stakeNft, req);
 
+  public getNftById(nftId: string): Observable<Nft | undefined> {
+    return this.listen(nftId);
+  }
+
   public successfullOrders(
     nftId: string,
     network?: Network,

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

@@ -7,6 +7,7 @@ import {
   WEN_FUNC,
   Build5Request,
   NftPurchaseRequest,
+  NftPurchaseBulkRequest,
   OrderTokenRequest,
   AddressValidationRequest,
   NftBidRequest,
@@ -27,6 +28,10 @@ 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/@core/services/filter-storage/filter-storage.service.ts

@@ -51,6 +51,7 @@ export interface MarketCollectionsFilters {
     access?: string[];
     space?: string[];
     category?: string[];
+    status?: string[];
   };
   range?: {
     price: string;

src/app/@core/services/router/router.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, Router, Event } from '@angular/router';
 import { ROUTER_UTILS } from '@core/utils/router.utils';
 import { BehaviorSubject } from 'rxjs';
 import { DeviceService } from '../device';
+import { filter } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -21,6 +22,12 @@ export class RouterService {
   public urlToNewToken = '/' + ROUTER_UTILS.config.token.root + '/new';
 
   constructor(private router: Router, private deviceService: DeviceService) {
+    // this.router.events.pipe(
+    //  filter((event: Event): event is NavigationEnd => event instanceof NavigationEnd)
+    // ).subscribe((event: NavigationEnd) => {
+    //  console.log('Navigation Event:', event);
+    // });
+
     this.updateVariables();
 
     this.router.events.subscribe((obj) => {

src/app/@core/utils/local-storage.utils.ts

@@ -25,6 +25,7 @@ export enum StorageItem {
   SelectedTradePriceOption = 'App/selectedTradePriceOption',
   DepositNftTransaction = 'App/depositNftTransaction-',
   StakeNftTransaction = 'App/stakeNftTransaction-',
+  CartItems = 'App/cartItems',
 }
 
 export const getBitItemItem = (nftId: string): unknown | null => {

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

@@ -43,6 +43,24 @@
         </button>
       </nz-badge>
 
+      <button
+        nz-button
+        nzType="default"
+        nzShape="circle"
+        class="relative inline-flex items-center justify-center border-0 wen-header-button ml-0 mr-2"
+        (click)="openShoppingCart()"
+      >
+        <nz-badge *ngIf="cartItemCount > 0" [nzCount]="cartItemCount">
+          <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>
+      </button>
+
       <button
         nz-button
         nzShape="circle"
@@ -53,6 +71,7 @@
         <wen-icon-menu></wen-icon-menu>
       </button>
     </div>
+
     <wen-mobile-menu
       [enableCreateAwardProposal]="enableCreateAwardProposal"
       [isVisible]="isMobileMenuVisible"
@@ -163,6 +182,24 @@
       </button>
     </nz-badge>
 
+    <button
+      nz-button
+      nzType="default"
+      nzShape="circle"
+      class="relative inline-flex items-center justify-center border-0 wen-header-button ml-0 mr-1"
+      (click)="openShoppingCart()"
+    >
+      <nz-badge *ngIf="cartItemCount > 0" [nzCount]="cartItemCount">
+        <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>
+    </button>
+
     <button
       nz-button
       nz-dropdown
@@ -245,6 +282,7 @@
 </header>
 
 <wen-sign-in-modal></wen-sign-in-modal>
+<wen-app-cart-modal (openCartModal)="handleOpenCartModal()"></wen-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';
@@ -48,6 +51,9 @@ import {
   skip,
 } 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;
 
@@ -76,6 +82,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[]>([]);
@@ -87,6 +94,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
   >(undefined);
   private subscriptionTransaction$?: Subscription;
   private subscriptionNotification$?: Subscription;
+  public cartItemCount = 0;
+  private cartItemsSubscription!: Subscription;
+
+  @Output() openCartModal = new EventEmitter<void>();
 
   constructor(
     public auth: AuthService,
@@ -102,6 +113,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
     private cd: ChangeDetectorRef,
     private nzNotification: NzNotificationService,
     private checkoutService: CheckoutService,
+    public cartService: CartService,
+    private modalService: NzModalService,
   ) {}
 
   public ngOnInit(): void {
@@ -122,6 +135,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
       }
     });
 
+    this.cartItemsSubscription = this.cartService.getCartItems().subscribe((items) => {
+      this.cartItemCount = items.length;
+    });
+
     const memberRoute = `/${ROUTER_UTILS.config.member.root}/`;
     const landingPageRoute = `/${ROUTER_UTILS.config.base.home}`;
 
@@ -218,10 +235,24 @@ export class HeaderComponent implements OnInit, OnDestroy {
         lastMember = undefined;
       }
     });
+
+    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);
+    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;
     }
@@ -245,6 +276,22 @@ 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;
   }
@@ -266,6 +313,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([
@@ -315,6 +366,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
     }, 2500);
   }
 
+  public getCartItemCount(): number {
+    return this.cartItemCount;
+  }
+
   public unreadNotificationCount(): number {
     if (!this.notifications$.value.length || !this.auth.member$.value?.uid) {
       return 0;
@@ -372,11 +427,24 @@ export class HeaderComponent implements OnInit, OnDestroy {
     });
   }
 
+  public openShoppingCart(): void {
+    // console.log('Opening shopping cart...');
+    this.cartService.showCart();
+  }
+
+  public handleCartCheckout(): void {
+    this.isCartCheckoutOpen = true;
+    this.cd.markForCheck();
+  }
+
   public ngOnDestroy(): void {
     this.cancelAccessSubscriptions();
     this.subscriptionNotification$?.unsubscribe();
     this.subscriptionTransaction$?.unsubscribe();
     this.currentCheckoutNft = undefined;
     this.currentCheckoutCollection = undefined;
+    if (this.cartItemsSubscription) {
+      this.cartItemsSubscription.unsubscribe();
+    }
   }
 }

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

@@ -23,6 +23,7 @@ import { MobileHeaderModule } from '../mobile-header/mobile-header.module';
 import { MobileMenuModule } from '../mobile-menu/mobile-menu.module';
 import { TruncateModule } from './../../../@core/pipes/truncate/truncate.module';
 import { HeaderComponent } from './header.component';
+import { CartModule } from '@components/cart/cart.module';
 
 @NgModule({
   declarations: [HeaderComponent],
@@ -50,6 +51,7 @@ import { HeaderComponent } from './header.component';
     NftCheckoutModule,
     MobileMenuModule,
     MobileHeaderModule,
+    CartModule,
   ],
   exports: [HeaderComponent],
 })

src/app/components/algolia/services/algolia.service.ts

@@ -4,7 +4,7 @@ import { RefinementMappings } from '@components/algolia/refinement/refinement.co
 import { enumToArray } from '@core/utils/manipulations.utils';
 import { environment } from '@env/environment';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { Access, Categories, NftAvailable } from '@build-5/interfaces';
+import { Access, Categories, NftAvailable, CollectionStatus } from '@build-5/interfaces';
 import algoliasearch from 'algoliasearch/lite';
 
 const accessMapping: RefinementMappings = {};
@@ -78,4 +78,16 @@ export class AlgoliaService {
       };
     });
   }
+
+  public convertCollectionStatus(algoliaItems: any[]) {
+    const statuses = enumToArray(CollectionStatus);
+    return algoliaItems.map((algolia) => {
+      const label = statuses.find((status) => status.key === algolia.value)?.value;
+      return {
+        ...algolia,
+        label: label,
+        highlighted: label,
+      };
+    });
+  }
 }