/* Voyage Assistant — shared UI pieces.
Wordmark, Nav, ThemeToggle, SearchBar, ModeCards, DestinationGrid, FAB.
All assume the icon globals from voyage-icons.jsx are loaded. */
const Wordmark = ({ size = 'md' }) => {
const fz = size === 'lg' ? 19 : size === 'sm' ? 14 : 17;
return (
Voyage· assistant
);
};
const ThemeToggle = ({ active = 'light' }) => (
);
const Nav = ({ bordered = false, theme = 'light' }) => (
);
const SearchBar = ({ values, compact = false }) => {
const v = values || {
from: { city: 'Paris', code: 'CDG · Gare de Lyon' },
to: { city: 'Marseille', code: 'MRS · Saint-Charles' },
date: { label: 'Sam. 13 juin', sub: '1 trajet' },
pax: { label: '2 voyageurs', sub: '1 adulte · 1 enfant' },
};
return (
{t('Départ')}
{v.from.city}
{!compact && {v.from.code}}
{t('Arrivée')}
{v.to.city}
{!compact && {v.to.code}}
{t('Date')}
{v.date.label}
{!compact && {v.date.sub}}
{t('Voyageurs')}
{v.pax.label}
{!compact && {v.pax.sub}}
);
};
const MODES = [
{ key: 'plane', label: 'Avion', sub: '450+ compagnies · 159 000 routes', meta: 'dès 49 €', Icon: IPlane },
{ key: 'train', label: 'Train', sub: 'SNCF · Eurostar · DB · Trenitalia · Renfe', meta: 'dès 19 €', Icon: ITrain },
{ key: 'ship', label: 'Bateau', sub: 'P&O · Brittany Ferries · Corsica Linea…', meta: 'dès 19 €', Icon: IShip },
{ key: 'bus', label: 'Bus', sub: 'FlixBus · BlaBlaBus · liaisons EU', meta: 'dès 5 €', Icon: IBus },
];
const ModeCards = ({ active = 'train' }) => (
{MODES.map(({ key, label, sub, meta, Icon }) => (
))}
{MODES.map(({ key, label, Icon }) => (
))}
);
const MODE_KEY_TO_API = { all: null, plane: 'avion', train: 'train', ship: 'bateau', bus: 'bus' };
const MODE_API_TO_KEY = { avion: 'plane', train: 'train', bateau: 'ship', bus: 'bus' };
const DestinationImg = ({ city, src }) => {
const fallback = `https://picsum.photos/seed/${encodeURIComponent(city)}/600/400`;
const [url, setUrl] = React.useState(src || fallback);
React.useEffect(() => { setUrl(src || fallback); }, [src]);
return (
setUrl(fallback)} />
);
};
/* Carousel dynamique — charge les destinations depuis le backend */
const DestinationsCarousel = ({ perPage = 4, onPick, depart = 'Paris' }) => {
const [destinations, setDestinations] = React.useState([]);
const [images, setImages] = React.useState({});
const [page, setPage] = React.useState(0);
const [loading, setLoading] = React.useState(true);
// Charge les destinations réelles depuis le backend
React.useEffect(() => {
setLoading(true);
fetch(`${window.VA_CONFIG.API_BASE}/trajets/destinations?depart=${encodeURIComponent(depart)}&limit=24`)
.then(r => r.json())
.then(data => {
setDestinations(Array.isArray(data) ? data : []);
setLoading(false);
})
.catch(() => {
setDestinations([]);
setLoading(false);
});
}, [depart]);
// Charge les images Pixabay pour les destinations visibles
React.useEffect(() => {
if (!destinations.length) return;
const start = page * perPage;
const visible = destinations.slice(start, start + perPage);
visible.forEach(d => {
if (images[d.ville]) return;
fetch(`${window.VA_CONFIG.API_BASE}/images?q=${encodeURIComponent(d.ville + ' city travel')}&mode=ville`)
.then(r => r.json())
.then(data => {
if (data.url) setImages(prev => ({ ...prev, [d.ville]: data.url }));
})
.catch(() => {});
});
}, [page, destinations]);
if (loading) return (
{t('Chargement des destinations…')}
);
if (!destinations.length) return null;
const pages = Math.ceil(destinations.length / perPage);
const visible = destinations.slice(page * perPage, page * perPage + perPage);
return (
{visible.map((d, i) => (
))}
{pages > 1 && (
{Array.from({ length: pages }).map((_, i) => (
))}
)}
);
};
const FAB = ({ label = t('Discuter avec l\u2019assistant') }) => (
);
/* Section: "Pourquoi Voyage" — value props row */
const ValueProps = () => (
{[
{ Icon: ICheck, title: 'Un seul billet', sub: 'Multi-mode, multi-compagnies' },
{ Icon: IShield, title: 'Garantie 0 stress', sub: 'Remboursement en 48 h' },
{ Icon: ISparkles, title: 'Assistant 24 / 7', sub: 'Retards, modifications, réclas' },
{ Icon: IGlobe, title: '3 000 destinations', sub: 'Europe, Afrique, Amériques, Asie' },
].map(({ Icon, title, sub }, i) => (
))}
{TRIP_TYPES.map((t) => {
const sel = (value || 'aller') === t.id;
return (
);
})}
);
const tripTypeLabel = (t) => window.t((TRIP_TYPES.find(x => x.id === t) || TRIP_TYPES[0]).label);
const isRoundTrip = (t) => t === 'aller_retour';
/* PaxStepper — popover avec +/- pour adultes / enfants / bébés */
const StepBtn = ({ onClick, disabled, children }) => (
);
const PaxStepper = ({ value, onChange, onValidate }) => {
const pax = normalizePax({ pax: value });
const set = (k, v) => onChange({ ...pax, [k]: Math.max(0, v) });
const seats = (pax.adultes || 0) + (pax.enfants || 0);
const Row = ({ label, sub, k, min = 0, capByseats = false }) => (
set(k, pax[k] - 1)} disabled={pax[k] <= min}>−
{pax[k]}
set(k, pax[k] + 1)} disabled={capByseats ? false : seats >= 9}>+
);
return (
|
|
|
{onValidate && (
)}
);
};
Object.assign(window, {
Wordmark, ThemeToggle, Nav,
SearchBar, MODES, ModeCards, ModeTabs,
DestinationGrid, DestinationsCarousel, FAB, ValueProps,
MODE_KEY_TO_API, MODE_API_TO_KEY,
CLASS_OPTIONS, BAG_OPTIONS, BAG_INCLUDED_LABEL, guessClassId,
normalizePax, paxCount, paxLabel, paxBreakdown,
computeBookingTotal, PaxStepper, StepBtn,
TRIP_TYPES, TripTypeTabs, tripTypeLabel, isRoundTrip,
});