RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling refactor

Browse Source
This commit is contained in:
augmentedpotato
2026-04-18 16:12:43 -06:00
committed by Harkamal Randhawa
parent 049c39984b
commit 077d147498
21 changed files with 829 additions and 4509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
web/app/cart/page.js
View File

@@ -52,28 +52,26 @@ function PaymentForm({ clientSecret, totalAmount, onSuccess, onCancel }) {
}
return (
<div className="cart-payment-form">
<h3 className="cart-payment-title">Payment Details</h3>
<p className="cart-payment-total">
<div className="flex flex-col gap-4">
<h3 className="text-lg font-bold text-[#222] m-0">Payment Details</h3>
<p className="text-[0.95rem] text-[#555] m-0">
Total to pay: <strong>${parseFloat(totalAmount).toFixed(2)}</strong>
</p>
<div className="cart-demo-banner">
<strong>Demo mode</strong> — no real charge. Use test card:
<span className="cart-demo-card">4242 4242 4242 4242</span>
· any future date · any 3-digit CVC
<div className="bg-[#fffbeb] border border-[#fde68a] rounded-lg px-4 py-3 text-[0.82rem] text-[#854d0e] flex flex-col gap-1">
<div><strong>Demo mode</strong> — no real charge. Use test card: <span className="font-mono font-bold">4242 4242 4242 4242</span> · any future date · any 3-digit CVC</div>
</div>
<PaymentElement />
{payError && <p className="cart-error-msg">{payError}</p>}
<div className="cart-payment-actions">
{payError && <p className="bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b] rounded-lg px-4 py-3 text-[0.9rem] m-0">{payError}</p>}
<div className="flex gap-3 mt-2">
<button
className="cart-pay-btn"
className="flex-1 py-3 bg-[#e68672] text-white border-none rounded-lg font-bold cursor-pointer hover:bg-[#d4705e] transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
type="button"
onClick={handlePay}
disabled={paying || !stripe}
>
{paying ? "Processing…" : `Pay $${parseFloat(totalAmount).toFixed(2)}`}
</button>
<button className="cart-cancel-btn" type="button" onClick={onCancel}>
<button className="px-4 py-3 border border-[#ddd] rounded-lg bg-white text-[#555] cursor-pointer hover:border-[#aaa] transition-colors" type="button" onClick={onCancel}>
Cancel
</button>
</div>
@@ -128,12 +126,9 @@ export default function CartPage() {
cart.items.forEach((i) => (map[i.cartItemId] = i.quantity));
setLocalQuantities(map);
}
// Sync optimistic state back to server truth whenever cart updates
setOptimisticPointsApplied(null);
}, [cart]);
// If the cart arrives already locked (e.g. user closed the page mid-checkout)
// and there is no active Stripe session, release the lock automatically.
useEffect(() => {
if (cart?.checkoutPending && !clientSecret) {
cancelCheckout().catch(() => {});
@@ -141,15 +136,11 @@ export default function CartPage() {
}, [cart?.checkoutPending, clientSecret, cancelCheckout]);
async function handleQuantityChange(cartItemId, newQty) {
if (newQty < 1) {
return;
}
if (newQty < 1) return;
setLocalQuantities((prev) => ({ ...prev, [cartItemId]: newQty }));
try {
await updateItem(cartItemId, newQty);
}
}
catch {
if (cart?.items) {
const original = cart.items.find((i) => i.cartItemId === cartItemId);
@@ -163,10 +154,8 @@ export default function CartPage() {
async function handleRemove(cartItemId) {
try {
await removeItem(cartItemId);
}
catch {
}
catch {}
}
async function handleApplyCoupon() {
@@ -186,11 +175,9 @@ export default function CartPage() {
: "";
setCouponSuccess(`Coupon "${updated.couponCode}" applied${discountLabel ? ` (${discountLabel})` : ""}!`);
}
catch (err) {
setCouponError(err.message);
}
finally {
setCouponLoading(false);
}
@@ -217,11 +204,9 @@ export default function CartPage() {
try {
await removeCoupon();
}
catch (err) {
setCouponError(err.message);
}
finally {
setCouponLoading(false);
}
@@ -236,39 +221,38 @@ export default function CartPage() {
if (result?.clientSecret) {
setClientSecret(result.clientSecret);
setCheckoutTotal(result.totalAmount);
}
}
else if (result?.status === "succeeded") {
refreshUser().catch(() => {});
setConfirmed(true);
}
}
}
catch (err) {
setCheckoutError(err.message);
}
}
finally {
setCheckoutLoading(false);
}
}
if (authLoading || cartLoading) {
return <main className="cart-page"><p className="cart-status-msg">Loading…</p></main>;
return (
<main className="min-h-[calc(100vh-70px)] flex items-center justify-center">
<p className="text-[#666] text-[1.1rem]">Loading…</p>
</main>
);
}
if (!user) return null;
if (confirmed) {
return (
<main className="cart-page">
<div className="cart-confirmation">
<div className="cart-confirmation-icon">✅</div>
<h2 className="cart-confirmation-title">Order Confirmed!</h2>
<p className="cart-confirmation-body">
Thank you for your purchase. Your order has been placed successfully.
</p>
<button className="cart-continue-btn" type="button" onClick={() => router.push("/products")}>
<main className="min-h-[calc(100vh-70px)] max-w-[1100px] mx-auto px-8 py-10">
<div className="text-center py-16 flex flex-col items-center gap-4">
<div className="text-5xl">✅</div>
<h2 className="text-2xl font-bold text-[#222]">Order Confirmed!</h2>
<p className="text-[#666]">Thank you for your purchase. Your order has been placed successfully.</p>
<button className="px-6 py-3 bg-[#e68672] text-white rounded-lg font-semibold cursor-pointer hover:bg-[#d4705e] border-none transition-colors" type="button" onClick={() => router.push("/products")}>
Continue Shopping
</button>
</div>
@@ -278,8 +262,8 @@ export default function CartPage() {
if (!selectedStoreId) {
return (
<main className="cart-page">
<p className="cart-status-msg">Please select a store from the navigation bar to view your cart.</p>
<main className="min-h-[calc(100vh-70px)] max-w-[1100px] mx-auto px-8 py-10">
<p className="text-center text-[#666] py-12 text-[1.1rem]">Please select a store from the navigation bar to view your cart.</p>
</main>
);
}
@@ -287,64 +271,61 @@ export default function CartPage() {
const items = cart?.items ?? [];
return (
<main className="cart-page">
<h1 className="cart-title">Your Cart</h1>
<main className="min-h-[calc(100vh-70px)] max-w-[1100px] mx-auto px-8 py-10">
<h1 className="text-3xl font-bold text-[#222] mb-8">Your Cart</h1>
{cartError && <p className="cart-error-msg">{cartError}</p>}
{cartError && <p className="bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b] rounded-lg px-4 py-3 text-[0.9rem] mb-4">{cartError}</p>}
{items.length === 0 && !cartError && (
<div className="cart-empty">
<p className="cart-empty-msg">Your cart is empty.</p>
<button className="cart-continue-btn" type="button" onClick={() => router.push("/products")}>
<div className="text-center py-16 flex flex-col items-center gap-4">
<p className="text-[#666] text-[1.1rem]">Your cart is empty.</p>
<button className="px-6 py-3 bg-[#e68672] text-white rounded-lg font-semibold cursor-pointer hover:bg-[#d4705e] border-none transition-colors" type="button" onClick={() => router.push("/products")}>
Browse Products
</button>
</div>
)}
{items.length > 0 && (
<div className="cart-layout">
<div className="cart-items-section">
<div className="flex gap-8 items-start max-[900px]:flex-col">
{/* Items list */}
<div className="flex-1 flex flex-col gap-4">
{items.map((item) => (
<div key={item.cartItemId} className="cart-item-row">
<div key={item.cartItemId} className="flex items-center gap-4 bg-white rounded-xl p-4 shadow-[0_2px_8px_rgba(0,0,0,0.06)]">
<img
src={item.imageUrl || "/images/pet-placeholder.png"}
alt={item.prodName}
className="cart-item-img"
className="w-16 h-16 object-cover rounded-lg"
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = "/images/pet-placeholder.png";
}}
/>
<div className="cart-item-details">
<p className="cart-item-name">{item.prodName}</p>
<p className="cart-item-unit-price">${parseFloat(item.unitPrice).toFixed(2)} each</p>
<div className="flex-1">
<p className="font-semibold text-[#222] text-[0.95rem] m-0 mb-1">{item.prodName}</p>
<p className="text-[0.85rem] text-[#888] m-0">${parseFloat(item.unitPrice).toFixed(2)} each</p>
</div>
<div className="cart-item-qty-controls">
<div className="flex items-center gap-2">
<button
className="cart-qty-btn"
className="w-8 h-8 flex items-center justify-center rounded-md border border-[#ddd] bg-white cursor-pointer hover:border-[#e68672] transition-colors text-[#333]"
type="button"
onClick={() =>
handleQuantityChange(item.cartItemId, (localQuantities[item.cartItemId] ?? item.quantity) - 1)
}
onClick={() => handleQuantityChange(item.cartItemId, (localQuantities[item.cartItemId] ?? item.quantity) - 1)}
>
−
</button>
<span className="cart-qty-val">{localQuantities[item.cartItemId] ?? item.quantity}</span>
<span className="w-8 text-center font-semibold">{localQuantities[item.cartItemId] ?? item.quantity}</span>
<button
className="cart-qty-btn"
className="w-8 h-8 flex items-center justify-center rounded-md border border-[#ddd] bg-white cursor-pointer hover:border-[#e68672] transition-colors text-[#333]"
type="button"
onClick={() =>
handleQuantityChange(item.cartItemId, (localQuantities[item.cartItemId] ?? item.quantity) + 1)
}
onClick={() => handleQuantityChange(item.cartItemId, (localQuantities[item.cartItemId] ?? item.quantity) + 1)}
>
+
</button>
</div>
<p className="cart-item-line-total">
<p className="font-bold text-[#333] min-w-[4rem] text-right">
${(parseFloat(item.unitPrice) * (localQuantities[item.cartItemId] ?? item.quantity)).toFixed(2)}
</p>
<button
className="cart-item-remove-btn"
className="w-8 h-8 flex items-center justify-center rounded-md border-none bg-transparent cursor-pointer text-[#aaa] hover:text-[#c0392b] transition-colors"
type="button"
onClick={() => handleRemove(item.cartItemId)}
>
@@ -353,20 +334,24 @@ export default function CartPage() {
</div>
))}
<button className="cart-clear-btn" type="button" onClick={clearCart}>
Clear Cart
</button>
<div className="flex justify-end">
<button className="px-4 py-2 rounded-lg border border-[#ddd] bg-white text-[#666] text-[0.85rem] cursor-pointer hover:border-[#aaa] transition-colors" type="button" onClick={clearCart}>
Clear Cart
</button>
</div>
</div>
<aside className="cart-summary">
<h2 className="cart-summary-title">Order Summary</h2>
{/* Summary aside */}
<aside className="w-80 max-[900px]:w-full bg-white rounded-xl shadow-[0_2px_12px_rgba(0,0,0,0.08)] p-6 sticky top-24 flex flex-col gap-3">
<h2 className="text-xl font-bold text-[#222] m-0 mb-2">Order Summary</h2>
<div className="cart-summary-row">
<div className="flex items-center justify-between text-[0.9rem] text-[#555]">
<span>Subtotal</span>
<span>${parseFloat(cart.subtotalAmount ?? 0).toFixed(2)}</span>
</div>
{parseFloat(cart.discountAmount ?? 0) > 0 && (
<div className="cart-summary-row cart-summary-discount">
<div className="flex items-center justify-between text-[0.9rem] text-[#16a34a]">
<span>
Coupon discount
{cart.couponCode && ` (${cart.couponCode}`}
@@ -383,51 +368,53 @@ export default function CartPage() {
<span>−${parseFloat(cart.discountAmount).toFixed(2)}</span>
</div>
)}
{parseFloat(cart.pointsDiscountAmount ?? 0) > 0 && (
<div className="cart-summary-row cart-summary-discount">
<div className="flex items-center justify-between text-[0.9rem] text-[#16a34a]">
<span>Loyalty discount ({Math.round(parseFloat(cart.pointsDiscountAmount) * 20)} pts)</span>
<span>−${parseFloat(cart.pointsDiscountAmount).toFixed(2)}</span>
</div>
)}
<div className="cart-summary-row cart-summary-total">
<div className="flex items-center justify-between border-t border-[#eee] pt-3 font-bold text-[1rem] text-[#222]">
<span>Total</span>
<div className="cart-total-prices">
<div className="flex flex-col items-end gap-1">
{(parseFloat(cart.discountAmount ?? 0) > 0 || parseFloat(cart.pointsDiscountAmount ?? 0) > 0) && (
<span className="cart-total-original">
<span className="line-through text-[#aaa] text-[0.85rem] font-normal">
${parseFloat(cart.subtotalAmount ?? 0).toFixed(2)}
</span>
)}
<span className={(parseFloat(cart.discountAmount ?? 0) > 0 || parseFloat(cart.pointsDiscountAmount ?? 0) > 0) ? "cart-total-discounted" : ""}>
<span className={(parseFloat(cart.discountAmount ?? 0) > 0 || parseFloat(cart.pointsDiscountAmount ?? 0) > 0) ? "text-[#e68672] text-[1.1rem]" : ""}>
${parseFloat(cart.totalAmount ?? 0).toFixed(2)}
</span>
</div>
</div>
{parseFloat(cart.discountAmount ?? 0) > 0 && (
<div className="cart-savings-callout">
<div className="bg-[#f0fdf4] border border-[#bbf7d0] text-[#16a34a] rounded-lg px-3 py-2 text-[0.85rem] font-semibold text-center">
You save ${parseFloat(cart.discountAmount).toFixed(2)}!
</div>
)}
{user?.role === "CUSTOMER" && (
<div className="cart-points-estimate">
<div className="text-[0.85rem] text-[#555] bg-[#fffbeb] rounded-lg px-3 py-2">
⭐ Earn <strong>{Math.floor(parseFloat(cart.totalAmount ?? 0))}</strong> loyalty point{Math.floor(parseFloat(cart.totalAmount ?? 0)) !== 1 ? "s" : ""} with this purchase
</div>
)}
{user?.role === "CUSTOMER" && (
<div className="cart-points-section">
<div className="cart-points-balance-row">
<div className="border-t border-[#eee] pt-3 flex flex-col gap-2">
<div className="flex justify-between text-[0.85rem] text-[#555]">
<span>Your points balance:</span>
<strong>{cart.availableLoyaltyPoints ?? 0} pts</strong>
</div>
{(cart.availableLoyaltyPoints ?? 0) < 20 ? (
<p className="cart-points-msg">You need at least 20 points to redeem $1.</p>
<p className="text-[0.8rem] text-[#888] m-0">You need at least 20 points to redeem $1.</p>
) : (
<label className="cart-points-label">
<label className="flex items-center gap-2 text-[0.85rem] cursor-pointer">
<input
type="checkbox"
className="cart-points-checkbox"
className="accent-[#e68672]"
checked={optimisticPointsApplied !== null ? optimisticPointsApplied : !!cart.pointsApplied}
disabled={pointsLoading}
onChange={(e) => handleTogglePoints(e.target.checked)}
@@ -435,9 +422,9 @@ export default function CartPage() {
Use loyalty points for this purchase
</label>
)}
{pointsError && <p className="cart-points-msg" style={{ color: "#dc2626" }}>{pointsError}</p>}
{pointsError && <p className="text-[0.8rem] text-[#dc2626] m-0">{pointsError}</p>}
{(optimisticPointsApplied ?? !!cart.pointsApplied) && parseFloat(cart.pointsDiscountAmount ?? 0) > 0 && (
<div className="cart-points-applied-detail">
<div className="flex justify-between text-[0.82rem] text-[#16a34a] font-semibold">
<span>Applying {Math.round(parseFloat(cart.pointsDiscountAmount) * 20)} pts:</span>
<span>${parseFloat(cart.pointsDiscountAmount).toFixed(2)} off</span>
</div>
@@ -445,10 +432,11 @@ export default function CartPage() {
</div>
)}
<div className="cart-coupon-section">
{/* Coupon section */}
<div className="border-t border-[#eee] pt-3 flex flex-col gap-2">
{cart.couponCode && (
<div className="cart-coupon-applied">
<span className="cart-coupon-badge">
<div className="flex items-center justify-between">
<span className="bg-[#e68672]/10 text-[#e68672] text-[0.82rem] font-semibold rounded-full px-3 py-1">
{cart.couponCode}
{(() => {
const t = cart.couponDiscountType?.toUpperCase();
@@ -460,7 +448,7 @@ export default function CartPage() {
})()}
</span>
<button
className="cart-coupon-remove-btn"
className="w-6 h-6 flex items-center justify-center rounded-full border-none bg-transparent cursor-pointer text-[#aaa] hover:text-[#c0392b] transition-colors text-[0.75rem]"
type="button"
onClick={handleRemoveCoupon}
disabled={couponLoading}
@@ -470,9 +458,9 @@ export default function CartPage() {
</button>
</div>
)}
<div className="cart-coupon-input-row">
<div className="flex gap-2">
<input
className="cart-coupon-input"
className="flex-1 px-3 py-2 border border-[#ddd] rounded-lg text-[0.85rem] outline-none focus:border-[#e68672] transition-colors"
type="text"
placeholder={cart.couponCode ? "Enter new code to replace" : "Coupon code"}
value={couponInput}
@@ -480,7 +468,7 @@ export default function CartPage() {
onKeyDown={(e) => e.key === "Enter" && handleApplyCoupon()}
/>
<button
className="cart-coupon-btn"
className="px-4 py-2 bg-[#e68672] text-white rounded-lg text-[0.85rem] font-semibold border-none cursor-pointer hover:bg-[#d4705e] transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
type="button"
onClick={handleApplyCoupon}
disabled={couponLoading || !couponInput.trim()}
@@ -489,17 +477,17 @@ export default function CartPage() {
</button>
</div>
{cart.couponCode && (
<p className="cart-coupon-hint">Applying a new code will replace the current coupon.</p>
<p className="text-[0.78rem] text-[#888] m-0">Applying a new code will replace the current coupon.</p>
)}
{couponSuccess && <p className="cart-coupon-success">{couponSuccess}</p>}
{couponError && <p className="cart-coupon-error">{couponError}</p>}
{couponSuccess && <p className="text-[0.85rem] text-[#16a34a] m-0">{couponSuccess}</p>}
{couponError && <p className="text-[0.85rem] text-[#c0392b] m-0">{couponError}</p>}
</div>
{checkoutError && <p className="cart-error-msg">{checkoutError}</p>}
{checkoutError && <p className="bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b] rounded-lg px-4 py-3 text-[0.9rem] m-0">{checkoutError}</p>}
{!clientSecret && (
<button
className="cart-checkout-btn"
className="mt-2 py-3 bg-[#e68672] text-white border-none rounded-lg text-base font-bold cursor-pointer transition-all hover:bg-[#d4705e] disabled:opacity-60 disabled:cursor-not-allowed w-full"
type="button"
onClick={handleCheckout}
disabled={checkoutLoading || items.length === 0}