Compare commits
7 Commits
cb03b91c6c
..
1.7
| Author | SHA1 | Date | |
|---|---|---|---|
| b722ea2cd0 | |||
| 73145fd360 | |||
| 7f29680993 | |||
| 56626d2693 | |||
| f9f6788c79 | |||
| 249ad319d9 | |||
| 4a476febf4 |
@@ -31,10 +31,6 @@ steps:
|
|||||||
registry: nexus.khongisa.co.za
|
registry: nexus.khongisa.co.za
|
||||||
repo: nexus.khongisa.co.za/midrandbooks
|
repo: nexus.khongisa.co.za/midrandbooks
|
||||||
tags: [ latest, "1.${DRONE_BUILD_NUMBER}" ]
|
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:
|
custom_labels:
|
||||||
- org.opencontainers.image.source=https://gitea.khongisa.co.za/litecharms/midrandbooks
|
- org.opencontainers.image.source=https://gitea.khongisa.co.za/litecharms/midrandbooks
|
||||||
- org.opencontainers.image.version=1.${DRONE_BUILD_NUMBER}
|
- org.opencontainers.image.version=1.${DRONE_BUILD_NUMBER}
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
<Solution>
|
<Solution>
|
||||||
<Folder Name="/Solution Items/">
|
<Folder Name="/Solution Items/">
|
||||||
<File Path=".drone.yml" />
|
<File Path=".drone.yml" />
|
||||||
<File Path=".editorconfig" />
|
|
||||||
<File Path="Dockerfile" />
|
<File Path="Dockerfile" />
|
||||||
<File Path="midrandbooks-uat.yml" />
|
<File Path="midrandbooks-uat.yml" />
|
||||||
<File Path="README.md" />
|
<File Path="README.md" />
|
||||||
|
|||||||
@@ -50,3 +50,15 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
[Parameter] public long Id { get; set; }
|
||||||
|
[Parameter] public string Title { get; set; } = string.Empty;
|
||||||
|
[Parameter] public string Author { get; set; } = string.Empty;
|
||||||
|
[Parameter] public decimal Price { get; set; }
|
||||||
|
[Parameter] public string Category { get; set; } = string.Empty;
|
||||||
|
[Parameter] public bool IsNew { get; set; }
|
||||||
|
[Parameter] public string BookImageUrl { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
[Parameter] public EventCallback OnCardClick { get; set; }
|
||||||
|
}
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
namespace MidrandBookshop.Components;
|
|
||||||
|
|
||||||
public partial class BookCard
|
|
||||||
{
|
|
||||||
[Parameter] public long Id { get; set; }
|
|
||||||
[Parameter] public string Title { get; set; } = string.Empty;
|
|
||||||
[Parameter] public string Author { get; set; } = string.Empty;
|
|
||||||
[Parameter] public decimal Price { get; set; }
|
|
||||||
[Parameter] public string Category { get; set; } = string.Empty;
|
|
||||||
[Parameter] public bool IsNew { get; set; }
|
|
||||||
[Parameter] public string BookImageUrl { get; set; } = string.Empty;
|
|
||||||
|
|
||||||
[Parameter] public EventCallback OnCardClick { get; set; }
|
|
||||||
}
|
|
||||||
@@ -2,11 +2,13 @@
|
|||||||
@inject NavigationManager Navigation
|
@inject NavigationManager Navigation
|
||||||
|
|
||||||
<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
|
<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
|
||||||
|
|
||||||
|
@* --- CART SYSTEM SIDE PANEL BACKDROP LAYER --- *@
|
||||||
<div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
|
<div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
|
||||||
<div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
|
<div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
|
||||||
<div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
|
<div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
|
||||||
<h5 class="fw-bold m-0 text-dark tracking-tight" style="font-family: 'Inter', sans-serif; font-size: 1.1rem;">
|
<h5 class="fw-bold m-0 text-dark tracking-tight" style="font-family: 'Inter', sans-serif; font-size: 1.1rem;">
|
||||||
YOUR CART (@ShoppingCart.Items.Count())
|
YOUR CART (@CartItems.Sum(i => i.Quantity))
|
||||||
</h5>
|
</h5>
|
||||||
<button class="btn btn-sm text-dark p-1 border-0" @onclick="ToggleCart" type="button">
|
<button class="btn btn-sm text-dark p-1 border-0" @onclick="ToggleCart" type="button">
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
@@ -17,7 +19,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cart-body flex-grow-1 overflow-y-auto p-4">
|
<div class="cart-body flex-grow-1 overflow-y-auto p-4">
|
||||||
@if (!ShoppingCart.Items.Any())
|
@if (!CartItems.Any())
|
||||||
{
|
{
|
||||||
<div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted py-5">
|
<div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted py-5">
|
||||||
<svg class="mb-3 opacity-50" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
<svg class="mb-3 opacity-50" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
@@ -29,29 +31,22 @@
|
|||||||
else
|
else
|
||||||
{
|
{
|
||||||
<div class="d-flex flex-column gap-4">
|
<div class="d-flex flex-column gap-4">
|
||||||
@foreach (var item in ShoppingCart.Items)
|
@foreach (var item in CartItems)
|
||||||
{
|
{
|
||||||
<div class="cart-item d-flex gap-3 align-items-start pb-3 border-bottom-dashed">
|
<div class="cart-item d-flex gap-3 align-items-start pb-3 border-bottom-dashed">
|
||||||
<div class="cart-item-thumb bg-dark text-white-50 d-flex align-items-center justify-content-center px-2 text-center" style="width: 54px; height: 74px; font-size: 0.45rem; letter-spacing: 0.5px;">
|
<div class="cart-item-thumb bg-dark text-white-50 d-flex align-items-center justify-content-center px-2 text-center" style="width: 54px; height: 74px; font-size: 0.45rem; letter-spacing: 0.5px;">
|
||||||
@if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
|
[ COVER ]
|
||||||
{
|
|
||||||
<img src="@item.Product!.ImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@item.Product.Name" />
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
@:[COVER]
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-grow-1">
|
<div class="flex-grow-1">
|
||||||
<h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Product!.Name</h6>
|
<h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Title</h6>
|
||||||
<p class="text-muted xx-small mb-2">by @($"{item.Author!.Name} {item.Author.LastName}")</p>
|
<p class="text-muted xx-small mb-2">by @item.Author</p>
|
||||||
<div class="d-flex align-items-center justify-content-between">
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
<div class="quantity-picker d-flex align-items-center border rounded-pill bg-light">
|
<div class="quantity-picker d-flex align-items-center border rounded-pill bg-light">
|
||||||
<button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, -1)" type="button">-</button>
|
<button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, -1)" type="button">-</button>
|
||||||
<span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@ShoppingCart.Items.FirstOrDefault(i => i.Price!.Id == item.Price!.Id)!.Quantity</span>
|
<span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@item.Quantity</span>
|
||||||
<button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, 1)" type="button">+</button>
|
<button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, 1)" type="button">+</button>
|
||||||
</div>
|
</div>
|
||||||
<span class="small fw-semibold text-dark">R @(item.Price!.Amount * item.Quantity)</span>
|
<span class="small fw-semibold text-dark">R @(item.Price * item.Quantity)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn text-muted p-0 border-0 mt-1 align-self-start" style="background: none;" @onclick="() => RemoveFromCart(item)" type="button">
|
<button class="btn text-muted p-0 border-0 mt-1 align-self-start" style="background: none;" @onclick="() => RemoveFromCart(item)" type="button">
|
||||||
@@ -63,7 +58,7 @@
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (ShoppingCart.Items.Any())
|
@if (CartItems.Any())
|
||||||
{
|
{
|
||||||
<div class="cart-footer p-4 bg-light border-top mt-auto">
|
<div class="cart-footer p-4 bg-light border-top mt-auto">
|
||||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||||
@@ -82,7 +77,9 @@
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@* --- TOP FIXED LAYOUT AREA --- *@
|
||||||
<div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
|
<div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
|
||||||
|
@* Decorative Background SVG Watermark Line Graphic *@
|
||||||
<div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
|
<div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
|
||||||
<svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
|
<circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
|
||||||
@@ -141,16 +138,15 @@
|
|||||||
<input type="text"
|
<input type="text"
|
||||||
class="form-control form-control-sm rounded-pill border-light-subtle px-3 text-dark bg-light custom-search-field"
|
class="form-control form-control-sm rounded-pill border-light-subtle px-3 text-dark bg-light custom-search-field"
|
||||||
placeholder="Search by ISBN, Author, Title..."
|
placeholder="Search by ISBN, Author, Title..."
|
||||||
@bind="SearchInputBuffer"
|
value="@GlobalSearchQuery"
|
||||||
@bind:event="oninput"
|
@oninput="OnSearchInput" />
|
||||||
@onkeydown="HandleSearchKeyDown" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="btn btn-link text-dark p-1 me-2 border-0 header-action-btn"
|
<button class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center border-0 p-0 transition-smooth @(IsSearchActive ? "bg-dark text-white" : "bg-light text-dark")"
|
||||||
|
style="width: 32px; height: 32px;"
|
||||||
@onclick="ToggleGlobalSearch"
|
@onclick="ToggleGlobalSearch"
|
||||||
type="button"
|
type="button">
|
||||||
aria-label="Toggle Search">
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<circle cx="11" cy="11" r="8"></circle>
|
<circle cx="11" cy="11" r="8"></circle>
|
||||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -163,78 +159,34 @@
|
|||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
|
||||||
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
|
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
|
||||||
</svg>
|
</svg>
|
||||||
@if (ShoppingCart.Items.Any())
|
@if (CartItems.Any())
|
||||||
{
|
{
|
||||||
<span class="cart-badge">@ShoppingCart.Items.Count</span>
|
<span class="cart-badge">@CartItems.Sum(i => i.Quantity)</span>
|
||||||
}
|
}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="dropdown header-account-dropdown">
|
<a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-none d-md-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
|
||||||
<button class="btn btn-sm d-flex align-items-center gap-1.5 p-1 text-dark border-0 dropdown-toggle no-caret"
|
|
||||||
type="button"
|
|
||||||
id="accountDropdownMenu"
|
|
||||||
data-bs-toggle="dropdown"
|
|
||||||
aria-expanded="false">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
|
|
||||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
||||||
<circle cx="12" cy="7" r="4"></circle>
|
|
||||||
</svg>
|
|
||||||
<span class="d-none d-md-inline font-monospace text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.05em;">Account</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end brand-dropdown-pane p-0 m-0" aria-labelledby="accountDropdownMenu">
|
|
||||||
<AuthorizeView>
|
|
||||||
<Authorized>
|
|
||||||
<li class="dropdown-header-identity p-3 border-bottom bg-light">
|
|
||||||
<span class="d-block text-muted text-uppercase font-monospace xx-small" style="font-size: 0.6rem; letter-spacing: 0.1em;">Active Identity</span>
|
|
||||||
<span class="fw-bold text-dark text-truncate d-block" style="font-size: 0.85rem;">@(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="/account">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
|
||||||
My Orders
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account" target="_blank">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
|
||||||
Security Center
|
|
||||||
</a>
|
|
||||||
</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">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<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>
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||||
<polyline points="16 17 21 12 16 7"></polyline>
|
<circle cx="12" cy="7" r="4" />
|
||||||
<line x1="21" y1="12" x2="9" y2="12"></line>
|
|
||||||
</svg>
|
</svg>
|
||||||
Logout
|
LogIn
|
||||||
</a>
|
</a>
|
||||||
</li>
|
|
||||||
</Authorized>
|
<a href="/profile" class="btn btn-sm btn-dark rounded-circle d-inline-flex d-md-none align-items-center justify-content-center border-0 p-0 shadow-sm"
|
||||||
<NotAuthorized>
|
style="width: 32px; height: 32px;"
|
||||||
<li>
|
aria-label="Log In">
|
||||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="/login">
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
<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>
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||||
Sign In
|
<circle cx="12" cy="7" r="4" />
|
||||||
|
</svg>
|
||||||
</a>
|
</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">
|
|
||||||
<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
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</NotAuthorized>
|
|
||||||
</AuthorizeView>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@* --- MAIN INDEPENDENT SCROLL LAYER --- *@
|
||||||
<div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
|
<div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
|
||||||
<main class="position-relative" style="z-index: 5;">
|
<main class="position-relative" style="z-index: 5;">
|
||||||
<CascadingValue Value="GlobalSearchQuery">
|
<CascadingValue Value="GlobalSearchQuery">
|
||||||
@@ -295,3 +247,56 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
private string GlobalSearchQuery { get; set; } = string.Empty;
|
||||||
|
private bool IsSearchActive { get; set; } = false;
|
||||||
|
private bool IsCartOpen { get; set; } = false;
|
||||||
|
|
||||||
|
private List<CartItem> CartItems = new()
|
||||||
|
{
|
||||||
|
new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
|
||||||
|
new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
|
||||||
|
new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
|
||||||
|
};
|
||||||
|
|
||||||
|
private void ToggleGlobalSearch() => IsSearchActive = !IsSearchActive;
|
||||||
|
private void ToggleCart() => IsCartOpen = !IsCartOpen;
|
||||||
|
|
||||||
|
private void OnSearchInput(ChangeEventArgs e)
|
||||||
|
{
|
||||||
|
GlobalSearchQuery = e.Value?.ToString() ?? string.Empty;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ChangeQuantity(CartItem item, int delta)
|
||||||
|
{
|
||||||
|
item.Quantity += delta;
|
||||||
|
if (item.Quantity <= 0)
|
||||||
|
{
|
||||||
|
CartItems.Remove(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
|
||||||
|
private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
|
||||||
|
|
||||||
|
private void RedirectToCart()
|
||||||
|
{
|
||||||
|
IsCartOpen = false;
|
||||||
|
Navigation.NavigateTo("/cart");
|
||||||
|
}
|
||||||
|
|
||||||
|
private void RedirectToCheckout()
|
||||||
|
{
|
||||||
|
IsCartOpen = false;
|
||||||
|
Navigation.NavigateTo("/checkout");
|
||||||
|
}
|
||||||
|
|
||||||
|
public class CartItem
|
||||||
|
{
|
||||||
|
public int Id { get; set; }
|
||||||
|
public string Title { get; set; } = string.Empty;
|
||||||
|
public string Author { get; set; } = string.Empty;
|
||||||
|
public int Price { get; set; }
|
||||||
|
public int Quantity { get; set; }
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
using LiteCharms.Features.MidrandBooks.Payments;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Payments.Models;
|
|
||||||
|
|
||||||
namespace MidrandBookshop.Components.Layout;
|
|
||||||
|
|
||||||
public partial class MainLayout(CartService cartService) : IDisposable
|
|
||||||
{
|
|
||||||
[Inject]
|
|
||||||
private AuthenticationStateProvider AuthStateProvider { 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;
|
|
||||||
private bool IsCartOpen { get; set; } = false;
|
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
|
||||||
{
|
|
||||||
AuthState = await AuthStateProvider.GetAuthenticationStateAsync();
|
|
||||||
User = AuthState!.User;
|
|
||||||
|
|
||||||
Navigation.LocationChanged += OnLocationChanged;
|
|
||||||
cartService.OnCartChanged += CartService_OnCartChanged;
|
|
||||||
|
|
||||||
await cartService.LoadCartFromStorageAsync();
|
|
||||||
|
|
||||||
SyncSearchQueryFromUrl();
|
|
||||||
}
|
|
||||||
|
|
||||||
private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
|
|
||||||
|
|
||||||
private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
|
|
||||||
{
|
|
||||||
SyncSearchQueryFromUrl();
|
|
||||||
StateHasChanged();
|
|
||||||
}
|
|
||||||
|
|
||||||
private void SyncSearchQueryFromUrl()
|
|
||||||
{
|
|
||||||
var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
|
|
||||||
var queryParameters = QueryHelpers.ParseQuery(uri.Query);
|
|
||||||
|
|
||||||
if (queryParameters.TryGetValue("q", out var queryVal) && !string.IsNullOrWhiteSpace(queryVal))
|
|
||||||
{
|
|
||||||
GlobalSearchQuery = queryVal.ToString();
|
|
||||||
SearchInputBuffer = GlobalSearchQuery;
|
|
||||||
IsSearchActive = true;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
GlobalSearchQuery = string.Empty;
|
|
||||||
SearchInputBuffer = string.Empty;
|
|
||||||
IsSearchActive = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private void ToggleGlobalSearch()
|
|
||||||
{
|
|
||||||
if (!IsSearchActive)
|
|
||||||
IsSearchActive = true;
|
|
||||||
else
|
|
||||||
CommitSearchNavigation();
|
|
||||||
}
|
|
||||||
|
|
||||||
private void HandleSearchKeyDown(KeyboardEventArgs e)
|
|
||||||
{
|
|
||||||
if (e.Key == "Enter") CommitSearchNavigation();
|
|
||||||
}
|
|
||||||
|
|
||||||
private void CommitSearchNavigation()
|
|
||||||
{
|
|
||||||
var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
|
|
||||||
var queryParameters = QueryHelpers.ParseQuery(uri.Query);
|
|
||||||
|
|
||||||
var newRouteParams = new Dictionary<string, object?>();
|
|
||||||
|
|
||||||
foreach (var param in queryParameters)
|
|
||||||
{
|
|
||||||
if (param.Key != "q")
|
|
||||||
{
|
|
||||||
newRouteParams[param.Key] = param.Value.ToString();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!string.IsNullOrWhiteSpace(SearchInputBuffer))
|
|
||||||
newRouteParams["q"] = SearchInputBuffer.Trim();
|
|
||||||
else
|
|
||||||
newRouteParams["q"] = null;
|
|
||||||
|
|
||||||
var baseRoute = uri.AbsolutePath.StartsWith("/product/", StringComparison.OrdinalIgnoreCase) ? "/" : uri.AbsolutePath;
|
|
||||||
var updatedUri = Navigation.GetUriWithQueryParameters(baseRoute, newRouteParams);
|
|
||||||
|
|
||||||
Navigation.NavigateTo(updatedUri);
|
|
||||||
}
|
|
||||||
|
|
||||||
private void ToggleCart() => IsCartOpen = !IsCartOpen;
|
|
||||||
|
|
||||||
private async Task ChangeQuantity(CartItem item, int delta)
|
|
||||||
{
|
|
||||||
var peekQuantity = item.Quantity + delta;
|
|
||||||
|
|
||||||
if (peekQuantity < 1) return;
|
|
||||||
|
|
||||||
cartService.UpdateQuantity(item.Price!.Id, delta);
|
|
||||||
|
|
||||||
await cartService.SaveCartToStorageAsync();
|
|
||||||
}
|
|
||||||
|
|
||||||
private async Task RemoveFromCart(CartItem item)
|
|
||||||
{
|
|
||||||
cartService.RemoveOneItem(item.Price!.Id);
|
|
||||||
|
|
||||||
await cartService.SaveCartToStorageAsync();
|
|
||||||
}
|
|
||||||
|
|
||||||
private decimal GetCartTotal() => ShoppingCart?.TotalAmount ?? 0.00m;
|
|
||||||
|
|
||||||
private void RedirectToCart()
|
|
||||||
{
|
|
||||||
IsCartOpen = false;
|
|
||||||
Navigation.NavigateTo("/cart");
|
|
||||||
}
|
|
||||||
|
|
||||||
private void RedirectToCheckout()
|
|
||||||
{
|
|
||||||
IsCartOpen = false;
|
|
||||||
Navigation.NavigateTo("/checkout");
|
|
||||||
}
|
|
||||||
|
|
||||||
public void Dispose()
|
|
||||||
{
|
|
||||||
Navigation.LocationChanged -= OnLocationChanged;
|
|
||||||
cartService.OnCartChanged -= CartService_OnCartChanged;
|
|
||||||
|
|
||||||
GC.SuppressFinalize(this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -191,35 +191,3 @@
|
|||||||
.scroll-container {
|
.scroll-container {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-caret::after {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-dropdown-pane {
|
|
||||||
border-radius: 0px !important;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
|
|
||||||
min-width: 190px;
|
|
||||||
z-index: 1050;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-dropdown-pane .dropdown-item {
|
|
||||||
font-size: 0.72rem;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
transition: background-color 0.15s ease, color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-dropdown-pane .dropdown-item:hover {
|
|
||||||
background-color: #1A1A1A !important;
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-dropdown-pane .dropdown-item.text-danger:hover {
|
|
||||||
background-color: #DC3545 !important;
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-header-identity {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
namespace MidrandBookshop.Components.Pages;
|
|
||||||
|
|
||||||
public partial class Account
|
|
||||||
{
|
|
||||||
private bool showAddForm = false;
|
|
||||||
private AddressItem? editingAddress = null;
|
|
||||||
private string newAddressName = "";
|
|
||||||
private string newStreetAddress = "";
|
|
||||||
private string newCity = "";
|
|
||||||
private string newPostalCode = "";
|
|
||||||
private bool isBilling, isShipping;
|
|
||||||
|
|
||||||
private List<OrderItem> orderHistory = new()
|
|
||||||
{
|
|
||||||
new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
|
|
||||||
new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
|
|
||||||
};
|
|
||||||
|
|
||||||
private List<AddressItem> savedAddresses = new()
|
|
||||||
{
|
|
||||||
new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
|
|
||||||
new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
|
|
||||||
new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
|
|
||||||
};
|
|
||||||
|
|
||||||
private void TriggerLogout() => Navigation.NavigateTo("/logout", forceLoad: true);
|
|
||||||
private void DownloadInvoice(string orderId) { /* Handle download sequence here */ }
|
|
||||||
private void OpenAddForm() { editingAddress = null; showAddForm = true; }
|
|
||||||
|
|
||||||
private void SaveAddress()
|
|
||||||
{
|
|
||||||
if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
|
|
||||||
{
|
|
||||||
var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
|
|
||||||
savedAddresses.Add(new AddressItem
|
|
||||||
{
|
|
||||||
Id = nextId,
|
|
||||||
Name = newAddressName,
|
|
||||||
Street = newStreetAddress,
|
|
||||||
City = newCity,
|
|
||||||
PostalCode = newPostalCode,
|
|
||||||
IsBilling = isBilling,
|
|
||||||
IsShipping = isShipping,
|
|
||||||
IsPrimary = !savedAddresses.Any()
|
|
||||||
});
|
|
||||||
ResetAddForm();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private void ResetAddForm() { newAddressName = ""; newStreetAddress = ""; newCity = ""; newPostalCode = ""; isBilling = isShipping = showAddForm = false; }
|
|
||||||
private void StartEditing(AddressItem addr) { showAddForm = false; editingAddress = new AddressItem { Id = addr.Id, Name = addr.Name, Street = addr.Street, City = addr.City, PostalCode = addr.PostalCode, IsBilling = addr.IsBilling, IsShipping = addr.IsShipping, IsPrimary = addr.IsPrimary }; }
|
|
||||||
private void CancelEditing() => editingAddress = null;
|
|
||||||
|
|
||||||
private void UpdateAddress()
|
|
||||||
{
|
|
||||||
if (editingAddress != null)
|
|
||||||
{
|
|
||||||
var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
|
|
||||||
if (target != null) { target.Name = editingAddress.Name; target.Street = editingAddress.Street; target.City = editingAddress.City; target.PostalCode = editingAddress.PostalCode; target.IsBilling = editingAddress.IsBilling; target.IsShipping = editingAddress.IsShipping; }
|
|
||||||
editingAddress = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private void DeleteAddress(AddressItem addr) { if (editingAddress?.Id == addr.Id) editingAddress = null; savedAddresses.Remove(addr); if (addr.IsPrimary && savedAddresses.Any()) savedAddresses.First().IsPrimary = true; }
|
|
||||||
|
|
||||||
private void SetPrimary(AddressItem target, ChangeEventArgs e)
|
|
||||||
{
|
|
||||||
var isChecked = (bool)(e.Value ?? false);
|
|
||||||
if (isChecked) { foreach (var addr in savedAddresses) addr.IsPrimary = (addr.Id == target.Id); }
|
|
||||||
else target.IsPrimary = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
public class AddressItem { public int Id { get; set; } public string Name { get; set; } = ""; public string Street { get; set; } = ""; public string City { get; set; } = ""; public string PostalCode { get; set; } = ""; public bool IsBilling { get; set; } public bool IsShipping { get; set; } public bool IsPrimary { get; set; } }
|
|
||||||
public class OrderItem { public string OrderId { get; set; } = ""; public string ProductId { get; set; } = ""; public string ProductTitle { get; set; } = ""; public DateTime OrderDate { get; set; } public string ShippingAddressName { get; set; } = ""; public string Status { get; set; } = ""; public double Total { get; set; } }
|
|
||||||
}
|
|
||||||
@@ -1,147 +0,0 @@
|
|||||||
::deep .container {
|
|
||||||
max-width: 1100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigation Layout Overrides - Black & White Architectural Style */
|
|
||||||
.nav-pills .nav-link {
|
|
||||||
color: #6c757d;
|
|
||||||
border-radius: 0;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: var(--bs-body-font-family);
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active State - Solid Black Fill with stark white text */
|
|
||||||
.nav-pills .nav-link.active {
|
|
||||||
background-color: #1A1A1A !important;
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
border-color: #1A1A1A;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover State for Unselected Buttons */
|
|
||||||
.nav-pills .nav-link:hover:not(.active) {
|
|
||||||
color: #1A1A1A;
|
|
||||||
background-color: #F8F8F8 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Logout Button Link Alignment rules */
|
|
||||||
.nav-pills .nav-link.text-danger {
|
|
||||||
color: #DC3545 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-pills .nav-link.text-danger:hover {
|
|
||||||
background-color: #FFF5F5 !important;
|
|
||||||
color: #A94442 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
||||||
margin: 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Profile Banner Design Definitions */
|
|
||||||
.profile-hero-banner {
|
|
||||||
border-color: rgba(0, 0, 0, 0.05) !important;
|
|
||||||
background-color: #FAFAFA !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-greeting {
|
|
||||||
font-family: 'Playfair Display', serif;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
color: #111111;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-tag {
|
|
||||||
font-size: 0.68rem;
|
|
||||||
letter-spacing: 0.15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-crest-svg svg {
|
|
||||||
transition: transform 0.4s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-hero-banner:hover .hero-crest-svg svg {
|
|
||||||
transform: rotate(15deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cards Layout Rules */
|
|
||||||
.card {
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.address-card {
|
|
||||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.address-card:hover {
|
|
||||||
border-color: rgba(0, 0, 0, 0.16);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Order Meta Tracks & Status Badges Setup */
|
|
||||||
.order-meta-track {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge-base {
|
|
||||||
font-family: var(--bs-font-monospace);
|
|
||||||
font-size: 0.68rem !important;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
padding: 0.35rem 0.65rem !important;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-delivered {
|
|
||||||
background-color: #E2F0D9 !important;
|
|
||||||
color: #385723 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-shipped {
|
|
||||||
background-color: #FFF2CC !important;
|
|
||||||
color: #7F6000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-processing, .status-pending {
|
|
||||||
background-color: #F2F2F2 !important;
|
|
||||||
color: #595959 !important;
|
|
||||||
border: 1px dashed #D9D9D9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Restored Action Button Interactive Properties */
|
|
||||||
.action-btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: #1A1A1A;
|
|
||||||
transition: background-color 0.15s ease, transform 0.1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:active {
|
|
||||||
transform: scale(0.92);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pointer-label {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-pane #profile .card {
|
|
||||||
border: 1px dashed rgba(0, 0, 0, 0.15) !important;
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
@page "/cart"
|
||||||
|
|
||||||
|
<div class="container py-5" style="max-width: 900px;">
|
||||||
|
<div class="d-flex align-items-center justify-content-between mb-5">
|
||||||
|
<h2 class="fw-bold m-0">Your Cart</h2>
|
||||||
|
<a href="/" class="text-dark text-decoration-none small fw-bold tracking-widest">CONTINUE SHOPPING</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (!CartItems.Any())
|
||||||
|
{
|
||||||
|
<div class="text-center py-5 border rounded-3 bg-white">
|
||||||
|
<p class="text-muted mb-4">Your collection is currently empty.</p>
|
||||||
|
<a href="/" class="btn btn-dark rounded-pill px-4">Browse Catalog</a>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="card border-0 shadow-sm p-4 mb-4">
|
||||||
|
@foreach (var item in CartItems)
|
||||||
|
{
|
||||||
|
<div class="row align-items-center py-4 @(item != CartItems.Last() ? "border-bottom" : "")">
|
||||||
|
<!-- Item Detail -->
|
||||||
|
<div class="col-12 col-md-6 d-flex align-items-center gap-4">
|
||||||
|
<div class="bg-light d-flex align-items-center justify-content-center" style="width: 70px; height: 95px;">
|
||||||
|
<span class="text-muted" style="font-size: 0.5rem;">[COVER]</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="fw-bold mb-1">@item.Title</h5>
|
||||||
|
<p class="text-muted small mb-0">by @item.Author</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quantity -->
|
||||||
|
<div class="col-6 col-md-3 d-flex justify-content-center">
|
||||||
|
<div class="d-flex align-items-center border rounded-pill bg-light px-2">
|
||||||
|
<button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, -1)">-</button>
|
||||||
|
<span class="px-3 fw-bold">@item.Quantity</span>
|
||||||
|
<button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, 1)">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Price & Remove -->
|
||||||
|
<div class="col-6 col-md-3 text-end d-flex align-items-center justify-content-end gap-3">
|
||||||
|
<span class="fw-bold">R @(item.Price * item.Quantity)</span>
|
||||||
|
<button class="btn btn-sm p-1 text-muted" @onclick="() => RemoveFromCart(item)">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Cart Totals Section -->
|
||||||
|
<div class="row justify-content-end">
|
||||||
|
<div class="col-md-5">
|
||||||
|
<div class="bg-white p-4 rounded-3 border">
|
||||||
|
<div class="d-flex justify-content-between mb-3">
|
||||||
|
<span class="text-muted">Subtotal</span>
|
||||||
|
<span class="fw-bold">R @Subtotal.ToString("F2")</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-4">
|
||||||
|
<span class="text-muted">VAT (15%)</span>
|
||||||
|
<span class="fw-bold">R @VatAmount.ToString("F2")</span>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
|
<span class="fw-bold h5 mb-0">Total</span>
|
||||||
|
<span class="fw-bold h4 mb-0">R @Total.ToString("F2")</span>
|
||||||
|
</div>
|
||||||
|
<a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3">Proceed to Checkout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
public class CartItem
|
||||||
|
{
|
||||||
|
public int Id { get; set; }
|
||||||
|
public string Title { get; set; } = string.Empty;
|
||||||
|
public string Author { get; set; } = string.Empty;
|
||||||
|
public int Price { get; set; }
|
||||||
|
public int Quantity { get; set; }
|
||||||
|
}
|
||||||
|
|
||||||
|
private List<CartItem> CartItems = new()
|
||||||
|
{
|
||||||
|
new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
|
||||||
|
new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
|
||||||
|
new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
|
||||||
|
};
|
||||||
|
|
||||||
|
// Computed Properties for Calculations
|
||||||
|
private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
|
||||||
|
private decimal VatAmount => Subtotal * 0.15m;
|
||||||
|
private decimal Total => Subtotal + VatAmount;
|
||||||
|
|
||||||
|
private void ChangeQuantity(CartItem item, int delta)
|
||||||
|
{
|
||||||
|
item.Quantity += delta;
|
||||||
|
if (item.Quantity <= 0) CartItems.Remove(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
|
||||||
|
}
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
@page "/cart"
|
|
||||||
@rendermode InteractiveServer
|
|
||||||
|
|
||||||
<div class="container py-5" style="max-width: 1000px; font-family: system-ui, -apple-system, sans-serif;">
|
|
||||||
|
|
||||||
<div class="d-flex align-items-baseline justify-content-between mb-5 border-bottom pb-3">
|
|
||||||
<h1 class="ff-serif mb-0" style="font-size: 2.25rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: -0.5px;">Your Cart</h1>
|
|
||||||
<a href="/" class="text-dark text-decoration-none small fw-semibold tracking-widest text-uppercase" style="font-size: 0.75rem; letter-spacing: 1.5px;">Continue Shopping</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@if (!ShoppingCart.Items.Any())
|
|
||||||
{
|
|
||||||
<div class="text-center py-5 my-4">
|
|
||||||
<div class="mb-4 text-muted-50">
|
|
||||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-secondary opacity-50"><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>
|
|
||||||
<h3 class="ff-serif mb-2" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400;">Your collection is currently vacant.</h3>
|
|
||||||
<p class="text-muted small mb-4" style="letter-spacing: 0.2px;">Even with careful scrutiny, the requested shelf remains empty.</p>
|
|
||||||
<a href="/" class="btn btn-dark rounded-pill px-4 py-2 text-uppercase fw-semibold tracking-widest" style="font-size: 0.75rem; letter-spacing: 1px; background-color: #1c1f22;">Browse Catalog</a>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<div class="row g-5">
|
|
||||||
<div class="col-12 col-lg-7">
|
|
||||||
<div class="d-flex flex-column gap-1">
|
|
||||||
@foreach (var item in ShoppingCart.Items)
|
|
||||||
{
|
|
||||||
<div class="row align-items-center py-4 border-bottom position-relative">
|
|
||||||
|
|
||||||
<div class="col-12 col-md-7 d-flex align-items-center gap-4 mb-3 mb-md-0">
|
|
||||||
<div class="bg-light d-flex align-items-center justify-content-center p-2 rounded-1 state-card-shadow"
|
|
||||||
style="width: 70px; height: 95px; background-color: #f8f9fa; box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);">
|
|
||||||
@if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
|
|
||||||
{
|
|
||||||
<img src="@item.Product!.ImageUrl" class="img-fluid" style="max-height: 80px; object-fit: contain; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.15));" alt="@item.Product.Name" />
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<span class="text-muted fw-bold font-monospace" style="font-size: 0.6rem; letter-spacing: 1px;">[COVER]</span>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div style="max-width: 75%;">
|
|
||||||
<h5 class="fw-semibold mb-1 text-dark" style="font-size: 0.95rem; line-height: 1.4; letter-spacing: -0.1px;">@item.Product!.Name</h5>
|
|
||||||
<p class="text-muted small mb-0" style="font-size: 0.8rem; letter-spacing: 0.1px;">by @($"{item.Author!.Name} {item.Author!.LastName}")</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-6 col-md-3 d-flex justify-content-md-center align-items-center">
|
|
||||||
<div class="d-flex align-items-center border rounded-pill bg-white px-1 py-1" style="border-color: #e9ecef !important;">
|
|
||||||
<button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => DecreaseQty(item, -1)">—</button>
|
|
||||||
<span class="px-2 fw-semibold text-dark" style="font-size: 0.85rem; min-width: 20px; text-align: center;">@item.Quantity</span>
|
|
||||||
<button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => IncreaseQty(item)">+</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-6 col-md-2 text-end d-flex align-items-center justify-content-end gap-3">
|
|
||||||
<span class="fw-semibold text-dark" style="font-size: 0.95rem; letter-spacing: -0.2px;">R @(item.Amount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
|
|
||||||
<button class="btn btn-sm p-1 text-muted opacity-50 hover-opacity-100 border-0 bg-transparent" style="transition: opacity 0.2s;" @onclick="() => RemoveFromCart(item)" title="Remove item">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 col-lg-5">
|
|
||||||
<div class="bg-white p-4 rounded-3 border-0 sticky-top" style="top: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.04); border: 1px solid #f1f3f5 !important;">
|
|
||||||
<h4 class="ff-serif mb-4" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.3rem;">Order Summary</h4>
|
|
||||||
|
|
||||||
<div class="d-flex justify-content-between mb-3" style="font-size: 0.9rem;">
|
|
||||||
<span class="text-muted">Subtotal</span>
|
|
||||||
<span class="fw-normal text-dark">R @(ShoppingCart.TotalAmount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex justify-content-between mb-4" style="font-size: 0.9rem;">
|
|
||||||
<span class="text-muted">VAT (15%)</span>
|
|
||||||
<span class="fw-normal text-dark">R @(ShoppingCart.TotalVat.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr style="border-color: #f1f3f5;" />
|
|
||||||
|
|
||||||
<div class="d-flex justify-content-between align-items-baseline mb-4 mt-2">
|
|
||||||
<span class="fw-semibold h6 mb-0 text-dark" style="font-size: 1rem;">Total</span>
|
|
||||||
<span class="fw-bold text-dark" style="font-size: 1.4rem; letter-spacing: -0.5px;">R @((ShoppingCart.TotalAmount + ShoppingCart.TotalVat).ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3 text-uppercase fw-semibold tracking-widest border-0"
|
|
||||||
style="font-size: 0.75rem; letter-spacing: 1.5px; background-color: #1c1f22; transition: background-color 0.2s;">
|
|
||||||
Proceed to Checkout
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
using LiteCharms.Features.MidrandBooks.Payments;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Payments.Models;
|
|
||||||
|
|
||||||
namespace MidrandBookshop.Components.Pages;
|
|
||||||
|
|
||||||
public partial class CartReview(CartService cartService)
|
|
||||||
{
|
|
||||||
protected Cart ShoppingCart => cartService?.ShoppingCart!;
|
|
||||||
|
|
||||||
protected async void IncreaseQty(CartItem item)
|
|
||||||
{
|
|
||||||
if (item is not null)
|
|
||||||
{
|
|
||||||
cartService.UpdateQuantity(item!.Price!.Id, 1);
|
|
||||||
|
|
||||||
await cartService.SaveCartToStorageAsync();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
protected async void DecreaseQty(CartItem item, int delta)
|
|
||||||
{
|
|
||||||
var peekQuantity = item.Quantity + delta;
|
|
||||||
|
|
||||||
if (peekQuantity < 1) return;
|
|
||||||
|
|
||||||
cartService.UpdateQuantity(item!.Price!.Id, delta);
|
|
||||||
|
|
||||||
await cartService.SaveCartToStorageAsync();
|
|
||||||
}
|
|
||||||
|
|
||||||
private async void RemoveFromCart(CartItem item)
|
|
||||||
{
|
|
||||||
cartService.RemoveOneItem(item.Price!.Id);
|
|
||||||
|
|
||||||
await cartService.SaveCartToStorageAsync();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
body {
|
|
||||||
}
|
|
||||||
@@ -1,18 +1,19 @@
|
|||||||
@page "/checkout"
|
@page "/checkout"
|
||||||
@inject NavigationManager Navigation
|
@inject NavigationManager Navigation
|
||||||
@rendermode InteractiveServer
|
|
||||||
@attribute [Authorize]
|
|
||||||
|
|
||||||
<div class="container py-5">
|
<div class="container py-5">
|
||||||
<h2 class="fw-bold mb-4">Checkout</h2>
|
<h2 class="fw-bold mb-4">Checkout</h2>
|
||||||
<div class="row g-5">
|
<div class="row g-5">
|
||||||
|
|
||||||
|
<!-- LEFT COLUMN: SHIPPING & CART -->
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
|
<!-- 1. Cart Items -->
|
||||||
<div class="card border-0 shadow-sm p-4 mb-4">
|
<div class="card border-0 shadow-sm p-4 mb-4">
|
||||||
<h5 class="fw-bold mb-3">Your Items</h5>
|
<h5 class="fw-bold mb-3">Your Items</h5>
|
||||||
@foreach (var item in ShoppingCart.Items)
|
@foreach (var item in CartItems)
|
||||||
{
|
{
|
||||||
<div class="d-flex align-items-center justify-content-between pb-3 border-bottom mb-3">
|
<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><h6 class="mb-0">@item.Title</h6><small class="text-muted">@item.Author</small></div>
|
||||||
<div class="d-flex align-items-center gap-3">
|
<div class="d-flex align-items-center gap-3">
|
||||||
<div class="d-flex border rounded-pill">
|
<div class="d-flex border rounded-pill">
|
||||||
<button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, -1)">-</button>
|
<button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, -1)">-</button>
|
||||||
@@ -25,6 +26,7 @@
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. Shipping Options -->
|
||||||
<div class="card border-0 shadow-sm p-4 mb-4">
|
<div class="card border-0 shadow-sm p-4 mb-4">
|
||||||
<h5 class="fw-bold mb-3">Shipping Method</h5>
|
<h5 class="fw-bold mb-3">Shipping Method</h5>
|
||||||
<div class="form-check mb-2">
|
<div class="form-check mb-2">
|
||||||
@@ -39,38 +41,70 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 3. Address Fields -->
|
||||||
<div class="card border-0 shadow-sm p-4">
|
<div class="card border-0 shadow-sm p-4">
|
||||||
<h5 class="fw-bold mb-3">Shipping Address</h5>
|
<h5 class="fw-bold mb-3">Shipping Address</h5>
|
||||||
<div class="form-check mb-3">
|
<div class="form-check mb-3">
|
||||||
<input class="form-check-input" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
|
<input class="form-check-input" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
|
||||||
<label class="form-check-label" for="sameAsBilling">Billing address same as shipping</label>
|
<label class="form-check-label" for="sameAsBilling">Billing address same as shipping</label>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Add text inputs for address here, show/hide based on IsSameAddress -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- RIGHT COLUMN: STICKY SUMMARY -->
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
<div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
|
<div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
|
||||||
<h5 class="fw-bold mb-3">Order Summary</h5>
|
<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>Subtotal</span><span>R @Subtotal.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>VAT (15%)</span><span>R @VatAmount.ToString("F2")</span></div>
|
||||||
<div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @($"{ShippingCost:F2}")</span></div>
|
<div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @ShippingCost.ToString("F2")</span></div>
|
||||||
<hr />
|
<hr />
|
||||||
<div class="d-flex justify-content-between mb-4">
|
<div class="d-flex justify-content-between mb-4">
|
||||||
<span class="fw-bold">Total Due</span>
|
<span class="fw-bold">Total Due</span>
|
||||||
<h4 class="fw-bold">R @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")</h4>
|
<h4 class="fw-bold">R @((Subtotal + VatAmount + ShippingCost).ToString("F2"))</h4>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="CompletePurchase">Complete Purchase</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="PayNow">Complete Purchase</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (IsProcessing == true && CheckoutPayload?.Count > 0)
|
@code {
|
||||||
|
private decimal ShippingCost = 0;
|
||||||
|
private bool IsSameAddress = true;
|
||||||
|
|
||||||
|
// Calculations
|
||||||
|
private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
|
||||||
|
private decimal VatAmount => Subtotal * 0.15m;
|
||||||
|
|
||||||
|
// Assuming your CartItems list is managed via a Service or cascading parameter
|
||||||
|
// Here it is locally mocked for this example
|
||||||
|
private List<CartItem> CartItems = new()
|
||||||
{
|
{
|
||||||
<form id="payfastForm" action="@PayfastOptions.Value.CheckoutUrl" method="POST">
|
new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
|
||||||
@foreach (var field in CheckoutPayload)
|
new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 }
|
||||||
|
};
|
||||||
|
|
||||||
|
private void ChangeQuantity(CartItem item, int delta)
|
||||||
{
|
{
|
||||||
<input type="hidden" name="@field.Key" value="@field.Value" />
|
item.Quantity += delta;
|
||||||
|
if (item.Quantity <= 0) CartItems.Remove(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
|
||||||
|
private int GetCartTotal() => CartItems.Sum(i => i.Price * i.Quantity);
|
||||||
|
|
||||||
|
public class CartItem
|
||||||
|
{
|
||||||
|
public int Id { get; set; }
|
||||||
|
public string Title { get; set; } = "";
|
||||||
|
public string Author { get; set; } = "";
|
||||||
|
public int Price { get; set; }
|
||||||
|
public int Quantity { get; set; }
|
||||||
|
}
|
||||||
|
private void CompletePurchase(MouseEventArgs args)
|
||||||
|
{
|
||||||
|
Navigation.NavigateTo("/payment-confirmation");
|
||||||
}
|
}
|
||||||
</form>
|
|
||||||
}
|
}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,160 +0,0 @@
|
|||||||
using LiteCharms.Features.Api.Configuration;
|
|
||||||
using LiteCharms.Features.Hasher;
|
|
||||||
using LiteCharms.Features.MidrandBooks.AuthorBooks;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Orders;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Orders.Models;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Payments;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Payments.Models;
|
|
||||||
|
|
||||||
namespace MidrandBookshop.Components.Pages;
|
|
||||||
|
|
||||||
public partial class Checkout()
|
|
||||||
{
|
|
||||||
[Inject] public HashService HashService { get; set; } = default!;
|
|
||||||
[Inject] public PaymentService PaymentService { get; set; } = default!;
|
|
||||||
[Inject] public OrderService OrderService { get; set; } = default!;
|
|
||||||
[Inject] public BooksService BooksService { get; set; } = default!;
|
|
||||||
[Inject] public CartService CartService { get; set; } = default!;
|
|
||||||
[Inject] public PayfastService PayfastService { 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 HydrationService HydrationService { get; set; } = default!;
|
|
||||||
[Inject] private CancellationToken CancellationToken { get; set; } = default!;
|
|
||||||
|
|
||||||
private Cart ShoppingCart => CartService.ShoppingCart;
|
|
||||||
private ClaimsPrincipal? User { get; set; }
|
|
||||||
private bool IsProcessing { get; set; }
|
|
||||||
|
|
||||||
private decimal ShippingCost = 0;
|
|
||||||
private bool IsSameAddress = true;
|
|
||||||
|
|
||||||
private Dictionary<string, string> CheckoutPayload { get; set; } = [];
|
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
|
||||||
{
|
|
||||||
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
|
|
||||||
User = authState!.User;
|
|
||||||
|
|
||||||
Navigation.LocationChanged += OnLocationChanged;
|
|
||||||
CartService.OnCartChanged += CartService_OnCartChanged;
|
|
||||||
|
|
||||||
await CartService.LoadCartFromStorageAsync();
|
|
||||||
}
|
|
||||||
|
|
||||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
||||||
{
|
|
||||||
if (firstRender == false && HydrationService.CartHydrated == false)
|
|
||||||
{
|
|
||||||
await HydrationService.EnsureCustomerExistsAsync(CancellationToken);
|
|
||||||
await HydrationService.RehydrateCartFromPendingOrderAsync(CancellationToken);
|
|
||||||
|
|
||||||
CartService.NotifyStateChanged();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
|
|
||||||
|
|
||||||
private void OnLocationChanged(object? sender, LocationChangedEventArgs e) => StateHasChanged();
|
|
||||||
|
|
||||||
private async Task ChangeQuantity(CartItem item, int delta)
|
|
||||||
{
|
|
||||||
var peekQuantity = item.Quantity + delta;
|
|
||||||
|
|
||||||
if (peekQuantity < 1) return;
|
|
||||||
|
|
||||||
CartService.UpdateQuantity(item.Price!.Id, delta);
|
|
||||||
|
|
||||||
await CartService.SaveCartToStorageAsync();
|
|
||||||
}
|
|
||||||
|
|
||||||
private async Task RemoveFromCart(CartItem item)
|
|
||||||
{
|
|
||||||
CartService.RemoveOneItem(item.Price!.Id);
|
|
||||||
|
|
||||||
await CartService.SaveCartToStorageAsync();
|
|
||||||
}
|
|
||||||
|
|
||||||
private async Task PayNow(MouseEventArgs args)
|
|
||||||
{
|
|
||||||
if (IsProcessing) return;
|
|
||||||
|
|
||||||
try
|
|
||||||
{
|
|
||||||
IsProcessing = true;
|
|
||||||
|
|
||||||
StateHasChanged();
|
|
||||||
|
|
||||||
Result<long> orderResult;
|
|
||||||
|
|
||||||
var customerId = (long)ShoppingCart.CustomerId!;
|
|
||||||
|
|
||||||
if (!ShoppingCart.OrderId.HasValue)
|
|
||||||
{
|
|
||||||
CreateOrder request = new(ShoppingCart.TotalAmount, null);
|
|
||||||
|
|
||||||
orderResult = await OrderService.CreateOrderAsync(customerId, request, CancellationToken);
|
|
||||||
ShoppingCart.OrderId = orderResult.Value;
|
|
||||||
}
|
|
||||||
|
|
||||||
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, CancellationToken);
|
|
||||||
|
|
||||||
if (bookRequest.IsSuccess)
|
|
||||||
{
|
|
||||||
var orderItem = new CreateOrderItem(bookRequest.Value.Id, item.Price.Id, item.Quantity);
|
|
||||||
orderItems.Add(orderItem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var orderHash = HashService.HashEncodeLongId(orderId).Value;
|
|
||||||
var paymentGen = await PaymentService.CreatePaymentAsync(ShoppingCart.TotalAmount, orderId, orderHash, CancellationToken);
|
|
||||||
|
|
||||||
CreateLedgerEntry ledgerRequest = new()
|
|
||||||
{
|
|
||||||
OrderId = orderId,
|
|
||||||
CustomerId = customerId,
|
|
||||||
PaymentGatewayId = 1, // TODO: lookup value to match user selection
|
|
||||||
PaymentGatewayReference = orderHash,
|
|
||||||
PaymentId = paymentGen.Value,
|
|
||||||
Status = LiteCharms.Features.LedgerStatuses.Sent,
|
|
||||||
};
|
|
||||||
await PaymentService.WriteLedgerEntryAsync(ledgerRequest, CancellationToken);
|
|
||||||
|
|
||||||
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" },
|
|
||||||
{ "notify_url", "https://api.uat.midrandbooks.co.za/v1/payments/payfast/confirm" },
|
|
||||||
{ "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" },
|
|
||||||
};
|
|
||||||
|
|
||||||
var signature = PayfastService.GenerateSignature(CheckoutPayload!, PayfastOptions.Value.Passphrase).Value;
|
|
||||||
CheckoutPayload.Add("signature", signature);
|
|
||||||
|
|
||||||
StateHasChanged();
|
|
||||||
|
|
||||||
await JSRuntime.InvokeVoidAsync("eval", "document.getElementById('payfastForm').submit();");
|
|
||||||
}
|
|
||||||
catch
|
|
||||||
{
|
|
||||||
IsProcessing = false;
|
|
||||||
StateHasChanged();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,9 +1,7 @@
|
|||||||
@page "/"
|
@page "/"
|
||||||
@rendermode InteractiveServer
|
@rendermode InteractiveServer
|
||||||
|
|
||||||
<div id="top-target" @ref="topTargetRef" class="container text-center text-hero-wrapper" />
|
<div id="top-target" class="container text-center text-hero-wrapper">
|
||||||
|
|
||||||
<div class="container text-center text-hero-wrapper">
|
|
||||||
<h1 class="display-3 text-dark mb-3 px-2 master-headline">
|
<h1 class="display-3 text-dark mb-3 px-2 master-headline">
|
||||||
Discover thoughtfully curated<br>books for every reader.
|
Discover thoughtfully curated<br>books for every reader.
|
||||||
</h1>
|
</h1>
|
||||||
@@ -149,7 +147,7 @@
|
|||||||
{
|
{
|
||||||
<BookCard Id="@book.Id"
|
<BookCard Id="@book.Id"
|
||||||
Title="@book.Name"
|
Title="@book.Name"
|
||||||
Author="@(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")"
|
Author="@(ActiveAuthorFilterName ?? "Multiple Authors")"
|
||||||
Price="@ProductPriceCache[book.Id]"
|
Price="@ProductPriceCache[book.Id]"
|
||||||
Category="@ProductPrimaryCategoryCache[book.Id]"
|
Category="@ProductPrimaryCategoryCache[book.Id]"
|
||||||
IsNew="@book.Enabled"
|
IsNew="@book.Enabled"
|
||||||
@@ -168,7 +166,7 @@
|
|||||||
@onclick="() => NavigateToProduct(book.Id)">
|
@onclick="() => NavigateToProduct(book.Id)">
|
||||||
<div class="d-flex align-items-center gap-4 structural-list-left">
|
<div class="d-flex align-items-center gap-4 structural-list-left">
|
||||||
<span class="text-dark fw-medium list-item-title">@book.Name</span>
|
<span class="text-dark fw-medium list-item-title">@book.Name</span>
|
||||||
<span class="text-muted small list-item-author">by @(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")</span>
|
<span class="text-muted small list-item-author">by @(ActiveAuthorFilterName ?? "Multiple Authors")</span>
|
||||||
<span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@ProductPrimaryCategoryCache[book.Id].ToUpper()</span>
|
<span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@ProductPrimaryCategoryCache[book.Id].ToUpper()</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex align-items-center gap-4">
|
<div class="d-flex align-items-center gap-4">
|
||||||
@@ -198,6 +196,7 @@
|
|||||||
|
|
||||||
<a class="back-to-top-btn d-flex align-items-center justify-content-center"
|
<a class="back-to-top-btn d-flex align-items-center justify-content-center"
|
||||||
aria-label="Back to top"
|
aria-label="Back to top"
|
||||||
href="#top-target">
|
href="#top-target"
|
||||||
|
onclick="window.scrollTo({top: 0, behavior: 'smooth'}); return false;">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5,12 12,5 19,12" /></svg>
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5,12 12,5 19,12" /></svg>
|
||||||
</a>
|
</a>
|
||||||
@@ -1,8 +1,7 @@
|
|||||||
using LiteCharms.Features;
|
using LiteCharms.Features.MidrandBooks;
|
||||||
using LiteCharms.Features.MidrandBooks.AuthorBooks;
|
using LiteCharms.Features.MidrandBooks.AuthorBooks;
|
||||||
using LiteCharms.Features.MidrandBooks.Authors;
|
using LiteCharms.Features.MidrandBooks.Authors;
|
||||||
using LiteCharms.Features.MidrandBooks.Categories;
|
using LiteCharms.Features.MidrandBooks.Categories;
|
||||||
using LiteCharms.Features.MidrandBooks.Payments;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Products;
|
using LiteCharms.Features.MidrandBooks.Products;
|
||||||
using LiteCharms.Features.MidrandBooks.Products.Models;
|
using LiteCharms.Features.MidrandBooks.Products.Models;
|
||||||
using LiteCharms.Features.Models;
|
using LiteCharms.Features.Models;
|
||||||
@@ -16,14 +15,10 @@ public partial class Home : ComponentBase
|
|||||||
[Inject] private AuthorService AuthorService { get; set; } = default!;
|
[Inject] private AuthorService AuthorService { get; set; } = default!;
|
||||||
[Inject] private CategoryService CategoryService { get; set; } = default!;
|
[Inject] private CategoryService CategoryService { get; set; } = default!;
|
||||||
[Inject] private NavigationManager Navigation { 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; }
|
[CascadingParameter] public string SharedSearchQuery { get; set; } = string.Empty;
|
||||||
[SupplyParameterFromQuery] public long? AuthorId { get; set; }
|
[SupplyParameterFromQuery] public long? AuthorId { get; set; }
|
||||||
|
|
||||||
private ElementReference topTargetRef;
|
|
||||||
public enum ViewMode { Grid, List }
|
public enum ViewMode { Grid, List }
|
||||||
private ViewMode CurrentViewMode = ViewMode.Grid;
|
private ViewMode CurrentViewMode = ViewMode.Grid;
|
||||||
private string ActiveCategory = "All";
|
private string ActiveCategory = "All";
|
||||||
@@ -45,7 +40,6 @@ public partial class Home : ComponentBase
|
|||||||
|
|
||||||
private Dictionary<long, decimal> ProductPriceCache { get; set; } = [];
|
private Dictionary<long, decimal> ProductPriceCache { get; set; } = [];
|
||||||
private Dictionary<long, string> ProductPrimaryCategoryCache { get; set; } = [];
|
private Dictionary<long, string> ProductPrimaryCategoryCache { get; set; } = [];
|
||||||
private Dictionary<long, string> ProductAuthorCache { get; set; } = [];
|
|
||||||
|
|
||||||
private IEnumerable<Product> FilteredData
|
private IEnumerable<Product> FilteredData
|
||||||
{
|
{
|
||||||
@@ -53,44 +47,19 @@ public partial class Home : ComponentBase
|
|||||||
{
|
{
|
||||||
var data = ProductsCollection.AsEnumerable();
|
var data = ProductsCollection.AsEnumerable();
|
||||||
|
|
||||||
|
// Category filtering restricts rendering solely when checking the open catalog
|
||||||
if (ActiveCategory != "All" && !AuthorId.HasValue)
|
if (ActiveCategory != "All" && !AuthorId.HasValue)
|
||||||
{
|
|
||||||
data = data.Where(p => ProductPrimaryCategoryCache.ContainsKey(p.Id) &&
|
data = data.Where(p => ProductPrimaryCategoryCache.ContainsKey(p.Id) &&
|
||||||
ProductPrimaryCategoryCache[p.Id] == ActiveCategory);
|
ProductPrimaryCategoryCache[p.Id] == ActiveCategory);
|
||||||
}
|
|
||||||
|
|
||||||
|
// Text matching is completely restricted from evaluating author metadata properties
|
||||||
if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
|
if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
|
||||||
{
|
{
|
||||||
var q = SharedSearchQuery.Trim();
|
var q = SharedSearchQuery.Trim();
|
||||||
|
|
||||||
data = data.Where(p => (p.Name ?? "").Contains(q, StringComparison.OrdinalIgnoreCase));
|
data = data.Where(p => (p.Name ?? "").Contains(q, StringComparison.OrdinalIgnoreCase));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ActivePriceFilter != "all")
|
|
||||||
{
|
|
||||||
data = data.Where(p =>
|
|
||||||
{
|
|
||||||
var price = ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m;
|
|
||||||
|
|
||||||
return ActivePriceFilter switch
|
|
||||||
{
|
|
||||||
"under-500" => price < 500m,
|
|
||||||
"500-1000" => price >= 500m && price <= 1000m,
|
|
||||||
"over-1000" => price > 1000m,
|
|
||||||
_ => true
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (OnlyShowNew) data = data.Where(p => p.Enabled);
|
|
||||||
|
|
||||||
data = SelectedSortOption switch
|
|
||||||
{
|
|
||||||
"price-low" => data.OrderBy(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
|
|
||||||
"price-high" => data.OrderByDescending(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
|
|
||||||
"title-asc" => data.OrderBy(p => p.Name ?? string.Empty, StringComparer.OrdinalIgnoreCase),
|
|
||||||
"default" or _ => data
|
|
||||||
};
|
|
||||||
|
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -99,17 +68,6 @@ public partial class Home : ComponentBase
|
|||||||
|
|
||||||
private bool HasMoreItems => FilteredData.Count() > VisibleCount;
|
private bool HasMoreItems => FilteredData.Count() > VisibleCount;
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync() => await CartService.LoadCartFromStorageAsync();
|
|
||||||
|
|
||||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
||||||
{
|
|
||||||
if (firstRender == false && HydrationService.CartHydrated == false)
|
|
||||||
{
|
|
||||||
await HydrationService.EnsureCustomerExistsAsync(CancellationToken);
|
|
||||||
await HydrationService.RehydrateCartFromPendingOrderAsync(CancellationToken);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
protected override async Task OnParametersSetAsync() => await LoadCatalogDataAsync();
|
protected override async Task OnParametersSetAsync() => await LoadCatalogDataAsync();
|
||||||
|
|
||||||
private async Task LoadCatalogDataAsync()
|
private async Task LoadCatalogDataAsync()
|
||||||
@@ -117,9 +75,9 @@ public partial class Home : ComponentBase
|
|||||||
ProductsCollection.Clear();
|
ProductsCollection.Clear();
|
||||||
ProductPriceCache.Clear();
|
ProductPriceCache.Clear();
|
||||||
ProductPrimaryCategoryCache.Clear();
|
ProductPrimaryCategoryCache.Clear();
|
||||||
ProductAuthorCache.Clear();
|
|
||||||
ActiveAuthorFilterName = null;
|
ActiveAuthorFilterName = null;
|
||||||
|
|
||||||
|
// Pipeline A: Extract scoped books directly associated with an ID token parameter
|
||||||
if (AuthorId.HasValue)
|
if (AuthorId.HasValue)
|
||||||
{
|
{
|
||||||
var authorResult = await AuthorService.GetAuthorAsync(AuthorId.Value);
|
var authorResult = await AuthorService.GetAuthorAsync(AuthorId.Value);
|
||||||
@@ -144,9 +102,8 @@ public partial class Home : ComponentBase
|
|||||||
var product = authorBook.Product;
|
var product = authorBook.Product;
|
||||||
|
|
||||||
ProductsCollection.Add(product);
|
ProductsCollection.Add(product);
|
||||||
ProductPriceCache[product.Id] = product.Price?.Amount ?? 0m;
|
|
||||||
|
|
||||||
ProductAuthorCache[product.Id] = ActiveAuthorFilterName ?? "Unknown Author";
|
ProductPriceCache[product.Id] = product.Price?.Amount ?? 0m;
|
||||||
|
|
||||||
var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
|
var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
|
||||||
|
|
||||||
@@ -159,6 +116,7 @@ public partial class Home : ComponentBase
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Pipeline B: Safe structural fallback mapping utilizing the exact backend DateRange object setup
|
||||||
var selectionRange = new DateRange
|
var selectionRange = new DateRange
|
||||||
{
|
{
|
||||||
From = new DateOnly(2020, 1, 1),
|
From = new DateOnly(2020, 1, 1),
|
||||||
@@ -181,10 +139,6 @@ public partial class Home : ComponentBase
|
|||||||
ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
|
ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
|
||||||
? (categoryResult.Value[0].Name ?? "General")
|
? (categoryResult.Value[0].Name ?? "General")
|
||||||
: "General";
|
: "General";
|
||||||
|
|
||||||
ProductAuthorCache[product.Id] = !string.IsNullOrWhiteSpace(product.Metadata?.Manufacturer)
|
|
||||||
? product.Metadata.Manufacturer
|
|
||||||
: "Unknown Author";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -202,38 +156,15 @@ public partial class Home : ComponentBase
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private void ClearAuthorFilter()
|
private void ClearAuthorFilter() => Navigation.NavigateTo("/");
|
||||||
{
|
|
||||||
var newUri = Navigation.GetUriWithQueryParameters("/", new Dictionary<string, object?> { { "authorId", null } });
|
|
||||||
|
|
||||||
Navigation.NavigateTo(newUri);
|
|
||||||
}
|
|
||||||
|
|
||||||
private void ResetFilters()
|
|
||||||
{
|
|
||||||
SelectedSortOption = "default";
|
|
||||||
ActivePriceFilter = "all";
|
|
||||||
OnlyShowNew = false;
|
|
||||||
VisibleCount = ItemsPerPage;
|
|
||||||
}
|
|
||||||
|
|
||||||
private void NavigateToProduct(long id) => Navigation.NavigateTo($"/product/{id}");
|
private void NavigateToProduct(long id) => Navigation.NavigateTo($"/product/{id}");
|
||||||
private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
|
private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
|
||||||
|
private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
|
||||||
private void SelectCategory(string categoryName)
|
|
||||||
{
|
|
||||||
ActiveCategory = categoryName;
|
|
||||||
VisibleCount = ItemsPerPage;
|
|
||||||
|
|
||||||
var updatedUri = Navigation.GetUriWithQueryParameters(Navigation.Uri, new Dictionary<string, object?> {{ "q", null }});
|
|
||||||
|
|
||||||
Navigation.NavigateTo(updatedUri);
|
|
||||||
}
|
|
||||||
|
|
||||||
private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
|
private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
|
||||||
private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
|
private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
|
||||||
private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
|
private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
|
||||||
private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
|
private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
|
||||||
private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
|
private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
|
||||||
|
private void ResetFilters() { SelectedSortOption = "default"; ActivePriceFilter = "all"; OnlyShowNew = false; VisibleCount = ItemsPerPage; }
|
||||||
private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
|
private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
|
||||||
}
|
}
|
||||||
@@ -170,8 +170,3 @@ html {
|
|||||||
border-color: #ffffff !important;
|
border-color: #ffffff !important;
|
||||||
box-shadow: 0 0 0 2px #1a1a1a, 0 6px 16px rgba(0, 0, 0, 0.25) !important;
|
box-shadow: 0 0 0 2px #1a1a1a, 0 6px 16px rgba(0, 0, 0, 0.25) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Direct the smooth scroll action straight to the layout viewport boundary */
|
|
||||||
#top-target {
|
|
||||||
scroll-margin-top: 100vh;
|
|
||||||
}
|
|
||||||
+6
-4
@@ -1,10 +1,10 @@
|
|||||||
@page "/payment-success"
|
@page "/payment-confirmation"
|
||||||
@rendermode InteractiveServer
|
|
||||||
@attribute [Authorize]
|
|
||||||
|
|
||||||
<div class="container py-5">
|
<div class="container py-5">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-8 col-lg-6 text-center">
|
<div class="col-md-8 col-lg-6 text-center">
|
||||||
|
|
||||||
|
<!-- Success Icon & Message -->
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<div class="d-inline-block p-4 rounded-circle bg-success bg-opacity-10 text-success mb-3">
|
<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">
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
@@ -20,11 +20,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Calls to Action -->
|
||||||
<div class="d-grid gap-3 mt-5">
|
<div class="d-grid gap-3 mt-5">
|
||||||
<a href="/" class="btn btn-dark btn-lg rounded-pill py-3">Continue Shopping</a>
|
<a href="/" class="btn btn-dark btn-lg rounded-pill py-3">Continue Shopping</a>
|
||||||
<div class="row g-3">
|
<div class="row g-3">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<a href="/account" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
|
<a href="/order-history" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<a href="/track-order" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
|
<a href="/track-order" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
|
||||||
@@ -32,6 +33,7 @@
|
|||||||
</div>
|
</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>
|
<p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>user@email.com</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
@page "/payment-failed"
|
|
||||||
@rendermode InteractiveServer
|
|
||||||
@attribute [Authorize]
|
|
||||||
|
|
||||||
<div class="container py-5">
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="col-md-8 col-lg-6 text-center">
|
|
||||||
<div class="mb-4">
|
|
||||||
<div class="d-inline-block p-4 rounded-circle bg-danger bg-opacity-10 text-danger 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">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</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="row g-3">
|
|
||||||
<div class="col-6">
|
|
||||||
<a href="/" class="btn btn-outline-dark w-100 rounded-pill py-3">View Store</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<a href="/support" class="btn btn-outline-dark w-100 rounded-pill py-3">Get Help</a>
|
|
||||||
</div>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,8 +1,6 @@
|
|||||||
using LiteCharms.Features;
|
using LiteCharms.Features.MidrandBooks;
|
||||||
using LiteCharms.Features.MidrandBooks.Authors;
|
using LiteCharms.Features.MidrandBooks.Authors;
|
||||||
using LiteCharms.Features.MidrandBooks.Authors.Models;
|
using LiteCharms.Features.MidrandBooks.Authors.Models;
|
||||||
using LiteCharms.Features.MidrandBooks.Payments;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Payments.Models;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Products;
|
using LiteCharms.Features.MidrandBooks.Products;
|
||||||
using LiteCharms.Features.MidrandBooks.Products.Models;
|
using LiteCharms.Features.MidrandBooks.Products.Models;
|
||||||
|
|
||||||
@@ -15,13 +13,9 @@ public partial class ProductView : ComponentBase
|
|||||||
[Inject] private ProductService ProductService { get; set; } = default!;
|
[Inject] private ProductService ProductService { get; set; } = default!;
|
||||||
[Inject] private AuthorService AuthorService { get; set; } = default!;
|
[Inject] private AuthorService AuthorService { get; set; } = default!;
|
||||||
[Inject] private NavigationManager Navigation { get; set; } = default!;
|
[Inject] private NavigationManager Navigation { get; set; } = default!;
|
||||||
[Inject] private CartService CartService { get; set; } = default!;
|
|
||||||
|
|
||||||
protected Cart ShoppingCart => CartService?.ShoppingCart!;
|
|
||||||
|
|
||||||
protected bool IsLoading { get; private set; } = true;
|
protected bool IsLoading { get; private set; } = true;
|
||||||
protected Product? CurrentProduct { get; private set; }
|
protected Product? CurrentProduct { get; private set; }
|
||||||
protected ProductPrice? CurrentPrice { get; private set; }
|
|
||||||
protected decimal LivePrice { get; private set; } = 0.00m;
|
protected decimal LivePrice { get; private set; } = 0.00m;
|
||||||
protected string AuthorName { get; private set; } = "Unknown Author";
|
protected string AuthorName { get; private set; } = "Unknown Author";
|
||||||
protected string PrimaryCategory { get; private set; } = "General";
|
protected string PrimaryCategory { get; private set; } = "General";
|
||||||
@@ -41,6 +35,7 @@ public partial class ProductView : ComponentBase
|
|||||||
CurrentAuthor = null;
|
CurrentAuthor = null;
|
||||||
Thumbnails.Clear();
|
Thumbnails.Clear();
|
||||||
|
|
||||||
|
// 1. Resolve product listing details
|
||||||
var productResult = await ProductService.GetProductAsync(BookId);
|
var productResult = await ProductService.GetProductAsync(BookId);
|
||||||
|
|
||||||
if (productResult.IsSuccess && productResult.Value != null)
|
if (productResult.IsSuccess && productResult.Value != null)
|
||||||
@@ -48,25 +43,31 @@ public partial class ProductView : ComponentBase
|
|||||||
CurrentProduct = productResult.Value;
|
CurrentProduct = productResult.Value;
|
||||||
AuthorName = CurrentProduct.Metadata?.Manufacturer ?? "Unknown Author";
|
AuthorName = CurrentProduct.Metadata?.Manufacturer ?? "Unknown Author";
|
||||||
|
|
||||||
|
// 2. Load pricing data
|
||||||
var priceResult = await ProductService.GetProductPriceAsync(BookId);
|
var priceResult = await ProductService.GetProductPriceAsync(BookId);
|
||||||
LivePrice = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
|
LivePrice = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
|
||||||
CurrentPrice = priceResult.IsSuccess ? priceResult.Value : null;
|
|
||||||
|
|
||||||
|
// 3. Extract active catalog categories
|
||||||
var categoryResult = await ProductService.GetProductCategoriesAsync(BookId);
|
var categoryResult = await ProductService.GetProductCategoriesAsync(BookId);
|
||||||
if (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
|
if (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
|
||||||
|
{
|
||||||
PrimaryCategory = categoryResult.Value[0].Name ?? "General";
|
PrimaryCategory = categoryResult.Value[0].Name ?? "General";
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Retrieve complete contextual model through the newly instantiated AuthorService lookup
|
||||||
var authorResult = await AuthorService.GetAuthorByProductIdAsync(BookId);
|
var authorResult = await AuthorService.GetAuthorByProductIdAsync(BookId);
|
||||||
if (authorResult.IsSuccess && authorResult.Value != null)
|
if (authorResult.IsSuccess && authorResult.Value != null)
|
||||||
{
|
{
|
||||||
CurrentAuthor = authorResult.Value;
|
CurrentAuthor = authorResult.Value;
|
||||||
|
|
||||||
|
// Format fully qualified author text cleanly depending on their publisher model details
|
||||||
if (CurrentAuthor.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(CurrentAuthor.Company))
|
if (CurrentAuthor.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(CurrentAuthor.Company))
|
||||||
AuthorName = CurrentAuthor.Company;
|
AuthorName = CurrentAuthor.Company;
|
||||||
else
|
else
|
||||||
AuthorName = $"{CurrentAuthor.Name} {CurrentAuthor.LastName}".Trim();
|
AuthorName = $"{CurrentAuthor.Name} {CurrentAuthor.LastName}".Trim();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 5. Build presentation image viewer variables
|
||||||
if (!string.IsNullOrWhiteSpace(CurrentProduct.ImageUrl))
|
if (!string.IsNullOrWhiteSpace(CurrentProduct.ImageUrl))
|
||||||
Thumbnails.Add(CurrentProduct.ImageUrl);
|
Thumbnails.Add(CurrentProduct.ImageUrl);
|
||||||
|
|
||||||
@@ -80,7 +81,6 @@ public partial class ProductView : ComponentBase
|
|||||||
catch (Exception)
|
catch (Exception)
|
||||||
{
|
{
|
||||||
CurrentProduct = null;
|
CurrentProduct = null;
|
||||||
CurrentPrice = null;
|
|
||||||
}
|
}
|
||||||
finally
|
finally
|
||||||
{
|
{
|
||||||
@@ -88,50 +88,12 @@ public partial class ProductView : ComponentBase
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
protected async void IncreaseQty()
|
protected void IncreaseQty() => Quantity++;
|
||||||
{
|
protected void DecreaseQty() { if (Quantity > 1) Quantity--; }
|
||||||
if (CurrentPrice is not null)
|
|
||||||
{
|
|
||||||
CartService.UpdateQuantity(CurrentPrice!.Id, 1);
|
|
||||||
|
|
||||||
Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
|
protected void HandleAddToCart()
|
||||||
|
|
||||||
await CartService.SaveCartToStorageAsync();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
protected async void DecreaseQty()
|
|
||||||
{
|
|
||||||
if (Quantity >= 1)
|
|
||||||
{
|
|
||||||
CartService.UpdateQuantity(CurrentPrice!.Id, -1);
|
|
||||||
|
|
||||||
Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
|
|
||||||
|
|
||||||
await CartService.SaveCartToStorageAsync();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
protected async void HandleAddToCart()
|
|
||||||
{
|
{
|
||||||
if (CurrentProduct == null) return;
|
if (CurrentProduct == null) return;
|
||||||
|
|
||||||
if (CurrentPrice is not null)
|
|
||||||
{
|
|
||||||
if(ShoppingCart.Items.Any(p => p.Price!.Id == CurrentPrice.Id))
|
|
||||||
{
|
|
||||||
CartService.UpdateQuantity(CurrentPrice.Id, 1);
|
|
||||||
|
|
||||||
await CartService.SaveCartToStorageAsync();
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
CartService.AddItem(CurrentPrice, CurrentProduct, CurrentAuthor!);
|
|
||||||
|
|
||||||
Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
|
|
||||||
|
|
||||||
await CartService.SaveCartToStorageAsync();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected void ViewAllAuthorBooks()
|
protected void ViewAllAuthorBooks()
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Structural Layout Containers
|
Structural Layout Containers
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.product-container {
|
.product-container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -17,6 +18,7 @@
|
|||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Breadcrumb Navigation Links
|
Breadcrumb Navigation Links
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
margin-bottom: 2.5rem;
|
margin-bottom: 2.5rem;
|
||||||
@@ -47,6 +49,7 @@
|
|||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Left Section: Media Gallery Components
|
Left Section: Media Gallery Components
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.gallery-section {
|
.gallery-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -73,21 +76,16 @@
|
|||||||
mix-blend-mode: multiply;
|
mix-blend-mode: multiply;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dynamic Overlaid Attribute Badges - Centered flawlessly without stacking */
|
/* Dynamic Overlaid Attribute Badges */
|
||||||
.format-badges {
|
.format-badges {
|
||||||
position: absolute !important;
|
position: absolute;
|
||||||
bottom: 1.5rem !important;
|
bottom: 1.5rem;
|
||||||
left: 50% !important; /* Move anchor point to exactly half-width */
|
left: 50%;
|
||||||
right: auto !important;
|
transform: translateX(-50%);
|
||||||
transform: translateX(-50%) !important; /* Offset width symmetrically to center perfectly */
|
display: flex;
|
||||||
display: flex !important;
|
flex-wrap: wrap;
|
||||||
flex-direction: row !important;
|
gap: 0.5rem;
|
||||||
flex-wrap: nowrap !important; /* Firmly prevents items from stacking vertically */
|
white-space: nowrap;
|
||||||
justify-content: center !important;
|
|
||||||
align-items: center !important;
|
|
||||||
gap: 0.5rem !important;
|
|
||||||
width: max-content !important; /* Expands safely according to badges text values */
|
|
||||||
max-width: 90% !important; /* Keeps bounding box clean of parent borders */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
@@ -98,8 +96,6 @@
|
|||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
display: inline-block !important;
|
|
||||||
white-space: nowrap !important; /* Protects badge inner labels from broken line wrapping */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-physical {
|
.badge-physical {
|
||||||
@@ -152,6 +148,7 @@
|
|||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Right Section: Product Details & Typography Controls
|
Right Section: Product Details & Typography Controls
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.details-section {
|
.details-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -212,6 +209,7 @@
|
|||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Interactive E-Commerce Selection Bars
|
Interactive E-Commerce Selection Bars
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.purchase-actions {
|
.purchase-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
@@ -276,6 +274,7 @@
|
|||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Informational Text Elements & Links
|
Informational Text Elements & Links
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.info-block {
|
.info-block {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
@@ -322,6 +321,7 @@
|
|||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Responsive Adaptations & Breakpoints
|
Responsive Adaptations & Breakpoints
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
.product-layout {
|
.product-layout {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@@ -338,25 +338,6 @@
|
|||||||
padding: 1rem 1rem;
|
padding: 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-image-wrapper {
|
|
||||||
min-height: 320px;
|
|
||||||
padding: 2rem 1rem 4.5rem 1rem; /* Extra padding baseline clearance */
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-image {
|
|
||||||
max-height: 240px; /* Fluidly limits image height to avoid overlay overlapping */
|
|
||||||
}
|
|
||||||
|
|
||||||
.format-badges {
|
|
||||||
bottom: 1.25rem !important; /* Fits beautifully aligned at the bottom center */
|
|
||||||
gap: 0.4rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
font-size: 0.65rem !important; /* Clean uniform scaling factor to clear margins */
|
|
||||||
padding: 0.25rem 0.65rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-title {
|
.product-title {
|
||||||
font-size: 1.85rem;
|
font-size: 1.85rem;
|
||||||
}
|
}
|
||||||
|
|||||||
+190
-54
@@ -1,8 +1,4 @@
|
|||||||
@page "/account"
|
@page "/profile"
|
||||||
@using Microsoft.AspNetCore.Components.Authorization
|
|
||||||
@inject NavigationManager Navigation
|
|
||||||
@rendermode InteractiveServer
|
|
||||||
@attribute [Authorize]
|
|
||||||
|
|
||||||
<div class="container py-5">
|
<div class="container py-5">
|
||||||
<h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
|
<h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
|
||||||
@@ -13,36 +9,16 @@
|
|||||||
<button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
|
<button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
|
||||||
<button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
|
<button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
|
||||||
<hr />
|
<hr />
|
||||||
<button class="nav-link text-danger text-start" @onclick="TriggerLogout">Logout</button>
|
<button class="nav-link text-danger text-start">Logout</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<AuthorizeView>
|
|
||||||
<Authorized>
|
|
||||||
<div class="profile-hero-banner mb-5 d-flex align-items-center justify-content-between p-4 border border-light bg-white">
|
|
||||||
<div class="hero-text-content">
|
|
||||||
<div class="meta-tag font-monospace text-uppercase text-muted mb-1">Customer Profile // Active Session</div>
|
|
||||||
<h4 class="fw-bold mb-1 brand-greeting">Welcome back, @(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")!</h4>
|
|
||||||
<p class="text-muted small mb-0 font-monospace">@context.User.FindFirst("email")?.Value</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-crest-svg d-none d-sm-block">
|
|
||||||
<svg viewBox="0 0 100 100" width="70" height="70" stroke="#1A1A1A" stroke-width="1.5" fill="none">
|
|
||||||
<circle cx="50" cy="50" r="40" stroke-dasharray="2 2" stroke="#DDD" />
|
|
||||||
<circle cx="50" cy="50" r="30" />
|
|
||||||
<polygon points="50,20 76,65 24,65" stroke="#1A1A1A" />
|
|
||||||
<line x1="50" y1="20" x2="50" y2="80" stroke-width="1" stroke="#1A1A1A" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Authorized>
|
|
||||||
</AuthorizeView>
|
|
||||||
|
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
|
|
||||||
<div class="tab-pane fade show active" id="orders" role="tabpanel">
|
<div class="tab-pane fade show active" id="orders" role="tabpanel">
|
||||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
<h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Order History</h5>
|
<h5 class="fw-bold m-0">Order History</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex flex-column gap-3">
|
<div class="d-flex flex-column gap-3">
|
||||||
@@ -52,6 +28,7 @@
|
|||||||
{
|
{
|
||||||
<div class="card p-4 shadow-sm order-history-card">
|
<div class="card p-4 shadow-sm order-history-card">
|
||||||
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
|
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
|
||||||
|
|
||||||
<div class="flex-grow-1 w-100">
|
<div class="flex-grow-1 w-100">
|
||||||
<div class="order-meta-track mb-2">
|
<div class="order-meta-track mb-2">
|
||||||
<div class="meta-item-id">
|
<div class="meta-item-id">
|
||||||
@@ -61,14 +38,14 @@
|
|||||||
<span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
|
<span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="meta-item-status">
|
<div class="meta-item-status">
|
||||||
<span class="badge status-badge-base status-@order.Status?.ToLower() text-uppercase">
|
<span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase">
|
||||||
@order.Status
|
@order.Status
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h6 class="mb-2">
|
<h6 class="mb-2">
|
||||||
<a href="/products/@order.ProductId" class="product-link fw-medium text-dark text-decoration-none" title="@order.ProductTitle">
|
<a href="/products/@order.ProductId" class="product-link fw-medium" title="@order.ProductTitle">
|
||||||
@order.ProductTitle
|
@order.ProductTitle
|
||||||
</a>
|
</a>
|
||||||
</h6>
|
</h6>
|
||||||
@@ -77,22 +54,23 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
|
||||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
|
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span class="text-muted text-uppercase tracking-wider font-monospace" style="font-size: 0.7rem;">Shipping to:</span> <span class="text-dark fw-medium">@order.ShippingAddressName</span>
|
<span class="text-muted">Shipped to:</span> @order.ShippingAddressName
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
|
<div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
|
||||||
<div class="text-sm-end mb-sm-2">
|
<div class="text-sm-end mb-sm-2">
|
||||||
<span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider" style="font-size: 0.6rem;">Total Paid</span>
|
<span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider">Total Paid</span>
|
||||||
<span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
|
<span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
|
<button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="svg-icon">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
|
||||||
<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
|
<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@@ -108,7 +86,7 @@
|
|||||||
|
|
||||||
<div class="tab-pane fade" id="shipping" role="tabpanel">
|
<div class="tab-pane fade" id="shipping" role="tabpanel">
|
||||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
<h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Saved Addresses</h5>
|
<h5 class="fw-bold m-0">Saved Addresses</h5>
|
||||||
@if (!showAddForm && editingAddress == null)
|
@if (!showAddForm && editingAddress == null)
|
||||||
{
|
{
|
||||||
<button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
|
<button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
|
||||||
@@ -171,11 +149,11 @@
|
|||||||
<div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
|
<div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
|
||||||
@if (addr.IsBilling)
|
@if (addr.IsBilling)
|
||||||
{
|
{
|
||||||
<span class="badge bg-light text-dark border">[Billing]</span>
|
<span class="badge badge-tag">[Billing]</span>
|
||||||
}
|
}
|
||||||
@if (addr.IsShipping)
|
@if (addr.IsShipping)
|
||||||
{
|
{
|
||||||
<span class="badge bg-light text-dark border">[Shipping]</span>
|
<span class="badge badge-tag">[Shipping]</span>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -186,13 +164,13 @@
|
|||||||
</label>
|
</label>
|
||||||
|
|
||||||
<button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
|
<button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
|
||||||
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
|
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
|
<button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
|
||||||
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
@@ -204,25 +182,183 @@
|
|||||||
|
|
||||||
<div class="tab-pane fade" id="profile" role="tabpanel">
|
<div class="tab-pane fade" id="profile" role="tabpanel">
|
||||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
<h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Profile Settings</h5>
|
<h5 class="fw-bold m-0">Profile Settings</h5>
|
||||||
</div>
|
|
||||||
<div class="card p-5 text-center bg-white border">
|
|
||||||
<div class="mb-4">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#1A1A1A" stroke-width="1.5">
|
|
||||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
|
||||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h5 class="fw-bold mb-2">Centralized Identity Management</h5>
|
|
||||||
<p class="text-muted small mx-auto mb-4" style="max-width: 480px;">
|
|
||||||
For your protection, password modifications, recovery settings, authentication methods, and core credentials are managed through our secure Identity Node.
|
|
||||||
</p>
|
|
||||||
<a href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account" class="btn btn-dark rounded-pill px-5 py-2.5 btn-sm font-monospace text-uppercase tracking-wider">
|
|
||||||
Access Security Center
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card p-4 shadow-sm">
|
||||||
|
<p class="text-muted mb-0">Manage your password and profile data here.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
private bool showAddForm = false;
|
||||||
|
private AddressItem? editingAddress = null;
|
||||||
|
private string newAddressName = "";
|
||||||
|
private string newStreetAddress = "";
|
||||||
|
private string newCity = "";
|
||||||
|
private string newPostalCode = "";
|
||||||
|
private bool isBilling, isShipping;
|
||||||
|
|
||||||
|
private List<OrderItem> orderHistory = new()
|
||||||
|
{
|
||||||
|
new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
|
||||||
|
new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
|
||||||
|
};
|
||||||
|
|
||||||
|
private List<AddressItem> savedAddresses = new()
|
||||||
|
{
|
||||||
|
new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
|
||||||
|
new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
|
||||||
|
new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
|
||||||
|
};
|
||||||
|
|
||||||
|
private void DownloadInvoice(string orderId)
|
||||||
|
{
|
||||||
|
// Handle invoice downloading logic here
|
||||||
|
}
|
||||||
|
|
||||||
|
private void OpenAddForm()
|
||||||
|
{
|
||||||
|
editingAddress = null;
|
||||||
|
showAddForm = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void SaveAddress()
|
||||||
|
{
|
||||||
|
if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
|
||||||
|
{
|
||||||
|
var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
|
||||||
|
var newItem = new AddressItem
|
||||||
|
{
|
||||||
|
Id = nextId,
|
||||||
|
Name = newAddressName,
|
||||||
|
Street = newStreetAddress,
|
||||||
|
City = newCity,
|
||||||
|
PostalCode = newPostalCode,
|
||||||
|
IsBilling = isBilling,
|
||||||
|
IsShipping = isShipping,
|
||||||
|
IsPrimary = !savedAddresses.Any()
|
||||||
|
};
|
||||||
|
savedAddresses.Add(newItem);
|
||||||
|
ResetAddForm();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ResetAddForm()
|
||||||
|
{
|
||||||
|
newAddressName = "";
|
||||||
|
newStreetAddress = "";
|
||||||
|
newCity = "";
|
||||||
|
newPostalCode = "";
|
||||||
|
isBilling = false;
|
||||||
|
isShipping = false;
|
||||||
|
showAddForm = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void StartEditing(AddressItem addr)
|
||||||
|
{
|
||||||
|
showAddForm = false;
|
||||||
|
editingAddress = new AddressItem
|
||||||
|
{
|
||||||
|
Id = addr.Id,
|
||||||
|
Name = addr.Name,
|
||||||
|
Street = addr.Street,
|
||||||
|
City = addr.City,
|
||||||
|
PostalCode = addr.PostalCode,
|
||||||
|
IsBilling = addr.IsBilling,
|
||||||
|
IsShipping = addr.IsShipping,
|
||||||
|
IsPrimary = addr.IsPrimary
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private void UpdateAddress()
|
||||||
|
{
|
||||||
|
if (editingAddress != null)
|
||||||
|
{
|
||||||
|
var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
|
||||||
|
if (target != null)
|
||||||
|
{
|
||||||
|
target.Name = editingAddress.Name;
|
||||||
|
target.Street = editingAddress.Street;
|
||||||
|
target.City = editingAddress.City;
|
||||||
|
target.PostalCode = editingAddress.PostalCode;
|
||||||
|
target.IsBilling = editingAddress.IsBilling;
|
||||||
|
target.IsShipping = editingAddress.IsShipping;
|
||||||
|
}
|
||||||
|
editingAddress = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void CancelEditing()
|
||||||
|
{
|
||||||
|
editingAddress = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void DeleteAddress(AddressItem addr)
|
||||||
|
{
|
||||||
|
if (editingAddress?.Id == addr.Id)
|
||||||
|
{
|
||||||
|
editingAddress = null;
|
||||||
|
}
|
||||||
|
savedAddresses.Remove(addr);
|
||||||
|
if (addr.IsPrimary && savedAddresses.Any())
|
||||||
|
{
|
||||||
|
savedAddresses.First().IsPrimary = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void SetPrimary(AddressItem target, ChangeEventArgs e)
|
||||||
|
{
|
||||||
|
var isChecked = (bool)(e.Value ?? false);
|
||||||
|
if (isChecked)
|
||||||
|
{
|
||||||
|
foreach (var addr in savedAddresses)
|
||||||
|
{
|
||||||
|
addr.IsPrimary = (addr.Id == target.Id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
target.IsPrimary = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public class AddressItem
|
||||||
|
{
|
||||||
|
public int Id { get; set; }
|
||||||
|
public string Name { get; set; } = "";
|
||||||
|
public string Street { get; set; } = "";
|
||||||
|
public string City { get; set; } = "";
|
||||||
|
public string PostalCode { get; set; } = "";
|
||||||
|
public bool IsBilling { get; set; }
|
||||||
|
public bool IsShipping { get; set; }
|
||||||
|
public bool IsPrimary { get; set; }
|
||||||
|
}
|
||||||
|
|
||||||
|
public class OrderItem
|
||||||
|
{
|
||||||
|
public string OrderId { get; set; } = "";
|
||||||
|
public string ProductId { get; set; } = "";
|
||||||
|
public string ProductTitle { get; set; } = "";
|
||||||
|
public DateTime OrderDate { get; set; }
|
||||||
|
public string ShippingAddressName { get; set; } = "";
|
||||||
|
public string Status { get; set; } = "";
|
||||||
|
public double Total { get; set; }
|
||||||
|
|
||||||
|
public string DisplayTitle
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
if (string.IsNullOrWhiteSpace(ProductTitle)) return "";
|
||||||
|
const int maxLength = 21; // Shifted slightly down from 25 to protect bounds against lower resolutions
|
||||||
|
return ProductTitle.Length <= maxLength
|
||||||
|
? ProductTitle
|
||||||
|
: $"{ProductTitle.Substring(0, maxLength)}...";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,204 @@
|
|||||||
|
::deep .container {
|
||||||
|
max-width: 1100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Layout overrides */
|
||||||
|
.nav-pills .nav-link {
|
||||||
|
color: #6c757d;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-pills .nav-link.active {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #1A1A1A;
|
||||||
|
border-bottom: 2px solid #1A1A1A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-pills .nav-link:hover:not(.active) {
|
||||||
|
color: #1A1A1A;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards layout rules */
|
||||||
|
.card {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-card {
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-card:hover {
|
||||||
|
border-color: rgba(0, 0, 0, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container Wrapper to Suppress the Scrollbar completely */
|
||||||
|
.table-container-fixed {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden; /* Hard disables horizontal scroll bar activation */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global Table Typography - Reduced uniformly to keep items on a single line */
|
||||||
|
.profile-table {
|
||||||
|
font-size: 0.78rem; /* Scaled down further to eliminate overflow bounds */
|
||||||
|
width: 100%;
|
||||||
|
table-layout: fixed; /* Fixes proportions to fit 100% parent container space */
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-table tbody td {
|
||||||
|
padding-top: 0.85rem;
|
||||||
|
padding-bottom: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-table thead th {
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.04rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Compact Column Proportions */
|
||||||
|
.col-order-id {
|
||||||
|
width: 115px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-date {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-total {
|
||||||
|
width: 85px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-status {
|
||||||
|
width: 105px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-invoice {
|
||||||
|
width: 65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-title {
|
||||||
|
width: auto; /* Takes shared residual space smoothly */
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-address {
|
||||||
|
width: auto; /* Takes shared residual space smoothly */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Product link handling */
|
||||||
|
.product-link {
|
||||||
|
color: #1A1A1A;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dashed transparent;
|
||||||
|
transition: border-color 0.2s ease;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-link:hover {
|
||||||
|
border-color: #1A1A1A;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base Badge Settings */
|
||||||
|
.badge {
|
||||||
|
font-size: 0.62rem;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
padding: 0.4em 0.8em;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status Badge Palette Colors */
|
||||||
|
.status-shipped {
|
||||||
|
background-color: #e3f2fd !important;
|
||||||
|
color: #0d6efd !important;
|
||||||
|
border: 1px solid rgba(13, 110, 253, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-delivered {
|
||||||
|
background-color: #e8f5e9 !important;
|
||||||
|
color: #198754 !important;
|
||||||
|
border: 1px solid rgba(25, 135, 84, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-tag {
|
||||||
|
background-color: #f0f0f0 !important;
|
||||||
|
color: #4a4a4a !important;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form Buttons */
|
||||||
|
.btn-outline-dark {
|
||||||
|
border-radius: 50px;
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark {
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Action button configurations */
|
||||||
|
.action-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background-color 0.15s ease, transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn.text-danger:hover {
|
||||||
|
background-color: rgba(220, 53, 69, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Compact SVG Icons sizing */
|
||||||
|
.svg-icon {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
fill: currentColor;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pointer-label {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Shared Card Styling Unification Rules */
|
||||||
|
.order-history-card {
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
border-radius: 0; /* Matches your address card configuration */
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-history-card:hover {
|
||||||
|
border-color: rgba(0, 0, 0, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Micro Typography Alignment */
|
||||||
|
.xx-small {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tracking-wider {
|
||||||
|
letter-spacing: 0.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments across layout break-points */
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
.border-sm-top-0 {
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
@inject NavigationManager Navigation
|
|
||||||
|
|
||||||
<div class="artistic-redirect-container">
|
|
||||||
<div class="container h-100">
|
|
||||||
<div class="row align-items-center justify-content-center min-vh-70 py-5">
|
|
||||||
<div class="col-12 col-md-5 d-flex flex-column align-items-center text-center">
|
|
||||||
|
|
||||||
<div class="artistic-svg-wrapper mb-4">
|
|
||||||
<svg viewBox="0 0 400 400" width="280" height="280" stroke="#1A1A1A" stroke-width="2" fill="none">
|
|
||||||
<path d="M60 300 L340 300" stroke-dasharray="4 4" />
|
|
||||||
|
|
||||||
<path d="M120 300 L120 160 Q120 100 200 100 Q280 100 280 160 L280 300" />
|
|
||||||
|
|
||||||
<path d="M170 170 L230 170 L220 230 L200 250 L180 230 Z" fill="#F8F8F8" />
|
|
||||||
<circle cx="200" cy="195" r="8" fill="#1A1A1A" />
|
|
||||||
<line x1="200" y1="203" x2="200" y2="218" stroke-width="3" />
|
|
||||||
|
|
||||||
<circle class="animated-pulse-ring" cx="200" cy="180" r="60" stroke="#DDD" stroke-width="1" />
|
|
||||||
<circle class="animated-pulse-ring-delayed" cx="200" cy="180" r="45" stroke="#EEE" stroke-width="1" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="editorial-spinner mb-4"></div>
|
|
||||||
|
|
||||||
<div class="meta-tag font-monospace text-uppercase text-muted mb-2">Secure Connection // Identity Node</div>
|
|
||||||
<h2 class="fw-bold text-dark mb-3 editorial-subheadline">Verifying Session</h2>
|
|
||||||
<p class="text-muted body-manifesto-text-center">
|
|
||||||
Redirecting you safely to the identity gateway to authorize your access permissions...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
namespace MidrandBookshop.Components;
|
|
||||||
|
|
||||||
public partial class RedirectToLogin
|
|
||||||
{
|
|
||||||
protected override void OnInitialized()
|
|
||||||
{
|
|
||||||
var relativePath = Navigation.ToBaseRelativePath(Navigation.Uri);
|
|
||||||
var sanitizedRedirectPath = relativePath.StartsWith('/') ? relativePath : $"/{relativePath}";
|
|
||||||
|
|
||||||
Navigation.NavigateTo($"/login?redirectUri={Uri.EscapeDataString(sanitizedRedirectPath)}", forceLoad: true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
.artistic-redirect-container {
|
|
||||||
background-color: #ffffff;
|
|
||||||
min-height: 70vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.artistic-svg-wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editorial-subheadline {
|
|
||||||
font-family: 'Playfair Display', serif;
|
|
||||||
font-size: 2.2rem;
|
|
||||||
line-height: 1.2;
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
color: #111111;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body-manifesto-text-center {
|
|
||||||
font-size: 1rem;
|
|
||||||
max-width: 360px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-tag {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
letter-spacing: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Minimalist Spinner Concept */
|
|
||||||
.editorial-spinner {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border: 2px solid #F0F0F0;
|
|
||||||
border-top: 2px solid #1A1A1A; /* High contrast matching the SVG path line color */
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin-editorial 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Subtle background ring pulse paths */
|
|
||||||
.animated-pulse-ring {
|
|
||||||
transform-origin: 200px 180px;
|
|
||||||
animation: gate-pulse 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated-pulse-ring-delayed {
|
|
||||||
transform-origin: 200px 180px;
|
|
||||||
animation: gate-pulse 3s ease-in-out infinite;
|
|
||||||
animation-delay: 1.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin-editorial {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gate-pulse {
|
|
||||||
0%, 100% {
|
|
||||||
transform: scale(0.95);
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,14 +1,7 @@
|
|||||||
@using Microsoft.AspNetCore.Components.Authorization
|
@using MidrandBookshop.Components.Pages
|
||||||
@using MidrandBookshop.Components.Pages
|
|
||||||
|
|
||||||
<CascadingAuthenticationState>
|
|
||||||
<Router AppAssembly="@typeof(Program).Assembly">
|
<Router AppAssembly="@typeof(Program).Assembly">
|
||||||
<Found Context="routeData">
|
<Found Context="routeData">
|
||||||
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
|
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||||
<NotAuthorized>
|
|
||||||
<RedirectToLogin />
|
|
||||||
</NotAuthorized>
|
|
||||||
</AuthorizeRouteView>
|
|
||||||
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
||||||
</Found>
|
</Found>
|
||||||
<NotFound>
|
<NotFound>
|
||||||
@@ -17,4 +10,3 @@
|
|||||||
</LayoutView>
|
</LayoutView>
|
||||||
</NotFound>
|
</NotFound>
|
||||||
</Router>
|
</Router>
|
||||||
</CascadingAuthenticationState>
|
|
||||||
@@ -9,4 +9,3 @@
|
|||||||
@using MidrandBookshop
|
@using MidrandBookshop
|
||||||
@using MidrandBookshop.Components
|
@using MidrandBookshop.Components
|
||||||
@using MidrandBookshop.Components.Layout
|
@using MidrandBookshop.Components.Layout
|
||||||
@using Microsoft.AspNetCore.Authorization;@using Microsoft.AspNetCore.Components.Authorization
|
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
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 > 0 && ShoppingCart.CustomerId > 0)
|
|
||||||
{
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -18,13 +18,13 @@
|
|||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<PackageReference Include="LiteCharms.Features" Version="1.137.0" />
|
<PackageReference Include="LiteCharms.Features" Version="1.56.0" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
<!-- UI -->
|
<!-- UI -->
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
|
<PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
|
||||||
<PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.137.0" />
|
<PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.56.0" />
|
||||||
|
|
||||||
<!-- Global Usings -->
|
<!-- Global Usings -->
|
||||||
<Using Include="Blazored.Toast.Services" />
|
<Using Include="Blazored.Toast.Services" />
|
||||||
@@ -51,18 +51,7 @@
|
|||||||
<!-- Shared Global Usings -->
|
<!-- Shared Global Usings -->
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<Using Include="Blazored.Toast" />
|
<Using Include="Blazored.Toast" />
|
||||||
<Using Include="Microsoft.JSInterop" />
|
|
||||||
<Using Include="System.Globalization" />
|
|
||||||
<Using Include="System.Security.Claims" />
|
|
||||||
<Using Include="Microsoft.Extensions.Options" />
|
|
||||||
<Using Include="Microsoft.EntityFrameworkCore" />
|
|
||||||
<Using Include="Microsoft.AspNetCore.HttpOverrides" />
|
|
||||||
<Using Include="Microsoft.AspNetCore.Components.Authorization" />
|
|
||||||
<Using Include="Microsoft.AspNetCore.Components.Routing" />
|
|
||||||
<Using Include="Microsoft.AspNetCore.Components.Web" />
|
|
||||||
<Using Include="Microsoft.AspNetCore.WebUtilities" />
|
|
||||||
<Using Include="Microsoft.AspNetCore.Components" />
|
<Using Include="Microsoft.AspNetCore.Components" />
|
||||||
<Using Include="System.Security.Cryptography.X509Certificates" />
|
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
+32
-24
@@ -1,51 +1,59 @@
|
|||||||
using LiteCharms.Features.Extensions;
|
using LiteCharms.Features.Extensions;
|
||||||
using LiteCharms.Features.Postgres;
|
using LiteCharms.Features.Mediator;
|
||||||
using MidrandBookshop;
|
using LiteCharms.Features.MidrandBooks.Extensions;
|
||||||
using MidrandBookshop.Components;
|
using MidrandBookshop.Components;
|
||||||
using static LiteCharms.Features.Extensions.Quartz;
|
using static LiteCharms.Features.Extensions.Quartz;
|
||||||
|
|
||||||
var builder = WebApplication.CreateBuilder(args);
|
var builder = WebApplication.CreateBuilder(args);
|
||||||
|
|
||||||
|
builder.Services.AddRazorComponents()
|
||||||
|
.AddInteractiveServerComponents();
|
||||||
|
|
||||||
builder.AddMonitoring();
|
builder.AddMonitoring();
|
||||||
builder.Services.RegisterServices(builder.Configuration);
|
builder.Services.AddEndpointsApiExplorer();
|
||||||
|
|
||||||
|
builder.Services.AddMediator();
|
||||||
|
|
||||||
|
builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
|
||||||
|
builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
|
||||||
|
|
||||||
|
builder.Services.AddQuartzSchedulerClient(MidrandShopSchedulerName, builder.Configuration);
|
||||||
|
|
||||||
|
builder.Services.AddEmailServices(builder.Configuration);
|
||||||
|
builder.Services.AddEmailServiceBus();
|
||||||
|
|
||||||
|
builder.Services.AddShopServices();
|
||||||
|
builder.Services.AddMidrandShopDatabase(builder.Configuration);
|
||||||
|
|
||||||
|
builder.Services.AddMidrandShopPostgresHealthCheck();
|
||||||
|
builder.Services.AddMidrandShopQuartzHealthCheck();
|
||||||
|
builder.Services.AddHealthChecksSupport(builder.Configuration);
|
||||||
|
|
||||||
var app = builder.Build();
|
var app = builder.Build();
|
||||||
|
|
||||||
|
var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
|
||||||
|
var scheduler = await schedulerFactory.GetScheduler(MidrandShopSchedulerName);
|
||||||
|
|
||||||
|
if (!scheduler!.IsStarted)
|
||||||
|
await scheduler.Start();
|
||||||
|
|
||||||
if (!app.Environment.IsDevelopment())
|
if (!app.Environment.IsDevelopment())
|
||||||
{
|
{
|
||||||
app.UseExceptionHandler("/Error", createScopeForErrors: true);
|
app.UseExceptionHandler("/Error", createScopeForErrors: true);
|
||||||
app.UseHsts();
|
app.UseHsts();
|
||||||
}
|
}
|
||||||
|
|
||||||
app.UseForwardedHeaders();
|
|
||||||
app.UseHttpsRedirection();
|
|
||||||
|
|
||||||
app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
|
|
||||||
app.UseHealthChecks("/health", new HealthCheckOptions
|
app.UseHealthChecks("/health", new HealthCheckOptions
|
||||||
{
|
{
|
||||||
ResponseWriter = HealthChecks.UI.Client.UIResponseWriter.WriteHealthCheckUIResponse
|
ResponseWriter = HealthChecks.UI.Client.UIResponseWriter.WriteHealthCheckUIResponse
|
||||||
});
|
});
|
||||||
|
|
||||||
app.MapStaticAssets();
|
app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
|
||||||
app.UseCookiePolicy();
|
app.UseHttpsRedirection();
|
||||||
|
|
||||||
app.UseAuthentication();
|
|
||||||
app.UseAuthorization();
|
|
||||||
app.UseAntiforgery();
|
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.MapStaticAssets();
|
||||||
app.MapRazorComponents<App>()
|
app.MapRazorComponents<App>()
|
||||||
.AddInteractiveServerRenderMode();
|
.AddInteractiveServerRenderMode();
|
||||||
|
|
||||||
|
|||||||
@@ -13,8 +13,8 @@
|
|||||||
"https": {
|
"https": {
|
||||||
"commandName": "Project",
|
"commandName": "Project",
|
||||||
"dotnetRunMessages": true,
|
"dotnetRunMessages": true,
|
||||||
"launchBrowser": false,
|
"launchBrowser": true,
|
||||||
"applicationUrl": "https://localhost:8443;http://localhost:8080",
|
"applicationUrl": "https://localhost:7021;http://localhost:5053",
|
||||||
"environmentVariables": {
|
"environmentVariables": {
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,60 +0,0 @@
|
|||||||
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.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,25 +1,4 @@
|
|||||||
{
|
{
|
||||||
"PayfastSettings": {
|
|
||||||
"CheckoutUrl": "https://sandbox.payfast.co.za/eng/process",
|
|
||||||
"ValidHosts": [
|
|
||||||
"www.payfast.co.za",
|
|
||||||
"sandbox.payfast.co.za",
|
|
||||||
"ips.payfast.co.za",
|
|
||||||
"api.payfast.co.za",
|
|
||||||
"payment.payfast.io"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"LiteCharmsSettings": {
|
|
||||||
"Authority": "https://sts.security.khongisa.co.za"
|
|
||||||
},
|
|
||||||
"LiteCharmsClientSettings": {
|
|
||||||
"Authority": "https://sts.security.khongisa.co.za",
|
|
||||||
"GrantType": "client_credentials",
|
|
||||||
"Scope": "midrandbooks-api"
|
|
||||||
},
|
|
||||||
"HasherSettings": {
|
|
||||||
"MinHashLength": 11
|
|
||||||
},
|
|
||||||
"BookshopS3Settings": {
|
"BookshopS3Settings": {
|
||||||
"ServiceUrl": "http://192.168.1.177:30900",
|
"ServiceUrl": "http://192.168.1.177:30900",
|
||||||
"Region": "garage",
|
"Region": "garage",
|
||||||
|
|||||||
+46
-54
@@ -1,3 +1,4 @@
|
|||||||
|
---
|
||||||
apiVersion: v1
|
apiVersion: v1
|
||||||
kind: Namespace
|
kind: Namespace
|
||||||
metadata:
|
metadata:
|
||||||
@@ -10,25 +11,20 @@ metadata:
|
|||||||
namespace: midrandbooks-uat
|
namespace: midrandbooks-uat
|
||||||
data:
|
data:
|
||||||
ASPNETCORE_ENVIRONMENT: "Development"
|
ASPNETCORE_ENVIRONMENT: "Development"
|
||||||
ASPNETCORE_URLS: "http://0.0.0.0:8443"
|
ASPNETCORE_URLS: "http://0.0.0.0:8080"
|
||||||
Monitoring__Address: "http://aspire-dashboard-service.aspire.svc.cluster.local:18889"
|
Monitoring__Address: "http://aspire-dashboard-service.aspire.svc.cluster.local:18889"
|
||||||
Monitoring__ServiceName: "MidrandBooks.Uat"
|
Monitoring__ServiceName: "MidrandBooks.Uat"
|
||||||
HasherSettings__MinHashLength: "11"
|
---
|
||||||
BookshopS3Settings__ServiceUrl: "http://garage.garage.svc.cluster.local:3900"
|
apiVersion: v1
|
||||||
BookshopS3Settings__Region: "garage"
|
kind: Secret
|
||||||
BookshopS3Settings__BucketName: "bookshop"
|
metadata:
|
||||||
BookshopS3Settings__CdnBaseUrl: "https://bookshop.cdn.khongisa.co.za"
|
name: midrandbooks-secrets
|
||||||
PayfastSettings__CheckoutUrl: "https://sandbox.payfast.co.za/eng/process"
|
namespace: midrandbooks-uat
|
||||||
PayfastSettings__ValidHosts__0: "www.payfast.co.za"
|
type: Opaque
|
||||||
PayfastSettings__ValidHosts__1: "sandbox.payfast.co.za"
|
data:
|
||||||
PayfastSettings__ValidHosts__2: "ips.payfast.co.za"
|
connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
|
||||||
PayfastSettings__ValidHosts__3: "api.payfast.co.za"
|
connection-string-quartz: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPXNjaGVkdWxlci1kZXY7VXNlcm5hbWU9c2NoZWR1bGVyLWRldi11c2VyO1Bhc3N3b3JkPWtWVm1vV0tKM3h6Z1FYO1BlcnNpc3QgU2VjdXJpdHkgSW5mbz1UcnVl
|
||||||
PayfastSettings__ValidHosts__4: "payment.payfast.io"
|
aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw==
|
||||||
LiteCharmsSettings__Authority: "https://sts.security.khongisa.co.za"
|
|
||||||
LiteCharmsSettings__Audience: "midrandbooks-api"
|
|
||||||
LiteCharmsClientSettings__Authority: "https://sts.security.khongisa.co.za"
|
|
||||||
LiteCharmsClientSettings__GrantType: "client_credentials"
|
|
||||||
LiteCharmsClientSettings__Scope: "midrandbooks-api"
|
|
||||||
---
|
---
|
||||||
apiVersion: v1
|
apiVersion: v1
|
||||||
kind: PersistentVolumeClaim
|
kind: PersistentVolumeClaim
|
||||||
@@ -49,7 +45,6 @@ metadata:
|
|||||||
namespace: midrandbooks-uat
|
namespace: midrandbooks-uat
|
||||||
spec:
|
spec:
|
||||||
replicas: 2
|
replicas: 2
|
||||||
revisionHistoryLimit: 0
|
|
||||||
selector:
|
selector:
|
||||||
matchLabels:
|
matchLabels:
|
||||||
app: midrandbooks
|
app: midrandbooks
|
||||||
@@ -77,60 +72,56 @@ spec:
|
|||||||
memory: "256Mi"
|
memory: "256Mi"
|
||||||
cpu: "100m"
|
cpu: "100m"
|
||||||
ports:
|
ports:
|
||||||
- containerPort: 8443
|
- containerPort: 8080
|
||||||
envFrom:
|
envFrom:
|
||||||
- configMapRef:
|
- configMapRef:
|
||||||
name: midrandbooks-config
|
name: midrandbooks-config
|
||||||
- secretRef:
|
|
||||||
name: midrandbooks-secrets
|
|
||||||
env:
|
env:
|
||||||
- name: DataProtection__Certificate
|
- name: ConnectionStrings__PostgresScheduler
|
||||||
valueFrom:
|
valueFrom:
|
||||||
secretKeyRef:
|
secretKeyRef:
|
||||||
name: litecharms-certs
|
name: midrandbooks-secrets
|
||||||
key: litecharms.pfx
|
key: connection-string-quartz
|
||||||
- name: DataProtection__Password
|
- name: ConnectionStrings__PostgresMidrandBooks
|
||||||
valueFrom:
|
valueFrom:
|
||||||
secretKeyRef:
|
secretKeyRef:
|
||||||
name: litecharms-certs
|
name: midrandbooks-secrets
|
||||||
key: passphrase
|
key: connection-string
|
||||||
|
- name: Monitoring__Address
|
||||||
|
valueFrom:
|
||||||
|
configMapKeyRef:
|
||||||
|
name: midrandbooks-config
|
||||||
|
key: Monitoring__Address
|
||||||
|
- name: Monitoring__ServiceName
|
||||||
|
valueFrom:
|
||||||
|
configMapKeyRef:
|
||||||
|
name: midrandbooks-config
|
||||||
|
key: Monitoring__ServiceName
|
||||||
|
- name: Monitoring__ApiKey
|
||||||
|
valueFrom:
|
||||||
|
secretKeyRef:
|
||||||
|
name: midrandbooks-secrets
|
||||||
|
key: aspire-apikey
|
||||||
volumeMounts:
|
volumeMounts:
|
||||||
- name: cluster-certs-volume
|
|
||||||
mountPath: /tmp/litecharms-raw-certs
|
|
||||||
readOnly: true
|
|
||||||
- name: data
|
- name: data
|
||||||
mountPath: /app/content
|
mountPath: /app/wwwroot/content
|
||||||
subPath: bookshop-content
|
resources:
|
||||||
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:
|
livenessProbe:
|
||||||
httpGet:
|
httpGet:
|
||||||
path: /health
|
path: /health
|
||||||
port: 8443
|
port: 8080
|
||||||
scheme: HTTP
|
|
||||||
initialDelaySeconds: 5
|
initialDelaySeconds: 5
|
||||||
periodSeconds: 10
|
periodSeconds: 10
|
||||||
readinessProbe:
|
readinessProbe:
|
||||||
httpGet:
|
httpGet:
|
||||||
path: /health
|
path: /health
|
||||||
port: 8443
|
port: 8080
|
||||||
scheme: HTTP
|
|
||||||
initialDelaySeconds: 3
|
initialDelaySeconds: 3
|
||||||
periodSeconds: 5
|
periodSeconds: 5
|
||||||
volumes:
|
volumes:
|
||||||
- name: data
|
- name: data
|
||||||
persistentVolumeClaim:
|
persistentVolumeClaim:
|
||||||
claimName: midrandbooks-pvc
|
claimName: midrandbooks-pvc
|
||||||
- name: cluster-certs-volume
|
|
||||||
secret:
|
|
||||||
secretName: litecharms-certs
|
|
||||||
---
|
---
|
||||||
apiVersion: v1
|
apiVersion: v1
|
||||||
kind: Service
|
kind: Service
|
||||||
@@ -138,12 +129,14 @@ metadata:
|
|||||||
name: midrandbooks-service
|
name: midrandbooks-service
|
||||||
namespace: midrandbooks-uat
|
namespace: midrandbooks-uat
|
||||||
spec:
|
spec:
|
||||||
ports:
|
type: ClusterIP
|
||||||
- name: https
|
|
||||||
port: 443
|
|
||||||
targetPort: 8443
|
|
||||||
selector:
|
selector:
|
||||||
app: midrandbooks
|
app: midrandbooks
|
||||||
|
ports:
|
||||||
|
- name: http
|
||||||
|
protocol: TCP
|
||||||
|
port: 80
|
||||||
|
targetPort: 8080
|
||||||
---
|
---
|
||||||
apiVersion: traefik.io/v1alpha1
|
apiVersion: traefik.io/v1alpha1
|
||||||
kind: IngressRoute
|
kind: IngressRoute
|
||||||
@@ -158,11 +151,10 @@ spec:
|
|||||||
kind: Rule
|
kind: Rule
|
||||||
services:
|
services:
|
||||||
- name: midrandbooks-service
|
- name: midrandbooks-service
|
||||||
port: 443
|
port: 80
|
||||||
sticky:
|
sticky:
|
||||||
cookie:
|
cookie:
|
||||||
name: "lp-sticky-session"
|
name: "lp-sticky-session"
|
||||||
httpOnly: true
|
httpOnly: true
|
||||||
secure: true
|
secure: true
|
||||||
scheme: http
|
|
||||||
tls: {}
|
tls: {}
|
||||||
Reference in New Issue
Block a user