Stripe Payment

web/app/cart/page.js

@@ -0,0 +1,356 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+import { useCart } from "@/context/CartContext";
+import { loadStripe } from "@stripe/stripe-js";
+import {
+  Elements,
+  PaymentElement,
+  useStripe,
+  useElements,
+} from "@stripe/react-stripe-js";
+
+const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || "");
+
+function PaymentForm({ clientSecret, totalAmount, onSuccess, onCancel }) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [paying, setPaying] = useState(false);
+  const [payError, setPayError] = useState(null);
+
+  async function handlePay(e) {
+    e.preventDefault();
+    if (!stripe || !elements) return;
+    setPaying(true);
+    setPayError(null);
+    const { error } = await stripe.confirmPayment({
+      elements,
+      confirmParams: { return_url: window.location.origin + "/cart/confirmation" },
+      redirect: "if_required",
+    });
+
+    if (error) {
+      setPayError(error.message);
+      setPaying(false);
+    } 
+    
+    else {
+      onSuccess();
+    }
+  }
+
+  return (
+    <div className="cart-payment-form">
+      <h3 className="cart-payment-title">Payment Details</h3>
+      <p className="cart-payment-total">
+        Total to pay: <strong>${parseFloat(totalAmount).toFixed(2)}</strong>
+      </p>
+      <PaymentElement />
+      {payError && <p className="cart-error-msg">{payError}</p>}
+      <div className="cart-payment-actions">
+        <button
+          className="cart-pay-btn"
+          type="button"
+          onClick={handlePay}
+          disabled={paying || !stripe}
+        >
+          {paying ? "Processing…" : `Pay $${parseFloat(totalAmount).toFixed(2)}`}
+        </button>
+        <button className="cart-cancel-btn" type="button" onClick={onCancel}>
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function CartPage() {
+  const { user, loading: authLoading } = useAuth();
+  const {
+    cart,
+    cartLoading,
+    cartError,
+    selectedStoreId,
+    updateItem,
+    removeItem,
+    clearCart,
+    applyCoupon,
+    checkout,
+  } = useCart();
+  const router = useRouter();
+
+  const [couponInput, setCouponInput] = useState("");
+  const [couponError, setCouponError] = useState(null);
+  const [couponLoading, setCouponLoading] = useState(false);
+
+  const [checkoutLoading, setCheckoutLoading] = useState(false);
+  const [checkoutError, setCheckoutError] = useState(null);
+  const [clientSecret, setClientSecret] = useState(null);
+  const [checkoutTotal, setCheckoutTotal] = useState(null);
+  const [confirmed, setConfirmed] = useState(false);
+
+  const [localQuantities, setLocalQuantities] = useState({});
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      router.push("/login");
+    }
+  }, [authLoading, user, router]);
+
+  useEffect(() => {
+    if (cart?.items) {
+      const map = {};
+      cart.items.forEach((i) => (map[i.cartItemId] = i.quantity));
+      setLocalQuantities(map);
+    }
+  }, [cart]);
+
+  async function handleQuantityChange(cartItemId, newQty) {
+    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);
+        if (original) {
+          setLocalQuantities((prev) => ({ ...prev, [cartItemId]: original.quantity }));
+        }
+      }
+    }
+  }
+
+  async function handleRemove(cartItemId) {
+    try {
+      await removeItem(cartItemId);
+    } 
+    
+    catch {
+    }
+  }
+
+  async function handleApplyCoupon() {
+    if (!couponInput.trim()) return;
+    setCouponLoading(true);
+    setCouponError(null);
+    try {
+      await applyCoupon(couponInput.trim());
+      setCouponInput("");
+    } 
+    
+    catch (err) {
+      setCouponError(err.message);
+    } 
+    
+    finally {
+      setCouponLoading(false);
+    }
+  }
+
+  async function handleCheckout() {
+    if (!cart?.items?.length) return;
+    setCheckoutLoading(true);
+    setCheckoutError(null);
+    try {
+      const result = await checkout("pm_card_visa");
+      if (result?.clientSecret) {
+        setClientSecret(result.clientSecret);
+        setCheckoutTotal(result.totalAmount);
+      } 
+      
+      else if (result?.status === "succeeded") {
+        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>;
+  }
+
+  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")}>
+            Continue Shopping
+          </button>
+        </div>
+      </main>
+    );
+  }
+
+  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>
+    );
+  }
+
+  const items = cart?.items ?? [];
+
+  return (
+    <main className="cart-page">
+      <h1 className="cart-title">Your Cart</h1>
+
+      {cartError && <p className="cart-error-msg">{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")}>
+            Browse Products
+          </button>
+        </div>
+      )}
+
+      {items.length > 0 && (
+        <div className="cart-layout">
+          <div className="cart-items-section">
+            {items.map((item) => (
+              <div key={item.cartItemId} className="cart-item-row">
+                <img
+                  src={item.imageUrl || "/images/pet-placeholder.png"}
+                  alt={item.prodName}
+                  className="cart-item-img"
+                  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>
+                <div className="cart-item-qty-controls">
+                  <button
+                    className="cart-qty-btn"
+                    type="button"
+                    onClick={() =>
+                      handleQuantityChange(item.cartItemId, (localQuantities[item.cartItemId] ?? item.quantity) - 1)
+                    }
+                  >
+                    −
+                  </button>
+                  <span className="cart-qty-val">{localQuantities[item.cartItemId] ?? item.quantity}</span>
+                  <button
+                    className="cart-qty-btn"
+                    type="button"
+                    onClick={() =>
+                      handleQuantityChange(item.cartItemId, (localQuantities[item.cartItemId] ?? item.quantity) + 1)
+                    }
+                  >
+                    +
+                  </button>
+                </div>
+                <p className="cart-item-line-total">
+                  ${(parseFloat(item.unitPrice) * (localQuantities[item.cartItemId] ?? item.quantity)).toFixed(2)}
+                </p>
+                <button
+                  className="cart-item-remove-btn"
+                  type="button"
+                  onClick={() => handleRemove(item.cartItemId)}
+                >
+                  ✕
+                </button>
+              </div>
+            ))}
+
+            <button className="cart-clear-btn" type="button" onClick={clearCart}>
+              Clear Cart
+            </button>
+          </div>
+
+          <aside className="cart-summary">
+            <h2 className="cart-summary-title">Order Summary</h2>
+
+            <div className="cart-summary-row">
+              <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">
+                <span>Discount {cart.couponCode && `(${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>
+
+            <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>
+              {couponError && <p className="cart-coupon-error">{couponError}</p>}
+            </div>
+
+            {checkoutError && <p className="cart-error-msg">{checkoutError}</p>}
+
+            {!clientSecret && (
+              <button
+                className="cart-checkout-btn"
+                type="button"
+                onClick={handleCheckout}
+                disabled={checkoutLoading || items.length === 0}
+              >
+                {checkoutLoading ? "Processing…" : "Checkout"}
+              </button>
+            )}
+
+            {clientSecret && (
+              <Elements stripe={stripePromise} options={{ clientSecret }}>
+                <PaymentForm
+                  clientSecret={clientSecret}
+                  totalAmount={checkoutTotal ?? cart.totalAmount}
+                  onSuccess={() => {
+                    setClientSecret(null);
+                    setConfirmed(true);
+                  }}
+                  onCancel={() => setClientSecret(null)}
+                />
+              </Elements>
+            )}
+          </aside>
+        </div>
+      )}
+    </main>
+  );
+}

web/app/globals.css

@@ -1843,3 +1843,527 @@ body {
   border-color: #999;
   color: #333;
 }
+
+/* ── Store Selector ──────────────────────────────────────── */
+
+.nav-store-select {
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 6px;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+  margin-right: 0.5rem;
+  outline: none;
+  transition: background 0.2s ease;
+}
+
+.nav-store-select option {
+  background: #333;
+  color: white;
+}
+
+.nav-store-select:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+/* ── Cart Badge ──────────────────────────────────────────── */
+
+.nav-cart-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: 1.4rem;
+  text-decoration: none;
+  margin-right: 0.5rem;
+  padding: 0.2rem 0.4rem;
+  border-radius: 6px;
+  transition: background 0.2s ease;
+}
+
+.nav-cart-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.nav-cart-badge {
+  position: absolute;
+  top: -4px;
+  right: -6px;
+  background: #e53935;
+  color: white;
+  border-radius: 999px;
+  font-size: 0.65rem;
+  font-weight: 700;
+  min-width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 3px;
+  line-height: 1;
+}
+
+/* ProductCard Add-to-Cart */
+
+.product-card-wrapper {
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+}
+
+.product-card-link {
+  text-decoration: none;
+  color: inherit;
+  flex: 1;
+}
+
+.product-card-actions {
+  padding: 0.6rem 0.75rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.product-card-qty-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.product-card-qty-btn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: white;
+  font-size: 1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.2s ease;
+}
+
+.product-card-qty-btn:hover:not(:disabled) {
+  border-color: orange;
+}
+
+.product-card-qty-val {
+  min-width: 24px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.product-card-add-btn {
+  width: 100%;
+  padding: 0.45rem;
+  background: orange;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.88rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.product-card-add-btn:hover:not(:disabled) {
+  background: #e69500;
+}
+
+.product-card-add-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.product-card-feedback {
+  font-size: 0.78rem;
+  color: #2e7d32;
+  margin: 0;
+  text-align: center;
+}
+
+/* Cart Page */
+
+.cart-page {
+  max-width: 1100px;
+  margin: 2rem auto;
+  padding: 0 1.5rem 3rem;
+}
+
+.cart-title {
+  font-size: 2rem;
+  font-weight: 800;
+  color: #222;
+  margin-bottom: 1.5rem;
+}
+
+.cart-status-msg {
+  text-align: center;
+  color: #888;
+  margin-top: 3rem;
+  font-size: 1rem;
+}
+
+.cart-error-msg {
+  color: #c0392b;
+  font-size: 0.9rem;
+  margin: 0.5rem 0;
+}
+
+.cart-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 4rem;
+}
+
+.cart-empty-msg {
+  font-size: 1.1rem;
+  color: #666;
+}
+
+.cart-continue-btn {
+  background: orange;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 0.65rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.cart-continue-btn:hover {
+  background: #e69500;
+}
+
+.cart-layout {
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 2rem;
+  align-items: start;
+}
+
+@media (max-width: 800px) {
+  .cart-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+.cart-items-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.cart-item-row {
+  display: grid;
+  grid-template-columns: 72px 1fr auto auto auto;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid #eee;
+}
+
+.cart-item-img {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 8px;
+  background: #f5f5f5;
+}
+
+.cart-item-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.cart-item-name {
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: #222;
+  margin: 0;
+}
+
+.cart-item-unit-price {
+  font-size: 0.82rem;
+  color: #888;
+  margin: 0;
+}
+
+.cart-item-qty-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.cart-qty-btn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: white;
+  font-size: 1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.2s ease;
+}
+
+.cart-qty-btn:hover {
+  border-color: orange;
+}
+
+.cart-qty-val {
+  min-width: 28px;
+  text-align: center;
+  font-weight: 600;
+}
+
+.cart-item-line-total {
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: #222;
+  min-width: 60px;
+  text-align: right;
+  margin: 0;
+}
+
+.cart-item-remove-btn {
+  background: none;
+  border: none;
+  color: #bbb;
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0.2rem;
+  transition: color 0.2s ease;
+}
+
+.cart-item-remove-btn:hover {
+  color: #c0392b;
+}
+
+.cart-clear-btn {
+  align-self: flex-start;
+  margin-top: 1rem;
+  background: none;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 0.4rem 0.9rem;
+  font-size: 0.82rem;
+  color: #888;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cart-clear-btn:hover {
+  border-color: #c0392b;
+  color: #c0392b;
+}
+
+.cart-summary {
+  background: #fafafa;
+  border: 1px solid #eee;
+  border-radius: 14px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  position: sticky;
+  top: 84px;
+}
+
+.cart-summary-title {
+  font-size: 1.2rem;
+  font-weight: 800;
+  color: #222;
+  margin: 0 0 0.5rem;
+}
+
+.cart-summary-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.95rem;
+  color: #444;
+}
+
+.cart-summary-discount {
+  color: #2e7d32;
+}
+
+.cart-summary-total {
+  font-size: 1.1rem;
+  font-weight: 800;
+  color: #222;
+  border-top: 1px solid #eee;
+  padding-top: 0.75rem;
+  margin-top: 0.25rem;
+}
+
+.cart-coupon-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+.cart-coupon-input {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid #ddd;
+  border-radius: 7px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.88rem;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.cart-coupon-input:focus {
+  border-color: orange;
+}
+
+.cart-coupon-btn {
+  background: #333;
+  color: white;
+  border: none;
+  border-radius: 7px;
+  padding: 0.5rem 0.9rem;
+  font-size: 0.88rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.cart-coupon-btn:hover:not(:disabled) {
+  background: #111;
+}
+
+.cart-coupon-error {
+  width: 100%;
+  font-size: 0.8rem;
+  color: #c0392b;
+  margin: 0;
+}
+
+.cart-checkout-btn {
+  width: 100%;
+  padding: 0.85rem;
+  background: orange;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-weight: 800;
+  cursor: pointer;
+  margin-top: 0.5rem;
+  transition: background 0.2s ease;
+}
+
+.cart-checkout-btn:hover:not(:disabled) {
+  background: #e69500;
+}
+
+.cart-checkout-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cart-payment-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.cart-payment-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #222;
+  margin: 0;
+}
+
+.cart-payment-total {
+  font-size: 0.9rem;
+  color: #444;
+  margin: 0;
+}
+
+.cart-payment-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cart-pay-btn {
+  width: 100%;
+  padding: 0.75rem;
+  background: #1a56db;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.cart-pay-btn:hover:not(:disabled) {
+  background: #1446c0;
+}
+
+.cart-pay-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cart-cancel-btn {
+  width: 100%;
+  padding: 0.65rem;
+  background: white;
+  color: #666;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cart-cancel-btn:hover {
+  border-color: #999;
+  color: #333;
+}
+
+.cart-confirmation {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 5rem;
+  text-align: center;
+}
+
+.cart-confirmation-icon {
+  font-size: 3.5rem;
+}
+
+.cart-confirmation-title {
+  font-size: 1.8rem;
+  font-weight: 800;
+  color: #222;
+  margin: 0;
+}
+
+.cart-confirmation-body {
+  font-size: 1rem;
+  color: #555;
+  max-width: 400px;
+  margin: 0;
+}