[V0_FILE]png:file="public/images/rdep-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/RDEP%20cropped-afCcvRUwSHXZ7OgAcoTEytmfLpnu4y.png" isMerged="true" [V0_FILE]png:file="public/images/qr-code.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/qr-code%20%283%29-9RQjO5dOSm5YWRPPstE2TIEEvXSWKh.png" isMerged="true" [V0_FILE]jpeg:file="public/images/banner3.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2150871300.jpg-oCju5pmrB21RKfkmX1spNLEGgqwRRo.jpeg" isMerged="true" [V0_FILE]png:file="public/images/denim-jacket.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-NsCpEnMjipqpGYXaAelQLypeARwaE0.png" isMerged="true" [V0_FILE]png:file="public/images/silk-scarf.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-FSkMOmfPvFEZBBR2pEjAEINHPtZki4.png" isMerged="true" [V0_FILE]png:file="public/images/leather-boots.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-2yGswk607FHJ5U7smZgcFe6UVdUZh1.png" isMerged="true" [V0_FILE]png:file="public/images/polo-shirt.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-cZyYnNyInFB8qbSu462uBiLqtjRg7Z.png" isMerged="true" [V0_FILE]png:file="public/images/gray-shorts.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-6WeLptQGbvWgoV8MksbrHVYy50Tb9x.png" isMerged="true" [V0_FILE]png:file="public/images/banner1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/US%20Restaurants%201-Saj1Ko4vKCBB8PhNInYaa9JhGLCTgw.png" isMerged="true" [V0_FILE]png:file="public/images/banner2.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/US%20Restaurants-S5KiOvvKoX4zTkWLKIdDo70qqxubiW.png" 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": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@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": "14.2.35", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "5.7.3" } } [V0_FILE]png:file="public/images/design-mode/RDEP-cropped.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/RDEP-cropped-yzsuZTjVAI5HnsxhNXpdc2mvDRiQvZ.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/800px-QR_code_for_mobile_English_Wikipedia.svg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/800px-QR_code_for_mobile_English_Wikipedia.svg-iwLxpaypSAG9g7XqYIrJ7zOZ34eFhA.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/US%20Restaurants%201.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/US%20Restaurants%201-5i1seOoibAEaOhMPqcIKwmrdw3p2Jt.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/US%20Restaurants.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/US%20Restaurants-AcNHqVAa9JIzPzA2dFDt8eYzpNXoX8.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/RDEP-cropped(1).png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/RDEP-cropped%281%29-8rvsVoiyVUxJdint2sI2btGIE2S0Sx.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/800px-QR_code_for_mobile_English_Wikipedia.svg(1).png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29-utTgQuTewWDwTaV4YW8WxsLxGVuAmc.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/US%20Restaurants%201(1).png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/US%20Restaurants%201%281%29-PmSQzvPVDYd1GzlvlBFKeXVxq22C7h.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/US%20Restaurants(1).png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/US%20Restaurants%281%29-pOGOHsYbLC4bQBuaj7LQyLKjgoS1BG.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/RDEP-cropped%281%29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/RDEP-cropped%281%29-DUklub3yleOSnLp9uPe4mkSQgl0TQe.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29-aT1kd6Nj9msSE2fYk8EL2eXivmGpnz.png" isMerged="true" [V0_FILE]jpg:file="public/images/design-mode/flat-design-grocery-store-sale-banner_23-2151069702.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/flat-design-grocery-store-sale-banner_23-2151069702-31d0rKIumNCbajLZurnCcK08tvMTYh.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/design-mode/flat-design-supermarket-facebook-cover-template_23-2150330746.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/flat-design-supermarket-facebook-cover-template_23-2150330746-he1IXn8SioKhKK14X7RHmuyXUQCElV.jpg" isMerged="true" [V0_FILE]png:file="public/images/design-mode/RDEP-cropped%281%29(1).png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/RDEP-cropped%281%29%281%29-FRrJQp4Y3R5Vtzbb3fSAmUlUqOt3a4.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29(1).png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29%281%29-WDDh90tT2zE2BHmeLzRvMPDLt8sKax.png" isMerged="true" [V0_FILE]jpg:file="public/images/design-mode/flat-design-grocery-store-sale-banner_23-2151069702(1).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/flat-design-grocery-store-sale-banner_23-2151069702%281%29-GcQqTkOZlVddcOZGaNfoKLGZiK9abB.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/design-mode/flat-design-supermarket-facebook-cover-template_23-2150330746(1).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/flat-design-supermarket-facebook-cover-template_23-2150330746%281%29-Anq9yJhDPL2DZqT2DVE7Ibo0seANqF.jpg" isMerged="true" [V0_FILE]png:file="public/images/design-mode/RDEP-cropped%281%29%281%29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/RDEP-cropped%281%29%281%29-auuNIQuFQbnl7hpx3v4WVYjJfsXIZI.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29%281%29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29%281%29-CvmNvPL7zyKokxJqOoUX187X4KzKxX.png" isMerged="true" [V0_FILE]jpg:file="public/images/design-mode/flat-design-grocery-store-sale-banner_23-2151069702%281%29.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/flat-design-grocery-store-sale-banner_23-2151069702%281%29-Qwc9IrWXEhRSoeY7Vq9SEVfJpaHoWx.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/design-mode/flat-design-supermarket-facebook-cover-template_23-2150330746%281%29.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/flat-design-supermarket-facebook-cover-template_23-2150330746%281%29-q9M1XHcSKYhpyDb5s2rjrCxMW7qGCA.jpg" isMerged="true" [V0_FILE]png:file="public/images/design-mode/RDEP-cropped%281%29%281%29(1).png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/RDEP-cropped%281%29%281%29%281%29-1US9M7kRJ8GN7bNdC6tgqINS6lqKue.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29%281%29(1).png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29%281%29%281%29-B19gdwwA65Po1y3QkogaVjqQ4q8SxS.png" isMerged="true" [V0_FILE]jpg:file="public/images/design-mode/flat-design-grocery-store-sale-banner_23-2151069702%281%29(1).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/flat-design-grocery-store-sale-banner_23-2151069702%281%29%281%29-4CcuoUwCdoLq2AWyOTO0kwTzAZbLEY.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/design-mode/flat-design-supermarket-facebook-cover-template_23-2150330746%281%29(1).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/flat-design-supermarket-facebook-cover-template_23-2150330746%281%29%281%29-svuMjYlSclNA6aXFmzjYsFYQKgdRAz.jpg" isMerged="true" [V0_FILE]png:file="public/images/design-mode/RDEP-cropped%281%29%281%29%281%29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/RDEP-cropped%281%29%281%29%281%29-L71qU7Xov0Erz9joWcS7XCUYVwzXwi.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29%281%29%281%29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/800px-QR_code_for_mobile_English_Wikipedia.svg%281%29%281%29%281%29-nJTB0gYtrdHJ4EResmsV8WHvWAYwR0.png" isMerged="true" [V0_FILE]jpg:file="public/images/design-mode/flat-design-grocery-store-sale-banner_23-2151069702%281%29%281%29.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/flat-design-grocery-store-sale-banner_23-2151069702%281%29%281%29-0x7LWr92N2kLj5bwdgN27UH6bdnPoS.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/design-mode/flat-design-supermarket-facebook-cover-template_23-2150330746%281%29%281%29.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/flat-design-supermarket-facebook-cover-template_23-2150330746%281%29%281%29-0xrxz5JLvseCQV7X65JrnhiYCj8FjS.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from "@/components/ui/carousel" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { ChevronRight, Download, ExternalLink, FileText, History, Instagram, Mail, MessageSquare, Phone, Send, Star, User2, ThumbsUp, Share2, Facebook, Sparkles, MapPin, UtensilsCrossed, ShieldCheck, Zap, Gift, Heart, CheckCircle2, X, } from "lucide-react" interface Receipt { id: string date: string time: string cashier: string items: Array<{ id: number name: string description: string price: number quantity: number category?: string taxApplicable?: boolean baseAmount?: number tax?: number itemCode?: string calories?: string allergens?: string spiceLevel?: string }> subtotal: number tax: number total: number } export default function Home() { const [currentSlide, setCurrentSlide] = useState(0) const [showTerms, setShowTerms] = useState(false) const [showFeedbackModal, setShowFeedbackModal] = useState(false) const [expandedProducts, setExpandedProducts] = useState([]) const [expandedSections, setExpandedSections] = useState<{ [key: number]: string[] }>({}) const [currentReceiptId, setCurrentReceiptId] = useState("current") const [showTransactionHistory, setShowTransactionHistory] = useState(false) const [modalPosition, setModalPosition] = useState({ top: 0, left: 0 }) const [showReferModal, setShowReferModal] = useState(false) const [feedbackSubmitted, setFeedbackSubmitted] = useState(false); const [rating, setRating] = useState(0); const [feedbackComment, setFeedbackComment] = useState(""); const [profile, setProfile] = useState({ mobile: "", name: "", email: "", gender: "", }) const [profileUpdateSuccess, setProfileUpdateSuccess] = useState(false) const [mobileError, setMobileError] = useState(false) const customerName = "Michael" // Carousel refs and APIs const [promoApi, setPromoApi] = useState() const feedbackButtonRef = useRef(null) const historyButtonRef = useRef(null) const referButtonRef = useRef(null) // Auto-play effect for promo carousel useEffect(() => { if (!promoApi) return const interval = setInterval(() => { promoApi.scrollNext() }, 4000) return () => clearInterval(interval) }, [promoApi]) // Simple auto-height for WordPress iframe useEffect(() => { const postHeight = () => { const marker = document.getElementById("height-marker") if (marker && window.parent) { const rect = marker.getBoundingClientRect() const newHeight = Math.ceil(rect.top + rect.height + window.scrollY) window.parent.postMessage({ frameHeight: newHeight }, "*") } } // Run on load postHeight() // Observe changes to the DOM const ro = new ResizeObserver(postHeight) ro.observe(document.body) // Re-run on resize window.addEventListener("resize", postHeight) return () => { ro.disconnect() window.removeEventListener("resize", postHeight) } }, []) // Update current slide when carousel changes useEffect(() => { if (!promoApi) return promoApi.on("select", () => { setCurrentSlide(promoApi.selectedScrollSnap()) }) }, [promoApi]) const receipts = { current: { id: "GS250825192286448318", date: "25-08-2025", time: "19:22:18", cashier: "Emily Rodriguez", items: [ { id: 0, name: "Organic Bananas", description: "Fresh yellow bananas", price: 2.99, quantity: 2, category: "Fresh Produce", taxApplicable: true, baseAmount: 5.98, tax: 0.49, itemCode: "PRD001", calories: "105 cal per banana", allergens: "None", spiceLevel: "None", }, { id: 1, name: "Whole Milk", description: "1 gallon organic whole milk", price: 4.99, quantity: 1, category: "Dairy", taxApplicable: false, baseAmount: 4.99, tax: 0, itemCode: "DAI002", calories: "150 cal per cup", allergens: "Dairy", spiceLevel: "None", }, { id: 2, name: "Whole Wheat Bread", description: "Fresh baked whole wheat loaf", price: 3.49, quantity: 1, category: "Bakery", taxApplicable: false, baseAmount: 3.49, tax: 0, itemCode: "BAK003", calories: "80 cal per slice", allergens: "Gluten", spiceLevel: "None", }, { id: 3, name: "Ground Beef", description: "85% lean ground beef, 1 lb", price: 6.99, quantity: 1, category: "Meat", taxApplicable: true, baseAmount: 6.99, tax: 0.58, itemCode: "MEA004", calories: "250 cal per 4oz", allergens: "None", spiceLevel: "None", }, ], subtotal: 21.45, tax: 1.07, total: 22.52, }, hist1: { id: "GM200825142286448317", date: "20-08-2025", time: "14:22:18", cashier: "Michael Chen", items: [ { id: 0, name: "Roma Tomatoes", description: "Fresh red tomatoes, 2 lbs", price: 3.98, quantity: 1, category: "Fresh Produce", taxApplicable: true, baseAmount: 3.98, tax: 0.33, itemCode: "PRD005", calories: "22 cal per tomato", allergens: "None", spiceLevel: "None", }, { id: 1, name: "Orange Juice", description: "100% pure orange juice, 64 fl oz", price: 4.99, quantity: 1, category: "Beverages", taxApplicable: true, baseAmount: 4.99, tax: 0.41, itemCode: "BEV006", calories: "110 cal per 8 fl oz", allergens: "None", spiceLevel: "None", }, ], subtotal: 12.96, tax: 1.07, total: 14.03, }, hist2: { id: "GM150825112286448316", date: "15-08-2025", time: "11:22:18", cashier: "Sarah Johnson", items: [ { id: 0, name: "Greek Yogurt", description: "Plain Greek yogurt, 32 oz", price: 5.99, quantity: 1, category: "Dairy", taxApplicable: false, baseAmount: 5.99, tax: 0, itemCode: "DAI007", calories: "100 cal per serving", allergens: "Dairy", spiceLevel: "None", }, { id: 1, name: "Chicken Breast", description: "Boneless skinless chicken breast, 2 lbs", price: 8.99, quantity: 1, category: "Meat", taxApplicable: true, baseAmount: 8.99, tax: 0.74, itemCode: "MEA008", calories: "165 cal per 4oz", allergens: "None", spiceLevel: "None", }, { id: 2, name: "Cheddar Cheese", description: "Sharp cheddar cheese block, 8 oz", price: 4.99, quantity: 1, category: "Dairy", taxApplicable: false, baseAmount: 4.99, tax: 0, itemCode: "DAI009", calories: "110 cal per oz", allergens: "Dairy", spiceLevel: "None", }, ], subtotal: 16.97, tax: 0.99, total: 17.96, }, } const currentReceipt = receipts[currentReceiptId] const totalSlides = 2 const transactionHistory = [ { id: "current", date: "25-09-2025", branch: "Supermarket", amount: currentReceiptId === "current" ? receipts.current.subtotal + receipts.current.tax : 86.08, }, { id: "hist1", date: "20-08-2025", branch: "Supermarket", amount: 46.11 }, { id: "hist2", date: "15-08-2025", branch: "Supermarket", amount: 87.21 }, ] const toggleProductExpansion = (productId: number) => { setExpandedProducts((prev) => prev.includes(productId) ? prev.filter((id) => id !== productId) : [...prev, productId], ) } const handleProfileUpdate = () => { if (profile.mobile || profile.name || profile.email) { setProfileUpdateSuccess(true); setMobileError(false); setTimeout(() => setProfileUpdateSuccess(false), 5000); } else { console.log("Please enter at least one detail to update."); } }; const handleFeedbackModalOpen = () => { if (feedbackButtonRef.current) { const rect = feedbackButtonRef.current.getBoundingClientRect() const scrollTop = window.pageYOffset || document.documentElement.scrollTop const receiptContainer = document.querySelector(".max-w-md") as HTMLElement const containerRect = receiptContainer?.getBoundingClientRect() const modalWidth = 384 // max-w-sm is approximately 384px const centerLeft = containerRect ? containerRect.left + (containerRect.width - modalWidth) / 2 : rect.left setModalPosition({ top: scrollTop + rect.top - 100, left: centerLeft, }) } setShowFeedbackModal(true) } const handleTransactionHistoryOpen = () => { if (historyButtonRef.current) { const rect = historyButtonRef.current.getBoundingClientRect() const scrollTop = window.pageYOffset || document.documentElement.scrollTop const receiptContainer = document.querySelector(".max-w-md") as HTMLElement const containerRect = receiptContainer?.getBoundingClientRect() const modalWidth = 384 // max-w-sm is approximately 384px const centerLeft = containerRect ? containerRect.left + (containerRect.width - modalWidth) / 2 : rect.left setModalPosition({ top: scrollTop + rect.top - 100, left: centerLeft, }) } setShowTransactionHistory(true) } const handleReferModalOpen = () => { if (referButtonRef.current) { const rect = referButtonRef.current.getBoundingClientRect() const scrollTop = window.pageYOffset || document.documentElement.scrollTop const receiptContainer = document.querySelector(".max-w-md") as HTMLElement const containerRect = receiptContainer?.getBoundingClientRect() const modalWidth = 384 // max-w-sm is approximately 384px const centerLeft = containerRect ? containerRect.left + (containerRect.width - modalWidth) / 2 : rect.left setModalPosition({ top: scrollTop + rect.top - 100, left: centerLeft, }) } setShowReferModal(true) } const handleFeedbackSubmit = () => { setFeedbackSubmitted(true) setShowFeedbackModal(false) setTimeout(() => setFeedbackSubmitted(false), 5000) } const handleShare = () => { handleReferModalOpen() } const handleEmailReceipt = () => { window.open(`mailto:?subject=Receipt from Supermarket&body=Receipt ID: ${currentReceipt.id}`) } const handleDownloadReceipt = () => { const itemsHtml = currentReceipt.items .map( (item) => `

${item.name}

${item.category}

Item Code: ${item.itemCode} | Calories: ${item.calories}

${item.quantity} Each $${item.price.toFixed(2)} $${(item.price * item.quantity).toFixed(2)} `, ) .join("") const receiptContent = ` Sydney Premium Market - Digital Receipt

Sydney Market

Premium Grocers

Sydney Premium Market Pty Ltd

123 George Street, The Rocks, Sydney NSW 2000

PH: (02) 9234 5678 | ABN: 12 345 678 910

Customer: ${customerName}

Ref: #${currentReceipt.id}

Date: ${currentReceipt.date}

${itemsHtml}

Description	Qty	Price	Total

Subtotal $${(currentReceipt.subtotal || 0).toFixed(2)}

GST (10%) $${(currentReceipt.tax || 0).toFixed(2)}

TOTAL $${((currentReceipt.subtotal || 0) + (currentReceipt.tax || 0)).toFixed(2)}

` const blob = new Blob([receiptContent], { type: "text/html" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.href = url link.download = `Grocery_Receipt_${currentReceiptId}.html` document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(url) } const handleWhatsApp = () => { window.open("https://wa.me/919620921294", "_blank") } const handleCall = () => { window.open("tel:+919620921294", "_blank") } const handleEmail = () => { window.open("mailto:sagar.p@proenx.com", "_blank") } const handleSocialLink = (url: string) => { window.open(url, "_blank") } return (

{/* Container: Clean, white, focused on high-end typography */}

{/* Row 1: Brand & QR - Fixed "Same Row" on Mobile */}

{/* QR Code: Sized down for mobile to ensure no wrapping */}

{/* Row 2: Greeting & Total Paid - Hardened Flex Container */}

G'day,
{customerName}!

Total Paid

$ {(currentReceipt.total || 0).toFixed(2)}

{/* Row 3: Metadata - Balanced for Small Viewports */}

Receipt ID

{currentReceipt.id}

Date & Time

{currentReceipt.date} • {currentReceipt.time}

{/* Purchase Details Section */}

{/* Section Header: Bold Brand Color & Capsule Badge */}

Purchase Details

{currentReceipt.items.length} Items

{/* Item List: Restored Vertical QTY Design with Responsive Hardening */}

{currentReceipt.items.map((product) => (

toggleProductExpansion(product.id)} >

{/* RESTORED QTY: Vertical layout with mobile sizing */}

Qty {product.quantity}

{product.name}

{product.category}

${(product.price * product.quantity).toFixed(2)}

{/* RESTORED & CLEANED EXPAND: Original 4-field grid layout */} {expandedProducts.includes(product.id) && (

Item Code {product.itemCode}

Calories {product.calories?.split(' ')[0]} kcal

Base Amount ${product.baseAmount?.toFixed(2) || "0.00"}

Tax (GST) ${product.tax?.toFixed(2) || "0.00"}

)}

))}

{/* Financial Summary: Bold & High Visibility */}

Subtotal ${(currentReceipt.subtotal || 0).toFixed(2)}

GST (10%) ${(currentReceipt.tax || 0).toFixed(2)}

Total Amount Paid ${(currentReceipt.total || 0).toFixed(2)}

{/* PAYMENT INFO: Now White, Clean & Responsive */}

Payment Method

Visa •••• 4532

Approved

{/* Loyalty & Rewards Section */}

{/* Section Header */}

Loyalty Rewards

{/* Tier Badge */}

Gold Status

{/* Reward Metrics: Optimized for 3-Column Mobile without Squeezing */}

Balance

2,150 pts

Savings

$85 .00

Earned Today

+42 pts

{/* Progress Tracker: White Card with fixed constraints */}

Next Tier Progress

850 Pts to Platinum

72%

{/* Active Benefits: Adjusted padding and icon sizing for narrow screens */}

Exclusive Tier Benefits

{[ { icon: ShieldCheck, title: "Free Delivery", desc: "Over $50" }, { icon: Zap, title: "2x Points", desc: "Fresh Produce" }, { icon: History, title: "Early Access", desc: "Catalog" }, { icon: Gift, title: "Birthday Gift", desc: "$10 Voucher" } ].map((benefit, idx) => (

{benefit.title}

{benefit.desc}

))}

{/* Full Width Banner Section - Standardized Width & Rounding */}

{/* Slide 1 */}

{/* Gradient Overlay */}

Limited Offer

Organic Selection
50% Off Today

Order Now

{/* Slide 2 */}

Weekend Only

Fresh Harvest
Free Delivery

Explore

{/* Pagination Dots */}

{[...Array(2)].map((_, index) => (

{/* Profile Update Section: High-End Digital Statement Style */}

{/* Header: Consistent with Loyalty Section */}

{profileUpdateSuccess ? "Rewards Earned" : "Complete Profile"}

{profileUpdateSuccess ? "Verified" : "+100 Points"}

{profileUpdateSuccess ? ( /* SUCCESS STATE: PERSONALIZED THANKS MESSAGE */

Thanks for updating!

100 Points added to your balance

) : (

{/* Input Grid: Responsive columns with consistent dividers */}

{/* Mobile Input */}

Mobile Number

setProfile((prev) => ({ ...prev, mobile: e.target.value }))} className="h-10 border-0 border-b-2 border-gray-100 rounded-none bg-transparent px-0 text-sm font-bold text-gray-900 placeholder:text-gray-300 focus-visible:ring-0 focus-visible:border-emerald-500 transition-all" />

{/* Name Input */}

Full Name

setProfile((prev) => ({ ...prev, name: e.target.value }))} className="h-10 border-0 border-b-2 border-gray-100 rounded-none bg-transparent px-0 text-sm font-bold text-gray-900 placeholder:text-gray-300 focus-visible:ring-0 focus-visible:border-emerald-500 transition-all" />

{/* Email Input */}

Email Address

setProfile((prev) => ({ ...prev, email: e.target.value }))} className="h-10 border-0 border-b-2 border-gray-100 rounded-none bg-transparent px-0 text-sm font-bold text-gray-900 placeholder:text-gray-300 focus-visible:ring-0 focus-visible:border-emerald-500 transition-all" />

{/* Gender Select */}

Gender

{/* Premium CTA Button */}

)}

{/* Simplified Feedback Section */}

{/* Header */}

Rate Experience

+10 Pts

{feedbackSubmitted ? ( /* Simple Success Message */

Thanks for the feedback!

Points Added Successfully

) : (

{/* Star Rating Row */}

Your Rating

{[1, 2, 3, 4, 5].map((num) => ( ))}

{/* Comment Field - Matching Profile Section */}

Additional Thoughts

setFeedbackComment(e.target.value)} />

{/* Submit Button */}

)}

{/* Just for You Section: Mobile-Responsive Boosters */}

{/* Section Header */}

Just for You

Personalized

{/* Card 1: Weekend Special */}

{/* Icon/Visual Indicator */}

30%

Weekend Special

Buy any 2, get 30% off select organic items

Boost Now

{/* Card 2: Member Exclusive */}

FREE

Member Gift

Complimentary item on orders over $50

Exclusive

{/* Card 3: Loyalty Bonus */}

Points Booster

Earn double points on your next visit

Tap to Activate

{/* Receipt Actions: Compact & High-Contrast */}

{/* History Action */} {/* Subtle Divider */}

{/* Email Action */} {/* Subtle Divider */}

{/* Download Action */}

{/* Support Section: High-End Minimalist Style */}

{/* Section Header: Compact & Bold */}

Need Assistance?

{/* Contact Grid: High-Contrast & Unified */}

{/* WhatsApp Chat */} {/* Phone Call */} {/* Email Support */}

{/* Footer Section: Compact Brand Identity & Legal */}

{/* Social Connectivity - Original Colors & Compact Spacing */}

{/* Store Details: Tighter Vertical Stack */}

Sydney Premium Market

123 George Street, The Rocks, Sydney NSW 2000

ABN: 12 345 678 910 | PH: (02) 9234 5678 | Staff: {currentReceipt.cashier}

{/* Accordion Terms & Powered By: Compressed Row */}

{/* T&C Toggle */} {showTerms && (

• GST included • Returns within 7 days • Data managed per AU Privacy Principles

)} {/* Powered By: Minimal spacing to T&C */}

{/* Transaction History Modal */} {showTransactionHistory && (

{/* Header: High-End Statement Style */}

Shopping History

{/* History List */}

{transactionHistory.map((transaction) => ( ))}

{/* Footer CTA */}

)} {/* Refer & Earn Modal */} {showReferModal && (

Refer & Earn

Share & Earn $10!

Refer friends to Supermarket and both of you get $10 off your next meal!

Your Referral Code

Grocery{customerName.toUpperCase()}10

)}

) }