Cart fixes (backend), adjusted header, added footer, mobile formatting updates

web/components/ProductProfile.js

@@ -1,6 +1,35 @@
-import Link from "next/link";
+"use client";
+
+import { useState } from "react";
+import { useAuth } from "@/context/AuthContext";
+import { useCart } from "@/context/CartContext";
+
+export default function ProductProfile({ prodId, prodName, categoryName, prodDesc, prodPrice, imageUrl }) {
+  const { user } = useAuth();
+  const { addItem, selectedStoreId } = useCart();
+
+  const [quantity, setQuantity] = useState(1);
+  const [adding, setAdding] = useState(false);
+  const [feedback, setFeedback] = useState(null); // { type: "success"|"error", message }
+
+  function changeQty(delta) {
+    setQuantity((q) => Math.max(1, q + delta));
+  }
+
+  async function handleAddToCart() {
+    setAdding(true);
+    setFeedback(null);
+    try {
+      await addItem(prodId, quantity);
+      setFeedback({ type: "success", message: `${quantity} × ${prodName} added to cart!` });
+      setQuantity(1);
+    } catch (err) {
+      setFeedback({ type: "error", message: err.message ?? "Failed to add to cart." });
+    } finally {
+      setAdding(false);
+    }
+  }
 
-export default function ProductProfile({ prodName, categoryName, prodDesc, prodPrice, imageUrl }) {
   return (
     <div className="pet-detail-card">
       <div className="pet-detail-image-wrapper">
@@ -36,6 +65,57 @@ export default function ProductProfile({ prodName, categoryName, prodDesc, prodP
             <span className="pet-detail-value">{prodDesc ?? "—"}</span>
           </div>
         </div>
+
+        <div className="pet-detail-cta">
+          {!user ? (
+            <p className="pet-detail-cta-text">
+              <a href="/login" className="appt-link">Log in</a> to purchase this item.
+            </p>
+          ) : !selectedStoreId ? (
+            <p className="pet-detail-cta-text">
+              Select a store from the navigation bar to add items to your cart.
+            </p>
+          ) : (
+            <>
+              <div className="product-qty-row">
+                <span className="product-qty-label">Quantity</span>
+                <div className="product-qty-controls">
+                  <button
+                    className="cart-qty-btn"
+                    onClick={() => changeQty(-1)}
+                    disabled={quantity <= 1 || adding}
+                    aria-label="Decrease quantity"
+                  >
+                    −
+                  </button>
+                  <span className="cart-qty-val">{quantity}</span>
+                  <button
+                    className="cart-qty-btn"
+                    onClick={() => changeQty(1)}
+                    disabled={adding}
+                    aria-label="Increase quantity"
+                  >
+                    +
+                  </button>
+                </div>
+              </div>
+
+              <button
+                className="product-add-to-cart-btn"
+                onClick={handleAddToCart}
+                disabled={adding}
+              >
+                {adding ? "Adding…" : "Add to Cart"}
+              </button>
+
+              {feedback && (
+                <p className={`product-cart-feedback product-cart-feedback--${feedback.type}`}>
+                  {feedback.message}
+                </p>
+              )}
+            </>
+          )}
+        </div>
       </div>
     </div>
   );