From e6880959d98622adeeb0a789593efa9ad2c21e0e Mon Sep 17 00:00:00 2001
From: Khwezi Mngoma <khwezi@msn.com>
Date: Sat, 23 May 2026 17:12:14 +0200
Subject: [PATCH] Added the payment confirmation page

---
 .../Components/Pages/Checkout.razor           |  7 +++-
 .../Pages/PaymentConfirmation.razor           | 40 +++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 MidrandBookshop/Components/Pages/PaymentConfirmation.razor

diff --git a/MidrandBookshop/Components/Pages/Checkout.razor b/MidrandBookshop/Components/Pages/Checkout.razor
index 8fdd8f0..1b307ee 100644
--- a/MidrandBookshop/Components/Pages/Checkout.razor
+++ b/MidrandBookshop/Components/Pages/Checkout.razor
@@ -1,4 +1,5 @@
 @page "/checkout"
+@inject NavigationManager Navigation
 
 <div class="container py-5">
     <h2 class="fw-bold mb-4">Checkout</h2>
@@ -63,7 +64,7 @@
                     <span class="fw-bold">Total Due</span>
                     <h4 class="fw-bold">R @((Subtotal + VatAmount + ShippingCost).ToString("F2"))</h4>
                 </div>
-                <button class="btn btn-dark w-100 py-3 rounded-pill">Complete Purchase</button>
+                <button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="CompletePurchase">Complete Purchase</button>
             </div>
         </div>
     </div>
@@ -102,4 +103,8 @@
         public int Price { get; set; }
         public int Quantity { get; set; }
     }
+    private void CompletePurchase(MouseEventArgs args)
+    {
+        Navigation.NavigateTo("/payment-confirmation");
+    }
 }
\ No newline at end of file
diff --git a/MidrandBookshop/Components/Pages/PaymentConfirmation.razor b/MidrandBookshop/Components/Pages/PaymentConfirmation.razor
new file mode 100644
index 0000000..555af5f
--- /dev/null
+++ b/MidrandBookshop/Components/Pages/PaymentConfirmation.razor
@@ -0,0 +1,40 @@
+@page "/payment-confirmation"
+
+<div class="container py-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-6 text-center">
+
+            <!-- Success Icon & Message -->
+            <div class="mb-4">
+                <div class="d-inline-block p-4 rounded-circle bg-success bg-opacity-10 text-success mb-3">
+                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                    </svg>
+                </div>
+                <h1 class="fw-bold mb-3">Order Confirmed</h1>
+                <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>
+                </div>
+            </div>
+
+            <!-- Calls to Action -->
+            <div class="d-grid gap-3 mt-5">
+                <a href="/" class="btn btn-dark btn-lg rounded-pill py-3">Continue Shopping</a>
+                <div class="row g-3">
+                    <div class="col-6">
+                        <a href="/order-history" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
+                    </div>
+                    <div class="col-6">
+                        <a href="/track-order" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Optional Trust Footer -->
+            <p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>user@email.com</strong>.</p>
+        </div>
+    </div>
+</div>
\ No newline at end of file