Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4e42d9f21a | |||
| 0765e63d8a | |||
| 0b7476d31c | |||
| 234fb0f2f3 | |||
| 925c1f5988 | |||
| e7acb05027 |
@@ -1,5 +1,5 @@
|
|||||||
using MidrandBookshop.Services.ShoppingCart;
|
using LiteCharms.Features.MidrandBooks.Payments;
|
||||||
using MidrandBookshop.Services.ShoppingCart.Models;
|
using LiteCharms.Features.MidrandBooks.Payments.Models;
|
||||||
|
|
||||||
namespace MidrandBookshop.Components.Layout;
|
namespace MidrandBookshop.Components.Layout;
|
||||||
|
|
||||||
@@ -122,7 +122,7 @@ public partial class MainLayout(CartService cartService) : IDisposable
|
|||||||
await cartService.SaveCartToStorageAsync();
|
await cartService.SaveCartToStorageAsync();
|
||||||
}
|
}
|
||||||
|
|
||||||
private decimal GetCartTotal() => ShoppingCart?.TotalPrice ?? 0.00m;
|
private decimal GetCartTotal() => ShoppingCart?.TotalAmount ?? 0.00m;
|
||||||
|
|
||||||
private void RedirectToCart()
|
private void RedirectToCart()
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,106 +0,0 @@
|
|||||||
@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);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
@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>
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
body {
|
||||||
|
}
|
||||||
@@ -1,19 +1,18 @@
|
|||||||
@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 CartItems)
|
@foreach (var item in ShoppingCart.Items)
|
||||||
{
|
{
|
||||||
<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.Title</h6><small class="text-muted">@item.Author</small></div>
|
<div><h6 class="mb-0">@item.Product!.Name</h6><small class="text-muted">@($"{item.Author!.Name} {item.Author.LastName}")</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>
|
||||||
@@ -26,7 +25,6 @@
|
|||||||
}
|
}
|
||||||
</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">
|
||||||
@@ -41,70 +39,28 @@
|
|||||||
</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 @Subtotal.ToString("F2")</span></div>
|
<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>VAT (15%)</span><span>R @VatAmount.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>Shipping</span><span>R @ShippingCost.ToString("F2")</span></div>
|
<div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @($"{ShippingCost: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 @((Subtotal + VatAmount + ShippingCost).ToString("F2"))</h4>
|
<h4 class="fw-bold">R @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")</h4>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="CompletePurchase">Complete Purchase</button>
|
<button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="CompletePurchase">Complete Purchase</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@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()
|
|
||||||
{
|
|
||||||
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 }
|
|
||||||
};
|
|
||||||
|
|
||||||
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(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");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
using LiteCharms.Features.MidrandBooks.Payments;
|
||||||
|
using LiteCharms.Features.MidrandBooks.Payments.Models;
|
||||||
|
|
||||||
|
namespace MidrandBookshop.Components.Pages;
|
||||||
|
|
||||||
|
public partial class Checkout(CartService cartService)
|
||||||
|
{
|
||||||
|
[Inject]
|
||||||
|
private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
|
||||||
|
|
||||||
|
private LiteCharms.Features.MidrandBooks.Payments.Models.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 decimal ShippingCost = 0;
|
||||||
|
private bool IsSameAddress = true;
|
||||||
|
|
||||||
|
private decimal OrderTotalAmount => ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost;
|
||||||
|
|
||||||
|
protected override async Task OnInitializedAsync()
|
||||||
|
{
|
||||||
|
AuthState = await AuthStateProvider.GetAuthenticationStateAsync();
|
||||||
|
User = AuthState!.User;
|
||||||
|
|
||||||
|
Navigation.LocationChanged += OnLocationChanged;
|
||||||
|
cartService.OnCartChanged += CartService_OnCartChanged;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
|
||||||
|
|
||||||
|
private void OnLocationChanged(object? sender, LocationChangedEventArgs e) => StateHasChanged();
|
||||||
|
|
||||||
|
private async void 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 void RemoveFromCart(CartItem item)
|
||||||
|
{
|
||||||
|
cartService.RemoveOneItem(item.Price!.Id);
|
||||||
|
|
||||||
|
await cartService.SaveCartToStorageAsync();
|
||||||
|
}
|
||||||
|
|
||||||
|
private void CompletePurchase(MouseEventArgs args) => Navigation.NavigateTo("/payment-confirmation");
|
||||||
|
}
|
||||||
@@ -3,8 +3,6 @@
|
|||||||
<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,12 +18,11 @@
|
|||||||
</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="/order-history" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
|
<a href="/account" 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>
|
||||||
@@ -33,7 +30,6 @@
|
|||||||
</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,10 +1,10 @@
|
|||||||
using LiteCharms.Features;
|
using LiteCharms.Features;
|
||||||
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;
|
||||||
using Microsoft.AspNetCore.Cors.Infrastructure;
|
|
||||||
using MidrandBookshop.Services.ShoppingCart;
|
|
||||||
|
|
||||||
namespace MidrandBookshop.Components.Pages;
|
namespace MidrandBookshop.Components.Pages;
|
||||||
|
|
||||||
@@ -17,7 +17,7 @@ public partial class ProductView : ComponentBase
|
|||||||
[Inject] private NavigationManager Navigation { get; set; } = default!;
|
[Inject] private NavigationManager Navigation { get; set; } = default!;
|
||||||
[Inject] private CartService CartService { get; set; } = default!;
|
[Inject] private CartService CartService { get; set; } = default!;
|
||||||
|
|
||||||
protected Services.ShoppingCart.Models.Cart ShoppingCart => CartService?.ShoppingCart!;
|
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; }
|
||||||
@@ -32,9 +32,6 @@ public partial class ProductView : ComponentBase
|
|||||||
|
|
||||||
protected Author? CurrentAuthor { get; private set; }
|
protected Author? CurrentAuthor { get; private set; }
|
||||||
|
|
||||||
private static Func<Services.ShoppingCart.Models.Cart, long, int> getCartItemQuantity = (shoppingCart, productPriceId) =>
|
|
||||||
shoppingCart.Items.FirstOrDefault(p => p.Price!.Id == productPriceId)?.Quantity ?? 1;
|
|
||||||
|
|
||||||
protected override async Task OnParametersSetAsync()
|
protected override async Task OnParametersSetAsync()
|
||||||
{
|
{
|
||||||
try
|
try
|
||||||
@@ -97,7 +94,7 @@ public partial class ProductView : ComponentBase
|
|||||||
{
|
{
|
||||||
CartService.UpdateQuantity(CurrentPrice!.Id, 1);
|
CartService.UpdateQuantity(CurrentPrice!.Id, 1);
|
||||||
|
|
||||||
Quantity = getCartItemQuantity(ShoppingCart, CurrentPrice.Id);
|
Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
|
||||||
|
|
||||||
await CartService.SaveCartToStorageAsync();
|
await CartService.SaveCartToStorageAsync();
|
||||||
}
|
}
|
||||||
@@ -108,7 +105,7 @@ public partial class ProductView : ComponentBase
|
|||||||
{
|
{
|
||||||
CartService.UpdateQuantity(CurrentPrice!.Id, -1);
|
CartService.UpdateQuantity(CurrentPrice!.Id, -1);
|
||||||
|
|
||||||
Quantity = getCartItemQuantity(ShoppingCart, CurrentPrice.Id);
|
Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
|
||||||
|
|
||||||
await CartService.SaveCartToStorageAsync();
|
await CartService.SaveCartToStorageAsync();
|
||||||
}
|
}
|
||||||
@@ -131,7 +128,7 @@ public partial class ProductView : ComponentBase
|
|||||||
|
|
||||||
CartService.AddItem(CurrentPrice, CurrentProduct, CurrentAuthor!);
|
CartService.AddItem(CurrentPrice, CurrentProduct, CurrentAuthor!);
|
||||||
|
|
||||||
Quantity = getCartItemQuantity(ShoppingCart, CurrentPrice.Id);
|
Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
|
||||||
|
|
||||||
await CartService.SaveCartToStorageAsync();
|
await CartService.SaveCartToStorageAsync();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,13 +18,13 @@
|
|||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<PackageReference Include="LiteCharms.Features" Version="1.101.0" />
|
<PackageReference Include="LiteCharms.Features" Version="1.102.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.101.0" />
|
<PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.102.0" />
|
||||||
|
|
||||||
<!-- Global Usings -->
|
<!-- Global Usings -->
|
||||||
<Using Include="Blazored.Toast.Services" />
|
<Using Include="Blazored.Toast.Services" />
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ using LiteCharms.Features.Mediator;
|
|||||||
using LiteCharms.Features.MidrandBooks.Extensions;
|
using LiteCharms.Features.MidrandBooks.Extensions;
|
||||||
using Microsoft.AspNetCore.HttpOverrides;
|
using Microsoft.AspNetCore.HttpOverrides;
|
||||||
using MidrandBookshop.Components;
|
using MidrandBookshop.Components;
|
||||||
using MidrandBookshop.Services.ShoppingCart;
|
|
||||||
using static LiteCharms.Features.Extensions.Quartz;
|
using static LiteCharms.Features.Extensions.Quartz;
|
||||||
|
|
||||||
var builder = WebApplication.CreateBuilder(args);
|
var builder = WebApplication.CreateBuilder(args);
|
||||||
@@ -27,7 +26,6 @@ builder.Services.AddEmailServiceBus();
|
|||||||
|
|
||||||
builder.Services.AddHttpClient();
|
builder.Services.AddHttpClient();
|
||||||
builder.Services.AddShopServices();
|
builder.Services.AddShopServices();
|
||||||
builder.Services.AddScoped<CartService>();
|
|
||||||
builder.Services.AddHashServices(builder.Configuration);
|
builder.Services.AddHashServices(builder.Configuration);
|
||||||
builder.Services.AddMidrandShopDatabase(builder.Configuration);
|
builder.Services.AddMidrandShopDatabase(builder.Configuration);
|
||||||
|
|
||||||
|
|||||||
@@ -1,150 +0,0 @@
|
|||||||
using LiteCharms.Features.Browser;
|
|
||||||
using LiteCharms.Features.Hasher;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Authors.Models;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Products.Models;
|
|
||||||
using MidrandBookshop.Services.ShoppingCart.Models;
|
|
||||||
|
|
||||||
namespace MidrandBookshop.Services.ShoppingCart;
|
|
||||||
|
|
||||||
public sealed class CartService(LocalStorageService localStorage)
|
|
||||||
{
|
|
||||||
private readonly string CartStorageKey = HashService.ToMd5Hash(nameof(Cart)).Value;
|
|
||||||
|
|
||||||
public Cart ShoppingCart { get; private set; } = new();
|
|
||||||
|
|
||||||
public event Action? OnCartChanged;
|
|
||||||
|
|
||||||
public Cart GetCart() => ShoppingCart;
|
|
||||||
|
|
||||||
public void NotifyStateChanged() => OnCartChanged?.Invoke();
|
|
||||||
|
|
||||||
public async Task LoadCartFromStorageAsync()
|
|
||||||
{
|
|
||||||
var loadResult = await localStorage.GetAsync<Cart>(CartStorageKey);
|
|
||||||
|
|
||||||
if (loadResult.IsFailed) await localStorage.SaveAsync(CartStorageKey, ShoppingCart);
|
|
||||||
|
|
||||||
if (loadResult.IsSuccess) ShoppingCart = loadResult.Value;
|
|
||||||
|
|
||||||
NotifyStateChanged();
|
|
||||||
}
|
|
||||||
|
|
||||||
public async Task SaveCartToStorageAsync() => await localStorage.SaveAsync(CartStorageKey, ShoppingCart);
|
|
||||||
|
|
||||||
public void AddItem(ProductPrice productPrice, Product product, Author author)
|
|
||||||
{
|
|
||||||
var itemExists = false;
|
|
||||||
|
|
||||||
for (var i = 0; i < ShoppingCart.Items.Count; i++)
|
|
||||||
{
|
|
||||||
if (ShoppingCart.Items[i].Price!.Id == productPrice.Id)
|
|
||||||
{
|
|
||||||
ShoppingCart.Items[i].Quantity++;
|
|
||||||
ShoppingCart.Items[i].Amount += productPrice.Amount;
|
|
||||||
|
|
||||||
itemExists = true;
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!itemExists)
|
|
||||||
ShoppingCart.Items.Add(new CartItem
|
|
||||||
{
|
|
||||||
Product = product,
|
|
||||||
Author = author,
|
|
||||||
Price = productPrice,
|
|
||||||
Amount = productPrice.Amount,
|
|
||||||
Quantity = 1,
|
|
||||||
});
|
|
||||||
|
|
||||||
CalculateTotalPrice();
|
|
||||||
NotifyStateChanged();
|
|
||||||
}
|
|
||||||
|
|
||||||
public void UpdateQuantity(long productPriceId, int delta)
|
|
||||||
{
|
|
||||||
for (var i = 0; i < ShoppingCart.Items.Count; i++)
|
|
||||||
{
|
|
||||||
if (ShoppingCart.Items[i].Price!.Id == productPriceId)
|
|
||||||
{
|
|
||||||
var oldQuantity = ShoppingCart.Items[i].Quantity;
|
|
||||||
var pricePerUnit = ShoppingCart.Items[i].Price!.Amount;
|
|
||||||
|
|
||||||
ShoppingCart.Items[i].Quantity += delta;
|
|
||||||
ShoppingCart.Items[i].Amount = pricePerUnit * ShoppingCart.Items[i].Quantity;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
CalculateTotalPrice();
|
|
||||||
NotifyStateChanged();
|
|
||||||
}
|
|
||||||
|
|
||||||
public void RemoveOneItem(long productPriceId)
|
|
||||||
{
|
|
||||||
for (var i = 0; i < ShoppingCart.Items.Count; i++)
|
|
||||||
{
|
|
||||||
if (ShoppingCart.Items[i].Price!.Id == productPriceId)
|
|
||||||
{
|
|
||||||
if (ShoppingCart.Items[i].Quantity <= 1)
|
|
||||||
{
|
|
||||||
ShoppingCart.Items.Remove(ShoppingCart.Items[i]);
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
ShoppingCart.Items[i].Quantity--;
|
|
||||||
ShoppingCart.Items[i].Amount -= ShoppingCart.Items[i].Price!.Amount;
|
|
||||||
}
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
CalculateTotalPrice();
|
|
||||||
NotifyStateChanged();
|
|
||||||
}
|
|
||||||
|
|
||||||
public void RemoveAllSameItem(long productPriceId)
|
|
||||||
{
|
|
||||||
if (ShoppingCart.Items.Count == 0) return;
|
|
||||||
|
|
||||||
var item = ShoppingCart.Items.FirstOrDefault(i => i.Price?.Id == productPriceId);
|
|
||||||
|
|
||||||
if (item is not null) ShoppingCart.Items.Remove(item);
|
|
||||||
|
|
||||||
CalculateTotalPrice();
|
|
||||||
NotifyStateChanged();
|
|
||||||
}
|
|
||||||
|
|
||||||
public void Clear()
|
|
||||||
{
|
|
||||||
if(ShoppingCart.CustomerId is not null || ShoppingCart.OrderId is not null)
|
|
||||||
{
|
|
||||||
ShoppingCart.TotalPrice = 0;
|
|
||||||
ShoppingCart.TotalVat = 0;
|
|
||||||
ShoppingCart.Items.Clear();
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
ShoppingCart = new Cart();
|
|
||||||
|
|
||||||
NotifyStateChanged();
|
|
||||||
}
|
|
||||||
|
|
||||||
public decimal CalculateTotalPrice()
|
|
||||||
{
|
|
||||||
if (ShoppingCart.Items.Count == 0) return 0;
|
|
||||||
|
|
||||||
var gross = ShoppingCart.Items.Sum(i => i.Amount);
|
|
||||||
|
|
||||||
if (!ShoppingCart.IsVatInclusive) ShoppingCart.TotalVat = gross * ShoppingCart.VatRate;
|
|
||||||
|
|
||||||
ShoppingCart.TotalPrice = gross + ShoppingCart.TotalVat;
|
|
||||||
|
|
||||||
return ShoppingCart.TotalPrice;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
namespace MidrandBookshop.Services.ShoppingCart.Models;
|
|
||||||
|
|
||||||
public sealed class Cart
|
|
||||||
{
|
|
||||||
public long? CustomerId { get; set; }
|
|
||||||
|
|
||||||
public long? OrderId { get; set; }
|
|
||||||
|
|
||||||
public decimal TotalPrice { get; set; }
|
|
||||||
|
|
||||||
public decimal TotalVat { get; set; }
|
|
||||||
|
|
||||||
public decimal VatRate { get; set; } = 0.15m;
|
|
||||||
|
|
||||||
public bool IsVatInclusive { get; set; } = true;
|
|
||||||
|
|
||||||
public IList<CartItem> Items { get; set; } = [];
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
using LiteCharms.Features.MidrandBooks.Authors.Models;
|
|
||||||
using LiteCharms.Features.MidrandBooks.Products.Models;
|
|
||||||
|
|
||||||
namespace MidrandBookshop.Services.ShoppingCart.Models;
|
|
||||||
|
|
||||||
public sealed class CartItem
|
|
||||||
{
|
|
||||||
public Author? Author { get; set; }
|
|
||||||
|
|
||||||
public Product? Product { get; set; }
|
|
||||||
|
|
||||||
public ProductPrice? Price { get; set; }
|
|
||||||
|
|
||||||
public int Quantity { get; set; }
|
|
||||||
|
|
||||||
public decimal Amount { get; set; }
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user