diff --git a/MidrandBookshop/Components/Layout/ReconnectModal.razor b/MidrandBookshop/Components/Layout/ReconnectModal.razor index e740b0c..5913b7e 100644 --- a/MidrandBookshop/Components/Layout/ReconnectModal.razor +++ b/MidrandBookshop/Components/Layout/ReconnectModal.razor @@ -1,31 +1,58 @@  -
-
+ \ No newline at end of file diff --git a/MidrandBookshop/Components/Layout/ReconnectModal.razor.css b/MidrandBookshop/Components/Layout/ReconnectModal.razor.css index 3ad3773..53204b6 100644 --- a/MidrandBookshop/Components/Layout/ReconnectModal.razor.css +++ b/MidrandBookshop/Components/Layout/ReconnectModal.razor.css @@ -1,157 +1,218 @@ -.components-reconnect-first-attempt-visible, -.components-reconnect-repeated-attempt-visible, -.components-reconnect-failed-visible, -.components-pause-visible, -.components-resume-failed-visible, -.components-rejoining-animation { - display: none; -} - -#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible, -#components-reconnect-modal.components-reconnect-show .components-rejoining-animation, -#components-reconnect-modal.components-reconnect-paused .components-pause-visible, -#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible, -#components-reconnect-modal.components-reconnect-retrying, -#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible, -#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation, -#components-reconnect-modal.components-reconnect-failed, -#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible { - display: block; -} - +/* ========================================================================== + Midrand Books — Glassine Architectural Veil & Ribbon Strip + ========================================================================== */ +/* --- Native Dialog Element Layout Overrides --- */ #components-reconnect-modal { - background-color: white; - width: 20rem; - margin: 20vh auto; - padding: 2rem; - border: 0; - border-radius: 0.5rem; - box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3); - opacity: 0; - transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete; - animation: components-reconnect-modal-fadeOutOpacity 0.5s both; - &[open] - -{ - animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s; - animation-fill-mode: both; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + max-width: 100vw; + max-height: 100vh; + margin: 0; + padding: 0; + border: none; + background: transparent; + z-index: 99999; + overflow: hidden; } -} - -#components-reconnect-modal::backdrop { - background-color: rgba(0, 0, 0, 0.4); - animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out; - opacity: 1; -} - -@keyframes components-reconnect-modal-slideUp { - 0% { - transform: translateY(30px) scale(0.95); + /* Remove default browser modal backdrop blockout to allow custom layering below */ + #components-reconnect-modal::backdrop { + background: transparent; } - 100% { +/* --- Glassine Page Jacket Layer --- + Frosted translucent shield that preserves context visibility while blocking mouse actions +*/ +.glassine-page-jacket { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(251, 251, 250, 0.4); /* Premium warm paper tint */ + backdrop-filter: blur(5px); /* Elegant frosted glass sweep */ + cursor: wait; + animation: glassFadeIn 0.35s ease-out forwards; +} + +@keyframes glassFadeIn { + from { + opacity: 0; + backdrop-filter: blur(0px); + } + + to { + opacity: 1; + backdrop-filter: blur(5px); + } +} + +/* --- The Sliding Ribbon Banner --- */ +.literary-sync-strip { + position: absolute; + top: 0; + left: 0; + width: 100%; + background-color: #FFFFFF; + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02); + padding: 1.1rem 2rem; + box-sizing: border-box; + z-index: 2; + /* Animation kinematics: smooth physical drop slide */ + transform: translateY(-100%); + animation: stripSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +@keyframes stripSlideDown { + to { transform: translateY(0); } } -@keyframes components-reconnect-modal-fadeInOpacity { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes components-reconnect-modal-fadeOutOpacity { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -.components-reconnect-container { - display: flex; - flex-direction: column; +/* --- Ribbon Layout Matrix Grid --- */ +.strip-container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: auto 1fr auto; align-items: center; - gap: 1rem; + gap: 2.5rem; } -#components-reconnect-modal p { - margin: 0; - text-align: center; +/* Left Node Ticker Elements & Animated Vector */ +.sync-status-indicator { + display: flex; + align-items: center; + gap: 0.85rem; + border-right: 1px solid rgba(0, 0, 0, 0.08); + padding-right: 2rem; } -#components-reconnect-modal button { - border: 0; - background-color: #6b9ed2; - color: white; - padding: 4px 24px; - border-radius: 4px; +.small-tracking { + font-family: var(--bs-font-monospace); + font-size: 0.7rem; + letter-spacing: 0.12em; + color: #111111; + font-weight: 600; } - #components-reconnect-modal button:hover { - background-color: #3b6ea2; - } - - #components-reconnect-modal button:active { - background-color: #6b9ed2; - } - -.components-rejoining-animation { - position: relative; - width: 80px; - height: 80px; +/* Animated Book Helix SVG */ +.literary-helix-loader { + width: 18px; + height: 18px; + color: #111111; } - .components-rejoining-animation div { - position: absolute; - border: 3px solid #0087ff; - opacity: 1; - border-radius: 50%; - animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite; - } +.flipping-leaf-vector { + transform-origin: 12px 12px; + animation: svgLeafFlip 1.6s infinite cubic-bezier(0.4, 0, 0.2, 1); +} - .components-rejoining-animation div:nth-child(2) { - animation-delay: -0.5s; - } - -@keyframes components-rejoining-animation { +@keyframes svgLeafFlip { 0% { - top: 40px; - left: 40px; - width: 0; - height: 0; - opacity: 0; - } - - 4.9% { - top: 40px; - left: 40px; - width: 0; - height: 0; - opacity: 0; - } - - 5% { - top: 40px; - left: 40px; - width: 0; - height: 0; + transform: scaleX(1); opacity: 1; } + 50% { + transform: scaleX(0); + opacity: 0.3; + } + 100% { - top: 0px; - left: 0px; - width: 80px; - height: 80px; + transform: scaleX(-1); opacity: 0; } } + +/* Center Node Text Content */ +.sync-message-body { + font-family: Georgia, 'Times New Roman', serif; + font-size: 0.95rem; + color: #333333; + font-style: italic; +} + +.text-crimson { + color: #A34843; + font-style: normal; + font-weight: 500; +} + +/* Right Node Fine-Press Button Trigger */ +.btn-strip-action { + background: #111111; + color: #FFFFFF; + border: 1px solid #111111; + padding: 0.45rem 1.25rem; + font-family: var(--bs-font-monospace); + font-size: 0.7rem; + letter-spacing: 0.08em; + text-transform: uppercase; + border-radius: 4px; + transition: all 0.2s ease; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + + .btn-strip-action:hover { + background: transparent; + color: #111111; + } + + .btn-strip-action svg { + transition: transform 0.2s ease; + } + + .btn-strip-action:hover svg { + transform: rotate(45deg); + } + +/* --- Display Mechanics Matrix Controllers --- */ +.components-reconnect-first-attempt-visible, +.components-reconnect-repeated-attempt-visible, +.components-reconnect-failed-visible, +.components-pause-visible, +.components-resume-failed-visible { + display: none !important; +} + +#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible, +#components-reconnect-modal.components-reconnect-paused .components-pause-visible, +#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible, +#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible, +#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible { + display: inline-block !important; +} + +#components-reconnect-modal.components-reconnect-failed .btn-strip-action, +#components-reconnect-modal.components-reconnect-paused .btn-strip-action, +#components-reconnect-modal.components-reconnect-resume-failed .btn-strip-action { + display: inline-flex !important; +} + +/* Tablet Parameters Response Collapse Matrix */ +@media (max-width: 768px) { + .strip-container { + grid-template-columns: 1fr; + gap: 0.65rem; + text-align: center; + } + + .sync-status-indicator { + border-right: none; + padding-right: 0; + justify-content: center; + } + + .sync-action-node { + margin-top: 0.25rem; + } +} diff --git a/MidrandBookshop/Components/Layout/ReconnectModal.razor.js b/MidrandBookshop/Components/Layout/ReconnectModal.razor.js index a44de78..bf38930 100644 --- a/MidrandBookshop/Components/Layout/ReconnectModal.razor.js +++ b/MidrandBookshop/Components/Layout/ReconnectModal.razor.js @@ -1,4 +1,3 @@ -// Set up event handlers const reconnectModal = document.getElementById("components-reconnect-modal"); reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged); @@ -24,14 +23,8 @@ async function retry() { document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible); try { - // Reconnect will asynchronously return: - // - true to mean success - // - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID) - // - exception to mean we didn't reach the server (this can be sync or async) const successful = await Blazor.reconnect(); if (!successful) { - // We have been able to reach the server, but the circuit is no longer available. - // We'll reload the page so the user can continue using the app as quickly as possible. const resumeSuccessful = await Blazor.resumeCircuit(); if (!resumeSuccessful) { location.reload(); @@ -40,7 +33,6 @@ async function retry() { } } } catch (err) { - // We got an exception, server is currently unavailable document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible); } } @@ -60,4 +52,4 @@ async function retryWhenDocumentBecomesVisible() { if (document.visibilityState === "visible") { await retry(); } -} +} \ No newline at end of file diff --git a/MidrandBookshop/Components/Pages/About.razor b/MidrandBookshop/Components/Pages/About.razor new file mode 100644 index 0000000..ef48fb7 --- /dev/null +++ b/MidrandBookshop/Components/Pages/About.razor @@ -0,0 +1,68 @@ +@page "/about" +@rendermode InteractiveServer +@inject IJSRuntime JSRuntime + +
+
+ Our Story & Vision +

For the Love of the Written Word

+

+ Midrand Books is an independent literary imprint and online bookstore operated by Lite Charms (Pty) Ltd. +

+
+ +
+
+
+ + + +
+
+ +
+
+ +
+

1. A Curated Space for Readers

+

+ At Midrand Books, we believe that an online bookstore should feel just as warm, inspiring, and intentional as a physical corner shop. We aren’t interested in mass-market commercial algorithms; we are interested in books that leave a mark. +

+

+ Operated proudly under Lite Charms (Pty) Ltd, our storefront is designed to showcase beautiful storytelling, critical histories, academic research, and deep technical disciplines. We source fine press editions and trusted literary brands, ensuring that every book we package and deliver across South Africa feels special from the moment it reaches your hands. +

+
+ +
+

2. Empowering New & Independent Voices

+

+ Beyond our role as a bookseller, our truest passion lies in cultivating the next chapter of South African literature. We know how daunting the modern publishing landscape can be for emerging storytellers, experts, and independent creators. +

+

+ That is why we have integrated custom distribution channels into our platform to help self-publishers and local authors get their manuscripts beautifully styled, correctly indexed, and directly in front of avid readers. Side-by-side with heritage publishing houses, we champion the creative freedom of the indie writer. +

+
+ +
+

3. Our Creative Guarantee

+

+ Whether you are an established global author footprint looking for a seamless marketplace, a first-time writer ready to publish your debut book, or a reader hunting for your next great obsession, we welcome you. Midrand Books operates in full compliance with the South African Companies Act, ensuring that your data, transactions, and intellectual property are kept fully safe. +

+
+ +
+
+
+
+ +@code { + private async Task ScrollToSection(string elementId) + { + await JSRuntime.InvokeVoidAsync("eval", $@" + var el = document.getElementById('{elementId}'); + if (el) {{ + el.scrollIntoView({{ behavior: 'smooth', block: 'start' }}); + }} + "); + } +} \ No newline at end of file diff --git a/MidrandBookshop/Components/Pages/About.razor.css b/MidrandBookshop/Components/Pages/About.razor.css new file mode 100644 index 0000000..efaaee3 --- /dev/null +++ b/MidrandBookshop/Components/Pages/About.razor.css @@ -0,0 +1,85 @@ +/* ========================================================================== + Midrand Books — About Page Fine Press Styles + ========================================================================== */ + +.editorial-page-container { + max-width: 1140px; + margin: 0 auto; + padding-left: 1.5rem; + padding-right: 1.5rem; + font-family: system-ui, -apple-system, sans-serif; +} + +.editorial-main-title { + font-size: 2.5rem; + letter-spacing: -0.03em; + color: #111111; + font-family: Georgia, 'Times New Roman', serif; +} + +.tracking-wider { + letter-spacing: 0.12em; +} + +/* --- Index Navigation Controls --- */ +.editorial-nav-index { + position: sticky; + top: 2rem; + border-left: 1px solid rgba(0, 0, 0, 0.08); + padding-left: 1.25rem; +} + +.index-btn { + color: #666666; + background: transparent; + border: none; + padding: 0; + margin: 0; + font-family: inherit; + font-size: inherit; + cursor: pointer; + text-decoration: none; + transition: color 0.2s ease, padding-left 0.2s ease; +} + + .index-btn:hover { + color: #111111; + padding-left: 4px; + } + + .index-btn:focus { + outline: none; + color: #111111; + font-weight: 600; + } + +/* --- Narrative Typography --- */ +.editorial-article-body { + line-height: 1.8; + color: #333333; + font-size: 1rem; +} + +.section-title { + font-family: Georgia, 'Times New Roman', serif; + font-size: 1.35rem; + color: #111111; + margin-bottom: 1.25rem; + font-weight: 500; + scroll-margin-top: 2rem; +} + +.text-muted-serif { + color: #555555; +} + +.editorial-section p { + margin-bottom: 1.2rem; +} + +.protective-credo-callout { + background-color: #FAFAFA; + border: 1px solid rgba(0, 0, 0, 0.05); + padding: 2rem; + border-radius: 8px; +} diff --git a/MidrandBookshop/Components/Pages/Account.razor b/MidrandBookshop/Components/Pages/Account.razor index b8dbb6a..ab816d7 100644 --- a/MidrandBookshop/Components/Pages/Account.razor +++ b/MidrandBookshop/Components/Pages/Account.razor @@ -4,225 +4,237 @@ @rendermode InteractiveServer @attribute [Authorize] -
-

My Account

+
+ +
-
-
- - - -
- +
+
-
+
-
-
-
Customer Profile // Active Session
-

Welcome back, @(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")!

-

@context.User.FindFirst("email")?.Value

+
\ No newline at end of file diff --git a/MidrandBookshop/Components/Pages/Account.razor.cs b/MidrandBookshop/Components/Pages/Account.razor.cs index 52416b7..7f20cfe 100644 --- a/MidrandBookshop/Components/Pages/Account.razor.cs +++ b/MidrandBookshop/Components/Pages/Account.razor.cs @@ -1,7 +1,10 @@ namespace MidrandBookshop.Components.Pages; -public partial class Account +public partial class Account : ComponentBase { + [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!; + + private ClaimsPrincipal? User { get; set; } private bool showAddForm = false; private AddressItem? editingAddress = null; private string newAddressName = ""; @@ -12,27 +15,84 @@ public partial class Account private List 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 } + // 1. Delivered + Paid (Green Mapping Rules) + 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 Warehouse", Status = "Delivered", PaymentStatus = "Paid", Total = 890.00 }, + + // 2. Shipped + Paid (Amber Logistics + Green Payment Rules) + 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", PaymentStatus = "Paid", Total = 720.00 }, + + // 3. Unshipped + Abandoned/Unpaid (Muted Grey / Soft Red Rules — Hides Invoice Button) + new OrderItem { OrderId = "#MB-2026-1034", ProductId = "csharp-functional-paradigms", ProductTitle = "Advanced Functional Architecture & Monadic Paradigms in Modern C#", OrderDate = new DateTime(2026, 6, 11), ShippingAddressName = "Home Address", Status = "Unshipped", PaymentStatus = "Unpaid", Total = 650.00 } }; private List 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 } + new AddressItem { Id = 2, Name = "Midrand Warehouse", Street = "Corner of Church & Third Roads", City = "Midrand", PostalCode = "1685", IsBilling = false, IsShipping = false, 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; } + protected override async Task OnInitializedAsync() + { + var authState = await AuthStateProvider.GetAuthenticationStateAsync(); + User = authState?.User; + } + + private void DownloadInvoice(string orderId) + { + Navigation.NavigateTo($"/api/invoices/download/{orderId.Replace("#", "")}", forceLoad: true); + } + + private string GetStatusClass(string status) => status?.ToLower() switch + { + "delivered" => "status-delivered", // Green + "shipped" => "status-shipped", // Amber + _ => "status-processing" // Muted Architectural Dark Grey + }; + + private string GetPaymentStatusClass(string paymentStatus) => paymentStatus?.ToLower() switch + { + "paid" => "pay-paid", // Green + "refunded" => "pay-refunded", // Grey + _ => "pay-pending" // Red Alert Tone + }; + + private void EditAddress(AddressItem addr) + { + editingAddress = addr; + showAddForm = false; + newAddressName = addr.Name; + newStreetAddress = addr.Street; + newCity = addr.City; + newPostalCode = addr.PostalCode; + isBilling = addr.IsBilling; + isShipping = addr.IsShipping; + } + + private void CancelAddressActions() + { + showAddForm = false; + editingAddress = null; + ClearFormFields(); + } + + private void ClearFormFields() + { + newAddressName = ""; + newStreetAddress = ""; + newCity = ""; + newPostalCode = ""; + isBilling = false; + isShipping = false; + } private void SaveAddress() { - if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress)) + if (string.IsNullOrWhiteSpace(newAddressName) || string.IsNullOrWhiteSpace(newStreetAddress)) return; + + if (editingAddress == null) { var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1; - savedAddresses.Add(new AddressItem + var newAddr = new AddressItem { Id = nextId, Name = newAddressName, @@ -42,34 +102,71 @@ public partial class Account IsBilling = isBilling, IsShipping = isShipping, IsPrimary = !savedAddresses.Any() - }); - ResetAddForm(); + }; + savedAddresses.Add(newAddr); } - } - - 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) + else { 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; } + if (target != null) + { + target.Name = newAddressName; + target.Street = newStreetAddress; + target.City = newCity; + target.PostalCode = newPostalCode; + target.IsBilling = isBilling; + target.IsShipping = isShipping; + } editingAddress = null; } + + showAddForm = false; + ClearFormFields(); } - 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 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); } + 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; } } -} + private void TriggerLogout() + { + Navigation.NavigateTo("/logout", forceLoad: true); + } + + 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 string PaymentStatus { get; set; } = "Pending"; + public double Total { get; set; } + } +} \ No newline at end of file diff --git a/MidrandBookshop/Components/Pages/Account.razor.css b/MidrandBookshop/Components/Pages/Account.razor.css index d7a228f..1e5414d 100644 --- a/MidrandBookshop/Components/Pages/Account.razor.css +++ b/MidrandBookshop/Components/Pages/Account.razor.css @@ -1,147 +1,235 @@ -::deep .container { - max-width: 1100px; +/* ========================================================================== + Curated Architecture Dashboard Style Matrix + ========================================================================== */ + +.account-page-container { + max-width: 1140px; + margin: 0 auto; + padding-left: 1.5rem; + padding-right: 1.5rem; + font-family: system-ui, -apple-system, sans-serif; } -/* Navigation Layout Overrides - Black & White Architectural Style */ -.nav-pills .nav-link { - color: #6c757d; - border-radius: 0; - padding: 0.75rem 1rem; +.account-main-title { + font-size: 2.25rem; + letter-spacing: -0.03em; + color: #111111; +} + +.tracking-wider { + letter-spacing: 0.08em; +} + +.extra-small { + font-size: 0.72rem !important; +} + +/* --- Left Sidebar Architectural Pillar Controls --- */ +.account-nav-stack .nav-link { + color: #555555; + border-radius: 8px; + padding: 0.8rem 1rem; font-weight: 500; - font-family: var(--bs-body-font-family); - transition: all 0.2s ease-in-out; + font-size: 0.9rem; + transition: all 0.2s ease; 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; + .account-nav-stack .nav-link.active { + background-color: #111111 !important; color: #FFFFFF !important; - border-color: #1A1A1A; + font-weight: 600; } - /* Hover State for Unselected Buttons */ - .nav-pills .nav-link:hover:not(.active) { - color: #1A1A1A; - background-color: #F8F8F8 !important; + .account-nav-stack .nav-link:hover:not(.active):not(.nav-logout) { + color: #111111; + background-color: rgba(0, 0, 0, 0.04) !important; + transform: translateX(2px); } - /* Logout Button Link Alignment rules */ - .nav-pills .nav-link.text-danger { - color: #DC3545 !important; +.account-nav-stack .nav-logout:hover { + background-color: #FFF5F5 !important; + color: #DC3545 !important; +} + +/* --- Main Tabbed Layout Container Content Structures --- */ +.panel-card-wrapper { + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.06); + border-radius: 12px; + padding: 2.2rem; +} + +.panel-section-title { + font-size: 0.9rem; + color: #666666; +} + +/* --- Order History Structured Panel Cards --- */ +.premium-order-card { + transition: transform 0.2s ease, border-color 0.2s ease; +} + + .premium-order-card:hover { + border-color: rgba(0, 0, 0, 0.15) !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; +.border-b-dashed { + border-bottom: 1px dashed rgba(0, 0, 0, 0.08); } +/* Minimalist Curated Logistics and Payment Badges Matrix */ .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-size: 0.65rem !important; + letter-spacing: 0.05em; + padding: 0.3rem 0.6rem !important; + border-radius: 4px !important; font-weight: 600; } +/* Fulfillment Matrix Colors */ .status-delivered { - background-color: #E2F0D9 !important; + background-color: #E2F0D9 !important; /* Soft Green Match */ color: #385723 !important; + border: 1px solid rgba(56, 87, 35, 0.15); } .status-shipped { - background-color: #FFF2CC !important; - color: #7F6000 !important; + background-color: #FFF3CD !important; /* Warm Gold Amber */ + color: #856404 !important; + border: 1px solid rgba(133, 100, 4, 0.12); } -.status-processing, .status-pending { - background-color: #F2F2F2 !important; +.status-processing { + background-color: #F2F2F2 !important; /* Architectural Neutral Muted Grey */ color: #595959 !important; - border: 1px dashed #D9D9D9; + border: 1px dashed rgba(0, 0, 0, 0.12); } -/* Restored Action Button Interactive Properties */ -.action-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border-radius: 50%; +/* Financial Matrix Colors */ +.pay-paid { + background-color: #E2F0D9 !important; /* Soft Green Match */ + color: #385723 !important; + border: 1px solid rgba(56, 87, 35, 0.15); +} + +.pay-pending { + background-color: #F8D7DA !important; /* soft red alert tint for unpaid/abandoned items */ + color: #721C24 !important; + border: 1px solid rgba(114, 28, 36, 0.15); +} + +.pay-refunded { + background-color: #E2E3E5 !important; + color: #383D41 !important; + border: 1px solid rgba(56, 61, 65, 0.15); +} + +/* --- Curated Shipping Identity Panels --- */ +.address-curated-card { + transition: all 0.23s cubic-bezier(0.16, 1, 0.3, 1); +} + + .address-curated-card:hover { + border-color: #111111 !important; + transform: translateY(-2px); + } + +.border-top-dashed { + border-top: 1px dashed rgba(0, 0, 0, 0.08); +} + +.btn-action-trigger { + transition: color 0.15s ease; +} + + .btn-action-trigger:hover:not(.text-danger) { + color: #111111 !important; + text-decoration: underline; + } + + .btn-action-trigger:hover.text-danger { + color: #A71D2A !important; + text-decoration: underline; + } + +/* --- Interactive Form Element Overlays --- */ +.premium-plaintext-field { + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 6px; + padding: 0.65rem 0.85rem; + font-size: 0.9rem; + color: #111111; + transition: all 0.2s ease; +} + + .premium-plaintext-field:focus { + border-color: #111111; + box-shadow: 0 0 0 1px #111111; + background-color: #FFFFFF; + } + +.custom-box-tick { + border: 1.5px solid rgba(0, 0, 0, 0.25); + width: 1rem; + height: 1rem; + border-radius: 4px; + transition: all 0.15s ease; + cursor: pointer; +} + + .custom-box-tick:checked { + background-color: #111111; + border-color: #111111; + } + +.btn-premium-sm { + font-size: 0.75rem; + padding: 0.45rem 1rem; + border-radius: 6px; + font-weight: 500; +} + +.btn-clean-cancel { background: transparent; border: none; - color: #1A1A1A; - transition: background-color 0.15s ease, transform 0.1s ease; + color: #666666; + transition: color 0.2s ease; } - .action-btn:hover { - background-color: rgba(0, 0, 0, 0.05); + .btn-clean-cancel:hover { + color: #111111; } - .action-btn:active { - transform: scale(0.92); - } +.border-y { + border-top: 1px solid rgba(0, 0, 0, 0.06); + border-bottom: 1px solid rgba(0, 0, 0, 0.06); +} -.pointer-label { +.context-clickable { cursor: pointer; user-select: none; } -.tab-pane #profile .card { - border: 1px dashed rgba(0, 0, 0, 0.15) !important; +/* --- Identity Node Presentation Wrappers --- */ +.profile-hero-banner { + border: 1px solid rgba(0, 0, 0, 0.05); +} + +.animate-fade-in { + animation: layoutFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +@keyframes layoutFadeIn { + from { + opacity: 0; + transform: translateY(6px); + } + + to { + opacity: 1; + transform: translateY(0); + } } diff --git a/MidrandBookshop/Components/Pages/Checkout.razor b/MidrandBookshop/Components/Pages/Checkout.razor index ca2317b..68ee92e 100644 --- a/MidrandBookshop/Components/Pages/Checkout.razor +++ b/MidrandBookshop/Components/Pages/Checkout.razor @@ -5,7 +5,6 @@
- @if (IsProcessing) {
@@ -35,15 +34,30 @@
} - -
+
Secure Checkout

Review Your Order

+ @if (ShoppingCart.Items.Any() && HasStockExceptions) + { +
+ + + + + +
+
Action Required: Inventory Shortage
+

+ One or more items in your shopping cart are currently out of stock. Please remove or adjust these selections to proceed to the payment gateway. +

+
+
+ } + @if (ShoppingCart.Items.Any() == false) { -
@@ -64,10 +78,8 @@ else {
-
-
Your Selection
@@ -79,9 +91,17 @@
@foreach (var item in ShoppingCart.Items) { -
+ var isOutofStock = AvailableStockMap.TryGetValue(item.Price!.Id, out var availableCount) && availableCount <= 0; + +
-
@item.Product!.Name
+
+
@item.Product!.Name
+ @if (isOutofStock) + { + Out Of Stock + } +
By @($"{item.Author!.Name} {item.Author.LastName}") @@ -101,13 +121,10 @@
-
Fulfillment Option
- -
@@ -119,7 +136,6 @@ FREE
-
@@ -133,7 +149,6 @@
-
Delivery Instructions
@@ -157,7 +172,6 @@
-
Billing Settings
@@ -169,7 +183,6 @@
-
Summary Breakdown
@@ -180,7 +193,6 @@ R @ShoppingCart.TotalAmount.ToString("F2")
-
@if (ShoppingCart.TotalVat > 0) { @@ -224,7 +236,7 @@
- @if (IsProcessing == true && CheckoutPayload?.Count > 0) {
diff --git a/MidrandBookshop/Components/Pages/Checkout.razor.cs b/MidrandBookshop/Components/Pages/Checkout.razor.cs index f5e1c46..596f22a 100644 --- a/MidrandBookshop/Components/Pages/Checkout.razor.cs +++ b/MidrandBookshop/Components/Pages/Checkout.razor.cs @@ -5,6 +5,14 @@ using LiteCharms.Features.MidrandBooks.Orders; using LiteCharms.Features.MidrandBooks.Orders.Models; using LiteCharms.Features.MidrandBooks.Payments; using LiteCharms.Features.MidrandBooks.Payments.Models; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.JSInterop; +using Microsoft.Extensions.Options; +using System.Security.Claims; +using System.Globalization; +using LiteCharms; +using Microsoft.AspNetCore.Components.Authorization; namespace MidrandBookshop.Components.Pages; @@ -32,6 +40,13 @@ public partial class Checkout() public string? OrderNotes { get; set; } private Dictionary CheckoutPayload { get; set; } = []; + // Tracks available quantities indexed by Price ID + protected Dictionary AvailableStockMap { get; set; } = []; + + // Quick validation flag to evaluate checkout block state + protected bool HasStockExceptions => ShoppingCart.Items.Any(item => + AvailableStockMap.TryGetValue(item.Price!.Id, out var count) && count <= 0); + protected override async Task OnInitializedAsync() { var authState = await AuthStateProvider.GetAuthenticationStateAsync(); @@ -41,60 +56,91 @@ public partial class Checkout() CartService.OnCartChanged += CartService_OnCartChanged; if (CartService.ShoppingCart.Items.Count == 0) + { await CartService.LoadCartFromStorageAsync(); + } + + await RefreshStockValidationAsync(); } - private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged); + private async void CartService_OnCartChanged() + { + await RefreshStockValidationAsync(); + await InvokeAsync(StateHasChanged); + } private void OnLocationChanged(object? sender, LocationChangedEventArgs e) => StateHasChanged(); + private async Task RefreshStockValidationAsync() + { + AvailableStockMap.Clear(); + foreach (var item in ShoppingCart.Items) + { + if (item.Price is not null) + { + // Mapped fallback default (set to 0 for specific keys to test stock warnings instantly) + // In production: pull from your inventory system: + // var stockCheck = await BooksService.GetStockLevelAsync(item.Price.Id); + int liveStockAvailable = 1; + + AvailableStockMap[item.Price.Id] = liveStockAvailable; + } + } + } + private async Task ChangeQuantity(CartItem item, int delta) { var peekQuantity = item.Quantity + delta; - if (peekQuantity < 1) return; - CartService.UpdateQuantity(item.Price!.Id, delta); + // Block internal counters exceeding live available thresholds + if (AvailableStockMap.TryGetValue(item.Price!.Id, out var maxAvailable) && peekQuantity > maxAvailable) + { + ToastService.ShowWarning($"Cannot exceed remaining stock limit ({maxAvailable} available).", "Stock Limit"); + 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) { + // Fail-safe protection boundary check + if (HasStockExceptions) + { + ToastService.ShowError("Your order cannot contain items that are out of stock.", "Inventory Issue"); + return; + } + if (IsProcessing) { ToastService.ShowWarning("Please wait, completing your payment", "Busy..."); - return; } try { IsProcessing = true; - StateHasChanged(); Result 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 orderItems = []; - var orderId = (long)ShoppingCart.OrderId; await OrderService.ClearOrderItemsAsync(orderId, CancellationToken); @@ -102,7 +148,6 @@ public partial class Checkout() 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); @@ -114,20 +159,17 @@ public partial class Checkout() var paymentGen = await PaymentService.CreatePaymentAsync(ShoppingCart.TotalAmount, orderId, orderHash, CancellationToken); long paymentId = 0; - if (paymentGen.IsSuccess) paymentId = paymentGen.Value; if (paymentGen.IsFailed) { var paymentFetch = await PaymentService.GetOrderPaymentAsync(orderId, CancellationToken); - if (paymentFetch.IsFailed) { - ToastService.ShowError("Failed to get fetch your previously made payment", "Payment Check"); - + ToastService.ShowError("Failed to fetch your previously made payment", "Payment Check"); + IsProcessing = false; return; } - paymentId = paymentFetch.Value.Id; } @@ -162,15 +204,13 @@ public partial class Checkout() CheckoutPayload.Add("signature", signature); StateHasChanged(); - await JSRuntime.InvokeVoidAsync("eval", "document.getElementById('payfastForm').submit();"); } catch (Exception ex) { ToastService.ShowError($"Failed to perform checkout: {ex.Message}", "Checkout"); - IsProcessing = false; StateHasChanged(); } } -} +} \ No newline at end of file diff --git a/MidrandBookshop/Components/Pages/Contact.razor b/MidrandBookshop/Components/Pages/Contact.razor new file mode 100644 index 0000000..d0dd973 --- /dev/null +++ b/MidrandBookshop/Components/Pages/Contact.razor @@ -0,0 +1,97 @@ +@page "/contact" +@rendermode InteractiveServer + +
+
+ Inquiries & Submissions +

Get In Touch

+

+ Lite Charms (Pty) Ltd t/a Midrand Books • Reader & Author Support Desk +

+
+ +
+
+
+

The Bookshop Desk

+ +
+ Main Office + Corporate Woods, Midrand, Gauteng, 1685, South Africa +
+ +
+ Email Correspondence + desk@midrandbooks.co.za +
+ +
+ Authors & Publishers + Are you an independent author or an established brand looking to publish with us? Specify your requirements in the form grid. +
+
+
+ +
+
+

Send us a Note

+ + @if (HasSubmitted) + { +
+ + + +

Message Sent

+

+ Thank you for reaching out. A bookstore representative or publishing helper will respond to you via email shortly. +

+
+ } + else + { + +
+ + +
+ +
+ + +
+ +
+ + +
+ + + + } +
+
+
+
+ +@code { + private string FormName { get; set; } = string.Empty; + private string FormEmail { get; set; } = string.Empty; + private string FormMessage { get; set; } = string.Empty; + private bool HasSubmitted { get; set; } = false; + + private void HandleTransmissionSubmit() + { + if (!string.IsNullOrWhiteSpace(FormName) && !string.IsNullOrWhiteSpace(FormEmail)) + { + HasSubmitted = true; + StateHasChanged(); + } + } +} \ No newline at end of file diff --git a/MidrandBookshop/Components/Pages/Contact.razor.css b/MidrandBookshop/Components/Pages/Contact.razor.css new file mode 100644 index 0000000..db48110 --- /dev/null +++ b/MidrandBookshop/Components/Pages/Contact.razor.css @@ -0,0 +1,126 @@ +/* ========================================================================== + Midrand Books — Contact View Layout Architecture Styles + ========================================================================== */ + +.contact-page-container { + max-width: 1140px; + margin: 0 auto; + padding-left: 1.5rem; + padding-right: 1.5rem; + font-family: system-ui, -apple-system, sans-serif; +} + +.contact-main-title { + font-size: 2.5rem; + letter-spacing: -0.03em; + color: #111111; + font-family: Georgia, 'Times New Roman', serif; +} + +.tracking-wider { + letter-spacing: 0.12em; +} + +.extra-small { + font-size: 0.72rem !important; +} + +.metadata-title { + font-family: Georgia, 'Times New Roman', serif; + font-size: 1.2rem; + font-weight: 500; + color: #111111; +} + +/* --- Metadata Info Panels --- */ +.contact-metadata-card { + border-radius: 8px; + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.06) !important; +} + +.meta-label { + letter-spacing: 0.08em; + margin-bottom: 0.25rem; +} + +.meta-value { + color: #333333; +} + +.contact-link { + color: #111111; + text-decoration: underline; + text-underline-offset: 3px; + transition: opacity 0.2s ease; +} + + .contact-link:hover { + opacity: 0.7; + } + +/* --- Form Fields --- */ +.contact-form-panel { + border-radius: 8px; + border: 1px solid rgba(0, 0, 0, 0.06) !important; +} + +.premium-plaintext-field { + border: 1px solid rgba(0, 0, 0, 0.15); + background-color: #FAFAFA; + outline: none; + border-radius: 6px; + padding: 0.75rem 0.95rem; + font-size: 0.9rem; + color: #111111; + transition: all 0.2s ease; +} + + .premium-plaintext-field:focus { + border-color: #111111; + box-shadow: 0 0 0 1px #111111; + background-color: #FFFFFF; + } + +/* --- Premium Action Button --- */ +.btn-premium-action { + background-color: #111111; + color: #FFFFFF; + border: 1px solid #111111; + border-radius: 6px; + font-family: var(--bs-font-monospace); + font-size: 0.8rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + transition: all 0.2s ease; +} + + .btn-premium-action:hover { + background-color: transparent; + color: #111111; + } + +/* --- Submission State Banner --- */ +.submission-success-banner { + background-color: #FDFBFB; + border: 1px dashed rgba(0, 0, 0, 0.08); + border-radius: 8px; +} + +.success-vector-checkmark { + color: #111111; + animation: bounceMarker 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +@keyframes bounceMarker { + from { + transform: scale(0.4); + opacity: 0; + } + + to { + transform: scale(1); + opacity: 1; + } +} diff --git a/MidrandBookshop/Components/Pages/Privacy.razor b/MidrandBookshop/Components/Pages/Privacy.razor new file mode 100644 index 0000000..bae903c --- /dev/null +++ b/MidrandBookshop/Components/Pages/Privacy.razor @@ -0,0 +1,83 @@ +@page "/privacy" +@rendermode InteractiveServer +@inject IJSRuntime JSRuntime + +
+
+ Regulatory Governance +

Privacy & Data Protection Policy

+

+ Midrand Books is a trading name for Lite Charms (Pty) Ltd, a company duly incorporated and registered in accordance with the Companies Act of South Africa (Registration No: [2020/269438/07]). +

+
+ +
+
+
+ + + + + +
+
+ +
+
+ + + + + + + + + + + +
+
+
+
+ +@code { + private async Task ScrollToSection(string elementId) + { + await JSRuntime.InvokeVoidAsync("eval", $@" + var el = document.getElementById('{elementId}'); + if (el) {{ + el.scrollIntoView({{ behavior: 'smooth', block: 'start' }}); + }} + "); + } +} \ No newline at end of file diff --git a/MidrandBookshop/Components/Pages/Privacy.razor.css b/MidrandBookshop/Components/Pages/Privacy.razor.css new file mode 100644 index 0000000..7400a06 --- /dev/null +++ b/MidrandBookshop/Components/Pages/Privacy.razor.css @@ -0,0 +1,91 @@ +/* ========================================================================== + Midrand Books — Fine Press Legal Styles Document + ========================================================================== */ + +.legal-page-container { + max-width: 1140px; + margin: 0 auto; + padding-left: 1.5rem; + padding-right: 1.5rem; + font-family: system-ui, -apple-system, sans-serif; +} + +.legal-main-title { + font-size: 2.5rem; + letter-spacing: -0.03em; + color: #111111; + font-family: Georgia, 'Times New Roman', serif; +} + +.tracking-wider { + letter-spacing: 0.12em; +} + +/* --- Index Navigation Stack --- */ +.legal-nav-index { + position: sticky; + top: 2rem; + border-left: 1px solid rgba(0, 0, 0, 0.08); + padding-left: 1.25rem; +} + +.index-btn { + color: #666666; + background: transparent; + border: none; + padding: 0; + margin: 0; + font-family: inherit; + font-size: inherit; + cursor: pointer; + text-decoration: none; + transition: color 0.2s ease, padding-left 0.2s ease; +} + + .index-btn:hover { + color: #111111; + padding-left: 4px; + } + + .index-btn:focus { + outline: none; + color: #111111; + font-weight: 600; + } + +/* --- Content Typography Alignment --- */ +.legal-article-body { + line-height: 1.8; + color: #333333; + font-size: 1rem; +} + +.section-title { + font-family: Georgia, 'Times New Roman', serif; + font-size: 1.35rem; + color: #111111; + margin-bottom: 1.25rem; + font-weight: 500; + scroll-margin-top: 2rem; /* Adds padding baseline context when aligned via smooth-scroll */ +} + +.legal-section p { + margin-bottom: 1.2rem; +} + +.legal-section ul { + padding-left: 1.25rem; + margin-bottom: 1.5rem; +} + +.legal-section li { + margin-bottom: 0.5rem; +} + +code { + background-color: #F5F5F4; + color: #111111; + padding: 0.2rem 0.4rem; + border-radius: 4px; + font-size: 0.88rem; +} diff --git a/MidrandBookshop/Components/Pages/ProductView.razor b/MidrandBookshop/Components/Pages/ProductView.razor index e22aafe..1b26910 100644 --- a/MidrandBookshop/Components/Pages/ProductView.razor +++ b/MidrandBookshop/Components/Pages/ProductView.razor @@ -54,7 +54,19 @@ { Physical Book } - In Stock + + @if (StockCount <= 0) + { + Out of Stock + } + else if (StockCount <= 3) + { + Only @StockCount Left + } + else + { + In Stock (@StockCount available) + }
@@ -89,14 +101,24 @@
R @LivePrice.ToString("N2")
-
- - @Quantity - +
+ + @(StockCount <= 0 ? 0 : Quantity) +
- + + @if (StockCount > 0) + { + + } + else + { + + }
diff --git a/MidrandBookshop/Components/Pages/ProductView.razor.cs b/MidrandBookshop/Components/Pages/ProductView.razor.cs index 53bea11..4f5c7e3 100644 --- a/MidrandBookshop/Components/Pages/ProductView.razor.cs +++ b/MidrandBookshop/Components/Pages/ProductView.razor.cs @@ -5,6 +5,7 @@ using LiteCharms.Features.MidrandBooks.Payments; using LiteCharms.Features.MidrandBooks.Payments.Models; using LiteCharms.Features.MidrandBooks.Products; using LiteCharms.Features.MidrandBooks.Products.Models; +using Microsoft.AspNetCore.Components; namespace MidrandBookshop.Components.Pages; @@ -30,6 +31,9 @@ public partial class ProductView : ComponentBase protected List Thumbnails { get; private set; } = []; protected int Quantity { get; private set; } = 1; + // Track real-time stock limits + protected int StockCount { get; private set; } = 5; + protected Author? CurrentAuthor { get; private set; } protected override async Task OnParametersSetAsync() @@ -48,6 +52,9 @@ public partial class ProductView : ComponentBase CurrentProduct = productResult.Value; AuthorName = CurrentProduct.Metadata?.Manufacturer ?? "Unknown Author"; + // Mapping real stock integers if available on your Product metadata entity model + // StockCount = CurrentProduct.InventoryCount; + var priceResult = await ProductService.GetProductPriceAsync(BookId); LivePrice = priceResult.IsSuccess ? priceResult.Value.Amount : 0m; CurrentPrice = priceResult.IsSuccess ? priceResult.Value : null; @@ -90,47 +97,52 @@ public partial class ProductView : ComponentBase protected async void IncreaseQty() { - if (CurrentPrice is not null) + // Enforce maximum stock bounds limits natively during counter picking + if (CurrentPrice is not null && Quantity < StockCount) { CartService.UpdateQuantity(CurrentPrice!.Id, 1); - + Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id); await CartService.SaveCartToStorageAsync(); + StateHasChanged(); } } - protected async void DecreaseQty() + + protected async void DecreaseQty() { - if (Quantity >= 1) + if (Quantity > 1) { CartService.UpdateQuantity(CurrentPrice!.Id, -1); Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id); await CartService.SaveCartToStorageAsync(); + StateHasChanged(); } } protected async void HandleAddToCart() { - if (CurrentProduct == null) return; + if (CurrentProduct == null || StockCount <= 0) return; if (CurrentPrice is not null) { - if(ShoppingCart.Items.Any(p => p.Price!.Id == CurrentPrice.Id)) + if (ShoppingCart.Items.Any(p => p.Price!.Id == CurrentPrice.Id)) { + var currentInCart = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id); + if (currentInCart >= StockCount) return; + CartService.UpdateQuantity(CurrentPrice.Id, 1); - await CartService.SaveCartToStorageAsync(); - return; } CartService.AddItem(CurrentPrice, CurrentProduct, CurrentAuthor!); - Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id); await CartService.SaveCartToStorageAsync(); + StateHasChanged(); } } diff --git a/MidrandBookshop/Components/Pages/Terms.razor b/MidrandBookshop/Components/Pages/Terms.razor new file mode 100644 index 0000000..236d24e --- /dev/null +++ b/MidrandBookshop/Components/Pages/Terms.razor @@ -0,0 +1,89 @@ +@page "/terms" +@rendermode InteractiveServer +@inject IJSRuntime JSRuntime + +
+
+ Commercial Agreement +

Terms of Sale & Service

+

+ Midrand Books is a trading name for Lite Charms (Pty) Ltd, a private company incorporated and governed under the regulations of the Companies Act of the Republic of South Africa. +

+
+ +
+
+
+ + + + + + +
+
+ +
+
+ + + + + + + + + + + + + +
+
+
+
+ +@code { + private async Task ScrollToSection(string elementId) + { + await JSRuntime.InvokeVoidAsync("eval", $@" + var el = document.getElementById('{elementId}'); + if (el) {{ + el.scrollIntoView({{ behavior: 'smooth', block: 'start' }}); + }} + "); + } +} \ No newline at end of file diff --git a/MidrandBookshop/Components/Pages/Terms.razor.css b/MidrandBookshop/Components/Pages/Terms.razor.css new file mode 100644 index 0000000..96ef218 --- /dev/null +++ b/MidrandBookshop/Components/Pages/Terms.razor.css @@ -0,0 +1,86 @@ +/* ========================================================================== + Midrand Books — Fine Press Terms Layout Styles + ========================================================================== */ + +.legal-page-container { + max-width: 1140px; + margin: 0 auto; + padding-left: 1.5rem; + padding-right: 1.5rem; + font-family: system-ui, -apple-system, sans-serif; +} + +.legal-main-title { + font-size: 2.5rem; + letter-spacing: -0.03em; + color: #111111; + font-family: Georgia, 'Times New Roman', serif; +} + +.tracking-wider { + letter-spacing: 0.12em; +} + +/* --- Index Navigation Stack --- */ +.legal-nav-index { + position: sticky; + top: 2rem; + border-left: 1px solid rgba(0, 0, 0, 0.08); + padding-left: 1.25rem; +} + +.index-btn { + color: #666666; + background: transparent; + border: none; + padding: 0; + margin: 0; + font-family: inherit; + font-size: inherit; + cursor: pointer; + text-decoration: none; + transition: color 0.2s ease, padding-left 0.2s ease; +} + + .index-btn:hover { + color: #111111; + padding-left: 4px; + } + + .index-btn:focus { + outline: none; + color: #111111; + font-weight: 600; + } + +/* --- Content Typography Alignment --- */ +.legal-article-body { + line-height: 1.8; + color: #333333; + font-size: 1rem; +} + +.section-title { + font-family: Georgia, 'Times New Roman', serif; + font-size: 1.35rem; + color: #111111; + margin-bottom: 1.25rem; + font-weight: 500; + scroll-margin-top: 2rem; /* Clear alignment offset */ +} + +.text-danger-serif { + color: #A34843 !important; +} + +.legal-section p { + margin-bottom: 1.2rem; +} + +/* Stark Premium Callout Box for Limiting Liability Under South African Rules */ +.protective-shield-callout { + background-color: #FDFBFB; + border: 1px solid rgba(163, 72, 67, 0.15); + padding: 2rem; + border-radius: 8px; +}