/**
* mypro.ch · app.central — Application réservation client (4 étapes)
*
* Étape 1 : Trajet (origine, destination, date, heure, passagers, bagages)
* Étape 2 : Véhicule (sélection gamme + prix)
* Étape 3 : Coordonnées (client + paiement)
* Étape 4 : Confirmation (récap → POST /public/bookings)
*/
const { useState, useEffect, useRef, useCallback, useMemo, useLayoutEffect } = React;
const { createPortal } = ReactDOM;
const cfg = window.MyProConfig;
const api = window.MyProApi;
const Maps = window.MyProMaps;
/* ─────────────────────────────────────────────────────────────────────────
DatePicker / TimePicker (cf DOCS/APIS/ULTIME_DESIGN_ELEMENTS.md)
Portail vers document.body pour ne jamais être clippé.
─────────────────────────────────────────────────────────────────────── */
const LANG = (typeof navigator !== 'undefined' && navigator.language) || 'fr';
const localizedMonthName = (lang, monthIndex) => {
try {
const d = new Date(2000, monthIndex, 1);
const name = new Intl.DateTimeFormat(lang, { month: 'long' }).format(d);
return name.charAt(0).toUpperCase() + name.slice(1);
} catch (e) {
return ['Jan','Fév','Mar','Avr','Mai','Juin','Juil','Août','Sep','Oct','Nov','Déc'][monthIndex];
}
};
const localizedDayShort = (lang, dayIndex) => {
try {
const d = new Date(2024, 0, 1 + dayIndex);
const name = new Intl.DateTimeFormat(lang, { weekday: 'short' }).format(d).replace(/\.$/, '');
return name.charAt(0).toUpperCase() + name.slice(1);
} catch (e) {
return ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'][dayIndex];
}
};
const getDefaultTime = () => {
const now = new Date();
const m = now.getMinutes();
let nextQ = Math.ceil((m + 1) / 15) * 15;
let h = now.getHours();
if (nextQ >= 60) { h++; nextQ = 0; }
if (h >= 24) { h = 0; }
return String(h).padStart(2, '0') + ':' + String(nextQ).padStart(2, '0');
};
/** Hook commun : pilote l'ouverture + calcul des coords du popover en fixed/portal. */
function usePopoverPosition(open, setOpen, { width = 360, estHeight = 360, position = 'auto' } = {}) {
const btnRef = useRef(null);
const popRef = useRef(null);
const [coords, setCoords] = useState(null);
const computePosition = useCallback(() => {
const btn = btnRef.current;
if (!btn) return;
const r = btn.getBoundingClientRect();
const spaceBelow = window.innerHeight - r.bottom;
const spaceAbove = r.top;
const wantTop = position === 'top'
|| (position === 'auto' && spaceBelow < estHeight && spaceAbove > spaceBelow);
let left = r.left;
const w = Math.min(width, window.innerWidth - 16);
if (left + w > window.innerWidth - 8) {
left = Math.max(8, window.innerWidth - w - 8);
}
setCoords({
top: wantTop ? r.top - 8 : r.bottom + 8,
left,
btnWidth: r.width,
placement: wantTop ? 'top' : 'bottom',
});
}, [width, estHeight, position]);
useLayoutEffect(() => {
if (!open) { setCoords(null); return; }
computePosition();
const onScroll = () => computePosition();
window.addEventListener('scroll', onScroll, true);
window.addEventListener('resize', onScroll);
return () => {
window.removeEventListener('scroll', onScroll, true);
window.removeEventListener('resize', onScroll);
};
}, [open, computePosition]);
useEffect(() => {
if (!open) return;
const onClick = (e) => {
const t = e.target;
if (btnRef.current?.contains(t)) return;
if (popRef.current?.contains(t)) return;
setOpen(false);
};
document.addEventListener('mousedown', onClick);
return () => document.removeEventListener('mousedown', onClick);
}, [open, setOpen]);
return { btnRef, popRef, coords };
}
function PickerButton({ open, icon, value, placeholder, onClick, btnRef }) {
const accent = 'var(--color-primary, #B8956B)';
return (
);
}
function DatePicker({ value, onChange, minDate, placeholder = 'Choisir une date' }) {
const [open, setOpen] = useState(false);
const today = new Date(); today.setHours(0, 0, 0, 0);
const initial = value ? new Date(value + 'T00:00:00') : today;
const [viewYear, setViewYear] = useState(initial.getFullYear());
const [viewMonth, setViewMonth] = useState(initial.getMonth());
const { btnRef, popRef, coords } = usePopoverPosition(open, setOpen, { width: 360, estHeight: 380 });
const monthNames = useMemo(() => Array.from({ length: 12 }, (_, i) => localizedMonthName(LANG, i)), []);
const dayNames = useMemo(() => Array.from({ length: 7 }, (_, i) => localizedDayShort(LANG, i)), []);
const todayStr = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0');
const minStr = minDate || todayStr;
const firstDay = new Date(viewYear, viewMonth, 1);
let startDay = firstDay.getDay() - 1; if (startDay < 0) startDay = 6;
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
const cells = [];
for (let i = 0; i < startDay; i++) cells.push(null);
for (let d = 1; d <= daysInMonth; d++) cells.push(d);
const accent = 'var(--color-primary, #B8956B)';
const accentDark = 'var(--color-primary-dark, #A07D55)';
const selectDay = (d) => {
const v = viewYear + '-' + String(viewMonth + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0');
onChange(v);
setOpen(false);
};
const prevMonth = () => {
if (viewMonth === 0) { setViewMonth(11); setViewYear(viewYear - 1); }
else setViewMonth(viewMonth - 1);
};
const nextMonth = () => {
if (viewMonth === 11) { setViewMonth(0); setViewYear(viewYear + 1); }
else setViewMonth(viewMonth + 1);
};
const formatDisplay = (v) => {
if (!v) return null;
const p = v.split('-');
return p[2] + '/' + p[1] + '/' + p[0];
};
const popover = open && coords ? (
{monthNames[viewMonth]} {viewYear}
{dayNames.map((dn, i) => (
{dn}
))}
{cells.map((d, i) => {
if (!d) return
;
const dateStr = viewYear + '-' + String(viewMonth + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0');
const isSelected = dateStr === value;
const isToday = dateStr === todayStr;
const isPast = dateStr < minStr;
return (
);
})}
) : null;
return (
setOpen(!open)} btnRef={btnRef} />
{popover && createPortal(popover, document.body)}
);
}
function TimePicker({ value, onChange, placeholder = 'Choisir une heure' }) {
const [open, setOpen] = useState(false);
const { btnRef, popRef, coords } = usePopoverPosition(open, setOpen, { width: 200, estHeight: 240 });
const listRef = useRef(null);
useEffect(() => { if (!value) onChange(getDefaultTime()); }, []);
useEffect(() => {
if (open && listRef.current && value) {
const container = listRef.current;
const slots = container.children;
for (let i = 0; i < slots.length; i++) {
if (slots[i].dataset.slot === value) {
const target = slots[i];
container.scrollTop = target.offsetTop - (container.clientHeight / 2) + (target.clientHeight / 2);
break;
}
}
}
}, [open, coords]);
const slots = useMemo(() => {
const s = [];
for (let hh = 0; hh < 24; hh++) {
for (let mm = 0; mm < 60; mm += 15) {
s.push(String(hh).padStart(2, '0') + ':' + String(mm).padStart(2, '0'));
}
}
return s;
}, []);
const accent = 'var(--color-primary, #B8956B)';
const accentDark = 'var(--color-primary-dark, #A07D55)';
const popover = open && coords ? (
{ popRef.current = el; listRef.current = el; }}
style={{
position: 'fixed',
top: coords.placement === 'top' ? undefined : coords.top,
bottom: coords.placement === 'top' ? window.innerHeight - coords.top : undefined,
left: coords.left,
width: Math.max(coords.btnWidth || 200, 180),
maxWidth: 'calc(100vw - 16px)',
background: '#fff', borderRadius: 16,
border: '2px solid #f1f5f9', zIndex: 1000,
boxShadow: coords.placement === 'top'
? '0 -10px 40px rgba(0,0,0,0.18)'
: '0 10px 40px rgba(0,0,0,0.18)',
maxHeight: 240, overflowY: 'auto',
}}>
{slots.map((slot) => {
const isSelected = slot === value;
return (
);
})}
) : null;
return (
setOpen(!open)} btnRef={btnRef} />
{popover && createPortal(popover, document.body)}
);
}
/* ─────────────────────────────────────────────────────────────────────────
Carte Leaflet — look Google Maps
- Tuiles CARTO Voyager (rendu street très proche de Google Maps)
- Pins SVG style Google (rouge A / vert B) avec ombre douce
- Polyline bleu Google #4285F4 + halo blanc en dessous
─────────────────────────────────────────────────────────────────────── */
// Couleurs Google Maps officielles
const GMAP_BLUE = '#4285F4';
const GMAP_RED = '#EA4335';
const GMAP_GREEN = '#34A853';
function googlePinSvg(letter, color) {
return (
''
);
}
function MapView({ origin, destination, polyline, center, zoom }) {
const ref = useRef(null);
const mapRef = useRef(null);
const tileRef = useRef(null);
const layersRef = useRef({ origin: null, dest: null, line: null, halo: null });
const [layerType, setLayerType] = useState(() => localStorage.getItem('mypro_map_type') || 'google');
useEffect(() => {
if (!ref.current || mapRef.current) return;
const map = L.map(ref.current, {
zoomControl: false,
attributionControl: true,
scrollWheelZoom: true,
zoomSnap: 0.5,
}).setView(center || cfg.DEFAULT_CENTER, zoom || cfg.DEFAULT_ZOOM);
const layer = (cfg.TILE_LAYERS && cfg.TILE_LAYERS[layerType]) || { url: cfg.TILE_URL, attribution: cfg.TILE_ATTR };
tileRef.current = L.tileLayer(layer.url, {
attribution: layer.attribution,
maxZoom: 20,
detectRetina: true,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
}).addTo(map);
L.control.zoom({ position: 'bottomright' }).addTo(map);
mapRef.current = map;
// Fix Leaflet "tuiles grises" — le container n'a souvent pas sa taille
// finale au mount. On force le recalcul plusieurs fois pendant le layout.
const invalidate = () => map.invalidateSize();
requestAnimationFrame(invalidate);
setTimeout(invalidate, 100);
setTimeout(invalidate, 350);
setTimeout(invalidate, 800);
// Observer les changements de taille du container (responsive, sidebar, etc.)
let ro = null;
if (typeof ResizeObserver !== 'undefined') {
ro = new ResizeObserver(() => map.invalidateSize());
ro.observe(ref.current);
}
window.addEventListener('resize', invalidate);
return () => {
window.removeEventListener('resize', invalidate);
if (ro) ro.disconnect();
};
}, []);
// Switch de couche
useEffect(() => {
const map = mapRef.current;
if (!map || !cfg.TILE_LAYERS) return;
const layer = cfg.TILE_LAYERS[layerType] || cfg.TILE_LAYERS.google;
if (tileRef.current) map.removeLayer(tileRef.current);
tileRef.current = L.tileLayer(layer.url, {
attribution: layer.attribution,
maxZoom: 20,
detectRetina: true,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
}).addTo(map);
localStorage.setItem('mypro_map_type', layerType);
}, [layerType]);
useEffect(() => {
const map = mapRef.current;
if (!map) return;
const layers = layersRef.current;
['origin', 'dest', 'line', 'halo'].forEach(k => {
if (layers[k]) { map.removeLayer(layers[k]); layers[k] = null; }
});
const makeIcon = (letter, color) => L.divIcon({
className: 'gmap-pin',
html: googlePinSvg(letter, color),
iconSize: [32, 44],
iconAnchor: [16, 42],
popupAnchor: [0, -38],
});
const bounds = [];
if (origin?.lat) {
layers.origin = L.marker([origin.lat, origin.lng], {
icon: makeIcon('A', GMAP_GREEN),
}).addTo(map);
bounds.push([origin.lat, origin.lng]);
}
if (destination?.lat) {
layers.dest = L.marker([destination.lat, destination.lng], {
icon: makeIcon('B', GMAP_RED),
}).addTo(map);
bounds.push([destination.lat, destination.lng]);
}
if (polyline) {
const coords = Maps.decodePolyline(polyline);
if (coords.length > 1) {
// Halo blanc (effet "border") sous le tracé bleu — c'est ce qui donne le look Google
layers.halo = L.polyline(coords, {
color: '#ffffff', weight: 9, opacity: 1, lineCap: 'round', lineJoin: 'round',
}).addTo(map);
layers.line = L.polyline(coords, {
color: GMAP_BLUE, weight: 5, opacity: 1, lineCap: 'round', lineJoin: 'round',
}).addTo(map);
coords.forEach(c => bounds.push(c));
}
}
if (bounds.length === 1) map.setView(bounds[0], 14);
else if (bounds.length > 1) map.fitBounds(bounds, { padding: [50, 50], maxZoom: 16 });
else if (center) map.setView(center, zoom || cfg.DEFAULT_ZOOM);
}, [origin, destination, polyline, center && center[0], center && center[1], zoom]);
const LAYERS = [
{ id: 'google', label: 'Plan', icon: 'fa-map' },
{ id: 'satellite', label: 'Satellite', icon: 'fa-satellite' },
{ id: 'hybrid', label: 'Hybride', icon: 'fa-layer-group' },
];
return (
{LAYERS.map(l => (
))}
);
}
/* ─────────────────────────────────────────────────────────────────────────
Champ adresse avec autocomplete (api.maps.swissapp.net /place)
─────────────────────────────────────────────────────────────────────── */
function AddressInput({ value, onChange, placeholder, icon = 'fa-location-dot' }) {
const [text, setText] = useState(value?.label || '');
const [suggestions, setSuggestions] = useState([]);
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const debounceRef = useRef(null);
useEffect(() => { setText(value?.label || ''); }, [value?.label]);
const onTextChange = (q) => {
setText(q);
if (debounceRef.current) clearTimeout(debounceRef.current);
if (q.length < 3) { setSuggestions([]); setOpen(false); return; }
setLoading(true);
debounceRef.current = setTimeout(async () => {
const res = await Maps.autocomplete(q);
setSuggestions(res);
setOpen(true);
setLoading(false);
}, 250);
};
const select = async (s) => {
setOpen(false);
setText(s.label);
const geo = await Maps.geocode(s.label);
onChange({ label: s.label, ...(geo || {}) });
};
return (
onTextChange(e.target.value)}
onFocus={() => suggestions.length > 0 && setOpen(true)}
onBlur={() => setTimeout(() => setOpen(false), 150)}
/>
{loading && }
{open && suggestions.length > 0 && (
{suggestions.map((s, i) => (
select(s)}>
{s.main}
{s.secondary &&
{s.secondary}
}
))}
)}
);
}
/* ─────────────────────────────────────────────────────────────────────────
Stepper
─────────────────────────────────────────────────────────────────────── */
function Stepper({ step }) {
const steps = ['Trajet', 'Véhicule', 'Coordonnées', 'Confirmation'];
return (
{steps.map((label, i) => {
const idx = i + 1;
const cls = idx === step ? 'active' : (idx < step ? 'done' : '');
return (
{idx < step ? : idx}
{label}
{idx < steps.length && }
);
})}
setBooking({ ...booking, origin: v })}
placeholder="Adresse de départ"
icon="fa-circle-dot"
/>
setBooking({ ...booking, destination: v })}
placeholder="Adresse d'arrivée"
icon="fa-location-dot"
/>
setBooking({ ...booking, date: v })}
minDate={new Date().toISOString().slice(0, 10)}
/>
setBooking({ ...booking, time: v })}
/>
{error &&
{error}
}
{route && (
{route.distance_text}
{route.duration_text}
)}
);
}
/* ─────────────────────────────────────────────────────────────────────────
Étape 2 : Véhicule
─────────────────────────────────────────────────────────────────────── */
function StepVehicle({ booking, setBooking, ranges, route, onBack, onNext }) {
const distanceKm = (route?.distance_m || 0) / 1000;
const durationMin = (route?.duration_s || 0) / 60;
const computePrice = (range) => {
const basePrice = range.base_price ?? 0;
const ppk = range.cp_price_per_km ?? range.range_price_per_km ?? 0;
const ppm = range.price_per_minute ?? 0;
const pph = range.price_per_hour ?? 0;
const min = range.minimum_price ?? range.price_minimum ?? 0;
let p = basePrice + (distanceKm * ppk) + (durationMin * ppm);
// Fallback "tarif horaire" si aucun prix au km/min n'est défini (mode disposition)
if (p === 0 && pph > 0 && durationMin > 0) {
p = (durationMin / 60) * pph;
}
if (p < min) p = min;
return Math.round(p * 100) / 100;
};
const select = (range) => {
const price = computePrice(range);
setBooking({ ...booking, range_id: range.id, range_label: range.label, price });
};
return (
Distance estimée : {route?.distance_text} · Durée : {route?.duration_text}
{ranges.length === 0 && (
Aucune gamme tarifaire configurée pour cette centrale.
)}
{ranges.map(r => {
const price = computePrice(r);
const sel = booking.range_id === r.id;
return (
select(r)}>
{r.photo_url ? (
{ e.target.style.display = 'none'; }} />
) : (
)}
{r.label}
{r.description &&
{r.description}
}
{r.seats_max && {r.seats_max}}
{r.luggage_max && {r.luggage_max}}
{price > 0 ? (
{price} CHF
) : (
Sur demande
)}
);
})}
);
}
/* ─────────────────────────────────────────────────────────────────────────
Étape 3 : Coordonnées
─────────────────────────────────────────────────────────────────────── */
function StepCustomer({ booking, setBooking, central, onBack, onNext }) {
const upd = (k, v) => setBooking({ ...booking, [k]: v });
const methods = useMemo(() => [
central.is_method_cash && { id: 'cash', label: 'Espèces (au chauffeur)', icon: 'fa-money-bill-wave' },
central.is_method_card && { id: 'card', label: 'Carte bancaire (en ligne)', icon: 'fa-credit-card' },
central.is_method_card_to_driver && { id: 'card_driver', label: 'Carte (au chauffeur)', icon: 'fa-credit-card' },
central.is_method_bill && { id: 'bill', label: 'Facture', icon: 'fa-file-invoice' },
].filter(Boolean), [central]);
useEffect(() => {
if (!booking.payment_method && methods.length > 0) {
setBooking({ ...booking, payment_method: methods[0].id });
}
}, [methods]);
const valid = booking.firstname && booking.lastname && booking.email && booking.mobile && booking.payment_method;
return (
);
}
/* ─────────────────────────────────────────────────────────────────────────
Étape 4 : Confirmation
─────────────────────────────────────────────────────────────────────── */
function StepConfirm({ booking, central, route, onBack, onSubmit, submitting, error }) {
const Row = ({ label, value, icon }) => (
{icon && }
{label}
{value}
);
return (
Trajet
|
|
|
|
|
Véhicule
|
Coordonnées
|
|
|
{booking.flight_number && |
}
{booking.company && |
}
{booking.notes && |
}
Total
{booking.price} CHF
TTC · Mode : {booking.payment_method}
{error &&
{error}
}
);
}
/* ─────────────────────────────────────────────────────────────────────────
Écran succès
─────────────────────────────────────────────────────────────────────── */
function SuccessScreen({ result, central, onNew }) {
return (
Réservation confirmée
Un email de confirmation vient de vous être envoyé.
Référence
{result?.reference || result?.id || '—'}
{central?.phone_booking && (
)}
);
}
/* ─────────────────────────────────────────────────────────────────────────
App
─────────────────────────────────────────────────────────────────────── */
function App() {
const [config, setConfig] = useState(null);
const [loadError, setLoadError] = useState('');
const [step, setStep] = useState(1);
const [route, setRoute] = useState(null);
const [submitting, setSubmitting] = useState(false);
const [submitError, setSubmitError] = useState('');
const [result, setResult] = useState(null);
const today = new Date(); today.setHours(today.getHours() + 2);
const [booking, setBooking] = useState({
origin: null, destination: null,
date: today.toISOString().slice(0, 10),
time: today.toTimeString().slice(0, 5),
passengers: 2, luggage: 1,
range_id: null, range_label: '', price: 0,
firstname: '', lastname: '', email: '', mobile: '',
flight_number: '', company: '', notes: '',
payment_method: '',
});
useEffect(() => {
if (!cfg.CENTRAL_KEY) {
setLoadError('Aucune centrale identifiée. Ajoutez `?central=CODE` à l\'URL.');
return;
}
api.config()
.then(setConfig)
.catch(e => setLoadError(e.message || 'Erreur de chargement'));
}, []);
// Brand color → CSS variables (utilisées par DatePicker/TimePicker entre autres)
const brandColor = config?.website?.color || config?.central?.color || '#0f172a';
useEffect(() => {
const darken = (hex, amt = 0.85) => {
if (!hex || !hex.startsWith('#') || hex.length !== 7) return hex;
const n = parseInt(hex.slice(1), 16);
const r = Math.max(0, Math.min(255, Math.round(((n >> 16) & 0xff) * amt)));
const g = Math.max(0, Math.min(255, Math.round(((n >> 8) & 0xff) * amt)));
const b = Math.max(0, Math.min(255, Math.round( (n & 0xff) * amt)));
return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
};
document.documentElement.style.setProperty('--color-primary', brandColor);
document.documentElement.style.setProperty('--color-primary-dark', darken(brandColor, 0.82));
}, [brandColor]);
const submit = async () => {
setSubmitting(true); setSubmitError('');
try {
const payload = {
origin_address: booking.origin.label,
origin_lat: booking.origin.lat,
origin_lng: booking.origin.lng,
destination_address: booking.destination.label,
destination_lat: booking.destination.lat,
destination_lng: booking.destination.lng,
pickup_date: booking.date,
pickup_time: booking.time,
passengers: booking.passengers,
luggage: booking.luggage,
range_id: booking.range_id,
range_label: booking.range_label,
price: booking.price,
currency: 'CHF',
distance_m: route?.distance_m || 0,
duration_s: route?.duration_s || 0,
customer: {
firstname: booking.firstname,
lastname: booking.lastname,
email: booking.email,
mobile: booking.mobile,
},
flight_number: booking.flight_number,
company: booking.company,
notes: booking.notes,
payment_method: booking.payment_method,
source: 'app.central',
};
const r = await api.createBooking(payload);
setResult(r);
setStep(5);
} catch (e) {
setSubmitError(e.message || 'Échec de la création');
} finally {
setSubmitting(false);
}
};
const reset = () => {
setStep(1); setRoute(null); setResult(null); setSubmitError('');
setBooking({
...booking,
origin: null, destination: null,
range_id: null, range_label: '', price: 0,
notes: '', flight_number: '',
});
};
if (loadError) {
return (
Service indisponible
{loadError}
);
}
if (!config) {
return (
Chargement de la centrale…
);
}
const { central, website, ranges } = config;
return (
{step <= 4 && (
)}
{step === 1 && (
setStep(2)}
/>
)}
{step === 2 && (
setStep(1)} onNext={() => setStep(3)}
/>
)}
{step === 3 && (
setStep(2)} onNext={() => setStep(4)}
/>
)}
{step === 4 && (
setStep(3)}
onSubmit={submit} submitting={submitting} error={submitError}
/>
)}
{step === 5 && (
)}
);
}
ReactDOM.createRoot(document.getElementById('root')).render();