Khwezi Mngoma
66 lines
3.7 KiB
Plaintext
66 lines
3.7 KiB
Plaintext
@page "/checkout"
|
|
@inject NavigationManager Navigation
|
|
@rendermode InteractiveServer
|
|
@attribute [Authorize]
|
|
|
|
<div class="container py-5">
|
|
<h2 class="fw-bold mb-4">Checkout</h2>
|
|
<div class="row g-5">
|
|
<div class="col-lg-8">
|
|
<div class="card border-0 shadow-sm p-4 mb-4">
|
|
<h5 class="fw-bold mb-3">Your Items</h5>
|
|
@foreach (var item in ShoppingCart.Items)
|
|
{
|
|
<div class="d-flex align-items-center justify-content-between pb-3 border-bottom mb-3">
|
|
<div><h6 class="mb-0">@item.Product!.Name</h6><small class="text-muted">@($"{item.Author!.Name} {item.Author.LastName}")</small></div>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="d-flex border rounded-pill">
|
|
<button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, -1)">-</button>
|
|
<span class="px-2 pt-1">@item.Quantity</span>
|
|
<button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, 1)">+</button>
|
|
</div>
|
|
<button class="btn btn-sm text-danger" @onclick="() => RemoveFromCart(item)">Remove</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="card border-0 shadow-sm p-4 mb-4">
|
|
<h5 class="fw-bold mb-3">Shipping Method</h5>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="radio" name="shipping" id="pickup"
|
|
checked=@(ShippingCost == 0) @onclick="() => ShippingCost = 0">
|
|
<label class="form-check-label" for="pickup">Pickup from Bookshop (Free)</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="shipping" id="delivery"
|
|
checked=@(ShippingCost == 60) @onclick="() => ShippingCost = 60">
|
|
<label class="form-check-label" for="delivery">Home Delivery (R60.00)</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card border-0 shadow-sm p-4">
|
|
<h5 class="fw-bold mb-3">Shipping Address</h5>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
|
|
<label class="form-check-label" for="sameAsBilling">Billing address same as shipping</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
|
|
<h5 class="fw-bold mb-3">Order Summary</h5>
|
|
<div class="d-flex justify-content-between mb-2"><span>Subtotal</span><span>R @ShoppingCart.TotalAmount.ToString("F2")</span></div>
|
|
<div class="d-flex justify-content-between mb-2"><span>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:F2}")</span></div>
|
|
<hr />
|
|
<div class="d-flex justify-content-between mb-4">
|
|
<span class="fw-bold">Total Due</span>
|
|
<h4 class="fw-bold">R @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")</h4>
|
|
</div>
|
|
<button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="CompletePurchase">Complete Purchase</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |