Merge pull request 'Completed Cart page design' (#54) from cart into main

Reviewed-on: #54

MidrandBookshop/Components/Layout/MainLayout.razor

@@ -6,7 +6,7 @@
     <div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
         <div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
             <h5 class="fw-bold m-0 text-dark tracking-tight" style="font-family: 'Inter', sans-serif; font-size: 1.1rem;">
-                YOUR CART (@CartItems.Sum(i => i.Quantity))
+                YOUR CART (@ShoppingCart.Items.Count())
             </h5>
             <button class="btn btn-sm text-dark p-1 border-0" @onclick="ToggleCart" type="button">
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -17,7 +17,7 @@
         </div>
 
         <div class="cart-body flex-grow-1 overflow-y-auto p-4">
-            @if (!CartItems.Any())
+            @if (!ShoppingCart.Items.Any())
             {
                 <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted py-5">
                     <svg class="mb-3 opacity-50" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -29,22 +29,29 @@
             else
             {
                 <div class="d-flex flex-column gap-4">
-                    @foreach (var item in CartItems)
+                    @foreach (var item in ShoppingCart.Items)
                     {
                         <div class="cart-item d-flex gap-3 align-items-start pb-3 border-bottom-dashed">
                             <div class="cart-item-thumb bg-dark text-white-50 d-flex align-items-center justify-content-center px-2 text-center" style="width: 54px; height: 74px; font-size: 0.45rem; letter-spacing: 0.5px;">
-                                [ COVER ]
+                                @if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
+                                {
+                                    <img src="@item.Product!.ImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@item.Product.Name" />
+                                }
+                                else
+                                {
+                                    @:[COVER]
+                                }
                             </div>
                             <div class="flex-grow-1">
-                                <h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Title</h6>
-                                <p class="text-muted xx-small mb-2">by @item.Author</p>
+                                <h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Product!.Name</h6>
+                                <p class="text-muted xx-small mb-2">by @($"{item.Author!.Name} {item.Author.LastName}")</p>
                                 <div class="d-flex align-items-center justify-content-between">
                                     <div class="quantity-picker d-flex align-items-center border rounded-pill bg-light">
                                         <button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, -1)" type="button">-</button>
-                                        <span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@item.Quantity</span>
+                                        <span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@ShoppingCart.Items.FirstOrDefault(i => i.Price!.Id == item.Price!.Id)!.Quantity</span>
                                         <button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, 1)" type="button">+</button>
                                     </div>
-                                    <span class="small fw-semibold text-dark">R @(item.Price * item.Quantity)</span>
+                                    <span class="small fw-semibold text-dark">R @(item.Price!.Amount * item.Quantity)</span>
                                 </div>
                             </div>
                             <button class="btn text-muted p-0 border-0 mt-1 align-self-start" style="background: none;" @onclick="() => RemoveFromCart(item)" type="button">
@@ -56,7 +63,7 @@
             }
         </div>
 
-        @if (CartItems.Any())
+        @if (ShoppingCart.Items.Any())
         {
             <div class="cart-footer p-4 bg-light border-top mt-auto">
                 <div class="d-flex align-items-center justify-content-between mb-4">
@@ -156,7 +163,7 @@
                         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
                             <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
                         </svg>
-                        @if (CartItems.Any())
+                        @if (ShoppingCart.Items.Any())
                         {
                             <span class="cart-badge">@ShoppingCart.Items.Count</span>
                         }

MidrandBookshop/Components/Layout/MainLayout.razor.cs

@@ -19,13 +19,6 @@ public partial class MainLayout(CartService cartService) : IDisposable
     private bool IsSearchActive { get; set; } = false;
     private bool IsCartOpen { get; set; } = false;
 
-    private List<CartItem> CartItems = new()
-    {
-        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
-        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
-        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
-    };
-
     protected override async Task OnInitializedAsync()
     {
         AuthState = await AuthStateProvider.GetAuthenticationStateAsync();
@@ -111,18 +104,25 @@ public partial class MainLayout(CartService cartService) : IDisposable
 
     private void ToggleCart() => IsCartOpen = !IsCartOpen;
 
-    private void ChangeQuantity(CartItem item, int delta)
+    private async void ChangeQuantity(CartItem item, int delta)
     {
-        item.Quantity += delta;
-        if (item.Quantity <= 0)
-        {
-            CartItems.Remove(item);
-        }
+        var peekQuantity = item.Quantity + delta;
+
+        if (peekQuantity < 1) return;
+
+        cartService.UpdateQuantity(item.Price!.Id, delta);
+
+        await cartService.SaveCartToStorageAsync();
     }
 
-    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
+    private async void RemoveFromCart(CartItem item)
+    {
+        cartService.RemoveOneItem(item.Price!.Id);
 
-    private decimal GetCartTotal() => ShoppingCart?.TotalPrice ?? 0.00m;
+        await cartService.SaveCartToStorageAsync();
+    }
+
+    private decimal GetCartTotal() => ShoppingCart?.TotalAmount ?? 0.00m;
 
     private void RedirectToCart()
     {
@@ -143,13 +143,4 @@ public partial class MainLayout(CartService cartService) : IDisposable
 
         GC.SuppressFinalize(this);
     }
-
-    public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }
 }

MidrandBookshop/Components/Pages/Cart.razor

@@ -1,106 +1,98 @@
 @page "/cart"
+@rendermode InteractiveServer
 
-<div class="container py-5" style="max-width: 900px;">
-    <div class="d-flex align-items-center justify-content-between mb-5">
-        <h2 class="fw-bold m-0">Your Cart</h2>
-        <a href="/" class="text-dark text-decoration-none small fw-bold tracking-widest">CONTINUE SHOPPING</a>
+<div class="container py-5" style="max-width: 1000px; font-family: system-ui, -apple-system, sans-serif;">
+
+    <div class="d-flex align-items-baseline justify-content-between mb-5 border-bottom pb-3">
+        <h1 class="ff-serif mb-0" style="font-size: 2.25rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: -0.5px;">Your Cart</h1>
+        <a href="/" class="text-dark text-decoration-none small fw-semibold tracking-widest text-uppercase" style="font-size: 0.75rem; letter-spacing: 1.5px;">Continue Shopping</a>
     </div>
 
-    @if (!CartItems.Any())
+    @if (!ShoppingCart.Items.Any())
     {
-        <div class="text-center py-5 border rounded-3 bg-white">
-            <p class="text-muted mb-4">Your collection is currently empty.</p>
-            <a href="/" class="btn btn-dark rounded-pill px-4">Browse Catalog</a>
+        <div class="text-center py-5 my-4">
+            <div class="mb-4 text-muted-50">
+                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-secondary opacity-50"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
+            </div>
+            <h3 class="ff-serif mb-2" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400;">Your collection is currently vacant.</h3>
+            <p class="text-muted small mb-4" style="letter-spacing: 0.2px;">Even with careful scrutiny, the requested shelf remains empty.</p>
+            <a href="/" class="btn btn-dark rounded-pill px-4 py-2 text-uppercase fw-semibold tracking-widest" style="font-size: 0.75rem; letter-spacing: 1px; background-color: #1c1f22;">Browse Catalog</a>
         </div>
     }
     else
     {
-        <div class="card border-0 shadow-sm p-4 mb-4">
-            @foreach (var item in CartItems)
-            {
-                <div class="row align-items-center py-4 @(item != CartItems.Last() ? "border-bottom" : "")">
-                    <!-- Item Detail -->
-                    <div class="col-12 col-md-6 d-flex align-items-center gap-4">
-                        <div class="bg-light d-flex align-items-center justify-content-center" style="width: 70px; height: 95px;">
-                            <span class="text-muted" style="font-size: 0.5rem;">[COVER]</span>
-                        </div>
-                        <div>
-                            <h5 class="fw-bold mb-1">@item.Title</h5>
-                            <p class="text-muted small mb-0">by @item.Author</p>
-                        </div>
-                    </div>
+        <div class="row g-5">
+            <div class="col-12 col-lg-7">
+                <div class="d-flex flex-column gap-1">
+                    @foreach (var item in ShoppingCart.Items)
+                    {
+                        <div class="row align-items-center py-4 border-bottom position-relative">
 
-                    <!-- Quantity -->
-                    <div class="col-6 col-md-3 d-flex justify-content-center">
-                        <div class="d-flex align-items-center border rounded-pill bg-light px-2">
-                            <button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, -1)">-</button>
-                            <span class="px-3 fw-bold">@item.Quantity</span>
-                            <button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, 1)">+</button>
-                        </div>
-                    </div>
+                            <div class="col-12 col-md-7 d-flex align-items-center gap-4 mb-3 mb-md-0">
+                                <div class="bg-light d-flex align-items-center justify-content-center p-2 rounded-1 state-card-shadow"
+                                     style="width: 70px; height: 95px; background-color: #f8f9fa; box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);">
+                                    @if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
+                                    {
+                                        <img src="@item.Product!.ImageUrl" class="img-fluid" style="max-height: 80px; object-fit: contain; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.15));" alt="@item.Product.Name" />
+                                    }
+                                    else
+                                    {
+                                        <span class="text-muted fw-bold font-monospace" style="font-size: 0.6rem; letter-spacing: 1px;">[COVER]</span>
+                                    }
+                                </div>
+                                <div style="max-width: 75%;">
+                                    <h5 class="fw-semibold mb-1 text-dark" style="font-size: 0.95rem; line-height: 1.4; letter-spacing: -0.1px;">@item.Product!.Name</h5>
+                                    <p class="text-muted small mb-0" style="font-size: 0.8rem; letter-spacing: 0.1px;">by @($"{item.Author!.Name} {item.Author!.LastName}")</p>
+                                </div>
+                            </div>
 
-                    <!-- Price & Remove -->
-                    <div class="col-6 col-md-3 text-end d-flex align-items-center justify-content-end gap-3">
-                        <span class="fw-bold">R @(item.Price * item.Quantity)</span>
-                        <button class="btn btn-sm p-1 text-muted" @onclick="() => RemoveFromCart(item)">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                        </button>
-                    </div>
+                            <div class="col-6 col-md-3 d-flex justify-content-md-center align-items-center">
+                                <div class="d-flex align-items-center border rounded-pill bg-white px-1 py-1" style="border-color: #e9ecef !important;">
+                                    <button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => DecreaseQty(item, -1)">—</button>
+                                    <span class="px-2 fw-semibold text-dark" style="font-size: 0.85rem; min-width: 20px; text-align: center;">@item.Quantity</span>
+                                    <button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => IncreaseQty(item)">+</button>
+                                </div>
+                            </div>
+
+                            <div class="col-6 col-md-2 text-end d-flex align-items-center justify-content-end gap-3">
+                                <span class="fw-semibold text-dark" style="font-size: 0.95rem; letter-spacing: -0.2px;">R @(item.Amount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
+                                <button class="btn btn-sm p-1 text-muted opacity-50 hover-opacity-100 border-0 bg-transparent" style="transition: opacity 0.2s;" @onclick="() => RemoveFromCart(item)" title="Remove item">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                                </button>
+                            </div>
+
+                        </div>
+                    }
                 </div>
-            }
-        </div>
+            </div>
 
-        <!-- Cart Totals Section -->
-        <div class="row justify-content-end">
-            <div class="col-md-5">
-                <div class="bg-white p-4 rounded-3 border">
-                    <div class="d-flex justify-content-between mb-3">
+            <div class="col-12 col-lg-5">
+                <div class="bg-white p-4 rounded-3 border-0 sticky-top" style="top: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.04); border: 1px solid #f1f3f5 !important;">
+                    <h4 class="ff-serif mb-4" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.3rem;">Order Summary</h4>
+
+                    <div class="d-flex justify-content-between mb-3" style="font-size: 0.9rem;">
                         <span class="text-muted">Subtotal</span>
-                        <span class="fw-bold">R @Subtotal.ToString("F2")</span>
+                        <span class="fw-normal text-dark">R @(ShoppingCart.TotalAmount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                     </div>
-                    <div class="d-flex justify-content-between mb-4">
+
+                    <div class="d-flex justify-content-between mb-4" style="font-size: 0.9rem;">
                         <span class="text-muted">VAT (15%)</span>
-                        <span class="fw-bold">R @VatAmount.ToString("F2")</span>
+                        <span class="fw-normal text-dark">R @(ShoppingCart.TotalVat.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                     </div>
-                    <hr />
-                    <div class="d-flex justify-content-between align-items-center mb-4">
-                        <span class="fw-bold h5 mb-0">Total</span>
-                        <span class="fw-bold h4 mb-0">R @Total.ToString("F2")</span>
+
+                    <hr style="border-color: #f1f3f5;" />
+
+                    <div class="d-flex justify-content-between align-items-baseline mb-4 mt-2">
+                        <span class="fw-semibold h6 mb-0 text-dark" style="font-size: 1rem;">Total</span>
+                        <span class="fw-bold text-dark" style="font-size: 1.4rem; letter-spacing: -0.5px;">R @((ShoppingCart.TotalAmount + ShoppingCart.TotalVat).ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                     </div>
-                    <a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3">Proceed to Checkout</a>
+
+                    <a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3 text-uppercase fw-semibold tracking-widest border-0"
+                       style="font-size: 0.75rem; letter-spacing: 1.5px; background-color: #1c1f22; transition: background-color 0.2s;">
+                        Proceed to Checkout
+                    </a>
                 </div>
             </div>
         </div>
     }
-</div>
-
-@code {
-    public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }
-
-    private List<CartItem> CartItems = new()
-    {
-        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
-        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
-        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
-    };
-
-    // Computed Properties for Calculations
-    private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
-    private decimal VatAmount => Subtotal * 0.15m;
-    private decimal Total => Subtotal + VatAmount;
-
-    private void ChangeQuantity(CartItem item, int delta)
-    {
-        item.Quantity += delta;
-        if (item.Quantity <= 0) CartItems.Remove(item);
-    }
-
-    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
-}
+</div>

MidrandBookshop/Components/Pages/Cart.razor.cs

@@ -0,0 +1,36 @@
+using MidrandBookshop.Services.ShoppingCart;
+using MidrandBookshop.Services.ShoppingCart.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class Cart(CartService cartService)
+{
+    protected Services.ShoppingCart.Models.Cart ShoppingCart => cartService?.ShoppingCart!;
+
+    protected async void IncreaseQty(CartItem item)
+    {
+        if (item is not null)
+        {
+            cartService.UpdateQuantity(item!.Price!.Id, 1);
+
+            await cartService.SaveCartToStorageAsync();
+        }
+    }
+    protected async void DecreaseQty(CartItem item, int delta)
+    {
+        var peekQuantity = item.Quantity + delta;
+
+        if (peekQuantity < 1) return;
+
+        cartService.UpdateQuantity(item!.Price!.Id, delta);
+
+        await cartService.SaveCartToStorageAsync();
+    }
+
+    private async void RemoveFromCart(CartItem item)
+    {
+        cartService.RemoveOneItem(item.Price!.Id);
+
+        await cartService.SaveCartToStorageAsync();
+    }
+}

MidrandBookshop/Components/Pages/Cart.razor.css

@@ -0,0 +1,2 @@
+body {
+}

MidrandBookshop/Components/Pages/ProductView.razor.cs

@@ -3,6 +3,7 @@ using LiteCharms.Features.MidrandBooks.Authors;
 using LiteCharms.Features.MidrandBooks.Authors.Models;
 using LiteCharms.Features.MidrandBooks.Products;
 using LiteCharms.Features.MidrandBooks.Products.Models;
+using Microsoft.AspNetCore.Cors.Infrastructure;
 using MidrandBookshop.Services.ShoppingCart;
 
 namespace MidrandBookshop.Components.Pages;
@@ -13,8 +14,10 @@ public partial class ProductView : ComponentBase
 
     [Inject] private ProductService ProductService { get; set; } = default!;
     [Inject] private AuthorService AuthorService { get; set; } = default!;
-    [Inject] private CartService CartService { get; set; } = default!;
     [Inject] private NavigationManager Navigation { get; set; } = default!;
+    [Inject] private CartService CartService { get; set; } = default!;
+
+    protected Services.ShoppingCart.Models.Cart ShoppingCart => CartService?.ShoppingCart!;
 
     protected bool IsLoading { get; private set; } = true;
     protected Product? CurrentProduct { get; private set; }
@@ -85,20 +88,26 @@ public partial class ProductView : ComponentBase
         }
     }
 
-    protected void IncreaseQty()
+    protected async void IncreaseQty()
     {
-        Quantity++;
-
         if (CurrentPrice is not null)
-            CartService.UpdateQuantity(CurrentPrice!.Id, Quantity);
-    }
-    protected void DecreaseQty() 
-    {
-        if (Quantity > 1)
         {
-            Quantity--;
+            CartService.UpdateQuantity(CurrentPrice!.Id, 1);
+                        
+            Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
 
-            CartService.UpdateQuantity(CurrentPrice!.Id, Quantity);
+            await CartService.SaveCartToStorageAsync();
+        }
+    }
+    protected async void DecreaseQty() 
+    {
+        if (Quantity >= 1)
+        {
+            CartService.UpdateQuantity(CurrentPrice!.Id, -1);
+
+            Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
+
+            await CartService.SaveCartToStorageAsync();
         }
     }
 
@@ -108,8 +117,20 @@ public partial class ProductView : ComponentBase
 
         if (CurrentPrice is not null)
         {
-            CartService.AddItem(CurrentPrice);
-            Quantity++;
+            if(ShoppingCart.Items.Any(p => p.Price!.Id == CurrentPrice.Id))
+            {
+                CartService.UpdateQuantity(CurrentPrice.Id, 1);
+
+                await CartService.SaveCartToStorageAsync();
+
+                return;
+            }
+
+            CartService.AddItem(CurrentPrice, CurrentProduct, CurrentAuthor!);
+
+            Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
+
+            await CartService.SaveCartToStorageAsync();
         }
     }
 

MidrandBookshop/Services/ShoppingCart/CartService.cs

@@ -1,5 +1,6 @@
 using LiteCharms.Features.Browser;
 using LiteCharms.Features.Hasher;
+using LiteCharms.Features.MidrandBooks.Authors.Models;
 using LiteCharms.Features.MidrandBooks.Products.Models;
 using MidrandBookshop.Services.ShoppingCart.Models;
 
@@ -13,6 +14,9 @@ public sealed class CartService(LocalStorageService localStorage)
 
     public event Action? OnCartChanged;
 
+    public static Func<Cart, long, int> GetCartItemQuantity = (shoppingCart, productPriceId) =>
+        shoppingCart.Items.FirstOrDefault(p => p.Price!.Id == productPriceId)?.Quantity ?? 1;
+
     public Cart GetCart() => ShoppingCart;
 
     public void NotifyStateChanged() => OnCartChanged?.Invoke();
@@ -30,7 +34,7 @@ public sealed class CartService(LocalStorageService localStorage)
 
     public async Task SaveCartToStorageAsync() => await localStorage.SaveAsync(CartStorageKey, ShoppingCart);
 
-    public void AddItem(ProductPrice productPrice)
+    public void AddItem(ProductPrice productPrice, Product product, Author author)
     {
         var itemExists = false;
 
@@ -50,6 +54,8 @@ public sealed class CartService(LocalStorageService localStorage)
         if (!itemExists)
             ShoppingCart.Items.Add(new CartItem
             {
+                Product = product,
+                Author = author,
                 Price = productPrice,
                 Amount = productPrice.Amount,
                 Quantity = 1,
@@ -59,16 +65,8 @@ public sealed class CartService(LocalStorageService localStorage)
         NotifyStateChanged();
     }
 
-    public void UpdateQuantity(long productPriceId, int newQuantity)
+    public void UpdateQuantity(long productPriceId, int delta)
     {
-        if (newQuantity <= 0)
-        {
-            RemoveAllSameItem(productPriceId);
-            NotifyStateChanged();
-
-            return;
-        }
-
         for (var i = 0; i < ShoppingCart.Items.Count; i++)
         {
             if (ShoppingCart.Items[i].Price!.Id == productPriceId)
@@ -76,8 +74,8 @@ public sealed class CartService(LocalStorageService localStorage)
                 var oldQuantity = ShoppingCart.Items[i].Quantity;
                 var pricePerUnit = ShoppingCart.Items[i].Price!.Amount;
 
-                ShoppingCart.Items[i].Quantity = newQuantity;
-                ShoppingCart.Items[i].Amount = pricePerUnit * newQuantity;
+                ShoppingCart.Items[i].Quantity += delta;
+                ShoppingCart.Items[i].Amount = pricePerUnit * ShoppingCart.Items[i].Quantity;
                 break;
             }
         }
@@ -94,7 +92,9 @@ public sealed class CartService(LocalStorageService localStorage)
             {
                 if (ShoppingCart.Items[i].Quantity <= 1)
                 {
-                    ShoppingCart.Items.RemoveAt(i);
+                    ShoppingCart.Items.Remove(ShoppingCart.Items[i]);
+
+                    break;
                 }
                 else
                 {
@@ -126,7 +126,7 @@ public sealed class CartService(LocalStorageService localStorage)
     {
         if(ShoppingCart.CustomerId is not null || ShoppingCart.OrderId is not null)
         {
-            ShoppingCart.TotalPrice = 0;
+            ShoppingCart.TotalAmount = 0;
             ShoppingCart.TotalVat = 0;
             ShoppingCart.Items.Clear();
 
@@ -146,8 +146,8 @@ public sealed class CartService(LocalStorageService localStorage)
 
         if (!ShoppingCart.IsVatInclusive) ShoppingCart.TotalVat = gross * ShoppingCart.VatRate;
 
-        ShoppingCart.TotalPrice = gross + ShoppingCart.TotalVat;
+        ShoppingCart.TotalAmount = gross + ShoppingCart.TotalVat;
 
-        return ShoppingCart.TotalPrice;
+        return ShoppingCart.TotalAmount;
     }
 }

MidrandBookshop/Services/ShoppingCart/Models/Cart.cs

@@ -6,7 +6,7 @@ public sealed class Cart
 
     public long? OrderId { get; set; }
 
-    public decimal TotalPrice { get; set; }
+    public decimal TotalAmount { get; set; }
 
     public decimal TotalVat { get; set; }
 

MidrandBookshop/Services/ShoppingCart/Models/CartItem.cs

@@ -1,12 +1,17 @@
-using LiteCharms.Features.MidrandBooks.Products.Models;
+using LiteCharms.Features.MidrandBooks.Authors.Models;
+using LiteCharms.Features.MidrandBooks.Products.Models;
 
 namespace MidrandBookshop.Services.ShoppingCart.Models;
 
 public sealed class CartItem
 {
+    public Author? Author { get; set; }
+
+    public Product? Product { get; set; }
+
     public ProductPrice? Price { get; set; }
 
-    public long Quantity { get; set; }
+    public int Quantity { get; set; }
 
     public decimal Amount { get; set; }
 }