[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Amazon Cart Chat dark theme inspired by AI platforms */ --background: oklch(0.12 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.16 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.14 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.19 254); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.22 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.22 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.55 0.22 35); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.65 0.19 254); --chart-1: oklch(0.65 0.19 254); --chart-2: oklch(0.55 0.22 35); --chart-3: oklch(0.45 0.15 180); --chart-4: oklch(0.7 0.18 120); --chart-5: oklch(0.6 0.2 300); --radius: 0.75rem; --sidebar: oklch(0.14 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.65 0.19 254); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.22 0 0); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.65 0.19 254); } .dark { --background: oklch(0.12 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.16 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.14 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.19 254); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.22 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.22 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.55 0.22 35); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.65 0.19 254); --chart-1: oklch(0.65 0.19 254); --chart-2: oklch(0.55 0.22 35); --chart-3: oklch(0.45 0.15 180); --chart-4: oklch(0.7 0.18 120); --chart-5: oklch(0.6 0.2 300); --sidebar: oklch(0.14 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.65 0.19 254); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.22 0 0); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.65 0.19 254); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import "./globals.css" export const metadata: Metadata = { title: "Amazon Cart Chat - AI Shopping Assistant", description: "Shop smarter with AI-powered conversational commerce", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="lib/types.ts" isMerged="true" export interface Product { id: string name: string price: number image: string rating: number reviews: number description: string category: string inStock: boolean prime: boolean } export interface CartItem extends Product { quantity: number } export interface Message { id: string role: "user" | "assistant" content: string products?: Product[] timestamp: Date } [V0_FILE]typescriptreact:file="lib/cart-store.ts" isMerged="true" "use client" import { create } from "zustand" import { persist } from "zustand/middleware" import type { CartItem, Product } from "./types" interface CartStore { items: CartItem[] addItem: (product: Product) => void removeItem: (productId: string) => void updateQuantity: (productId: string, quantity: number) => void clearCart: () => void getTotalItems: () => number getTotalPrice: () => number } export const useCartStore = create()( persist( (set, get) => ({ items: [], addItem: (product) => { set((state) => { const existingItem = state.items.find((item) => item.id === product.id) if (existingItem) { return { items: state.items.map((item) => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item, ), } } return { items: [...state.items, { ...product, quantity: 1 }], } }) }, removeItem: (productId) => { set((state) => ({ items: state.items.filter((item) => item.id !== productId), })) }, updateQuantity: (productId, quantity) => { if (quantity <= 0) { get().removeItem(productId) return } set((state) => ({ items: state.items.map((item) => (item.id === productId ? { ...item, quantity } : item)), })) }, clearCart: () => { set({ items: [] }) }, getTotalItems: () => { return get().items.reduce((total, item) => total + item.quantity, 0) }, getTotalPrice: () => { return get().items.reduce((total, item) => total + item.price * item.quantity, 0) }, }), { name: "cart-storage", }, ), ) [V0_FILE]typescriptreact:file="components/chat-header.tsx" isMerged="true" "use client" import { ShoppingCart, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" interface ChatHeaderProps { cartItemCount: number onCartClick: () => void } export function ChatHeader({ cartItemCount, onCartClick }: ChatHeaderProps) { return (

Amazon Cart Chat

AI Shopping Assistant

) } [V0_FILE]typescriptreact:file="components/product-card.tsx" isMerged="true" "use client" import { Star, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import type { Product } from "@/lib/types" interface ProductCardProps { product: Product onAddToCart: (product: Product) => void } export function ProductCard({ product, onAddToCart }: ProductCardProps) { return (

{product.prime && Prime}

{product.name}

{product.description}

{product.rating}

({product.reviews.toLocaleString()})

${product.price.toFixed(2)}

) } [V0_FILE]typescriptreact:file="components/chat-message.tsx" isMerged="true" import { Bot, User } from "lucide-react" import { ProductCard } from "./product-card" import type { Product } from "@/lib/types" interface ChatMessageProps { role: "user" | "assistant" content: string products?: Product[] onAddToCart: (product: Product) => void } export function ChatMessage({ role, content, products, onAddToCart }: ChatMessageProps) { const isUser = role === "user" return (

{isUser ? : }

{content}

{products && products.length > 0 && (

{products.map((product) => ( ))}

)}

) } [V0_FILE]png:file="public/apple-airpods-pro.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/apple-airpods-pro-iWoiT9hIDnNEthHxzWGsGN82kcTj9a.png" isMerged="true" [V0_FILE]jpg:file="public/kindle-paperwhite.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/kindle-paperwhite-eyx4Doc70qL5rD7S0mh8jRpdMuEKKe.jpg" isMerged="true" [V0_FILE]png:file="public/instant-pot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/instant-pot-m5w6IKh2JY434TZIxgPWpeKIgoJtAg.png" isMerged="true" [V0_FILE]jpg:file="public/anker-power-bank.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/anker-power-bank-4OZjjAIiMYr6t8EB3wV8wGlvSyBKSY.jpg" isMerged="true" [V0_FILE]jpg:file="public/logitech-mx-master-mouse.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/logitech-mx-master-mouse-r7PhKMxLT61k6sh83kTvQhRtERhBIE.jpg" isMerged="true" [V0_FILE]png:file="public/wireless-earbuds.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wireless-earbuds-LSJARvfD7HAgVJSkvaxkjRo0BNGaJc.png" isMerged="true" [V0_FILE]jpg:file="public/ninja-air-fryer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ninja-air-fryer-hPd4CdFHUxxap6mm7g75CrMndq4WQq.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "zustand": "5.0.8", "ai": "5.0.72", "@ai-sdk/react": "2.0.72" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/cart-sidebar.tsx" isEdit="true" isMerged="true" "use client" import { X, Minus, Plus, Trash2, ShoppingBag } from "lucide-react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" import { useCartStore } from "@/lib/cart-store" interface CartSidebarProps { isOpen: boolean onClose: () => void } export function CartSidebar({ isOpen, onClose }: CartSidebarProps) { const router = useRouter() const { items, updateQuantity, removeItem, getTotalPrice, clearCart } = useCartStore() if (!isOpen) return null const total = getTotalPrice() const itemCount = items.reduce((sum, item) => sum + item.quantity, 0) const handleCheckout = () => { onClose() router.push("/checkout") } return ( <>

Shopping Cart ({itemCount})

{items.length === 0 ? (

Your cart is empty

Start chatting to discover products!

) : ( <>

{items.map((item) => (

{item.name}

${item.price.toFixed(2)}

{item.quantity}

))}

Subtotal ${total.toFixed(2)}

Shipping FREE

Total ${total.toFixed(2)}

)}

) } [V0_FILE]typescriptreact:file="components/order-confirmation-dialog.tsx" isMerged="true" "use client" import { CheckCircle2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" interface OrderConfirmationDialogProps { isOpen: boolean onClose: () => void orderNumber: string total: number } export function OrderConfirmationDialog({ isOpen, onClose, orderNumber, total }: OrderConfirmationDialogProps) { return ( ) } [V0_FILE]typescriptreact:file="app/chatgpt-demo/page.tsx" isMerged="true" "use client" import { useState } from "react" import { ShoppingCart, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import type { Product } from "@/lib/types" export default function ChatGPTDemoPage() { const [cartCount, setCartCount] = useState(0) const handleAddToCart = (product: Product) => { setCartCount((prev) => prev + 1) } // Mock conversation showing Amazon integration const conversation = [ { role: "user", content: "I need a good pair of wireless headphones for working from home. Budget is around $300.", }, { role: "assistant", content: "I'd be happy to help you find the perfect wireless headphones! Based on your budget and work-from-home needs, here are my top recommendations from Amazon:", products: [ { id: "1", name: "Sony WH-1000XM5 Wireless Headphones", price: 299.99, rating: 4.7, reviews: 12453, image: "/wireless-headphones.png", category: "Electronics", description: "Industry-leading noise cancellation, 30-hour battery life", prime: true, }, { id: "2", name: "Bose QuietComfort 45", price: 279.0, rating: 4.6, reviews: 8932, image: "/bose-quietcomfort-headphones.jpg", category: "Electronics", description: "Legendary comfort, excellent noise cancellation", prime: true, }, { id: "3", name: "Apple AirPods Max", price: 479.0, rating: 4.8, reviews: 15234, image: "/apple-airpods-max.jpg", category: "Electronics", description: "Premium build, spatial audio, seamless Apple integration", prime: true, }, ], }, { role: "user", content: "The Sony ones look great! Can you tell me more about the battery life and comfort?", }, { role: "assistant", content: "Great choice! The Sony WH-1000XM5 offers exceptional battery life with up to 30 hours of continuous playback with noise cancellation on, and up to 40 hours with it off. They feature a redesigned lightweight design with soft-fit leather for all-day comfort. The ear cups are specially designed to reduce pressure while maintaining excellent noise isolation.\n\nWould you like to add these to your Amazon cart?", showAddedProduct: { id: "1", name: "Sony WH-1000XM5 Wireless Headphones", price: 299.99, rating: 4.7, reviews: 12453, image: "/wireless-headphones.png", category: "Electronics", description: "Industry-leading noise cancellation, 30-hour battery life", prime: true, }, }, ] return (

ChatGPT Amazon Shopping

{conversation.map((message, index) => (

{/* Avatar */}

{message.role === "user" ? (

) : (

)}

{/* Content */}

{message.content}

{message.products && (

{message.products.map((product) => (

{product.name}

{product.description}

★ {product.rating} ({product.reviews.toLocaleString()})

{product.prime && ( Prime )}

${product.price}

))}

)} {message.showAddedProduct && (

{message.showAddedProduct.name}

${message.showAddedProduct.price} {message.showAddedProduct.prime && ( Prime )}

)}

))}

This is a mockup showing how Amazon shopping would integrate with ChatGPT

) } [V0_FILE]png:file="public/wireless-headphones.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wireless-headphones-65OFtm8LieFHXTxcNuEG0yiU2v1bJH.png" isMerged="true" [V0_FILE]jpg:file="public/bose-quietcomfort-headphones.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bose-quietcomfort-headphones-lJGPCwzqECi1cSj8xxxJZzeiSBeqb9.jpg" isMerged="true" [V0_FILE]jpg:file="public/apple-airpods-max.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/apple-airpods-max-mNo3WIlYYcpFeY6LNAQOqnly6SnGh1.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/chatgpt-cart-sidebar.tsx" isMerged="true" "use client" import { X, Minus, Plus, Trash2, ShoppingBag } from "lucide-react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { useCartStore } from "@/lib/cart-store" interface ChatGPTCartSidebarProps { isOpen: boolean onClose: () => void } export function ChatGPTCartSidebar({ isOpen, onClose }: ChatGPTCartSidebarProps) { const router = useRouter() const { items, updateQuantity, removeItem, getTotalPrice, clearCart } = useCartStore() if (!isOpen) return null const total = getTotalPrice() const itemCount = items.reduce((sum, item) => sum + item.quantity, 0) const handleCheckout = () => { onClose() router.push("/checkout") } return ( <>

Shopping Cart ({itemCount})

{items.length === 0 ? (

Your cart is empty

Start chatting to discover products!

) : ( <>

{items.map((item) => (

{item.name}

${item.price.toFixed(2)}

{item.quantity}

))}

Subtotal ${total.toFixed(2)}

Shipping FREE

Total ${total.toFixed(2)}

)}

) } [V0_FILE]typescriptreact:file="app/amazon-theme/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" export default function AmazonThemePage() {} [V0_FILE]typescript:file="app/api/chat/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { convertToModelMessages, streamText, tool, type UIMessage } from "ai" import { z } from "zod" import { searchProducts, getProductsByCategory, MOCK_PRODUCTS } from "@/lib/products" export const maxDuration = 30 export async function POST(req: Request) { const { messages }: { messages: UIMessage[] } = await req.json() console.log("[v0] Received messages:", messages.length) const modelMessages = convertToModelMessages(messages) console.log("[v0] Starting streamText with model") const result = streamText({ model: "openai/gpt-4o-mini", messages: modelMessages, system: `You are an AI shopping assistant for Amazon Cart Chat. Your role is to help users discover and purchase products through natural conversation. Guidelines: - Be friendly, helpful, and conversational - Ask clarifying questions to understand user needs better - Recommend products based on user preferences, budget, and requirements - Highlight key features, ratings, and Prime availability - Use the searchProducts tool to find relevant products - Use the getProductRecommendations tool to suggest products by category - When showing products, briefly explain why you're recommending them - Encourage users to add items to their cart - Be honest about product limitations or alternatives Always prioritize user satisfaction and help them make informed purchase decisions.`, tools: { searchProducts: tool({ description: "Search for products based on a query string. Use this when users ask for specific items or product types.", inputSchema: z.object({ query: z.string().describe('The search query (e.g., "wireless headphones", "kitchen appliances")'), }), execute: async ({ query }) => { console.log("[v0] Searching products with query:", query) const products = searchProducts(query) console.log("[v0] Found products:", products.length) return { products: products.slice(0, 6), count: products.length, } }, }), getProductRecommendations: tool({ description: "Get product recommendations by category. Use this for general browsing or category-based requests.", inputSchema: z.object({ category: z.enum(["Electronics", "Home & Kitchen"]).describe("The product category"), }), execute: async ({ category }) => { console.log("[v0] Getting recommendations for category:", category) const products = getProductsByCategory(category) console.log("[v0] Found products:", products.length) return { products: products.slice(0, 6), category, } }, }), getBestSellers: tool({ description: "Get the best-selling products. Use this when users ask for popular or trending items.", inputSchema: z.object({}), execute: async () => { console.log("[v0] Getting best sellers") const bestSellers = [...MOCK_PRODUCTS].sort((a, b) => b.reviews - a.reviews).slice(0, 6) console.log("[v0] Found best sellers:", bestSellers.length) return { products: bestSellers, } }, }), }, abortSignal: req.signal, }) console.log("[v0] Returning stream response") return result.toUIMessageStreamResponse({}) } [V0_FILE]typescriptreact:file="components/chatgpt-product-card.tsx" isEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import type { Product } from "@/lib/types" interface ChatGPTProductCardProps { product: Product onAddToCart: (product: Product) => void } export function ChatGPTProductCard({ product, onAddToCart }: ChatGPTProductCardProps) { return (

{product.prime && ( Prime )}

{product.name}

★ {product.rating} ({product.reviews.toLocaleString()})

{product.description}

${product.price.toFixed(2)} {product.prime && FREE delivery}

) } [V0_FILE]typescript:file="lib/products.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { Product } from "./types" export const MOCK_PRODUCTS: Product[] = [ { id: "1", name: "Sony WH-1000XM5 Wireless Noise Canceling Headphones", price: 398.0, image: "/sony-wh-1000xm5-black-wireless-headphones-product-.jpg", rating: 4.7, reviews: 12453, description: "Industry-leading noise cancellation with premium sound quality", category: "Electronics", inStock: true, prime: true, }, { id: "2", name: "Apple AirPods Pro (2nd Generation)", price: 249.0, image: "/apple-airpods-pro-2nd-generation-white-product-pho.jpg", rating: 4.8, reviews: 28934, description: "Active Noise Cancellation with Adaptive Transparency", category: "Electronics", inStock: true, prime: true, }, { id: "2a", name: "Sony WH-1000XM4 Wireless Headphones", price: 278.0, image: "/sony-wh-1000xm4-black-wireless-headphones-product-.jpg", rating: 4.7, reviews: 45231, description: "Premium noise canceling wireless headphones with exceptional sound quality and 30-hour battery life", category: "Electronics", inStock: true, prime: true, }, { id: "2b", name: "Bose QuietComfort 45 Wireless Headphones", price: 279.0, image: "/bose-quietcomfort-45-black-wireless-headphones-pro.jpg", rating: 4.6, reviews: 23456, description: "Wireless Bluetooth headphones with world-class noise cancellation and premium audio", category: "Electronics", inStock: true, prime: true, }, { id: "2c", name: "Sennheiser HD 450BT Wireless Headphones", price: 149.95, image: "/sennheiser-hd-450bt-black-wireless-headphones-prod.jpg", rating: 4.5, reviews: 8934, description: "Wireless headphones with active noise cancellation and 30-hour battery life", category: "Electronics", inStock: true, prime: true, }, { id: "2d", name: "JBL Live 660NC Wireless Headphones", price: 129.95, image: "/jbl-live-660nc-black-wireless-headphones-product-p.jpg", rating: 4.4, reviews: 12345, description: "Wireless over-ear headphones with adaptive noise cancelling and 50-hour battery", category: "Electronics", inStock: true, prime: true, }, { id: "2e", name: "Beats Studio3 Wireless Headphones", price: 249.95, image: "/beats-studio3-red-wireless-headphones-product-phot.jpg", rating: 4.5, reviews: 34567, description: "Premium wireless headphones with Pure ANC and up to 22 hours of listening time", category: "Electronics", inStock: true, prime: true, }, { id: "3", name: 'Kindle Paperwhite (16 GB) - Now with a 6.8" display', price: 139.99, image: "/amazon-kindle-paperwhite-e-reader-product-photo.jpg", rating: 4.6, reviews: 45621, description: "Glare-free display, adjustable warm light, waterproof", category: "Electronics", inStock: true, prime: true, }, { id: "4", name: "Instant Pot Duo 7-in-1 Electric Pressure Cooker", price: 89.99, image: "/instant-pot-duo-pressure-cooker-stainless-steel-pr.jpg", rating: 4.7, reviews: 89234, description: "Pressure cooker, slow cooker, rice cooker, and more", category: "Home & Kitchen", inStock: true, prime: true, }, { id: "5", name: "Anker PowerCore 20000mAh Portable Charger", price: 49.99, image: "/anker-powercore-portable-battery-charger-black-pro.jpg", rating: 4.6, reviews: 34567, description: "High-capacity portable charger with fast charging", category: "Electronics", inStock: true, prime: true, }, { id: "6", name: "Logitech MX Master 3S Wireless Mouse", price: 99.99, image: "/logitech-mx-master-3s-wireless-mouse-black-product.jpg", rating: 4.7, reviews: 15678, description: "Ergonomic wireless mouse with ultra-fast scrolling", category: "Electronics", inStock: true, prime: true, }, { id: "7", name: "Bose QuietComfort Earbuds II", price: 279.0, image: "/bose-quietcomfort-earbuds-ii-wireless-earbuds-prod.jpg", rating: 4.5, reviews: 8934, description: "Personalized noise cancellation and sound", category: "Electronics", inStock: true, prime: true, }, { id: "8", name: "Ninja Air Fryer Pro 4-in-1", price: 119.99, image: "/ninja-air-fryer-pro-black-kitchen-appliance-produc.jpg", rating: 4.8, reviews: 23456, description: "Air fry, roast, reheat, and dehydrate", category: "Home & Kitchen", inStock: true, prime: true, }, ] export function searchProducts(query: string): Product[] { const lowerQuery = query.toLowerCase() // Extract keywords and synonyms const keywords = lowerQuery.split(/\s+/) // Define synonym groups for better matching const synonyms: Record = { headphones: ["headphones", "headphone", "earbuds", "earphones", "airpods"], wireless: ["wireless", "bluetooth", "bt"], noise: ["noise", "anc", "canceling", "cancelling"], } // Expand keywords with synonyms const expandedKeywords = keywords.flatMap((keyword) => { for (const [key, values] of Object.entries(synonyms)) { if (values.includes(keyword)) { return values } } return [keyword] }) return MOCK_PRODUCTS.filter((product) => { const searchText = `${product.name} ${product.description} ${product.category}`.toLowerCase() // Check if any expanded keyword matches const hasKeywordMatch = expandedKeywords.some((keyword) => searchText.includes(keyword)) if (!hasKeywordMatch) return false // Handle price filters const priceMatch = lowerQuery.match(/under\s+\$?(\d+)/i) if (priceMatch) { const maxPrice = Number.parseInt(priceMatch[1]) return product.price <= maxPrice } return true }) } export function getProductsByCategory(category: string): Product[] { return MOCK_PRODUCTS.filter((product) => product.category.toLowerCase() === category.toLowerCase()) } export function getProductById(id: string): Product | undefined { return MOCK_PRODUCTS.find((product) => product.id === id) } [V0_FILE]jpg:file="public/amazon-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/amazon-logo-y4J7hGCaXAiyQ44Qn3q4jfTBUdjCLK.png" isMerged="true" [V0_FILE]jpg:file="public/sony-wh-1000xm5-black-wireless-headphones-product-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sony-wh-1000xm5-black-wireless-headphones-product--EEglofY6NQYl5SWOgw3QXdOdO0vCdp.jpg" isMerged="true" [V0_FILE]jpg:file="public/apple-airpods-pro-2nd-generation-white-product-pho.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/apple-airpods-pro-2nd-generation-white-product-pho-e3sDCcGsNIAKprjUqjGBx8h7elnjRv.jpg" isMerged="true" [V0_FILE]jpg:file="public/sony-wh-1000xm4-black-wireless-headphones-product-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sony-wh-1000xm4-black-wireless-headphones-product--ggamf4rAjLL4GwvcmXrs5GKvD49sCe.jpg" isMerged="true" [V0_FILE]jpg:file="public/bose-quietcomfort-45-black-wireless-headphones-pro.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bose-quietcomfort-45-black-wireless-headphones-pro-HSZrMLORjn2K7iSsWlCX4jTLykMzyr.jpg" isMerged="true" [V0_FILE]jpg:file="public/sennheiser-hd-450bt-black-wireless-headphones-prod.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sennheiser-hd-450bt-black-wireless-headphones-prod-zEYtEeMV1X7RzFOwTxAftYi05Q9tBz.jpg" isMerged="true" [V0_FILE]jpg:file="public/jbl-live-660nc-black-wireless-headphones-product-p.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/jbl-live-660nc-black-wireless-headphones-product-p-C3OWTQPe2QWgHUoD6nHF5I6p7saOqo.jpg" isMerged="true" [V0_FILE]jpg:file="public/beats-studio3-red-wireless-headphones-product-phot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/beats-studio3-red-wireless-headphones-product-phot-lCVVqvAb6JrEOjHgGO6F1B3EdB9gkb.jpg" isMerged="true" [V0_FILE]jpg:file="public/amazon-kindle-paperwhite-e-reader-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/amazon-kindle-paperwhite-e-reader-product-photo-NEUYtOZlZmFcO41CwCyj24GRnyTR2j.jpg" isMerged="true" [V0_FILE]jpg:file="public/instant-pot-duo-pressure-cooker-stainless-steel-pr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/instant-pot-duo-pressure-cooker-stainless-steel-pr-3PgqABbyi4LFsYrIjpyipPCybxMz9Y.jpg" isMerged="true" [V0_FILE]jpg:file="public/anker-powercore-portable-battery-charger-black-pro.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/anker-powercore-portable-battery-charger-black-pro-AyRXaHLSIIgjhuEMebKxNHIPEEwZFD.jpg" isMerged="true" [V0_FILE]jpg:file="public/logitech-mx-master-3s-wireless-mouse-black-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/logitech-mx-master-3s-wireless-mouse-black-product-KVJ3vYOgAh6QOpHvusgSKsUxGldd0G.jpg" isMerged="true" [V0_FILE]jpg:file="public/bose-quietcomfort-earbuds-ii-wireless-earbuds-prod.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bose-quietcomfort-earbuds-ii-wireless-earbuds-prod-BrIY29GitUAtlr9Jnn4VKLXTyja3AU.jpg" isMerged="true" [V0_FILE]jpg:file="public/ninja-air-fryer-pro-black-kitchen-appliance-produc.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ninja-air-fryer-pro-black-kitchen-appliance-produc-qfpnq55oPzNaU28gwh0vZ7Wor0x7vW.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { useChat } from "@ai-sdk/react" import { DefaultChatTransport } from "ai" import { ShoppingCart, Sparkles, Send } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Textarea } from "@/components/ui/textarea" import { useCartStore } from "@/lib/cart-store" import { ChatGPTCartSidebar } from "@/components/chatgpt-cart-sidebar" import { ChatGPTProductCard } from "@/components/chatgpt-product-card" import type { Product } from "@/lib/types" export default function HomePage() { const [input, setInput] = useState("") const [isCartOpen, setIsCartOpen] = useState(false) const scrollRef = useRef(null) const { addItem, getTotalItems } = useCartStore() const { messages, sendMessage, status } = useChat({ transport: new DefaultChatTransport({ api: "/api/chat" }), }) const cartItemCount = getTotalItems() useEffect(() => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight } if (messages.length > 0) { console.log("[v0] Messages updated:", messages.length) console.log("[v0] Last message:", JSON.stringify(messages[messages.length - 1], null, 2)) } }, [messages]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!input.trim() || status === "in_progress") return sendMessage({ text: input }) setInput("") } const handleAddToCart = (product: Product) => { addItem(product) } const extractProductsFromMessage = (message: any): Product[] => { const products: Product[] = [] console.log("[v0] Extracting products from message:", message.role, message) if (message.parts) { message.parts.forEach((part: any) => { if (part.state === "output-available" && part.output?.products) { products.push(...part.output.products) } }) } console.log("[v0] Extracted products:", products.length) return products } const suggestedPrompts = [ "Show me the best wireless headphones under $300", "I need a gift for someone who loves cooking", "What are your best-selling electronics?", "Find me highly rated home products", ] return (

ChatGPT Amazon Shopping

{messages.length === 0 ? (

Shop Amazon with AI

Ask me anything about products. I'll help you discover, compare, and purchase items from Amazon's catalog.

{suggestedPrompts.map((prompt, index) => ( ))}

) : ( messages.map((message, index) => { const products = message.role === "assistant" ? extractProductsFromMessage(message) : [] const textContent = message.parts.find((p: any) => p.type === "text")?.text || "" return (

{/* Avatar */}

{message.role === "user" ? (

) : (

)}

{/* Content */}

{textContent && (

{textContent}

)} {products.length > 0 && (

{products.map((product) => ( ))}

)}

) }) )} {status === "in_progress" && (

)}

setInput(e.target.value)}
              placeholder="Message ChatGPT..."
              className="flex-1 bg-transparent text-white placeholder:text-gray-400 border-0 focus-visible:ring-0 focus-visible:ring-offset-0 resize-none min-h-[24px] max-h-[200px]"
              rows={1}
              onKeyDown={(e) => {
                if (e.key === "Enter" && !e.shiftKey) {
                  e.preventDefault()
                  handleSubmit(e)
                }
              }}
              disabled={status === "in_progress"}
            />
            <Button
              type="submit"
              size="icon"
              className="bg-transparent hover:bg-white/10 text-gray-400 hover:text-white h-8 w-8 flex-shrink-0"
              disabled={!input.trim() || status === "in_progress"}
            >
              <Send className="w-4 h-4" />
            </Button>
          </div>
        </form>
      </div>

<ChatGPTCartSidebar isOpen={isCartOpen} onClose={() => setIsCartOpen(false)} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/amazon-login-dialog.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"

interface AmazonLoginDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onLoginSuccess: () => void
  defaultView?: "signin" | "signup"
}

export function AmazonLoginDialog({
  open,
  onOpenChange,
  onLoginSuccess,
  defaultView = "signin",
}: AmazonLoginDialogProps) {
  const [view, setView] = useState<"signin" | "signup">(defaultView)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [name, setName] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isLoggingIn, setIsLoggingIn] = useState(false)

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoggingIn(true)

// Simulate Amazon login
    await new Promise((resolve) => setTimeout(resolve, 1500))

setIsLoggingIn(false)
    onLoginSuccess()
    onOpenChange(false)
    setView("signin")
  }

const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault()

if (password !== confirmPassword) {
      alert("Passwords do not match")
      return
    }

setIsLoggingIn(true)

// Simulate Amazon account creation
    await new Promise((resolve) => setTimeout(resolve, 2000))

setIsLoggingIn(false)
    onLoginSuccess()
    onOpenChange(false)
    setView("signin")
  }

const handleOpenChange = (open: boolean) => {
    onOpenChange(open)
    if (!open) {
      setView(defaultView)
      setEmail("")
      setPassword("")
      setName("")
      setConfirmPassword("")
    }
  }

return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="sm:max-w-md bg-white text-black">
        <DialogHeader>
          <div className="flex items-center gap-2 mb-2">
            <svg className="w-20 h-8" viewBox="0 0 603 182" fill="currentColor">
              <g fillRule="evenodd" clipRule="evenodd">
                <path d="M374.004 141.419c-30.019 22.146-73.573 33.943-111.086 33.943-52.546 0-99.852-19.437-135.645-51.773-2.813-2.542-.292-6.006 3.081-4.027 38.564 22.438 86.235 35.949 135.479 35.949 33.224 0 69.768-6.888 103.409-21.169 5.072-2.146 9.333 3.331 4.762 7.077" />
                <path d="M387.426 126.337c-3.832-4.916-25.381-2.323-35.053-1.167-2.948.354-3.395-2.208-.75-4.062 17.172-12.083 45.349-8.598 48.631-4.548 3.29 4.062-.854 32.234-16.943 45.682-2.469 2.062-4.823.979-3.728-1.771 3.624-9.062 11.758-29.385 7.843-34.134" />
                <path d="M347.584 20.743V8.938c0-1.792 1.354-2.979 2.979-2.979h52.692c1.688 0 3.042 1.208 3.042 2.979v10.104c-.021 1.688-1.438 3.895-3.958 7.385l-27.302 38.981c10.146-.25 20.876 1.271 30.084 6.479 2.073 1.167 2.635 2.875 2.792 4.562v12.604c0 1.708-1.896 3.708-3.875 2.667-16.229-8.521-37.792-9.438-55.729.125-1.812.979-3.729-.979-3.729-2.688V77.554c0-1.917.021-5.188 1.938-8.104l31.626-45.328h-27.51c-1.688 0-3.042-1.188-3.042-2.958v-.021h-.008zM125.309 99.158h-16.083c-1.542-.104-2.771-1.271-2.896-2.75V8.917c0-1.646 1.396-2.938 3.125-2.938h14.979c1.562.083 2.812 1.292 2.938 2.771v11.5h.312c3.917-10.979 11.271-16.042 21.188-16.042 10.062 0 16.354 5.062 20.875 16.042 3.917-10.979 12.729-16.042 22.208-16.042 6.729 0 14.083 2.771 18.583 9 5.062 6.854 4.021 16.812 4.021 25.542l-.021 48.729c0 1.646-1.396 2.958-3.125 2.958h-16.062c-1.604-.104-2.896-1.396-2.896-2.958V42.5c0-3.438.312-12.021-.458-15.292-.125-.5-.25-1-.458-1.479-1.229-3.125-3.688-4-6.729-4-2.771 0-5.667 1.854-6.854 4.812-1.188 2.958-1.083 7.896-1.083 12.146v57.792c0 1.646-1.396 2.958-3.125 2.958M532.075 4.25c23.875 0 36.812 20.5 36.812 46.562 0 25.188-14.271 45.167-36.812 45.167-23.438 0-36.229-20.5-36.229-46.042 0-25.708 12.938-45.688 36.229-45.688zm.146 16.771c-11.833 0-12.583 16.125-12.583 26.167 0 10.062-.146 31.562 12.438 31.562 12.438 0 13.042-17.312 13.042-27.854 0-6.938-.312-15.292-2.333-21.896-1.75-5.75-5.229-8.021-10.562-8.021l-.002.042zM596.075 99.158h-16.021c-1.604-.104-2.896-1.396-2.896-2.958l-.021-87.521c.125-1.5 1.438-2.688 3.125-2.688h14.917c1.417.062 2.604 1.042 2.938 2.354v13.438h.312c4.604-11.896 11.062-17.604 22.646-17.604 7.438 0 14.688 2.688 19.354 10.062 4.312 6.854 4.312 18.375 4.312 26.625v56.375c-.167 1.458-1.479 2.625-3.125 2.625h-16.125c-1.479-.104-2.708-1.229-2.875-2.625V44.5c0-11.646 1.333-28.729-12.938-28.729-5.021 0-9.646 3.354-11.938 8.458-2.896 6.438-3.271 12.854-3.271 19.938v54.042c0 1.646-1.417 2.958-3.146 2.958l-.269-.009z" />
              </g>
            </svg>
          </div>
          <DialogTitle className="text-2xl font-normal">{view === "signin" ? "Sign in" : "Create account"}</DialogTitle>
        </DialogHeader>

{view === "signin" ? (
          <form onSubmit={handleLogin} className="space-y-4 mt-4">
            <div className="space-y-2">
              <Label htmlFor="amazon-email" className="text-sm font-bold">
                Email or mobile phone number
              </Label>
              <Input
                id="amazon-email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                className="bg-white border-gray-400 text-black h-8 text-sm"
                placeholder="Enter your email"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="amazon-password" className="text-sm font-bold">
                Password
              </Label>
              <Input
                id="amazon-password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                className="bg-white border-gray-400 text-black h-8 text-sm"
                placeholder="Enter your password"
              />
            </div>

<Button
              type="submit"
              disabled={isLoggingIn}
              className="w-full bg-[#FFD814] hover:bg-[#F7CA00] text-black font-normal h-8 text-sm border border-[#FCD200] shadow-sm"
            >
              {isLoggingIn ? "Signing in..." : "Continue"}
            </Button>

<p className="text-xs text-gray-700">
              By continuing, you agree to Amazon's{" "}
              <a href="#" className="text-blue-600 hover:text-orange-600 hover:underline">
                Conditions of Use
              </a>{" "}
              and{" "}
              <a href="#" className="text-blue-600 hover:text-orange-600 hover:underline">
                Privacy Notice
              </a>
              .
            </p>

<div className="text-center">
              <p className="text-xs text-gray-700 mb-2">New to Amazon?</p>
              <Button
                type="button"
                variant="outline"
                onClick={() => setView("signup")}
                className="w-full bg-white hover:bg-gray-50 text-black font-normal h-8 text-sm border-gray-400"
              >
                Create your Amazon account
              </Button>
            </div>
          </form>
        ) : (
          <form onSubmit={handleSignup} className="space-y-4 mt-4">
            <div className="space-y-2">
              <Label htmlFor="signup-name" className="text-sm font-bold">
                Your name
              </Label>
              <Input
                id="signup-name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
                className="bg-white border-gray-400 text-black h-8 text-sm"
                placeholder="First and last name"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="signup-email" className="text-sm font-bold">
                Email
              </Label>
              <Input
                id="signup-email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                className="bg-white border-gray-400 text-black h-8 text-sm"
                placeholder="Enter your email"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="signup-password" className="text-sm font-bold">
                Password
              </Label>
              <Input
                id="signup-password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                minLength={6}
                className="bg-white border-gray-400 text-black h-8 text-sm"
                placeholder="At least 6 characters"
              />
              <p className="text-xs text-gray-600">Passwords must be at least 6 characters.</p>
            </div>

<div className="space-y-2">
              <Label htmlFor="signup-confirm-password" className="text-sm font-bold">
                Re-enter password
              </Label>
              <Input
                id="signup-confirm-password"
                type="password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                required
                className="bg-white border-gray-400 text-black h-8 text-sm"
                placeholder="Re-enter password"
              />
            </div>

<p className="text-xs text-gray-700">
              By creating an account, you agree to Amazon's{" "}
              <a href="#" className="text-blue-600 hover:text-orange-600 hover:underline">
                Conditions of Use
              </a>{" "}
              and{" "}
              <a href="#" className="text-blue-600 hover:text-orange-600 hover:underline">
                Privacy Notice
              </a>
              .
            </p>

<div className="text-center">
              <p className="text-xs text-gray-700">
                Already have an account?{" "}
                <button
                  type="button"
                  onClick={() => setView("signin")}
                  className="text-blue-600 hover:text-orange-600 hover:underline"
                >
                  Sign in
                </button>
              </p>
            </div>
          </form>
        )}
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/checkout/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft, CreditCard, Lock, CheckCircle2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { useCartStore } from "@/lib/cart-store"
import { AmazonLoginDialog } from "@/components/amazon-login-dialog"

export default function CheckoutPage() {
  const router = useRouter()
  const { items, getTotalPrice, clearCart } = useCartStore()
  const [isProcessing, setIsProcessing] = useState(false)
  const [orderComplete, setOrderComplete] = useState(false)
  const [showAmazonLogin, setShowAmazonLogin] = useState(false)
  const [amazonDialogView, setAmazonDialogView] = useState<"signin" | "signup">("signin")
  const [isAmazonLoggedIn, setIsAmazonLoggedIn] = useState(false)

const subtotal = getTotalPrice()
  const shipping = 0
  const tax = subtotal * 0.08
  const total = subtotal + shipping + tax

const handleAmazonLoginSuccess = () => {
    setIsAmazonLoggedIn(true)
    // Auto-fill form with Amazon account data
    const form = document.querySelector("form") as HTMLFormElement
    if (form) {
      ;(form.querySelector("#firstName") as HTMLInputElement).value = "John"
      ;(form.querySelector("#lastName") as HTMLInputElement).value = "Smith"
      ;(form.querySelector("#email") as HTMLInputElement).value = "john.smith@example.com"
      ;(form.querySelector("#address") as HTMLInputElement).value = "123 Amazon Way"
      ;(form.querySelector("#city") as HTMLInputElement).value = "Seattle"
      ;(form.querySelector("#state") as HTMLInputElement).value = "WA"
      ;(form.querySelector("#zip") as HTMLInputElement).value = "98109"
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsProcessing(true)

// Simulate payment processing
    await new Promise((resolve) => setTimeout(resolve, 2000))

setIsProcessing(false)
    setOrderComplete(true)

// Clear cart after successful order
    setTimeout(() => {
      clearCart()
      router.push("/")
    }, 3000)
  }

if (items.length === 0 && !orderComplete) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-4">
        <Card className="p-8 text-center space-y-4 max-w-md">
          <h2 className="text-2xl font-bold text-foreground">Your cart is empty</h2>
          <p className="text-muted-foreground">Add some items to your cart before checking out.</p>
          <Button onClick={() => router.push("/")} className="bg-primary hover:bg-primary/90">
            Start Shopping
          </Button>
        </Card>
      </div>
    )
  }

if (orderComplete) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-4">
        <Card className="p-8 text-center space-y-6 max-w-md">
          <div className="flex justify-center">
            <div className="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center">
              <CheckCircle2 className="w-10 h-10 text-accent" />
            </div>
          </div>
          <div className="space-y-2">
            <h2 className="text-2xl font-bold text-foreground">Order Confirmed!</h2>
            <p className="text-muted-foreground">
              Thank you for your purchase. Your order has been placed successfully.
            </p>
          </div>
          <div className="text-sm text-muted-foreground">Redirecting you back to shopping...</div>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <AmazonLoginDialog
        open={showAmazonLogin}
        onOpenChange={setShowAmazonLogin}
        onLoginSuccess={handleAmazonLoginSuccess}
        defaultView={amazonDialogView}
      />

<div className="border-b border-border bg-card">
        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={() => router.push("/")} className="bg-transparent">
            <ArrowLeft className="w-5 h-5" />
          </Button>
          <div>
            <h1 className="text-xl font-semibold text-foreground">Checkout</h1>
            <p className="text-sm text-muted-foreground">Complete your purchase</p>
          </div>
        </div>
      </div>

<div className="max-w-6xl mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Checkout Form */}
          <div className="lg:col-span-2 space-y-6">
            {!isAmazonLoggedIn && (
              <Card className="p-6 bg-gradient-to-r from-[#232F3E] to-[#37475A] border-none">
                <div className="space-y-4">
                  <div>
                    <h3 className="text-white font-semibold text-lg mb-1">Fast checkout with Amazon</h3>
                    <p className="text-gray-300 text-sm">
                      Use your Amazon account to checkout instantly with saved addresses and payment methods
                    </p>
                  </div>
                  <div className="flex flex-col sm:flex-row gap-3">
                    <Button
                      onClick={() => {
                        setAmazonDialogView("signin")
                        setShowAmazonLogin(true)
                      }}
                      className="flex-1 bg-[#FFD814] hover:bg-[#F7CA00] text-black font-semibold px-6 h-12 text-base border border-[#FCD200] shadow-lg"
                    >
                      <svg className="w-16 h-6 mr-2" viewBox="0 0 603 182" fill="currentColor">
                        <g fillRule="evenodd" clipRule="evenodd">
                          <path d="M374.004 141.419c-30.019 22.146-73.573 33.943-111.086 33.943-52.546 0-99.852-19.437-135.645-51.773-2.813-2.542-.292-6.006 3.081-4.027 38.564 22.438 86.235 35.949 135.479 35.949 33.224 0 69.768-6.888 103.409-21.169 5.072-2.146 9.333 3.331 4.762 7.077" />
                          <path d="M387.426 126.337c-3.832-4.916-25.381-2.323-35.053-1.167-2.948.354-3.395-2.208-.75-4.062 17.172-12.083 45.349-8.598 48.631-4.548 3.29 4.062-.854 32.234-16.943 45.682-2.469 2.062-4.823.979-3.728-1.771 3.624-9.062 11.758-29.385 7.843-34.134" />
                        </g>
                      </svg>
                      Sign In
                    </Button>
                    <Button
                      onClick={() => {
                        setAmazonDialogView("signup")
                        setShowAmazonLogin(true)
                      }}
                      variant="outline"
                      className="flex-1 bg-white hover:bg-gray-100 text-black font-semibold px-6 h-12 text-base border-2 border-[#FFD814] shadow-lg"
                    >
                      Create Amazon Account
                    </Button>
                  </div>
                  <p className="text-gray-400 text-xs text-center">
                    New to Amazon? Create an account to get started with fast checkout
                  </p>
                </div>
              </Card>
            )}

{isAmazonLoggedIn && (
              <Card className="p-4 bg-green-50 border-green-200">
                <div className="flex items-center gap-3">
                  <CheckCircle2 className="w-5 h-5 text-green-600" />
                  <div>
                    <p className="text-green-900 font-medium">Signed in with Amazon</p>
                    <p className="text-green-700 text-sm">Your shipping and payment information has been loaded</p>
                  </div>
                </div>
              </Card>
            )}

<Card className="p-6">
              <h2 className="text-lg font-semibold text-foreground mb-4">Shipping Information</h2>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="firstName">First Name</Label>
                    <Input id="firstName" placeholder="John" required className="bg-background" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="lastName">Last Name</Label>
                    <Input id="lastName" placeholder="Doe" required className="bg-background" />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input id="email" type="email" placeholder="john@example.com" required className="bg-background" />
                </div>

<div className="space-y-2">
                  <Label htmlFor="address">Address</Label>
                  <Input id="address" placeholder="123 Main St" required className="bg-background" />
                </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="city">City</Label>
                    <Input id="city" placeholder="New York" required className="bg-background" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="state">State</Label>
                    <Input id="state" placeholder="NY" required className="bg-background" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="zip">ZIP Code</Label>
                    <Input id="zip" placeholder="10001" required className="bg-background" />
                  </div>
                </div>

<h2 className="text-lg font-semibold text-foreground mb-4">Payment Information</h2>

{isAmazonLoggedIn && (
                  <div className="mb-4 p-3 bg-secondary rounded-lg border border-border">
                    <div className="flex items-center gap-2">
                      <svg className="w-16 h-6" viewBox="0 0 603 182" fill="currentColor">
                        <g fillRule="evenodd" clipRule="evenodd">
                          <path d="M374.004 141.419c-30.019 22.146-73.573 33.943-111.086 33.943-52.546 0-99.852-19.437-135.645-51.773-2.813-2.542-.292-6.006 3.081-4.027 38.564 22.438 86.235 35.949 135.479 35.949 33.224 0 69.768-6.888 103.409-21.169 5.072-2.146 9.333 3.331 4.762 7.077" />
                          <path d="M387.426 126.337c-3.832-4.916-25.381-2.323-35.053-1.167-2.948.354-3.395-2.208-.75-4.062 17.172-12.083 45.349-8.598 48.631-4.548 3.29 4.062-.854 32.234-16.943 45.682-2.469 2.062-4.823.979-3.728-1.771 3.624-9.062 11.758-29.385 7.843-34.134" />
                        </g>
                      </svg>
                      <span className="text-sm text-muted-foreground">Visa ending in 1234</span>
                    </div>
                  </div>
                )}

<div className="space-y-2">
                  <Label htmlFor="cardNumber">Card Number</Label>
                  <div className="relative">
                    <Input
                      id="cardNumber"
                      placeholder="1234 5678 9012 3456"
                      required
                      className="bg-background pr-10"
                      defaultValue={isAmazonLoggedIn ? "•••• •••• •••• 1234" : ""}
                      disabled={isAmazonLoggedIn}
                    />
                    <CreditCard className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="expiry">Expiry Date</Label>
                    <Input
                      id="expiry"
                      placeholder="MM/YY"
                      required
                      className="bg-background"
                      defaultValue={isAmazonLoggedIn ? "12/25" : ""}
                      disabled={isAmazonLoggedIn}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="cvv">CVV</Label>
                    <Input
                      id="cvv"
                      placeholder="123"
                      required
                      className="bg-background"
                      defaultValue={isAmazonLoggedIn ? "•••" : ""}
                      disabled={isAmazonLoggedIn}
                    />
                  </div>
                </div>

<div className="flex items-center gap-2 text-sm text-muted-foreground pt-4">
                  <Lock className="w-4 h-4" />
                  <span>Your payment information is secure and encrypted</span>
                </div>

<Button
                  type="submit"
                  className="w-full bg-accent hover:bg-accent/90 text-accent-foreground mt-6"
                  disabled={isProcessing}
                >
                  {isProcessing ? "Processing..." : `Place Order - $${total.toFixed(2)}`}
                </Button>
              </form>
            </Card>
          </div>

{/* Order Summary */}
          <div className="lg:col-span-1">
            <Card className="p-6 sticky top-4">
              <h2 className="text-lg font-semibold text-foreground mb-4">Order Summary</h2>

<div className="space-y-4 mb-6">
                {items.map((item) => (
                  <div key={item.id} className="flex gap-3">
                    <img
                      src={item.image || "/placeholder.svg"}
                      alt={item.name}
                      className="w-16 h-16 object-cover rounded-md bg-secondary"
                    />
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-foreground line-clamp-2">{item.name}</p>
                      <p className="text-sm text-muted-foreground">Qty: {item.quantity}</p>
                      <p className="text-sm font-semibold text-foreground">
                        ${(item.price * item.quantity).toFixed(2)}
                      </p>
                    </div>
                  </div>
                ))}
              </div>

<div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Subtotal</span>
                  <span className="text-foreground">${subtotal.toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Shipping</span>
                  <span className="text-accent font-medium">FREE</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Tax</span>
                  <span className="text-foreground">${tax.toFixed(2)}</span>
                </div>
                <Separator className="my-2" />
                <div className="flex justify-between">
                  <span className="font-semibold text-foreground">Total</span>
                  <span className="text-xl font-bold text-foreground">${total.toFixed(2)}</span>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More from saurvsh-6662

More Templates Like This

About

Tags

Share

About

Tags

Share

More from saurvsh-6662

More Templates Like This