litecharms/midrandbooks
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 64 Wiki Activity

Added the payment confirmation page

Browse Source
This commit is contained in:
Khwezi Mngoma
2026-05-23 17:12:14 +02:00
parent 384daa0e54
commit e6880959d9
2 changed files with 46 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MidrandBookshop/Components/Pages/Checkout.razor
+6 -1
View File
@@ -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");
}
}
MidrandBookshop/Components/Pages/PaymentConfirmation.razor
+40
View File
@@ -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>