Added legal pages, contact and abut us

Redesigned account, checkout Added stock management design elements
2026-06-16 23:32:44 +02:00
parent 5d614d2a94
commit 8d2efbeb4a
18 changed files with 1642 additions and 555 deletions
@@ -5,7 +5,6 @@

 <div class="checkout-page-container py-5">

-    <!-- HANDOVER MODAL VIEW OVERLAY -->
    @if (IsProcessing)
    {
        <div class="processing-screen-overlay">
@@ -35,15 +34,30 @@
        </div>
    }

-    <!-- Header Presentation Details -->
-    <header class="checkout-header mb-5">
+    <header class="checkout-header mb-4">
        <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() && HasStockExceptions)
+    {
+        <div class="alert alert-danger border-0 rounded-3 p-3 mb-4 d-flex align-items-center gap-3 animate-fade-in">
+            <svg class="text-danger flex-shrink-0" width="20" height="20" 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>
+                <h6 class="fw-bold text-danger mb-0.5" style="font-size: 0.92rem;">Action Required: Inventory Shortage</h6>
+                <p class="text-secondary small mb-0" style="font-size: 0.85rem; line-height: 1.4;">
+                    One or more items in your shopping cart are currently out of stock. Please remove or adjust these selections to proceed to the payment gateway.
+                </p>
+            </div>
+        </div>
+    }
+
    @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">
@@ -64,10 +78,8 @@
    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>
@@ -79,9 +91,17 @@
                    <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">
+                            var isOutofStock = AvailableStockMap.TryGetValue(item.Price!.Id, out var availableCount) && availableCount <= 0;
+
+                            <div class="checkout-item-row py-3 d-flex align-items-center justify-content-between @(isOutofStock ? "border-danger bg-light-danger-subtle" : "")">
                                <div class="item-meta-details pe-4">
-                                    <h6 class="item-product-name fw-bold mb-1 text-dark">@item.Product!.Name</h6>
+                                    <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
+                                        <h6 class="item-product-name fw-bold mb-0 text-dark">@item.Product!.Name</h6>
+                                        @if (isOutofStock)
+                                        {
+                                            <span class="badge bg-danger text-white font-monospace text-uppercase" style="font-size: 0.65rem; padding: 0.2rem 0.4rem; letter-spacing: 0.02em;">Out Of Stock</span>
+                                        }
+                                    </div>
                                    <span class="item-author-label small text-muted font-monospace">
                                        By @($"{item.Author!.Name} {item.Author.LastName}")
                                    </span>
@@ -101,13 +121,10 @@
                    </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">
@@ -119,7 +136,6 @@
                            <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">
@@ -133,7 +149,6 @@
                    </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>
@@ -157,7 +172,6 @@
                    </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">
@@ -169,7 +183,6 @@
                </section>
            </div>

-            <!-- 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>
@@ -180,7 +193,6 @@
                            <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)
                            {
@@ -224,7 +236,7 @@
                    </div>

                    <button class="btn btn-premium-action w-100 py-3.5 d-flex align-items-center justify-content-center gap-2"
-                            disabled="@IsProcessing"
+                            disabled="@(IsProcessing || HasStockExceptions)"
                            @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">
@@ -235,7 +247,6 @@
                </div>
            </div>

-            <!-- Automatic PayFast Form Handover Context -->
            @if (IsProcessing == true && CheckoutPayload?.Count > 0)
            {
                <form id="payfastForm" action="@PayfastOptions.Value.CheckoutUrl" method="POST">