Merge branch 'main' into feat/email-in-settings

src/App.test.tsx

@@ -1,23 +1,17 @@
-import { render, screen } from '@testing-library/react'
-import { describe, it, expect, vi } from 'vitest'
-import App from './App.tsx'
-
-vi.mock('./lib/auth-client.ts', () => ({
-  authClient: {
-    useSession: () => ({ data: null, isPending: false }),
-  },
-}))
-
-describe('App', () => {
-  it('renders the dashboard on the root route', () => {
-    render(<App />)
-    expect(screen.getByText('CartSnitch')).toBeInTheDocument()
-  })
-
-  it('renders the bottom navigation', () => {
-    render(<App />)
-    expect(screen.getByText('Home')).toBeInTheDocument()
-    expect(screen.getByText('Purchases')).toBeInTheDocument()
-    expect(screen.getByText('Products')).toBeInTheDocument()
-  })
-})
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import App from './App.tsx'
+
+vi.mock('./lib/auth-client.ts', () => ({
+  authClient: {
+    useSession: () => ({ data: null, isPending: false }),
+  },
+}))
+
+describe('App', () => {
+  it('redirects unauthenticated users to login', () => {
+    render(<App />)
+    expect(screen.getByText('CartSnitch')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument()
+  })
+})

src/App.tsx

@@ -31,8 +31,8 @@ export default function App() {
       <BrowserRouter>
         <Routes>
           <Route element={<Layout />}>
-            <Route index element={<Dashboard />} />
             <Route element={<ProtectedRoute />}>
+              <Route index element={<Dashboard />} />
               <Route path="purchases" element={<Purchases />} />
               <Route path="purchases/:id" element={<PurchaseDetail />} />
               <Route path="products" element={<Products />} />

src/components/ProtectedRoute.tsx

@@ -4,12 +4,22 @@ import { authClient } from '../lib/auth-client.ts'
 import { useAuthStore } from '../stores/auth.ts'
 
 export function ProtectedRoute() {
+  const isMockAuth = import.meta.env.VITE_MOCK_AUTH === 'true'
   const { data: session, isPending } = authClient.useSession()
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
   const setAuthenticated = useAuthStore((s) => s.setAuthenticated)
 
   useEffect(() => {
-    setAuthenticated(!!session)
-  }, [session, setAuthenticated])
+    if (!isMockAuth) {
+      setAuthenticated(!!session)
+    }
+  }, [session, setAuthenticated, isMockAuth])
+
+  // In mock auth mode, rely on Zustand store (set by Login/Register pages)
+  if (isMockAuth) {
+    if (!isAuthenticated) return <Navigate to="/login" replace />
+    return <Outlet />
+  }
 
   if (isPending) {
     return (

src/hooks/__tests__/useApi.test.tsx

@@ -0,0 +1,45 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { usePurchases } from '../useApi'
+import { http, HttpResponse } from 'msw'
+import { server } from '../../test/mocks/server'
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+    )
+  }
+}
+
+describe('useApi hooks', () => {
+  describe('usePurchases', () => {
+    it('fetches and returns purchases', async () => {
+      const { result } = renderHook(() => usePurchases(), { wrapper: createWrapper() })
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true))
+
+      expect(result.current.data).toHaveLength(1)
+      expect(result.current.data![0]).toMatchObject({
+        id: 'pur_1',
+        storeName: 'Kroger',
+        total: 42.5,
+      })
+    })
+
+    it('returns an error when the endpoint fails', async () => {
+      server.use(
+        http.get('/api/v1/purchases', () => HttpResponse.error()),
+      )
+
+      const { result } = renderHook(() => usePurchases(), { wrapper: createWrapper() })
+
+      await waitFor(() => expect(result.current.isError).toBe(true))
+    })
+  })
+})

src/hooks/useApi.ts

@@ -35,7 +35,7 @@ export function useProduct(id: string) {
 export function usePriceHistory(productId: string) {
   return useQuery({
     queryKey: ['priceHistory', productId],
-    queryFn: () => api.get<PriceHistory[]>(`/products/${productId}/price-history`),
+    queryFn: () => api.get<PriceHistory[]>(`/products/${productId}/prices`),
     enabled: !!productId,
   })
 }
@@ -50,6 +50,6 @@ export function useCoupons() {
 export function usePriceAlerts() {
   return useQuery({
     queryKey: ['priceAlerts'],
-    queryFn: () => api.get<PriceAlert[]>('/price-alerts'),
+    queryFn: () => api.get<PriceAlert[]>('/alerts'),
   })
 }

src/lib/api.ts

@@ -15,7 +15,7 @@ const mockRoutes: Record<string, (path: string) => unknown> = {
   '/purchases': () => mockPurchases,
   '/products': () => mockProducts,
   '/coupons': () => mockCoupons,
-  '/price-alerts': () => mockAlerts,
+  '/alerts': () => mockAlerts,
 }
 
 function matchMockRoute<T>(path: string): T | null {
@@ -30,7 +30,7 @@ function matchMockRoute<T>(path: string): T | null {
   }
 
   // /products/:id/price-history
-  const priceHistoryMatch = path.match(/^\/products\/(.+)\/price-history$/)
+  const priceHistoryMatch = path.match(/^\/products\/(.+)\/prices$/)
   if (priceHistoryMatch) {
     return getMockPriceHistory(priceHistoryMatch[1]) as T
   }

src/lib/auth-client.ts

@@ -1,8 +1,36 @@
 import { createAuthClient } from "better-auth/react"
+import type { BetterFetchPlugin } from "@better-fetch/fetch"
+
+/**
+ * Maps 'name' -> 'display_name' in register requests to match the API's RegisterRequest schema.
+ */
+const displayNameMapper: BetterFetchPlugin = {
+  id: "display-name-mapper",
+  name: "display-name-mapper",
+  hooks: {
+    onRequest: async (context) => {
+      const url = typeof context.url === "string" ? context.url : context.url.pathname
+      if (
+        url.endsWith("/auth/register") &&
+        context.method === "POST" &&
+        context.body &&
+        "name" in context.body
+      ) {
+        context.body = {
+          ...context.body,
+          display_name: context.body.name as string,
+          name: undefined,
+        }
+      }
+      return context
+    },
+  },
+}
 
 export const authClient = createAuthClient({
-  baseURL: import.meta.env.VITE_AUTH_URL ?? "http://localhost:3001",
+  baseURL: import.meta.env.VITE_AUTH_URL || "",
   basePath: "/auth",
+  fetchPlugins: [displayNameMapper],
 })
 
 export const { useSession, signIn, signUp, signOut } = authClient

src/pages/Dashboard.tsx

@@ -1,13 +1,8 @@
-import React, { Suspense } from 'react'
 import { Link } from 'react-router-dom'
 import { authClient } from '../lib/auth-client.ts'
-import { usePurchases, usePriceAlerts, usePriceHistory } from '../hooks/useApi.ts'
+import { usePurchases, usePriceAlerts } from '../hooks/useApi.ts'
 import { StoreIcon } from '../components/StoreIcon.tsx'
 
-const LazySparklineCard = React.lazy(() =>
-  import('../components/SparklineChart.tsx').then((mod) => ({ default: mod.SparklineCard }))
-)
-
 export function Dashboard() {
   const { data: session, isPending } = authClient.useSession()
 
@@ -44,19 +39,11 @@ export function Dashboard() {
 function AuthenticatedDashboard({ userName }: { userName: string }) {
   const { data: purchases = [], isLoading: purchasesLoading } = usePurchases()
   const { data: alerts = [], isLoading: alertsLoading } = usePriceAlerts()
-  const { data: eggHistory = [] } = usePriceHistory('prod10')
-  const { data: milkHistory = [] } = usePriceHistory('prod1')
 
   const triggeredAlerts = alerts.filter((a) => a.triggered)
   const watchingAlerts = alerts.filter((a) => !a.triggered)
   const recentPurchases = purchases.slice(0, 3)
 
-  const sparklineData = eggHistory.filter((p) => p.storeId === 'meijer').slice(-8)
-  const milkSparkline = milkHistory.filter((p) => p.storeId === 'kroger').slice(-8)
-
-  const eggCurrent = sparklineData.length > 0 ? `$${sparklineData[sparklineData.length - 1].price.toFixed(2)}` : '—'
-  const milkCurrent = milkSparkline.length > 0 ? `$${milkSparkline[milkSparkline.length - 1].price.toFixed(2)}` : '—'
-
   if (purchasesLoading || alertsLoading) {
     return <DashboardSkeleton />
   }
@@ -106,11 +93,8 @@ function AuthenticatedDashboard({ userName }: { userName: string }) {
       {/* Price trend sparklines */}
       <section className="mt-6">
         <h2 className="mb-3 text-lg font-semibold text-gray-700">Price Trends</h2>
-        <div className="space-y-3">
-          <Suspense fallback={<SparklinePlaceholder />}>
-            <LazySparklineCard label="Eggs (dozen)" data={sparklineData} current={eggCurrent} />
-            <LazySparklineCard label="Whole Milk (1 gal)" data={milkSparkline} current={milkCurrent} />
-          </Suspense>
+        <div className="rounded-xl bg-white p-4 shadow-sm text-center text-sm text-gray-400">
+          Connect a store to see price trends
         </div>
       </section>
 
@@ -173,6 +157,7 @@ function AuthenticatedDashboard({ userName }: { userName: string }) {
 function DashboardSkeleton() {
   return (
     <div className="animate-pulse">
+      <h1 className="sr-only">Loading CartSnitch…</h1>
       <div className="h-8 w-40 rounded bg-gray-200" />
       <div className="mt-4 grid grid-cols-2 gap-3">
         <div className="h-24 rounded-xl bg-gray-200" />
@@ -186,15 +171,3 @@ function DashboardSkeleton() {
     </div>
   )
 }
-
-function SparklinePlaceholder() {
-  return (
-    <div className="flex items-center gap-4 rounded-xl bg-white p-4 shadow-sm animate-pulse">
-      <div className="min-w-0 flex-1">
-        <div className="h-4 w-24 rounded bg-gray-200" />
-        <div className="mt-2 h-6 w-16 rounded bg-gray-200" />
-      </div>
-      <div className="h-10 w-24 rounded bg-gray-100" />
-    </div>
-  )
-}

src/pages/Login.tsx

@@ -31,8 +31,14 @@ export function Login() {
         throw new Error(authError.message ?? 'Sign in failed')
       }
 
-      setAuthenticated(true)
-      navigate('/')
+      // After successful signIn, force a session fetch to confirm the cookie is set
+      // before navigating to the protected route
+      const sessionResult = await authClient.getSession()
+      if (sessionResult.data) {
+        navigate('/')
+      } else {
+        setError('Sign in failed. Please try again.')
+      }
     } catch {
       if (import.meta.env.VITE_MOCK_AUTH === 'true') {
         setAuthenticated(true)
@@ -46,7 +52,7 @@ export function Login() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center px-4">
+    <main className="flex min-h-screen flex-col items-center justify-center px-4">
       <h1 className="mb-2 text-3xl font-bold text-gray-900">CartSnitch</h1>
       <p className="mb-8 text-sm text-gray-500">Track prices. Save money.</p>
 
@@ -88,10 +94,10 @@ export function Login() {
 
       <p className="mt-6 text-sm text-gray-500">
         Don't have an account?{' '}
-        <Link to="/register" className="text-brand-blue">
+        <Link to="/register" className="text-brand-blue underline">
           Sign up
         </Link>
       </p>
-    </div>
+    </main>
   )
 }

src/pages/Register.tsx

@@ -38,8 +38,15 @@ export function Register() {
         throw new Error(authError.message ?? 'Registration failed')
       }
 
-      setAuthenticated(true)
-      navigate('/')
+      // After successful signUp, force a session fetch to confirm the cookie is set
+      // before navigating to the protected route
+      const sessionResult = await authClient.getSession()
+      if (sessionResult.data) {
+        navigate('/')
+      } else {
+        // Session not established — show success message and link to login
+        setError('Account created! Please sign in.')
+      }
     } catch {
       if (import.meta.env.VITE_MOCK_AUTH === 'true') {
         setAuthenticated(true)

src/test/mocks/handlers.ts

@@ -0,0 +1,65 @@
+import { http, HttpResponse } from 'msw'
+import type { Purchase, Product, Coupon, PriceAlert } from '../../types/api.ts'
+
+const mockPurchases: Purchase[] = [
+  {
+    id: 'pur_1',
+    storeId: 'store_1',
+    storeName: 'Kroger',
+    date: '2024-01-15',
+    total: 42.5,
+    items: [
+      { id: 'item_1', productId: 'prod_1', name: 'Milk', quantity: 1, price: 3.99, unitPrice: 3.99 },
+      { id: 'item_2', productId: 'prod_2', name: 'Bread', quantity: 2, price: 5.98, unitPrice: 2.99 },
+    ],
+  },
+]
+
+const mockProducts: Product[] = [
+  {
+    id: 'prod_1',
+    name: 'Whole Milk',
+    brand: 'Kroger',
+    category: 'Dairy',
+    prices: [{ storeId: 'store_1', storeName: 'Kroger', price: 3.99, lastUpdated: '2024-01-15' }],
+  },
+  {
+    id: 'prod_2',
+    name: 'Whole Wheat Bread',
+    brand: 'Nature\'s Own',
+    category: 'Bakery',
+    prices: [{ storeId: 'store_1', storeName: 'Kroger', price: 2.99, lastUpdated: '2024-01-15' }],
+  },
+]
+
+const mockCoupons: Coupon[] = [
+  {
+    id: 'coupon_1',
+    productId: 'prod_1',
+    storeName: 'Kroger',
+    description: '$1 off milk',
+    discount: '$1.00',
+    expiresAt: '2024-12-31',
+    code: 'MILK1',
+  },
+]
+
+const mockAlerts: PriceAlert[] = [
+  {
+    id: 'alert_1',
+    productId: 'prod_1',
+    productName: 'Whole Milk',
+    targetPrice: 2.99,
+    currentPrice: 3.99,
+    triggered: false,
+  },
+]
+
+export const handlers = [
+  http.get('/api/v1/health', () => HttpResponse.json({ status: 'ok' })),
+  http.get('/api/v1/purchases', () => HttpResponse.json(mockPurchases)),
+  http.get('/api/v1/products', () => HttpResponse.json(mockProducts)),
+  http.get('/api/v1/products/prod_1', () => HttpResponse.json(mockProducts[0])),
+  http.get('/api/v1/coupons', () => HttpResponse.json(mockCoupons)),
+  http.get('/api/v1/alerts', () => HttpResponse.json(mockAlerts)),
+]

src/test/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+export const server = setupServer(...handlers)

src/test/setup.ts

@@ -1 +1,6 @@
 import '@testing-library/jest-dom/vitest'
+import { server } from './mocks/server'
+
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())

src/utils/__tests__/formatCurrency.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { formatCurrency } from '../formatCurrency';
+
+describe('formatCurrency', () => {
+  it('formats 0 cents as $0.00', () => {
+    expect(formatCurrency(0)).toBe('$0.00');
+  });
+
+  it('formats 199 cents as $1.99', () => {
+    expect(formatCurrency(199)).toBe('$1.99');
+  });
+
+  it('formats 10000 cents as $100.00', () => {
+    expect(formatCurrency(10000)).toBe('$100.00');
+  });
+
+  it('handles negative values', () => {
+    expect(formatCurrency(-500)).toBe('-$5.00');
+  });
+
+  it('handles large numbers', () => {
+    expect(formatCurrency(99999999)).toBe('$999,999.99');
+  });
+
+  it('supports custom locale', () => {
+    expect(formatCurrency(1999, 'de-DE', 'EUR')).toContain('19,99');
+  });
+
+  it('supports custom currency', () => {
+    const result = formatCurrency(1000, 'en-US', 'EUR');
+    expect(result).toContain('10.00');
+  });
+});

src/utils/__tests__/formatDate.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { formatDate } from '../formatDate';
+
+describe('formatDate', () => {
+  describe('short style', () => {
+    it('formats an ISO date string', () => {
+      const result = formatDate('2024-03-15', 'short');
+      expect(result).toMatch(/Mar 15, 2024/);
+    });
+
+    it('formats a Date object', () => {
+      const result = formatDate(new Date('2024-03-15'), 'short');
+      expect(result).toMatch(/Mar 15, 2024/);
+    });
+  });
+
+  describe('long style', () => {
+    it('formats with weekday and full month name', () => {
+      const result = formatDate('2024-03-15', 'long');
+      expect(result).toMatch(/Friday/);
+      expect(result).toMatch(/March/);
+    });
+  });
+
+  describe('relative style', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it('returns "just now" for very recent dates', () => {
+      const now = new Date('2024-01-01T12:00:00Z');
+      vi.setSystemTime(now);
+      const result = formatDate(new Date('2024-01-01T11:59:59Z'), 'relative');
+      expect(result).toBe('just now');
+    });
+
+    it('returns minutes ago', () => {
+      const now = new Date('2024-01-01T12:00:00Z');
+      vi.setSystemTime(now);
+      const result = formatDate(new Date('2024-01-01T11:45:00Z'), 'relative');
+      expect(result).toBe('15m ago');
+    });
+
+    it('returns hours ago', () => {
+      const now = new Date('2024-01-01T12:00:00Z');
+      vi.setSystemTime(now);
+      const result = formatDate(new Date('2024-01-01T09:00:00Z'), 'relative');
+      expect(result).toBe('3h ago');
+    });
+
+    it('returns days ago', () => {
+      const now = new Date('2024-01-05T12:00:00Z');
+      vi.setSystemTime(now);
+      const result = formatDate(new Date('2024-01-01T12:00:00Z'), 'relative');
+      expect(result).toBe('4d ago');
+    });
+  });
+});

src/utils/__tests__/storeSlugs.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { getStore, getStoreName, STORE_SLUGS } from '../storeSlugs';
+
+describe('storeSlugs', () => {
+  describe('STORE_SLUGS constant', () => {
+    it('contains meijer, kroger, and target', () => {
+      expect(STORE_SLUGS).toHaveProperty('meijer');
+      expect(STORE_SLUGS).toHaveProperty('kroger');
+      expect(STORE_SLUGS).toHaveProperty('target');
+    });
+  });
+
+  describe('getStore', () => {
+    it('returns store data for known slug', () => {
+      const store = getStore('meijer');
+      expect(store).toEqual({
+        name: 'Meijer',
+        color: '#e31837',
+        icon: '/icons/stores/meijer.svg',
+      });
+    });
+
+    it('returns null for unknown slug', () => {
+      expect(getStore('unknown-store')).toBeNull();
+    });
+
+    it('is case insensitive', () => {
+      expect(getStore('KROGER')).toBeTruthy();
+      expect(getStore('Target')).toBeTruthy();
+    });
+  });
+
+  describe('getStoreName', () => {
+    it('returns store name for known slug', () => {
+      expect(getStoreName('kroger')).toBe('Kroger');
+    });
+
+    it('returns raw slug for unknown store', () => {
+      expect(getStoreName('unknown-store')).toBe('unknown-store');
+    });
+
+    it('is case insensitive', () => {
+      expect(getStoreName('TARGET')).toBe('Target');
+    });
+  });
+});

src/utils/formatCurrency.ts

@@ -0,0 +1,10 @@
+export function formatCurrency(
+  cents: number,
+  locale = 'en-US',
+  currency = 'USD'
+): string {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+  }).format(cents / 100);
+}

src/utils/formatDate.ts

@@ -0,0 +1,34 @@
+export function formatDate(
+  date: string | Date,
+  style: 'short' | 'long' | 'relative' = 'short'
+): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+
+  if (style === 'short') {
+    return d.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  }
+
+  if (style === 'long') {
+    return d.toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  }
+
+  // relative
+  const diff = Date.now() - d.getTime();
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}

src/utils/storeSlugs.ts

@@ -0,0 +1,13 @@
+export const STORE_SLUGS: Record<string, { name: string; color: string; icon: string }> = {
+  meijer: { name: 'Meijer', color: '#e31837', icon: '/icons/stores/meijer.svg' },
+  kroger: { name: 'Kroger', color: '#0033a0', icon: '/icons/stores/kroger.svg' },
+  target: { name: 'Target', color: '#cc0000', icon: '/icons/stores/target.svg' },
+};
+
+export function getStore(slug: string) {
+  return STORE_SLUGS[slug.toLowerCase()] ?? null;
+}
+
+export function getStoreName(slug: string): string {
+  return getStore(slug)?.name ?? slug;
+}