Merge pull request 'Wired up CartDrawel and ProductView to cart service and local storage' (#53) from cart into main

Reviewed-on: #53

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>
+                                <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</p>
+                                <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,28 +163,73 @@
                         <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">@CartItems.Sum(i => i.Quantity)</span>
+                            <span class="cart-badge">@ShoppingCart.Items.Count</span>
                         }
                     </button>
 
-                    <a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-none d-md-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
+                    <div class="dropdown header-account-dropdown">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <button class="btn btn-sm d-flex align-items-center gap-1.5 p-1 text-dark border-0 dropdown-toggle no-caret"
-                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                                type="button"
-                            <circle cx="12" cy="7" r="4" />
+                                id="accountDropdownMenu"
-                        </svg>
+                                data-bs-toggle="dropdown"
-                        Account
+                                aria-expanded="false">
-                    </a>
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
+                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                                <circle cx="12" cy="7" r="4"></circle>
+                            </svg>
+                            <span class="d-none d-md-inline font-monospace text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.05em;">Account</span>
+                        </button>
 
-                    <a href="/profile" class="btn btn-sm btn-dark rounded-circle d-inline-flex d-md-none align-items-center justify-content-center border-0 p-0 shadow-sm"
+                        <ul class="dropdown-menu dropdown-menu-end brand-dropdown-pane p-0 m-0" aria-labelledby="accountDropdownMenu">
-                       style="width: 32px; height: 32px;"
+                            <AuthorizeView>
-                       aria-label="Log In">
+                                <Authorized>
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                                    <li class="dropdown-header-identity p-3 border-bottom bg-light">
-                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                                        <span class="d-block text-muted text-uppercase font-monospace xx-small" style="font-size: 0.6rem; letter-spacing: 0.1em;">Active Identity</span>
-                            <circle cx="12" cy="7" r="4" />
+                                        <span class="fw-bold text-dark text-truncate d-block" style="font-size: 0.85rem;">@(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")</span>
-                        </svg>
+                                    </li>
-                    </a>
+                                    <li>
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="/account">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                                            My Orders
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account" target="_blank">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+                                            Security Center
+                                        </a>
+                                    </li>
+                                    <li><hr class="dropdown-divider m-0" /></li>
+                                    <li>
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-danger d-flex align-items-center gap-2" href="/logout">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                                                <polyline points="16 17 21 12 16 7"></polyline>
+                                                <line x1="21" y1="12" x2="9" y2="12"></line>
+                                            </svg>
+                                            Logout
+                                        </a>
+                                    </li>
+                                </Authorized>
+                                <NotAuthorized>
+                                    <li>
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="/login">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
+                                            Sign In
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-muted d-flex align-items-center gap-2" href="/account">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+                                            Order Status
+                                        </a>
+                                    </li>
+                                </NotAuthorized>
+                            </AuthorizeView>
+                        </ul>
+                    </div>
                 </div>
             </div>
         </nav>

MidrandBookshop/Components/Layout/MainLayout.razor.cs

@@ -1,30 +1,43 @@
-using Microsoft.AspNetCore.Components.Routing;
+using MidrandBookshop.Services.ShoppingCart;
-using Microsoft.AspNetCore.Components.Web;
+using MidrandBookshop.Services.ShoppingCart.Models;
-using Microsoft.AspNetCore.WebUtilities;
 
 namespace MidrandBookshop.Components.Layout;
 
-public partial class MainLayout : IDisposable
+public partial class MainLayout(CartService cartService) : IDisposable
 {
+    [Inject]
+    private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
+
+    private Cart ShoppingCart => cartService.ShoppingCart;
+
+    private AuthenticationState? AuthState { get; set; }
+    private System.Security.Claims.ClaimsPrincipal? User { get; set; }
+    private bool IsAuthenticated => User?.Identity?.IsAuthenticated ?? false;
+
     private string SearchInputBuffer { get; set; } = string.Empty;
     private string GlobalSearchQuery { get; set; } = string.Empty;
     private bool IsSearchActive { get; set; } = false;
     private bool IsCartOpen { get; set; } = false;
 
-    private List<CartItem> CartItems = new()
+    protected override async Task OnInitializedAsync()
     {
-        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
+        AuthState = await AuthStateProvider.GetAuthenticationStateAsync();
-        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
+        User = AuthState!.User;
-        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
-    };
 
-    protected override void OnInitialized()
-    {
         Navigation.LocationChanged += OnLocationChanged;
+        cartService.OnCartChanged += CartService_OnCartChanged;
 
         SyncSearchQueryFromUrl();
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender) 
+            await cartService.LoadCartFromStorageAsync();
+    }
+
+    private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
+
     private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
     {
         SyncSearchQueryFromUrl();
@@ -91,17 +104,25 @@ public partial class MainLayout : IDisposable
 
     private void ToggleCart() => IsCartOpen = !IsCartOpen;
 
-    private void ChangeQuantity(CartItem item, int delta)
+    private async void ChangeQuantity(CartItem item, int delta)
     {
-        item.Quantity += delta;
+        var peekQuantity = item.Quantity + delta;
-        if (item.Quantity <= 0)
+
-        {
+        if (peekQuantity < 1) return;
-            CartItems.Remove(item);
+
-        }
+        cartService.UpdateQuantity(item.Price!.Id, delta);
+
+        await cartService.SaveCartToStorageAsync();
     }
 
-    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
+    private async void RemoveFromCart(CartItem item)
-    private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
+    {
+        cartService.RemoveOneItem(item.Price!.Id);
+
+        await cartService.SaveCartToStorageAsync();
+    }
+
+    private decimal GetCartTotal() => ShoppingCart?.TotalPrice ?? 0.00m;
 
     private void RedirectToCart()
     {
@@ -118,14 +139,8 @@ public partial class MainLayout : IDisposable
     public void Dispose()
     {
         Navigation.LocationChanged -= OnLocationChanged;
-    }
+        cartService.OnCartChanged -= CartService_OnCartChanged;
 
-    public class CartItem
+        GC.SuppressFinalize(this);
-    {
-        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/Layout/MainLayout.razor.css

@@ -191,3 +191,35 @@
 .scroll-container {
     scroll-behavior: smooth;
 }
+
+.no-caret::after {
+    display: none !important;
+}
+
+.brand-dropdown-pane {
+    border-radius: 0px !important;
+    border: 1px solid rgba(0, 0, 0, 0.15) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+    min-width: 190px;
+    z-index: 1050;
+}
+
+    .brand-dropdown-pane .dropdown-item {
+        font-size: 0.72rem;
+        letter-spacing: 0.02em;
+        transition: background-color 0.15s ease, color 0.15s ease;
+    }
+
+        .brand-dropdown-pane .dropdown-item:hover {
+            background-color: #1A1A1A !important;
+            color: #FFFFFF !important;
+        }
+
+        .brand-dropdown-pane .dropdown-item.text-danger:hover {
+            background-color: #DC3545 !important;
+            color: #FFFFFF !important;
+        }
+
+.dropdown-header-identity {
+    user-select: none;
+}

MidrandBookshop/Components/Pages/Account.razor

@@ -0,0 +1,228 @@
+@page "/account"
+@using Microsoft.AspNetCore.Components.Authorization
+@inject NavigationManager Navigation
+@rendermode InteractiveServer
+@attribute [Authorize]
+
+<div class="container py-5">
+    <h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
+    <div class="row g-5">
+        <div class="col-md-3">
+            <div class="nav flex-column nav-pills" role="tablist">
+                <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#orders" role="tab">Order History</button>
+                <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
+                <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
+                <hr />
+                <button class="nav-link text-danger text-start" @onclick="TriggerLogout">Logout</button>
+            </div>
+        </div>
+
+        <div class="col-md-9">
+            <AuthorizeView>
+                <Authorized>
+                    <div class="profile-hero-banner mb-5 d-flex align-items-center justify-content-between p-4 border border-light bg-white">
+                        <div class="hero-text-content">
+                            <div class="meta-tag font-monospace text-uppercase text-muted mb-1">Customer Profile // Active Session</div>
+                            <h4 class="fw-bold mb-1 brand-greeting">Welcome back, @(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")!</h4>
+                            <p class="text-muted small mb-0 font-monospace">@context.User.FindFirst("email")?.Value</p>
+                        </div>
+
+                        <div class="hero-crest-svg d-none d-sm-block">
+                            <svg viewBox="0 0 100 100" width="70" height="70" stroke="#1A1A1A" stroke-width="1.5" fill="none">
+                                <circle cx="50" cy="50" r="40" stroke-dasharray="2 2" stroke="#DDD" />
+                                <circle cx="50" cy="50" r="30" />
+                                <polygon points="50,20 76,65 24,65" stroke="#1A1A1A" />
+                                <line x1="50" y1="20" x2="50" y2="80" stroke-width="1" stroke="#1A1A1A" />
+                            </svg>
+                        </div>
+                    </div>
+                </Authorized>
+            </AuthorizeView>
+
+            <div class="tab-content">
+                <div class="tab-pane fade show active" id="orders" role="tabpanel">
+                    <div class="d-flex justify-content-between align-items-center mb-4">
+                        <h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Order History</h5>
+                    </div>
+
+                    <div class="d-flex flex-column gap-3">
+                        @if (orderHistory != null)
+                        {
+                            @foreach (var order in orderHistory)
+                            {
+                                <div class="card p-4 shadow-sm order-history-card">
+                                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
+                                        <div class="flex-grow-1 w-100">
+                                            <div class="order-meta-track mb-2">
+                                                <div class="meta-item-id">
+                                                    <span class="fw-bold text-dark">@order.OrderId</span>
+                                                </div>
+                                                <div class="meta-item-date">
+                                                    <span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
+                                                </div>
+                                                <div class="meta-item-status">
+                                                    <span class="badge status-badge-base status-@order.Status?.ToLower() text-uppercase">
+                                                        @order.Status
+                                                    </span>
+                                                </div>
+                                            </div>
+
+                                            <h6 class="mb-2">
+                                                <a href="/products/@order.ProductId" class="product-link fw-medium text-dark text-decoration-none" title="@order.ProductTitle">
+                                                    @order.ProductTitle
+                                                </a>
+                                            </h6>
+
+                                            <div class="d-flex align-items-center text-secondary small">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
+                                                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
+                                                </svg>
+                                                <span class="text-muted text-uppercase tracking-wider font-monospace" style="font-size: 0.7rem;">Shipping to:</span>&nbsp;<span class="text-dark fw-medium">@order.ShippingAddressName</span>
+                                            </div>
+                                        </div>
+
+                                        <div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
+                                            <div class="text-sm-end mb-sm-2">
+                                                <span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider" style="font-size: 0.6rem;">Total Paid</span>
+                                                <span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
+                                            </div>
+
+                                            <button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="svg-icon">
+                                                    <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                        }
+                        else
+                        {
+                            <div class="card p-4 text-center text-muted">
+                                Loading order history...
+                            </div>
+                        }
+                    </div>
+                </div>
+
+                <div class="tab-pane fade" id="shipping" role="tabpanel">
+                    <div class="d-flex justify-content-between align-items-center mb-4">
+                        <h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Saved Addresses</h5>
+                        @if (!showAddForm && editingAddress == null)
+                        {
+                            <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
+                        }
+                    </div>
+
+                    @if (showAddForm)
+                    {
+                        <div class="card p-4 border shadow-sm mb-4 bg-light">
+                            <div class="d-flex justify-content-between align-items-center mb-3">
+                                <h6 class="fw-bold m-0">New Address</h6>
+                                <button type="button" class="btn-close" @onclick="() => showAddForm = false"></button>
+                            </div>
+                            <input type="text" class="form-control mb-2" placeholder="Address Name (e.g. Home, Office)" @bind="newAddressName" />
+                            <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="newStreetAddress" />
+                            <div class="d-flex gap-2 mb-3">
+                                <input type="text" class="form-control" placeholder="City" @bind="newCity" />
+                                <input type="text" class="form-control" placeholder="Postal Code" @bind="newPostalCode" />
+                            </div>
+                            <div class="mb-3 d-flex gap-3">
+                                <label class="pointer-label"><input type="checkbox" @bind="isBilling" /> Billing</label>
+                                <label class="pointer-label"><input type="checkbox" @bind="isShipping" /> Shipping</label>
+                            </div>
+                            <div class="d-flex">
+                                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="SaveAddress">Save Address</button>
+                            </div>
+                        </div>
+                    }
+
+                    @if (editingAddress != null)
+                    {
+                        <div class="card p-4 border shadow-sm mb-4 bg-light">
+                            <div class="d-flex justify-content-between align-items-center mb-3">
+                                <h6 class="fw-bold m-0">Edit Address</h6>
+                                <button type="button" class="btn-close" @onclick="CancelEditing"></button>
+                            </div>
+                            <input type="text" class="form-control mb-2" placeholder="Address Name" @bind="editingAddress.Name" />
+                            <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="editingAddress.Street" />
+                            <div class="d-flex gap-2 mb-3">
+                                <input type="text" class="form-control" placeholder="City" @bind="editingAddress.City" />
+                                <input type="text" class="form-control" placeholder="Postal Code" @bind="editingAddress.PostalCode" />
+                            </div>
+                            <div class="mb-3 d-flex gap-3">
+                                <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsBilling" /> Billing</label>
+                                <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsShipping" /> Shipping</label>
+                            </div>
+                            <div class="d-flex">
+                                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="UpdateAddress">Update Address</button>
+                            </div>
+                        </div>
+                    }
+
+                    @foreach (var addr in savedAddresses)
+                    {
+                        <div class="card p-4 shadow-sm mb-3 address-card">
+                            <div class="d-flex justify-content-between align-items-start">
+                                <div>
+                                    <h6 class="fw-bold mb-1">@addr.Name</h6>
+                                    <p class="mb-2 text-muted">@addr.Street, @addr.City, @addr.PostalCode</p>
+                                    <div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
+                                        @if (addr.IsBilling)
+                                        {
+                                            <span class="badge bg-light text-dark border">[Billing]</span>
+                                        }
+                                        @if (addr.IsShipping)
+                                        {
+                                            <span class="badge bg-light text-dark border">[Shipping]</span>
+                                        }
+                                    </div>
+                                </div>
+
+                                <div class="d-flex align-items-center gap-2 actions-container">
+                                    <label class="small text-muted d-flex align-items-center gap-1 m-0 pointer-label me-2">
+                                        <input type="checkbox" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" /> Primary
+                                    </label>
+
+                                    <button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+                                            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+                                        </svg>
+                                    </button>
+
+                                    <button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+                                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </div>
+
+                <div class="tab-pane fade" id="profile" role="tabpanel">
+                    <div class="d-flex justify-content-between align-items-center mb-4">
+                        <h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Profile Settings</h5>
+                    </div>
+                    <div class="card p-5 text-center bg-white border">
+                        <div class="mb-4">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#1A1A1A" stroke-width="1.5">
+                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                            </svg>
+                        </div>
+                        <h5 class="fw-bold mb-2">Centralized Identity Management</h5>
+                        <p class="text-muted small mx-auto mb-4" style="max-width: 480px;">
+                            For your protection, password modifications, recovery settings, authentication methods, and core credentials are managed through our secure Identity Node.
+                        </p>
+                        <a href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account" class="btn btn-dark rounded-pill px-5 py-2.5 btn-sm font-monospace text-uppercase tracking-wider">
+                            Access Security Center
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

MidrandBookshop/Components/Pages/Account.razor.cs

@@ -0,0 +1,75 @@
+namespace MidrandBookshop.Components.Pages;
+
+public partial class Account
+{
+    private bool showAddForm = false;
+    private AddressItem? editingAddress = null;
+    private string newAddressName = "";
+    private string newStreetAddress = "";
+    private string newCity = "";
+    private string newPostalCode = "";
+    private bool isBilling, isShipping;
+
+    private List<OrderItem> orderHistory = new()
+    {
+        new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
+        new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
+    };
+
+    private List<AddressItem> savedAddresses = new()
+    {
+        new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
+        new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
+        new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
+    };
+
+    private void TriggerLogout() => Navigation.NavigateTo("/logout", forceLoad: true);
+    private void DownloadInvoice(string orderId) { /* Handle download sequence here */ }
+    private void OpenAddForm() { editingAddress = null; showAddForm = true; }
+
+    private void SaveAddress()
+    {
+        if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
+        {
+            var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
+            savedAddresses.Add(new AddressItem
+            {
+                Id = nextId,
+                Name = newAddressName,
+                Street = newStreetAddress,
+                City = newCity,
+                PostalCode = newPostalCode,
+                IsBilling = isBilling,
+                IsShipping = isShipping,
+                IsPrimary = !savedAddresses.Any()
+            });
+            ResetAddForm();
+        }
+    }
+
+    private void ResetAddForm() { newAddressName = ""; newStreetAddress = ""; newCity = ""; newPostalCode = ""; isBilling = isShipping = showAddForm = false; }
+    private void StartEditing(AddressItem addr) { showAddForm = false; editingAddress = new AddressItem { Id = addr.Id, Name = addr.Name, Street = addr.Street, City = addr.City, PostalCode = addr.PostalCode, IsBilling = addr.IsBilling, IsShipping = addr.IsShipping, IsPrimary = addr.IsPrimary }; }
+    private void CancelEditing() => editingAddress = null;
+
+    private void UpdateAddress()
+    {
+        if (editingAddress != null)
+        {
+            var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
+            if (target != null) { target.Name = editingAddress.Name; target.Street = editingAddress.Street; target.City = editingAddress.City; target.PostalCode = editingAddress.PostalCode; target.IsBilling = editingAddress.IsBilling; target.IsShipping = editingAddress.IsShipping; }
+            editingAddress = null;
+        }
+    }
+
+    private void DeleteAddress(AddressItem addr) { if (editingAddress?.Id == addr.Id) editingAddress = null; savedAddresses.Remove(addr); if (addr.IsPrimary && savedAddresses.Any()) savedAddresses.First().IsPrimary = true; }
+
+    private void SetPrimary(AddressItem target, ChangeEventArgs e)
+    {
+        var isChecked = (bool)(e.Value ?? false);
+        if (isChecked) { foreach (var addr in savedAddresses) addr.IsPrimary = (addr.Id == target.Id); }
+        else target.IsPrimary = false;
+    }
+
+    public class AddressItem { public int Id { get; set; } public string Name { get; set; } = ""; public string Street { get; set; } = ""; public string City { get; set; } = ""; public string PostalCode { get; set; } = ""; public bool IsBilling { get; set; } public bool IsShipping { get; set; } public bool IsPrimary { get; set; } }
+    public class OrderItem { public string OrderId { get; set; } = ""; public string ProductId { get; set; } = ""; public string ProductTitle { get; set; } = ""; public DateTime OrderDate { get; set; } public string ShippingAddressName { get; set; } = ""; public string Status { get; set; } = ""; public double Total { get; set; } }
+}

MidrandBookshop/Components/Pages/Account.razor.css

@@ -0,0 +1,147 @@
+::deep .container {
+    max-width: 1100px;
+}
+
+/* Navigation Layout Overrides - Black & White Architectural Style */
+.nav-pills .nav-link {
+    color: #6c757d;
+    border-radius: 0;
+    padding: 0.75rem 1rem;
+    font-weight: 500;
+    font-family: var(--bs-body-font-family);
+    transition: all 0.2s ease-in-out;
+    border: 1px solid transparent;
+    background: transparent !important;
+}
+
+    /* Active State - Solid Black Fill with stark white text */
+    .nav-pills .nav-link.active {
+        background-color: #1A1A1A !important;
+        color: #FFFFFF !important;
+        border-color: #1A1A1A;
+    }
+
+    /* Hover State for Unselected Buttons */
+    .nav-pills .nav-link:hover:not(.active) {
+        color: #1A1A1A;
+        background-color: #F8F8F8 !important;
+    }
+
+    /* Logout Button Link Alignment rules */
+    .nav-pills .nav-link.text-danger {
+        color: #DC3545 !important;
+    }
+
+        .nav-pills .nav-link.text-danger:hover {
+            background-color: #FFF5F5 !important;
+            color: #A94442 !important;
+        }
+
+hr {
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    margin: 1.5rem 0;
+}
+
+/* Profile Banner Design Definitions */
+.profile-hero-banner {
+    border-color: rgba(0, 0, 0, 0.05) !important;
+    background-color: #FAFAFA !important;
+}
+
+.brand-greeting {
+    font-family: 'Playfair Display', serif;
+    font-size: 1.8rem;
+    letter-spacing: -0.01em;
+    color: #111111;
+}
+
+.meta-tag {
+    font-size: 0.68rem;
+    letter-spacing: 0.15em;
+}
+
+.hero-crest-svg svg {
+    transition: transform 0.4s ease-in-out;
+}
+
+.profile-hero-banner:hover .hero-crest-svg svg {
+    transform: rotate(15deg);
+}
+
+/* Cards Layout Rules */
+.card {
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 0;
+}
+
+.address-card {
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+    .address-card:hover {
+        border-color: rgba(0, 0, 0, 0.16);
+    }
+
+/* Order Meta Tracks & Status Badges Setup */
+.order-meta-track {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+
+.status-badge-base {
+    font-family: var(--bs-font-monospace);
+    font-size: 0.68rem !important;
+    letter-spacing: 0.08em;
+    padding: 0.35rem 0.65rem !important;
+    border-radius: 0px !important;
+    font-weight: 600;
+}
+
+.status-delivered {
+    background-color: #E2F0D9 !important;
+    color: #385723 !important;
+}
+
+.status-shipped {
+    background-color: #FFF2CC !important;
+    color: #7F6000 !important;
+}
+
+.status-processing, .status-pending {
+    background-color: #F2F2F2 !important;
+    color: #595959 !important;
+    border: 1px dashed #D9D9D9;
+}
+
+/* Restored Action Button Interactive Properties */
+.action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: transparent;
+    border: none;
+    color: #1A1A1A;
+    transition: background-color 0.15s ease, transform 0.1s ease;
+}
+
+    .action-btn:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .action-btn:active {
+        transform: scale(0.92);
+    }
+
+.pointer-label {
+    cursor: pointer;
+    user-select: none;
+}
+
+.tab-pane #profile .card {
+    border: 1px dashed rgba(0, 0, 0, 0.15) !important;
+}

MidrandBookshop/Components/Pages/ProductView.razor.cs

@@ -3,6 +3,8 @@ 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,9 +15,13 @@ public partial class ProductView : ComponentBase
     [Inject] private ProductService ProductService { get; set; } = default!;
     [Inject] private AuthorService AuthorService { 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; }
+    protected ProductPrice? CurrentPrice { get; private set; }
     protected decimal LivePrice { get; private set; } = 0.00m;
     protected string AuthorName { get; private set; } = "Unknown Author";
     protected string PrimaryCategory { get; private set; } = "General";
@@ -26,6 +32,9 @@ public partial class ProductView : ComponentBase
 
     protected Author? CurrentAuthor { get; private set; }
 
+    private static Func<Services.ShoppingCart.Models.Cart, long, int> getCartItemQuantity = (shoppingCart, productPriceId) => 
+        shoppingCart.Items.FirstOrDefault(p => p.Price!.Id == productPriceId)?.Quantity ?? 1;
+
     protected override async Task OnParametersSetAsync()
     {
         try
@@ -44,6 +53,7 @@ public partial class ProductView : ComponentBase
 
                 var priceResult = await ProductService.GetProductPriceAsync(BookId);
                 LivePrice = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
+                CurrentPrice = priceResult.IsSuccess ? priceResult.Value : null;
 
                 var categoryResult = await ProductService.GetProductCategoriesAsync(BookId);
                 if (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
@@ -73,6 +83,7 @@ public partial class ProductView : ComponentBase
         catch (Exception)
         {
             CurrentProduct = null;
+            CurrentPrice = null;
         }
         finally
         {
@@ -80,14 +91,52 @@ public partial class ProductView : ComponentBase
         }
     }
 
-    protected void IncreaseQty() => Quantity++;
+    protected async void IncreaseQty()
-    protected void DecreaseQty() { if (Quantity > 1) Quantity--; }
+    {
+        if (CurrentPrice is not null)
+        {
+            CartService.UpdateQuantity(CurrentPrice!.Id, 1);
+                        
+            Quantity = getCartItemQuantity(ShoppingCart, CurrentPrice.Id);
 
-    protected void HandleAddToCart()
+            await CartService.SaveCartToStorageAsync();
+        }
+    }
+    protected async void DecreaseQty() 
+    {
+        if (Quantity >= 1)
+        {
+            CartService.UpdateQuantity(CurrentPrice!.Id, -1);
+
+            Quantity = getCartItemQuantity(ShoppingCart, CurrentPrice.Id);
+
+            await CartService.SaveCartToStorageAsync();
+        }
+    }
+
+    protected async void HandleAddToCart()
     {
         if (CurrentProduct == null) return;
+
+        if (CurrentPrice is not null)
+        {
+            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 = getCartItemQuantity(ShoppingCart, CurrentPrice.Id);
+
+            await CartService.SaveCartToStorageAsync();
+        }
     }
-        
+
     protected void ViewAllAuthorBooks()
     {
         if (CurrentAuthor is not null)

MidrandBookshop/Components/Pages/Profile.razor

@@ -1,377 +0,0 @@
-@page "/profile"
-@using Microsoft.AspNetCore.Components.Authorization
-@inject NavigationManager Navigation
-@rendermode InteractiveServer
-
-<AuthorizeView>
-    <Authorized>
-        <div class="container py-5">
-            <h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
-            <div class="row g-5">
-                <div class="col-md-3">
-                    <div class="nav flex-column nav-pills" role="tablist">
-                        <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#orders" role="tab">Order History</button>
-                        <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
-                        <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
-                        <hr />
-                        <button class="nav-link text-danger text-start" @onclick="TriggerLogout">Logout</button>
-                    </div>
-                </div>
-
-                <div class="col-md-9">
-                    <div class="tab-content">
-
-                        <div class="tab-pane fade show active" id="orders" role="tabpanel">
-                            <div class="d-flex justify-content-between align-items-center mb-4">
-                                <h5 class="fw-bold m-0">Order History</h5>
-                            </div>
-
-                            <div class="d-flex flex-column gap-3">
-                                @if (orderHistory != null)
-                                {
-                                    @foreach (var order in orderHistory)
-                                    {
-                                        <div class="card p-4 shadow-sm order-history-card">
-                                            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
-
-                                                <div class="flex-grow-1 w-100">
-                                                    <div class="order-meta-track mb-2">
-                                                        <div class="meta-item-id">
-                                                            <span class="fw-bold text-dark">@order.OrderId</span>
-                                                        </div>
-                                                        <div class="meta-item-date">
-                                                            <span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
-                                                        </div>
-                                                        <div class="meta-item-status">
-                                                            <span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase">
-                                                                @order.Status
-                                                            </span>
-                                                        </div>
-                                                    </div>
-
-                                                    <h6 class="mb-2">
-                                                        <a href="/products/@order.ProductId" class="product-link fw-medium" title="@order.ProductTitle">
-                                                            @order.ProductTitle
-                                                        </a>
-                                                    </h6>
-
-                                                    <div class="d-flex align-items-center text-secondary small">
-                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
-                                                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
-                                                        </svg>
-                                                        <span class="text-muted">Shipped to:</span>&nbsp;@order.ShippingAddressName
-                                                    </div>
-                                                </div>
-
-                                                <div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
-                                                    <div class="text-sm-end mb-sm-2">
-                                                        <span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider">Total Paid</span>
-                                                        <span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
-                                                    </div>
-
-                                                    <button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
-                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
-                                                            <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
-                                                        </svg>
-                                                    </button>
-                                                </div>
-
-                                            </div>
-                                        </div>
-                                    }
-                                }
-                                else
-                                {
-                                    <div class="card p-4 text-center text-muted">
-                                        Loading order history...
-                                    </div>
-                                }
-                            </div>
-                        </div>
-
-                        <div class="tab-pane fade" id="shipping" role="tabpanel">
-                            <div class="d-flex justify-content-between align-items-center mb-4">
-                                <h5 class="fw-bold m-0">Saved Addresses</h5>
-                                @if (!showAddForm && editingAddress == null)
-                                {
-                                    <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
-                                }
-                            </div>
-
-                            @if (showAddForm)
-                            {
-                                <div class="card p-4 border shadow-sm mb-4 bg-light">
-                                    <div class="d-flex justify-content-between align-items-center mb-3">
-                                        <h6 class="fw-bold m-0">New Address</h6>
-                                        <button type="button" class="btn-close" @onclick="() => showAddForm = false"></button>
-                                    </div>
-                                    <input type="text" class="form-control mb-2" placeholder="Address Name (e.g. Home, Office)" @bind="newAddressName" />
-                                    <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="newStreetAddress" />
-                                    <div class="d-flex gap-2 mb-3">
-                                        <input type="text" class="form-control" placeholder="City" @bind="newCity" />
-                                        <input type="text" class="form-control" placeholder="Postal Code" @bind="newPostalCode" />
-                                    </div>
-                                    <div class="mb-3 d-flex gap-3">
-                                        <label class="pointer-label"><input type="checkbox" @bind="isBilling" /> Billing</label>
-                                        <label class="pointer-label"><input type="checkbox" @bind="isShipping" /> Shipping</label>
-                                    </div>
-                                    <div class="d-flex">
-                                        <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="SaveAddress">Save Address</button>
-                                    </div>
-                                </div>
-                            }
-
-                            @if (editingAddress != null)
-                            {
-                                <div class="card p-4 border shadow-sm mb-4 bg-light">
-                                    <div class="d-flex justify-content-between align-items-center mb-3">
-                                        <h6 class="fw-bold m-0">Edit Address</h6>
-                                        <button type="button" class="btn-close" @onclick="CancelEditing"></button>
-                                    </div>
-                                    <input type="text" class="form-control mb-2" placeholder="Address Name" @bind="editingAddress.Name" />
-                                    <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="editingAddress.Street" />
-                                    <div class="d-flex gap-2 mb-3">
-                                        <input type="text" class="form-control" placeholder="City" @bind="editingAddress.City" />
-                                        <input type="text" class="form-control" placeholder="Postal Code" @bind="editingAddress.PostalCode" />
-                                    </div>
-                                    <div class="mb-3 d-flex gap-3">
-                                        <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsBilling" /> Billing</label>
-                                        <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsShipping" /> Shipping</label>
-                                    </div>
-                                    <div class="d-flex">
-                                        <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="UpdateAddress">Update Address</button>
-                                    </div>
-                                </div>
-                            }
-
-                            @foreach (var addr in savedAddresses)
-                            {
-                                <div class="card p-4 shadow-sm mb-3 address-card">
-                                    <div class="d-flex justify-content-between align-items-start">
-                                        <div>
-                                            <h6 class="fw-bold mb-1">@addr.Name</h6>
-                                            <p class="mb-2 text-muted">@addr.Street, @addr.City, @addr.PostalCode</p>
-                                            <div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
-                                                @if (addr.IsBilling)
-                                                {
-                                                    <span class="badge badge-tag">[Billing]</span>
-                                                }
-                                                @if (addr.IsShipping)
-                                                {
-                                                    <span class="badge badge-tag">[Shipping]</span>
-                                                }
-                                            </div>
-                                        </div>
-
-                                        <div class="d-flex align-items-center gap-2 actions-container">
-                                            <label class="small text-muted d-flex align-items-center gap-1 m-0 pointer-label me-2">
-                                                <input type="checkbox" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" /> Primary
-                                            </label>
-
-                                            <button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
-                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
-                                                    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
-                                                </svg>
-                                            </button>
-
-                                            <button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
-                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
-                                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
-                                                </svg>
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            }
-                        </div>
-
-                        <div class="tab-pane fade" id="profile" role="tabpanel">
-                            <div class="d-flex justify-content-between align-items-center mb-4">
-                                <h5 class="fw-bold m-0">Profile Settings</h5>
-                            </div>
-                            <div class="card p-4 shadow-sm">
-                                <p class="text-muted mb-0">Manage your password and profile data here.</p>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-            </div>
-        </div>
-    </Authorized>
-    
-    <NotAuthorized>
-        <RedirectToLogin />
-    </NotAuthorized>
-</AuthorizeView>
-
-@code {
-    private bool showAddForm = false;
-    private AddressItem? editingAddress = null;
-    private string newAddressName = "";
-    private string newStreetAddress = "";
-    private string newCity = "";
-    private string newPostalCode = "";
-    private bool isBilling, isShipping;
-
-    private List<OrderItem> orderHistory = new()
-    {
-        new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
-        new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
-    };
-
-    private List<AddressItem> savedAddresses = new()
-    {
-        new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
-        new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
-        new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
-    };
-
-    private void TriggerLogout() => Navigation.NavigateTo("/logout", forceLoad: true);
-
-    private void DownloadInvoice(string orderId)
-    {
-        // Handle invoice downloading logic here
-    }
-
-    private void OpenAddForm()
-    {
-        editingAddress = null;
-        showAddForm = true;
-    }
-
-    private void SaveAddress()
-    {
-        if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
-        {
-            var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
-            var newItem = new AddressItem
-            {
-                Id = nextId,
-                Name = newAddressName,
-                Street = newStreetAddress,
-                City = newCity,
-                PostalCode = newPostalCode,
-                IsBilling = isBilling,
-                IsShipping = isShipping,
-                IsPrimary = !savedAddresses.Any()
-            };
-            savedAddresses.Add(newItem);
-            ResetAddForm();
-        }
-    }
-
-    private void ResetAddForm()
-    {
-        newAddressName = "";
-        newStreetAddress = "";
-        newCity = "";
-        newPostalCode = "";
-        isBilling = false;
-        isShipping = false;
-        showAddForm = false;
-    }
-
-    private void StartEditing(AddressItem addr)
-    {
-        showAddForm = false;
-        editingAddress = new AddressItem
-        {
-            Id = addr.Id,
-            Name = addr.Name,
-            Street = addr.Street,
-            City = addr.City,
-            PostalCode = addr.PostalCode,
-            IsBilling = addr.IsBilling,
-            IsShipping = addr.IsShipping,
-            IsPrimary = addr.IsPrimary
-        };
-    }
-
-    private void UpdateAddress()
-    {
-        if (editingAddress != null)
-        {
-            var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
-            if (target != null)
-            {
-                target.Name = editingAddress.Name;
-                target.Street = editingAddress.Street;
-                target.City = editingAddress.City;
-                target.PostalCode = editingAddress.PostalCode;
-                target.IsBilling = editingAddress.IsBilling;
-                target.IsShipping = editingAddress.IsShipping;
-            }
-            editingAddress = null;
-        }
-    }
-
-    private void CancelEditing()
-    {
-        editingAddress = null;
-    }
-
-    private void DeleteAddress(AddressItem addr)
-    {
-        if (editingAddress?.Id == addr.Id)
-        {
-            editingAddress = null;
-        }
-        savedAddresses.Remove(addr);
-        if (addr.IsPrimary && savedAddresses.Any())
-        {
-            savedAddresses.First().IsPrimary = true;
-        }
-    }
-
-    private void SetPrimary(AddressItem target, ChangeEventArgs e)
-    {
-        var isChecked = (bool)(e.Value ?? false);
-        if (isChecked)
-        {
-            foreach (var addr in savedAddresses)
-            {
-                addr.IsPrimary = (addr.Id == target.Id);
-            }
-        }
-        else
-        {
-            target.IsPrimary = false;
-        }
-    }
-
-    public class AddressItem
-    {
-        public int Id { get; set; }
-        public string Name { get; set; } = "";
-        public string Street { get; set; } = "";
-        public string City { get; set; } = "";
-        public string PostalCode { get; set; } = "";
-        public bool IsBilling { get; set; }
-        public bool IsShipping { get; set; }
-        public bool IsPrimary { get; set; }
-    }
-
-    public class OrderItem
-    {
-        public string OrderId { get; set; } = "";
-        public string ProductId { get; set; } = "";
-        public string ProductTitle { get; set; } = "";
-        public DateTime OrderDate { get; set; }
-        public string ShippingAddressName { get; set; } = "";
-        public string Status { get; set; } = "";
-        public double Total { get; set; }
-
-        public string DisplayTitle
-        {
-            get
-            {
-                if (string.IsNullOrWhiteSpace(ProductTitle)) return "";
-                const int maxLength = 21; // Shifted slightly down from 25 to protect bounds against lower resolutions
-                return ProductTitle.Length <= maxLength
-                    ? ProductTitle
-                    : $"{ProductTitle.Substring(0, maxLength)}...";
-            }
-        }
-    }
-}

MidrandBookshop/Components/Pages/Profile.razor.css

@@ -1,204 +0,0 @@
-::deep .container {
-    max-width: 1100px;
-}
-
-/* Navigation Layout overrides */
-.nav-pills .nav-link {
-    color: #6c757d;
-    border-radius: 0;
-    padding: 0.75rem 0;
-    font-weight: 500;
-    transition: all 0.2s ease;
-}
-
-    .nav-pills .nav-link.active {
-        background-color: transparent !important;
-        color: #1A1A1A;
-        border-bottom: 2px solid #1A1A1A;
-    }
-
-    .nav-pills .nav-link:hover:not(.active) {
-        color: #1A1A1A;
-    }
-
-/* Cards layout rules */
-.card {
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    border-radius: 0;
-}
-
-.address-card {
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-    .address-card:hover {
-        border-color: rgba(0, 0, 0, 0.16);
-    }
-
-/* Container Wrapper to Suppress the Scrollbar completely */
-.table-container-fixed {
-    width: 100%;
-    overflow-x: hidden; /* Hard disables horizontal scroll bar activation */
-}
-
-/* Global Table Typography - Reduced uniformly to keep items on a single line */
-.profile-table {
-    font-size: 0.78rem; /* Scaled down further to eliminate overflow bounds */
-    width: 100%;
-    table-layout: fixed; /* Fixes proportions to fit 100% parent container space */
-}
-
-    .profile-table tbody td {
-        padding-top: 0.85rem;
-        padding-bottom: 0.85rem;
-    }
-
-    .profile-table thead th {
-        background-color: #F9F9F9;
-        font-size: 0.7rem;
-        letter-spacing: 0.04rem;
-    }
-
-/* Compact Column Proportions */
-.col-order-id {
-    width: 115px;
-}
-
-.col-date {
-    width: 100px;
-}
-
-.col-total {
-    width: 85px;
-}
-
-.col-status {
-    width: 105px;
-}
-
-.col-invoice {
-    width: 65px;
-}
-
-.col-title {
-    width: auto; /* Takes shared residual space smoothly */
-}
-
-.col-address {
-    width: auto; /* Takes shared residual space smoothly */
-}
-
-/* Product link handling */
-.product-link {
-    color: #1A1A1A;
-    text-decoration: none;
-    border-bottom: 1px dashed transparent;
-    transition: border-color 0.2s ease;
-    display: inline-block;
-}
-
-    .product-link:hover {
-        border-color: #1A1A1A;
-    }
-
-/* Base Badge Settings */
-.badge {
-    font-size: 0.62rem;
-    letter-spacing: 0.5px;
-    padding: 0.4em 0.8em;
-    border-radius: 4px;
-    font-weight: 600;
-}
-
-/* Status Badge Palette Colors */
-.status-shipped {
-    background-color: #e3f2fd !important;
-    color: #0d6efd !important;
-    border: 1px solid rgba(13, 110, 253, 0.15);
-}
-
-.status-delivered {
-    background-color: #e8f5e9 !important;
-    color: #198754 !important;
-    border: 1px solid rgba(25, 135, 84, 0.15);
-}
-
-.badge-tag {
-    background-color: #f0f0f0 !important;
-    color: #4a4a4a !important;
-    border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-/* Form Buttons */
-.btn-outline-dark {
-    border-radius: 50px;
-    border-width: 1px;
-}
-
-.btn-dark {
-    border-radius: 50px;
-}
-
-/* Action button configurations */
-.action-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    text-decoration: none;
-    transition: background-color 0.15s ease, transform 0.1s ease;
-}
-
-    .action-btn:hover {
-        background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    .action-btn.text-danger:hover {
-        background-color: rgba(220, 53, 69, 0.1);
-    }
-
-    .action-btn:active {
-        transform: scale(0.95);
-    }
-
-/* Compact SVG Icons sizing */
-.svg-icon {
-    width: 15px;
-    height: 15px;
-    fill: currentColor;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.pointer-label {
-    cursor: pointer;
-    user-select: none;
-}
-
-/* Shared Card Styling Unification Rules */
-.order-history-card {
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-    border-radius: 0; /* Matches your address card configuration */
-}
-
-    .order-history-card:hover {
-        border-color: rgba(0, 0, 0, 0.16);
-    }
-
-/* Micro Typography Alignment */
-.xx-small {
-    font-size: 0.65rem;
-}
-
-.tracking-wider {
-    letter-spacing: 0.05rem;
-}
-
-/* Responsive adjustments across layout break-points */
-@media (max-width: 575.98px) {
-    .border-sm-top-0 {
-        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
-    }
-}

MidrandBookshop/Components/RedirectToLogin.razor

@@ -1,10 +1,42 @@
 @inject NavigationManager Navigation
 
+<div class="artistic-redirect-container">
+    <div class="container h-100">
+        <div class="row align-items-center justify-content-center min-vh-70 py-5">
+            <div class="col-12 col-md-5 d-flex flex-column align-items-center text-center">
+
+                <div class="artistic-svg-wrapper mb-4">
+                    <svg viewBox="0 0 400 400" width="280" height="280" stroke="#1A1A1A" stroke-width="2" fill="none">
+                        <path d="M60 300 L340 300" stroke-dasharray="4 4" />
+
+                        <path d="M120 300 L120 160 Q120 100 200 100 Q280 100 280 160 L280 300" />
+
+                        <path d="M170 170 L230 170 L220 230 L200 250 L180 230 Z" fill="#F8F8F8" />
+                        <circle cx="200" cy="195" r="8" fill="#1A1A1A" />
+                        <line x1="200" y1="203" x2="200" y2="218" stroke-width="3" />
+
+                        <circle class="animated-pulse-ring" cx="200" cy="180" r="60" stroke="#DDD" stroke-width="1" />
+                        <circle class="animated-pulse-ring-delayed" cx="200" cy="180" r="45" stroke="#EEE" stroke-width="1" />
+                    </svg>
+                </div>
+
+                <div class="editorial-spinner mb-4"></div>
+
+                <div class="meta-tag font-monospace text-uppercase text-muted mb-2">Secure Connection // Identity Node</div>
+                <h2 class="fw-bold text-dark mb-3 editorial-subheadline">Verifying Session</h2>
+                <p class="text-muted body-manifesto-text-center">
+                    Redirecting you safely to the identity gateway to authorize your access permissions...
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
 @code {
     protected override void OnInitialized()
     {
         var returnUrl = Navigation.ToBaseRelativePath(Navigation.Uri);
 
-        Navigation.NavigateTo($"/login?redirectUri={Uri.EscapeDataString(returnUrl)}", forceLoad: true);
+        Navigation.NavigateTo($"/login?returnUrl={Uri.EscapeDataString(returnUrl)}", forceLoad: true);
     }
 }

MidrandBookshop/Components/RedirectToLogin.razor.css

@@ -0,0 +1,77 @@
+.artistic-redirect-container {
+    background-color: #ffffff;
+    min-height: 70vh;
+    display: flex;
+    align-items: center;
+    padding: 5rem 0;
+}
+
+.artistic-svg-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.editorial-subheadline {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.2rem;
+    line-height: 1.2;
+    letter-spacing: -0.01em;
+    color: #111111;
+}
+
+.body-manifesto-text-center {
+    font-size: 1rem;
+    max-width: 360px;
+    line-height: 1.6;
+}
+
+.meta-tag {
+    font-size: 0.75rem;
+    letter-spacing: 0.2em;
+}
+
+/* Custom Minimalist Spinner Concept */
+.editorial-spinner {
+    width: 40px;
+    height: 40px;
+    border: 2px solid #F0F0F0;
+    border-top: 2px solid #1A1A1A; /* High contrast matching the SVG path line color */
+    border-radius: 50%;
+    animation: spin-editorial 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+/* Subtle background ring pulse paths */
+.animated-pulse-ring {
+    transform-origin: 200px 180px;
+    animation: gate-pulse 3s ease-in-out infinite;
+}
+
+.animated-pulse-ring-delayed {
+    transform-origin: 200px 180px;
+    animation: gate-pulse 3s ease-in-out infinite;
+    animation-delay: 1.5s;
+}
+
+@keyframes spin-editorial {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes gate-pulse {
+    0%, 100% {
+        transform: scale(0.95);
+        opacity: 0.4;
+    }
+
+    50% {
+        transform: scale(1.05);
+        opacity: 0.9;
+    }
+}

MidrandBookshop/Components/_Imports.razor

@@ -9,3 +9,4 @@
 @using MidrandBookshop
 @using MidrandBookshop.Components
 @using MidrandBookshop.Components.Layout
+@using Microsoft.AspNetCore.Authorization;@using Microsoft.AspNetCore.Components.Authorization

MidrandBookshop/MidrandBookshop.csproj

@@ -18,13 +18,13 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="LiteCharms.Features" Version="1.84.0" />
+    <PackageReference Include="LiteCharms.Features" Version="1.101.0" />
   </ItemGroup>
 
   <!-- UI -->
   <ItemGroup>
     <PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
-    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.84.0" />
+    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.101.0" />
     
     <!-- Global Usings -->
     <Using Include="Blazored.Toast.Services" />
@@ -51,6 +51,10 @@
   <!-- Shared Global Usings -->
   <ItemGroup>
     <Using Include="Blazored.Toast" />
+    <Using Include="Microsoft.AspNetCore.Components.Authorization" />
+    <Using Include="Microsoft.AspNetCore.Components.Routing" />
+    <Using Include="Microsoft.AspNetCore.Components.Web" />
+    <Using Include="Microsoft.AspNetCore.WebUtilities" />
     <Using Include="Microsoft.AspNetCore.Components" />
   </ItemGroup>
 

MidrandBookshop/Program.cs

@@ -3,10 +3,9 @@ using LiteCharms.Features.Mediator;
 using LiteCharms.Features.MidrandBooks.Extensions;
 using Microsoft.AspNetCore.HttpOverrides;
 using MidrandBookshop.Components;
+using MidrandBookshop.Services.ShoppingCart;
 using static LiteCharms.Features.Extensions.Quartz;
 
-AppContext.SetSwitch("Microsoft.IdentityModel.DisableTelemetry", true);
-
 var builder = WebApplication.CreateBuilder(args);
 
 builder.Services.AddRazorComponents()
@@ -16,7 +15,7 @@ builder.AddMonitoring();
 builder.Services.AddEndpointsApiExplorer();
 
 builder.Services.AddMediator();
-builder.Services.AddAuthentikUiSecurity(builder.Configuration);
+builder.Services.AddLiteCharmsWebSecurity(builder.Configuration);
 
 builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
 builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
@@ -28,13 +27,13 @@ builder.Services.AddEmailServiceBus();
 
 builder.Services.AddHttpClient();
 builder.Services.AddShopServices();
+builder.Services.AddScoped<CartService>();
 builder.Services.AddHashServices(builder.Configuration);
 builder.Services.AddMidrandShopDatabase(builder.Configuration);
 
 builder.Services.AddMidrandShopPostgresHealthCheck();
 builder.Services.AddMidrandShopQuartzHealthCheck();
 builder.Services.AddHealthChecksSupport(builder.Configuration);
-builder.Services.AddCascadingAuthenticationState();
 
 builder.Services.Configure<ForwardedHeadersOptions>(options =>
 {

MidrandBookshop/Properties/launchSettings.json

@@ -13,7 +13,7 @@
       "https": {
         "commandName": "Project",
         "dotnetRunMessages": true,
-        "launchBrowser": true,
+        "launchBrowser": false,
         "applicationUrl": "https://localhost:7021;http://localhost:5053",
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development"

MidrandBookshop/Services/ShoppingCart/CartService.cs

@@ -0,0 +1,150 @@
+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;
+
+namespace MidrandBookshop.Services.ShoppingCart;
+
+public sealed class CartService(LocalStorageService localStorage)
+{
+    private readonly string CartStorageKey = HashService.ToMd5Hash(nameof(Cart)).Value;
+
+    public Cart ShoppingCart { get; private set; } = new();
+
+    public event Action? OnCartChanged;
+
+    public Cart GetCart() => ShoppingCart;
+
+    public void NotifyStateChanged() => OnCartChanged?.Invoke();
+
+    public async Task LoadCartFromStorageAsync()
+    {
+        var loadResult = await localStorage.GetAsync<Cart>(CartStorageKey);
+
+        if (loadResult.IsFailed) await localStorage.SaveAsync(CartStorageKey, ShoppingCart);
+
+        if (loadResult.IsSuccess) ShoppingCart = loadResult.Value;
+
+        NotifyStateChanged();
+    }
+
+    public async Task SaveCartToStorageAsync() => await localStorage.SaveAsync(CartStorageKey, ShoppingCart);
+
+    public void AddItem(ProductPrice productPrice, Product product, Author author)
+    {
+        var itemExists = false;
+
+        for (var i = 0; i < ShoppingCart.Items.Count; i++)
+        {
+            if (ShoppingCart.Items[i].Price!.Id == productPrice.Id)
+            {
+                ShoppingCart.Items[i].Quantity++;
+                ShoppingCart.Items[i].Amount += productPrice.Amount;
+
+                itemExists = true;
+
+                break;
+            }
+        }
+
+        if (!itemExists)
+            ShoppingCart.Items.Add(new CartItem
+            {
+                Product = product,
+                Author = author,
+                Price = productPrice,
+                Amount = productPrice.Amount,
+                Quantity = 1,
+            });
+
+        CalculateTotalPrice();
+        NotifyStateChanged();
+    }
+
+    public void UpdateQuantity(long productPriceId, int delta)
+    {
+        for (var i = 0; i < ShoppingCart.Items.Count; i++)
+        {
+            if (ShoppingCart.Items[i].Price!.Id == productPriceId)
+            {
+                var oldQuantity = ShoppingCart.Items[i].Quantity;
+                var pricePerUnit = ShoppingCart.Items[i].Price!.Amount;
+
+                ShoppingCart.Items[i].Quantity += delta;
+                ShoppingCart.Items[i].Amount = pricePerUnit * ShoppingCart.Items[i].Quantity;
+                break;
+            }
+        }
+
+        CalculateTotalPrice();
+        NotifyStateChanged();
+    }
+
+    public void RemoveOneItem(long productPriceId)
+    {
+        for (var i = 0; i < ShoppingCart.Items.Count; i++)
+        {
+            if (ShoppingCart.Items[i].Price!.Id == productPriceId)
+            {
+                if (ShoppingCart.Items[i].Quantity <= 1)
+                {
+                    ShoppingCart.Items.Remove(ShoppingCart.Items[i]);
+
+                    break;
+                }
+                else
+                {
+                    ShoppingCart.Items[i].Quantity--;
+                    ShoppingCart.Items[i].Amount -= ShoppingCart.Items[i].Price!.Amount;
+                }
+
+                break;
+            }
+        }
+
+        CalculateTotalPrice();
+        NotifyStateChanged();
+    }
+
+    public void RemoveAllSameItem(long productPriceId)
+    {
+        if (ShoppingCart.Items.Count == 0) return;
+
+        var item = ShoppingCart.Items.FirstOrDefault(i => i.Price?.Id == productPriceId);
+
+        if (item is not null) ShoppingCart.Items.Remove(item);
+
+        CalculateTotalPrice();
+        NotifyStateChanged();
+    }
+
+    public void Clear()
+    {
+        if(ShoppingCart.CustomerId is not null || ShoppingCart.OrderId is not null)
+        {
+            ShoppingCart.TotalPrice = 0;
+            ShoppingCart.TotalVat = 0;
+            ShoppingCart.Items.Clear();
+
+            return;
+        }
+
+        ShoppingCart = new Cart();
+
+        NotifyStateChanged();
+    }
+
+    public decimal CalculateTotalPrice()
+    {
+        if (ShoppingCart.Items.Count == 0) return 0;
+
+        var gross = ShoppingCart.Items.Sum(i => i.Amount);
+
+        if (!ShoppingCart.IsVatInclusive) ShoppingCart.TotalVat = gross * ShoppingCart.VatRate;
+
+        ShoppingCart.TotalPrice = gross + ShoppingCart.TotalVat;
+
+        return ShoppingCart.TotalPrice;
+    }
+}

MidrandBookshop/Services/ShoppingCart/Models/Cart.cs

@@ -0,0 +1,18 @@
+namespace MidrandBookshop.Services.ShoppingCart.Models;
+
+public sealed class Cart
+{
+    public long? CustomerId { get; set; }
+
+    public long? OrderId { get; set; }
+
+    public decimal TotalPrice { get; set; }
+
+    public decimal TotalVat { get; set; }
+
+    public decimal VatRate { get; set; } = 0.15m;
+
+    public bool IsVatInclusive { get; set; } = true;
+
+    public IList<CartItem> Items { get; set; } = [];
+}

MidrandBookshop/Services/ShoppingCart/Models/CartItem.cs

@@ -0,0 +1,17 @@
+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 int Quantity { get; set; }
+
+    public decimal Amount { get; set; }
+}

MidrandBookshop/appsettings.json

@@ -1,8 +1,6 @@
 {
-  "AuthentikSettings": {
+  "LiteCharmsSettings": {
-    "Authority": "https://id.khongisa.co.za/application/o/midrand-books-uat/",
+    "Authority": "https://sts.security.khongisa.co.za"
-    "MetadataEndpoint": "https://id.khongisa.co.za/application/o/midrand-books-uat/.well-known/openid-configuration",
-    "RevokationEndpoint": "https://id.khongisa.co.za/application/o/revoke/"
   },
   "HasherSettings": {
     "MinHashLength": 11

midrandbooks-uat.yml

@@ -26,9 +26,8 @@ data:
   ValidPayfastHosts__4: "ips.payfast.co.za"
   ValidPayfastHosts__5: "api.payfast.co.za"
   ValidPayfastHosts__6: "payment.payfast.io"
-  AuthentikSettings__Authority: "https://id.khongisa.co.za/application/o/midrand-books-api-uat/"
+  LiteCharmsSettings__Authority: "https://sts.security.khongisa.co.za"
-  AuthentikSettings__MetadataEndpoint: "https://id.khongisa.co.za/application/o/midrand-books-uat/.well-known/openid-configuration"
+  LiteCharmsSettings__Audience: "midrandbooks-api"
-  AuthentikSettings__RevokationEndpoint: "https://id.khongisa.co.za/application/o/revoke/"
   ASPNETCORE_FORWARDEDHEADERS_ENABLED: "true"
 ---
 apiVersion: v1
@@ -45,8 +44,8 @@ data:
   hasher-payfastpassphrase: OUdBSVIwdFdwaFgwcU8=
   bookshop-s3-accesskey: R0s1MTRkMmNlOGRjNjkyMzdhMDVjMDFlZWY=
   bookshop-s3-secretkey: ZWFhZmVkYTFhZWQ0MDllY2ZlNjA3MTRlY2RhNTQ5YjgyYmRmNWEzZGFmOWYxOGRkNjFmNjZiNDk3M2E2NDgyZQ==
-  authentik-clientid: Nm9oZk1lSndQNWR0YWY1RFMzZU9MY2NNSHF6WXlma1YzRTNGeE5Tbw==
+  litecharms-clientid: bWlkcmFuZGJvb2tzLXVhdA==
-  authentik-clientsecret: TXV2a0FLQklHR3BkdEsyaFlabVU1dFRaUmNuM2FhRzhoMWhlVE1nazFYOGVwczYyMzNCS0REWGdpNXo0T01RalVzMGZEUEFmakpmVVRNN1h3ZjllMU01MTQyVGlvOXRycUdmZTM1THhPaExEUnp6N2gxSm5jVkNLYXZXUllndmQ=
+  litecharms-clientsecret: c2VjcmV0Xzc3OGJkODM3NWFjNGE3Mzg2N2QxZDdhNjcwODJlZTJjNGU4NmUwODYwYmI0Y2ZlZWI5NDExOTQ5OTk2ZThhOGU=
 ---
 apiVersion: v1
 kind: PersistentVolumeClaim
@@ -99,16 +98,16 @@ spec:
             - configMapRef:
                 name: midrandbooks-config
           env:
-            - name: AuthentikSettings__ClientId
+            - name: LiteCharmsSettings__ClientId
               valueFrom:
                 secretKeyRef:
                   name: midrandbooks-secrets
-                  key: authentik-clientid
+                  key: litecharms-clientid
-            - name: AuthentikSettings__ClientSecret
+            - name: LiteCharmsSettings__ClientSecret
               valueFrom:
                 secretKeyRef:
                   name: midrandbooks-secrets
-                  key: authentik-clientsecret
+                  key: litecharms-clientsecret
             - name: BookshopS3Settings__AccessKey
               valueFrom:
                 secretKeyRef: