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

Implemented order history
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Khwezi Mngoma
2026-06-17 22:45:40 +02:00
parent 8d2efbeb4a
commit 1efe1ff21e
3 changed files with 347 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MidrandBookshop/Components/Pages/Account.razor
+41 -17
View File
@@ -17,6 +17,7 @@
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
<span>Order History</span>
</button>
<button class="nav-link text-start d-flex align-items-center gap-2" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<span>Shipping Address</span>
@@ -39,7 +40,7 @@
<div class="tab-content account-panels-deck">
<div class="tab-pane fade show active" id="orders" role="tabpanel">
<div class="panel-card-wrapper mb-4">
<div class="tab-panel-body">
<h5 class="panel-section-title fw-bold text-dark font-monospace text-uppercase tracking-wider mb-4">Order History</h5>
@if (orderHistory == null || !orderHistory.Any())
@@ -54,7 +55,7 @@
@foreach (var order in orderHistory)
{
<div class="premium-order-card p-4 border rounded-3 bg-white shadow-sm">
<div class="d-flex justify-content-between align-items-start flex-wrap gap-3 pb-3 border-b-dashed mb-3">
<div class="d-flex justify-content-between align-items-start flex-wrap gap-3 pb-3 border-bottom border-light mb-3">
<div>
<span class="font-monospace text-dark fw-bold d-block h6 mb-1">@order.OrderId</span>
<small class="text-muted d-block mb-1">Ordered on @order.OrderDate.ToString("dd MMMM yyyy")</small>
@@ -63,20 +64,26 @@
<span>Shipped to: <span class="fw-semibold text-dark">@order.ShippingAddressName</span></span>
</small>
</div>
<div class="text-md-end d-flex flex-column align-items-md-end gap-2">
<div class="d-flex align-items-center gap-1.5 flex-wrap justify-content-md-end">
<span class="badge status-badge-base @GetOrderStatusClass(order.Status)">
Order: @order.Status
</span>
<span class="badge status-badge-base @GetPaymentStatusClass(order.PaymentStatus)">
Pay: @order.PaymentStatus
</span>
<span class="badge status-badge-base @GetStatusClass(order.Status)">
Logistics: @order.Status
<span class="badge status-badge-base @GetShippingStatusClass(order.ShippingStatus)">
Logistics: @order.ShippingStatus
</span>
</div>
@if (order.PaymentStatus?.ToLower() == "paid")
{
<button class="btn btn-outline-dark btn-premium-sm font-monospace text-uppercase d-inline-flex align-items-center gap-1.5 py-1 px-2.5"
style="font-size: 0.7rem;"
style="font-size: 0.7rem;" disabled="@string.IsNullOrWhiteSpace(order.InvoiceUrl)"
@onclick="() => DownloadInvoice(order.OrderId)">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
<span>Invoice</span>
@@ -85,12 +92,32 @@
</div>
</div>
<div class="order-manifest-details d-flex align-items-center justify-content-between gap-4 py-1">
<div class="item-meta">
<h6 class="text-dark fw-bold mb-0 small" style="line-height: 1.4;">@order.ProductTitle</h6>
</div>
<div class="item-value text-end flex-shrink-0">
<span class="font-monospace text-dark fw-bold d-block">R @order.Total.ToString("F2")</span>
<div class="order-books-manifest manifest-grid-wrap mb-3">
@foreach (var book in order.PurchasedBooks)
{
<div class="manifest-grid-cell">
<div class="manifest-book-item border rounded p-2 d-flex align-items-center justify-content-between bg-light bg-opacity-20 h-100">
<div class="d-flex align-items-center gap-2.5 min-w-0">
<div class="book-thumbnail-container flex-shrink-0 border rounded bg-white shadow-xs">
<img src="@book.CoverImageUrl" alt="@book.Title" class="book-thumbnail-img" />
</div>
<div class="book-text-meta min-w-0">
<h6 class="text-dark fw-bold mb-0.5 small text-truncate" title="@book.Title">@book.Title</h6>
<span class="badge bg-white text-secondary border font-monospace extra-small py-0.5">Qty: @book.Quantity</span>
</div>
</div>
<div class="book-row-pricing text-end font-monospace text-dark small ps-2 flex-shrink-0 fw-medium">
R @((book.PriceUnitPrice * book.Quantity).ToString("F2"))
</div>
</div>
</div>
}
</div>
<div class="order-summary-footer border-top pt-3 d-flex align-items-baseline justify-content-between">
<span class="text-muted small text-uppercase font-monospace">Order Total</span>
<div class="text-end">
<span class="font-monospace text-dark fw-bold h5 mb-0 d-block">R @order.Total.ToString("F2")</span>
<small class="text-muted extra-small font-monospace">VAT Inclusive</small>
</div>
</div>
@@ -102,7 +129,7 @@
</div>
<div class="tab-pane fade" id="shipping" role="tabpanel">
<div class="panel-card-wrapper mb-4">
<div class="tab-panel-body">
<div class="d-flex justify-content-between align-items-baseline mb-4">
<h5 class="panel-section-title fw-bold text-dark font-monospace text-uppercase tracking-wider mb-0">Saved Addresses</h5>
@if (!showAddForm && editingAddress == null)
@@ -194,7 +221,7 @@
</div>
<div class="tab-pane fade" id="profile" role="tabpanel">
<div class="panel-card-wrapper mb-4">
<div class="tab-panel-body">
<h5 class="panel-section-title fw-bold text-dark font-monospace text-uppercase tracking-wider mb-4">Profile Settings</h5>
<div class="profile-hero-banner mb-4 d-flex align-items-center justify-content-between p-4 border rounded-3 bg-light bg-opacity-20 flex-wrap gap-3">
@@ -203,9 +230,7 @@
<h5 class="fw-bold text-dark mb-1 h6">@User?.Identity?.Name</h5>
<p class="text-muted small mb-0 font-monospace extra-small opacity-75">Secure Connection Authorized</p>
</div>
<span class="badge rounded-pill bg-success bg-opacity-10 text-success border border-success border-opacity-20 font-monospace px-3 py-1.5 small text-uppercase tracking-wide">
Verified
</span>
<span class="badge rounded-pill bg-success bg-opacity-10 text-success border border-success border-opacity-20 font-monospace px-3 py-1.5 small text-uppercase tracking-wide">Verified</span>
</div>
<div class="card p-5 text-center bg-white border rounded-3 shadow-sm my-4">
@@ -219,7 +244,6 @@
<p class="text-muted small mx-auto mb-4" style="max-width: 480px; line-height: 1.5;">
For your structural protection, password alterations, account recovery preferences, cross-tenant factors, and core credential manifests are handled through our global Identity Node security layer.
</p>
<a href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account"
target="_blank"
rel="noopener noreferrer"