// configure-screen.jsx — Étape /configure // Configuration de la location : kilométrage + assurance + sidebar panier. // Iso fonctionnel du ConfigureView.vue, restylé charte Van-Away clear (Barlow + teal). const T_TEAL = '#11978f'; const T_TEAL_HV = '#1c7d77'; 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_S = 'rgba(4,40,40,0.14)'; const T_DANGER = '#C0392B'; const T_BG_TEAL = '#e7fcfb'; // ─── Mock data ──────────────────────────────────────────────── const MOCK_VEHICLE = { id: 1, display_name: 'Volkswagen California Ocean', category_name: 'Campervans', brand: 'Volkswagen', model: 'California Ocean', nb_places: 4, gearbox: 'Automatique', energy: 'Diesel', pricePerDay: 120, picture: 'https://www.van-away.com/wp-content/uploads/malaga-2p-1600x923-1-1024x591.png' }; const MOCK_SEARCH = { agencyName: 'Van-Away Bordeaux - Bordeaux', startDate: '2026-07-12', endDate: '2026-07-20', days: 8 }; const MILEAGE_LEVELS = [ { id: 1, label: 'Eco', mileage: 100, unlimited: false, amount: 0, desc: 'Idéal pour de courts trajets et séjours statiques.' }, { id: 2, label: 'Confort', mileage: 200, unlimited: false, amount: 4.90, desc: 'Le bon compromis pour une semaine de roadtrip régional.' }, { id: 3, label: 'Liberté', mileage: 0, unlimited: true, amount: 9.90, desc: 'Roulez sans compter — la formule des grands itinéraires.', recommended: true }]; const INSURANCE_PACKAGES = [ { id: 1, name: 'Pack Standard', amount: 0, pricing_type: 'total', franchise: 2000, caution: 2000, highlights: null, tagline: 'La couverture incluse de série sur votre véhicule.', features: { tous_risques: 'Inclus', assistance: '24/7', conducteurs: '1 conducteur', franchise: '2 000 €', caution: '2 000 €', reparation_vitrage: 'Non', reparation_pneus: 'Non', remplacement_vitrage: 'Non', remplacement_pneus: 'Non' } }, { id: 2, name: 'Pack Sécurité', amount: 19, pricing_type: 'per_day', franchise: 900, caution: 1500, highlights: 'Recommandé', tagline: 'Le bon équilibre tranquillité / budget.', features: { tous_risques: 'Inclus', assistance: '24/7', conducteurs: '2 conducteurs', franchise: '900 €', caution: '1 500 €', reparation_vitrage: 'Inclus', reparation_pneus: 'Inclus', remplacement_vitrage: 'Non', remplacement_pneus: 'Non' } }, { id: 3, name: 'Pack Sérénité', amount: 39, pricing_type: 'per_day', franchise: 390, caution: 900, highlights: null, tagline: 'Zéro stress — vous voyagez la tête libre.', features: { tous_risques: 'Inclus', assistance: '24/7', conducteurs: 'Multi-conducteurs', franchise: '390 €', caution: '900 €', reparation_vitrage: 'Inclus', reparation_pneus: 'Inclus', remplacement_vitrage: 'Inclus', remplacement_pneus: 'Inclus' } }]; const COMPARE_ROWS = [ { key: 'tous_risques', label: 'Assurance tous risques' }, { key: 'assistance', label: 'Assistance 24/7' }, { key: 'conducteurs', label: 'Conducteurs' }, { key: 'franchise', label: 'Franchise' }, { key: 'caution', label: 'Caution' }, { key: 'reparation_vitrage', label: 'Réparation vitrage' }, { key: 'reparation_pneus', label: 'Réparation pneus' }, { key: 'remplacement_vitrage', label: 'Remplacement vitrage' }, { key: 'remplacement_pneus', label: 'Remplacement pneus' }]; // ─── Helpers ────────────────────────────────────────────────── function fmtPrice(n, dec = 2) { return (n ?? 0).toFixed(dec).replace('.', ',') + ' €'; } function fmtDate(iso) { if (!iso) return ''; const d = new Date(iso); return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' }); } function CheckIcon({ size = 14, color = T_TEAL }) { return ( ); } function CrossIcon({ size = 14, color = '#C0392B' }) { return ( ); } // Determines if a feature is "non couvert" / "non" -> show cross function isNegative(val) { if (!val) return true; const s = String(val).toLowerCase(); return s.startsWith('non') || s === '—'; } function isPositive(val) { if (!val) return false; const s = String(val).toLowerCase(); return s === 'inclus' || s.includes('inclus') || s === 'couvert' || s.startsWith('aucune') || s.startsWith('annulation'); } // ─── Mileage card (3 cards en grille) ────────────────────────── function MileageCard({ mileage, days, selected, onSelect, compact, cardStyle = 'v1' }) { const totalKm = mileage.unlimited ? '∞' : mileage.mileage * days; const pricePerDay = mileage.amount; const priceTotal = pricePerDay * days; const isFree = pricePerDay === 0; const isV2 = cardStyle === 'v2'; if (isV2) { return ( ); } return ( ); } // ─── Insurance card "forfait" (variante visuelle alignée sur MileageCard) ── function InsuranceCardLight({ pkg, days, selected, onSelect, compact }) { const isFree = pkg.amount === 0; const priceTotal = isFree ? 0 : pkg.pricing_type === 'per_day' ? pkg.amount * days : pkg.amount; // 4 features clés mises en avant dans la card (vs. 9 dans le tableau) const HIGHLIGHTS = [ { key: 'franchise', label: 'Franchise' }, { key: 'caution', label: 'Caution' }, { key: 'reparation_vitrage', label: 'Réparation vitrage' }, { key: 'remplacement_pneus', label: 'Remplacement pneus' }]; return ( ); } // ─── Insurance compare table (cards empilées + tableau comparatif) ── function InsuranceCompare({ packages, selectedId, onSelect, days, compact }) { return (
{/* Mode mobile : cards empilées simples */} {compact ?
{packages.map((pkg) => )}
: <> {/* En-tête : 3 colonnes packages */}
Comparez nos formules Choisissez votre niveau de couverture pour ce roadtrip.
{packages.map((pkg) => { const isSelected = selectedId === pkg.id; const isFree = pkg.amount === 0; const totalForTrip = isFree ? 0 : pkg.pricing_type === 'per_day' ? pkg.amount * days : pkg.amount; return ( ); })}
{/* Lignes comparatives */}
{COMPARE_ROWS.map((row, idx) =>
{row.label}
{packages.map((pkg) => { const v = pkg.features[row.key]; const neg = isNegative(v); const pos = isPositive(v); return (
{neg ? : } {v}
); })}
)}
CAUTION
{packages.map((pkg) =>
{fmtPrice(pkg.caution, 0)}
)}
}
); } function InsuranceMobileCard({ pkg, days, selected, onSelect }) { const isFree = pkg.amount === 0; const totalForTrip = isFree ? 0 : pkg.pricing_type === 'per_day' ? pkg.amount * days : pkg.amount; return ( ); } // ─── Cart sidebar (récap panier) ────────────────────────────── function CartSidebar({ vehicle, search, mileage, insurance, days, compact, ready, onContinue, tripCollapsible, options, included }) { const vPrice = vehicle.pricePerDay * days; const mPrice = (mileage?.amount || 0) * days; const iPrice = insurance ? insurance.pricing_type === 'per_day' ? insurance.amount * days : insurance.amount : 0; const opts = options || []; const optsTotal = opts.reduce((s, o) => s + (o.total || 0), 0); const incl = included || []; const total = vPrice + mPrice + iPrice + optsTotal; const tva = total * 0.2 / 1.2; const [tripOpen, setTripOpen] = React.useState(!tripCollapsible); return ( ); } // ─── Bottom bar (sticky, total + CTA) ────────────────────────── // `desktopHidden` : ne s'affiche qu'en mobile (compact). Sur desktop, le CTA // passe en bas de la sidebar (cf. ). function BottomBar({ total, days, ready, onContinue, compact, desktopHidden }) { if (desktopHidden && !compact) return null; const tva = total * 0.2 / 1.2; return (
Total pour {days} jours {fmtPrice(total)} dont {fmtPrice(tva)} de TVA
); } // ─── Mileage segmented control (tweak alt) ──────────────────── function MileageSegmented({ levels, selectedId, onSelect, days, compact }) { const sel = levels.find((l) => l.id === selectedId) || levels[0]; const totalKm = sel.unlimited ? '∞' : sel.mileage * days; const priceTotal = (sel.amount || 0) * days; return (
{levels.map((l) => )}
Total inclus {sel.unlimited ? 'Illimité' : `${totalKm} km`}
Pour {days} jours {sel.amount === 0 ? 'Inclus' : fmtPrice(priceTotal)}
{sel.desc}
); } // ─── Cart sidebar minimal (tweak alt) ───────────────────────── function CartSidebarMinimal({ vehicle, search, mileage, insurance, days, ready, onContinue }) { const vPrice = vehicle.pricePerDay * days; const mPrice = (mileage?.amount || 0) * days; const iPrice = insurance ? insurance.pricing_type === 'per_day' ? insurance.amount * days : insurance.amount : 0; const total = vPrice + mPrice + iPrice; return ( ); } // ─── Configure screen (main) ────────────────────────────────── function ConfigureScreen({ compact = false, tweaks = {} }) { const sidebarStyle = tweaks.sidebarStyle || 'detailed'; const mileagePresentation = tweaks.mileagePresentation || 'cards'; const mileageCardStyle = tweaks.mileageCardStyle || 'v1'; const insurancePresentation = tweaks.insurancePresentation || 'compare'; const trustStyle = tweaks.trustStyle || 'unified'; const [selectedMileageId, setSelectedMileageId] = React.useState(2); const [selectedInsuranceId, setSelectedInsuranceId] = React.useState(2); const days = MOCK_SEARCH.days; const selectedMileage = MILEAGE_LEVELS.find((m) => m.id === selectedMileageId); const selectedInsurance = INSURANCE_PACKAGES.find((p) => p.id === selectedInsuranceId); const ready = !!selectedMileage && !!selectedInsurance; const vPrice = MOCK_VEHICLE.pricePerDay * days; const mPrice = (selectedMileage?.amount || 0) * days; const iPrice = selectedInsurance ? selectedInsurance.pricing_type === 'per_day' ? selectedInsurance.amount * days : selectedInsurance.amount : 0; const total = vPrice + mPrice + iPrice; return ( <>
e.preventDefault()} className="va-conf-back-link"> Retour aux véhicules

Configurez votre location

Plus que deux étapes — kilométrage et assurance — et vous prenez la route.

{/* Section kilométrage */}
1

Sélectionnez votre forfait kilométrique

Estimez votre itinéraire : il vaut mieux prendre le forfait juste au-dessus que payer les km en supplément.

{mileagePresentation === 'segmented' ? :
{MILEAGE_LEVELS.map((ml) => )}
}
{/* Section assurance */}
2

Choisissez votre formule d'assurance

Comparez les niveaux de couverture et trouvez celui qui correspond à votre voyage.

{insurancePresentation === 'cards' ?
{INSURANCE_PACKAGES.map((pkg) => )}
: } {/* Bandeau Assurance annulation (offert sur tous les packs) */}
Assurance annulation Annulez jusqu'à 10 jours avant le début de votre location pour être remboursé de votre acompte. En cas de retour anticipé, vous récupérez 50 % du montant des jours restants en avoir.
{trustStyle === 'split' ?
Allianz Votre assureur

Couverture tous risques pour votre van pendant toute la durée de la location.

  • Premier assureur européen
  • Plus de 130 ans d'expérience
  • Présent dans 70 pays
AXA Assistance Votre assistance

Une équipe joignable jour et nuit en cas de pépin sur la route quelque soit votre destination.

  • Disponible 24h/24, 7j/7
  • Dépannage partout en Europe
  • Rapatriement véhicule inclus
:
Vos partenaires de confiance

Une couverture premium, garantie par les leaders européens.

Allianz Assureur
AXA Assistance Assistance
  • Premier assureur européen
  • Assistance 24/7 toute l'Europe
  • Dépannage & rapatriement inclus
  • 100 ans d'expérience
}
{/* Mobile : sidebar inline avant le bottom bar */} {compact &&
}
{!compact && }
{}} compact={compact} desktopHidden /> ); } Object.assign(window, { ConfigureScreen, BottomBar, CartSidebar, CartSidebarMinimal, MileageCard, MileageSegmented, InsuranceCompare, T_TEAL, T_INK, T_MUTED, T_CREAM, T_SURFACE, T_BORDER });