// recap-screen.jsx — Étape /recap // Récap final avant paiement. Iso fonctionnel RecapView.vue, restylé charte clear Van-Away. // Expose : RecapScreen // Tweaks : fidelity (iso/free), layout (single/sidebar/sections), ctaStrategy (dual/single/toggle), trustBlock, cautionStyle const R_TEAL = '#11978f'; const R_TEAL_HV = '#1c7d77'; const R_INK = '#042828'; const R_MUTED = '#5B7A82'; const R_CREAM = '#F4F2EC'; const R_SURFACE = '#FFFFFF'; const R_BORDER = 'rgba(4,40,40,0.08)'; const R_BORDER_S = 'rgba(4,40,40,0.14)'; const R_DANGER = '#C0392B'; const R_BG_TEAL = '#e7fcfb'; // ─── Mock data ──────────────────────────────────────────────── const RC_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 RC_SEARCH = { agencyName: 'Van-Away Bordeaux - Bordeaux', agencyAddress: '12 rue des Vignerons · 33000 Bordeaux', agencyPhone: '05 56 00 00 00', agencyEmail: 'bordeaux@van-away.com', startDate: '2026-07-12', endDate: '2026-07-20', days: 8 }; const RC_CONFIG = { mileageLabel: 'Confort', mileageKm: 200, mileageUnlimited: false, mileageAmount: 4.90, insuranceLabel: 'Confort', insuranceTagline: 'Recommandé', insuranceAmount: 14.90, insurancePerDay: true, insuranceFranchise: 1000, insuranceCaution: 1000 }; const RC_OPTIONS_INCLUDED = [ { id: 11, name: 'Kit lit (draps + couette)' }, { id: 12, name: 'Vaisselle de base' }]; const RC_OPTIONS_PAID = [ { id: 1, name: 'Conducteur supplémentaire', amount: 49, pricing: 'total', qty: 1 }, { id: 2, name: 'Pack vélos électriques', amount: 19.90, pricing: 'per_day', qty: 2 }, { id: 3, name: 'Pack apéro (table + chaises)', amount: 25, pricing: 'total', qty: 1 }]; const RC_CUSTOMER = { firstName: 'Téo', lastName: 'Marchand', email: 'teo@gmail.com', phone: '06 12 34 56 78', birthdate: '1992-03-14', address: '34 cours de la Marne', postcode: '33800', city: 'Bordeaux', country: 'France' }; const RC_PROMO = { code: 'SUMMER10', discount: 87 }; // ─── Helpers ────────────────────────────────────────────────── function rfmtPrice(n, dec = 2) { return (n ?? 0).toFixed(dec).replace('.', ',') + ' €'; } function rfmtDate(iso) { if (!iso) return ''; const d = new Date(iso); return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' }); } function rfmtDateLong(iso) { if (!iso) return ''; const d = new Date(iso); return d.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' }); } function computeTotals() { const v = RC_VEHICLE.pricePerDay * RC_SEARCH.days; const m = RC_CONFIG.mileageAmount * RC_SEARCH.days; const i = RC_CONFIG.insurancePerDay ? RC_CONFIG.insuranceAmount * RC_SEARCH.days : RC_CONFIG.insuranceAmount; const opts = RC_OPTIONS_PAID.reduce((s, o) => s + (o.pricing === 'per_day' ? o.amount * o.qty * RC_SEARCH.days : o.amount * o.qty), 0); const subtotal = v + m + i + opts; const discount = RC_PROMO.discount; const total = subtotal - discount; const tva = total * 0.20 / 1.20; const deposit = Math.round(total * 0.30 * 100) / 100; return { v, m, i, opts, subtotal, discount, total, tva, deposit }; } // ─── Atoms ──────────────────────────────────────────────────── function RCheck({ size = 14, color = R_TEAL }) { return ( ); } function REditLink({ onClick, label = 'Modifier' }) { return ( ); } // ─── Section header (numéroté, avec lien Modifier) ──────────── function SectionHead({ num, title, onEdit }) { return (
{num != null &&
{num}
}

{title}

{onEdit &&
}
); } // ─── Bloc voyage (agence + dates) ───────────────────────────── function TripBlock({ compact, fidelity }) { return (
Départ {rfmtDateLong(RC_SEARCH.startDate)} {RC_SEARCH.agencyName.split(' - ')[1] || RC_SEARCH.agencyName}
{RC_SEARCH.days} jours
Retour {rfmtDateLong(RC_SEARCH.endDate)} {RC_SEARCH.agencyName.split(' - ')[1] || RC_SEARCH.agencyName}
); } // ─── Bloc véhicule ──────────────────────────────────────────── function VehicleBlock({ compact, fidelity }) { return (
{RC_VEHICLE.display_name} {RC_VEHICLE.category_name}

{RC_VEHICLE.display_name}

{rfmtPrice(RC_VEHICLE.pricePerDay)} / jour × {RC_SEARCH.days} jours {rfmtPrice(RC_VEHICLE.pricePerDay * RC_SEARCH.days)}
); } // ─── Bloc kilométrage ───────────────────────────────────────── function MileageBlock() { const total = RC_CONFIG.mileageAmount * RC_SEARCH.days; return (
Forfait {RC_CONFIG.mileageLabel} {RC_CONFIG.mileageUnlimited ? 'Kilométrage illimité' : `${RC_CONFIG.mileageKm} km/jour`} {!RC_CONFIG.mileageUnlimited && ` · ${RC_CONFIG.mileageKm * RC_SEARCH.days} km inclus pour ${RC_SEARCH.days} jours`}
{RC_CONFIG.mileageAmount === 0 ? Inclus : <> {rfmtPrice(RC_CONFIG.mileageAmount)}/j {rfmtPrice(total)} }
); } // ─── Bloc assurance ─────────────────────────────────────────── function InsuranceBlock() { const total = RC_CONFIG.insurancePerDay ? RC_CONFIG.insuranceAmount * RC_SEARCH.days : RC_CONFIG.insuranceAmount; return (
Assurance {RC_CONFIG.insuranceLabel} {RC_CONFIG.insuranceTagline && {RC_CONFIG.insuranceTagline}} Franchise {rfmtPrice(RC_CONFIG.insuranceFranchise, 0)} · Caution {rfmtPrice(RC_CONFIG.insuranceCaution, 0)}
{rfmtPrice(RC_CONFIG.insuranceAmount)}/j {rfmtPrice(total)}
); } // ─── Bloc options ───────────────────────────────────────────── function OptionsBlock() { return (
{RC_OPTIONS_INCLUDED.map((o) =>
{o.name} Inclus
)} {RC_OPTIONS_PAID.map((o) => { const total = o.pricing === 'per_day' ? o.amount * o.qty * RC_SEARCH.days : o.amount * o.qty; return (
{o.name} {o.qty > 1 && ×{o.qty}} {o.pricing === 'per_day' && · {rfmtPrice(o.amount)}/jour} {rfmtPrice(total)}
); })}
); } // ─── Bloc client ────────────────────────────────────────────── function CustomerBlock() { const c = RC_CUSTOMER; return (
Nom {c.firstName} {c.lastName}
Email {c.email}
Téléphone {c.phone}
Adresse {c.address}, {c.postcode} {c.city}, {c.country}
); } // ─── Bloc caution (style "bloc dédié") ──────────────────────── function CautionBlock({ cautionStyle }) { if (cautionStyle === 'line') { return (
Caution Empreinte bancaire bloquée — restituée intégralement au retour.
{rfmtPrice(RC_CONFIG.insuranceCaution, 0)}
); } return (
Caution restituée au retour Une empreinte bancaire de {rfmtPrice(RC_CONFIG.insuranceCaution, 0)} sera bloquée à la prise du véhicule. Aucun débit n'est effectué — le montant est restitué intégralement après inspection au retour.
); } // ─── Bloc réassurance avant CTA ─────────────────────────────── function TrustBlock({ compact }) { const items = [ { icon: , title: 'Paiement 100% sécurisé', desc: 'Carte bancaire chiffrée via Stripe — leader européen.' }, { icon: , title: 'Paiement 100% sécurisé', desc: 'Transactions chiffrées · 3D Secure · CB / Visa / Mastercard.' }, { icon: , title: 'Paiement 100% sécurisé', desc: 'Transactions chiffrées · 3D Secure · CB / Visa / Mastercard.' }]; return (
{items.map((it, i) =>
{it.icon}
{it.title} {it.desc}
)}
); } // ─── Détail prix (utilisé en sidebar et bottom bar) ─────────── function PriceDetail({ totals, expandable }) { const [open, setOpen] = React.useState(!expandable); return (
{expandable && }
Véhicule · {RC_SEARCH.days}j{rfmtPrice(totals.v)}
Forfait km{rfmtPrice(totals.m)}
Assurance{rfmtPrice(totals.i)}
Options{rfmtPrice(totals.opts)}
{totals.discount > 0 &&
Code {RC_PROMO.code} −{rfmtPrice(totals.discount)}
}
Total TTC dont {rfmtPrice(totals.tva)} de TVA
{rfmtPrice(totals.total)}
); } // ─── Sidebar récap (layout B) ───────────────────────────────── function RecapSidebar({ totals, ctaStrategy, paymentMode, onChangePaymentMode }) { return ( ); } // ─── Boutons d'action (3 stratégies) ────────────────────────── function ActionButtons({ compact, totals, ctaStrategy, paymentMode, onChangePaymentMode, sidebar }) { const stack = sidebar || compact; if (ctaStrategy === 'dual') { return (
); } if (ctaStrategy === 'single') { return (
e.preventDefault()}>Préférer une demande de réservation sans paiement
); } // Mode "request" : demande de réservation sans paiement CB if (ctaStrategy === 'request') { return (

Aucun paiement à cette étape. Un acompte de {rfmtPrice(totals.deposit)} sera demandé après confirmation. Notre équipe revient vers vous sous 24h pour valider votre réservation.

); } // toggle mode return (
); } function ActionStyles() { return ( ); } // ─── Bottom bar (layout C) ──────────────────────────────────── function RecapBottomBar({ compact, totals, ctaStrategy, paymentMode, onChangePaymentMode }) { return (
Total TTC {rfmtPrice(totals.total)} dont {rfmtPrice(totals.tva)} de TVA
); } // ─── RecapScreen (main) ─────────────────────────────────────── function RecapScreen({ compact = false, tweaks = {} }) { const fidelity = tweaks.fidelity || 'free'; // iso | free const layout = tweaks.layout || 'sidebar'; // single | sidebar | sections const ctaStrategy = tweaks.ctaStrategy || 'dual'; // dual | single | toggle const trustBlock = tweaks.trustBlock !== false; // bool const cautionStyle = tweaks.cautionStyle || 'block'; // block | line const [paymentMode, setPaymentMode] = React.useState('pay'); const totals = React.useMemo(() => computeTotals(), []); // En mobile : on passe toujours en "sections + bottom bar" (layout C) const effectiveLayout = compact ? 'sections' : layout; const back = e.preventDefault()} className="va-rback"> Retour aux coordonnées ; const header = fidelity === 'free' ?
{back} Dernière étape avant le départ

Vous êtes prêt·e à prendre la route.

Une dernière vérification — puis on vous remet les clés.

{RC_SEARCH.days} jours {RC_SEARCH.agencyName.split(' - ')[1]} {RC_VEHICLE.display_name}
:
{back}

Récapitulatif de votre commande

Vérifiez les détails ci-dessous, puis confirmez votre réservation.

; // Sections (réutilisées par tous les layouts) const sections = <>
{}} />
{}} />
{}} />
{RC_OPTIONS_INCLUDED.length + RC_OPTIONS_PAID.length > 0 &&
{}} />
}
{}} />
{trustBlock &&
} ; // Layout A — colonne unique centrée + total inline + boutons if (effectiveLayout === 'single') { return ( <>
{header} {sections}
Montant total TTC {rfmtPrice(totals.total)}
Véhicule {rfmtPrice(totals.v)} · Km {rfmtPrice(totals.m)} · Assurance {rfmtPrice(totals.i)} · Options {rfmtPrice(totals.opts)}{totals.discount > 0 ? ` · Promo −${rfmtPrice(totals.discount)}` : ''} dont {rfmtPrice(totals.tva)} de TVA incluse
); } // Layout B — main + sidebar sticky (desktop only — mobile fallback C) if (effectiveLayout === 'sidebar') { return ( <>
{header} {sections}
); } // Layout C — sections + bottom bar sticky (default mobile, et option desktop) return ( <>
{header} {sections}
); } function RecapStyles() { return ( ); } Object.assign(window, { RecapScreen });