// options-screen.jsx — Étape /options
// Extras transverses (services + accessoires) avec quantité.
// Iso fonctionnel d'OptionsView.vue, restylé charte Van-Away clear.
const TO_TEAL = '#11978f';
const TO_TEAL_HV = '#1c7d77';
const TO_INK = '#042828';
const TO_MUTED = '#5B7A82';
const TO_CREAM = '#F4F2EC';
const TO_SURFACE = '#FFFFFF';
const TO_BORDER = 'rgba(4,40,40,0.08)';
const TO_BORDER_S = 'rgba(4,40,40,0.14)';
const TO_BG_TEAL = '#e7fcfb';
// ─── Mock data : on hérite vehicle + search depuis ConfigureScreen, et on présume mileage+insurance déjà choisis
const OPT_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 OPT_MOCK_SEARCH = {
agencyName: 'Van-Away Bordeaux - Bordeaux',
startDate: '2026-07-12',
endDate: '2026-07-20',
days: 8
};
const OPT_MOCK_MILEAGE = { id: 2, label: 'Confort', mileage: 200, unlimited: false, amount: 4.90 };
const OPT_MOCK_INSURANCE = { id: 2, name: 'Confort', amount: 14.90, pricing_type: 'per_day' };
// SVG inline icons (catégorie / option type) — petites illustrations bord teal
const optIcon = (kind, color = TO_TEAL) => {
const common = { width: 28, height: 28, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
switch (kind) {
case 'driver':return ;
case 'sparkles':return ;
case 'truck':return ;
case 'paw':return ;
case 'shield':return ;
case 'gps':return ;
case 'table':return ;
case 'crib':return ;
case 'utensil':return ;
case 'roof':return ;
case 'bike':return ;
case 'wifi':return ;
case 'snow':return ;
case 'sleep':return ;
default:return ;
}
};
// ─── Mock options — services + accessoires, comme Van-Away réel
const SERVICE_OPTIONS = [
{
id: 101, name: 'Conducteur supplémentaire', icon: 'driver',
desc: 'Ajoutez un second conducteur autorisé pour partager les longues étapes.',
amount: 49, pricing_type: 'per_trip', count: 2
},
{
id: 102, name: 'Nettoyage final', icon: 'sparkles',
desc: 'On s\'occupe du grand ménage. Vous rendez le van comme vous voulez.',
amount: 89, pricing_type: 'per_trip', count: 1, popular: true
},
{
id: 103, name: 'Transfert depuis l\'aéroport', icon: 'truck',
desc: 'Navette aller-retour entre l\'agence et l\'aéroport / gare la plus proche.',
amount: 35, pricing_type: 'per_trip', count: 1
},
{
id: 104, name: 'Voyage avec animal', icon: 'paw',
desc: 'Forfait nettoyage spécifique. Toutous bienvenus à bord.',
amount: 39, pricing_type: 'per_trip', count: 1
},
{
id: 105, name: 'Assurance annulation', icon: 'shield',
desc: 'Annulez sans frais jusqu\'à 48h avant le départ — peu importe la raison.',
amount: 4.90, pricing_type: 'per_day', count: 1
}];
const ACCESSORY_OPTIONS = [
{
id: 201, name: 'Table de pique-nique + 4 chaises', icon: 'table',
desc: 'Le set complet pour les pauses déjeuner face à la mer ou à la montagne.',
amount: 4.90, pricing_type: 'per_day', count: 1, popular: true
},
{
id: 202, name: 'GPS dédié camping-car', icon: 'gps',
desc: 'Évitez les routes étroites et les ponts trop bas. Spécial gabarit van.',
amount: 3.90, pricing_type: 'per_day', count: 1
},
{
id: 203, name: 'Lit enfant', icon: 'crib',
desc: 'Lit d\'appoint pliable pour les petits voyageurs (jusqu\'à 4 ans).',
amount: 5.90, pricing_type: 'per_day', count: 2
},
{
id: 204, name: 'Pack vaisselle complet', icon: 'utensil',
desc: 'Assiettes, couverts, verres, tasses, casseroles. Tout est prêt.',
amount: 19, pricing_type: 'per_trip', count: 1
},
{
id: 205, name: 'Coffre de toit', icon: 'roof',
desc: 'Pour ranger les sacs encombrants et libérer l\'espace de vie à l\'intérieur.',
amount: 6.90, pricing_type: 'per_day', count: 1
},
{
id: 206, name: 'Porte-vélos arrière', icon: 'bike',
desc: 'Capacité 2 vélos. Crochets sécurisés et antivol fournis.',
amount: 5.90, pricing_type: 'per_day', count: 1
}];
// helpers (locaux pour ne pas écraser ceux de configure-screen)
function optFmt(n, dec = 2) {
return (n ?? 0).toFixed(dec).replace('.', ',') + ' €';
}
function OptCheck({ size = 14, color = '#fff' }) {
return (
);
}
// ─── Option card ──────────────────────────────────────────────
function OptionCard({ option, quantity, days, onChange }) {
const isActive = quantity > 0;
const hasMultiple = (option.count ?? 1) > 1;
const max = option.count ?? 1;
const isPerDay = option.pricing_type === 'per_day';
const totalForTrip = isPerDay ? option.amount * days * Math.max(1, quantity || 1) : option.amount * Math.max(1, quantity || 1);
const totalIfOne = isPerDay ? option.amount * days : option.amount;
function toggle() {
if (hasMultiple) {
onChange(quantity >= max ? 0 : quantity + 1);
} else {
onChange(isActive ? 0 : 1);
}
}
function inc() {if (quantity < max) onChange(quantity + 1);}
function dec() {if (quantity > 0) onChange(quantity - 1);}
return (
{option.popular &&
Populaire}
{optIcon(option.icon)}
{option.name}
{option.desc}
{optFmt(option.amount)}
{isPerDay ? '/ jour' : '/ séjour'}
{isPerDay &&
soit {optFmt(totalIfOne)} pour {days} j
}
{hasMultiple ?
{quantity}
:
}
{selectedCount > 0 &&
{selectedCount} sélectionné{selectedCount > 1 ? 's' : ''}
}
{options.map((opt) =>
onChange(opt.id, q)} />
)}
);
}
// ─── Sticky options summary card (sidebar add-on) ──────────────
function OptionsRecap({ services, accessories, quantities, days }) {
const allOpts = [...services, ...accessories];
const selected = allOpts.filter((o) => (quantities[o.id] || 0) > 0);
if (selected.length === 0) {
return (
Vos options
Aucune option sélectionnée pour le moment.
);
}
return (
Vos options
{selected.length}
{selected.map((o) => {
const q = quantities[o.id] || 0;
const isPerDay = o.pricing_type === 'per_day';
const total = isPerDay ? o.amount * days * q : o.amount * q;
return (
-
{optIcon(o.icon)}
{o.name}{q > 1 && × {q}}
{optFmt(total)}
);
})}
);
}
// ─── Main screen ──────────────────────────────────────────────
function OptionsScreen({ compact = false, tweaks = {} }) {
const sidebarStyle = tweaks.sidebarStyle || 'detailed';
const [quantities, setQuantities] = React.useState({
102: 1, // nettoyage final pré-coché (pattern fréquent)
201: 1 // table pique-nique pré-coché
});
function setQty(id, q) {
setQuantities((prev) => {
const next = { ...prev };
if (q <= 0) delete next[id];else
next[id] = q;
return next;
});
}
const days = OPT_MOCK_SEARCH.days;
// Totaux
const vPrice = OPT_MOCK_VEHICLE.pricePerDay * days;
const mPrice = OPT_MOCK_MILEAGE.amount * days;
const iPrice = OPT_MOCK_INSURANCE.pricing_type === 'per_day' ? OPT_MOCK_INSURANCE.amount * days : OPT_MOCK_INSURANCE.amount;
const allOpts = [...SERVICE_OPTIONS, ...ACCESSORY_OPTIONS];
const selectedOpts = allOpts.
filter((o) => (quantities[o.id] || 0) > 0).
map((o) => {
const q = quantities[o.id] || 0;
const t = o.pricing_type === 'per_day' ? o.amount * days * q : o.amount * q;
return { name: o.name, qty: q, total: t };
});
const oPrice = selectedOpts.reduce((s, o) => s + o.total, 0);
const total = vPrice + mPrice + iPrice + oPrice;
// Liste d'éléments inclus (pattern Van-Away — ce que la maquette de Téo affichait en "OFFERT")
const INCLUDED_LIST = [
'Assurance et l\'Assistance',
'Parking gratuit en agence',
'Abonnement France Passion',
'Abonnement Park4night+'];
// Cards count for header chip
const totalAvailable = SERVICE_OPTIONS.length + ACCESSORY_OPTIONS.length;
const totalSelected = Object.values(quantities).reduce((s, n) => s + n, 0);
return (
<>
{totalSelected > 0 && (
{totalSelected} option{totalSelected > 1 ? 's' : ''} ajoutée{totalSelected > 1 ? 's' : ''}
)}
Personnalisez votre voyage
Toutes les options sont facultatives — sélectionnez seulement ce qui rendra votre roadtrip plus confortable.
{/* Services */}
{/* Accessoires */}
{/* Note bas de page — rappel discret */}
Les services et accessoires sont modifiable jusqu'à 48 h avant le départ depuis votre espace client.
{/* Mobile : sidebar inline */}
{compact &&
}
{!compact &&
}
{}}
compact={compact}
desktopHidden={true} />
);
}
Object.assign(window, { OptionsScreen });