import React, { useState, useEffect } from ‘react’; import { Home, ShoppingCart, User, Bell, Search, MapPin, Star, ChevronRight, ChevronLeft, Plus, Minus, Check, X, Radar, Navigation, Box, ShoppingBag, Send, Wallet, QrCode, Lock, Edit3, Trash2, PackageSearch, Loader2, MessageSquare, Truck, Package, Clock, Map, Phone, CheckCircle2, ShieldCheck, Receipt, Heart, Ticket, Store, HelpCircle, Shield, Settings, Share2, CreditCard, Banknote, CalendarDays, FileText } from ‘lucide-react’; const CATEGORIES = [ { id: ‘all’, label: ‘แนะนำ’, icon: Star, color: ‘bg-gradient-to-r from-orange-400 to-red-500’ }, { id: ‘food’, label: ‘อาหาร’, icon: ShoppingCart, color: ‘bg-gradient-to-r from-orange-500 to-amber-500’ }, { id: ‘general’, label: ‘ของใช้ทั่วไป’, icon: Package, color: ‘bg-gradient-to-r from-blue-500 to-cyan-600’ }, { id: ‘poompuang’, label: ‘รถพุ่มพวง’, icon: Truck, color: ‘bg-gradient-to-r from-green-500 to-emerald-600’ }, ]; const MOCK_PRODUCTS = [ { id: 101, name: ‘แว่นกันแดด Ray-Ban Wayfarer คลาสสิก’, price: 4500, rating: 4.9, category: ‘general’, image: ‘https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80’, seller: ‘OpticSquare’, shippingFee: 40, sold: 1250, originalPrice: 5500, desc: ‘แว่นกันแดด Ray-Ban Wayfarer รุ่นคลาสสิกที่ได้รับความนิยมตลอดกาล ปกป้องดวงตาของคุณจากรังสี UV 100% พร้อมดีไซน์ที่เข้าได้กับทุกสไตล์การแต่งตัว\n\n- เลนส์กันแดดคุณภาพสูง G-15\n- กรอบพลาสติกอะซิเตท น้ำหนักเบา ทนทาน\n- สินค้าของแท้ 100% รับประกันศูนย์ 1 ปี\n- อุปกรณ์ครบชุด: กล่องแว่น, ผ้าเช็ดแว่น, คู่มือ’, specs: { ‘แบรนด์’: ‘Ray-Ban’, ‘วัสดุกรอบ’: ‘Acetate’, ‘รูปทรง’: ‘Wayfarer’, ‘การรับประกัน’: ‘1 ปี’ }, reviews: [ { user: ‘คุณสมชาย’, rating: 5, comment: ‘ของแท้แน่นอนครับ ใส่สบายตามาก แพ็คของมาอย่างดี’, date: ’12 พ.ค. 2026′ }, { user: ‘K***’, rating: 5, comment: ‘สวยมากกกก จัดส่งเร็วมาก สั่งเมื่อวาน วันนี้ได้ของแล้ว’, date: ’05 พ.ค. 2026′ } ] }, { id: 102, name: ‘แว่นกรองแสงสีฟ้า ถนอมสายตา ทรงหยดน้ำ’, price: 890, rating: 4.8, category: ‘general’, image: ‘https://images.unsplash.com/photo-1511499767150-a48a237f0083?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80’, seller: ‘OpticSquare’, shippingFee: 40, sold: 856, originalPrice: 1290, desc: ‘แว่นกรองแสงสีฟ้าคุณภาพสูง ดีไซน์ทรงหยดน้ำสไตล์เกาหลี ช่วยลดอาการล้าของดวงตาจากการจ้องหน้าจอคอมพิวเตอร์และมือถือเป็นเวลานาน’, specs: { ‘แบรนด์’: ‘OpticSquare’, ‘วัสดุ’: ‘โลหะผสมไทเทเนียม’, ‘คุณสมบัติเลนส์’: ‘Anti-Blue Light / UV400’ }, reviews: [ { user: ‘N***’, rating: 4, comment: ‘น้ำหนักเบา ใส่สบาย ไม่บีบขมับค่ะ’, date: ’15 พ.ค. 2026′ } ] }, { id: 1, name: ‘กะเพราหมูกรอบไข่ดาว’, price: 50, rating: 4.8, category: ‘food’, image: ‘https://images.unsplash.com/photo-1594833215982-f5c225a0a382?ixlib=rb-4.0.3&w=800&q=80’, seller: ‘ร้านป้าศรี’, shippingFee: 15, sold: 8400, desc: ‘ผัดกะเพราหมูกรอบสูตรเด็ดของร้านป้าศรี หมูกรอบชิ้นโต ทอดกรอบนอกนุ่มใน ผัดกับใบกะเพราป่ากลิ่นหอม รสชาติจัดจ้านถึงใจ เสิร์ฟพร้อมข้าวสวยร้อนๆ และไข่ดาวเยิ้มๆ (สามารถระบุความเผ็ดได้ในหมายเหตุ)’, specs: { ‘ระดับความเผ็ด’: ‘ปานกลาง (สั่งได้)’, ‘เนื้อสัตว์’: ‘หมูกรอบ’, ‘ท็อปปิ้ง’: ‘ไข่ดาว’ }, reviews: [ { user: ‘S***’, rating: 5, comment: ‘หมูกรอบอร่อยมากกกกกก ไม่เหนียวเลย รสชาติกะเพราแท้ๆ’, date: ’30 พ.ค. 2026′ }, { user: ‘A***’, rating: 4, comment: ‘ได้เยอะ คุ้มราคาครับ แต่ไข่ดาวสุกไปนิดนึง’, date: ’28 พ.ค. 2026′ } ] }, { id: 2, name: ‘ข้าวมันไก่ตอน สูตรไหหลำ’, price: 45, rating: 4.6, category: ‘food’, image: ‘https://images.unsplash.com/photo-1626804475297-41607ea0d5eb?ixlib=rb-4.0.3&w=300&q=80’, seller: ‘ข้าวมันไก่เจ๊อ้วน’, shippingFee: 15 }, { id: 3, name: ‘ชาเย็น หวานน้อย (แก้วโอ่ง)’, price: 30, rating: 4.9, category: ‘food’, image: ‘https://images.unsplash.com/photo-1556679343-c7306c1976bc?ixlib=rb-4.0.3&w=300&q=80’, seller: ‘สมุย คาเฟ่’, shippingFee: 15 }, { id: 6, name: ‘หมูปิ้งนมสด (ไม้ละ)’, price: 10, rating: 4.9, category: ‘poompuang’, image: ‘https://images.unsplash.com/photo-1625938146369-adc83368bda7?ixlib=rb-4.0.3&w=300&q=80’, seller: ‘พี่ชัย หมูปิ้ง’, shippingFee: 10 }, { id: 402, name: ‘เสื้อยืดสไตล์มินิมอล ใส่สบาย’, price: 150, rating: 4.7, category: ‘general’, seller: ‘Basic Store’, image: ‘https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=800&q=80’, shippingFee: 30, sold: 340, originalPrice: 250, desc: ‘เสื้อยืดคอกลมผ้าฝ้าย 100% สไตล์มินิมอล เนื้อผ้านุ่ม ระบายอากาศได้ดี ไม่ย้วยง่าย เหมาะสำหรับใส่ในวันสบายๆ หรือแมตช์กับลุคต่างๆ ได้อย่างลงตัว’, specs: { ‘วัสดุ’: ‘Cotton 100%’, ‘ทรงเสื้อ’: ‘Regular Fit’, ‘การดูแลรักษา’: ‘ซักเครื่องได้ / รีดไฟอ่อน’ }, reviews: [ { user: ‘W***’, rating: 5, comment: ‘ผ้านิ่มมากก สั่งมา 3 สีเลยค่ะ’, date: ’20 พ.ค. 2026′ } ] }, ]; const MOCK_ORDERS = [ { id: ‘ORD-2605-001’, store: ‘ร้านป้าศรี’, status: ‘unpaid’, total: 115, shipping: 15, items: [{name: ‘กะเพราหมูกรอบไข่ดาว’, qty: 2, price: 50, image: ‘https://images.unsplash.com/photo-1594833215982-f5c225a0a382?ixlib=rb-4.0.3&w=100&q=80′}], date: ’30 พ.ค. 2026 14:20’ }, { id: ‘ORD-2605-002’, store: ‘Shopee Express (SPX)’, status: ‘to_receive’, total: 4500, shipping: 0, tracking: ‘TH068696108585’, items: [{name: ‘แว่นกันแดด Ray-Ban Wayfarer คลาสสิก’, qty: 1, price: 4500, image: ‘https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&w=100&q=80′}], date: ’28 พ.ค. 2026 09:15’ }, ]; const MOCK_RIDER = { name: ‘พี่สมคิด ขับไว’, phone: ‘089-123-4567’, plate: ‘1กข 1234 กทม.’, rating: 4.9, avatar: ‘https://images.unsplash.com/photo-1552058544-f2b08422138a?w=100&q=80’ }; const MOCK_MOBILE_VENDORS = [ { id: ‘v1’, name: ‘ลุงเดช (ผักสด/หมู)’, type: ‘รถพุ่มพวง’, distance: ‘150 ม.’, time: ‘2 นาที’, items: [‘ผักสด’, ‘เนื้อหมู’, ‘ไข่ไก่’], rating: 4.8, lat: -60, lng: 80 }, { id: ‘v2’, name: ‘ป้าศรี (ผลไม้ตามฤดูกาล)’, type: ‘รถเข็น’, distance: ‘300 ม.’, time: ‘5 นาที’, items: [‘มะม่วง’, ‘ทุเรียน’, ‘ฝรั่ง’], rating: 4.5, lat: 120, lng: -90 }, { id: ‘v3’, name: ‘พี่ชัย หมูปิ้งนมสด’, type: ‘พ่วงข้าง’, distance: ‘450 ม.’, time: ‘8 นาที’, items: [‘หมูปิ้ง’, ‘ข้าวเหนียว’], rating: 4.9, lat: -100, lng: -120 }, { id: ‘v4’, name: ‘เจ๊ณี (น้ำเต้าหู้/ชาไข่มุก)’, type: ‘พ่วงข้าง’, distance: ‘600 ม.’, time: ’12 นาที’, items: [‘น้ำเต้าหู้’, ‘ปาท่องโก๋’], rating: 4.7, lat: 140, lng: 50 }, ]; export default function App() { const [activeTab, setActiveTab] = useState(‘Home’); const [homeCategory, setHomeCategory] = useState(‘all’); const [cartItems, setCartItems] = useState([ { id: 1, name: ‘กะเพราหมูกรอบไข่ดาว’, price: 50, qty: 2, image: ‘https://images.unsplash.com/photo-1594833215982-f5c225a0a382?ixlib=rb-4.0.3&w=100&q=80’, seller: ‘ร้านป้าศรี’, shippingFee: 15 }, ]); const [paymentMethod, setPaymentMethod] = useState(‘wallet’); const [deliveryMethod, setDeliveryMethod] = useState(‘standard’); // General UI States const [showNotifications, setShowNotifications] = useState(false); const [notifications, setNotifications] = useState([ { id: 1, title: ‘โปรโมชันพิเศษ 0% GP’, desc: ‘สั่งอาหารวันนี้ ค่าส่งให้ไรเดอร์เต็มๆ 100%’, time: ’10 นาทีที่แล้ว’ } ]); const [selectedProduct, setSelectedProduct] = useState(null); // Radar States const [showRadar, setShowRadar] = useState(false); const [isScanningRadar, setIsScanningRadar] = useState(true); const [selectedRadarVendor, setSelectedRadarVendor] = useState(null); // Billing & Orders const [walletBalance, setWalletBalance] = useState(12500.50); const [payLaterBalance, setPayLaterBalance] = useState(24500.00); const [payLaterLimit, setPayLaterLimit] = useState(25000.00); const [installmentMonths, setInstallmentMonths] = useState(1); const [orders, setOrders] = useState(MOCK_ORDERS); const [showOrderHistory, setShowOrderHistory] = useState(false); const [orderTab, setOrderTab] = useState(‘all’); const [showOrderSuccessModal, setShowOrderSuccessModal] = useState(false); const [showConfirmOrderModal, setShowConfirmOrderModal] = useState(false); // Tracking API const [showTrackingModal, setShowTrackingModal] = useState(false); const [isTrackingLoading, setIsTrackingLoading] = useState(false); const [trackingInfo, setTrackingInfo] = useState(null); // PayLater Dashboard States const [showPayLaterModal, setShowPayLaterModal] = useState(false); const [payLaterPhase, setPayLaterPhase] = useState(‘dashboard’); // dashboard, pay_bill, success const [currentBillAmount, setCurrentBillAmount] = useState(500.00); const [payLaterTransactions, setPayLaterTransactions] = useState([ { id: ‘PL-TX001’, name: ‘หม้อทอดไร้น้ำมัน รุ่น Pro’, date: ’15 พ.ค. 2026′, plan: ‘ผ่อน 3 เดือน’, currentInstallment: 1, amount: 500, total: 1500, status: ‘billed’ } ]); // Rider Tracking const [showRiderModal, setShowRiderModal] = useState(false); const [activeTrackingOrder, setActiveTrackingOrder] = useState(null); // Top-up const [showTopupModal, setShowTopupModal] = useState(false); const [topupPhase, setTopupPhase] = useState(‘select’); const [topupAmount, setTopupAmount] = useState(500); // Shipping Address const [showAddressModal, setShowAddressModal] = useState(false); const [addressPhase, setAddressPhase] = useState(‘list’); const [addresses, setAddresses] = useState([ { id: ‘addr1’, name: ‘คุณสมชาย ใจดี’, phone: ‘081-234-5678’, detail: ‘123/45 หมู่ 5 ต.บ่อผุด’, province: ‘สุราษฎร์ธานี’, district: ‘เกาะสมุย’, zip: ‘84320’, isDefault: true }, ]); const [addressForm, setAddressForm] = useState({ id: ”, name: ”, phone: ”, detail: ”, province: ”, district: ”, zip: ”, isDefault: false }); // Rating Shop const [showRatingModal, setShowRatingModal] = useState(false); const [selectedOrderToRate, setSelectedOrderToRate] = useState(null); const [ratingScore, setRatingScore] = useState(0); const [ratingComment, setRatingComment] = useState(”); // Privileges and Interests States const [showCouponsModal, setShowCouponsModal] = useState(false); const [showLikedProductsModal, setShowLikedProductsModal] = useState(false); const [showFollowedShopsModal, setShowFollowedShopsModal] = useState(false); const [likedProductIds, setLikedProductIds] = useState([101, 1]); const [followedShops, setFollowedShops] = useState([{ name: ‘ร้านป้าศรี’, type: ‘อาหาร’ }, { name: ‘OpticSquare’, type: ‘ของใช้ทั่วไป’ }]); const [couponTab, setCouponTab] = useState(‘active’); const [couponCodeInput, setCouponCodeInput] = useState(”); const [coupons, setCoupons] = useState([ { id: 1, title: ‘ส่งฟรีทั่วไทย’, desc: ‘ส่วนลดค่าจัดส่ง 30 บาท’, type: ‘shipping’, minSpend: 150, expiry: ’30 มิ.ย. 2026′, status: ‘active’ }, { id: 2, title: ‘ส่วนลดร้านค้าชุมชน’, desc: ‘ลดทันที 50 บาท’, type: ‘discount’, minSpend: 200, expiry: ’15 มิ.ย. 2026′, status: ‘active’ }, { id: 3, title: ‘โปรลดค่า GP’, desc: ‘รับเงินคืน 10% เข้ากระเป๋า’, type: ‘cashback’, minSpend: 100, expiry: ’31 พ.ค. 2026′, status: ‘active’ }, { id: 4, title: ‘ส่วนลดลูกค้าใหม่’, desc: ‘ลดทันที 100 บาท’, type: ‘discount’, minSpend: 0, expiry: ’15 พ.ค. 2026′, status: ‘used’ }, { id: 5, title: ‘โปรส่งฟรี วันแรงงาน’, desc: ‘ส่วนลดค่าจัดส่ง 40 บาท’, type: ‘shipping’, minSpend: 300, expiry: ‘1 พ.ค. 2026’, status: ‘expired’ } ]); useEffect(() => { const findingRiderOrders = orders.filter(o => o.status === ‘finding_rider’); if (findingRiderOrders.length > 0) { const timer = setTimeout(() => { setOrders(prev => prev.map(o => { if (o.status === ‘finding_rider’) { triggerNotification(‘ไรเดอร์รับงานแล้ว!’, `${MOCK_RIDER.name} กำลังเดินทางไปรับสินค้าที่ร้าน ${o.store} ค่ะ`); return { …o, status: ‘rider_delivering’, rider: MOCK_RIDER, eta: ’12 นาที’ }; } return o; })); }, 4000); return () => clearTimeout(timer); } }, [orders]); const triggerNotification = (title, desc) => { const newNotif = { id: Date.now(), title, desc, time: ‘เมื่อสักครู่’ }; setNotifications(prev => [newNotif, …prev]); setShowNotifications(true); setTimeout(() => setShowNotifications(false), 4000); }; const addToCart = (product) => { setCartItems(prev => { const existing = prev.find(item => item.id === product.id); if (existing) return prev.map(item => item.id === product.id ? { …item, qty: item.qty + 1 } : item); return […prev, { id: product.id, name: product.name, price: product.price, qty: 1, image: product.image, seller: product.seller || ‘ร้านค้าทั่วไป’, shippingFee: product.shippingFee || 15 }]; }); triggerNotification(‘เพิ่มลงตะกร้าสำเร็จ’, `เพิ่ม ${product.name} ลงตะกร้าแล้วค่ะ`); setSelectedProduct(null); }; const updateCartQty = (id, delta) => { setCartItems(prev => prev.map(item => { if (item.id === id) { const newQty = item.qty + delta; return newQty > 0 ? { …item, qty: newQty } : item; } return item; })); }; const removeFromCart = (id) => { setCartItems(prev => prev.filter(item => item.id !== id)); triggerNotification(‘ลบสินค้าออกจากตะกร้า’, ‘ลบสินค้าสำเร็จแล้วค่ะ’); }; const handlePrePlaceOrder = () => { const selectedAddress = addresses.find(a => a.isDefault) || addresses[0]; if (!selectedAddress) { triggerNotification(‘แจ้งเตือน’, ‘กรุณาเพิ่มที่อยู่สำหรับจัดส่งสินค้าก่อนค่ะ’); setShowAddressModal(true); setAddressPhase(‘list’); return; } const subtotal = cartItems.reduce((sum, item) => sum + (item.price * item.qty), 0); const uniqueSellers = Array.from(new Set(cartItems.map(item => item.seller))); const baseShipping = uniqueSellers.reduce((sum, seller) => { const item = cartItems.find(i => i.seller === seller); return sum + (item.shippingFee || 15); }, 0); const totalShipping = deliveryMethod === ‘rider’ ? baseShipping + 25 : baseShipping; const totalCost = subtotal + totalShipping; if (paymentMethod === ‘wallet’ && walletBalance < totalCost) { triggerNotification('ยอดเงินไม่พอ', 'ยอดเงินคงเหลือใน ThaiMall Pay ไม่เพียงพอ กรุณาเติมเงินก่อนชำระเงินค่ะ'); setShowTopupModal(true); setTopupPhase('select'); return; } else if (paymentMethod === 'paylater' && payLaterBalance < totalCost) { triggerNotification('วงเงินไม่พอ', 'วงเงิน ThaiMall ผ่อนสบาย ของคุณไม่เพียงพอค่ะ'); return; } setShowConfirmOrderModal(true); }; const handlePlaceOrder = () => { const subtotal = cartItems.reduce((sum, item) => sum + (item.price * item.qty), 0); const uniqueSellers = Array.from(new Set(cartItems.map(item => item.seller))); const baseShipping = uniqueSellers.reduce((sum, seller) => { const item = cartItems.find(i => i.seller === seller); return sum + (item.shippingFee || 15); }, 0); const totalShipping = deliveryMethod === ‘rider’ ? baseShipping + 25 : baseShipping; const totalCost = subtotal + totalShipping; if (paymentMethod === ‘wallet’) setWalletBalance(prev => prev – totalCost); if (paymentMethod === ‘paylater’) { setPayLaterBalance(prev => prev – totalCost); // เพิ่มประวัติลงใน PayLater Dashboard const newTransaction = { id: `PL-TX${Date.now().toString().slice(-4)}`, name: cartItems.length > 1 ? `คำสั่งซื้อ ${cartItems.length} รายการ` : cartItems[0].name, date: new Date().toLocaleDateString(‘th-TH’, { day: ‘numeric’, month: ‘short’, year: ‘numeric’ }), plan: installmentMonths === 1 ? ‘จ่ายเดือนหน้า’ : `ผ่อน ${installmentMonths} เดือน`, currentInstallment: 1, amount: Math.ceil(totalCost / installmentMonths), total: totalCost, status: ‘upcoming’ }; setPayLaterTransactions(prev => [newTransaction, …prev]); } const newOrders = uniqueSellers.map(seller => { const sellerItems = cartItems.filter(item => item.seller === seller); const sellerSubtotal = sellerItems.reduce((sum, item) => sum + (item.price * item.qty), 0); const itemFee = sellerItems[0].shippingFee || 15; const sellerShipping = deliveryMethod === ‘rider’ ? itemFee + 25 : itemFee; const sellerTotal = sellerSubtotal + sellerShipping; let orderStatus = (paymentMethod === ‘wallet’ || paymentMethod === ‘paylater’ || paymentMethod === ‘cod’) ? ‘to_receive’ : ‘unpaid’; if (deliveryMethod === ‘rider’ && (paymentMethod === ‘wallet’ || paymentMethod === ‘paylater’ || paymentMethod === ‘cod’)) { orderStatus = ‘finding_rider’; } return { id: `ORD-${Date.now().toString().slice(-4)}-${Math.floor(Math.random() * 1000)}`, store: seller, status: orderStatus, total: sellerTotal, shipping: sellerShipping, deliveryMethod: deliveryMethod, paymentMethod: paymentMethod, installment: paymentMethod === ‘paylater’ ? installmentMonths : 0, items: sellerItems.map(item => ({ name: item.name, qty: item.qty, price: item.price, image: item.image })), date: new Date().toLocaleDateString(‘th-TH’, { day: ‘numeric’, month: ‘short’, year: ‘numeric’, hour: ‘2-digit’, minute: ‘2-digit’ }) }; }); setOrders(prev => […newOrders, …prev]); setCartItems([]); setShowConfirmOrderModal(false); setShowOrderSuccessModal(true); }; const handleRiderArrived = () => { if(!activeTrackingOrder) return; const orderToComplete = activeTrackingOrder; setOrders(prev => prev.map(o => o.id === orderToComplete.id ? { …o, status: ‘completed’ } : o)); setShowRiderModal(false); setActiveTrackingOrder(null); triggerNotification(‘จัดส่งสำเร็จ!’, `พัสดุของคุณถูกจัดส่งเรียบร้อยโดย ${MOCK_RIDER.name} ค่ะ`); setTimeout(() => { setSelectedOrderToRate(orderToComplete); setRatingScore(0); setRatingComment(”); setShowOrderHistory(true); setOrderTab(‘completed’); setShowRatingModal(true); }, 1500); }; const fetchTrackingInfo = async (trackingNumber) => { setShowTrackingModal(true); setIsTrackingLoading(true); setTimeout(() => { setTrackingInfo({ number: trackingNumber, events: [ { time: new Date().toISOString().replace(‘T’, ‘ ‘).slice(0, 16), status: ‘พัสดุถึงสาขาปลายทาง กำลังรอนำจ่าย’, location: ‘ปลายทาง’ }, { time: new Date(Date.now() – 43200000).toISOString().replace(‘T’, ‘ ‘).slice(0, 16), status: ‘พัสดุอยู่ระหว่างการขนส่งข้ามภูมิภาค’, location: ‘ศูนย์คัดแยกสินค้าหลัก กทม.’ }, { time: new Date(Date.now() – 86400000).toISOString().replace(‘T’, ‘ ‘).slice(0, 16), status: ‘รับพัสดุเข้าศูนย์คัดแยกแล้ว’, location: ‘สาขาต้นทาง’ }, { time: new Date(Date.now() – 172800000).toISOString().replace(‘T’, ‘ ‘).slice(0, 16), status: ‘บริษัทขนส่งเข้ารับพัสดุเรียบร้อย’, location: ‘ร้านค้า’ }, ] }); setIsTrackingLoading(false); }, 1500); }; const handleTopupSuccess = () => { setTopupPhase(‘processing’); setTimeout(() => { setWalletBalance(prev => prev + topupAmount); setTopupPhase(‘success’); triggerNotification(‘เติมเงินสำเร็จ’, `ยอดเงินเข้า ThaiMall Pay จำนวน ฿${topupAmount.toLocaleString()}`); }, 1500); }; const handleSelectDefaultAddress = (id) => { setAddresses(prev => prev.map(addr => ({ …addr, isDefault: addr.id === id }))); triggerNotification(‘เปลี่ยนที่อยู่เริ่มต้น’, ‘ระบบได้เปลี่ยนที่อยู่หลักสำหรับการจัดส่งเรียบร้อยแล้วค่ะ’); }; const handleDeleteAddress = (id, e) => { e.stopPropagation(); const addressToDelete = addresses.find(a => a.id === id); if (addressToDelete?.isDefault && addresses.length > 1) { triggerNotification(‘แจ้งเตือน’, ‘ไม่สามารถลบที่อยู่เริ่มต้นได้ค่ะ กรุณาตั้งที่อยู่อื่นเป็นที่อยู่หลักก่อน’); return; } setAddresses(prev => prev.filter(addr => addr.id !== id)); triggerNotification(‘ลบที่อยู่สำเร็จ’, ‘ที่อยู่ดังกล่าวถูกลบออกจากบัญชีของคุณเรียบร้อยแล้ว’); }; const handleSaveAddress = () => { if (!addressForm.name.trim() || !addressForm.phone.trim() || !addressForm.detail.trim() || !addressForm.province.trim() || !addressForm.district.trim() || !addressForm.zip.trim()) { triggerNotification(‘กรอกข้อมูลไม่ครบ’, ‘กรุณาระบุข้อมูลที่อยู่จัดส่งให้ครบถ้วนทุกช่องค่ะ’); return; } if (addressPhase === ‘add’) { const newAddress = { …addressForm, id: `addr_${Date.now()}`, isDefault: addresses.length === 0 ? true : addressForm.isDefault }; if (newAddress.isDefault) { setAddresses(prev => prev.map(a => ({ …a, isDefault: false })).concat(newAddress)); } else { setAddresses(prev => […prev, newAddress]); } triggerNotification(‘เพิ่มที่อยู่สำเร็จ’, ‘ที่อยู่จัดส่งใหม่ได้รับการบันทึกแล้วค่ะ’); } else if (addressPhase === ‘edit’) { setAddresses(prev => prev.map(addr => { if (addr.id === addressForm.id) return { …addressForm }; if (addressForm.isDefault && addr.id !== addressForm.id) return { …addr, isDefault: false }; return addr; })); triggerNotification(‘แก้ไขที่อยู่สำเร็จ’, ‘ข้อมูลที่อยู่ของคุณอัปเดตเรียบร้อยแล้วค่ะ’); } setAddressPhase(‘list’); }; const renderHomeContent = () => { let displayedItems = MOCK_PRODUCTS; if (homeCategory !== ‘all’) { displayedItems = displayedItems.filter(item => item.category === homeCategory); } const activeCatObj = CATEGORIES.find(c => c.id === homeCategory) || CATEGORIES[0]; return ( ); }; const renderCartAndCheckout = () => { const subtotal = cartItems.reduce((sum, item) => sum + (item.price * item.qty), 0); const uniqueSellers = Array.from(new Set(cartItems.map(item => item.seller))); const baseShipping = uniqueSellers.reduce((sum, seller) => { const item = cartItems.find(i => i.seller === seller); return sum + (item.shippingFee || 15); }, 0); const totalShipping = deliveryMethod === ‘rider’ ? baseShipping + 25 : baseShipping; const grandTotal = subtotal + totalShipping; const selectedAddress = addresses.find(a => a.isDefault) || addresses[0]; const groupedCart = cartItems.reduce((acc, item) => { if (!acc[item.seller]) acc[item.seller] = []; acc[item.seller].push(item); return acc; }, {}); return ( ); }; const renderProfile = () => { return ( ); } const renderBottomNav = () => ( ); const renderRadarModal = () => { if (!showRadar) return null; return ( ); }; const renderProductModal = () => { if (!selectedProduct) return null; // Fallback values for products without rich data const soldCount = selectedProduct.sold || Math.floor(Math.random() * 500) + 50; const desc = selectedProduct.desc || ‘สินค้าคุณภาพดีจากร้านค้าชุมชน รับประกันความพึงพอใจ จัดส่งรวดเร็ว สนับสนุนพ่อค้าแม่ค้าท้องถิ่นผ่าน ThaiMall’; const originalPrice = selectedProduct.originalPrice || Math.floor(selectedProduct.price * 1.2); return ( ); }; const renderOrderHistoryModal = () => { if (!showOrderHistory) return null; const ORDER_TABS = [ { id: ‘all’, label: ‘ทั้งหมด’ }, { id: ‘unpaid’, label: ‘รอชำระ’ }, { id: ‘to_receive’, label: ‘กำลังจัดส่ง’ }, { id: ‘completed’, label: ‘สำเร็จแล้ว’ } ]; const displayedOrders = orderTab === ‘all’ ? orders : orders.filter(o => o.status === orderTab || (orderTab === ‘to_receive’ && (o.status === ‘finding_rider’ || o.status === ‘rider_delivering’))); return ( ); }; const renderRiderTrackingModal = () => { if (!showRiderModal || !activeTrackingOrder) return null; const isFinding = activeTrackingOrder.status === ‘finding_rider’; const rider = activeTrackingOrder.rider || MOCK_RIDER; return ( ); }; const renderOtherModals = () => ( <> {/* Confirm Order Modal */} {showConfirmOrderModal && ( )} {/* Success Modal */} {showOrderSuccessModal && ( )} {/* Tracking Modal */} {showTrackingModal && ( )} {/* Address Modal */} {showAddressModal && ( )} {/* Topup Modal */} {showTopupModal && ( )} {/* Rating Modal */} {showRatingModal && selectedOrderToRate && ( )} {/* Notifications Overlay */} {showNotifications && ( )} {/* Coupons Modal */} {showCouponsModal && ( )} {/* Liked Products Modal */} {showLikedProductsModal && ( )} {/* Followed Shops Modal */} {showFollowedShopsModal && ( )} {/* PayLater Dashboard Modal */} {showPayLaterModal && ( )} ); return (