(function(){ // vehicles-screen.jsx — Step /vehicles — Clear theme // Teal brand #11978f · Ink #042828 · Muted #5B7A82 · Cream bg #F4F2EC const T_TEAL = '#11978f'; const T_INK = '#042828'; const T_MUTED = '#5B7A82'; const T_CREAM = '#F4F2EC'; const T_SURFACE = '#FFFFFF'; const T_BORDER = 'rgba(4,40,40,0.08)'; const T_BORDER_STRONG = 'rgba(4,40,40,0.14)'; const T_DANGER = '#C0392B'; const MOCK_AGENCIES = [ { id: 1, public_name: 'Van-Away Bordeaux', city: 'Bordeaux' }, { id: 2, public_name: 'Van-Away Lyon', city: 'Lyon' }, { id: 3, public_name: 'Van-Away Marseille', city: 'Marseille' }, { id: 4, public_name: 'Van-Away Paris', city: 'Paris' }, { id: 5, public_name: 'Van-Away Toulouse', city: 'Toulouse' }, { id: 6, public_name: 'Van-Away Nantes', city: 'Nantes' }, { id: 7, public_name: 'Van-Away Rennes', city: 'Rennes' }, ]; const MOCK_VEHICLES = [ { id: 1, display_name: 'Camper Van California', category_name: 'VAN', tagline: 'Van aménagé Volkswagen, pour voyager en couple ou en famille jusqu’à 4.', brand: 'Volkswagen', model: 'California', nb_places: 4, nb_doors: 4, gearbox: 'Automatique', energy: 'Diesel', specificities: { cooling: true, gps: true, bluetooth: true }, custom_equipments: [{ icon: 'bed', text: '2 couchages' }, { icon: 'kitchen', text: 'Cuisine équipée' }], photo_hue: 180, description: "Le Camper Van California est le compagnon idéal pour partir à l'aventure en couple ou en famille. Compact en ville, confortable sur la route, il offre tout le nécessaire pour des escapades nature : cuisine équipée, lit double électrique en toiture, et un espace de vie chaleureux.", equipments: ['Climatisation', 'GPS', 'Bluetooth', 'Cuisine', 'Réfrigérateur', 'Chauffage stationnaire', 'Auvent', 'Régulateur de vitesse'], mileage_levels: [ { id: 'm1', mileage: 200, amount: 0, unlimited: false }, { id: 'm2', mileage: 300, amount: 8, unlimited: false }, { id: 'm3', mileage: 0, amount: 18, unlimited: true }, ], included_options: [ { option_id: 'i1', name: 'Lit double aménagé' }, { option_id: 'i2', name: 'Vaisselle 4 personnes' }, { option_id: 'i3', name: 'Kit de cuisine' }, { option_id: 'i4', name: 'Linge de lit' }, ], paid_options: [ { option_id: 'p1', name: 'Tente de toit', amount: 12, pricing_type: 'per_day' }, { option_id: 'p2', name: 'Porte-vélos (2 vélos)', amount: 8, pricing_type: 'per_day' }, { option_id: 'p3', name: 'Siège bébé', amount: 5, pricing_type: 'per_day' }, { option_id: 'p4', name: 'Pack vaisselle premium', amount: 25, pricing_type: 'per_rental' }, ], }, { id: 2, display_name: 'Camper Van Nugget', category_name: 'VAN', tagline: 'Van aménagé Ford Transit, idéal pour 4 personnes avec douche extérieure.', brand: 'Ford', model: 'Nugget', nb_places: 4, nb_doors: 4, gearbox: 'Automatique', energy: 'Diesel', specificities: { cooling: true, gps: true }, custom_equipments: [{ icon: 'bed', text: '4 couchages' }, { icon: 'shower', text: 'Douche extérieure' }], photo_hue: 30, description: "Le Ford Nugget est un van aménagé spacieux et polyvalent, parfait pour les familles ou les groupes d'amis. Avec sa douche extérieure et son toit relevable, il combine confort et liberté pour des road-trips au long cours.", equipments: ['Climatisation', 'GPS', 'Cuisine', 'Réfrigérateur', 'Douche', 'Auvent', 'Régulateur de vitesse', 'USB'], mileage_levels: [ { id: 'm1', mileage: 200, amount: 0, unlimited: false }, { id: 'm2', mileage: 300, amount: 8, unlimited: false }, { id: 'm3', mileage: 0, amount: 18, unlimited: true }, ], included_options: [ { option_id: 'i1', name: 'Toit relevable' }, { option_id: 'i2', name: 'Vaisselle 4 personnes' }, { option_id: 'i3', name: 'Kit de cuisine' }, ], paid_options: [ { option_id: 'p1', name: 'Auvent latéral', amount: 10, pricing_type: 'per_day' }, { option_id: 'p2', name: 'Porte-vélos (2 vélos)', amount: 8, pricing_type: 'per_day' }, { option_id: 'p3', name: 'Pack literie supplémentaire', amount: 35, pricing_type: 'per_rental' }, ], }, ]; const UNAVAIL_VEHICLES = [ { id: 101, display_name: 'Fourgon Grand California 600', category_name: 'FOURGON', tagline: 'Fourgon Volkswagen haut de gamme, 4 places, WC et douche intérieure.', brand: 'Volkswagen', model: 'Grand California', nb_places: 4, nb_doors: 4, gearbox: 'Automatique', energy: 'Diesel', custom_equipments: [{ icon: 'bed', text: '4 couchages' }, { icon: 'toilet', text: 'WC + douche' }], photo_hue: 260, description: "Le Grand California 600 est le fourgon haut de gamme de Volkswagen. Spacieux, équipé d'une vraie salle d'eau (WC + douche) et d'une cuisine complète, il offre tout le confort d'un camping-car dans un véhicule conduisible avec un permis B.", equipments: ['Climatisation', 'GPS', 'Bluetooth', 'Cuisine', 'Réfrigérateur', 'Chauffage stationnaire', 'Douche', 'Toilettes', 'Panneau solaire', 'Auvent'], mileage_levels: [ { id: 'm1', mileage: 200, amount: 0, unlimited: false }, { id: 'm2', mileage: 300, amount: 10, unlimited: false }, { id: 'm3', mileage: 0, amount: 22, unlimited: true }, ], included_options: [ { option_id: 'i1', name: 'Lit double électrique' }, { option_id: 'i2', name: 'Vaisselle 4 personnes' }, { option_id: 'i3', name: 'Kit de cuisine' }, ], paid_options: [ { option_id: 'p1', name: 'Porte-vélos (2 vélos)', amount: 8, pricing_type: 'per_day' }, { option_id: 'p2', name: 'Siège bébé', amount: 5, pricing_type: 'per_day' }, ], }, ]; // ─── Photo placeholder ───────────────────────────────────────── const PHOTO_URL = 'https://www.van-away.com/wp-content/uploads/malaga-2p-1600x923-1-1024x591.png'; function PhotoPlaceholder({ hue = 180, label = 'VAN PHOTO' }) { return ( {label} ); } function CatIcon({ kind, size = 14 }) { const sp = { width:size, height:size, viewBox:'0 0 24 24', fill:'none', stroke:'currentColor', strokeWidth:1.8, strokeLinecap:'round', strokeLinejoin:'round' }; if (kind === 'VAN') return ; if (kind === 'FOURGON') return ; if (kind === 'ÉQUIPEMENT') return ; return null; } // ─── Vehicle card ────────────────────────────────────────────── function VehicleCard({ vehicle, days, startDate, index = 0, unavailable = false, onSelect, onShowDetails }) { const [visible, setVisible] = React.useState(false); const [photoIdx, setPhotoIdx] = React.useState(0); React.useEffect(() => { const t = setTimeout(() => setVisible(true), index * 80); return () => clearTimeout(t); }, [index]); const pricing = { '1-10': { basse: 90, moyenne: 120, haute: 150 }, '11-30': { basse: 85, moyenne: 100, haute: 140 }, '31+': { basse: 70, moyenne: 75, haute: 120 }, }; const bracket = days >= 31 ? pricing['31+'] : days >= 11 ? pricing['11-30'] : pricing['1-10']; const month = startDate ? new Date(startDate).getMonth() + 1 : 5; const season = (month >= 7 && month <= 8) ? 'haute' : ((month >= 4 && month <= 6) || month === 9) ? 'moyenne' : 'basse'; const dailyPrice = bracket[season]; const specs = []; if (vehicle.nb_places) specs.push({ icon: 'seats', text: `Jusqu’à ${vehicle.nb_places}` }); for (const e of (vehicle.custom_equipments || [])) specs.push({ icon: `custom_${e.icon}`, text: e.text }); if (vehicle.specificities?.cooling) specs.push({ icon: 'clim', text: 'Climatisation' }); if (vehicle.specificities?.gps) specs.push({ icon: 'gps', text: 'GPS' }); if (vehicle.gearbox) specs.push({ icon: 'gearbox', text: vehicle.gearbox }); const photos = [vehicle.photo_hue ?? 180, (vehicle.photo_hue ?? 180) + 40, (vehicle.photo_hue ?? 180) - 40]; const catLabel = vehicle.category_name === 'VAN' ? 'Campervans' : vehicle.category_name === 'FOURGON' ? 'Fourgons' : 'Équipements'; return (
!unavailable && setPhotoIdx((photoIdx + 1) % photos.length)}> {unavailable && (
Non disponible
)}
{/* Category pill — top-left of photo */}
{catLabel}
{photos.length > 1 && !unavailable && ( <>
{photos.map((_, i) => )}
)}

{vehicle.display_name}

{vehicle.tagline &&

{vehicle.tagline}

} {!unavailable && ( <>
À partir de
{dailyPrice} € /jour
Soit {dailyPrice * days} € pour {days} jours Assurance comprise · hors options
{e.preventDefault(); onShowDetails?.(vehicle.id);}}> Voir les détails
)} {unavailable && (
e.preventDefault()}> Voir les détails
)}
); } function SpecIcon({ kind }) { const sp = { width:16, height:16, viewBox:'0 0 24 24', fill:'none', stroke:T_TEAL, strokeWidth:2, strokeLinecap:'round' }; if (kind === 'seats') return ; if (kind === 'gearbox') return ; if (kind === 'fuel') return ; if (kind === 'clim') return ; if (kind === 'gps') return ; if (kind === 'bluetooth') return ; const paths = { bed: 'M3 7v10m0-4h18m0 4V11a2 2 0 00-2-2H7a2 2 0 00-2 2v0', kitchen: 'M12 2v6m0 0l3-3m-3 3L9 5M3 12h18M5 22V12m14 10V12M9 22v-4a3 3 0 016 0v4', shower: 'M12 3v3m0 0a3 3 0 013 3v1M8 22v-6a4 4 0 018 0v6', solar: 'M12 3v1m0 16v1M21 12h-1M4 12H3M16 12a4 4 0 11-8 0 4 4 0 018 0z', water: 'M12 2c-4 6-7 9-7 13a7 7 0 0014 0c0-4-3-7-7-13z', toilet: 'M6 3h12v4a6 6 0 01-12 0V3zm2 10h8l1 8H7l1-8z', roof: 'M3 21h18M5 21V9l7-6 7 6v12', }; const key = kind.startsWith('custom_') ? kind.slice(7) : kind; return ; } // ─── Search summary sidebar ──────────────────────────────────── function SearchSidebar({ search, onUpdate, compact = false }) { const [editing, setEditing] = React.useState(false); const [agencySearch, setAgencySearch] = React.useState(search.agencyName); const [showDropdown, setShowDropdown] = React.useState(false); const [selectedAgencyId, setSelectedAgencyId] = React.useState(search.startAgencyId); const [startDate, setStartDate] = React.useState(search.startDate); const [endDate, setEndDate] = React.useState(search.endDate); const [error, setError] = React.useState(''); const filtered = MOCK_AGENCIES.filter(a => { if (!agencySearch.trim()) return true; const q = agencySearch.toLowerCase(); return a.public_name.toLowerCase().includes(q) || a.city.toLowerCase().includes(q); }); const days = React.useMemo(() => { if (!startDate || !endDate) return 0; const s = new Date(startDate), e = new Date(endDate); return Math.max(0, Math.ceil((e - s) / 86400000)); }, [startDate, endDate]); const formatFR = (iso) => { if (!iso) return ''; const d = new Date(iso); return d.toLocaleDateString('fr-FR', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' }); }; function selectAgency(a) { setSelectedAgencyId(a.id); setAgencySearch(`${a.public_name} - ${a.city}`); setShowDropdown(false); } function submit() { if (!selectedAgencyId) { setError('Veuillez sélectionner une agence'); return; } if (!startDate || !endDate) { setError('Veuillez sélectionner vos dates'); return; } if (days < 2) { setError('La durée minimale de location est de 2 jours'); return; } const agency = MOCK_AGENCIES.find(a => a.id === selectedAgencyId); onUpdate({ startAgencyId: selectedAgencyId, agencyName: `${agency.public_name} - ${agency.city}`, startDate, endDate, }); setEditing(false); setError(''); } return ( ); } // ─── Main screen ─────────────────────────────────────────────── function VehiclesScreen({ compact = false }) { const [search, setSearch] = React.useState({ startAgencyId: 1, agencyName: 'Van-Away Bordeaux - Bordeaux', startDate: '2026-06-12', endDate: '2026-06-20', days: 8, }); const [activeCategory, setActiveCategory] = React.useState('all'); const [detailVehicleId, setDetailVehicleId] = React.useState(null); const updateSearch = (u) => { const s = new Date(u.startDate), e = new Date(u.endDate); const days = Math.max(0, Math.ceil((e - s) / 86400000)); setSearch({ ...search, ...u, days }); }; const categories = [ { id: 'all', name: 'TOUT' }, { id: 'VAN', name: 'VANS' }, { id: 'FOURGON', name: 'FOURGONS' }, { id: 'ÉQUIPEMENT', name: 'ÉQUIPEMENTS' }, ]; const filteredVehicles = activeCategory === 'all' ? MOCK_VEHICLES : MOCK_VEHICLES.filter(v => v.category_name === activeCategory); const filteredUnavail = activeCategory === 'all' ? UNAVAIL_VEHICLES : UNAVAIL_VEHICLES.filter(v => v.category_name === activeCategory); return ( <>
{categories.map(c => ( ))}
{!compact && }
{filteredVehicles.length > 0 && (
Disponibles pour vos dates
)}
{filteredVehicles.map((v, i) => ( console.log('select', id)} onShowDetails={(id)=>setDetailVehicleId(id)}/> ))}
{filteredUnavail.length > 0 && ( <>
{filteredUnavail.length} {filteredUnavail.length > 1 ? 'autres véhicules ne sont pas disponibles' : "autre véhicule n'est pas disponible"} pour ces dates
{filteredUnavail.map((v, i) => ( setDetailVehicleId(id)}/> ))}
)}
{compact && detailVehicleId !== null && (() => { const v = [...MOCK_VEHICLES, ...UNAVAIL_VEHICLES].find(x => x.id === detailVehicleId); if (!v) return null; const pricing = { '1-10':{basse:90,moyenne:120,haute:150}, '11-30':{basse:85,moyenne:100,haute:140}, '31+':{basse:70,moyenne:75,haute:120} }; const bracket = search.days <= 10 ? pricing['1-10'] : search.days <= 30 ? pricing['11-30'] : pricing['31+']; const month = search.startDate ? new Date(search.startDate).getMonth() + 1 : 5; const season = (month >= 7 && month <= 8) ? 'haute' : ((month >= 4 && month <= 6) || month === 9) ? 'moyenne' : 'basse'; return setDetailVehicleId(null)} onSelect={(id)=>{setDetailVehicleId(null); console.log('select', id);}}/>; })()}
{!compact && detailVehicleId !== null && (() => { const v = [...MOCK_VEHICLES, ...UNAVAIL_VEHICLES].find(x => x.id === detailVehicleId); if (!v) return null; const pricing = { '1-10':{basse:90,moyenne:120,haute:150}, '11-30':{basse:85,moyenne:100,haute:140}, '31+':{basse:70,moyenne:75,haute:120} }; const bracket = search.days <= 10 ? pricing['1-10'] : search.days <= 30 ? pricing['11-30'] : pricing['31+']; const month = search.startDate ? new Date(search.startDate).getMonth() + 1 : 5; const season = (month >= 7 && month <= 8) ? 'haute' : ((month >= 4 && month <= 6) || month === 9) ? 'moyenne' : 'basse'; return setDetailVehicleId(null)} onSelect={(id)=>{setDetailVehicleId(null); console.log('select', id);}}/>; })()} ); } Object.assign(window, { VehiclesScreen, VehicleCard, SearchSidebar }); Object.assign(window, { VehiclesScreenV1: VehiclesScreen, VehicleCardV1: VehicleCard, SearchSidebarV1: SearchSidebar }); })();