// Store-finder page for Xedap.vn — layout: intro card → system picker + search + list/map → galleries → contact table. // Exports a single unique global: StoreLocator. const { Button, Card } = window.XedapVnDesignSystem_03b1c0; const STORE_PROVINCES = [ "TP. Hồ Chí Minh", "Thành phố Hà Nội", "Thành phố Đà Nẵng", "Thành phố Cần Thơ", "Tỉnh Bình Dương", "Tỉnh Đồng Nai", "Tỉnh Khánh Hòa", ]; const STORE_LIST = [ { name: "Nguyễn Cơ Thạch", coord: [10.7746, 106.7217], city: "TP. Hồ Chí Minh", district: "TP. Thủ Đức", address: "Shop B1-00.05, Sarimi, 72 Nguyễn Cơ Thạch, P. An Khánh, TP. Thủ Đức", phone: "1800 9473", hours: "08:00 - 21:00" }, { name: "Nguyễn Duy Trinh", coord: [10.7856, 106.7615], city: "TP. Hồ Chí Minh", district: "TP. Thủ Đức", address: "585 Nguyễn Duy Trinh, P. Bình Trưng, TP. Thủ Đức", phone: "1800 9473", hours: "09:00 - 21:00" }, { name: "Võ Thị Sáu", coord: [10.7869, 106.6903], city: "TP. Hồ Chí Minh", district: "Quận 3", address: "63C Võ Thị Sáu, P. Võ Thị Sáu", phone: "1800 9473", hours: "09:00 - 21:00" }, { name: "Đặng Văn Bi", coord: [10.8492, 106.7546], city: "TP. Hồ Chí Minh", district: "TP. Thủ Đức", address: "200-202 Đặng Văn Bi, P. Thủ Đức, TP. Thủ Đức", phone: "1800 9473", hours: "09:00 - 21:00" }, { name: "Nguyễn Thị Thập", coord: [10.7405, 106.7059], city: "TP. Hồ Chí Minh", district: "Quận 7", address: "458 Nguyễn Thị Thập, P. Tân Hưng", phone: "1800 9473", hours: "09:00 - 21:00", tag: "TRUNG TÂM KỸ THUẬT" }, { name: "Hải Thượng Lãn Ông", coord: [10.7524, 106.6547], city: "TP. Hồ Chí Minh", district: "Quận 5", address: "100 Hải Thượng Lãn Ông, P. Chợ Lớn", phone: "1800 9473", hours: "09:00 - 19:00" }, { name: "Bờ Bao Tân Thắng", coord: [10.801, 106.6193], city: "TP. Hồ Chí Minh", district: "Tân Phú", address: "93C Bờ Bao Tân Thắng, P. Tân Thành", phone: "1800 9473", hours: "09:00 - 21:00" }, { name: "Tên Lửa - Bình Tân", coord: [10.7448, 106.6116], city: "TP. Hồ Chí Minh", district: "Bình Tân", address: "122 Tên Lửa, P. An Lạc", phone: "1800 9473", hours: "09:00 - 21:00" }, { name: "Tô Ký - Hóc Môn", coord: [10.8722, 106.6206], city: "TP. Hồ Chí Minh", district: "Hóc Môn", address: "14/1A Tô Ký, Xã Đông Thạnh", phone: "1800 9473", hours: "09:00 - 21:00" }, { name: "Emart Gò Vấp", coord: [10.8355, 106.669], city: "TP. Hồ Chí Minh", district: "Gò Vấp", address: "366 Phan Văn Trị, P. An Nhơn", phone: "1800 9473", hours: "09:00 - 21:00" }, { name: "Emart Phan Huy Ích", coord: [10.842, 106.632], city: "TP. Hồ Chí Minh", district: "Gò Vấp", address: "385 Phan Huy Ích, P. An Hội Tây", phone: "1800 9473", hours: "07:30 - 22:30" }, { name: "Nguyễn Oanh - Gò Vấp", coord: [10.8332, 106.6784], city: "TP. Hồ Chí Minh", district: "Gò Vấp", address: "144 Nguyễn Oanh, Gò Vấp", phone: "090 551 1144", hours: "09:00 - 21:00" }, { name: "Phạm Văn Đồng - Hà Nội", coord: [21.0709, 105.7876], city: "Thành phố Hà Nội", district: "Bắc Từ Liêm", address: "427 Phạm Văn Đồng, P. Xuân Đỉnh", phone: "1800 9473", hours: "09:00 - 21:00" }, { name: "Thái Hà - Hà Nội", coord: [21.0122, 105.8195], city: "Thành phố Hà Nội", district: "Đống Đa", address: "112 Thái Hà, P. Trung Liệt", phone: "1800 9473", hours: "09:00 - 21:00" }, { name: "Nguyễn Văn Cừ - Hà Nội", coord: [21.0459, 105.8724], city: "Thành phố Hà Nội", district: "Long Biên", address: "215 Nguyễn Văn Cừ, P. Ngọc Lâm", phone: "1800 9473", hours: "09:00 - 21:00", tag: "TRUNG TÂM KỸ THUẬT" }, { name: "Nguyễn Văn Linh - Đà Nẵng", coord: [16.0603, 108.2166], city: "Thành phố Đà Nẵng", district: "Hải Châu", address: "175 Nguyễn Văn Linh, P. Nam Dương", phone: "1800 9473", hours: "08:30 - 21:00" }, { name: "Ngô Quyền - Đà Nẵng", coord: [16.0678, 108.2306], city: "Thành phố Đà Nẵng", district: "Sơn Trà", address: "388 Ngô Quyền, P. An Hải Bắc", phone: "1800 9473", hours: "09:00 - 21:00" }, { name: "Nguyễn Văn Cừ - Cần Thơ", coord: [10.0284, 105.7563], city: "Thành phố Cần Thơ", district: "Ninh Kiều", address: "126 Nguyễn Văn Cừ, P. An Hòa", phone: "1800 9473", hours: "08:30 - 21:00" }, { name: "30/4 - Cần Thơ", coord: [10.0233, 105.7739], city: "Thành phố Cần Thơ", district: "Ninh Kiều", address: "88 Đường 30/4, P. Hưng Lợi", phone: "1800 9473", hours: "09:00 - 20:30" }, { name: "Đại lộ Bình Dương", coord: [10.9804, 106.6519], city: "Tỉnh Bình Dương", district: "TP. Thủ Dầu Một", address: "512 Đại lộ Bình Dương, P. Hiệp Thành", phone: "1800 9473", hours: "08:30 - 21:00" }, { name: "Dĩ An - Bình Dương", coord: [10.9063, 106.7694], city: "Tỉnh Bình Dương", district: "TP. Dĩ An", address: "29 Nguyễn An Ninh, P. Dĩ An", phone: "1800 9473", hours: "09:00 - 21:00", tag: "TRẠM BẢO HÀNH" }, ]; const STORE_SYSTEMS = [ { id: "showroom", label: "Xedap.vn", note: "(Hệ thống showroom bán lẻ)" }, { id: "service", label: "Xedap Service", note: "(Trung tâm kỹ thuật - bảo dưỡng)" }, { id: "warranty", label: "Xedap Care", note: "(Trạm bảo hành uỷ quyền)" }, ]; const STORE_STATS = [ { key: "showroom", src: "../../assets/logo-full.png", logo: "Logo Xedap.vn", value: "13 cửa hàng" }, { key: "member", src: "https://cdn.hstatic.net/files/200001188264/file/member.png", logo: "Logo Member", value: ">120.000 Xedap Member" }, { key: "service", src: "https://cdn.hstatic.net/files/200001188264/file/screen_shot_2021-03-18_at_9.11.20_pm__43394.webp", logo: "Logo Service", value: "6 trung tâm kỹ thuật" }, { key: "care", src: "https://cdn.hstatic.net/files/200001188264/file/logo_brand_xedap.svg", logo: "Logo Care", value: "4 trạm bảo hành" }, ]; const STORE_AMENITIES = [ { icon: "ph-shield-check", label: "Bảo hành chính hãng" }, { icon: "ph-arrows-clockwise", label: "Đổi trả 1 - 12 tháng" }, { icon: "ph-credit-card", label: "Trả góp 0% lãi suất" }, { icon: "ph-truck", label: "Giao & lắp xe tận nơi" }, { icon: "ph-bicycle", label: "Chạy thử xe miễn phí" }, ]; const STORE_GALLERIES = [ { key: "showroom", title: "Dạo online showroom Xedap.vn", shots: ["Mặt tiền showroom", "Khu trưng bày xe đạp thể thao", "Quầy phụ kiện & đồ bảo hộ", "Khu trải nghiệm xe điện", "Tư vấn chọn size xe"] }, { key: "service", title: "Dạo online trung tâm kỹ thuật Xedap Service", shots: ["Khu tiếp nhận xe", "Bàn cân chỉnh groupset", "Khu vệ sinh & bảo dưỡng", "Kho phụ tùng chính hãng", "Kỹ thuật viên kiểm tra xe"] }, ]; // Bản đồ Google Maps nhúng (style mặc định của Google, ghim đỏ + thẻ thông tin). // Khi có API key nên chuyển sang Maps Embed API chính thức: // https://www.google.com/maps/embed/v1/place?key=&q=&zoom=15 function StoreLocatorMap({ stores, activeIndex, onSelect }) { const store = stores[activeIndex] || stores[0]; const c = (store && store.coord) || [10.7769, 106.7009]; const src = `https://maps.google.com/maps?q=${c[0]},${c[1]}&z=15&hl=vi&output=embed`; return ( {store ? (
Xedap.vn {store.name}
{store.address}
{store.hours} · {store.phone}
) : null} ); } function storeLocatorMapLink(store) { const c = (store && store.coord) || [10.7769, 106.7009]; return `https://www.openstreetmap.org/?mlat=${c[0]}&mlon=${c[1]}#map=15/${c[0]}/${c[1]}`; } function StoreLocatorSelect({ value, onChange, options, placeholder }) { return (
); } function StoreLocatorRow({ store, active, onSelect }) { const go = (e) => { e.preventDefault(); window.location.href = "cua-hang-nguyen-co-thach.html#" + encodeURIComponent(store.name); }; const pill = { flex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "6px 8px", borderRadius: 999, border: "1px solid var(--primary)", background: "#fff", color: "var(--primary)", font: "inherit", fontSize: 12.5, fontWeight: 600, textDecoration: "none", cursor: "pointer", whiteSpace: "nowrap" }; return (
{store.address} {store.tag ? (
{store.tag}
) : null}
{store.hours} (tất cả các ngày trong tuần) {store.phone}
e.stopPropagation()} style={pill}>Gọi điện { e.preventDefault(); e.stopPropagation(); }} style={pill}>Chat Zalo e.stopPropagation()} style={pill}>Xem đường đi
); } function StoreLocatorGallery({ item }) { const [page, setPage] = React.useState(0); const pages = 3; return (

{item.title}

{item.shots.map((s, i) => (
))}
{Array.from({ length: pages }).map((_, i) => ( ))}
); } // Popup: toàn bộ cửa hàng trong hệ thống, gom nhóm theo tỉnh/thành phố. function StoreLocatorAllModal({ onClose, onPick }) { const [q, setQ] = React.useState(""); React.useEffect(() => { const esc = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", esc); return () => window.removeEventListener("keydown", esc); }, [onClose]); const norm = (s) => s.toLowerCase(); const matched = STORE_LIST.filter((s) => !q.trim() || norm(s.name + " " + s.address + " " + s.district + " " + s.city).includes(norm(q.trim()))); const groups = STORE_PROVINCES.map((p) => ({ province: p, stores: matched.filter((s) => s.city === p) })).filter((g) => g.stores.length); return (
e.stopPropagation()} style={{ width: "min(960px, 100%)", maxHeight: "86vh", display: "flex", flexDirection: "column", background: "#fff", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "0 24px 64px rgba(15,23,42,0.32)" }}>
Toàn bộ hệ thống cửa hàng
{matched.length} cửa hàng tại {groups.length} tỉnh/thành phố
setQ(e.target.value)} placeholder="Tìm theo tên, địa chỉ, quận/huyện" style={{ width: "100%", boxSizing: "border-box", padding: "10px 14px 10px 38px", borderRadius: "var(--radius)", border: "1px solid var(--input, #cccccc)", background: "#fff", fontFamily: "var(--font-sans)", fontSize: "calc(13px + 0.5px*var(--ts))" }} />
{groups.length === 0 ? (
Không tìm thấy cửa hàng phù hợp.
) : groups.map((g) => (

{g.province}

{g.stores.length}
{g.stores.map((s) => ( ))}
))}
); } function StoreLocator() { const [system, setSystem] = React.useState("showroom"); const [allOpen, setAllOpen] = React.useState(false); const [province, setProvince] = React.useState("TP. Hồ Chí Minh"); const [district, setDistrict] = React.useState(""); const [query, setQuery] = React.useState(""); const [activeStore, setActiveStore] = React.useState(0); const list = STORE_LIST.filter((s) => (!province || s.city === province) && (!district || s.district === district)); const districts = Array.from(new Set(STORE_LIST.filter((s) => !province || s.city === province).map((s) => s.district))); return (
{/* INTRO — ảnh + số liệu hệ thống + giới thiệu */}
{STORE_STATS.map((s) => (
{s.src ? {s.logo} : }
{s.value}
))}

Xedap.vn là hệ thống bán lẻ chính hãng xe đạp thể thao, xe đạp trẻ em, xe đạp điện và phụ kiện của Giant, Trek, Specialized, Cannondale, Java, Fornix… Tất cả showroom đều có khu chạy thử, dịch vụ đo size và lắp ráp hoàn thiện trước khi giao xe. Xedap Service là chuỗi trung tâm kỹ thuật bảo dưỡng - sửa chữa - nâng cấp xe, còn Xedap Care là các trạm bảo hành uỷ quyền của hãng. Toàn hệ thống áp dụng trả góp 0% lãi suất, đổi trả từ 1 - 12 tháng và miễn phí giao lắp tận nhà.

{/* TIỆN ÍCH */}
{STORE_AMENITIES.map((a) => (
{a.label}
))}
{/* BỘ LỌC + DANH SÁCH + BẢN ĐỒ */}

Tìm cửa hàng gần bạn

setQuery(e.target.value)} placeholder="Nhập vị trí để tìm cửa hàng gần nhất" style={{ width: "100%", boxSizing: "border-box", padding: "13px 16px 13px 42px", borderRadius: "var(--radius)", border: "1px solid var(--input, #cccccc)", background: "#fff", fontFamily: "var(--font-sans)", fontSize: "calc(13px + 1.5px*var(--ts))" }} />
{ setProvince(v); setDistrict(""); }} options={STORE_PROVINCES} placeholder="Chọn tỉnh/thành phố" />
Có {list.length} cửa hàng gần bạn
{list.length === 0 ?
Chưa có cửa hàng phù hợp với lựa chọn của bạn.
: list.map((s, i) => setActiveStore(i)} />)}
{allOpen ? setAllOpen(false)} onPick={(s) => { setProvince(s.city); setDistrict(""); setQuery(""); const idx = STORE_LIST.filter((x) => x.city === s.city).findIndex((x) => x.name === s.name); setActiveStore(idx < 0 ? 0 : idx); setAllOpen(false); }} /> : null} {STORE_GALLERIES.map((g) => )}
); } Object.assign(window, { StoreLocator });