Coupon system working properly

2026-04-15 00:54:46 -06:00
parent 51a03fe2c5
commit 3f5add59e8
7 changed files with 263 additions and 32 deletions
--- a/web/app/cart/page.js
+++ b/web/app/cart/page.js
@@ -84,6 +84,7 @@ export default function CartPage() {
    removeItem,
    clearCart,
    applyCoupon,
+    removeCoupon,
    checkout,
    cancelCheckout,
  } = useCart();
@@ -91,6 +92,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);
@@ -156,15 +158,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);
    }
@@ -309,32 +337,89 @@ 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>
+            )}
+
            <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>

--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -2385,13 +2385,83 @@ body {
  margin-top: 0.25rem;
 }

+.cart-total-prices {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cart-total-original {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: #aaa;
+  text-decoration: line-through;
+}
+
+.cart-total-discounted {
+  color: #2e7d32;
+}
+
+.cart-savings-callout {
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  color: #15803d;
+  border-radius: 8px;
+  padding: 0.5rem 0.85rem;
+  font-size: 0.88rem;
+  font-weight: 700;
+  text-align: center;
+}
+
 .cart-coupon-section {
  display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
 }

+.cart-coupon-applied {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cart-coupon-badge {
+  display: inline-flex;
+  align-items: center;
+  background: #fff3e0;
+  color: #a65c00;
+  border: 1px solid #ffd180;
+  border-radius: 6px;
+  padding: 0.3rem 0.7rem;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.cart-coupon-remove-btn {
+  background: none;
+  border: none;
+  color: #999;
+  font-size: 0.85rem;
+  cursor: pointer;
+  padding: 0.2rem 0.35rem;
+  border-radius: 4px;
+  line-height: 1;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.cart-coupon-remove-btn:hover:not(:disabled) {
+  color: #c0392b;
+  background: #fff0f0;
+}
+
+.cart-coupon-input-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
 .cart-coupon-input {
  flex: 1;
  min-width: 0;
@@ -2417,12 +2487,31 @@ body {
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
+  white-space: nowrap;
 }

 .cart-coupon-btn:hover:not(:disabled) {
  background: #111;
 }

+.cart-coupon-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cart-coupon-hint {
+  font-size: 0.78rem;
+  color: #888;
+  margin: 0;
+}
+
+.cart-coupon-success {
+  width: 100%;
+  font-size: 0.8rem;
+  color: #16a34a;
+  margin: 0;
+}
+
 .cart-coupon-error {
  width: 100%;
  font-size: 0.8rem;
--- a/web/context/CartContext.js
+++ b/web/context/CartContext.js
@@ -9,6 +9,7 @@ import {
  apiRemoveCartItem,
  apiClearCart,
  apiApplyCoupon,
+  apiRemoveCoupon,
  apiCheckout,
  apiCancelCheckout,
 } from "@/lib/cartApi";
@@ -124,6 +125,17 @@ export function CartProvider({ children }) {
    [token, selectedStoreId]
  );

+  const removeCoupon = useCallback(
+    async () => {
+      if (!token || !selectedStoreId) throw new Error("Select a store first");
+      const updated = await apiRemoveCoupon(token, selectedStoreId);
+      setCart(updated);
+
+      return updated;
+    },
+    [token, selectedStoreId]
+  );
+
  const checkout = useCallback(
    async () => {
      if (!token || !selectedStoreId) throw new Error("Select a store first");
@@ -159,6 +171,7 @@ export function CartProvider({ children }) {
        removeItem,
        clearCart,
        applyCoupon,
+        removeCoupon,
        checkout,
        cancelCheckout,
        refreshCart,
--- a/web/lib/cartApi.js
+++ b/web/lib/cartApi.js
@@ -73,6 +73,15 @@ export async function apiApplyCoupon(token, storeId, couponCode) {
  return handleResponse(res);
 }

+export async function apiRemoveCoupon(token, storeId) {
+  const res = await fetch(`${BASE}/coupon?storeId=${storeId}`, {
+    method: "DELETE",
+    headers: authHeaders(token),
+  });
+
+  return handleResponse(res);
+}
+
 export async function apiCheckout(token, { storeId }) {
  const res = await fetch(`${BASE}/checkout`, {
    method: "POST",