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

Merge pull request #304 from RecentRunner/web-coupons

Browse Source 
web coupons
This commit is contained in:
Harkamal
2026-04-15 01:39:43 -06:00
committed by GitHub
parent bd7368f0cf 2c1871b6e2
commit 404f162728
10 changed files with 295 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -77,7 +77,7 @@ function PaymentForm({ clientSecret, totalAmount, onSuccess, onCancel }) {
}
export default function CartPage() {
const { user, loading: authLoading } = useAuth();
const { user, loading: authLoading, refreshUser } = useAuth();
const {
cart,
cartLoading,
@@ -87,6 +87,7 @@ export default function CartPage() {
removeItem,
clearCart,
applyCoupon,
removeCoupon,
checkout,
cancelCheckout,
} = useCart();
@@ -94,6 +95,7 @@ export default function CartPage() {
const [couponInput, setCouponInput] = useState("");
const [couponError, setCouponError] = useState(null);
const [couponSuccess, setCouponSuccess] = useState(null);
const [couponLoading, setCouponLoading] = useState(false);
const [checkoutLoading, setCheckoutLoading] = useState(false);
@@ -159,15 +161,41 @@ export default function CartPage() {
if (!couponInput.trim()) return;
setCouponLoading(true);
setCouponError(null);
setCouponSuccess(null);
try {
await applyCoupon(couponInput.trim());
const updated = await applyCoupon(couponInput.trim());
setCouponInput("");
}
const dtype = updated.couponDiscountType?.toUpperCase();
const discountLabel =
(dtype === "PERCENTAGE" || dtype === "PERCENT") && updated.couponDiscountValue != null
? `${parseFloat(updated.couponDiscountValue)}% off`
: (dtype === "FIXED" || dtype === "FLAT") && updated.couponDiscountValue != null
? `$${parseFloat(updated.couponDiscountValue).toFixed(2)} off`
: "";
setCouponSuccess(`Coupon "${updated.couponCode}" applied${discountLabel ? ` (${discountLabel})` : ""}!`);
}
catch (err) {
setCouponError(err.message);
}
}
finally {
setCouponLoading(false);
}
}
async function handleRemoveCoupon() {
setCouponLoading(true);
setCouponError(null);
setCouponSuccess(null);
try {
await removeCoupon();
}
catch (err) {
setCouponError(err.message);
}
finally {
setCouponLoading(false);
}
@@ -312,32 +340,95 @@ export default function CartPage() {
</div>
{parseFloat(cart.discountAmount ?? 0) > 0 && (
<div className="cart-summary-row cart-summary-discount">
<span>Discount {cart.couponCode && `(${cart.couponCode})`}</span>
<span>
Discount
{cart.couponCode && ` (${cart.couponCode}`}
{(() => {
const t = cart.couponDiscountType?.toUpperCase();
if ((t === "PERCENTAGE" || t === "PERCENT") && cart.couponDiscountValue != null)
return ` - ${parseFloat(cart.couponDiscountValue)}% off`;
if ((t === "FIXED" || t === "FLAT") && cart.couponDiscountValue != null)
return ` - $${parseFloat(cart.couponDiscountValue).toFixed(2)} off`;
return "";
})()}
{cart.couponCode && ")"}
</span>
<span>−${parseFloat(cart.discountAmount).toFixed(2)}</span>
</div>
)}
<div className="cart-summary-row cart-summary-total">
<span>Total</span>
<span>${parseFloat(cart.totalAmount ?? 0).toFixed(2)}</span>
<div className="cart-total-prices">
{parseFloat(cart.discountAmount ?? 0) > 0 && (
<span className="cart-total-original">
${parseFloat(cart.subtotalAmount ?? 0).toFixed(2)}
</span>
)}
<span className={parseFloat(cart.discountAmount ?? 0) > 0 ? "cart-total-discounted" : ""}>
${parseFloat(cart.totalAmount ?? 0).toFixed(2)}
</span>
</div>
</div>
{parseFloat(cart.discountAmount ?? 0) > 0 && (
<div className="cart-savings-callout">
You save ${parseFloat(cart.discountAmount).toFixed(2)}!
</div>
)}
{user?.role === "CUSTOMER" && (
<div className="cart-points-estimate">
⭐ Earn <strong>{Math.floor(parseFloat(cart.totalAmount ?? 0))}</strong> loyalty point{Math.floor(parseFloat(cart.totalAmount ?? 0)) !== 1 ? "s" : ""} with this purchase
</div>
)}
<div className="cart-coupon-section">
<input
className="cart-coupon-input"
type="text"
placeholder="Coupon code"
value={couponInput}
onChange={(e) => setCouponInput(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && handleApplyCoupon()}
/>
<button
className="cart-coupon-btn"
type="button"
onClick={handleApplyCoupon}
disabled={couponLoading}
>
{couponLoading ? "…" : "Apply"}
</button>
{cart.couponCode && (
<div className="cart-coupon-applied">
<span className="cart-coupon-badge">
{cart.couponCode}
{(() => {
const t = cart.couponDiscountType?.toUpperCase();
if ((t === "PERCENTAGE" || t === "PERCENT") && cart.couponDiscountValue != null)
return ` - ${parseFloat(cart.couponDiscountValue)}% off`;
if ((t === "FIXED" || t === "FLAT") && cart.couponDiscountValue != null)
return ` - $${parseFloat(cart.couponDiscountValue).toFixed(2)} off`;
return "";
})()}
</span>
<button
className="cart-coupon-remove-btn"
type="button"
onClick={handleRemoveCoupon}
disabled={couponLoading}
title="Remove coupon"
>
✕
</button>
</div>
)}
<div className="cart-coupon-input-row">
<input
className="cart-coupon-input"
type="text"
placeholder={cart.couponCode ? "Enter new code to replace" : "Coupon code"}
value={couponInput}
onChange={(e) => { setCouponInput(e.target.value); setCouponError(null); setCouponSuccess(null); }}
onKeyDown={(e) => e.key === "Enter" && handleApplyCoupon()}
/>
<button
className="cart-coupon-btn"
type="button"
onClick={handleApplyCoupon}
disabled={couponLoading || !couponInput.trim()}
>
{couponLoading ? "…" : "Apply"}
</button>
</div>
{cart.couponCode && (
<p className="cart-coupon-hint">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>}
</div>
@@ -362,6 +453,7 @@ export default function CartPage() {
onSuccess={() => {
setClientSecret(null);
setConfirmed(true);
refreshUser().catch(() => {});
}}
onCancel={async () => {
await cancelCheckout().catch(() => {});