Merge branch 'frontend' into staging

src/app/app.routes.ts

@@ -7,7 +7,6 @@ export const routes: Routes = [
   {
     path: "",
     component: Home,
-    canActivate: [authGuard],
   },
   {
     path: "",

src/app/core/layouts/header/header.html

@@ -3,7 +3,7 @@
     class="bg-gray-50 wrapper py-4 flex gap-x-5 sm:gap-x-10 items-center shadow-lg shadow-gray-400/20"
   >
     <div class="">
-      <a class="px-3 py-1 bg-gray-800 text-white" href="/">eKart</a>
+      <a class="px-3 py-1 bg-blue-600 text-white" routerLink="/">eKart</a>
     </div>
 
     <div class="flex-1 grid grid-cols-[1fr_auto]">
@@ -26,23 +26,37 @@
         >
           <lucide-angular [img]="UserIcon" class="w-5" />
         </button>
-        <button class="btn btn-ghost py-1 px-2 rounded-l-none! border-l-0!">
+        <button
+          class="btn btn-ghost py-1 px-2 rounded-l-none! border-l-0! relative"
+          popovertarget="popover-2"
+          style="anchor-name: --anchor-2"
+        >
           <lucide-angular [img]="CartIcon" class="w-5" />
+          <span class="absolute top-0 text-xs ml-1">{{ cartItemCount | async }}</span>
         </button>
       </div>
     </div>
   </nav>
+
   <ul class="dropdown" id="popover-1" popover style="position-anchor: --anchor-1">
     @if (authService.authState() === AuthState.Unauthenticated) {
-    <li><a class="block h-full w-full" routerLink="/login">Login</a></li>
+      <li><a class="block h-full w-full" routerLink="/login">Login</a></li>
     } @else if (authService.authState() === AuthState.Loading) {
-    <li><a class="block h-full w-full">Loading</a></li>
+      <li><a class="block h-full w-full">Loading</a></li>
     } @else {
-    <li><a class="block h-full w-full" routerLink="/logout">Logout</a></li>
+      <li><a class="block h-full w-full" routerLink="/logout">Logout</a></li>
     }
     <li><a class="block h-full w-full" href="">My Account</a></li>
     <li><a class="block h-full w-full" href="">Orders</a></li>
     <li><a class="block h-full w-full" href="">Wishlist</a></li>
     <li><a class="block h-full w-full" href="">Notifications</a></li>
   </ul>
+
+  <app-cart
+    [cart]="(cartItem$ | async)!"
+    id="popover-2"
+    class="dropdown"
+    popover
+    style="position-anchor: --anchor-2"
+  />
 </header>

src/app/core/layouts/header/header.ts

@@ -2,10 +2,15 @@ import { Component, inject } from "@angular/core";
 import { LucideAngularModule, Search, ShoppingCart, User } from "lucide-angular";
 import { RouterLink } from "@angular/router";
 import { AuthService, AuthState } from "../../../features/auth/services/auth-service";
+import { CartService } from "@app/core/services/cart-service";
+import { Cart } from "@app/shared/components/cart/cart";
+import { CartModel } from "@app/core/models/cart.model";
+import { map } from "rxjs";
+import { AsyncPipe } from "@angular/common";
 
 @Component({
   selector: "app-header",
-  imports: [LucideAngularModule, RouterLink],
+  imports: [LucideAngularModule, RouterLink, Cart, AsyncPipe],
   templateUrl: "./header.html",
   styleUrl: "./header.css",
 })
@@ -14,5 +19,9 @@ export class Header {
   readonly CartIcon = ShoppingCart;
   readonly SearchIcon = Search;
   readonly authService = inject(AuthService);
+  readonly cartService = inject(CartService);
   protected readonly AuthState = AuthState;
+
+  cartItem$ = this.cartService.cartItem$;
+  cartItemCount = this.cartItem$.pipe(map((cart: CartModel) => cart.itemsCount ?? 0));
 }

src/app/core/models/cart.model.ts

@@ -0,0 +1,20 @@
+export interface CartItemModel {
+  id: number;
+  title: string;
+  quantity: number;
+  price: number;
+  subtotal: number;
+  image: string;
+}
+
+export interface CartModel {
+  id: number;
+  itemsCount: number;
+  totalPrice: number;
+  items: CartItemModel[];
+}
+
+export interface CartItemRequest {
+  productId: number;
+  quantity: number;
+}

src/app/core/services/cart-service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from "@angular/core/testing";
+
+import { CartService } from "./cart-service";
+
+describe("CartService", () => {
+  let service: CartService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CartService);
+  });
+
+  it("should be created", () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/cart-service.ts

@@ -0,0 +1,61 @@
+import { HttpClient, HttpErrorResponse } from "@angular/common/http";
+import { effect, inject, Injectable, signal } from "@angular/core";
+import { API_URL } from "../tokens/api-url-tokens";
+import { CartItemModel, CartItemRequest, CartModel } from "../models/cart.model";
+import { AuthService, AuthState } from "@app/features/auth/services/auth-service";
+import { Cart } from "@app/shared/components/cart/cart";
+import { BehaviorSubject, tap } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class CartService {
+  private authService = inject(AuthService);
+  // dependencies
+  private http = inject(HttpClient);
+  private apiUrl = inject(API_URL);
+
+  private _cartItem = new BehaviorSubject<CartModel>({} as CartModel);
+
+  cartItem$ = this._cartItem.asObservable();
+
+  constructor() {
+    effect(() => {
+      if (this.authService.isAuthenticated()) {
+        this.fetchCart();
+      } else {
+        this._cartItem.next({} as CartModel);
+      }
+    });
+  }
+
+  fetchCart() {
+    return this.http.get<CartModel>(this.apiUrl + "/cart").subscribe({
+      next: (data) => this._cartItem.next(data),
+      error: (error: HttpErrorResponse) => {
+        if (error.status === 401) {
+          this.authService.purgeAuth();
+        }
+        // show an error in toast
+      },
+    });
+  }
+
+  addToCart(data: CartItemRequest) {
+    return this.http
+      .post<CartModel>(this.apiUrl + "/cart", data)
+      .pipe(tap((updatedCart: CartModel) => this._cartItem.next(updatedCart)));
+  }
+
+  updateCart(data: CartItemRequest) {
+    return this.http
+      .patch<CartModel>(this.apiUrl + "/cart", data)
+      .pipe(tap((updatedCart: CartModel) => this._cartItem.next(updatedCart)));
+  }
+
+  removeFromCart(productId: number) {
+    return this.http
+      .delete<CartModel>(this.apiUrl + "/cart", { body: { productId: productId } })
+      .pipe(tap((updatedCart: CartModel) => this._cartItem.next(updatedCart)));
+  }
+}

src/app/features/auth/services/auth-service.ts

@@ -104,7 +104,7 @@ export class AuthService {
     this.authState.set(AuthState.Authenticated);
   }
 
-  private purgeAuth() {
+  purgeAuth() {
     this.localStorage.removeItem(this.userKey);
     this.user.set(null);
     this.authState.set(AuthState.Unauthenticated);

src/app/features/product/components/product-card/product-card.html

@@ -5,15 +5,25 @@
     class="absolute top-5 right-5"
   />
   <!--Product image-->
-  <div class="bg-gray-200 rounded-xl h-40">
+  <div class="bg-gray-200 rounded-xl h-60">
     <img [src]="product.productImages[0]" alt="" class="object-cover rounded-xl w-full h-full" />
   </div>
 
-  <p class="text-gray-400 text-sm truncate">{{ product.title }}</p>
-  <p class="text-gray-400 text-xs">⭐4.5</p>
-  <p class="text-gray-400 text-xs">
-    Price:
-    <span class="line-through italic mr-1">{{ product.actualPrice }}</span>
-    <span class="font-bold">{{ product.listPrice }}/-</span>
-  </p>
+  <div class="flex justify-between mt-4">
+    <p class="text-sm truncate font-medium text-gray-800 hover:text-blue-500">
+      {{ product.title }}
+    </p>
+    <p class="text-gray-400 text-xs">⭐4.5</p>
+  </div>
+  <div class="flex justify-between mt-4">
+    <div class="">
+      <p class="text-gray-400 text-xs line-through italic">Rs. {{ product.listPrice }}</p>
+      <p class="font-medium text-lg">Rs. {{ product.actualPrice }}</p>
+    </div>
+    <div>
+      <button (click)="addToCart($event)" class="btn btn-primary p-3" title="Add to cart">
+        <lucide-angular [img]="ShoppingCartIcon" class="w-4" />
+      </button>
+    </div>
+  </div>
 </div>

src/app/features/product/components/product-card/product-card.ts

@@ -1,20 +1,29 @@
 import { Component, inject, Input } from "@angular/core";
 import { ProductModel } from "../../../../core/models/product.model";
 import { Router } from "@angular/router";
-import { FavoriteButton } from "../../../../src/app/shared/components/favorite-button/favorite-button";
+import { FavoriteButton } from "../../../../shared/components/favorite-button/favorite-button";
+import { LucideAngularModule, ShoppingCart } from "lucide-angular";
+import { CartService } from "@app/core/services/cart-service";
 
 @Component({
   selector: "app-product-card",
   standalone: true,
-  imports: [FavoriteButton],
+  imports: [FavoriteButton, LucideAngularModule],
   templateUrl: "./product-card.html",
 })
 export class ProductCard {
   readonly router = inject(Router);
+  readonly ShoppingCartIcon = ShoppingCart;
+  readonly cartService = inject(CartService);
 
   @Input() product!: ProductModel;
 
   goToProductDetails() {
     this.router.navigate(["/products", this.product.slug]);
   }
+
+  addToCart(event: Event) {
+    event.stopPropagation();
+    this.cartService.addToCart({ productId: this.product.id, quantity: 1 }).subscribe();
+  }
 }

src/app/features/product/product.html

@@ -4,7 +4,7 @@
   <p class="text-3xl text-gray-700 font-sans">Our Product</p>
 </section>
 
-<section class="mt-4 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4 wrapper">
+<section class="mt-10 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 gap-4 wrapper">
   @for (product of products(); track product) {
   <app-product-card [product]="product" />
   }

src/app/features/product/show-product/show-product.html

@@ -23,15 +23,15 @@
           />
           <button
             (click)="prevImage()"
-            class="absolute top-45 left-2 p-2! rounded-full! btn btn-ghost"
+            class="absolute top-45 left-2 p-2! rounded-full! btn btn-ghost backdrop-blur-xs"
           >
-            <lucide-angular [img]="ArrowLeftIcon" class="w-4 h-4" />
+            <lucide-angular [img]="ArrowLeftIcon" class="w-4 h-4 text-gray-200" />
           </button>
           <button
             (click)="nextImage()"
-            class="absolute top-45 right-2 p-2! rounded-full! btn btn-ghost"
+            class="absolute top-45 right-2 p-2! rounded-full! btn btn-ghost backdrop-blur-xs"
           >
-            <lucide-angular [img]="ArrowRightIcon" class="w-4 h-4" />
+            <lucide-angular [img]="ArrowRightIcon" class="w-4 h-4 text-gray-200" />
           </button>
         </div>
 
@@ -90,28 +90,16 @@
       <div class="lg:col-span-3 flex flex-col gap-6">
         <div class="card">
           <div class="flex justify-between items-start mb-6">
-            <div class="flex items-baseline gap-2">
-              <span class="text-xl text-gray-400 line-through decoration-1"
-                >Rs.{{ product()?.actualPrice }}</span
-              >
-              <span class="text-3xl font-bold text-gray-900">Rs.{{ product()?.listPrice }}</span>
-              <span class="text-xs text-gray-400 ml-1"></span>
+            <div class="">
+              <p class="text-sm text-gray-400 line-through decoration-1">
+                Rs.{{ product()?.listPrice }}
+              </p>
+              <p class="text-3xl font-bold text-gray-900">Rs.{{ product()?.actualPrice }}</p>
             </div>
           </div>
 
-          <div class="flex mb-6 overflow-hidden">
-            <button class="px-4 py-2 btn btn-ghost rounded-r-none!">−</button>
-            <input
-              type="text"
-              value="1"
-              class="w-12 text-center btn btn-ghost rounded-none! border-x-0!"
-              readonly
-            />
-            <button class="px-4 py-2 btn btn-ghost rounded-l-none!">+</button>
-          </div>
-
           <div class="flex flex-col gap-3">
-            <button class="w-full btn btn-ghost">Add to Cart</button>
+            <button (click)="addToCart()" class="w-full btn btn-ghost">Add to Cart</button>
             <button class="w-full btn btn-primary">Buy Now</button>
           </div>
         </div>

src/app/features/product/show-product/show-product.ts

@@ -2,7 +2,8 @@ import { Component, inject, Input, signal, WritableSignal } from "@angular/core"
 import { ProductModel } from "../../../core/models/product.model";
 import { ProductService } from "../services/product-service";
 import { LucideAngularModule, Heart, ArrowRight, ArrowLeft } from "lucide-angular";
-import { FavoriteButton } from "../../../src/app/shared/components/favorite-button/favorite-button";
+import { FavoriteButton } from "../../../shared/components/favorite-button/favorite-button";
+import { CartService } from "@app/core/services/cart-service";
 
 @Component({
   selector: "app-show-product",
@@ -17,6 +18,7 @@ export class ShowProduct {
   ArrowRightIcon = ArrowRight;
   ArrowLeftIcon = ArrowLeft;
   productService = inject(ProductService);
+  cartService = inject(CartService);
   product = signal<ProductModel | null>(null);
   activeImageIndex: WritableSignal<number> = signal(0);
   totalImageCount: number = 0;
@@ -29,9 +31,14 @@ export class ShowProduct {
     });
   }
 
+  addToCart() {
+    this.cartService.addToCart({ productId: this.product()!.id, quantity: 1 }).subscribe();
+  }
+
   nextImage() {
     this.activeImageIndex.update((index) => (index + 1) % this.totalImageCount);
   }
+
   prevImage() {
     this.activeImageIndex.update(
       (index) =>

src/app/shared/components/cart-item/cart-item.html

@@ -0,0 +1,26 @@
+<li class="px-2! py-4! border-b border-b-gray-200">
+  <div class="flex space-x-5">
+    <div class="w-20 h-20 bg-gray-100 p-2 rounded-xl">
+      <img [src]="cartItem.image" class="object-cover h-full w-full rounded-lg" />
+    </div>
+    <div class="flex-1 flex flex-col">
+      <p class="text-sm truncate max-w-30 mt-2">{{ cartItem.title }}</p>
+      <div class="mt-auto flex space-x-4 items-center text-gray-600">
+        <p class="text-sm">Rs. {{ cartItem.price }} x {{ cartItem.quantity }}</p>
+      </div>
+    </div>
+    <div class="flex flex-col justify-between">
+      <div class="mt-2 flex space-x-2 items-center">
+        <p class="font-medium">Rs. {{ cartItem.subtotal }}</p>
+        <button (click)="removeProduct()" class="active:scale-80 py-0" title="Remove Item">
+          <lucide-angular [name]="TrashIcon" class="w-3" />
+        </button>
+      </div>
+      <div class="flex max-h-7 text-xs text-center text-gray-700">
+        <button (click)="decrementQty()" class="btn btn-ghost py-1! px-2 rounded-r-none!">-</button>
+        <p class="w-7 text-center py-1 px-2 border-y border-y-gray-300">{{ cartItem.quantity }}</p>
+        <button (click)="incrementQty()" class="btn py-1! btn-ghost px-2 rounded-l-none!">+</button>
+      </div>
+    </div>
+  </div>
+</li>

src/app/shared/components/cart-item/cart-item.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { CartItem } from "./cart-item";
+
+describe("CartItem", () => {
+  let component: CartItem;
+  let fixture: ComponentFixture<CartItem>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CartItem],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CartItem);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/cart-item/cart-item.ts

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, Output, signal } from "@angular/core";
+import { CartItemModel, CartItemRequest } from "@app/core/models/cart.model";
+import { LucideAngularModule, Trash } from "lucide-angular";
+
+@Component({
+  selector: "app-cart-item",
+  imports: [LucideAngularModule],
+  templateUrl: "./cart-item.html",
+  styleUrl: "./cart-item.css",
+})
+export class CartItem {
+  @Input() cartItem!: CartItemModel;
+  @Output() qtyChangeEvent = new EventEmitter<CartItemRequest>();
+  @Output() productDeleteEvent = new EventEmitter<number>();
+  TrashIcon = Trash;
+
+  incrementQty() {
+    if (this.cartItem.quantity < 10) {
+      this.cartItem.quantity += 1;
+      this.qtyChangeEvent.emit({ productId: this.cartItem.id, quantity: this.cartItem.quantity });
+    }
+  }
+
+  decrementQty() {
+    if (this.cartItem.quantity > 1) {
+      this.cartItem.quantity -= 1;
+      this.qtyChangeEvent.emit({ productId: this.cartItem.id, quantity: this.cartItem.quantity });
+    }
+  }
+
+  removeProduct() {
+    this.productDeleteEvent.emit(this.cartItem.id);
+  }
+}

src/app/shared/components/cart/cart.html

@@ -0,0 +1,26 @@
+<ul>
+  @if (authService.authState() === AuthState.Unauthenticated) {
+  <li><a class="block h-full w-full" routerLink="/login">Login to access cart</a></li>
+  } @else if (authService.authState() === AuthState.Loading) {
+  <li><a class="block h-full w-full">Loading</a></li>
+  } @else {
+  <ol
+    [class.pointer-events-none]="isLoading()"
+    [class.opacity-40]="isLoading()"
+    [class.cursor-block]="isLoading()"
+  >
+    @for (item of cart.items; track item.id) {
+    <app-cart-item
+      (qtyChangeEvent)="updateProductQty($event)"
+      (productDeleteEvent)="removeProduct($event)"
+      [cartItem]="item"
+    />
+    }
+  </ol>
+
+  <div class="flex justify-between mt-4 px-2 font-bold text-lg">
+    <p>Total</p>
+    <p>Rs. {{ cart.totalPrice }}</p>
+  </div>
+  }
+</ul>

src/app/shared/components/cart/cart.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { Cart } from "./cart";
+
+describe("Cart", () => {
+  let component: Cart;
+  let fixture: ComponentFixture<Cart>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Cart],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Cart);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/cart/cart.ts

@@ -0,0 +1,40 @@
+import { Component, computed, inject, Input, signal } from "@angular/core";
+import { CartItemModel, CartItemRequest, CartModel } from "@app/core/models/cart.model";
+import { CartItem } from "../cart-item/cart-item";
+import { AuthService, AuthState } from "@app/features/auth/services/auth-service";
+import { CartService } from "@app/core/services/cart-service";
+import { finalize, tap } from "rxjs";
+
+@Component({
+  selector: "app-cart",
+  imports: [CartItem],
+  templateUrl: "./cart.html",
+  styleUrl: "./cart.css",
+})
+export class Cart {
+  @Input() cart!: CartModel;
+
+  isLoading = signal(false);
+
+  protected readonly authService = inject(AuthService);
+  protected readonly cartService = inject(CartService);
+  protected readonly AuthState = AuthState;
+
+  updateProductQty(cartItem: CartItemRequest) {
+    this.isLoading.set(true);
+
+    this.cartService
+      .updateCart(cartItem)
+      .pipe(finalize(() => this.isLoading.set(false)))
+      .subscribe();
+  }
+
+  removeProduct(productId: number) {
+    this.isLoading.set(true);
+
+    this.cartService
+      .removeFromCart(productId)
+      .pipe(finalize(() => this.isLoading.set(false)))
+      .subscribe();
+  }
+}

src/app/shared/components/favorite-button/favorite-button.ts

@@ -1,6 +1,6 @@
 import { Component, inject, Input } from "@angular/core";
 import { HeartIcon, LucideAngularModule } from "lucide-angular";
-import { FavoriteService } from "../../../../../core/services/favorite-service";
+import { FavoriteService } from "../../../core/services/favorite-service";
 
 @Component({
   selector: "app-favorite-button",

src/styles.css

@@ -25,15 +25,15 @@ body {
 }
 
 .btn-ghost {
-  @apply text-gray-600 border border-gray-300 hover:bg-gray-800 hover:text-gray-200;
+  @apply text-gray-600 border border-b-3 border-gray-300 hover:bg-gray-200/70 hover:text-gray-700;
 }
 
 .btn-black {
-  @apply text-gray-100 bg-gray-800 border border-gray-800 hover:bg-gray-200 hover:text-gray-800 hover:border-gray-400;
+  @apply text-gray-100 bg-gray-800 border border-b-3 border-gray-800 hover:bg-gray-200 hover:text-gray-800 hover:border-gray-400;
 }
 
 .btn-primary {
-  @apply text-gray-100 bg-blue-700 border border-blue-800 hover:bg-blue-200 hover:text-blue-800 hover:border-blue-400;
+  @apply text-blue-100 bg-blue-600 border border-b-3 border-blue-900 hover:bg-blue-700;
 }
 
 .card {
@@ -70,7 +70,7 @@ body {
 }
 
 .dropdown li {
-  @apply rounded-lg hover:bg-linear-to-r hover:from-teal-300 hover:to-transparent px-5 py-1;
+  @apply rounded-lg hover:bg-linear-to-r hover:bg-gray-100 px-5 py-1;
 }
 
 h1,

tsconfig.json

@@ -13,7 +13,14 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
-    "module": "preserve"
+    "module": "preserve",
+    "baseUrl": "./src", // Paths are resolved relative to the baseUrl
+    "paths": {
+      "@app/*": ["app/*"],
+      "@shared/*": ["app/shared/*"],
+      "@core/*": ["app/core/*"],
+      "@env/*": ["environments/*"]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,