Shopping cart revision: reactive data, real-time cross tab updates, m…

…obile UI modifications
soonaverse · Feb 11, 2024 · cdefd66 · cdefd66
1 parent 30fd69d
commit cdefd66
Show file tree

Hide file tree

Showing 15 changed files with 1,055 additions and 725 deletions.
diff --git a/src/app/@shell/ui/header/header.component.html b/src/app/@shell/ui/header/header.component.html
@@ -18,6 +18,7 @@
       [getNotificationDetails]="getNotificationDetails"
       (wenOnVisibleChange)="isMobileMenuVisible = !isMobileMenuVisible"
       (wenOnNotificationVisibleChange)="notificationVisibleChange()"
+      [cartItemCount]="cartItemCount"
     >
     </wen-mobile-header>
 

diff --git a/src/app/@shell/ui/header/header.component.ts b/src/app/@shell/ui/header/header.component.ts
@@ -113,7 +113,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
   ) {}
 
   public ngOnInit(): void {
-    this.member$.pipe(untilDestroyed(this)).subscribe((obj) => {
+     this.member$.pipe(untilDestroyed(this)).subscribe((obj) => {
       if (obj?.uid) {
         this.cancelAccessSubscriptions();
         this.accessSubscriptions$.push(
@@ -259,7 +259,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
       switch (checkoutTransaction.source) {
         case 'cartCheckout': {
           if (!this.cartService.isCheckoutOverlayOpen()) {
-            this.cartService.openCartAndCheckoutOverlay();
+            this.cartService.openCheckoutOverlay();
             this.cd.markForCheck();
           }
           break;

diff --git a/src/app/@shell/ui/mobile-header/mobile-header.component.html b/src/app/@shell/ui/mobile-header/mobile-header.component.html
@@ -46,6 +46,25 @@
           ></wen-icon-bell>
         </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)="handleOpenCartModal()"
+      >
+        <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>
+
       <nz-dropdown-menu #notificationMenu="nzDropdownMenu">
         <wen-menu>
           <div

diff --git a/src/app/@shell/ui/mobile-header/mobile-header.component.ts b/src/app/@shell/ui/mobile-header/mobile-header.component.ts
@@ -8,6 +8,7 @@ import { UntilDestroy } from '@ngneat/until-destroy';
 import { Notification } from '@build-5/interfaces';
 import { BehaviorSubject } from 'rxjs';
 import { NotificationContent } from '../header/header.component';
+import { CartService } from '@components/cart/services/cart.service';
 
 @UntilDestroy()
 @Component({
@@ -25,6 +26,7 @@ export class MobileHeaderComponent {
   @Input() enableCreateAwardProposal = true;
   @Input() notifications: Notification[] = [];
   @Input() unreadNotificationCount = 0;
+  @Input() cartItemCount = 0;
   @Input() getNotificationDetails!: (not: Notification) => NotificationContent;
   @Output() wenOnVisibleChange = new EventEmitter<boolean>();
   @Output() wenOnNotificationVisibleChange = new EventEmitter<boolean>();
@@ -36,6 +38,7 @@ export class MobileHeaderComponent {
     public location: Location,
     public routerService: RouterService,
     public unitsService: UnitsService,
+    public cartService: CartService,
   ) {}
 
   public setMobileMenuVisible(isVisible: boolean): void {
@@ -56,4 +59,8 @@ export class MobileHeaderComponent {
   public get isLoggedIn$(): BehaviorSubject<boolean> {
     return this.auth.isLoggedIn$;
   }
+
+  public handleOpenCartModal(): void {
+    this.cartService.showCartModal();
+  }
 }