Frontend Frankie
5fbf0f5c5c
Build all 8 primary screens for CAR-33 on top of the Phase 1 scaffold: - Auth: login, register, forgot password with JWT flow and mock fallback - Dashboard: triggered alerts banner, spending stats, price trend sparklines (Recharts), recent purchases - Purchase History: store filter chips, paginated list with item previews - Purchase Detail: receipt view with line items linking to product pages - Products: search with instant filter, store price comparison badges - Product Detail: 90-day price history chart (Recharts), store comparison table - Store Comparison: ranked store cards with savings banner - Price Alerts: triggered/watching sections, create form, progress bars, delete - Coupons: expiration warnings, copy-to-clipboard coupon codes - Account Linking: connect Meijer/Kroger/Target with status indicators - Settings: profile, connected stores, notification toggles, theme switcher, sign out Also adds: - Mock data layer (src/lib/mock-data.ts) for demo/screenshot use - StoreIcon component with store brand colors - Code-split Recharts chunk (initial JS: 117KB, Recharts lazy: 498KB) - All 48px+ touch targets, mobile-first Tailwind layout Co-Authored-By: Paperclip <noreply@paperclip.ing>
72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
import { useState } from 'react'
|
|
import { mockCoupons } from '../lib/mock-data.ts'
|
|
import { StoreIcon } from '../components/StoreIcon.tsx'
|
|
|
|
export function Coupons() {
|
|
const [copied, setCopied] = useState<string | null>(null)
|
|
|
|
function handleCopy(code: string, id: string) {
|
|
navigator.clipboard?.writeText(code)
|
|
setCopied(id)
|
|
setTimeout(() => setCopied(null), 2000)
|
|
}
|
|
|
|
const storeIds: Record<string, string> = {
|
|
Meijer: 'meijer',
|
|
Kroger: 'kroger',
|
|
Target: 'target',
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Coupons & Deals</h1>
|
|
|
|
<div className="mt-4 space-y-3">
|
|
{mockCoupons.map((coupon) => {
|
|
const isExpiringSoon =
|
|
new Date(coupon.expiresAt).getTime() - Date.now() < 7 * 24 * 60 * 60 * 1000
|
|
|
|
return (
|
|
<div key={coupon.id} className="rounded-xl bg-white p-4 shadow-sm">
|
|
<div className="flex items-start gap-3">
|
|
<StoreIcon storeId={storeIds[coupon.storeName] ?? 'unknown'} />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium text-gray-900">{coupon.description}</p>
|
|
<p className="mt-0.5 text-xs text-gray-500">{coupon.storeName}</p>
|
|
<p
|
|
className={`mt-1 text-xs ${
|
|
isExpiringSoon ? 'font-medium text-orange-600' : 'text-gray-400'
|
|
}`}
|
|
>
|
|
Expires{' '}
|
|
{new Date(coupon.expiresAt).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})}
|
|
{isExpiringSoon && ' — expiring soon!'}
|
|
</p>
|
|
</div>
|
|
<span className="shrink-0 rounded-lg bg-green-100 px-2 py-1 text-sm font-bold text-green-700">
|
|
{coupon.discount}
|
|
</span>
|
|
</div>
|
|
|
|
{coupon.code && (
|
|
<button
|
|
onClick={() => handleCopy(coupon.code!, coupon.id)}
|
|
className="mt-3 flex min-h-10 w-full items-center justify-center gap-2 rounded-lg border border-dashed border-gray-300 px-4 py-2 text-sm font-mono active:bg-gray-50"
|
|
>
|
|
<span className="text-gray-700">{coupon.code}</span>
|
|
<span className="text-xs text-brand-blue">
|
|
{copied === coupon.id ? 'Copied!' : 'Tap to copy'}
|
|
</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|