Merge pull request 'Added data protection key persistance' (#71) from cart into main

Reviewed-on: #71

MidrandBooks.slnx

@@ -1,6 +1,7 @@
 <Solution>
   <Folder Name="/Solution Items/">
     <File Path=".drone.yml" />
+    <File Path=".editorconfig" />
     <File Path="Dockerfile" />
     <File Path="midrandbooks-uat.yml" />
     <File Path="README.md" />

MidrandBookshop/Components/BookCard.razor

@@ -50,15 +50,3 @@
 
     </div>
 </div>
-
-@code {
-    [Parameter] public long Id { get; set; }
-    [Parameter] public string Title { get; set; } = string.Empty;
-    [Parameter] public string Author { get; set; } = string.Empty;
-    [Parameter] public decimal Price { get; set; }
-    [Parameter] public string Category { get; set; } = string.Empty;
-    [Parameter] public bool IsNew { get; set; }
-    [Parameter] public string BookImageUrl { get; set; } = string.Empty;
-
-    [Parameter] public EventCallback OnCardClick { get; set; }
-}

MidrandBookshop/Components/BookCard.razor.cs

@@ -0,0 +1,14 @@
+namespace MidrandBookshop.Components;
+
+public partial class BookCard
+{
+    [Parameter] public long Id { get; set; }
+    [Parameter] public string Title { get; set; } = string.Empty;
+    [Parameter] public string Author { get; set; } = string.Empty;
+    [Parameter] public decimal Price { get; set; }
+    [Parameter] public string Category { get; set; } = string.Empty;
+    [Parameter] public bool IsNew { get; set; }
+    [Parameter] public string BookImageUrl { get; set; } = string.Empty;
+
+    [Parameter] public EventCallback OnCardClick { get; set; }
+}

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,9 +163,9 @@
                         <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>
 

MidrandBookshop/Components/Layout/MainLayout.razor.cs

@@ -1,36 +1,43 @@
-using Microsoft.AspNetCore.Components.Routing;
+using LiteCharms.Features.MidrandBooks.Payments;
-using Microsoft.AspNetCore.Components.Web;
+using LiteCharms.Features.MidrandBooks.Payments.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 }
-    };
 
-    private void TriggerHeaderLogout()
-    {
-        // Force tear-down of the active client websocket pipeline safely
-        Navigation.NavigateTo("/logout", forceLoad: true);
-    }
-
-    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();
@@ -97,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?.TotalAmount ?? 0.00m;
 
     private void RedirectToCart()
     {
@@ -124,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/Pages/Account.razor

@@ -225,77 +225,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
-
-@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 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.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/Cart.razor

@@ -1,106 +0,0 @@
-@page "/cart"
-
-<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>
-
-    @if (!CartItems.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>
-    }
-    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>
-
-                    <!-- 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>
-
-                    <!-- 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>
-            }
-        </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">
-                        <span class="text-muted">Subtotal</span>
-                        <span class="fw-bold">R @Subtotal.ToString("F2")</span>
-                    </div>
-                    <div class="d-flex justify-content-between mb-4">
-                        <span class="text-muted">VAT (15%)</span>
-                        <span class="fw-bold">R @VatAmount.ToString("F2")</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>
-                    </div>
-                    <a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3">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);
-}

MidrandBookshop/Components/Pages/CartReview.razor

@@ -0,0 +1,98 @@
+@page "/cart"
+@rendermode InteractiveServer
+
+<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 (!ShoppingCart.Items.Any())
+    {
+        <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="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">
+
+                            <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>
+
+                            <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 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-normal text-dark">R @(ShoppingCart.TotalAmount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
+                    </div>
+
+                    <div class="d-flex justify-content-between mb-4" style="font-size: 0.9rem;">
+                        <span class="text-muted">VAT (15%)</span>
+                        <span class="fw-normal text-dark">R @(ShoppingCart.TotalVat.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
+                    </div>
+
+                    <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 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>

MidrandBookshop/Components/Pages/CartReview.razor.cs

@@ -0,0 +1,36 @@
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class CartReview(CartService cartService)
+{
+    protected 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/CartReview.razor.css

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

MidrandBookshop/Components/Pages/Checkout.razor

@@ -1,19 +1,18 @@
 @page "/checkout"
 @inject NavigationManager Navigation
+@rendermode InteractiveServer
+@attribute [Authorize]
 
 <div class="container py-5">
     <h2 class="fw-bold mb-4">Checkout</h2>
     <div class="row g-5">
-
-        <!-- LEFT COLUMN: SHIPPING & CART -->
         <div class="col-lg-8">
-            <!-- 1. Cart Items -->
             <div class="card border-0 shadow-sm p-4 mb-4">
                 <h5 class="fw-bold mb-3">Your Items</h5>
-                @foreach (var item in CartItems)
+                @foreach (var item in ShoppingCart.Items)
                 {
                     <div class="d-flex align-items-center justify-content-between pb-3 border-bottom mb-3">
-                        <div><h6 class="mb-0">@item.Title</h6><small class="text-muted">@item.Author</small></div>
+                        <div><h6 class="mb-0">@item.Product!.Name</h6><small class="text-muted">@($"{item.Author!.Name} {item.Author.LastName}")</small></div>
                         <div class="d-flex align-items-center gap-3">
                             <div class="d-flex border rounded-pill">
                                 <button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, -1)">-</button>
@@ -26,7 +25,6 @@
                 }
             </div>
 
-            <!-- 2. Shipping Options -->
             <div class="card border-0 shadow-sm p-4 mb-4">
                 <h5 class="fw-bold mb-3">Shipping Method</h5>
                 <div class="form-check mb-2">
@@ -41,70 +39,38 @@
                 </div>
             </div>
 
-            <!-- 3. Address Fields -->
             <div class="card border-0 shadow-sm p-4">
                 <h5 class="fw-bold mb-3">Shipping Address</h5>
                 <div class="form-check mb-3">
                     <input class="form-check-input" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
                     <label class="form-check-label" for="sameAsBilling">Billing address same as shipping</label>
                 </div>
-                <!-- Add text inputs for address here, show/hide based on IsSameAddress -->
             </div>
         </div>
 
-        <!-- RIGHT COLUMN: STICKY SUMMARY -->
         <div class="col-lg-4">
             <div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
                 <h5 class="fw-bold mb-3">Order Summary</h5>
-                <div class="d-flex justify-content-between mb-2"><span>Subtotal</span><span>R @Subtotal.ToString("F2")</span></div>
+                <div class="d-flex justify-content-between mb-2"><span>Subtotal</span><span>R @ShoppingCart.TotalAmount.ToString("F2")</span></div>
-                <div class="d-flex justify-content-between mb-2"><span>VAT (15%)</span><span>R @VatAmount.ToString("F2")</span></div>
+                <div class="d-flex justify-content-between mb-2"><span>VAT (15%)</span><span>R @ShoppingCart.TotalVat.ToString("F2")</span></div>
-                <div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @ShippingCost.ToString("F2")</span></div>
+                <div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @($"{ShippingCost:F2}")</span></div>
                 <hr />
                 <div class="d-flex justify-content-between mb-4">
                     <span class="fw-bold">Total Due</span>
-                    <h4 class="fw-bold">R @((Subtotal + VatAmount + ShippingCost).ToString("F2"))</h4>
+                    <h4 class="fw-bold">R @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")</h4>
                 </div>
-                <button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="CompletePurchase">Complete Purchase</button>
+                <button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="PayNow">Complete Purchase</button>
             </div>
         </div>
+
+        @if (IsProcessing == true && CheckoutPayload?.Count > 0)
+        {
+            <form id="payfastForm" action="@PayfastOptions.Value.CheckoutUrl" method="POST">
+                @foreach (var field in CheckoutPayload)
+                {
+                    <input type="hidden" name="@field.Key" value="@field.Value" />
+                }
+            </form>
+        }
     </div>
-</div>
+</div>
-
-@code {
-    private decimal ShippingCost = 0;
-    private bool IsSameAddress = true;
-
-    // Calculations
-    private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
-    private decimal VatAmount => Subtotal * 0.15m;
-
-    // Assuming your CartItems list is managed via a Service or cascading parameter
-    // Here it is locally mocked for this example
-    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 }
-    };
-
-    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);
-    private int GetCartTotal() => CartItems.Sum(i => i.Price * i.Quantity);
-
-    public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = "";
-        public string Author { get; set; } = "";
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }
-    private void CompletePurchase(MouseEventArgs args)
-    {
-        Navigation.NavigateTo("/payment-confirmation");
-    }
-}

MidrandBookshop/Components/Pages/Checkout.razor.cs

@@ -0,0 +1,159 @@
+using LiteCharms.Features.Api.Configuration;
+using LiteCharms.Features.Hasher;
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Customers;
+using LiteCharms.Features.MidrandBooks.Customers.Models;
+using LiteCharms.Features.MidrandBooks.Orders;
+using LiteCharms.Features.MidrandBooks.Orders.Models;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+using LiteCharms.Features.MidrandBooks.Products;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class Checkout()
+{
+    [Inject] public HashService HashService { get; set; } = default!;
+    [Inject] public PaymentService PaymentService { get; set; } = default!;
+    [Inject] public OrderService OrderService { get; set; } = default!;
+    [Inject] public BooksService BooksService { get; set; } = default!;
+    [Inject] public CartService CartService { get; set; } = default!;
+    [Inject] public PayfastService PayfastService { get; set; } = default!;
+    [Inject] public CustomerService CustomerService { get; set; } = default!;
+    [Inject] public ProductService ProductService { get; set; } = default!;
+    [Inject] public IOptions<PayfastSettings> PayfastOptions { get; set; } = default!;
+    [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
+    [Inject] public IJSRuntime JSRuntime { get; set; } = default!;
+
+    private Cart ShoppingCart => CartService.ShoppingCart;
+    private AuthenticationState? AuthState { get; set; }
+    private ClaimsPrincipal? User { get; set; }
+    private bool IsProcessing { get; set; }
+
+    private decimal ShippingCost = 0;
+    private bool IsSameAddress = true;
+
+    private Dictionary<string, string> CheckoutPayload { get; set; } = [];
+
+    protected override async Task OnInitializedAsync()
+    {
+        AuthState = await AuthStateProvider.GetAuthenticationStateAsync();
+        User = AuthState!.User;
+
+        Navigation.LocationChanged += OnLocationChanged;
+        CartService.OnCartChanged += CartService_OnCartChanged;
+    }
+
+    private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e) => StateHasChanged();
+
+    private async void ChangeQuantity(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();
+    }
+
+    private async Task PayNow(MouseEventArgs args)
+    {
+        if (IsProcessing) return;
+
+        try
+        {
+            // 1. Instantly disable the button to prevent duplicate click submissions
+            IsProcessing = true;
+            StateHasChanged(); // Force Blazor Server to push the disabled state over SignalR immediately
+
+            var customerEmail = User?.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value!;
+
+            // 2. Create customer if ShoppingCart.CustomerId is null
+            if (ShoppingCart.CustomerId == null)
+            {
+                var existingCustomer = await CustomerService.GetCustomerAsync(customerEmail);
+
+                if (existingCustomer.IsSuccess)
+                    ShoppingCart.CustomerId = existingCustomer.Value.Id;
+
+                if (existingCustomer.IsFailed)
+                {
+                    var customerCreate = await CustomerService.CreateCustomerAsync(new CreateCustomer { Email = customerEmail });
+
+                    if (customerCreate.IsSuccess)
+                        ShoppingCart.CustomerId = customerCreate.Value;
+                }
+            }
+
+            // 3. Create order using shopping cart and assign the ShoppingCart.OrderId
+
+            var order = await OrderService.CreateOrderAsync(ShoppingCart.CustomerId!.Value, new CreateOrder(ShoppingCart.TotalAmount, null));
+            List<CreateOrderItem> orderItems = [];
+
+            foreach (var item in ShoppingCart.Items)
+            {
+                var bookRequest = await BooksService.GetBookByProductIdAsync(item.Price!.Id);
+
+                if (bookRequest.IsSuccess)
+                {
+                    var orderItem = new CreateOrderItem(bookRequest.Value.Id, item.Price.Id, item.Quantity);
+                    orderItems.Add(orderItem);
+                }
+            }
+
+            var paymentGen = await PaymentService.CreatePaymentAsync(ShoppingCart.TotalAmount, order.Value, HashService.HashEncodeLongId(order.Value).Value);
+            var merchantPaymentId = HashService.HashEncodeLongId(order.Value).Value;
+
+            await PaymentService.WriteLedgerEntryAsync(new CreateLedgerEntry
+            {
+                OrderId = order.Value,
+                CustomerId = ShoppingCart.CustomerId.Value,
+                PaymentGatewayId = 1,
+                PaymentGatewayReference = merchantPaymentId,
+                PaymentId = paymentGen.Value,
+                Status = LiteCharms.Features.LedgerStatuses.Sent,
+            });
+
+            var addItemsResult = await OrderService.AddItemsToOrderAsync(order.Value, [.. orderItems]);
+
+            // 4. Generate the signed Payfast form payload using your backend service            
+            var hostAddress = Navigation.BaseUri.TrimEnd('/');
+
+            CheckoutPayload = new Dictionary<string, string>
+            {
+                { "merchant_id", PayfastOptions.Value.MerchantId! },
+                { "merchant_key", PayfastOptions.Value.MerchantKey! },
+                { "return_url", $"{hostAddress}/payment-success" },
+                { "cancel_url", $"{hostAddress}/payment-failed" },
+                { "notify_url", "https://api.uat.midrandbooks.co.za/v1/payments/payfast/confirm" },
+                { "email_address", customerEmail },
+                { "m_payment_id", merchantPaymentId },
+                { "amount", ShoppingCart.TotalAmount.ToString("F2", CultureInfo.InvariantCulture) },
+                { "item_name", "MidrandBooks Sale" },
+            };
+
+            var signature = PayfastService.GenerateSignature(CheckoutPayload!, PayfastOptions.Value.Passphrase).Value;
+            CheckoutPayload.Add("signature", signature);
+
+            StateHasChanged();
+
+            // 6. Execute programmatic submit directly into the sandbox
+            await JSRuntime.InvokeVoidAsync("eval", "document.getElementById('payfastForm').submit();");
+        }
+        catch
+        {
+            IsProcessing = false;
+            StateHasChanged();
+        }
+    }
+}

MidrandBookshop/Components/Pages/PaymentFailed.razor

@@ -0,0 +1,41 @@
+@page "/payment-failed"
+@rendermode InteractiveServer
+@attribute [Authorize]
+
+<div class="container py-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-6 text-center">
+            <div class="mb-4">
+                <div class="d-inline-block p-4 rounded-circle bg-danger bg-opacity-10 text-danger mb-3">
+                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="12" y1="8" x2="12" y2="12"></line>
+                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                    </svg>
+                </div>
+                <h1 class="fw-bold mb-3">Payment Failed</h1>
+                <p class="text-muted fs-5">We couldn't process your transaction. Don't worry, no money was deducted from your account, and your cart items are safe.</p>
+
+                <div class="bg-light p-3 rounded mt-4">
+                    <p class="mb-0 text-muted small text-uppercase fw-bold">Common Causes</p>
+                    <p class="mb-0 fs-6 text-dark mt-1">Insufficient funds, incorrect card details, or a temporary bank gateway timeout.</p>
+                </div>
+            </div>
+
+            <div class="d-grid gap-3 mt-5">
+                <a href="/checkout" class="btn btn-dark btn-lg rounded-pill py-3">Try Again</a>
+
+                <div class="row g-3">
+                    <div class="col-6">
+                        <a href="/" class="btn btn-outline-dark w-100 rounded-pill py-3">View Store</a>
+                    </div>
+                    <div class="col-6">
+                        <a href="/support" class="btn btn-outline-dark w-100 rounded-pill py-3">Get Help</a>
+                    </div>
+                </div>
+            </div>
+
+            <p class="mt-5 text-muted small">If you noticed a charge or have any order questions, please contact our support desk with your account email <strong>user@email.com</strong>.</p>
+        </div>
+    </div>
+</div>

MidrandBookshop/Components/Pages/PaymentSuccess.razor

@@ -1,10 +1,10 @@
-@page "/payment-confirmation"
+@page "/payment-success"
+@rendermode InteractiveServer
+@attribute [Authorize]
 
 <div class="container py-5">
     <div class="row justify-content-center">
         <div class="col-md-8 col-lg-6 text-center">
-
-            <!-- Success Icon & Message -->
             <div class="mb-4">
                 <div class="d-inline-block p-4 rounded-circle bg-success bg-opacity-10 text-success mb-3">
                     <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -20,12 +20,11 @@
                 </div>
             </div>
 
-            <!-- Calls to Action -->
             <div class="d-grid gap-3 mt-5">
                 <a href="/" class="btn btn-dark btn-lg rounded-pill py-3">Continue Shopping</a>
                 <div class="row g-3">
                     <div class="col-6">
-                        <a href="/order-history" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
+                        <a href="/account" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
                     </div>
                     <div class="col-6">
                         <a href="/track-order" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
@@ -33,7 +32,6 @@
                 </div>
             </div>
 
-            <!-- Optional Trust Footer -->
             <p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>user@email.com</strong>.</p>
         </div>
     </div>

MidrandBookshop/Components/Pages/ProductView.razor.cs

@@ -1,6 +1,8 @@
 using LiteCharms.Features;
 using LiteCharms.Features.MidrandBooks.Authors;
 using LiteCharms.Features.MidrandBooks.Authors.Models;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
 using LiteCharms.Features.MidrandBooks.Products;
 using LiteCharms.Features.MidrandBooks.Products.Models;
 
@@ -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 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";
@@ -44,6 +50,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 +80,7 @@ public partial class ProductView : ComponentBase
         catch (Exception)
         {
             CurrentProduct = null;
+            CurrentPrice = null;
         }
         finally
         {
@@ -80,14 +88,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 = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
 
-    protected void HandleAddToCart()
+            await CartService.SaveCartToStorageAsync();
+        }
+    }
+    protected async void DecreaseQty() 
+    {
+        if (Quantity >= 1)
+        {
+            CartService.UpdateQuantity(CurrentPrice!.Id, -1);
+
+            Quantity = CartService.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 = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
+
+            await CartService.SaveCartToStorageAsync();
+        }
     }
-        
+
     protected void ViewAllAuthorBooks()
     {
         if (CurrentAuthor is not null)

MidrandBookshop/Components/RedirectToLogin.razor

@@ -31,12 +31,3 @@
         </div>
     </div>
 </div>
-
-@code {
-    protected override void OnInitialized()
-    {
-        var returnUrl = Navigation.ToBaseRelativePath(Navigation.Uri);
-
-        Navigation.NavigateTo($"/login?returnUrl={Uri.EscapeDataString(returnUrl)}", forceLoad: true);
-    }
-}

MidrandBookshop/Components/RedirectToLogin.razor.cs

@@ -0,0 +1,12 @@
+namespace MidrandBookshop.Components;
+
+public partial class RedirectToLogin
+{
+    protected override void OnInitialized()
+    {
+        var relativePath = Navigation.ToBaseRelativePath(Navigation.Uri);
+        var sanitizedRedirectPath = relativePath.StartsWith('/') ? relativePath : $"/{relativePath}";
+
+        Navigation.NavigateTo($"/login?redirectUri={Uri.EscapeDataString(sanitizedRedirectPath)}", forceLoad: true);
+    }
+}

MidrandBookshop/MidrandBookshop.csproj

@@ -18,13 +18,13 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="LiteCharms.Features" Version="1.98.0" />
+    <PackageReference Include="LiteCharms.Features" Version="1.127.0" />
   </ItemGroup>
 
   <!-- UI -->
   <ItemGroup>
     <PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
-    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.98.0" />
+    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.127.0" />
     
     <!-- Global Usings -->
     <Using Include="Blazored.Toast.Services" />
@@ -51,6 +51,15 @@
   <!-- Shared Global Usings -->
   <ItemGroup>
     <Using Include="Blazored.Toast" />
+    <Using Include="Microsoft.JSInterop" />
+    <Using Include="System.Globalization" />
+    <Using Include="System.Security.Claims" />
+    <Using Include="Microsoft.AspNetCore.HttpOverrides" />
+    <Using Include="Microsoft.Extensions.Options" />
+    <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

@@ -1,7 +1,7 @@
 using LiteCharms.Features.Extensions;
 using LiteCharms.Features.Mediator;
 using LiteCharms.Features.MidrandBooks.Extensions;
-using Microsoft.AspNetCore.HttpOverrides;
+using LiteCharms.Features.MidrandBooks.Payments;
 using MidrandBookshop.Components;
 using static LiteCharms.Features.Extensions.Quartz;
 
@@ -14,7 +14,7 @@ builder.AddMonitoring();
 builder.Services.AddEndpointsApiExplorer();
 
 builder.Services.AddMediator();
-builder.Services.AddLiteCharmsWebSecurity(builder.Configuration);
+builder.Services.AddLiteCharmsWebSecurity(builder.Configuration, builder.Environment);
 
 builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
 builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
@@ -25,8 +25,11 @@ builder.Services.AddEmailServices(builder.Configuration);
 builder.Services.AddEmailServiceBus();
 
 builder.Services.AddHttpClient();
-builder.Services.AddShopServices();
+builder.Services.AddScoped<CartService>();
+builder.Services.AddShopServices(includeLocalStorage: true);
 builder.Services.AddHashServices(builder.Configuration);
+builder.Services.AddSecurityApiSdk(builder.Configuration);
+builder.Services.AddPayfastServices(builder.Configuration);
 builder.Services.AddMidrandShopDatabase(builder.Configuration);
 
 builder.Services.AddMidrandShopPostgresHealthCheck();

MidrandBookshop/appsettings.json

@@ -1,7 +1,22 @@
 {
+  "PayfastSettings": {
+    "CheckoutUrl": "https://sandbox.payfast.co.za/eng/process",
+    "ValidHosts": [
+      "www.payfast.co.za",
+      "sandbox.payfast.co.za",
+      "ips.payfast.co.za",
+      "api.payfast.co.za",
+      "payment.payfast.io"
+    ]
+  },
   "LiteCharmsSettings": {
     "Authority": "https://sts.security.khongisa.co.za"
   },
+  "LiteCharmsClientSettings": {
+    "Authority": "https://sts.security.khongisa.co.za",
+    "GrantType": "client_credentials",
+    "Scope": "midrandbooks-api"
+  },
   "HasherSettings": {
     "MinHashLength": 11
   },

midrandbooks-uat.yml

@@ -19,16 +19,18 @@ data:
   BookshopS3Settings__Region: "garage"
   BookshopS3Settings__BucketName: "bookshop"
   BookshopS3Settings__CdnBaseUrl: "https://bookshop.cdn.khongisa.co.za"
-  ValidPayfastHosts__0: "www.payfast.co.za"
+  PayfastSettings__CheckoutUrl: "https://sandbox.payfast.co.za/eng/process"
-  ValidPayfastHosts__1: "sandbox.payfast.co.za"
+  PayfastSettings__ValidHosts__0: "www.payfast.co.za"
-  ValidPayfastHosts__2: "w1w.payfast.co.za"
+  PayfastSettings__ValidHosts__1: "sandbox.payfast.co.za"
-  ValidPayfastHosts__3: "w2w.payfast.co.za"
+  PayfastSettings__ValidHosts__2: "ips.payfast.co.za"
-  ValidPayfastHosts__4: "ips.payfast.co.za"
+  PayfastSettings__ValidHosts__3: "api.payfast.co.za"
-  ValidPayfastHosts__5: "api.payfast.co.za"
+  PayfastSettings__ValidHosts__4: "payment.payfast.io"
-  ValidPayfastHosts__6: "payment.payfast.io"
   LiteCharmsSettings__Authority: "https://sts.security.khongisa.co.za"
   LiteCharmsSettings__Audience: "midrandbooks-api"
   ASPNETCORE_FORWARDEDHEADERS_ENABLED: "true"
+  LiteCharmsClientSettings__Authority: "https://sts.security.khongisa.co.za"
+  LiteCharmsClientSettings__GrantType: "client_credentials"
+  LiteCharmsClientSettings__Scope: "midrandbooks-api"
 ---
 apiVersion: v1
 kind: Secret
@@ -40,12 +42,16 @@ data:
   connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
   connection-string-quartz: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPXNjaGVkdWxlci1kZXY7VXNlcm5hbWU9c2NoZWR1bGVyLWRldi11c2VyO1Bhc3N3b3JkPWtWVm1vV0tKM3h6Z1FYO1BlcnNpc3QgU2VjdXJpdHkgSW5mbz1UcnVl
   aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw==
-  hasher-salt: VEdsbmFIUWdRMmhoY20xekxDQk5hV1J5WVc1a1FtOXZhM01nYldGclpTQnNiM1J6SUc5bUlHMXZibVY1SUdGdVpDQmhjbVVnWVNCemRXTmpaWE56Wm5Wc0lIWnBjbUZzSUhOMGIzSjVJR2x1SUZOdmRYUm9JRUZtY21sallRPT0=
+  hasher-salt: VEdsbmFIUWdRMmhoY20xekxDQk5hV1J5WVc1a1FtOXZhM01nYldGclpTQnNiM1J6SUc5bUlHMXZibVY1SUdGdVpDQmhjbVVnWVNCemRXTmpaWE56Wm5Wc0lIWnBjbUZzSUhOMGIzSjVJR2x1SUZOdmRYUm9JRUZtY21sallRPT0=  
-  hasher-payfastpassphrase: OUdBSVIwdFdwaFgwcU8=
   bookshop-s3-accesskey: R0s1MTRkMmNlOGRjNjkyMzdhMDVjMDFlZWY=
   bookshop-s3-secretkey: ZWFhZmVkYTFhZWQ0MDllY2ZlNjA3MTRlY2RhNTQ5YjgyYmRmNWEzZGFmOWYxOGRkNjFmNjZiNDk3M2E2NDgyZQ==
   litecharms-clientid: bWlkcmFuZGJvb2tzLXVhdA==
   litecharms-clientsecret: c2VjcmV0Xzc3OGJkODM3NWFjNGE3Mzg2N2QxZDdhNjcwODJlZTJjNGU4NmUwODYwYmI0Y2ZlZWI5NDExOTQ5OTk2ZThhOGU=
+  payfast-passphrase: OUdBSVIwdFdwaFgwcU8=
+  payfast-merchantid: MTAwNDkzMDc=
+  payfast-merchantkey: anU2bmF2bjBqY2JmMA==
+  litecharms-client-clientid: bWlkcmFuZGJvb2tzLWFwaS1zY2FsZXItdWF0
+  litecharms-client-clientsecret: c2VjcmV0XzBhOGRjMWY5OTA2MTU5MGE1MmIxMjcyZGIzYTE4NzFkMjc2MWM3OWZiZDA1OGIyYTk2ODkxMTAyOWU0YjIwOGE=
 ---
 apiVersion: v1
 kind: PersistentVolumeClaim
@@ -123,11 +129,31 @@ spec:
                 secretKeyRef:
                   name: midrandbooks-secrets
                   key: hasher-salt
-            - name: HasherSettings__PayfastPassphrase
+            - name: PayfastSettings__Passphrase
               valueFrom:
                 secretKeyRef:
                   name: midrandbooks-secrets
-                  key: hasher-payfastpassphrase
+                  key: payfast-passphrase
+            - name: PayfastSettings__MerchantId
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: payfast-merchantid
+            - name: PayfastSettings__MerchantKey
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: payfast-merchantkey
+            - name: LiteCharmsClientSettings__ClientId
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: litecharms-client-clientid
+            - name: LiteCharmsClientSettings__ClientSecret
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: litecharms-client-clientsecret
             - name: ConnectionStrings__PostgresScheduler
               valueFrom:
                 secretKeyRef:
@@ -146,7 +172,10 @@ spec:
           volumeMounts:
             - name: data
               mountPath: /app/wwwroot/content
-              resources:          
+              subPath: bookshop-content
+            - name: shared-keys-volume
+              mountPath: /app/shared-keys
+              subPath: dataprotection-keys
           livenessProbe:
             httpGet:
               path: /health
@@ -163,6 +192,9 @@ spec:
         - name: data
           persistentVolumeClaim:
             claimName: midrandbooks-pvc
+        - name: shared-keys-volume
+          persistentVolumeClaim:
+            claimName: midrandbooks-pvc
 ---
 apiVersion: v1
 kind: Service