Merge pull request 'Checkout page clean up' (#100) from checkout into main

Reviewed-on: #100

.drone.yml

@@ -23,7 +23,7 @@ trigger:
 kind: pipeline
 type: docker
 name: package
-
+ 
 steps:
   - name: docker-build
     image: plugins/docker
@@ -31,6 +31,10 @@ steps:
       registry: nexus.khongisa.co.za
       repo: nexus.khongisa.co.za/midrandbooks
       tags: [ latest, "1.${DRONE_BUILD_NUMBER}" ]
+      use_cache: true
+      cache_from: nexus.khongisa.co.za/midrandbooks:latest
+      build_args:
+        - BUILDKIT_INLINE_CACHE=1
       custom_labels:
         - org.opencontainers.image.source=https://gitea.khongisa.co.za/litecharms/midrandbooks
         - org.opencontainers.image.version=1.${DRONE_BUILD_NUMBER}

MidrandBookshop/Components/BookCard.razor

@@ -14,12 +14,29 @@
                 {
                     <div></div>
                 }
-                <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
-                        <line x1="7" y1="17" x2="17" y2="7" />
-                        <polyline points="7,7 17,7 17,17" />
-                    </svg>
-                </button>
+
+                <div class="d-flex align-items-center gap-2">
+                    <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0 btn-cart-icon"
+                            style="width: 32px; height: 32px; transition: all 0.2s ease;"
+                            title="Add to Cart"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            @onclick="HandleAddToCart" @onclick:stopPropagation>
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <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>
+                    </button>
+
+                    <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0"
+                            style="width: 32px; height: 32px;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
+                            <line x1="7" y1="17" x2="17" y2="7" />
+                            <polyline points="7,7 17,7 17,17" />
+                        </svg>
+                    </button>
+                </div>
             </div>
 
             <div class="d-flex justify-content-center align-items-center flex-grow-1 my-2">
@@ -49,4 +66,4 @@
         </div>
 
     </div>
-</div>
+</div>

MidrandBookshop/Components/BookCard.razor.cs

@@ -1,4 +1,9 @@
-namespace MidrandBookshop.Components;
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Products;
+
+namespace MidrandBookshop.Components;
 
 public partial class BookCard
 {
@@ -11,4 +16,29 @@ public partial class BookCard
     [Parameter] public string BookImageUrl { get; set; } = string.Empty;
 
     [Parameter] public EventCallback OnCardClick { get; set; }
+
+    [Inject] private CartService CartService { get; set; } = default!;
+    [Inject] private ProductService ProductService { get; set; } = default!;
+    [Inject] private AuthorService AuthorService { get; set; } = default!;
+    [Inject] private BooksService BooksService { get; set; } = default!;
+    [Inject] private IToastService ToastService { get; set; } = default!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+
+    private async Task HandleAddToCart()
+    {
+        try
+        {
+            var bookFetch = await BooksService.GetBookByProductIdAsync(Id, CancellationToken);            
+            var authorFetch = await AuthorService.GetAuthorAsync(bookFetch.Value.AuthorId, CancellationToken);
+            var productPriceFetch = await ProductService.GetProductPriceAsync(Id, CancellationToken);
+
+            CartService.AddItem(productPriceFetch.Value, bookFetch.Value.Product!, authorFetch.Value);
+
+            ToastService.ShowSuccess($"Added '{Title}' to your order.", "Cart Changed");
+        }
+        catch
+        {
+            ToastService.ShowError("Could not update cart. Please try again.");
+        }
+    }
 }

MidrandBookshop/Components/Layout/MainLayout.razor

@@ -1,4 +1,5 @@
-@inherits LayoutComponentBase
+@using Blazored.Toast
+@inherits LayoutComponentBase
 @inject NavigationManager Navigation
 
 <div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
@@ -203,7 +204,7 @@
                                     </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">
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-danger d-flex align-items-center gap-2" href="javascript:void(0)" @onclick:preventDefault @onclick="HandleLogout">
                                             <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>
@@ -215,15 +216,15 @@
                                 </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">
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="javascript:void(0)" @onclick:preventDefault @onclick="HandleLogin">
                                             <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">
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-muted d-flex align-items-center gap-2" href="javascript:void(0)" @onclick:preventDefault @onclick="RedirectToAccount">
                                             <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
+                                            Order History
                                         </a>
                                     </li>
                                 </NotAuthorized>
@@ -295,3 +296,4 @@
     </div>
 </div>
 
+<BlazoredToasts />

MidrandBookshop/Components/Layout/MainLayout.razor.cs

@@ -5,15 +5,10 @@ namespace MidrandBookshop.Components.Layout;
 
 public partial class MainLayout(CartService cartService) : IDisposable
 {
-    [Inject]
-    private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
+    [Inject] public IToastService ToastService { 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;
@@ -21,19 +16,13 @@ public partial class MainLayout(CartService cartService) : IDisposable
 
     protected override async Task OnInitializedAsync()
     {
-        AuthState = await AuthStateProvider.GetAuthenticationStateAsync();
-        User = AuthState!.User;
-
         Navigation.LocationChanged += OnLocationChanged;
         cartService.OnCartChanged += CartService_OnCartChanged;
 
-        SyncSearchQueryFromUrl();
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender) 
+        if (cartService.ShoppingCart.Items.Count == 0)
             await cartService.LoadCartFromStorageAsync();
+
+        SyncSearchQueryFromUrl();
     }
 
     private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
@@ -104,7 +93,7 @@ public partial class MainLayout(CartService cartService) : IDisposable
 
     private void ToggleCart() => IsCartOpen = !IsCartOpen;
 
-    private async void ChangeQuantity(CartItem item, int delta)
+    private async Task ChangeQuantity(CartItem item, int delta)
     {
         var peekQuantity = item.Quantity + delta;
 
@@ -115,25 +104,60 @@ public partial class MainLayout(CartService cartService) : IDisposable
         await cartService.SaveCartToStorageAsync();
     }
 
-    private async void RemoveFromCart(CartItem item)
+    private async Task RemoveFromCart(CartItem item)
     {
         cartService.RemoveOneItem(item.Price!.Id);
 
         await cartService.SaveCartToStorageAsync();
+
+        ToastService.ShowSuccess($"Removed {item.Product!.Name} from cart", "Cart Changed");
     }
 
     private decimal GetCartTotal() => ShoppingCart?.TotalAmount ?? 0.00m;
 
-    private void RedirectToCart()
+    private async Task RedirectToCart()
     {
         IsCartOpen = false;
+
+        await cartService.SaveCartToStorageAsync();
+
         Navigation.NavigateTo("/cart");
     }
 
-    private void RedirectToCheckout()
+    private async Task RedirectToCheckout()
     {
         IsCartOpen = false;
-        Navigation.NavigateTo("/checkout");
+
+        await cartService.SaveCartToStorageAsync();
+
+        Navigation.NavigateTo("/checkout", forceLoad: true);
+    }
+
+    private async Task RedirectToAccount()
+    {
+        IsCartOpen = false;
+
+        await cartService.SaveCartToStorageAsync();
+
+        Navigation.NavigateTo("/account", forceLoad: true);
+    }
+
+    private async Task HandleLogin()
+    {
+        IsCartOpen = false;
+
+        await cartService.SaveCartToStorageAsync();
+
+        Navigation.NavigateTo("/login", forceLoad: true);
+    }
+
+    private async Task HandleLogout()
+    {
+        IsCartOpen = false;
+
+        await cartService.SaveCartToStorageAsync();
+
+        Navigation.NavigateTo("/logout", forceLoad: true);
     }
 
     public void Dispose()

MidrandBookshop/Components/Pages/CartReview.razor.cs

@@ -5,6 +5,8 @@ namespace MidrandBookshop.Components.Pages;
 
 public partial class CartReview(CartService cartService)
 {
+    [Inject] public IToastService ToastService { get; set; } = default!;
+
     protected Cart ShoppingCart => cartService?.ShoppingCart!;
 
     protected async void IncreaseQty(CartItem item)
@@ -32,5 +34,7 @@ public partial class CartReview(CartService cartService)
         cartService.RemoveOneItem(item.Price!.Id);
 
         await cartService.SaveCartToStorageAsync();
+
+        ToastService.ShowSuccess($"Removed {item.Product!.Name} from cart", "Cart Changed");
     }
 }

MidrandBookshop/Components/Pages/Checkout.razor

@@ -3,74 +3,248 @@
 @rendermode InteractiveServer
 @attribute [Authorize]
 
-<div class="container py-5">
-    <h2 class="fw-bold mb-4">Checkout</h2>
-    <div class="row g-5">
-        <div class="col-lg-8">
-            <div class="card border-0 shadow-sm p-4 mb-4">
-                <h5 class="fw-bold mb-3">Your Items</h5>
-                @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.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>
-                                <span class="px-2 pt-1">@item.Quantity</span>
-                                <button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, 1)">+</button>
+<div class="checkout-page-container py-5">
+
+    <!-- HANDOVER MODAL VIEW OVERLAY -->
+    @if (IsProcessing)
+    {
+        <div class="processing-screen-overlay">
+            <div class="processing-card-box">
+                <div class="mb-1">
+                    <svg class="payment-vector-loader" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <circle class="loader-track" cx="12" cy="12" r="10" />
+                        <path class="loader-handshake-ring" d="M12 2a10 10 0 0 1 10 10" />
+                    </svg>
+                </div>
+                <div>
+                    <h4 class="fw-bold text-dark font-monospace text-uppercase tracking-wider mb-2" style="font-size: 1.1rem;">
+                        Securing Your Order
+                    </h4>
+                    <p class="text-muted small mb-0 px-2" style="line-height: 1.5; font-size: 0.85rem;">
+                        Please stand by. We are preparing your payment portal and transferring you securely to PayFast.
+                    </p>
+                </div>
+                <div class="secure-badge">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <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>
+                    <span>Bank-Grade 256-Bit SSL Connection</span>
+                </div>
+            </div>
+        </div>
+    }
+
+    <!-- Header Presentation Details -->
+    <header class="checkout-header mb-5">
+        <span class="text-uppercase font-monospace text-muted tracking-wider small d-block mb-1">Secure Checkout</span>
+        <h1 class="checkout-main-title fw-bold">Review Your Order</h1>
+    </header>
+
+    @if (ShoppingCart.Items.Any() == false)
+    {
+        <!-- EMPTY STATE TRAP: Displays when cart hits zero items -->
+        <div class="checkout-section-panel text-center py-5 my-4 d-flex flex-column align-items-center gap-3">
+            <div class="text-muted opacity-50">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <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>
+            <div>
+                <h4 class="fw-bold text-dark mb-1">Your cart is empty</h4>
+                <p class="text-muted small mb-0">You cannot proceed to payment without selected titles.</p>
+            </div>
+            <a href="/" class="btn btn-premium-action px-4 py-2 mt-2 text-decoration-none" style="font-size: 0.85rem;">
+                Browse Book Catalogue
+            </a>
+        </div>
+    }
+    else
+    {
+        <div class="row g-5">
+            <!-- Left Side Forms Layout Matrix -->
+            <div class="col-lg-7">
+
+                <!-- SECTION A: SHOPPING CART MANIFEST LIST -->
+                <section class="checkout-section-panel mb-4">
+                    <div class="panel-header-row d-flex justify-content-between align-items-center mb-4">
+                        <h5 class="panel-title fw-bold mb-0">Your Selection</h5>
+                        <span class="badge rounded-pill bg-light text-dark font-monospace px-2.5 py-1.5 border">
+                            @ShoppingCart.Items.Count Items
+                        </span>
+                    </div>
+
+                    <div class="checkout-items-stack">
+                        @foreach (var item in ShoppingCart.Items)
+                        {
+                            <div class="checkout-item-row py-3 d-flex align-items-center justify-content-between">
+                                <div class="item-meta-details pe-4">
+                                    <h6 class="item-product-name fw-bold mb-1 text-dark">@item.Product!.Name</h6>
+                                    <span class="item-author-label small text-muted font-monospace">
+                                        By @($"{item.Author!.Name} {item.Author.LastName}")
+                                    </span>
+                                </div>
+                                <div class="item-interactive-actions d-flex align-items-center gap-3 flex-shrink-0">
+                                    <div class="premium-quantity-stepper">
+                                        <button class="step-btn" @onclick="() => ChangeQuantity(item, -1)" aria-label="Decrease quantity">−</button>
+                                        <span class="step-value font-monospace">@item.Quantity</span>
+                                        <button class="step-btn" @onclick="() => ChangeQuantity(item, 1)" aria-label="Increase quantity">+</button>
+                                    </div>
+                                    <button class="btn-clean-remove font-monospace text-uppercase" @onclick="() => RemoveFromCart(item)">
+                                        Remove
+                                    </button>
+                                </div>
                             </div>
-                            <button class="btn btn-sm text-danger" @onclick="() => RemoveFromCart(item)">Remove</button>
+                        }
+                    </div>
+                </section>
+
+                <!-- SECTION B: FULFILLMENT SELECTABLE METHODS -->
+                <section class="checkout-section-panel mb-4">
+                    <h5 class="panel-title fw-bold mb-4">Fulfillment Option</h5>
+
+                    <div class="premium-radio-group d-flex flex-column gap-3">
+
+                        <!-- Collect Card Structure -->
+                        <div class="premium-selectable-card @(ShippingCost == 0 ? "active" : "")">
+                            <input class="form-check-input visual-hidden" type="radio" name="shipping" id="pickup"
+                                   checked=@(ShippingCost == 0) @onclick="() => ShippingCost = 0">
+                            <div class="card-indicator-circle"></div>
+                            <label class="card-text-block m-0 context-clickable" for="pickup">
+                                <span class="card-label-title fw-bold d-block text-dark">Collect from Midrand Bookshop</span>
+                                <span class="card-label-desc text-muted small">Corner of Church & Third Roads. Ready within 2 hours.</span>
+                            </label>
+                            <span class="card-price-tag font-monospace ms-auto text-success fw-bold">FREE</span>
+                        </div>
+
+                        <!-- Courier Card Structure -->
+                        <div class="premium-selectable-card @(ShippingCost == 60 ? "active" : "")">
+                            <input class="form-check-input visual-hidden" type="radio" name="shipping" id="delivery"
+                                   checked=@(ShippingCost == 60) @onclick="() => ShippingCost = 60">
+                            <div class="card-indicator-circle"></div>
+                            <label class="card-text-block m-0 context-clickable" for="delivery">
+                                <span class="card-label-title fw-bold d-block text-dark">Door-to-Door Home Delivery</span>
+                                <span class="card-label-desc text-muted small">Dispatched via reliable overnight courier straight to your steps.</span>
+                            </label>
+                            <span class="card-price-tag font-monospace ms-auto text-dark fw-bold">R 60.00</span>
                         </div>
                     </div>
-                }
+                </section>
+
+                <!-- SECTION C: ADDITIONAL COURIER DELIVERY NOTES -->
+                <section class="checkout-section-panel mb-4">
+                    <div class="d-flex justify-content-between align-items-baseline mb-2">
+                        <h5 class="panel-title fw-bold mb-0">Delivery Instructions</h5>
+                        <span class="text-muted font-monospace extra-small opacity-75">Optional</span>
+                    </div>
+                    <p class="text-muted small mb-3">
+                        Add any specific details for our dispatch team (e.g., gate access codes, complex navigation, or safe drop-off preferences).
+                    </p>
+                    <div class="premium-textarea-wrapper">
+                        <textarea class="form-control premium-plaintext-field"
+                                  rows="3"
+                                  placeholder="Type your notes or courier instructions here..."
+                                  @bind="OrderNotes"
+                                  maxlength="500">
+                        </textarea>
+                        <div class="text-end mt-1.5">
+                            <small class="font-monospace text-muted extra-small opacity-50">
+                                @(OrderNotes?.Length ?? 0) / 500 characters
+                            </small>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- SECTION D: BILLING ADDRESS EQUALITY SETTINGS -->
+                <section class="checkout-section-panel">
+                    <h5 class="panel-title fw-bold mb-3">Billing Settings</h5>
+                    <div class="premium-checkbox-wrapper d-flex align-items-center gap-3 p-3 border rounded-3">
+                        <input class="form-check-input custom-box-tick m-0" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
+                        <label class="checkbox-text-label small text-dark fw-medium m-0 context-clickable w-100 py-1" for="sameAsBilling">
+                            My billing address is the same as my shipping address
+                        </label>
+                    </div>
+                </section>
             </div>
 
-            <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">
-                    <input class="form-check-input" type="radio" name="shipping" id="pickup"
-                           checked=@(ShippingCost == 0) @onclick="() => ShippingCost = 0">
-                    <label class="form-check-label" for="pickup">Pickup from Bookshop (Free)</label>
-                </div>
-                <div class="form-check">
-                    <input class="form-check-input" type="radio" name="shipping" id="delivery"
-                           checked=@(ShippingCost == 60) @onclick="() => ShippingCost = 60">
-                    <label class="form-check-label" for="delivery">Home Delivery (R60.00)</label>
+            <!-- Right Side Sidebar Sticky Cost Summary -->
+            <div class="col-lg-5">
+                <div class="sticky-summary-card p-4 border">
+                    <h5 class="fw-bold text-dark font-monospace text-uppercase tracking-wider mb-4 small-summary-heading">Summary Breakdown</h5>
+
+                    <div class="price-summary-ledger d-flex flex-column gap-3">
+                        <div class="ledger-row d-flex justify-content-between">
+                            <span class="text-muted small">Items Subtotal</span>
+                            <span class="font-monospace text-dark fw-medium">R @ShoppingCart.TotalAmount.ToString("F2")</span>
+                        </div>
+
+                        <!-- VAT DISPLAY LOGIC SWITCH -->
+                        <div class="ledger-row d-flex justify-content-between align-items-center">
+                            @if (ShoppingCart.TotalVat > 0)
+                            {
+                                <span class="text-muted small">Value Added Tax (VAT 15%)</span>
+                                <span class="font-monospace text-dark fw-medium">R @ShoppingCart.TotalVat.ToString("F2")</span>
+                            }
+                            else
+                            {
+                                <span class="text-muted small">Value Added Tax (VAT)</span>
+                                <small class="text-danger fw-medium tracking-wide font-monospace" style="font-size: 0.78rem;">
+                                    (Price is VAT inclusive)
+                                </small>
+                            }
+                        </div>
+
+                        <div class="ledger-row d-flex justify-content-between">
+                            <span class="text-muted small">Fulfillment Courier Fee</span>
+                            <span class="font-monospace text-dark fw-medium">
+                                @if (ShippingCost == 0)
+                                {
+                                    <span class="text-success fw-bold">FREE</span>
+                                }
+                                else
+                                {
+                                    <span>R @($"{ShippingCost:F2}")</span>
+                                }
+                            </span>
+                        </div>
+
+                        <hr class="summary-divider my-2" />
+
+                        <div class="ledger-row d-flex justify-content-between align-items-baseline mb-4">
+                            <span class="fw-bold text-dark">Total Due Amount</span>
+                            <div class="text-end">
+                                <span class="font-monospace text-dark fw-bold h3 mb-0 d-block tracking-tight">
+                                    R @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")
+                                </span>
+                                <small class="text-muted opacity-60 font-monospace extra-small">ZAR Currency</small>
+                            </div>
+                        </div>
+                    </div>
+
+                    <button class="btn btn-premium-action w-100 py-3.5 d-flex align-items-center justify-content-center gap-2"
+                            disabled="@IsProcessing"
+                            @onclick="PayNow">
+                        <span>Pay Now</span>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                            <polyline points="12 5 19 12 12 19"></polyline>
+                        </svg>
+                    </button>
                 </div>
             </div>
 
-            <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>
-            </div>
+            <!-- Automatic PayFast Form Handover Context -->
+            @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 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 @ShoppingCart.TotalAmount.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: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 @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")</h4>
-                </div>
-                <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>

MidrandBookshop/Components/Pages/Checkout.razor.cs

@@ -1,13 +1,10 @@
 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;
 
@@ -19,36 +16,39 @@ public partial class Checkout()
     [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!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+    [Inject] public IToastService ToastService { 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;
 
+    public string? OrderNotes { get; set; }
     private Dictionary<string, string> CheckoutPayload { get; set; } = [];
 
     protected override async Task OnInitializedAsync()
     {
-        AuthState = await AuthStateProvider.GetAuthenticationStateAsync();
-        User = AuthState!.User;
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        User = authState!.User;
 
         Navigation.LocationChanged += OnLocationChanged;
         CartService.OnCartChanged += CartService_OnCartChanged;
+
+        if (CartService.ShoppingCart.Items.Count == 0)
+            await CartService.LoadCartFromStorageAsync();
     }
 
     private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
 
     private void OnLocationChanged(object? sender, LocationChangedEventArgs e) => StateHasChanged();
 
-    private async void ChangeQuantity(CartItem item, int delta)
+    private async Task ChangeQuantity(CartItem item, int delta)
     {
         var peekQuantity = item.Quantity + delta;
 
@@ -59,7 +59,7 @@ public partial class Checkout()
         await CartService.SaveCartToStorageAsync();
     }
 
-    private async void RemoveFromCart(CartItem item)
+    private async Task RemoveFromCart(CartItem item)
     {
         CartService.RemoveOneItem(item.Price!.Id);
 
@@ -68,41 +68,40 @@ public partial class Checkout()
 
     private async Task PayNow(MouseEventArgs args)
     {
-        if (IsProcessing) return;
+        if (IsProcessing)
+        {
+            ToastService.ShowWarning("Please wait, completing your payment", "Busy...");
+
+            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!;
+            StateHasChanged();
 
-            // 2. Create customer if ShoppingCart.CustomerId is null
-            if (ShoppingCart.CustomerId == null)
+            Result<long> orderResult;
+
+            var customerId = (long)ShoppingCart.CustomerId!;
+
+            if (!ShoppingCart.OrderId.HasValue)
             {
-                var existingCustomer = await CustomerService.GetCustomerAsync(customerEmail);
+                CreateOrder request = new(ShoppingCart.TotalAmount, null);
 
-                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;
-                }
+                orderResult = await OrderService.CreateOrderAsync(customerId, request, CancellationToken);
+                ShoppingCart.OrderId = orderResult.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 = [];
 
+            var orderId = (long)ShoppingCart.OrderId;
+
+            await OrderService.ClearOrderItemsAsync(orderId, CancellationToken);
+
             foreach (var item in ShoppingCart.Items)
             {
-                var bookRequest = await BooksService.GetBookByProductIdAsync(item.Price!.Id);
+                var bookRequest = await BooksService.GetBookByProductIdAsync(item.Price!.Id, CancellationToken);
 
                 if (bookRequest.IsSuccess)
                 {
@@ -111,33 +110,50 @@ public partial class Checkout()
                 }
             }
 
-            var paymentGen = await PaymentService.CreatePaymentAsync(ShoppingCart.TotalAmount, order.Value, HashService.HashEncodeLongId(order.Value).Value);
-            var merchantPaymentId = HashService.HashEncodeLongId(order.Value).Value;
+            var orderHash = HashService.HashEncodeLongId(orderId).Value;
+            var paymentGen = await PaymentService.CreatePaymentAsync(ShoppingCart.TotalAmount, orderId, orderHash, CancellationToken);
 
-            await PaymentService.WriteLedgerEntryAsync(new CreateLedgerEntry
+            long paymentId = 0;
+
+            if (paymentGen.IsSuccess) paymentId = paymentGen.Value;
+
+            if (paymentGen.IsFailed)
             {
-                OrderId = order.Value,
-                CustomerId = ShoppingCart.CustomerId.Value,
+                var paymentFetch = await PaymentService.GetOrderPaymentAsync(orderId, CancellationToken);
+
+                if (paymentFetch.IsFailed)
+                {
+                    ToastService.ShowError("Failed to get fetch your previously made payment", "Payment Check");
+
+                    return;
+                }
+
+                paymentId = paymentFetch.Value.Id;
+            }
+
+            CreateLedgerEntry ledgerRequest = new()
+            {
+                OrderId = orderId,
+                CustomerId = customerId,
                 PaymentGatewayId = 1,
-                PaymentGatewayReference = merchantPaymentId,
-                PaymentId = paymentGen.Value,
+                PaymentGatewayReference = orderHash,
+                PaymentId = paymentId,
                 Status = LiteCharms.Features.LedgerStatuses.Sent,
-            });
+            };
+            await PaymentService.WriteLedgerEntryAsync(ledgerRequest, CancellationToken);
 
-            var addItemsResult = await OrderService.AddItemsToOrderAsync(order.Value, [.. orderItems]);
-
-            // 4. Generate the signed Payfast form payload using your backend service            
+            var addItemsResult = await OrderService.AddItemsToOrderAsync(orderId, [.. orderItems], CancellationToken);
             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" },
+                { "return_url", $"{hostAddress}/payment-success?reference={orderHash}" },
+                { "cancel_url", $"{hostAddress}/payment-failed?reference={orderHash}" },
                 { "notify_url", "https://api.uat.midrandbooks.co.za/v1/payments/payfast/confirm" },
-                { "email_address", customerEmail },
-                { "m_payment_id", merchantPaymentId },
+                { "email_address", User?.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value! },
+                { "m_payment_id", orderHash },
                 { "amount", ShoppingCart.TotalAmount.ToString("F2", CultureInfo.InvariantCulture) },
                 { "item_name", "MidrandBooks Sale" },
             };
@@ -147,11 +163,12 @@ public partial class Checkout()
 
             StateHasChanged();
 
-            // 6. Execute programmatic submit directly into the sandbox
             await JSRuntime.InvokeVoidAsync("eval", "document.getElementById('payfastForm').submit();");
         }
-        catch
+        catch (Exception ex)
         {
+            ToastService.ShowError($"Failed to perform checkout: {ex.Message}", "Checkout");
+
             IsProcessing = false;
             StateHasChanged();
         }

MidrandBookshop/Components/Pages/Checkout.razor.css

@@ -0,0 +1,347 @@
+/* ==========================================================================
+   Midrand Books — Checkout Layout Polish & Tightening
+   ========================================================================== */
+
+/* --- 🛠️ 1. Global Page Wrapper Boundary Constraints --- */
+.checkout-page-container {
+    max-width: 1140px;
+    margin: 0 auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+}
+
+/* --- 2. Page Typography & Headers --- */
+.checkout-header {
+    margin-bottom: 2.5rem !important;
+}
+
+.checkout-main-title {
+    font-size: 2.25rem;
+    letter-spacing: -0.03em;
+    color: #111111;
+}
+
+.tracking-wider {
+    letter-spacing: 0.12em;
+}
+
+/* --- 3. Custom Structural Content Panels --- */
+.checkout-section-panel {
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 12px;
+    padding: 2rem;
+}
+
+.panel-title {
+    font-size: 1.1rem;
+    letter-spacing: -0.01em;
+    color: #111111;
+}
+
+/* --- 🛠️ 4. Items Manifest Row & Stepper Controls --- */
+.checkout-items-stack .checkout-item-row {
+    display: flex;
+    align-items: center; /* Locks elements on a clean vertical axis line */
+    justify-content: space-between;
+    gap: 2rem;
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
+}
+
+    .checkout-items-stack .checkout-item-row:last-child {
+        border-bottom: none;
+    }
+
+.item-meta-details {
+    max-width: 65%; /* Brounds long item titles elegantly */
+}
+
+.item-product-name {
+    font-size: 0.95rem;
+    line-height: 1.4;
+    color: #1A1A1A;
+}
+
+.premium-quantity-stepper {
+    display: inline-flex;
+    align-items: center;
+    background-color: #F8F9FA;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 30px;
+    padding: 3px;
+}
+
+    .premium-quantity-stepper .step-btn {
+        background: none;
+        border: none;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1rem;
+        color: #555555;
+        border-radius: 50%;
+        transition: background-color 0.2s ease, color 0.2s ease;
+    }
+
+        .premium-quantity-stepper .step-btn:hover {
+            background-color: #FFFFFF;
+            color: #000000;
+        }
+
+    .premium-quantity-stepper .step-value {
+        min-width: 28px;
+        text-align: center;
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: #111111;
+    }
+
+.btn-clean-remove {
+    background: none;
+    border: none;
+    color: #DC3545;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+}
+
+    .btn-clean-remove:hover {
+        background-color: rgba(220, 53, 69, 0.06);
+    }
+
+/* --- 5. Interactive Selectable Radio Selection Cards --- */
+.visual-hidden {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.premium-selectable-card {
+    display: flex;
+    align-items: center;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+    padding: 1.25rem;
+    cursor: pointer;
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    background-color: #FFFFFF;
+}
+
+    .premium-selectable-card:hover {
+        border-color: #111111;
+        background-color: #FAFBFB;
+    }
+
+    .premium-selectable-card.active {
+        border-color: #000000;
+        box-shadow: inset 0 0 0 1px #000000;
+        background-color: #FFFFFF;
+    }
+
+.card-indicator-circle {
+    width: 16px;
+    height: 16px;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 50%;
+    margin-right: 1.25rem;
+    position: relative;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.premium-selectable-card.active .card-indicator-circle {
+    border-color: #000000;
+    background-color: #000000;
+}
+
+    .premium-selectable-card.active .card-indicator-circle::after {
+        content: '';
+        position: absolute;
+        width: 6px;
+        height: 6px;
+        background-color: #FFFFFF;
+        border-radius: 50%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+.card-label-title {
+    font-size: 0.9rem;
+    line-height: 1.3;
+}
+
+.card-label-desc {
+    font-size: 0.78rem !important;
+}
+
+.card-price-tag {
+    font-size: 0.85rem;
+    letter-spacing: -0.01em;
+}
+
+/* --- 6. Form Checkbox Options --- */
+.context-clickable {
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+    .context-clickable:hover {
+        background-color: #FAFBFB;
+    }
+
+.custom-box-tick {
+    cursor: pointer;
+}
+
+/* --- 🛠️ 7. Sticky Right Sidebar Order Ledger --- */
+.sticky-summary-card {
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.08) !important;
+    border-radius: 12px;
+    position: sticky;
+    top: 120px; /* Safe breathing room underneath the global nav header */
+    box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.03);
+}
+
+.small-summary-heading {
+    font-size: 0.78rem;
+    color: #666666;
+}
+
+.price-summary-ledger .ledger-row {
+    padding: 0.25rem 0;
+}
+
+.summary-divider {
+    border-color: rgba(0, 0, 0, 0.06);
+    opacity: 1;
+}
+
+.extra-small {
+    font-size: 0.68rem;
+}
+
+/* --- 8. Core Checkout Action Button --- */
+.btn-premium-action {
+    background-color: #111111;
+    color: #FFFFFF;
+    border: none;
+    border-radius: 50px;
+    font-weight: 600;
+    font-size: 0.95rem;
+    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+    .btn-premium-action:hover:not(:disabled) {
+        background-color: #222222;
+        transform: translateY(-1px);
+        box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.15);
+    }
+
+    .btn-premium-action:disabled {
+        background-color: #CCCCCC;
+        color: #888888;
+        cursor: not-allowed;
+    }
+
+/* ==========================================================================
+   Full-Screen Handover Processing Overlay
+   ========================================================================== */
+.processing-screen-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #FFFFFF;
+    z-index: 3000;
+}
+
+.processing-card-box {
+    max-width: 420px;
+    padding: 2rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.payment-vector-loader {
+    width: 48px;
+    height: 48px;
+}
+
+.loader-track {
+    stroke: rgba(0, 0, 0, 0.06);
+    stroke-width: 2.5;
+    fill: none;
+}
+
+.loader-handshake-ring {
+    stroke: #111111;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    fill: none;
+    transform-origin: center;
+    animation: spinHandoverLoop 1s linear infinite;
+}
+
+.secure-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: #666666;
+    opacity: 0.6;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    padding: 0.35rem 0.85rem;
+    border-radius: 50px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+@keyframes spinHandoverLoop {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* --- 9. Premium Plaintext Field & Textarea Structure --- */
+.premium-textarea-wrapper {
+    position: relative;
+}
+
+.premium-plaintext-field {
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+    padding: 0.85rem 1rem;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    color: #1A1A1A;
+    resize: none; /* Disables ugly drag handles to maintain design proportions */
+    transition: all 0.2s ease;
+}
+
+    .premium-plaintext-field:focus {
+        background-color: #FFFFFF;
+        border-color: #000000;
+        box-shadow: none; /* Strip standard blue Bootstrap glowing halos */
+        outline: none;
+    }
+
+    .premium-plaintext-field::placeholder {
+        color: #A0A0A0;
+        font-size: 0.88rem;
+    }

MidrandBookshop/Components/Pages/Home.razor.cs

@@ -2,6 +2,7 @@
 using LiteCharms.Features.MidrandBooks.AuthorBooks;
 using LiteCharms.Features.MidrandBooks.Authors;
 using LiteCharms.Features.MidrandBooks.Categories;
+using LiteCharms.Features.MidrandBooks.Payments;
 using LiteCharms.Features.MidrandBooks.Products;
 using LiteCharms.Features.MidrandBooks.Products.Models;
 using LiteCharms.Features.Models;
@@ -15,6 +16,9 @@ public partial class Home : ComponentBase
     [Inject] private AuthorService AuthorService { get; set; } = default!;
     [Inject] private CategoryService CategoryService { get; set; } = default!;
     [Inject] private NavigationManager Navigation { get; set; } = default!;
+    [Inject] private HydrationService HydrationService { get; set; } = default!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+    [Inject] private CartService CartService { get; set; } = default!;
 
     [SupplyParameterFromQuery(Name = "q")] public string? SharedSearchQuery { get; set; }
     [SupplyParameterFromQuery] public long? AuthorId { get; set; }
@@ -95,6 +99,21 @@ public partial class Home : ComponentBase
 
     private bool HasMoreItems => FilteredData.Count() > VisibleCount;
 
+    protected override async Task OnInitializedAsync()
+    {
+        if (CartService.ShoppingCart.Items.Count == 0)
+            await CartService.LoadCartFromStorageAsync();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender == false && HydrationService.CartHydrated == false)
+        {
+            if(!CartService.ShoppingCart.CustomerId.HasValue)
+                await HydrationService.EnsureCustomerExistsAsync(CancellationToken);
+        }
+    }
+
     protected override async Task OnParametersSetAsync() => await LoadCatalogDataAsync();
 
     private async Task LoadCatalogDataAsync()

MidrandBookshop/Components/Pages/PaymentFailed.razor

@@ -1,5 +1,6 @@
 @page "/payment-failed"
 @rendermode InteractiveServer
+@inject NavigationManager Navigation
 @attribute [Authorize]
 
 <div class="container py-5">
@@ -13,18 +14,16 @@
                         <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>
+                <h1 class="fw-bold mb-3">Payment Cancelled</h1>
+                <p class="text-muted fs-5">We couldn't process your transaction. Don't worry, no money was deducted from your account.</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>
+                    <p class="mb-0 fs-6 text-dark mt-1">The order was cancelled / 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="d-grid gap-3 mt-5">                
                 <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>
@@ -35,7 +34,7 @@
                 </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>
+            <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>shop@litecharms.co.za</strong>.</p>
         </div>
     </div>
 </div>

MidrandBookshop/Components/Pages/PaymentFailed.razor.cs

@@ -0,0 +1,72 @@
+using LiteCharms.Features;
+using LiteCharms.Features.Hasher;
+using LiteCharms.Features.MidrandBooks.Customers;
+using LiteCharms.Features.MidrandBooks.Orders;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class PaymentFailed
+{
+    [Inject] public CartService CartService { get; set; } = default!;
+    [Inject] public OrderService OrderService { get; set; } = default!;
+    [Inject] private CustomerService CustomerService { get; set; } = default!;
+    [Inject] public PaymentService PaymentService { get; set; } = default!;
+    [Inject] public HashService HashService { get; set; } = default!;
+    [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+
+    private ClaimsPrincipal? User { get; set; }
+
+    [Parameter]
+    [SupplyParameterFromQuery(Name = "reference")]
+    public string? PaymentReference { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        User = authState!.User;
+
+        if (User?.Identity?.IsAuthenticated == false) Navigation.NavigateTo("/login");
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender) return;
+
+        long orderId = HashService.DecodeLongIdHash(PaymentReference!).Value;
+
+        var customerEmail = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value!;
+
+        var customerFetch = await CustomerService.GetCustomerAsync(customerEmail, CancellationToken);
+
+        if (customerFetch.IsFailed) return;
+
+        long customerId = customerFetch.Value.Id;
+
+        var orderUpdateResult = await OrderService.UpdateOrderStatusAsync(orderId, OrderStatus.Cancelled, CancellationToken);
+
+        if (orderUpdateResult.IsFailed) return;
+
+        var paymentIdFetch = await PaymentService.GetOrderPaymentAsync(orderId, CancellationToken);
+
+        if (paymentIdFetch.IsFailed) return;
+
+        await PaymentService.WriteLedgerEntryAsync(new CreateLedgerEntry
+        {
+            CustomerId = customerId,
+            OrderId = orderId,
+            PaymentGatewayId = 1,
+            PaymentGatewayReference = PaymentReference,
+            PaymentId = paymentIdFetch.Value.Id,
+            Status = LedgerStatuses.Cancelled
+
+        }, CancellationToken);
+
+        CartService.Clear();
+        CartService.ShoppingCart.OrderId = null;
+        await CartService.SaveCartToStorageAsync();
+        CartService.NotifyStateChanged();
+    }
+}

MidrandBookshop/Components/Pages/PaymentSuccess.razor

@@ -1,5 +1,6 @@
 @page "/payment-success"
 @rendermode InteractiveServer
+@inject NavigationManager Navigation
 @attribute [Authorize]
 
 <div class="container py-5">
@@ -16,7 +17,7 @@
                 <p class="text-muted fs-5">Thank you for shopping with Midrand Books. Your order has been received and is being processed.</p>
                 <div class="bg-light p-3 rounded mt-4">
                     <p class="mb-0 text-muted small text-uppercase fw-bold">Order Number</p>
-                    <h5 class="fw-bold mb-0">#MB-2026-8834</h5>
+                    <h5 class="fw-bold mb-0">@PaymentReference</h5>
                 </div>
             </div>
 
@@ -27,12 +28,12 @@
                         <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>
+                        <a href="/account" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
                     </div>
                 </div>
             </div>
 
-            <p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>user@email.com</strong>.</p>
+            <p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>@CustomerEmail</strong>.</p>
         </div>
     </div>
 </div>

MidrandBookshop/Components/Pages/PaymentSuccess.razor.cs

@@ -0,0 +1,70 @@
+using LiteCharms.Features;
+using LiteCharms.Features.Hasher;
+using LiteCharms.Features.MidrandBooks.Customers;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class PaymentSuccess
+{
+    [Inject] private CartService CartService { get; set; } = default!;
+    [Inject] private CustomerService CustomerService { get; set; } = default!;
+    [Inject] private PaymentService PaymentService { get; set; } = default!;
+    [Inject] private HashService HashService { get; set; } = default!;
+    [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+    [Inject] public IToastService ToastService { get; set; } = default!;
+
+    [Parameter]
+    [SupplyParameterFromQuery(Name = "reference")]
+    public string? PaymentReference { get; set; }
+
+    private ClaimsPrincipal? User { get; set; }
+
+    private string? CustomerEmail { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        User = authState!.User;
+
+        if (User?.Identity?.IsAuthenticated == false) Navigation.NavigateTo("/login");
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender) return;
+
+        long orderId = HashService.DecodeLongIdHash(PaymentReference!).Value;
+        string orderHash = HashService.HashEncodeLongId(orderId).Value;
+
+        CustomerEmail = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value!;
+
+        var customerFetch = await CustomerService.GetCustomerAsync(CustomerEmail, CancellationToken);
+
+        if (customerFetch.IsFailed) return;
+
+        long customerId = customerFetch.Value.Id;
+
+        var paymentIdFetch = await PaymentService.GetOrderPaymentAsync(orderId, CancellationToken);
+
+        if (paymentIdFetch.IsFailed) return;
+
+        await PaymentService.WriteLedgerEntryAsync(new CreateLedgerEntry
+        {
+            CustomerId = customerId,
+            OrderId = orderId,
+            PaymentGatewayId = 1,
+            PaymentGatewayReference = orderHash,
+            PaymentId = paymentIdFetch.Value.Id,
+            Status = LedgerStatuses.Changed
+
+        }, CancellationToken);
+
+        CartService.Clear();
+        CartService.ShoppingCart.OrderId = null;
+        await CartService.SaveCartToStorageAsync();
+        CartService.NotifyStateChanged();
+    }
+}

MidrandBookshop/HydrationService.cs

@@ -0,0 +1,116 @@
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Customers;
+using LiteCharms.Features.MidrandBooks.Customers.Models;
+using LiteCharms.Features.MidrandBooks.Orders;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+using LiteCharms.Features.MidrandBooks.Products;
+
+namespace MidrandBookshop;
+
+public sealed class HydrationService(AuthenticationStateProvider authStateProvider, CustomerService customerService,
+    ProductService productService, OrderService orderService, BooksService booksService, AuthorService authorService, 
+    CartService cartService)
+{
+    private Cart ShoppingCart => cartService.ShoppingCart;
+
+    private AuthenticationState? AuthState { get; set; }
+    private ClaimsPrincipal? User { get; set; }
+
+    public bool CartHydrated { get; set; }
+
+    public async Task EnsureCustomerExistsAsync(CancellationToken cancellationToken = default)
+    {
+        if (ShoppingCart.CustomerId > 0) return;
+
+        AuthState = await authStateProvider.GetAuthenticationStateAsync();
+        User = AuthState!.User;
+
+        if (User?.Identity?.IsAuthenticated == false) return;
+
+        var email = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value!;
+
+        var existingCustomer = await customerService.GetCustomerAsync(email, cancellationToken);
+
+        if (existingCustomer.IsSuccess)
+            ShoppingCart.CustomerId = existingCustomer.Value.Id;
+
+        if (existingCustomer.IsFailed)
+        {
+            var name = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Name)?.Value ?? string.Empty;
+            var lastname = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Surname)?.Value ?? string.Empty;
+            var mobile = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.MobilePhone)?.Value ?? string.Empty;
+
+            var customerCreate = await customerService.CreateCustomerAsync(new CreateCustomer { Email = email }, cancellationToken);
+
+            if (customerCreate.IsSuccess && !string.IsNullOrWhiteSpace(name))
+            {
+                ShoppingCart.CustomerId = customerCreate.Value;
+
+                if (!string.IsNullOrWhiteSpace(name))
+                    await customerService.CreateCustomerContactAsync((long)ShoppingCart.CustomerId, new CreateCustomerContact
+                    {
+                        Email = email,
+                        Name = name,
+                        LastName = lastname,
+                        Phone = mobile,
+                        Type = LiteCharms.Features.ContactTypes.Personal
+                    }, cancellationToken);
+            }
+        }
+    }
+
+    public async Task RehydrateCartFromPendingOrderAsync(CancellationToken cancellationToken = default)
+    {
+        if (User?.Identity?.IsAuthenticated == false) return;
+
+        if (ShoppingCart.OrderId.HasValue && ShoppingCart.CustomerId.HasValue)
+        {
+            cartService.CalculateTotalPrice();
+            CartHydrated = true;
+
+            return;
+        }
+
+        var orderResult = await orderService.GetPendingOrderAsync((long)ShoppingCart.CustomerId!, cancellationToken);
+
+        if (orderResult.IsFailed) return;
+
+        if(orderResult.Value.Id == ShoppingCart.OrderId)
+        {
+            cartService.CalculateTotalPrice();
+            CartHydrated = true;
+
+            return;
+        }
+
+        var orderItemsResult = await orderService.GetOrderItemsAsync((long)orderResult.Value.Id!, cancellationToken);
+
+        ShoppingCart.OrderId = orderResult.Value.Id;
+
+        if(orderItemsResult.IsFailed) return;
+
+        foreach (var item in orderItemsResult.Value)
+        {
+            var priceFetchResult = await productService.GetProductPriceAsync(item.ProductPriceId, cancellationToken);
+
+            if (priceFetchResult.IsFailed) continue;
+
+            var bookFetchResult = await booksService.GetBookByProductIdAsync(priceFetchResult.Value.ProductId, cancellationToken);
+
+            if (bookFetchResult.IsFailed) continue;
+
+            var authorFetchResult = await authorService.GetAuthorAsync(bookFetchResult.Value.AuthorId, cancellationToken);
+
+            if (authorFetchResult.IsFailed) continue;
+            
+            if(!ShoppingCart.Items.Any(i => i.Price!.Id == item.ProductPriceId))
+                cartService.AddItem(priceFetchResult.Value, bookFetchResult.Value.Product!, authorFetchResult.Value);
+        }
+
+        CartHydrated = true;
+
+        await cartService.SaveCartToStorageAsync();
+    }
+}

MidrandBookshop/MidrandBookshop.csproj

@@ -18,13 +18,13 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="LiteCharms.Features" Version="1.132.0" />
+    <PackageReference Include="LiteCharms.Features" Version="1.137.0" />
   </ItemGroup>
 
   <!-- UI -->
   <ItemGroup>
     <PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
-    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.132.0" />
+    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.137.0" />
     
     <!-- Global Usings -->
     <Using Include="Blazored.Toast.Services" />
@@ -62,6 +62,7 @@
     <Using Include="Microsoft.AspNetCore.Components.Web" />
     <Using Include="Microsoft.AspNetCore.WebUtilities" />
     <Using Include="Microsoft.AspNetCore.Components" />
+    <Using Include="System.Security.Cryptography.X509Certificates" />
   </ItemGroup>
 
 </Project>

MidrandBookshop/Program.cs

@@ -1,109 +1,51 @@
 using LiteCharms.Features.Extensions;
-using LiteCharms.Features.Mediator;
-using LiteCharms.Features.MidrandBooks.Extensions;
-using LiteCharms.Features.MidrandBooks.Payments;
 using LiteCharms.Features.Postgres;
+using MidrandBookshop;
 using MidrandBookshop.Components;
-using System.Security.Cryptography.X509Certificates;
 using static LiteCharms.Features.Extensions.Quartz;
 
 var builder = WebApplication.CreateBuilder(args);
 
-builder.Services.AddAntiforgery();
-
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-
 builder.AddMonitoring();
-builder.Services.AddEndpointsApiExplorer();
-
-builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
-builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
-
-builder.Services.AddQuartzSchedulerClient(MidrandShopSchedulerName, builder.Configuration);
-
-builder.Services.AddMediator();
-builder.Services.AddEmailServices(builder.Configuration);
-builder.Services.AddEmailServiceBus();
-
-builder.Services.AddHttpClient();
-builder.Services.AddScoped<CartService>();
-builder.Services.AddShopServices(includeLocalStorage: true);
-builder.Services.AddHashServices(builder.Configuration);
-builder.Services.AddPayfastServices(builder.Configuration);
-
-builder.Services.AddDataProtectionDatabase(builder.Configuration);
-builder.Services.AddMidrandShopDatabase(builder.Configuration);
-
-builder.Services.AddSecurityApiSdk(builder.Configuration);
-builder.Services.AddLiteCharmsWebSecurity(builder.Configuration);
-
-builder.Services.AddMidrandShopPostgresHealthCheck();
-builder.Services.AddMidrandShopQuartzHealthCheck();
-builder.Services.AddHealthChecksSupport(builder.Configuration);
-
-builder.Services.Configure<ForwardedHeadersOptions>(options =>
-{
-    options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
-    options.KnownProxies.Clear();
-});
+builder.Services.RegisterServices(builder.Configuration);
 
 var app = builder.Build();
 
-builder.WebHost.ConfigureKestrel(options =>
-{
-    var certBase64 = builder.Configuration["DataProtection:Certificate"];
-    var certPassword = builder.Configuration["DataProtection:Password"];
-
-    if (!string.IsNullOrWhiteSpace(certBase64))
-    {
-        var rawBytes = Convert.FromBase64String(certBase64);
-        var kestrelCert = X509CertificateLoader.LoadPkcs12(rawBytes, certPassword);
-
-        options.ListenAnyIP(8443, listenOptions =>
-        {
-            listenOptions.UseHttps(kestrelCert);
-        });
-    }
-    else
-        options.ListenAnyIP(8080);
-});
-
-app.UseForwardedHeaders();
-app.UseCookiePolicy();
-
-using var security = app.Services.CreateScope();
-{
-    var dataProtectionContext = security.ServiceProvider.GetRequiredService<DataProtectionDbContext>();
-
-    await dataProtectionContext.Database.MigrateAsync();
-}
-
-app.AddSecurityEndpoints();
-
-var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
-var scheduler = await schedulerFactory.GetScheduler(MidrandShopSchedulerName);
-
-if (!scheduler!.IsStarted)
-    await scheduler.Start();
-
 if (!app.Environment.IsDevelopment())
 {
     app.UseExceptionHandler("/Error", createScopeForErrors: true);
     app.UseHsts();
 }
 
+app.UseForwardedHeaders();
+app.UseHttpsRedirection();
+
+app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
 app.UseHealthChecks("/health", new HealthCheckOptions
 {
     ResponseWriter = HealthChecks.UI.Client.UIResponseWriter.WriteHealthCheckUIResponse
 });
 
-app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
-app.UseHttpsRedirection();
-
-app.UseAntiforgery();
-
 app.MapStaticAssets();
+app.UseCookiePolicy();
+
+app.UseAuthentication();
+app.UseAuthorization();
+app.UseAntiforgery();
+app.AddSecurityEndpoints();
+
+using (var security = app.Services.CreateScope())
+{
+    var dataProtectionContext = security.ServiceProvider.GetRequiredService<DataProtectionDbContext>();
+
+    await dataProtectionContext.Database.MigrateAsync();
+}
+
+var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
+var scheduler = await schedulerFactory.GetScheduler(MidrandShopSchedulerName);
+
+if (!scheduler!.IsStarted) await scheduler.Start();
+
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode();
 

MidrandBookshop/Properties/launchSettings.json

@@ -14,7 +14,7 @@
         "commandName": "Project",
         "dotnetRunMessages": true,
         "launchBrowser": false,
-        "applicationUrl": "https://localhost:8440;http://localhost:8083",
+        "applicationUrl": "https://localhost:8443;http://localhost:8080",
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development"
         }

MidrandBookshop/Setup.cs

@@ -0,0 +1,62 @@
+using LiteCharms.Features.Mediator;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.Extensions;
+using LiteCharms.Features.MidrandBooks.Extensions;
+using static LiteCharms.Features.Extensions.Quartz;
+
+namespace MidrandBookshop;
+
+public static class Setup
+{
+    public static IServiceCollection RegisterServices(this IServiceCollection services, IConfiguration configuration)
+    {
+        services.AddCancellationToken();
+        services.AddAntiforgery();
+
+        services.AddRazorComponents()
+            .AddInteractiveServerComponents();
+
+        services.AddBlazoredToast();
+        
+        services.AddEndpointsApiExplorer();
+
+        services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
+        services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
+
+        services.AddQuartzSchedulerClient(MidrandShopSchedulerName, configuration);
+
+        services.AddMediator();
+        services.AddEmailServices(configuration);
+        services.AddEmailServiceBus();
+
+        services.AddHttpClient();
+        services.AddScoped<CartService>();
+        services.AddScoped<HydrationService>();
+        services.AddShopServices(includeLocalStorage: true);
+        services.AddHashServices(configuration);
+        services.AddPayfastServices(configuration);
+
+        services.AddDataProtectionDatabase(configuration);
+        services.AddMidrandShopDatabase(configuration);
+
+        services.AddSecurityApiSdk(configuration);
+        services.AddLiteCharmsWebSecurity(configuration);
+
+        services.AddMidrandShopPostgresHealthCheck();
+        services.AddMidrandShopQuartzHealthCheck();
+        services.AddHealthChecksSupport(configuration);
+
+        services.Configure<ForwardedHeadersOptions>(options =>
+        {
+            options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
+
+            options.KnownProxies.Clear();
+            options.KnownIPNetworks.Clear();
+
+            options.ForwardLimit = null;
+            options.RequireHeaderSymmetry = false;
+        });
+
+        return services;
+    }
+}

MidrandBookshop/wwwroot/app.css

@@ -112,3 +112,113 @@ h1:focus, h2:focus, h3:focus, h4:focus, p:focus, div:focus, span:focus {
 [tabindex="-1"]:focus {
     outline: none !important;
 }
+
+/* ==========================================================================
+   Global Toast Notification Framework Extensions
+   ========================================================================== */
+
+.blazored-toast-container {
+    position: fixed;
+    /* 🛠️ Shift anchors from top-right to bottom-left */
+    bottom: 24px;
+    left: 24px;
+    top: auto;
+    right: auto;
+    z-index: 2000 !important;
+    display: flex;
+    flex-direction: column-reverse; /* 💡 Newest toasts will now stack cleanly on top of old ones */
+    gap: 12px;
+    max-width: 400px;
+    width: 100%;
+    pointer-events: none;
+}
+
+.blazored-toast {
+    display: flex;
+    align-items: center;
+    padding: 16px 20px;
+    border-radius: var(--mb-radius);
+    background-color: var(--mb-card-bg);
+    color: var(--mb-text-dark);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    font-family: var(--font-ui);
+    font-size: 0.9rem;
+    font-weight: 500;
+    animation: toastFadeIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.125) forwards;
+}
+
+/* Success Toast Core Variants */
+.blazored-toast-success {
+    border-left: 4px solid var(--mb-text-dark);
+}
+
+/* Error Toast Core Variants */
+.blazored-toast-error {
+    border-left: 4px solid var(--mb-accent-red);
+    color: var(--mb-accent-red);
+}
+
+.blazored-toast-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    flex-shrink: 0;
+}
+
+/* Entry Transition Keyframes */
+@keyframes toastFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-12px) scale(0.96);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.book-shadow {
+    filter: drop-shadow(5px 10px 15px rgba(0, 0, 0, 0.15)) drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+.sm-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: middle;
+}
+
+/* 🛠️ Micro-interactions for the header icon placement */
+.btn-cart-icon:hover {
+    transform: scale(1.08);
+    background-color: var(--mb-text-dark) !important;
+}
+
+    .btn-cart-icon:hover svg {
+        stroke: #FFFFFF !important;
+    }
+
+@keyframes toastFadeIn {
+    from {
+        opacity: 0;
+        transform: translateX(-24px) scale(0.95); /* Slide rightward into view */
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+.blazored-toast button.blazored-toast-close,
+.blazored-toast-close-icon {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}

midrandbooks-uat.yml

@@ -1,4 +1,3 @@
----
 apiVersion: v1
 kind: Namespace
 metadata:
@@ -11,7 +10,7 @@ metadata:
   namespace: midrandbooks-uat
 data:
   ASPNETCORE_ENVIRONMENT: "Development"  
-  ASPNETCORE_URLS: "https://0.0.0.0:8443"
+  ASPNETCORE_URLS: "http://0.0.0.0:8443"
   Monitoring__Address: "http://aspire-dashboard-service.aspire.svc.cluster.local:18889"
   Monitoring__ServiceName: "MidrandBooks.Uat"
   HasherSettings__MinHashLength: "11"
@@ -32,30 +31,6 @@ data:
   LiteCharmsClientSettings__Scope: "midrandbooks-api"
 ---
 apiVersion: v1
-kind: Secret
-metadata:
-  name: midrandbooks-secrets
-  namespace: midrandbooks-uat
-type: Opaque
-data:  
-  connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
-  dataprotection-connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
-  connection-string-quartz: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPXNjaGVkdWxlci1kZXY7VXNlcm5hbWU9c2NoZWR1bGVyLWRldi11c2VyO1Bhc3N3b3JkPWtWVm1vV0tKM3h6Z1FYO1BlcnNpc3QgU2VjdXJpdHkgSW5mbz1UcnVl
-  aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw==
-  hasher-salt: VEdsbmFIUWdRMmhoY20xekxDQk5hV1J5WVc1a1FtOXZhM01nYldGclpTQnNiM1J6SUc5bUlHMXZibVY1SUdGdVpDQmhjbVVnWVNCemRXTmpaWE56Wm5Wc0lIWnBjbUZzSUhOMGIzSjVJR2x1SUZOdmRYUm9JRUZtY21sallRPT0=  
-  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=
-  dataprotection-cert: TUlJS2dBSUJBekNDQ2pZR0NTcUdTSWIzRFFFSEFhQ0NDaWNFZ2dvak1JSUtIekNDQkZJR0NTcUdTSWIzRFFFSEJxQ0NCRU13Z2dRL0FnRUFNSUlFT0FZSktvWklodmNOQVFjQk1GY0dDU3FHU0liM0RRRUZEVEJLTUNrR0NTcUdTSWIzRFFFUkREUWEwZ0F3RUFBaUFCQURBTkJnbGdoa2dCWlFNRUFnRUZBQUFTb0VFS2Y2bE55USt1REU4ZjNCOWw5T3pGNG9mSmw5cUtkK3lKTTVBNXEy d0RBRUNIMXBPL2hVRXpsTkFnSUlBQT09
-  dataprotection-password: OWlIUSMmcl41eWZYRXc=
----
-apiVersion: v1
 kind: PersistentVolumeClaim
 metadata:
   name: midrandbooks-pvc
@@ -73,7 +48,8 @@ metadata:
   name: midrandbooks
   namespace: midrandbooks-uat
 spec:
-  replicas: 1
+  replicas: 2
+  revisionHistoryLimit: 0
   selector:
     matchLabels:
       app: midrandbooks
@@ -105,109 +81,56 @@ spec:
           envFrom:
             - configMapRef:
                 name: midrandbooks-config
+            - secretRef:
+                name: midrandbooks-secrets          
           env:
             - name: DataProtection__Certificate
               valueFrom:
                 secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: dataprotection-cert
+                  name: litecharms-certs
+                  key: litecharms.pfx
             - name: DataProtection__Password
               valueFrom:
                 secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: dataprotection-password
-            - name: LiteCharmsSettings__ClientId
-              valueFrom:
-                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: litecharms-clientid
-            - name: LiteCharmsSettings__ClientSecret
-              valueFrom:
-                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: litecharms-clientsecret
-            - name: BookshopS3Settings__AccessKey
-              valueFrom:
-                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: bookshop-s3-accesskey
-            - name: BookshopS3Settings__SecretKey
-              valueFrom:
-                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: bookshop-s3-secretkey
-            - name: HasherSettings__Salt
-              valueFrom:
-                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: hasher-salt
-            - name: PayfastSettings__Passphrase
-              valueFrom:
-                secretKeyRef:
-                  name: midrandbooks-secrets
-                  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:
-                  name: midrandbooks-secrets
-                  key: connection-string-quartz
-            - name: ConnectionStrings__PostgresMidrandBooks
-              valueFrom:
-                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: connection-string
-            - name: ConnectionStrings__PostgresDataProtection
-              valueFrom:
-                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: dataprotection-connection-string
-            - name: Monitoring__ApiKey
-              valueFrom:
-                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: aspire-apikey
+                  name: litecharms-certs
+                  key: passphrase
           volumeMounts:
+            - name: cluster-certs-volume
+              mountPath: /tmp/litecharms-raw-certs
+              readOnly: true
             - name: data
-              mountPath: /app/wwwroot/content
+              mountPath: /app/content
               subPath: bookshop-content
+          lifecycle:
+            postStart:
+              exec:
+                command:
+                  - /bin/sh
+                  - -c
+                  - |
+                    cp /tmp/litecharms-raw-certs/litecharms.crt /usr/local/share/ca-certificates/litecharms.crt
+                    update-ca-certificates
           livenessProbe:
             httpGet:
               path: /health
               port: 8443
-              scheme: HTTPS
+              scheme: HTTP
             initialDelaySeconds: 5
             periodSeconds: 10
           readinessProbe:
             httpGet:
               path: /health
               port: 8443
-              scheme: HTTPS
+              scheme: HTTP
             initialDelaySeconds: 3
             periodSeconds: 5
       volumes:
         - name: data
           persistentVolumeClaim:
-            claimName: midrandbooks-pvc        
+            claimName: midrandbooks-pvc
+        - name: cluster-certs-volume
+          secret:
+            secretName: litecharms-certs
 ---
 apiVersion: v1
 kind: Service
@@ -223,14 +146,6 @@ spec:
     app: midrandbooks
 ---
 apiVersion: traefik.io/v1alpha1
-kind: ServersTransport
-metadata:
-  name: midrandbooks-bypass-backend-validation
-  namespace: midrandbooks-uat
-spec:
-  insecureSkipVerify: true
----
-apiVersion: traefik.io/v1alpha1
 kind: IngressRoute
 metadata:
   name: midrandbooks-web-secure
@@ -244,11 +159,10 @@ spec:
       services:
         - name: midrandbooks-service
           port: 443
-          scheme: https
-          serversTransport: midrandbooks-bypass-backend-validation
           sticky:
             cookie:
               name: "lp-sticky-session"
               httpOnly: true
               secure: true
-  tls: {}
+          scheme: http
+  tls: {}