Compare commits

...

4 Commits

Author SHA1 Message Date
khwezi 4e42d9f21a Merge pull request 'Using shared service for Cart management' (#56) from cart into main
Reviewed-on: #56
2026-06-12 08:55:26 +02:00
Khwezi Mngoma 0765e63d8a Using shared service for Cart management
continuous-integration/drone/pr Build is passing
2026-06-12 08:54:53 +02:00
khwezi 0b7476d31c Merge pull request 'Stable checkout page' (#55) from cart into main
Reviewed-on: #55
2026-06-11 14:25:23 +02:00
Khwezi Mngoma 234fb0f2f3 Stable checkout page
continuous-integration/drone/pr Build is passing
2026-06-11 14:24:42 +02:00
13 changed files with 75 additions and 259 deletions
@@ -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;
@@ -1,11 +1,11 @@
using MidrandBookshop.Services.ShoppingCart; using LiteCharms.Features.MidrandBooks.Payments;
using MidrandBookshop.Services.ShoppingCart.Models; using LiteCharms.Features.MidrandBooks.Payments.Models;
namespace MidrandBookshop.Components.Pages; namespace MidrandBookshop.Components.Pages;
public partial class Cart(CartService cartService) public partial class CartReview(CartService cartService)
{ {
protected Services.ShoppingCart.Models.Cart ShoppingCart => cartService?.ShoppingCart!; protected Cart ShoppingCart => cartService?.ShoppingCart!;
protected async void IncreaseQty(CartItem item) protected async void IncreaseQty(CartItem item)
{ {
@@ -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; }
+2 -2
View File
@@ -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" />
-2
View File
@@ -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,153 +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 static Func<Cart, long, int> GetCartItemQuantity = (shoppingCart, productPriceId) =>
shoppingCart.Items.FirstOrDefault(p => p.Price!.Id == productPriceId)?.Quantity ?? 1;
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.TotalAmount = 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.TotalAmount = gross + ShoppingCart.TotalVat;
return ShoppingCart.TotalAmount;
}
}
@@ -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 TotalAmount { 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; }
}