Coupon system working properly

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>