Merge pull request #304 from RecentRunner/web-coupons

web coupons
2026-04-15 01:39:43 -06:00
parent bd7368f0cf 2c1871b6e2
commit 404f162728
10 changed files with 295 additions and 35 deletions
--- a/web/app/cart/page.js
+++ b/web/app/cart/page.js
@@ -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(() => {});
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -2379,13 +2379,93 @@ 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-points-estimate {
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  color: #92400e;
+  border-radius: 8px;
+  padding: 0.5rem 0.85rem;
+  font-size: 0.85rem;
+  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;
@@ -2411,12 +2491,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/app/profile/page.js
+++ b/web/app/profile/page.js
@@ -396,6 +396,7 @@ export default function ProfilePage() {
    {label: "Email", value: user.email},
    {label: "Phone", value: user.phone || "N/A"},
    ...(user.storeName ? [{ label: "Store", value: user.storeName }] : []),
+    ...(user.role === "CUSTOMER" ? [{ label: "Loyalty Points", value: user.loyaltyPoints ?? 0 }] : []),
  ];

  return (