/* global React, Icon */ // Saloon — Booking MVP (single pro, deployable). // ── HOW TO DEPLOY ───────────────────────────────────────────── // 1. Edit the CONFIG object below (name, services, contact). // 2. Wire sendBooking() to your backend (see the marked TODO): // - Email : Resend / SendGrid (POST to your serverless function) // - SMS : Twilio // - WhatsApp: Twilio WhatsApp API / Meta Cloud API // 3. Host the HTML anywhere static (Vercel, Netlify, your server). // The serverless function lives on your side; this page just POSTs to it. // ────────────────────────────────────────────────────────────── const { useState: useStateMV, useMemo: useMemoMV, useEffect: useEffectMV } = React; // Resolve a resource: use the bundler-inlined blob if present, else the live URL. const R = (id, url) => (typeof window !== 'undefined' && window.__resources && window.__resources[id]) || url; const CONFIG = { proName: 'Davido Fashionne', businessName: 'Davido Fashionne', tagline: 'Salon de coiffure · Paris 18e', bio: 'Coupe, couleur et soins au cœur du 18e arrondissement. Réservation en ligne, confirmation rapide par WhatsApp.', rating: 4.9, reviewCount: 0, cover: R('cover', '/img/cover.jpg'), portrait: R('portrait', '/img/portrait.jpg'), address: '26 Rue Eugène Sue, 75018 Paris', phone: '+33 7 53 88 33 91', instagram: '@davidofashionne', hoursToday: 'Sur rendez-vous', accent: '#B8924B', // Backend de réservation (notre serveur Express). Vide = mode autonome : // le lien WhatsApp est alors construit côté navigateur, sans persistance. bookingEndpoint: '/api/bookings', // Numéro WhatsApp du salon (format international, sans le +). whatsapp: '33753883391', notifyChannels: ['whatsapp'], // ⚠️ PLACEHOLDER — prix/durées à confirmer avec le salon. Images = /img/*.svg // (placeholders de marque, à remplacer par des photos générées/réelles). services: [ { id: 's1', name: 'Démarrage de locks', desc: 'Création de vos locks (méthode au choix)', price: 80, duration: 120, image: R('s1', '/img/s1.jpg'), popular: true, variants: [] }, { id: 's2', name: 'Entretien de locks', desc: 'Reprise des racines / retwist', price: 45, duration: 60, image: R('s2', '/img/s2.jpg'), popular: true, variants: [] }, { id: 's3', name: 'Rajout / extensions de locks', desc: 'Ajout de longueur ou de densité', price: 150, duration: 180, image: R('s3', '/img/s3.jpg'), variants: [] }, { id: 's4', name: 'Coupe homme', desc: 'Coupe, contours et finitions', price: 25, duration: 30, image: R('s4', '/img/s4.jpg'), variants: [] }, { id: 's5', name: 'Coupe + barbe', desc: 'Coupe homme + taille de barbe', price: 35, duration: 45, image: R('s5', '/img/s5.jpg'), variants: [] }, { id: 's6', name: 'Taille de barbe', desc: 'Mise en forme et contours', price: 15, duration: 20, image: R('s6', '/img/s6.jpg'), variants: [] }, { id: 's7', name: 'Coloration', desc: 'Couleur sur cheveux ou locks', price: 60, duration: 90, image: R('s7', '/img/s7.jpg'), variants: [] }, ], // Jours proposés = 6 prochains jours, calculés automatiquement. days: (() => { const wd = ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.']; const pad = (n) => String(n).padStart(2, '0'); const out = []; const now = new Date(); for (let i = 0; i < 6; i++) { const d = new Date(now); d.setDate(now.getDate() + i); const date = d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); out.push({ label: wd[d.getDay()] + ' ' + d.getDate(), date }); } return out; })(), slots: ['09:30', '10:15', '11:00', '11:45', '14:00', '14:45', '15:30', '16:15', '17:00', '17:45'], }; // ── BACKEND HOOK ────────────────────────────────────────────── // Construit le lien WhatsApp pré-rempli (notification gratuite + instantanée). function buildWaUrl(p) { const lines = [ `Bonjour ${CONFIG.businessName}, je souhaite réserver :`, `• ${p.service}${p.variant ? ' — ' + p.variant : ''} (${p.duration} min — ${p.price} €)`, `• ${p.day} à ${p.slot}`, `• Nom : ${p.name}`, `• Tél : ${p.phone}`, ]; if (p.email) lines.push(`• Email : ${p.email}`); if (p.note) lines.push(`• Note : ${p.note}`); lines.push('', '(Demande envoyée via la page de réservation en ligne)'); return 'https://wa.me/' + CONFIG.whatsapp + '?text=' + encodeURIComponent(lines.join('\n')); } async function sendBooking(payload) { // payload = { service, variant, price, duration, day, slot, name, phone, email, note } let whatsappUrl = null; if (CONFIG.bookingEndpoint) { // Enregistre la réservation côté serveur, qui renvoie le lien WhatsApp. try { const res = await fetch(CONFIG.bookingEndpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); const data = await res.json().catch(() => ({})); if (!res.ok) return { ok: false, error: data.error || 'Réservation impossible.' }; whatsappUrl = data.whatsappUrl || null; } catch (e) { // Backend indisponible → repli sur le lien construit côté navigateur. } } if (!whatsappUrl) whatsappUrl = buildWaUrl(payload); return { ok: true, whatsappUrl }; } // ────────────────────────────────────────────────────────────── function BookingMVP() { const c = CONFIG; const [open, setOpen] = useStateMV(false); const [presetService, setPresetService] = useStateMV(null); return (
); } function Nav({ c, onBook }) { const [scrolled, setScrolled] = useStateMV(false); useEffectMV(() => { const f = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', f); return () => window.removeEventListener('scroll', f); }, []); return ( ); } function Hero({ c, onBook }) { return (
{c.rating} · {c.reviewCount} avis {c.hoursToday}

{c.businessName}

{c.tagline}
); } function ServicesSection({ c, onBook }) { return (
Prestations

Choisissez votre service

{c.services.map(s => ( ))}
); } function AboutStrip({ c }) { return (
Le salon

{c.proName}

{c.bio}

{c.address} {c.phone} {c.instagram}
); } function Footer({ c, onBook }) { return (

Réservez en une minute

Pas de compte à créer. Indiquez vos coordonnées, on vous confirme le rendez-vous rapidement.

Propulsé par saloon
); } // ─── Booking flow ───────────────────────────────────────────── function BookingFlow({ c, preset, onClose }) { const [step, setStep] = useStateMV(preset ? 'detail' : 'service'); const [service, setService] = useStateMV(preset || null); const [variantId, setVariantId] = useStateMV(preset?.variants?.[0]?.id || null); const [day, setDay] = useStateMV(0); const [slot, setSlot] = useStateMV(null); const [slots, setSlots] = useStateMV(c.slots); const [loadingSlots, setLoadingSlots] = useStateMV(false); const [form, setForm] = useStateMV({ name: '', phone: '', note: '' }); const [sending, setSending] = useStateMV(false); const [err, setErr] = useStateMV(''); const [result, setResult] = useStateMV(null); const variant = service?.variants?.find(v => v.id === variantId); const price = variant?.price ?? service?.price ?? 0; const duration = service?.duration ?? 0; const canSubmit = form.name.trim() && form.phone.trim() && slot; // Créneaux réels : on retire ceux déjà réservés (confirmation automatique). useEffectMV(() => { if (!service) return; const dd = c.days[day]; let alive = true; setLoadingSlots(true); setSlot(null); fetch(`/api/availability?date=${dd.date}&duration=${duration}`) .then(r => r.json()) .then(d => { if (alive) setSlots(Array.isArray(d.slots) ? d.slots : c.slots); }) .catch(() => { if (alive) setSlots(c.slots); }) .finally(() => { if (alive) setLoadingSlots(false); }); return () => { alive = false; }; }, [service, day]); const submit = async () => { setSending(true); setErr(''); const r = await sendBooking({ service: service.name, variant: variant?.name || null, price, duration, day: c.days[day].label, date: c.days[day].date, slot, name: form.name, phone: form.phone, note: form.note, }); setSending(false); if (!r.ok) { setErr(r.error || 'Une erreur est survenue, réessayez.'); setStep('detail'); // le créneau a peut-être été pris entre-temps return; } setResult(r); setStep('done'); }; return (
{/* Header */} {step !== 'done' && (
{step !== 'service' && !(preset && step === 'detail') && ( )}
{step === 'service' ? 'Étape 1' : step === 'detail' ? 'Étape 2' : 'Étape 3'} · {preset ? 2 : 3} max
{step === 'service' ? 'Choisir un service' : step === 'detail' ? 'Créneau' : 'Vos coordonnées'}
)} {/* Step: service */} {step === 'service' && (
{c.services.map(s => ( ))}
)} {/* Step: detail (variant + slot) */} {step === 'detail' && service && ( <>
{service.name}
{service.duration} min
{service.variants.length > 0 && ( {service.variants.map(v => ( ))} )}
{c.days.map((d, i) => ( ))}
{loadingSlots ? (
Chargement des disponibilités…
) : slots.length === 0 ? (
Complet ce jour-là — choisissez un autre jour.
) : (
{slots.map(t => ( ))}
)} {err &&
{err}
}
)} {/* Step: info */} {step === 'info' && ( <>
{service.name}{variant ? ` — ${variant.name}` : ''}
{c.days[day].label} · {slot} · {duration} min
{price} €
setForm({ ...form, name: e.target.value })} placeholder="Votre nom" style={inp()} /> setForm({ ...form, phone: e.target.value })} placeholder="06 12 34 56 78" style={inp()} className="num" />