Integrate #36, #38, #37 with resolved auth conflicts

src/components/Gallery.tsx

@@ -23,7 +23,8 @@ const Gallery: React.FC<GalleryProps> = ({
     <div className="flex flex-row gap-4 justify-center mt-4">
       {images.map((src, index) => {
         return (
-          <div
+          <button
+            type="button"
             key={`${src}-${index}`}
             className={`relative cursor-pointer rounded-lg overflow-hidden border-2 hover:border-indigo-500 ${
               selectedIndex === index
@@ -38,7 +39,7 @@ const Gallery: React.FC<GalleryProps> = ({
               loading="lazy"
               decoding="async"
             />
-          </div>
+          </button>
         );
       })}
     </div>

src/context/AuthContext.tsx

@@ -13,11 +13,13 @@ interface User {
   lastName?: string;
 }
 
+type FetchUserResult = User | null;
+
 interface AuthContextType {
   user: User | null;
   loading: boolean;
   setUser: (user: User | null) => void;
-  fetchUser: () => Promise<void>;
+  fetchUser: () => Promise<FetchUserResult>;
 }
 
 const AuthContext = createContext<AuthContextType | null>(null);
@@ -26,27 +28,45 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
 
-  const fetchUser = async () => {
+  const fetchUser = async (): Promise<FetchUserResult> => {
     try {
-      const res = await fetch(`${BASE_URL}/profile`, {
+      const sessionRes = await fetch(`${BASE_URL}/api/auth/get-session`, {
         credentials: "include",
       });
-      if (res.ok) {
-        const data: any = await res.json();
-        setUser(data);
-      } else {
+
+      if (!sessionRes.ok) {
+        throw new Error("Failed to fetch session");
+      }
+
+      const sessionData = await sessionRes.json();
+
+      if (!sessionData?.session) {
         setUser(null);
+        return null;
       }
-    } catch {
+
+      const profileRes = await fetch(`${BASE_URL}/profile`, {
+        credentials: "include",
+      });
+
+      if (!profileRes.ok) {
+        throw new Error("Failed to fetch profile");
+      }
+
+      const data: User = await profileRes.json();
+      setUser(data);
+      return data;
+    } catch (error) {
       setUser(null);
+      throw error instanceof Error ? error : new Error("Failed to fetch user");
     } finally {
       setLoading(false);
     }
   };
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: TODO: useEventEffect in 19
   useEffect(() => {
-    fetchUser();
+    fetchUser().catch(() => undefined);
   }, []);
 
   return (

src/pages/Checkout.tsx

@@ -57,20 +57,40 @@ function isObject(val: unknown): val is Record<string, unknown> {
   return typeof val === "object" && val !== null;
 }
 
-function parsePaymentIntentResponse(obj: unknown): PaymentIntentResponse | null {
+function parsePaymentIntentResponse(
+  obj: unknown,
+): PaymentIntentResponse | null {
   if (!isObject(obj)) return null;
   const record = obj as Record<string, unknown>;
-  const checkout_url = typeof record.checkout_url === "string" ? record.checkout_url : undefined;
-  const clientSecret = typeof record.clientSecret === "string" ? record.clientSecret : undefined;
-  const client_secret = typeof record.client_secret === "string" ? record.client_secret : undefined;
+  const checkout_url =
+    typeof record.checkout_url === "string" ? record.checkout_url : undefined;
+  const clientSecret =
+    typeof record.clientSecret === "string" ? record.clientSecret : undefined;
+  const client_secret =
+    typeof record.client_secret === "string" ? record.client_secret : undefined;
   const amount = typeof record.amount === "number" ? record.amount : undefined;
-  const currency = typeof record.currency === "string" ? record.currency : undefined;
+  const currency =
+    typeof record.currency === "string" ? record.currency : undefined;
   const orderId =
     typeof record.orderId === "string" || typeof record.orderId === "number"
       ? (record.orderId as string | number)
       : undefined;
-  if (checkout_url || clientSecret || client_secret || amount || currency || orderId)
-    return { checkout_url, clientSecret, client_secret, amount, currency, orderId };
+  if (
+    checkout_url ||
+    clientSecret ||
+    client_secret ||
+    amount ||
+    currency ||
+    orderId
+  )
+    return {
+      checkout_url,
+      clientSecret,
+      client_secret,
+      amount,
+      currency,
+      orderId,
+    };
   return null;
 }
 
@@ -216,7 +236,9 @@ export default function Checkout() {
       });
       if (!res.ok) {
         const text = await res.text();
-        throw new Error(`Payment intent request failed (${res.status}): ${text}`);
+        throw new Error(
+          `Payment intent request failed (${res.status}): ${text}`,
+        );
       }
       const dataJson: unknown = await res.json();
       const data = parsePaymentIntentResponse(dataJson);
@@ -240,7 +262,9 @@ export default function Checkout() {
         navigate(`/order/${data.orderId}`);
       }
     } catch (err: unknown) {
-      setCartError(err instanceof Error ? err.message : "Payment intent failed");
+      setCartError(
+        err instanceof Error ? err.message : "Payment intent failed",
+      );
     } finally {
       setCartLoading(false);
     }

src/pages/OrderComplete.tsx

@@ -1,25 +1,30 @@
-import { Link } from "react-router-dom";
 import { useEffect } from "react";
+import { Link } from "react-router-dom";
 
 export default function OrderComplete() {
   useEffect(() => {
     try {
       localStorage.removeItem("cartId");
     } catch (e) {
       // ignore localStorage errors in some environments
-      console.log('Could not clear cartId from localStorage', e);
+      console.log("Could not clear cartId from localStorage", e);
     }
   }, []);
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12">
       <div className="max-w-xl w-full bg-white shadow rounded-lg p-8 text-center">
-        <h1 className="text-2xl font-semibold mb-4">Thank you — your order is complete</h1>
+        <h1 className="text-2xl font-semibold mb-4">
+          Thank you — your order is complete
+        </h1>
         <p className="text-gray-600 mb-6">
-          We received your payment. You will receive an email confirmation shortly.
+          We received your payment. You will receive an email confirmation
+          shortly.
         </p>
         <div className="flex justify-center gap-4">
-          <Link to="/" className="rounded-md bg-indigo-600 text-white px-4 py-2">
+          <Link
+            to="/"
+            className="rounded-md bg-indigo-600 text-white px-4 py-2">
             Back to shop
           </Link>
           <Link to="/profile" className="rounded-md border px-4 py-2">

src/pages/Payment.tsx

@@ -1,12 +1,12 @@
-import { useMemo, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { loadStripe, type PaymentIntentResult } from "@stripe/stripe-js";
 import {
   Elements,
   PaymentElement,
-  useStripe,
   useElements,
+  useStripe,
 } from "@stripe/react-stripe-js";
+import { loadStripe, type PaymentIntentResult } from "@stripe/stripe-js";
+import { useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const publishableKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY as string;
 const stripePromise = loadStripe(publishableKey);
@@ -28,7 +28,7 @@ function PaymentForm() {
         elements,
         confirmParams: {
           // You can change return_url to an order confirmation route
-          return_url: window.location.origin + "/order/complete",
+          return_url: `${window.location.origin}/order/complete`,
         },
         redirect: "if_required",
       });
@@ -69,6 +69,10 @@ export default function PaymentPage() {
   // Prefer router state (in-memory) to avoid exposing secrets in the URL.
   const state = (loc.state as { clientSecret?: string } | null) ?? null;
   const clientSecret = state?.clientSecret ?? q.get("client_secret");
+  const options = useMemo(
+    () => (clientSecret ? { clientSecret } : undefined),
+    [clientSecret],
+  );
 
   if (!publishableKey) {
     return (
@@ -79,13 +83,9 @@ export default function PaymentPage() {
   }
 
   if (!clientSecret) {
-    return (
-      <div className="p-8 text-center">No payment session available.</div>
-    );
+    return <div className="p-8 text-center">No payment session available.</div>;
   }
 
-  const options = useMemo(() => ({ clientSecret }), [clientSecret]);
-
   return (
     <div className="min-h-screen bg-gray-50 py-12">
       <div className="mx-auto max-w-2xl px-4">