fix: show empty cart if cart is empty

- fetch existing addresses from api,
- user can edit existing address
- user can add new address

.ai/mcp/mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}

.gitignore

@@ -38,6 +38,8 @@ yarn-error.log
 testem.log
 /typings
 __screenshots__/
+*.cache
+.php-cs-fixer.dist.php
 
 # System files
 .DS_Store

.oxfmtrc.json

@@ -0,0 +1,3 @@
+{
+  "ignorePatterns": ["backend/**", "*.min.js"]
+}

.phpactor.json

@@ -0,0 +1,3 @@
+{
+  "indexer.exclude_patterns": ["/node_modules/**/*", "/backend/**/*"]
+}

.rgignore

@@ -0,0 +1 @@
+backend/

angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "npm"
+    "packageManager": "npm",
+    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {

backend/.env.example

@@ -31,7 +31,7 @@ SESSION_DRIVER=database
 SESSION_LIFETIME=120
 SESSION_ENCRYPT=false
 SESSION_PATH=/
-SESSION_DOMAIN=null
+SESSION_DOMAIN=localhost
 
 BROADCAST_CONNECTION=log
 FILESYSTEM_DISK=local
@@ -64,3 +64,4 @@ AWS_USE_PATH_STYLE_ENDPOINT=false
 
 VITE_APP_NAME="${APP_NAME}"
 FRONTEND_URL=http://localhost:4200
+SANCTUM_STATEFUL_DOMAINS=localhost:4200

backend/app/Data/ProductDTO.php

@@ -22,6 +22,7 @@ public function __construct(
         public array $productImages,
         public ?string $updatedAt = null,
         public ?string $createdAt = null,
+        public ?bool $isFavorite = null
     ) {}
 
     /**
@@ -41,6 +42,7 @@ public function toArray(): array
                 $this->productImages),
             'updatedAt' => $this->updatedAt,
             'createdAt' => $this->createdAt,
+            'isFavorite' => $this->isFavorite,
         ];
     }
 
@@ -57,6 +59,8 @@ public static function fromModel(Product $product): self
             productImages: $product->images->map(fn (ProductImage $productImage) => ProductImageDTO::fromModel($productImage))->all(),
             updatedAt: $product->updated_at,
             createdAt: $product->created_at,
+            // this column is added by where exists query
+            isFavorite: $product->favorited_by_exists,
         );
     }
 }

backend/app/Http/Controllers/FavouriteProductController.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Resources\FavouriteProductResource;
+use App\Models\FavouriteProduct;
+use App\Models\Product;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
+
+class FavouriteProductController extends Controller
+{
+    public function index()
+    {
+        return FavouriteProductResource::collection(FavouriteProduct::all());
+    }
+
+    public function toggle(Request $request, Product $product)
+    {
+        /**
+         * @var User $user
+         */
+        $user = $request->user();
+
+        $changes = $user->favoriteProducts()->toggle($product);
+        Log::info('hi again');
+        // If changes has any item, that means a product has been attached.
+        $isFavorite = count($changes['attached']) > 0;
+
+        return response()->json([
+            'message' => $isFavorite ? 'Product added to favorites' : 'Product removed from favorites',
+            'isFavorite' => $isFavorite,
+        ]);
+    }
+}

backend/app/Http/Controllers/ProductController.php

@@ -6,14 +6,16 @@
 use App\Http\Requests\CreateProductRequest;
 use App\Http\Resources\ProductResource;
 use App\Models\Product;
+use App\Queries\GetProductsQuery;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
 
 class ProductController extends Controller
 {
-    public function index()
+    public function index(GetProductsQuery $getProductsQuery)
     {
-        $paginator = Product::query()->with(['category:id,name,slug', 'images:id,path,product_id'])->paginate();
-        $paginatedDtos = $paginator->through(fn ($product) => ProductDTO::fromModel($product));
+        $products = $getProductsQuery->get(Auth::user());
+        $paginatedDtos = $products->through(fn ($product) => ProductDTO::fromModel($product));
 
         return ProductResource::collection($paginatedDtos);
     }

backend/app/Http/Resources/FavouriteProductResource.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\FavouriteProduct;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+/** @mixin FavouriteProduct */
+class FavouriteProductResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'created_at' => $this->created_at,
+            'updated_at' => $this->updated_at,
+
+            'user_id' => $this->user_id,
+            'product_id' => $this->product_id,
+        ];
+    }
+}

backend/app/Http/Resources/ProductResource.php

@@ -30,6 +30,7 @@ public function toArray(Request $request): array
                 return Storage::disk('public')->url($productImage->path);
             }, $this->resource->productImages),
             'updatedAt' => $this->resource->updatedAt,
+            'isFavorite' => $this->resource->isFavorite,
         ];
     }
 }

backend/app/Models/Product.php

@@ -2,8 +2,11 @@
 
 namespace App\Models;
 
+use Illuminate\Database\Eloquent\Attributes\Scope;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Support\Str;
 
@@ -28,6 +31,17 @@ public function images(): HasMany
         return $this->hasMany(ProductImage::class, 'product_id', 'id');
     }
 
+    public function favoritedBy(): BelongsToMany
+    {
+        return $this->belongsToMany(User::class, 'favorite_products');
+    }
+
+    #[Scope]
+    protected function active(Builder $query): Builder
+    {
+        return $query->where('is_active', true);
+    }
+
     protected static function booted(): void
     {
         static::saving(function ($product) {
@@ -36,4 +50,11 @@ protected static function booted(): void
             }
         });
     }
+
+    protected function casts()
+    {
+        return [
+            'is_active' => 'boolean',
+        ];
+    }
 }

backend/app/Models/User.php

@@ -11,7 +11,9 @@
 class User extends Authenticatable
 {
     /** @use HasFactory<\Database\Factories\UserFactory> */
-    use HasFactory, Notifiable;
+    use HasFactory;
+
+    use Notifiable;
 
     /**
      * The attributes that are mass assignable.
@@ -50,4 +52,14 @@ protected function casts(): array
             'role' => UserRoles::class,
         ];
     }
+
+    public function favoriteProducts()
+    {
+        return $this->belongsToMany(Product::class, 'favorite_products', 'user_id', 'product_id');
+    }
+
+    public function hasFavorited(Product $product): bool
+    {
+        return $this->favoriteProducts()->where('product_id', $product->id)->exists();
+    }
 }

backend/app/Queries/GetProductsQuery.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Queries;
+
+use App\Models\Product;
+use App\Models\User;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Pagination\LengthAwarePaginator;
+
+final readonly class GetProductsQuery
+{
+    public function get(?User $user = null): LengthAwarePaginator
+    {
+        return Product::query()
+            ->active()
+            ->when($user, function (Builder $query) use ($user) {
+                $query->withExists(
+                    [
+                        'favoritedBy' => fn (Builder $query) => $query->where('user_id', $user->id),
+                    ]
+                );
+
+            })
+            ->with(['category:id,name,slug', 'images:id,path,product_id'])
+            ->paginate();
+    }
+}

backend/database/migrations/2026_03_02_133303_create_favourite_products_table.php

@@ -0,0 +1,26 @@
+<?php
+
+use App\Models\Product;
+use App\Models\User;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('favorite_products', function (Blueprint $table) {
+            $table->id();
+            $table->foreignIdFor(User::class);
+            $table->foreignIdFor(Product::class);
+            $table->timestamps();
+            $table->unique(['user_id', 'product_id']);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('favorite_products');
+    }
+};

backend/database/migrations/2026_03_05_063756_add-active-in-products.php

@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('products', function (Blueprint $table) {
+            $table->boolean('is_active')->default(true);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('products', function (Blueprint $table) {
+            $table->dropColumn('is_active');
+        });
+
+    }
+};

backend/routes/api.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\AuthenticatedUserController;
+use App\Http\Controllers\FavouriteProductController;
 use App\Http\Controllers\ProductCategoryController;
 use App\Http\Controllers\ProductController;
 use App\Http\Controllers\ProductImagesController;
@@ -15,6 +16,9 @@
     Route::get('/user', [AuthenticatedUserController::class, 'show']);
     Route::post('/logout', [AuthenticatedUserController::class, 'destroy']);
     Route::post('/upload/images', action: [ProductImagesController::class, 'store']);
+
+    // Favorites
+    Route::post('/products/{product}/favorite', [FavouriteProductController::class, 'toggle']);
 });
 Route::get('/categories', [ProductCategoryController::class, 'index']);
 Route::apiResource('products', ProductController::class);

public/assets/images/mastercard-modern-design-.svg

@@ -0,0 +1 @@
+<svg height="1524" viewBox="55.2 38.3 464.5 287.8" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m519.7 182.2c0 79.5-64.3 143.9-143.6 143.9s-143.6-64.4-143.6-143.9 64.2-143.9 143.5-143.9 143.7 64.4 143.7 143.9z" fill="#f79f1a"/><path d="m342.4 182.2c0 79.5-64.3 143.9-143.6 143.9s-143.6-64.4-143.6-143.9 64.3-143.9 143.6-143.9 143.6 64.4 143.6 143.9z" fill="#ea001b"/><path d="m287.4 68.9c-33.5 26.3-55 67.3-55 113.3s21.5 87 55 113.3c33.5-26.3 55-67.3 55-113.3s-21.5-86.9-55-113.3z" fill="#ff5f01"/></svg>

public/assets/images/stripe-4.svg

@@ -0,0 +1 @@
+<svg width="2500" height="1045" viewBox="0 0 512 214" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M35.982 83.484c0-5.546 4.551-7.68 12.09-7.68 10.808 0 24.461 3.272 35.27 9.103V51.484c-11.804-4.693-23.466-6.542-35.27-6.542C19.2 44.942 0 60.018 0 85.192c0 39.252 54.044 32.995 54.044 49.92 0 6.541-5.688 8.675-13.653 8.675-11.804 0-26.88-4.836-38.827-11.378v33.849c13.227 5.689 26.596 8.106 38.827 8.106 29.582 0 49.92-14.648 49.92-40.106-.142-42.382-54.329-34.845-54.329-50.774zm96.142-66.986l-34.702 7.395-.142 113.92c0 21.05 15.787 36.551 36.836 36.551 11.662 0 20.195-2.133 24.888-4.693V140.8c-4.55 1.849-27.022 8.391-27.022-12.658V77.653h27.022V47.36h-27.022l.142-30.862zm71.112 41.386L200.96 47.36h-30.72v124.444h35.556V87.467c8.39-10.951 22.613-8.96 27.022-7.396V47.36c-4.551-1.707-21.191-4.836-29.582 10.524zm38.257-10.524h35.698v124.444h-35.698V47.36zm0-10.809l35.698-7.68V0l-35.698 7.538V36.55zm109.938 8.391c-13.938 0-22.898 6.542-27.875 11.094l-1.85-8.818h-31.288v165.83l35.555-7.537.143-40.249c5.12 3.698 12.657 8.96 25.173 8.96 25.458 0 48.64-20.48 48.64-65.564-.142-41.245-23.609-63.716-48.498-63.716zm-8.533 97.991c-8.391 0-13.37-2.986-16.782-6.684l-.143-52.765c3.698-4.124 8.818-6.968 16.925-6.968 12.942 0 21.902 14.506 21.902 33.137 0 19.058-8.818 33.28-21.902 33.28zM512 110.08c0-36.409-17.636-65.138-51.342-65.138-33.85 0-54.33 28.73-54.33 64.854 0 42.808 24.179 64.426 58.88 64.426 16.925 0 29.725-3.84 39.396-9.244v-28.445c-9.67 4.836-20.764 7.823-34.844 7.823-13.796 0-26.027-4.836-27.591-21.618h69.547c0-1.85.284-9.245.284-12.658zm-70.258-13.511c0-16.071 9.814-22.756 18.774-22.756 8.675 0 17.92 6.685 17.92 22.756h-36.694z" fill="#6772E5"/></svg>

public/assets/images/visa-10.svg

@@ -0,0 +1 @@
+<svg height="812" viewBox="0.5 0.5 999 323.684" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="M651.185.5c-70.933 0-134.322 36.766-134.322 104.694 0 77.9 112.423 83.28 112.423 122.415 0 16.478-18.884 31.229-51.137 31.229-45.773 0-79.984-20.611-79.984-20.611l-14.638 68.547s39.41 17.41 91.734 17.41c77.552 0 138.576-38.572 138.576-107.66 0-82.316-112.89-87.537-112.89-123.86 0-12.91 15.501-27.053 47.662-27.053 36.286 0 65.892 14.99 65.892 14.99l14.326-66.204S696.614.5 651.185.5zM2.218 5.497L.5 15.49s29.842 5.461 56.719 16.356c34.606 12.492 37.072 19.765 42.9 42.353l63.51 244.832h85.138L379.927 5.497h-84.942L210.707 218.67l-34.39-180.696c-3.154-20.68-19.13-32.477-38.685-32.477H2.218zm411.865 0L347.449 319.03h80.999l66.4-313.534h-80.765zm451.759 0c-19.532 0-29.88 10.457-37.474 28.73L709.699 319.03h84.942l16.434-47.468h103.483l9.994 47.468H999.5L934.115 5.497h-68.273zm11.047 84.707l25.178 117.653h-67.454z" fill="#1434cb"/></svg>

src/app/app.config.ts

@@ -1,8 +1,14 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from "@angular/core";
-import { provideRouter } from "@angular/router";
+import { provideRouter, withComponentInputBinding } from "@angular/router";
 
 import { routes } from "./app.routes";
+import { provideHttpClient, withFetch, withInterceptors } from "@angular/common/http";
+import { csrfInterceptor } from "./core/interceptors/csrf-interceptor";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes, withComponentInputBinding()),
+    provideHttpClient(withInterceptors([csrfInterceptor])),
+  ],
 };

src/app/app.html

@@ -1,3 +1,7 @@
-<app-header />
-<router-outlet></router-outlet>
-<app-footer />
+<div class="flex min-h-screen flex-col antialiased m-0">
+  <app-header />
+  <main class="flex-1">
+    <router-outlet></router-outlet>
+  </main>
+  <app-footer />
+</div>

src/app/app.routes.ts

@@ -1,5 +1,7 @@
 import { Routes } from "@angular/router";
 import { Home } from "./features/home/home";
+import { authGuard } from "./core/guards/auth-guard";
+import { roleGuard } from "./core/guards/role-guard";
 
 export const routes: Routes = [
   {
@@ -10,4 +12,16 @@ export const routes: Routes = [
     path: "",
     loadChildren: () => import("./features/auth/auth.routes").then((routes) => routes.AuthRoutes),
   },
+  {
+    path: "products",
+    loadChildren: () =>
+      import("./features/product/product.routes").then((routes) => routes.productRoutes),
+    canActivate: [authGuard, roleGuard],
+    data: { roles: ["admin", "broker"] },
+  },
+  {
+    path: "checkout",
+    loadChildren: () =>
+      import("./features/checkout/checkout.routes").then((routes) => routes.checkoutRoutes),
+  },
 ];

src/app/app.ts

@@ -1,6 +1,6 @@
 import { Component, signal } from "@angular/core";
 import { RouterOutlet } from "@angular/router";
-import { Products } from "./features/home/products/products";
+import { Product } from "./features/product/product";
 import { Footer } from "./core/layouts/footer/footer";
 import { Header } from "./core/layouts/header/header";
 

src/app/core/guards/auth-guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from "@angular/core/testing";
+import { CanActivateFn } from "@angular/router";
+
+import { authGuard } from "./auth-guard";
+
+describe("authGuard", () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+    TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it("should be created", () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

src/app/core/guards/auth-guard.ts

@@ -0,0 +1,11 @@
+import { CanActivateFn, Router } from "@angular/router";
+import { inject } from "@angular/core";
+import { AuthService } from "@core/services/auth-service";
+
+export const authGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService.isAuthenticated()) return true;
+  return router.navigate(["/login"]);
+};

src/app/core/guards/role-guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from "@angular/core/testing";
+import { CanActivateFn } from "@angular/router";
+
+import { roleGuard } from "./role-guard";
+
+describe("roleGuard", () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+    TestBed.runInInjectionContext(() => roleGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it("should be created", () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

src/app/core/guards/role-guard.ts

@@ -0,0 +1,12 @@
+import { CanActivateFn } from "@angular/router";
+import { inject } from "@angular/core";
+import { AuthService } from "@core/services/auth-service";
+
+export const roleGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+
+  // get role from route data passed in route config.
+  const roles = route.data["roles"] as string[];
+
+  return roles && authService.hasRoles(roles);
+};

src/app/core/interceptors/csrf-interceptor.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from "@angular/core/testing";
+import { HttpInterceptorFn } from "@angular/common/http";
+
+import { csrfInterceptor } from "./csrf-interceptor";
+
+describe("authInterceptor", () => {
+  const interceptor: HttpInterceptorFn = (req, next) =>
+    TestBed.runInInjectionContext(() => csrfInterceptor(req, next));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it("should be created", () => {
+    expect(interceptor).toBeTruthy();
+  });
+});

src/app/core/interceptors/csrf-interceptor.ts

@@ -0,0 +1,20 @@
+import { HttpInterceptorFn } from "@angular/common/http";
+
+export const csrfInterceptor: HttpInterceptorFn = (req, next) => {
+  const getCookie = (name: string): string | null => {
+    const match = document.cookie.match(new RegExp("(^|;\\s*)(" + name + ")=([^;]*)"));
+    return match ? decodeURIComponent(match[3]) : null;
+  };
+
+  let headers = req.headers.set("Accept", "application/json");
+  const xsrfToken = getCookie("XSRF-TOKEN");
+  if (xsrfToken) {
+    headers = headers.set("X-XSRF-TOKEN", xsrfToken);
+  }
+  const clonedRequest = req.clone({
+    withCredentials: true,
+    headers: headers,
+  });
+
+  return next(clonedRequest);
+};

src/app/core/layouts/footer/footer.html

@@ -18,7 +18,7 @@
 
     <div class="footer-links">
       <a href="">Home</a>
-      <a href="">Products</a>
+      <a href="">Product</a>
       <a href="">About Us</a>
       <a href="">Contact Us</a>
     </div>

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

@@ -3,14 +3,14 @@
     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 href="/" class="px-3 py-1 bg-gray-800 text-white">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]">
       <input
-        type="text"
         class="w-full border border-gray-300 text-sm rounded-full rounded-r-none px-6 py-1"
         placeholder="Search watches, brands, products..."
+        type="text"
       />
       <button class="btn btn-ghost rounded-l-none! py-1 px-3 border-l-0!">
         <lucide-angular [img]="SearchIcon" class="w-5" />
@@ -20,23 +20,43 @@
     <div class="flex space-x-4">
       <div class="flex text-gray-600">
         <button
+          class="btn btn-ghost py-1 px-3 rounded-r-none!"
           popovertarget="popover-1"
           style="anchor-name: --anchor-1"
-          class="btn btn-ghost py-1 px-2 rounded-r-none!"
         >
           <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-3 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" popover id="popover-1" style="position-anchor: --anchor-1">
-    <li><a class="block h-full w-full" href="">Login</a></li>
+
+  <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>
+    } @else if (authService.authState() === AuthState.Loading) {
+    <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" 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]="(cartItems$ | async)!"
+    id="popover-2"
+    class="dropdown"
+    popover
+    style="position-anchor: --anchor-2"
+  />
 </header>

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

@@ -1,8 +1,16 @@
-import { Component } from "@angular/core";
-import { LucideAngularModule, User, ShoppingCart, Search } from "lucide-angular";
+import { Component, inject } from "@angular/core";
+import { LucideAngularModule, Search, ShoppingCart, User } from "lucide-angular";
+import { AuthService, AuthState } from "@core/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";
+import { RouterLink } from "@angular/router";
+
 @Component({
   selector: "app-header",
-  imports: [LucideAngularModule],
+  imports: [LucideAngularModule, Cart, AsyncPipe, RouterLink],
   templateUrl: "./header.html",
   styleUrl: "./header.css",
 })
@@ -10,4 +18,9 @@ export class Header {
   readonly UserIcon = User;
   readonly CartIcon = ShoppingCart;
   readonly SearchIcon = Search;
+  readonly authService = inject(AuthService);
+  readonly cartService = inject(CartService);
+  cartItems$ = this.cartService.cartItems$;
+  cartItemCount = this.cartItems$.pipe(map((cart: CartModel) => cart.itemsCount ?? 0));
+  protected readonly AuthState = AuthState;
 }

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/models/paginated.model.ts

@@ -0,0 +1,25 @@
+export interface PaginatedResponse<T> {
+  data: T[];
+  links: {
+    next: string | null;
+    prev: string | null;
+    last: string | null;
+    first: string | null;
+  };
+  meta: {
+    total: number;
+    per_page: number;
+    current_page: number;
+    last_page: number;
+    from: number;
+    to: number;
+    links: links[];
+  };
+}
+
+interface links {
+  url: string | null;
+  label: string;
+  active: boolean;
+  page: number | null;
+}

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

@@ -0,0 +1,17 @@
+import { PaginatedResponse } from "./paginated.model";
+import { Category } from "../../features/product/services/category-service";
+
+export interface ProductModel {
+  id: number;
+  title: string;
+  slug: string;
+  description: string;
+  actualPrice: number;
+  listPrice: number;
+  category: Category;
+  productImages: string[];
+  updatedAt: string;
+  isFavorite: boolean;
+}
+
+export interface ProductCollection extends PaginatedResponse<ProductModel> {}

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

@@ -1,4 +1,4 @@
-export interface RegisterUserRequest{
+export interface RegisterUserRequest {
   name: string | null;
   email: string | null;
   mobile_number: string | null;
@@ -6,3 +6,12 @@ export interface RegisterUserRequest{
   password_confirmation: string | null;
   city: string | null;
 }
+
+export interface User {
+  id: number;
+  name: string;
+  email: string;
+  mobileNumber: string;
+  city: string;
+  role: string;
+}

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

@@ -1,8 +1,8 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from "@angular/core/testing";
 
-import { AuthService } from './auth-service';
+import { AuthService } from "./auth-service";
 
-describe('AuthService', () => {
+describe("AuthService", () => {
   let service: AuthService;
 
   beforeEach(() => {
@@ -10,7 +10,7 @@ describe('AuthService', () => {
     service = TestBed.inject(AuthService);
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(service).toBeTruthy();
   });
 });

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

@@ -0,0 +1,112 @@
+import { computed, inject, Injectable, Signal, signal, WritableSignal } from "@angular/core";
+import { RegisterUserRequest, User } from "../models/user.model";
+import { HttpClient, HttpErrorResponse } from "@angular/common/http";
+import { API_URL, BACKEND_URL } from "../tokens/api-url-tokens";
+import { switchMap, tap } from "rxjs";
+import { LocalStorageService } from "../services/local-storage.service";
+
+export enum AuthState {
+  Loading = "loading",
+  Authenticated = "authenticated",
+  Unauthenticated = "unauthenticated",
+}
+
+/**
+ * UserService - manages user related operations
+ *
+ * ## Auth States
+ * - loading: user is being fetched from the server
+ * - authenticated: user is authenticated
+ * - unauthenticated: user is not authenticated
+ */
+
+@Injectable({
+  providedIn: "root",
+})
+export class AuthService {
+  // User states
+  readonly authState: WritableSignal<AuthState>;
+  readonly user: WritableSignal<User | null>;
+  readonly userRole: Signal<string | null>;
+
+  // Computed state for easy checking
+  readonly isAuthenticated: Signal<boolean>;
+  // Dependent services
+  private localStorage = inject(LocalStorageService);
+  private http: HttpClient = inject(HttpClient);
+  // Constants
+  private readonly userKey = "ekart_user";
+  private apiUrl = inject(API_URL);
+  private backendURL = inject(BACKEND_URL);
+
+  constructor() {
+    const cachedUser = this.localStorage.getItem<User>(this.userKey);
+    this.authState = signal<AuthState>(
+      cachedUser ? AuthState.Authenticated : AuthState.Unauthenticated,
+    );
+    this.user = signal<User | null>(cachedUser);
+    this.isAuthenticated = computed(() => !!this.user());
+    this.userRole = computed(() => this.user()?.role || null);
+  }
+
+  register(userRequest: RegisterUserRequest) {
+    return this.http.post(`${this.apiUrl}/register`, userRequest);
+  }
+
+  /**
+   * Laravel API expects the csrf cookie to be set before making a request.
+   * First set the cookie then attempt to login.
+   * If the login is successful, set the user in the state.
+   */
+  login(credentials: { email: string; password: string }) {
+    return this.getCsrfCookie().pipe(
+      switchMap(() =>
+        this.http.post(`${this.backendURL}/login`, credentials, { observe: "response" }),
+      ),
+      switchMap(() => this.getCurrentUser()),
+    );
+  }
+
+  getCurrentUser() {
+    return this.http.get<User>(`${this.apiUrl}/user`).pipe(
+      tap({
+        next: (user) => this.setAuth(user),
+        error: (error: HttpErrorResponse) => this.purgeAuth(),
+      }),
+    );
+  }
+
+  /**
+   * Check if current user has the role.
+   * Mostly used in role guard.
+   */
+  hasRoles(roles: string[]) {
+    const role = this.userRole();
+    if (!role) return false;
+    return roles.includes(role);
+  }
+
+  logout() {
+    return this.http.post(`${this.backendURL}/logout`, {}).pipe(
+      tap({
+        next: () => this.purgeAuth(),
+      }),
+    );
+  }
+
+  private getCsrfCookie() {
+    return this.http.get(`${this.backendURL}/sanctum/csrf-cookie`);
+  }
+
+  private setAuth(user: User) {
+    this.localStorage.setItem<User>(this.userKey, user);
+    this.user.set(user);
+    this.authState.set(AuthState.Authenticated);
+  }
+
+  purgeAuth() {
+    this.localStorage.removeItem(this.userKey);
+    this.user.set(null);
+    this.authState.set(AuthState.Unauthenticated);
+  }
+}

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,60 @@
+import { HttpClient, HttpErrorResponse } from "@angular/common/http";
+import { effect, inject, Injectable } from "@angular/core";
+import { API_URL } from "../tokens/api-url-tokens";
+import { CartItemRequest, CartModel } from "../models/cart.model";
+import { AuthService } from "@core/services/auth-service";
+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 _cartItems = new BehaviorSubject<CartModel>({} as CartModel);
+
+  cartItems$ = this._cartItems.asObservable();
+
+  constructor() {
+    effect(() => {
+      if (this.authService.isAuthenticated()) {
+        this.fetchCart();
+      } else {
+        this._cartItems.next({} as CartModel);
+      }
+    });
+  }
+
+  fetchCart() {
+    return this.http.get<CartModel>(this.apiUrl + "/cart").subscribe({
+      next: (data) => this._cartItems.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._cartItems.next(updatedCart)));
+  }
+
+  updateCart(data: CartItemRequest) {
+    return this.http
+      .patch<CartModel>(this.apiUrl + "/cart", data)
+      .pipe(tap((updatedCart: CartModel) => this._cartItems.next(updatedCart)));
+  }
+
+  removeFromCart(productId: number) {
+    return this.http
+      .delete<CartModel>(this.apiUrl + "/cart", { body: { productId: productId } })
+      .pipe(tap((updatedCart: CartModel) => this._cartItems.next(updatedCart)));
+  }
+}

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

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

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

@@ -0,0 +1,20 @@
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable } from "@angular/core";
+import { API_URL } from "../tokens/api-url-tokens";
+
+export interface FavoriteResponse {
+  message: string;
+  isFavorite: boolean;
+}
+
+@Injectable({
+  providedIn: "root",
+})
+export class FavoriteService {
+  http = inject(HttpClient);
+  apiUrl = inject(API_URL);
+
+  toggle(productId: number) {
+    return this.http.post<FavoriteResponse>(`${this.apiUrl}/products/${productId}/favorite`, {});
+  }
+}

src/app/core/services/local-storage.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class LocalStorageService {
+  setItem<T>(key: string, value: T) {
+    try {
+      const item = JSON.stringify(value);
+      localStorage.setItem(key, item);
+    } catch (e) {
+      console.error("Error storing item in local storage: ", e);
+    }
+  }
+
+  getItem<T>(key: string): T | null {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : null;
+    } catch (err) {
+      console.error("Error getting item from local storage: ", err);
+      return null;
+    }
+  }
+
+  /**
+   * @throws Error if item is not found
+   */
+  removeItem(key: string) {
+    localStorage.removeItem(key);
+  }
+
+  /**
+   * @Throws Error if localstorage API is not available
+   */
+  clear() {
+    localStorage.clear();
+  }
+}

src/app/core/services/local-storage.spec.ts

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

src/app/core/services/session-storage.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class SessionStorageService {
+  setItem<T>(key: string, value: T) {
+    try {
+      const item = JSON.stringify(value);
+      sessionStorage.setItem(key, item);
+    } catch (e) {
+      console.error("Could not set item", e);
+    }
+  }
+
+  getItem<T>(key: string): T | null {
+    try {
+      const item = sessionStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : null;
+    } catch (e) {
+      console.error("Could not get item", e);
+      return null;
+    }
+  }
+
+  /**
+   * @throws Error if key is not found.
+   * @param key
+   */
+  removeItem(key: string): void {
+    sessionStorage.removeItem(key);
+  }
+
+  clear(): void {
+    sessionStorage.clear();
+  }
+}

src/app/core/services/session-storage.spec.ts

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

src/app/core/tokens/api-url-tokens.ts

@@ -1,7 +1,12 @@
 import { InjectionToken } from "@angular/core";
-import {environment} from '../../../environments/environment';
+import { environment } from "../../../environments/environment";
 
-export const API_URL = new InjectionToken<string>('API_URL', {
+export const API_URL = new InjectionToken<string>("API_URL", {
   providedIn: "root",
-  factory: () => environment.apiUrl
-})
+  factory: () => environment.apiUrl,
+});
+
+export const BACKEND_URL = new InjectionToken<string>("API_URL", {
+  providedIn: "root",
+  factory: () => environment.backendUrl,
+});

src/app/features/auth/auth.routes.ts

@@ -1,6 +1,8 @@
-import { Routes } from "@angular/router";
+import { Router, Routes } from "@angular/router";
 import { Login } from "./components/login/login";
 import { Register } from "./components/register/register";
+import { inject } from "@angular/core";
+import { AuthService } from "@core/services/auth-service";
 
 export const AuthRoutes: Routes = [
   {
@@ -14,6 +16,19 @@ export const AuthRoutes: Routes = [
         path: "register",
         component: Register,
       },
+      {
+        path: "logout",
+        component: Login,
+        canActivate: [
+          () => {
+            const authService = inject(AuthService);
+            const router = inject(Router);
+
+            authService.logout().subscribe(() => router.navigate(["/login"]));
+            return false;
+          },
+        ],
+      },
     ],
   },
 ];

src/app/features/auth/components/login/login.html

@@ -1,4 +1,11 @@
-<section class="my-10 sm:my-20 flex justify-center items-center">
+@if (successMessage) {
+<div
+  class="px-4 py-3 mb-8 bg-teal-100 rounded-lg text-teal-800 text-sm mt-10 max-w-11/12 sm:max-w-8/12 mx-auto"
+>
+  <p>{{successMessage}}</p>
+</div>
+}
+<section class="my-5 sm:my-10 flex justify-center items-center">
   <article class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
     <div class="md:col-span-1 lg:col-span-2">
       <img
@@ -13,21 +20,25 @@
 
       <h2 class="text-xl text-gray-600">Get access to your Orders, Wishlist and Recommendations</h2>
 
-      <form class="flex flex-col space-y-5">
+      <form [formGroup]="loginForm" (ngSubmit)="loginUser()" class="flex flex-col space-y-5">
         <fieldset class="fieldset">
           <legend class="fieldset-legend">Email</legend>
-          <input type="text" class="input" placeholder="Enter email here" />
+          <input formControlName="email" type="text" class="input" placeholder="Enter email here" />
           <p class="label">your-email-address@email.com</p>
+          <app-error fieldName="email" [control]="loginForm.get('email')" />
         </fieldset>
 
         <fieldset class="fieldset">
           <legend class="fieldset-legend">Password</legend>
-          <input type="password" class="input" placeholder="Type here" />
+          <input formControlName="password" type="password" class="input" placeholder="Type here" />
+          <app-error fieldName="password" [control]="loginForm.get('password')" />
         </fieldset>
 
         <button type="submit" class="btn btn-black py-2">Login</button>
       </form>
-      <a href="" class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
+      <a
+        routerLink="/register"
+        class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
         >New User ? Sign Up</a
       >
     </article>

src/app/features/auth/components/login/login.ts

@@ -1,9 +1,38 @@
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
+import { Router } from "@angular/router";
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { AuthService } from "@core/services/auth-service";
+import { Error } from "@app/shared/components/error/error";
 
 @Component({
   selector: "app-login",
-  imports: [],
+  imports: [ReactiveFormsModule, Error],
   templateUrl: "./login.html",
   styleUrl: "./login.css",
 })
-export class Login {}
+export class Login {
+  successMessage: string | undefined;
+  authService = inject(AuthService);
+
+  loginForm = new FormGroup({
+    email: new FormControl("", { validators: [Validators.required, Validators.email] }),
+    password: new FormControl("", { validators: [Validators.required] }),
+  });
+
+  constructor(private router: Router) {
+    const navigator = this.router.currentNavigation();
+    const state = navigator?.extras.state as { message?: string };
+    this.successMessage = state?.message;
+  }
+
+  loginUser() {
+    if (this.loginForm.invalid) {
+      this.loginForm.markAllAsTouched();
+      return;
+    }
+
+    this.authService.login(this.loginForm.value as { email: string; password: string }).subscribe({
+      next: () => this.router.navigate(["/"]),
+    });
+  }
+}

src/app/features/auth/components/register/register.html

@@ -1,44 +1,82 @@
-<section class="my-10 sm:my-30 flex flex-col sm:flex-row space-x-20 justify-center items-center">
+<section
+  class="my-10 md:my-30 flex flex-col md:flex-row space-x-20 space-y-10 justify-center items-center"
+>
   <article class="space-y-6">
     <h1 class="text-3xl text-gray-800 font-space font-bold">Register</h1>
     <h2 class="text-xl text-gray-600">Sign up with your<br />email address to get started</h2>
+    <div class="text-xs text-red-600 space-y-2">
+      @for (error of errors(); track error) {
+      <p>{{ error }}</p>
+      }
+    </div>
   </article>
 
-  <form [formGroup]="registerForm" (ngSubmit)="registerUser()" class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 gap-4">
-    <article class="space-y-4">
-      <fieldset class="fieldset">
-        <legend class="fieldset-legend">Name</legend>
-        <input type="text" class="input" formControlName="name"  placeholder="Jhon Doe" />
-      </fieldset>
-      <fieldset class="fieldset">
-        <legend class="fieldset-legend">Mobile Number</legend>
-        <input type="text" class="input" formControlName="mobile_number" placeholder="+X1 XXXXXXXXXX" />
-      </fieldset>
-      <fieldset class="fieldset">
-        <legend class="fieldset-legend">Email</legend>
-        <input type="text" class="input" formControlName="email" placeholder="Enter email here" />
-        <p class="label">your-email-address@email.com</p>
-      </fieldset>
-    </article>
-    <article class="space-y-4">
-      <fieldset class="fieldset">
-        <legend class="fieldset-legend">Password</legend>
-        <input type="password" class="input" formControlName="password" placeholder="Type here" />
-      </fieldset>
+  <form
+    [formGroup]="registerForm"
+    (ngSubmit)="registerUser()"
+    class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 gap-4"
+  >
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Name*</legend>
+      <input type="text" name="name" class="input" formControlName="name" placeholder="Jhon Doe" />
+      <app-error fieldName="name" [control]="registerForm.get('name')" />
+    </fieldset>
 
-      <fieldset class="fieldset">
-        <legend class="fieldset-legend">Confirm Password</legend>
-        <input type="text" class="input" formControlName="password_confirmation" placeholder="Type here" />
-      </fieldset>
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Mobile Number*</legend>
+      <input
+        type="text"
+        name="mobile_number"
+        class="input"
+        formControlName="mobile_number"
+        placeholder="+X1 XXXXXXXXXX"
+      />
+      <app-error fieldName="mobile number" [control]="registerForm.get('mobile_number')" />
+    </fieldset>
+
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Email*</legend>
+      <input type="text" class="input" formControlName="email" placeholder="Enter email here" />
+      <p class="label">your-email-address@email.com</p>
+      <app-error fieldName="email" [control]="registerForm.get('email')" />
+    </fieldset>
+
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">City*</legend>
+      <input
+        type="text"
+        name="city"
+        class="input"
+        formControlName="city"
+        placeholder="Your city name"
+      />
+      <app-error fieldName="city" [control]="registerForm.get('city')" />
+    </fieldset>
+
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Password*</legend>
+      <input type="password" class="input" formControlName="password" placeholder="Type here" />
+      <app-error fieldName="password" [control]="registerForm.get('password')" />
+    </fieldset>
+
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Confirm Password*</legend>
+      <input
+        type="text"
+        class="input"
+        formControlName="password_confirmation"
+        placeholder="Type here"
+      />
+      <app-error [control]="registerForm.get('password_confirmation')" />
+    </fieldset>
 
-      <fieldset class="fieldset">
-        <legend class="fieldset-legend">City</legend>
-        <input type="text" class="input" formControlName="city" placeholder="Your city name" />
-      </fieldset>
-    </article>
     <div class="flex flex-col col-span-2 gap-y-2">
-      <button type="submit" class="btn btn-black py-2 w-full">Register</button>
-      <a href="" class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
+      <button type="submit" [disabled]="registerForm.invalid" class="btn btn-black py-2 w-full">
+        Register
+      </button>
+      <a
+        routerLink="/login"
+        class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
         >Already have an account ? Login</a
       >
     </div>

src/app/features/auth/components/register/register.ts

@@ -1,30 +1,45 @@
-import { Component, inject } from "@angular/core";
-import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
-import { AuthService } from "../../services/auth-service";
-import { RegisterUserRequest } from "../../../../core/models/user.model";
+import { Component, inject, signal } from "@angular/core";
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { AuthService } from "@core/services/auth-service";
+import { RegisterUserRequest } from "@core/models/user.model";
+import { Error } from "@shared/components/error/error";
+import { Router, RouterLink } from "@angular/router";
 
 @Component({
   selector: "app-register",
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, Error, RouterLink],
   templateUrl: "./register.html",
   styleUrl: "./register.css",
 })
 export class Register {
-
   authService = inject(AuthService);
+  router = inject(Router);
+  errors = signal<string[]>([]);
 
   registerForm = new FormGroup({
-    name :new FormControl(''),
-    email :new FormControl(''),
-    mobile_number : new FormControl(''),
-    password : new FormControl(''),
-    password_confirmation : new FormControl(''),
-    city : new FormControl(''),
+    name: new FormControl("", { validators: [Validators.required] }),
+    email: new FormControl("", { validators: [Validators.required, Validators.email] }),
+    mobile_number: new FormControl("", { validators: [Validators.required] }),
+    password: new FormControl("", { validators: [Validators.required] }),
+    password_confirmation: new FormControl("", { validators: [Validators.required] }),
+    city: new FormControl("", { validators: [Validators.required] }),
   });
 
   registerUser() {
-    this.authService.register(this.registerForm.value as RegisterUserRequest)
-      .subscribe();
-  }
+    // validation errors if user submit early
+    if (this.registerForm.invalid) {
+      this.registerForm.markAllAsTouched();
+      return;
+    }
 
+    this.authService.register(this.registerForm.value as RegisterUserRequest).subscribe({
+      next: () =>
+        this.router.navigate(["/login"], { state: { message: "Registration successful!" } }),
+      error: (error) => {
+        const errors: Record<number, string[]> = error?.error?.errors || {};
+        const errorMessages: string[] = Object.values(errors).flat();
+        this.errors.set(errorMessages);
+      },
+    });
+  }
 }

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

@@ -1,19 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { RegisterUserRequest } from '../../../core/models/user.model';
-import { HttpClient } from '@angular/common/http';
-import { API_URL } from '../../../core/tokens/api-url-tokens';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class AuthService {
-
-  private http: HttpClient = inject(HttpClient);
-  private apiUrl = inject(API_URL);
-
-  register(userRequest: RegisterUserRequest) {
-    console.log(this.apiUrl);
-    return this.http.post(`${this.apiUrl}/register`, userRequest);
-  }
-
-}

src/app/features/checkout/address/address.html

@@ -0,0 +1,18 @@
+<div class="col-span-2 flex flex-col space-y-4">
+  @for (address of addresses(); track address.id) {
+  <div class="flex space-x-2">
+    <input [formControl]="addressIdControl" name="address" type="radio" value="{{address.id}}" />
+    <app-address-select
+      (addressUpdated)="updateAddress($event)"
+      [address]="address"
+      [isProcessing]="isProcessing()"
+      class="flex-1"
+    />
+  </div>
+  }
+  <app-address-form
+    (submitAddress)="createNewAddress($event)"
+    [isProcessing]="isProcessing()"
+    class="ml-5"
+  />
+</div>

src/app/features/checkout/address/address.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
-import { Products } from "./products";
+import { Address } from "./address";
 
-describe("Products", () => {
-  let component: Products;
-  let fixture: ComponentFixture<Products>;
+describe("Address", () => {
+  let component: Address;
+  let fixture: ComponentFixture<Address>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Products],
+      imports: [Address],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(Products);
+    fixture = TestBed.createComponent(Address);
     component = fixture.componentInstance;
     await fixture.whenStable();
   });

src/app/features/checkout/address/address.ts

@@ -0,0 +1,80 @@
+import { Component, DestroyRef, inject, OnInit, signal } from "@angular/core";
+import { AddressForm } from "../components/address-form/address-form";
+import { AddressSelect } from "../components/address-select/address-select";
+import {
+  AddressRequest,
+  AddressResponse,
+  AddressService,
+} from "@app/features/checkout/services/address-service";
+import { AuthService } from "@core/services/auth-service";
+import { User } from "@core/models/user.model";
+import { finalize, of, switchMap } from "rxjs";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { ReactiveFormsModule } from "@angular/forms";
+
+@Component({
+  selector: "app-address",
+  imports: [AddressSelect, AddressForm, ReactiveFormsModule],
+  templateUrl: "./address.html",
+  styleUrl: "./address.css",
+})
+export class Address implements OnInit {
+  addressService = inject(AddressService);
+  authService = inject(AuthService);
+  addressIdControl = this.addressService.addressIdControl;
+  isProcessing = signal(false);
+
+  // I am subscribing to the observable instead of using toSignal(),
+  // i have to destroy the subscription manually.
+  destroyRef = inject(DestroyRef);
+  protected addresses = signal<AddressResponse[]>([]);
+  private user: User | undefined;
+
+  ngOnInit(): void {
+    this.authService
+      .getCurrentUser()
+      .pipe(
+        switchMap((user) => {
+          this.user = user;
+          if (user?.id) {
+            return this.addressService.fetchAddresses(user.id);
+          }
+          return of({ data: [] });
+        }),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe({
+        next: (addresses) => {
+          this.addresses.set(addresses.data);
+        },
+      });
+  }
+
+  protected createNewAddress(addressData: AddressRequest) {
+    this.isProcessing.set(true);
+    this.addressService
+      .createAddress(this.user!.id, addressData)
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        finalize(() => this.isProcessing.set(false)),
+      )
+      .subscribe({
+        next: (address) => this.addresses.update((addresses) => [...addresses, address]),
+      });
+  }
+  protected updateAddress(addressData: AddressResponse) {
+    this.isProcessing.set(true);
+    this.addressService
+      .updateAddress(addressData.id, addressData)
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        finalize(() => this.isProcessing.set(false)),
+      )
+      .subscribe({
+        next: (address) =>
+          this.addresses.update((addresses) =>
+            addresses.map((a) => (a.id === address.id ? address : a)),
+          ),
+      });
+  }
+}

src/app/features/checkout/checkout.html

@@ -0,0 +1,63 @@
+<section class="wrapper my-10">
+  <div class="wrapper grid place-content-center w-full">
+    <app-stepper [currentStep]="currentStepNumber()" [steps]="steps" />
+  </div>
+  <section class="mt-10">
+    @if (currentStepNumber() > 0 && currentStepNumber() < 3) {
+    <app-go-back
+      [route]="steps[currentStepNumber() - 1].route"
+      [text]="steps[currentStepNumber() - 1 ].label"
+      class="ml-4 block"
+    />
+    }
+
+    <div [class.md:grid-cols-6]="currentStepNumber() < 3" class="grid gap-10">
+      <div class="md:col-span-4">
+        <router-outlet />
+      </div>
+      @if (currentStepNumber() < 3) {
+      <div class="md:col-span-2">
+        <app-order-summery class="hidden md:block" />
+        <div class="card mt-4">
+          <fieldset class="fieldset">
+            <legend class="fieldset-legend">Have any coupon ?</legend>
+            <div class="flex items-center space-x-2">
+              <input class="input" placeholder="Enter coupon here" type="text" />
+              <button class="btn btn-ghost px-4">Apply</button>
+            </div>
+          </fieldset>
+          @if (addressIdControl.invalid && addressIdControl.touched) {
+          <div class="text-red-500 text-sm p-4 mt-4 rounded-xl bg-red-50">
+            Please select an address
+          </div>
+          } @if (paymentMethodControl.invalid && paymentMethodControl.touched) {
+          <div class="text-red-500 text-sm p-4 mt-4 rounded-xl bg-red-50">
+            Please select an payment checkout
+          </div>
+          } @if (currentStepNumber() === 1) {
+          <button
+            (click)="proceedToPayment()"
+            [disabled]="addressIdControl.invalid && addressIdControl.touched || orderCreationLoading()"
+            class="btn btn-primary w-full mt-4"
+          >
+            <app-loading-spinner [isLoading]="orderCreationLoading()">
+              Proceed to payment
+            </app-loading-spinner>
+          </button>
+          } @if (currentStepNumber() === 2) {
+          <button
+            (click)="proceedToCheckout()"
+            [disabled]="paymentMethodControl.invalid && paymentMethodControl.touched || proceedToPaymentLoading()"
+            class="btn btn-primary w-full mt-4"
+          >
+            <app-loading-spinner [isLoading]="proceedToPaymentLoading()">
+              Proceed to checkout
+            </app-loading-spinner>
+          </button>
+          }
+        </div>
+      </div>
+      }
+    </div>
+  </section>
+</section>

src/app/features/checkout/checkout.routes.ts

@@ -0,0 +1,26 @@
+import { Routes } from "@angular/router";
+import { Address } from "./address/address";
+import { Checkout } from "./checkout";
+import { Payment } from "@app/features/checkout/payment/payment";
+import Confirmation from "@app/features/checkout/confirmation/confirmation";
+
+export const checkoutRoutes: Routes = [
+  {
+    path: "",
+    component: Checkout,
+    children: [
+      {
+        path: "address",
+        component: Address,
+      },
+      {
+        path: "payment",
+        component: Payment,
+      },
+      {
+        path: "confirmation",
+        component: Confirmation,
+      },
+    ],
+  },
+];

src/app/features/checkout/checkout.spec.ts

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

src/app/features/checkout/checkout.ts

@@ -0,0 +1,109 @@
+import { Component, DestroyRef, inject, OnInit, signal } from "@angular/core";
+import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
+import { Stepper, Steps } from "@app/shared/components/stepper/stepper";
+import { OrderSummery } from "@app/features/checkout/components/order-summery/order-summery";
+import { GoBack } from "@shared/components/go-back/go-back";
+import { AddressService } from "@app/features/checkout/services/address-service";
+import { LoadingSpinner } from "@shared/components/loading-spinner/loading-spinner";
+import { CheckoutResponse, OrderService } from "@app/features/checkout/services/order-service";
+import { CartService } from "@core/services/cart-service";
+import { CartModel } from "@core/models/cart.model";
+import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
+import { filter, finalize, map } from "rxjs";
+
+@Component({
+  selector: "app-checkout",
+  providers: [AddressService],
+  imports: [RouterOutlet, Stepper, OrderSummery, GoBack, LoadingSpinner],
+  templateUrl: "./checkout.html",
+  styleUrl: "./checkout.css",
+})
+export class Checkout implements OnInit {
+  steps: Steps[] = [
+    { label: "Cart", route: "" },
+    { label: "Address", route: "/checkout/address" },
+    { label: "Payment", route: "/checkout/payment" },
+    { label: "Confirmation", route: "/checkout/confirmation" },
+  ];
+  destroyRef = inject(DestroyRef);
+  orderCreationLoading = signal(false);
+  proceedToPaymentLoading = signal(false);
+
+  private addressService = inject(AddressService);
+  addressIdControl = this.addressService.addressIdControl;
+
+  private orderService = inject(OrderService);
+  paymentMethodControl = this.orderService.paymentMethodForm;
+
+  private cartService = inject(CartService);
+  private cart: CartModel | undefined;
+  private router = inject(Router);
+  protected currentStepNumber = toSignal(
+    this.router.events.pipe(
+      filter((event): event is NavigationEnd => event instanceof NavigationEnd), // Added TS type guard
+      map((event: NavigationEnd) => {
+        // Strip query params and fragments to ensure exact matching
+        const cleanUrl = event.urlAfterRedirects.split("?")[0].split("#")[0];
+
+        // Exact match comparison
+        const activeIndex = this.steps.findIndex(
+          (step) => cleanUrl === step.route || (step.route !== "" && cleanUrl.endsWith(step.route)),
+        );
+
+        return activeIndex !== -1 ? activeIndex : 0;
+      }),
+    ),
+    { initialValue: 1 },
+  );
+
+  ngOnInit(): void {
+    this.cartService.cartItems$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((cart) => {
+      this.cart = cart;
+    });
+  }
+
+  protected proceedToPayment() {
+    if (this.addressIdControl.invalid) {
+      this.addressIdControl.markAsTouched();
+      return;
+    }
+    this.orderCreationLoading.set(true);
+    this.orderService
+      .createOrder({ cartId: this.cart!.id, addressId: this.addressIdControl.value! })
+      .pipe(
+        finalize(() => this.orderCreationLoading.set(false)),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe(async () => {
+        await this.router.navigate(["/checkout/payment"]);
+      });
+  }
+
+  protected proceedToCheckout() {
+    if (this.paymentMethodControl.invalid) {
+      this.paymentMethodControl.markAsTouched();
+      return;
+    }
+    this.proceedToPaymentLoading.set(true);
+    this.orderService
+      .checkout(this.paymentMethodControl.value!)
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        finalize(() => this.proceedToPaymentLoading.set(false)),
+      )
+      .subscribe((response) => this.handleCheckout(response));
+  }
+  private handleCheckout(data: CheckoutResponse): void {
+    if (data.success) {
+      if (data.method === "stripeCheckout") {
+        this.handleStripeCheckout(data);
+      }
+    }
+  }
+  private handleStripeCheckout(data: CheckoutResponse) {
+    console.log(data);
+    if (data.redirectUrl) {
+      window.location.href = data.redirectUrl;
+    }
+  }
+}

src/app/features/checkout/components/address-form/address-form.html

@@ -0,0 +1,57 @@
+<details [open]="isEditing()" class="card p-0!" title="Click to add a new address">
+  <summary class="p-6">
+    <label class="font-medium text-gray-600 ml-2" for="currentAddress"
+      >{{isEditing() ? 'Update address' : 'Add new address'}}</label
+    >
+  </summary>
+  <form
+    (ngSubmit)="submitForm()"
+    [formGroup]="addressForm"
+    class="w-full flex flex-col gap-y-2 pt-0 p-4"
+  >
+    <fieldset class="flex space-x-4 w-full">
+      <fieldset class="fieldset w-full">
+        <legend class="fieldset-legend">First Name</legend>
+        <input class="input" formControlName="firstName" placeholder="Example: Jhon" type="text" />
+        <app-error [control]="addressForm.get('firstName')" fieldName="First name" />
+      </fieldset>
+      <fieldset class="fieldset w-full">
+        <legend class="fieldset-legend">Last Name</legend>
+        <input class="input" formControlName="lastName" placeholder="Example: Doe" type="text" />
+        <app-error [control]="addressForm.get('lastName')" fieldName="Last name" />
+      </fieldset>
+    </fieldset>
+    <fieldset class="fieldset w-full">
+      <legend class="fieldset-legend">Street Address</legend>
+      <input class="input" formControlName="street" placeholder="Your street address" type="text" />
+      <app-error [control]="addressForm.get('street')" fieldName="Street address" />
+    </fieldset>
+    <fieldset class="flex space-x-4 w-full">
+      <fieldset class="fieldset w-full">
+        <legend class="fieldset-legend">City</legend>
+        <input class="input" formControlName="city" placeholder="Your city" type="text" />
+        <app-error [control]="addressForm.get('city')" fieldName="City" />
+      </fieldset>
+      <fieldset class="fieldset w-full">
+        <legend class="fieldset-legend">State</legend>
+        <input class="input" formControlName="state" placeholder="State Name" type="text" />
+        <app-error [control]="addressForm.get('state')" fieldName="State" />
+      </fieldset>
+      <fieldset class="fieldset w-full">
+        <legend class="fieldset-legend">Pin Code</legend>
+        <input class="input" formControlName="pinCode" placeholder="7XX XX1" type="text" />
+        <app-error [control]="addressForm.get('pinCode')" fieldName="Pin Code" />
+      </fieldset>
+    </fieldset>
+    <div class="ml-auto flex space-x-4">
+      <button (click)="cancelEditing()" class="btn btn-ghost px-3 text-sm" type="button">
+        Cancel
+      </button>
+      <button class="btn btn-primary min-w-50 px-3 text-sm">
+        <app-loading-spinner [isLoading]="isProcessing()">
+          {{isEditing() ? 'Update this address' : 'Use this address'}}
+        </app-loading-spinner>
+      </button>
+    </div>
+  </form>
+</details>

src/app/features/checkout/components/address-form/address-form.spec.ts

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

src/app/features/checkout/components/address-form/address-form.ts

@@ -0,0 +1,65 @@
+import { Component, EventEmitter, input, Input, Output, signal } from "@angular/core";
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { Error } from "@app/shared/components/error/error";
+import { AddressRequest, AddressResponse } from "@app/features/checkout/services/address-service";
+import { LoadingSpinner } from "@shared/components/loading-spinner/loading-spinner";
+
+@Component({
+  selector: "app-address-form",
+  imports: [ReactiveFormsModule, Error, LoadingSpinner],
+  templateUrl: "./address-form.html",
+  styleUrl: "./address-form.css",
+})
+export class AddressForm {
+  @Output() submitAddress: EventEmitter<AddressRequest> = new EventEmitter<AddressRequest>();
+  @Output() updateAddress: EventEmitter<AddressResponse> = new EventEmitter<AddressResponse>();
+  @Output() editingCanceled: EventEmitter<void> = new EventEmitter<void>();
+
+  isProcessing = input<boolean>(false);
+
+  addressForm = new FormGroup({
+    firstName: new FormControl("", {
+      validators: [Validators.required, Validators.pattern("^[a-zA-Z]\\S+$")],
+    }),
+    lastName: new FormControl("", {
+      validators: [Validators.required, Validators.pattern("^[a-zA-Z]\\S+$")],
+    }),
+    street: new FormControl("", { validators: Validators.required }),
+    city: new FormControl("", { validators: Validators.required }),
+    state: new FormControl("", { validators: Validators.required }),
+    pinCode: new FormControl("", {
+      validators: [Validators.required, Validators.pattern("^[0-9]{6}$")],
+    }),
+  });
+  protected isEditing = signal(false);
+  protected address = signal<AddressResponse | null>(null);
+
+  @Input() set initialData(address: AddressResponse) {
+    if (address) {
+      this.addressForm.patchValue(address);
+      this.address.set(address);
+      this.isEditing.set(true);
+    }
+  }
+
+  submitForm() {
+    if (this.addressForm.invalid) {
+      this.addressForm.markAllAsTouched();
+      return;
+    }
+
+    const emittedData = this.addressForm.getRawValue() as AddressRequest;
+
+    if (this.isEditing()) {
+      const mergedData = { ...this.address(), ...emittedData };
+      this.updateAddress.emit(mergedData as unknown as AddressResponse);
+    } else {
+      this.submitAddress.emit(emittedData);
+    }
+  }
+
+  cancelEditing() {
+    this.addressForm.reset();
+    this.editingCanceled.emit();
+  }
+}

src/app/features/checkout/components/address-select/address-select.html

@@ -0,0 +1,20 @@
+@if (isEditing()) {
+<app-address-form
+  (editingCanceled)="cancelEditing()"
+  (updateAddress)="updateAddress($event)"
+  [initialData]="address"
+  [isProcessing]="isProcessing()"
+/>
+} @else{
+<div class="flex justify-between card">
+  <div class="flex space-x-4 items-center">
+    <p class="text-gray-600 font-medium">{{[address.firstName, address.lastName] | fullname}}</p>
+    <p class="text-gray-400 text-sm">
+      {{`${address.street}, ${address.city}, ${address.pinCode}`}}
+    </p>
+  </div>
+  <div>
+    <button (click)="editForm()" class="btn btn-ghost text-sm px-2">Edit</button>
+  </div>
+</div>
+}

src/app/features/checkout/components/address-select/address-select.spec.ts

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

src/app/features/checkout/components/address-select/address-select.ts

@@ -0,0 +1,45 @@
+import { Component, effect, EventEmitter, Input, input, Output, signal } from "@angular/core";
+import { AddressResponse } from "@app/features/checkout/services/address-service";
+import { FullnamePipe } from "@shared/pipes/fullname-pipe";
+import { AddressForm } from "@app/features/checkout/components/address-form/address-form";
+
+@Component({
+  selector: "app-address-select",
+  imports: [FullnamePipe, AddressForm],
+  templateUrl: "./address-select.html",
+  styleUrl: "./address-select.css",
+})
+export class AddressSelect {
+  @Input() address!: AddressResponse;
+  @Output() addressUpdated = new EventEmitter<AddressResponse>();
+
+  isProcessing = input<boolean>(false);
+  protected isEditing = signal(false);
+
+  // Track if THIS specific component triggered the API call
+  private isLocallySubmitted = false;
+
+  constructor() {
+    effect(() => {
+      const processing = this.isProcessing();
+
+      if (!processing && this.isLocallySubmitted) {
+        this.isEditing.set(false);
+        this.isLocallySubmitted = false;
+      }
+    });
+  }
+
+  editForm() {
+    this.isEditing.set(true);
+  }
+
+  cancelEditing() {
+    this.isEditing.set(false);
+  }
+
+  updateAddress(address: AddressResponse) {
+    this.isLocallySubmitted = true;
+    this.addressUpdated.emit(address);
+  }
+}

src/app/features/checkout/components/order-summery/order-summery.html

@@ -0,0 +1,24 @@
+<div class="card">
+  <p class="text-gray-800 font-medium text-xl">Order Summery</p>
+  @if (cartItems | async; as cart) { @for (item of cart.items; track item.id) {
+  <article
+    class="mt-4 pb-4 border-b border-b-gray-400 border-dashed flex justify-between items-center"
+  >
+    <div class="flex space-x-4">
+      <div class="w-15 h-15 rounded-lg aspect-square relative overflow-hidden">
+        <img ngSrc="{{item.image}}" fill class="object-cover" alt="product image" />
+      </div>
+      <article>
+        <h2>{{item.title}}</h2>
+        <p class="text-gray-600 text-sm">Rs. {{item.price}} x {{item.quantity}}</p>
+      </article>
+    </div>
+    <p class="text-gray-800 font-medium">Rs. {{item.subtotal}}</p>
+  </article>
+  }
+  <article class="mt-4 flex justify-between items-center text-lg">
+    <p class="text-gray-800 font-medium">Total</p>
+    <p class="text-gray-800 font-medium">Rs. {{cart.totalPrice}}</p>
+  </article>
+  }
+</div>

src/app/features/checkout/components/order-summery/order-summery.spec.ts

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

src/app/features/checkout/components/order-summery/order-summery.ts

@@ -0,0 +1,19 @@
+import { Component, inject, OnInit } from "@angular/core";
+import { CartService } from "@core/services/cart-service";
+import { CartModel } from "@core/models/cart.model";
+import { Observable } from "rxjs";
+import { AsyncPipe, NgOptimizedImage } from "@angular/common";
+
+@Component({
+  selector: "app-order-summery",
+  imports: [AsyncPipe, NgOptimizedImage],
+  templateUrl: "./order-summery.html",
+  styleUrl: "./order-summery.css",
+})
+export class OrderSummery implements OnInit {
+  cartService = inject(CartService);
+  cartItems: Observable<CartModel> | undefined;
+  ngOnInit(): void {
+    this.cartItems = this.cartService.cartItems$;
+  }
+}

src/app/features/checkout/components/payment-method-card/payment-method-card.html

@@ -0,0 +1,3 @@
+<div class="card min-h-20">
+  <ng-content />
+</div>

src/app/features/checkout/components/payment-method-card/payment-method-card.spec.ts

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

src/app/features/checkout/components/payment-method-card/payment-method-card.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-payment-method-card",
+  imports: [],
+  templateUrl: "./payment-method-card.html",
+  styleUrl: "./payment-method-card.css",
+})
+export class PaymentMethodCard {}

src/app/features/checkout/confirmation/confirmation.html

@@ -0,0 +1,47 @@
+<div class="flex flex-col gap-4 items-center justify-center">
+  <app-loading-spinner [isLoading]="isProcessing()">
+    <div class="card max-w-md text-center flex items-center flex-col gap-4">
+      <div
+        [class.bg-green-100]="paymentData()!.isSuccess"
+        [class.bg-red-100]="!paymentData()!.isSuccess"
+        class="rounded-full p-4"
+      >
+        @if (paymentData()!.isSuccess) {
+        <lucide-angular [img]="BadgeCheck" class="w-6 h-6 text-green-500" />
+        } @else {
+        <lucide-angular [img]="BadgeQuestionMark" class="w-6 h-6 text-red-500" />
+        }
+      </div>
+      <p
+        [class.text-green-500]="paymentData()!.isSuccess"
+        [class.text-red-500]="!paymentData()!.isSuccess"
+        class="text-xl font-medium"
+      >
+        {{ paymentData()!.message }}
+      </p>
+      <p class="text-sm text-gray-400">
+        @if (paymentData()!.isSuccess) { Your payment processed successfully. You will receive a
+        confirmation email shortly. } @else { If money is debited then wait for few hours then check
+        payment status. }
+      </p>
+      @if (paymentData()!.isSuccess) {
+      <article class="rounded-xl bg-gray-100 px-3 py-4 text-gray-500 text-sm w-full space-y-4">
+        <article class="flex justify-between border-b border-b-gray-200 pb-4">
+          <p class="font-medium">Amount</p>
+          <p>Rs.{{ paymentData()?.amount }}</p>
+        </article>
+
+        <article class="flex justify-between">
+          <p class="font-medium">Transaction ID</p>
+          <p class="truncate">{{ paymentData()?.transactionId }}</p>
+        </article>
+        <article class="flex justify-between">
+          <p class="font-medium">Payment method</p>
+          <p>{{ paymentData()?.paymentMethod | uppercase }}</p>
+        </article>
+      </article>
+      }
+    </div>
+  </app-loading-spinner>
+  <app-go-back class="w-min-content! flex-nowrap" route="/" text="Continue Shopping" />
+</div>

src/app/features/checkout/confirmation/confirmation.spec.ts

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

src/app/features/checkout/confirmation/confirmation.ts

@@ -0,0 +1,73 @@
+import { Component, DestroyRef, inject, OnInit, signal } from "@angular/core";
+import { BadgeCheck, BadgeQuestionMark, LucideAngularModule } from "lucide-angular";
+import { GoBack } from "@shared/components/go-back/go-back";
+import { ActivatedRoute } from "@angular/router";
+import { LoadingSpinner } from "@shared/components/loading-spinner/loading-spinner";
+import {
+  OrderService,
+  PaymentVerificationResponse,
+} from "@app/features/checkout/services/order-service";
+import { finalize, tap } from "rxjs";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { UpperCasePipe } from "@angular/common";
+import { CartService } from "@core/services/cart-service";
+
+@Component({
+  selector: "app-confirmation",
+  imports: [LucideAngularModule, GoBack, LoadingSpinner, UpperCasePipe],
+  templateUrl: "./confirmation.html",
+  styleUrl: "./confirmation.css",
+})
+export default class Confirmation implements OnInit {
+  destroyRef = inject(DestroyRef);
+  protected paymentData = signal<PaymentVerificationResponse | null>(null);
+  protected isProcessing = signal(false);
+  protected readonly BadgeCheck = BadgeCheck;
+  protected readonly BadgeQuestionMark = BadgeQuestionMark;
+  private route = inject(ActivatedRoute);
+  private orderService = inject(OrderService);
+  private cartService = inject(CartService);
+  private orderId: string | null = null;
+  private sessionId: string | null = null;
+
+  ngOnInit() {
+    this.orderId = this.route.snapshot.queryParamMap.get("order_id");
+    this.sessionId = this.route.snapshot.queryParamMap.get("session_id");
+    this.checkConfirmation();
+  }
+
+  private checkConfirmation() {
+    if (!this.orderId || !this.sessionId) {
+      console.error("Missing order ID or session ID");
+      return;
+    }
+    try {
+      this.isProcessing.set(true);
+      const orderId = parseInt(this.orderId!);
+      this.orderService
+        .verifyPayment(orderId, this.sessionId!)
+        .pipe(
+          tap((data) => {
+            this.paymentData.set(data);
+            if (data && data.isSuccess) {
+              this.cartService.fetchCart();
+            }
+          }),
+          finalize(() => this.isProcessing.set(false)),
+          takeUntilDestroyed(this.destroyRef),
+        )
+        .subscribe({
+          next: () => {
+            console.log("Payment verified successfully");
+          },
+          error: (err) => {
+            console.error(err);
+          },
+        });
+    } catch (e) {
+      this.isProcessing.set(false);
+      console.error(e);
+      return;
+    }
+  }
+}

src/app/features/checkout/payment/payment.html

@@ -0,0 +1,51 @@
+<div class="flex flex-col gap-4">
+  <app-payment-method-card>
+    <div class="flex gap-4">
+      <input
+        (change)="onPaymentMethodSelected('stripeCheckout')"
+        [formControl]="paymentMethodForm"
+        name="payment-method"
+        type="radio"
+        value="stripeCheckout"
+      />
+      <div class="flex-1">
+        <div class="flex justify-between mb-2">
+          <div class="">
+            <img alt="" class="w-25" src="/assets/images/stripe-4.svg" />
+          </div>
+          <div class="flex gap-2">
+            <div class="card p-3! flex justify-center items-center">
+              <img alt="" class="h-3" src="/assets/images/visa-10.svg" />
+            </div>
+            <div class="card p-3! flex justify-center items-center">
+              <img alt="" class="h-5" src="/assets/images/mastercard-modern-design-.svg" />
+            </div>
+          </div>
+        </div>
+        <p class="text-sm text-gray-600">Pay using card via stripe checkout.</p>
+      </div>
+    </div>
+  </app-payment-method-card>
+  <app-payment-method-card>
+    <div class="flex gap-4">
+      <input
+        (change)="onPaymentMethodSelected('cashOnDelivery')"
+        [formControl]="paymentMethodForm"
+        name="payment-method"
+        type="radio"
+        value="cashOnDelivery"
+      />
+      <div class="flex-1">
+        <div class="flex items-center gap-2 mb-2">
+          <div class="text-gray-700">
+            <lucide-angular [img]="coinsIcon" class="h-10" />
+          </div>
+          <div class="">
+            <p class="text-xl font-medium text-gray-700">Cash on Delivery</p>
+          </div>
+        </div>
+        <p class="text-sm text-gray-600">Additional charges may apply.</p>
+      </div>
+    </div>
+  </app-payment-method-card>
+</div>

src/app/features/checkout/payment/payment.spec.ts

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

src/app/features/checkout/payment/payment.ts

@@ -0,0 +1,28 @@
+import { Component, inject, OnInit } from "@angular/core";
+import { PaymentMethodCard } from "@app/features/checkout/components/payment-method-card/payment-method-card";
+import { Coins, LucideAngularModule } from "lucide-angular";
+import { ReactiveFormsModule } from "@angular/forms";
+import { OrderService } from "@app/features/checkout/services/order-service";
+import { ActivatedRoute } from "@angular/router";
+
+@Component({
+  selector: "app-payment",
+  imports: [PaymentMethodCard, LucideAngularModule, ReactiveFormsModule],
+  templateUrl: "./payment.html",
+  styleUrl: "./payment.css",
+})
+export class Payment implements OnInit {
+  coinsIcon = Coins;
+  private orderService = inject(OrderService);
+  protected paymentMethodForm = this.orderService.paymentMethodForm;
+  private route = inject(ActivatedRoute);
+  private orderId: string | null = null;
+
+  ngOnInit() {
+    this.orderId = this.route.snapshot.paramMap.get("order_id");
+  }
+
+  onPaymentMethodSelected(paymentMethod: string) {
+    this.paymentMethodForm.setValue(paymentMethod);
+  }
+}

src/app/features/checkout/services/address-service.spec.ts

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

src/app/features/checkout/services/address-service.ts

@@ -0,0 +1,44 @@
+import { inject, Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { API_URL } from "@core/tokens/api-url-tokens";
+import { PaginatedResponse } from "@core/models/paginated.model";
+import { FormControl, Validators } from "@angular/forms";
+
+export interface AddressRequest {
+  firstName: string;
+  lastName: string;
+  street: string;
+  city: string;
+  state: string;
+  pinCode: string;
+}
+
+export interface AddressResponse extends AddressRequest {
+  id: number;
+}
+
+@Injectable()
+export class AddressService {
+  http = inject(HttpClient);
+  apiUrl = inject(API_URL);
+
+  addressIdControl = new FormControl<number | null>(null, Validators.required);
+
+  fetchAddresses(userId: number) {
+    return this.http.get<PaginatedResponse<AddressResponse>>(
+      `${this.apiUrl}/user/${userId}/addresses`,
+    );
+  }
+
+  createAddress(userId: number, data: AddressRequest) {
+    return this.http.post<AddressResponse>(`${this.apiUrl}/user/${userId}/addresses`, data);
+  }
+  updateAddress(addressId: number, data: AddressRequest) {
+    return this.http.patch<AddressResponse>(`${this.apiUrl}/addresses/${addressId}`, data);
+  }
+  deleteAddress(userId: number, addressId: number) {
+    return this.http.delete<AddressResponse>(
+      `${this.apiUrl}/user/${userId}/addresses/${addressId}`,
+    );
+  }
+}

src/app/features/checkout/services/order-service.spec.ts

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

src/app/features/checkout/services/order-service.ts

@@ -0,0 +1,79 @@
+import { inject, Injectable } from "@angular/core";
+import { API_URL } from "@core/tokens/api-url-tokens";
+import { HttpClient } from "@angular/common/http";
+import { AuthService } from "@core/services/auth-service";
+import { FormControl, Validators } from "@angular/forms";
+import { tap } from "rxjs";
+import { SessionStorageService } from "@core/services/session-storage.service";
+
+export interface PaymentVerificationResponse {
+  isSuccess: boolean;
+  message: string;
+  amount: number | null;
+  transactionId: string | null;
+  paymentMethod: string | null;
+}
+
+export interface CheckoutResponse {
+  success: boolean;
+  amount: number;
+  currency: string;
+  method: string;
+  redirectUrl: string | null;
+  errorMessage: string | null;
+}
+export interface OrderRequest {
+  addressId: number;
+  cartId: number;
+}
+export interface OrderResponse {
+  orderId: number;
+  message: string;
+}
+
+@Injectable({
+  providedIn: "root",
+})
+export class OrderService {
+  public paymentMethodForm = new FormControl<string | null>(null, Validators.required);
+  private currentOrderId: number | null = null;
+  private http = inject(HttpClient);
+  private apiUrl = inject(API_URL);
+  private authService = inject(AuthService);
+  private user = this.authService.user;
+  private sessionStorage = inject(SessionStorageService);
+
+  constructor() {
+    const cachedOrderId = this.sessionStorage.getItem<number>("orderId");
+    if (cachedOrderId) {
+      this.currentOrderId = cachedOrderId;
+    }
+  }
+
+  createOrder(data: OrderRequest) {
+    return this.http
+      .post<OrderResponse>(`${this.apiUrl}/users/${this.user()?.id}/orders`, data)
+      .pipe(
+        tap((response) => {
+          this.currentOrderId = response.orderId;
+          this.sessionStorage.setItem<number>("orderId", response.orderId);
+        }),
+      );
+  }
+
+  checkout(mode: string) {
+    return this.http.post<CheckoutResponse>(
+      `${this.apiUrl}/orders/${this.currentOrderId}/payments`,
+      {
+        mode: mode,
+      },
+    );
+  }
+
+  verifyPayment(orderId: number, sessionId: string) {
+    return this.http.post<PaymentVerificationResponse>(`${this.apiUrl}/payments/verify`, {
+      orderId: orderId,
+      sessionId: sessionId,
+    });
+  }
+}

src/app/features/home/home.ts

@@ -1,9 +1,9 @@
 import { Component } from "@angular/core";
-import { Products } from "./products/products";
+import { Product } from "../product/product";
 
 @Component({
   selector: "app-home",
-  imports: [Products],
+  imports: [Product],
   templateUrl: "./home.html",
   styleUrl: "./home.css",
 })

src/app/features/home/products/componets/product-card/product-card.html

@@ -1,17 +0,0 @@
-<div class="card flex flex-col relative">
-  <!--Favorite button -->
-  <button
-    class="absolute right-6 top-6 transition-all duration-300 ease active:scale-80 hover:bg-gray-100 p-1 rounded-full"
-  >
-    <lucide-angular [img]="HeartIcon" class="w-4 h-4 text-gray-500" />
-  </button>
-
-  <!--Product image-->
-  <div class="bg-gray-200 rounded-xl h-40">
-    <img src="https://placehold.co/400x600" alt="" class="object-cover rounded-xl w-full h-full" />
-  </div>
-
-  <p class="text-gray-400 text-sm">Product Name</p>
-  <p class="text-gray-400 text-xs">⭐4.5</p>
-  <p class="text-gray-400 text-xs">Price: 4999/-</p>
-</div>

src/app/features/home/products/componets/product-card/product-card.ts

@@ -1,12 +0,0 @@
-import { Component } from "@angular/core";
-import { LucideAngularModule, Heart } from "lucide-angular";
-
-@Component({
-  selector: "app-product-card",
-  standalone: true,
-  imports: [LucideAngularModule],
-  templateUrl: "./product-card.html",
-})
-export class ProductCard {
-  readonly HeartIcon = Heart;
-}

src/app/features/home/products/products.html

@@ -1,14 +0,0 @@
-<section
-  class="wrapper py-8 bg-gray-300 bg-cover bg-end bg-[linear-gradient(to_right,hsla(0,0%,90%,1.0),hsla(0,0%,90%,0.8)_20%,hsla(0,0%,100%,0)),url('/assets/images/watch-banner.jpg')]"
->
-  <p class="text-3xl text-gray-700 font-sans">Our Products</p>
-</section>
-
-<section class="mt-4 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4 wrapper">
-  <app-product-card />
-  <app-product-card />
-  <app-product-card />
-  <app-product-card />
-  <app-product-card />
-  <app-product-card />
-</section>

src/app/features/home/products/products.ts

@@ -1,9 +0,0 @@
-import { Component } from "@angular/core";
-import { ProductCard } from "./componets/product-card/product-card";
-
-@Component({
-  selector: "app-products",
-  imports: [ProductCard],
-  templateUrl: "./products.html",
-})
-export class Products {}

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

@@ -0,0 +1,157 @@
+<section class="wrapper">
+  @if (successMessage()) {
+  <div
+    class="fixed top-5 right-5 z-50 flex items-center p-4 mb-4 text-green-800 rounded-lg bg-green-50 border border-green-200 shadow-lg animate-bounce-in"
+    role="alert"
+  >
+    <svg
+      aria-hidden="true"
+      class="flex-shrink-0 w-4 h-4"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
+      />
+    </svg>
+    <div class="ms-3 text-sm font-medium">{{ successMessage() }}</div>
+    <button
+      (click)="successMessage.set(null)"
+      class="ms-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8"
+      type="button"
+    >
+      <span class="sr-only">Close</span>
+      ✕
+    </button>
+  </div>
+  }
+
+  <h1 class="h1">Add Product</h1>
+  <section class="card">
+    <form
+      (ngSubmit)="submitProductForm()"
+      [formGroup]="productAddFrom"
+      class="flex flex-col sm:flex-row gap-4"
+    >
+      <fieldset class="flex flex-col space-y-4 min-w-0 flex-1">
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Title</legend>
+          <input
+            class="input"
+            formControlName="title"
+            id="title"
+            placeholder="Enter product title"
+            type="text"
+          />
+          <app-error [control]="productAddFrom.get('title')" fieldName="title" />
+        </fieldset>
+
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Description</legend>
+          <textarea
+            class="input"
+            formControlName="description"
+            id="description"
+            rows="5"
+          ></textarea>
+          <app-error [control]="productAddFrom.get('description')" fieldName="description" />
+        </fieldset>
+
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Select category</legend>
+          <select class="input" formControlName="product_category_id" id="category">
+            <option disabled selected value="">Select Category</option>
+            @for (category of categories(); track category?.id) {
+            <option [value]="category?.id">{{ category.name }}</option>
+            }
+          </select>
+          <app-error [control]="productAddFrom.get('product_category_id')" fieldName="category" />
+        </fieldset>
+      </fieldset>
+      <fieldset class="flex flex-col space-y-4 min-w-0 flex-1">
+        <div class="flex gap-4">
+          <fieldset class="fieldset flex-1">
+            <legend class="fieldset-legend">List Price</legend>
+            <input
+              class="input"
+              formControlName="list_price"
+              id="list-price"
+              placeholder="$0"
+              type="number"
+            />
+            <label class="label" for="list-price">Price to be shown as MRP</label>
+            <app-error [control]="productAddFrom.get('list_price')" fieldName="List Price" />
+          </fieldset>
+
+          <fieldset class="fieldset flex-1">
+            <legend class="fieldset-legend">Actual Price</legend>
+            <input
+              class="input"
+              formControlName="actual_price"
+              id="actual-price"
+              placeholder="$0"
+              type="number"
+            />
+            <label class="label" for="actual-price">Price to be calculated when billing</label>
+            <app-error [control]="productAddFrom.get('actual_price')" fieldName="Actual Price" />
+          </fieldset>
+        </div>
+
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Image</legend>
+          <div class="grid grid-cols-1 sm:grid-cols-3 sm:h-36 gap-4">
+            <app-image-input
+              (imageSelected)="openPreview($event)"
+              [bgImageUrl]="selectedImages()['image_1']?.url"
+              id="image_1"
+            />
+
+            <app-image-input
+              (imageSelected)="openPreview($event)"
+              [bgImageUrl]="selectedImages()['image_2']?.url"
+              id="image_2"
+            />
+            <app-image-input
+              (imageSelected)="openPreview($event)"
+              [bgImageUrl]="selectedImages()['image_3']?.url"
+              id="image_3"
+            />
+            <dialog
+              #imageDialog
+              class="relative min-w-11/12 min-h-11/12 m-auto p-4 rounded-xl bg-gray-50 overflow-x-hidden backdrop:bg-black/50 backdrop:backdrop-blur-xs"
+            >
+              <div class="flex flex-col gap-4 overflow-hidden">
+                <div class="flex self-end gap-4 fixed top-10 right-10">
+                  <button
+                    (click)="closeDialog()"
+                    class="btn btn-ghost bg-gray-50 py-1 px-4 shadow-xl"
+                    type="button"
+                  >
+                    ✕ Close
+                  </button>
+
+                  <button
+                    (click)="confirmImage()"
+                    class="btn btn-black py-1 px-4 shadow-xl"
+                    type="button"
+                  >
+                    ✓ Select
+                  </button>
+                </div>
+                <div class="overflow-y-scroll rounded-lg">
+                  <img
+                    [src]="activeImage()?.url"
+                    alt="Product Preview"
+                    class="w-full h-auto object-contain"
+                  />
+                </div>
+              </div>
+            </dialog>
+          </div>
+        </fieldset>
+        <button class="btn btn-black py-2" type="submit">Add Product</button>
+      </fieldset>
+    </form>
+  </section>
+</section>

src/app/features/product/add-product/add-product.spec.ts

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