// WatchEagle — production SPA // React 18 + Babel standalone — no build step required const { useState, useEffect, useMemo, useRef, useCallback } = React; // ── Feature flag ───────────────────────────────────────────────────────────── // Mettre à true pour ré-activer la marketplace (grille annonces, alertes, favoris) const MARKETPLACE_ENABLED = false; /* ============================================================ CONFIG ============================================================ */ // API_BASE routing: // - Railway / localhost:8000 → chemin relatif "/api/v1" // - Vercel / autre domaine → URL Railway complète // - Serveur statique local → localhost:8000 const _host = window.location.hostname; const _port = window.location.port; const RAILWAY_API = "https://web-production-a06ef.up.railway.app/api/v1"; const API_BASE = (() => { if (_port && _port !== "80" && _port !== "443" && _port !== "8000") return "http://localhost:8000/api/v1"; // python -m http.server 5501 if (_host === "localhost" || _host.includes("railway.app")) return "/api/v1"; // même origine return RAILWAY_API; // Vercel ou domaine custom })(); /* ============================================================ API CLIENT ============================================================ */ const api = { _token: () => localStorage.getItem("we_token"), _refresh: () => localStorage.getItem("we_refresh"), // Tente de rafraîchir le token. Retourne true si succès, false sinon. async _tryRefresh() { const rt = api._refresh(); if (!rt) return false; try { const res = await fetch(API_BASE + "/auth/refresh", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ refresh_token: rt }), }); if (!res.ok) return false; const d = await res.json(); localStorage.setItem("we_token", d.access_token); if (d.refresh_token) localStorage.setItem("we_refresh", d.refresh_token); return true; } catch { return false; } }, async _req(method, path, body, isForm, _retried = false) { const headers = {}; const tok = api._token(); if (tok) headers["Authorization"] = `Bearer ${tok}`; let bodyData; if (body && !isForm) { headers["Content-Type"] = "application/json"; bodyData = JSON.stringify(body); } else if (isForm) { bodyData = body; } let res; try { res = await fetch(API_BASE + path, { method, headers, body: bodyData }); } catch (networkErr) { throw new Error("Connexion impossible. Vérifiez votre réseau et réessayez."); } // Token expiré → on tente le refresh une seule fois if (res.status === 401 && !_retried) { const ok = await api._tryRefresh(); if (ok) return api._req(method, path, body, isForm, true); if (tok) { // L'utilisateur avait un token → vraie expiration de session ["we_token","we_refresh","we_user"].forEach(k => localStorage.removeItem(k)); window.location.hash = "#login"; throw new Error("Session expirée, veuillez vous reconnecter"); } // Pas de token (ex: mauvais mdp au login) → laisser passer l'erreur réelle } if (res.status === 204) return null; const data = await res.json().catch(() => ({})); if (!res.ok) { let msg = data.detail || ""; // Nettoyer les messages d'erreur backend trop techniques if (typeof msg === "string") { msg = msg.replace(/max_listings.*?(\d+)/i, "limite du plan atteinte ($1 annonces max)"); msg = msg.replace(/\('.*?',\)/g, ""); // tuple Python msg = msg.replace(/Utilisateur introuvable/i, "Compte introuvable. Vérifiez votre email."); msg = msg.replace(/IntegrityError.*$/i, "Cette entrée existe déjà."); } else if (Array.isArray(msg)) { msg = msg.map(e => e.msg || e).join(", "); } if (!msg) msg = `Erreur ${res.status}`; throw new Error(msg); } return data; }, get: (path) => api._req("GET", path), post: (path, body) => api._req("POST", path, body), patch: (path, body) => api._req("PATCH", path, body), delete: (path) => api._req("DELETE", path), upload: (path, form) => api._req("POST", path, form, true), }; /* ============================================================ STATIC DATA / HELPERS ============================================================ */ const CONDITIONS = ["new", "very_good", "good", "acceptable"]; // FR labels → API values (legacy support for old stored data) const COND_TO_API = { "Neuf":"new", "Très bon":"very_good", "Bon":"good", "Acceptable":"acceptable" }; // Normalize any value (FR label or API key) to API key const condApiKey = v => COND_TO_API[v] !== undefined ? COND_TO_API[v] : v; const PRICE_MIN = 0; const PRICE_MAX = 100000; const CITIES = ["Paris","Lyon","Genève","Bruxelles","Lille","Marseille","Nice","Bordeaux","Strasbourg"]; const SORT_OPTS = [ { id:"recent", label:"Plus récent" }, { id:"price_asc", label:"Prix croissant" }, { id:"price_desc", label:"Prix décroissant" }, { id:"distance", label:"Plus proche" }, ]; const BRANDS_LIST = [ "Rolex","Omega","Audemars Piguet","Patek Philippe","Cartier","Tudor", "TAG Heuer","Breitling","IWC","Jaeger-LeCoultre","Panerai", "Vacheron Constantin","Hublot","Longines","Zenith","Seiko","Autre", ]; const DEFAULT_FILTERS = () => ({ brands:[], priceMin:PRICE_MIN, priceMax:PRICE_MAX, conditions:[], box:false, papers:false, serviced:false, }); function eur(n) { if (n == null) return "—"; return Number(n).toLocaleString("fr-FR") + " €"; } function statusColor(s) { return ({ available:"var(--success)", reserved:"var(--warning)", sold:"var(--muted)", archived:"var(--error)" })[s] || "var(--muted)"; } function brandHue(brand) { if (!brand) return 200; let h = 0; for (let i = 0; i < brand.length; i++) h = (h * 31 + brand.charCodeAt(i)) % 360; return h; } // Résout les URLs relatives (stockage local Railway) vers une URL absolue. // Utilisée à la fois pour afficher les images et pour stocker des URLs stables en DB. function resolveImgUrl(url) { if (!url) return null; if (url.startsWith("blob:") || url.startsWith("http")) return url; const origin = API_BASE.replace(/\/api\/v1\/?$/, ""); return origin + url; } const toAbsoluteImgUrl = resolveImgUrl; function firstPhoto(listing) { try { const p = JSON.parse(listing.photos_json || "[]"); return resolveImgUrl(p[0] || null); } catch { return null; } } function allPhotos(listing) { try { return JSON.parse(listing.photos_json || "[]").map(resolveImgUrl); } catch { return []; } } /* ============================================================ ICONS ============================================================ */ const ICON_PATHS = { search: "M11 2a9 9 0 100 18A9 9 0 0011 2zM19 19l-3.5-3.5", pin: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z", chevron: "M6 9l6 6 6-6", chevronR: "M9 18l6-6-6-6", heart: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", bell: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0", user: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z", close: "M18 6L6 18M6 6l12 12", check: "M20 6L9 17l-5-5", arrowL: "M19 12H5M12 19l-7-7 7-7", arrowR: "M5 12h14M12 5l7 7-7 7", grid: "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z", map: "M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4zm7-4v16M16 6v16", box: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16zM3.27 6.96L12 12.01l8.73-5.05M12 22.08V12", papers: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8", phone: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8 19.79 19.79 0 013 1.18 2 2 0 015 0h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L9.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z", mail: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zM22 6l-10 7L2 6", route: "M3 11l19-9-9 19-2-8-8-2z", shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", plus: "M12 5v14M5 12h14", edit: "M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z", trash: "M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a1 1 0 011-1h4a1 1 0 011 1v2", tag: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82zM7 7h.01", settings: "M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z", card: "M1 4h22v15H1zM1 9h22", logout: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9", eye: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 9a3 3 0 100 6 3 3 0 000-6z", eyeOff: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22", upload: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12", share: "M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v13", image: "M21 19V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2zM8.5 10a1.5 1.5 0 110-3 1.5 1.5 0 010 3zM21 15l-5-5L5 21", sliders: "M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6", reset: "M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15", locate: "M12 2a7 7 0 017 7c0 5.25-7 13-7 13S5 14.25 5 9a7 7 0 017-7zm0 4a3 3 0 100 6 3 3 0 000-6zM2 12h3M19 12h3M12 2v3M12 19v3", calendar: "M3 4h18v18H3zM16 2v4M8 2v4M3 10h18", sun: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42M12 5a7 7 0 100 14A7 7 0 0012 5z", moon: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", }; /* ============================================================ I18N ============================================================ */ const I18nContext = React.createContext({ lang: 'fr', t: k => k, setLanguage: () => {} }); function I18nProvider({ children }) { const [lang, setLang] = React.useState(() => { const s = localStorage.getItem('we_lang'); if (s && ['fr','en'].includes(s)) return s; const nav = (navigator.language || '').slice(0, 2).toLowerCase(); return ['fr','en'].includes(nav) ? nav : 'fr'; }); const t = (key, vars = {}) => { const dicts = window.WE_TRANSLATIONS || {}; const dict = dicts[lang] || {}; const fallback = dicts['fr'] || {}; let str = dict[key] !== undefined ? dict[key] : (fallback[key] !== undefined ? fallback[key] : key); Object.entries(vars).forEach(([k, v]) => { str = str.replace(new RegExp('\\{' + k + '\\}', 'g'), String(v)); }); return str; }; const setLanguage = l => { setLang(l); localStorage.setItem('we_lang', l); }; return {children}; } function useTranslation() { return React.useContext(I18nContext); } function useTheme() { const [light, setLight] = useState(() => document.documentElement.classList.contains('light')); const toggle = () => { const html = document.documentElement; html.classList.add('no-transition'); const next = !html.classList.contains('light'); html.classList.toggle('light', next); localStorage.setItem('we_theme', next ? 'light' : 'dark'); setLight(next); requestAnimationFrame(() => requestAnimationFrame(() => html.classList.remove('no-transition'))); }; return [light, toggle]; } /* ── SEO meta helper ──────────────────────────────────────────── */ const _setMetaTag = (nameOrProp, content) => { if (!content) return; let el = document.querySelector(`meta[name="${nameOrProp}"], meta[property="${nameOrProp}"]`); if (!el) { el = document.createElement("meta"); const attr = nameOrProp.startsWith("og:") || nameOrProp.startsWith("twitter:") ? "property" : "name"; el.setAttribute(attr, nameOrProp); document.head.appendChild(el); } el.setAttribute("content", content); }; const _setCanonical = (url) => { let el = document.querySelector("link[rel='canonical']"); if (!el) { el = document.createElement("link"); el.rel = "canonical"; document.head.appendChild(el); } el.href = url; }; const DEFAULT_DESC_FR = "Trouvez votre prochaine montre de collection chez des dealers horlogers certifiés près de chez vous."; const DEFAULT_DESC_EN = "Find your next collector watch from certified watchmakers near you."; const SITE_NAME = "WatchEagle"; const OG_DEFAULT_IMAGE = "https://watch-eagle.com/img/og-default.svg"; function useMeta({ title, description, image, type, noindex } = {}) { const { lang } = useTranslation(); useEffect(() => { document.documentElement.lang = lang; const defaultDesc = lang === "en" ? DEFAULT_DESC_EN : DEFAULT_DESC_FR; const fullTitle = title ? `${title} — ${SITE_NAME}` : `${SITE_NAME} – Montres de seconde main`; const desc = description || defaultDesc; const img = image || OG_DEFAULT_IMAGE; const url = window.location.href; document.title = fullTitle; _setMetaTag("description", desc); _setMetaTag("og:title", fullTitle); _setMetaTag("og:description", desc); _setMetaTag("og:image", img); _setMetaTag("og:url", url); _setMetaTag("og:type", type || "website"); _setMetaTag("og:site_name", SITE_NAME); _setMetaTag("twitter:card", "summary_large_image"); _setMetaTag("twitter:title", fullTitle); _setMetaTag("twitter:description", desc); _setMetaTag("twitter:image", img); _setCanonical(url); }, [title, description, image, lang, type]); useEffect(() => { if (!noindex) return; let el = document.querySelector("meta[name='robots']"); if (!el) { el = document.createElement("meta"); el.name = "robots"; document.head.appendChild(el); } el.content = "noindex, nofollow"; return () => { const r = document.querySelector("meta[name='robots']"); if (r) r.remove(); }; }, [noindex]); } function LangSwitcher() { const { lang, setLanguage } = useTranslation(); return (
{['fr','en'].map(l => ( ))}
); } function Icon({ name, size = 20, sw = 2, fill = "none", style, className }) { const d = ICON_PATHS[name] || ""; return ( ); } /* ============================================================ BASE UI ============================================================ */ function EagleMark({ size = 57 }) { return ; } function Glass({ as: Tag = "div", className = "", children, onClick, style }) { return {children}; } function Stars({ value = 0 }) { const full = Math.round(value); return ( {[1,2,3,4,5].map(i => ( ))} ); } function DialPlaceholder({ hue = 200, brand = "", label = "" }) { return (
{brand}
{label &&
{label}
}
); } /* ============================================================ TOASTS ============================================================ */ function Toasts({ toasts }) { return (
{toasts.map(t => (
{t.msg}
))}
); } function useToasts() { const [toasts, setToasts] = useState([]); const addToast = useCallback((msg, type = "success") => { const id = Math.random().toString(36).slice(2); setToasts(p => [...p, { id, msg, type }]); setTimeout(() => setToasts(p => p.filter(x => x.id !== id)), 4000); }, []); return { toasts, addToast }; } /* ============================================================ RECENTLY VIEWED ============================================================ */ const RECENT_KEY = "we_recent"; const MAX_RECENT = 8; function useRecent() { const addRecent = useCallback((watch) => { try { const list = JSON.parse(localStorage.getItem(RECENT_KEY) || "[]"); const updated = [watch, ...list.filter(w => w.id !== watch.id)].slice(0, MAX_RECENT); localStorage.setItem(RECENT_KEY, JSON.stringify(updated)); } catch {} }, []); const getRecent = () => { try { return JSON.parse(localStorage.getItem(RECENT_KEY) || "[]"); } catch { return []; } }; return { addRecent, getRecent }; } /* ============================================================ CONDITION GUIDE ============================================================ */ function ConditionBadgeGuide() { const { t } = useTranslation(); const [open, setOpen] = useState(false); return ( {open && ( <>
setOpen(false)} />
e.stopPropagation()} style={{ position:"absolute", top:20, left:0, zIndex:200, width:272, background:"var(--surface,#13131f)", border:"1px solid rgba(255,255,255,0.1)", borderRadius:12, padding:16, boxShadow:"0 8px 32px rgba(0,0,0,.6)" }}>
{t('cond.guide_title')}
{CONDITIONS.map(key => (
{t('cond.' + key)}
{t('cond.guide.' + key)}
))}
)} ); } /* ============================================================ CONFIRM MODAL (#8 — remplace confirm() natif) ============================================================ */ function ConfirmModal({ msg, confirmLabel = "Supprimer", onConfirm, onCancel }) { return (
e.stopPropagation()} style={{ maxWidth:360, width:"calc(100% - 40px)", padding:"28px 24px", borderRadius:16 }}>

{msg}
); } function useConfirm() { const [state, setState] = useState(null); // { msg, label, resolve } const askConfirm = (msg, label) => new Promise(resolve => setState({ msg, label, resolve })); const handleConfirm = () => { if (state) { state.resolve(true); setState(null); } }; const handleCancel = () => { if (state) { state.resolve(false); setState(null); } }; const confirmModal = state ? : null; return { askConfirm, confirmModal }; } /* ============================================================ AUTH ============================================================ */ function useAuth() { const [user, setUser] = useState(() => { try { return JSON.parse(localStorage.getItem("we_user")); } catch { return null; } }); const login = (userData, accessToken, refreshToken) => { localStorage.setItem("we_token", accessToken); if (refreshToken) localStorage.setItem("we_refresh", refreshToken); localStorage.setItem("we_user", JSON.stringify(userData)); setUser(userData); }; const logout = () => { ["we_token","we_refresh","we_user"].forEach(k => localStorage.removeItem(k)); setUser(null); }; const updateVerified = () => { const stored = JSON.parse(localStorage.getItem("we_user") || "{}"); const updated = { ...stored, is_verified: true }; localStorage.setItem("we_user", JSON.stringify(updated)); setUser(updated); }; return { user, login, logout, updateVerified }; } /* ============================================================ ROUTER (hash-based: #page / #page/param) ============================================================ */ function useRouter() { const parse = () => { const raw = window.location.pathname.slice(1) || "dealers"; const [page, param] = raw.split("/"); return { page: page || "dealers", param }; }; const [route, setRoute] = useState(parse); useEffect(() => { const handler = () => setRoute(parse()); window.addEventListener("popstate", handler); return () => window.removeEventListener("popstate", handler); }, []); const go = (page, param) => { const url = param ? `/${page}/${param}` : `/${page}`; const from = window.location.pathname.slice(1).split("/")[0] || "dealers"; history.pushState({ from }, "", url); window.dispatchEvent(new Event("popstate")); window.scrollTo(0, 0); }; return { route, go }; } /* ============================================================ TOP BAR ============================================================ */ function TopBar({ q, setQ, city, setCity, radius, setRadius, geo, setGeo, favCount, onFav, onAlerts, go, user, onLogout, addToast }) { const { t } = useTranslation(); const [cityOpen, setCityOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const [light, toggleTheme] = useTheme(); const [cityInput, setCityInput] = useState(city || ""); const [gpsLoading, setGpsLoading] = useState(false); const locLabel = geo ? t('loc.my_pos') : city || t('loc.everywhere'); const locIcon = geo ? "locate" : "pin"; const radLabel = radius >= 9999 ? t('loc.everywhere') : radius + " km"; const requestGps = () => { if (!navigator.geolocation) { addToast(t('loc.gps_unavailable'), "error"); return; } setGpsLoading(true); navigator.geolocation.getCurrentPosition( pos => { setGeo({ lat: pos.coords.latitude, lng: pos.coords.longitude }); setCity(""); setCityInput(""); setGpsLoading(false); setCityOpen(false); if (radius >= 9999) setRadius(50); // active un rayon par défaut }, () => { addToast(t('loc.gps_error'), "error"); setGpsLoading(false); } ); }; const applyCity = () => { setCity(cityInput.trim()); setGeo(null); setCityOpen(false); }; const clearLoc = () => { setCity(""); setCityInput(""); setGeo(null); setRadius(9999); setCityOpen(false); }; return (
{/* location pill — toujours visible */} setCityOpen(v => !v)}> {locLabel} {/* masquer le rayon quand aucune localisation : évite « Partout · Partout » */} {(geo || city) && · {radLabel}} {cityOpen && (
e.stopPropagation()}> {/* GPS button */} {/* Séparateur */}
{t('loc.or_city')}
{/* Saisie libre */}
setCityInput(e.target.value)} onKeyDown={e => e.key === "Enter" && applyCity()} />
{/* Rayon */}
{t('loc.radius')}
{[10,25,50,100,200].map(r => ( ))}
{/* Effacer */} {(geo || city) && ( )}
)} {/* search box — masqué en mode annuaire */} {MARKETPLACE_ENABLED && ( setQ(e.target.value)} placeholder={t('nav.search_placeholder')} /> {q && ( )} )}
{MARKETPLACE_ENABLED && ( )} {user ? (
{menuOpen && (
e.stopPropagation()}>
)}
) : ( )}
); } /* ============================================================ FILTERS SIDEBAR ============================================================ */ function PriceRange({ value, onChange }) { const [lo, hi] = value; const pct = v => ((v - PRICE_MIN) / (PRICE_MAX - PRICE_MIN)) * 100; return (
onChange([Math.min(+e.target.value, hi - 500), hi])} /> onChange([lo, Math.max(+e.target.value, lo + 500)])} />
{eur(lo)} {hi >= PRICE_MAX ? eur(PRICE_MAX) + "+" : eur(hi)}
); } function FilterGroup({ title, defaultOpen = false, children }) { const [open, setOpen] = useState(defaultOpen); return (
{open &&
{children}
}
); } function Filters({ f, set, brandCounts, onReset }) { const { t } = useTranslation(); const toggle = (key, val) => { const cur = f[key]; set(key, cur.includes(val) ? cur.filter(x => x !== val) : [...cur, val]); }; return (
{t('filter.title')}
{brandCounts.map(b => ( ))}
{ set("priceMin", a); set("priceMax", b); }} /> {t('filter.condition')} } defaultOpen>
{CONDITIONS.map(c => ( ))}
); } /* ============================================================ WATCH CARD ============================================================ */ function WatchCard({ w, fav, onFav, onOpen }) { const { t } = useTranslation(); const hue = brandHue(w.brand); const photo = firstPhoto(w); const d = w.dealer || {}; return ( onOpen(w)}>
{photo ? {w.brand : } {w.created_at && (Date.now() - new Date(w.created_at).getTime() < 48*3600*1000) && {t('card.new')}} {t('cond.' + condApiKey(w.condition))}
{w.brand} {d.is_verified && ( )}
{w.model}
{t('card.ref')} {w.reference} · {w.year}
{d.city || "—"} {w.distance_km != null ? " · " + Math.round(w.distance_km) + " km" : ""}
{w.price != null ? eur(w.price) : t('card.price_on_request')}
 ); } /* ============================================================ MAP VIEW (decorative – no real tiles needed for MVP) ============================================================ */ function MapView({ list, onOpen, go }) { const { t } = useTranslation(); const containerRef = useRef(null); const mapObj = useRef(null); const [selGroup, setSelGroup] = useState(null); const [leafletOk, setLeafletOk] = useState(!!window.L); /* ── Group watches by dealer (only dealers with coords) ──────────────── */ const groups = useMemo(() => { const m = {}; for (const w of list) { const d = w.dealer; if (!d?.lat || !d?.lng) continue; if (!m[d.id]) m[d.id] = { dealer: d, watches: [] }; m[d.id].watches.push(w); } return Object.values(m); }, [list]); const noGeo = useMemo(() => list.filter(w => !w.dealer?.lat || !w.dealer?.lng), [list]); /* ── Load Leaflet lazily if not already in page ─────────────────────── */ useEffect(() => { if (window.L) { setLeafletOk(true); return; } if (!document.getElementById("leaflet-css")) { const lnk = document.createElement("link"); lnk.id = "leaflet-css"; lnk.rel = "stylesheet"; lnk.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"; document.head.appendChild(lnk); } if (!document.getElementById("leaflet-js")) { const s = document.createElement("script"); s.id = "leaflet-js"; s.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"; s.onload = () => setLeafletOk(true); document.head.appendChild(s); } }, []); /* ── Init / refresh Leaflet map ──────────────────────────────────────── */ useEffect(() => { if (!leafletOk || !containerRef.current) return; const L = window.L; if (mapObj.current) { mapObj.current.remove(); mapObj.current = null; } const map = L.map(containerRef.current, { zoomControl: false }); L.control.zoom({ position: "topright" }).addTo(map); mapObj.current = map; /* CartoDB Dark Matter — free, no API key, matches dark theme */ L.tileLayer("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", { attribution: "© OSM © CARTO", subdomains: "abcd", maxZoom: 19, }).addTo(map); const bounds = []; for (const g of groups) { const { dealer, watches } = g; const icon = L.divIcon({ className: "", html: `
${watches.length} pièce${watches.length > 1 ? "s" : ""}
`, iconAnchor: [30, 28], }); const marker = L.marker([dealer.lat, dealer.lng], { icon }); marker.on("click", () => setSelGroup(g)); marker.addTo(map); bounds.push([dealer.lat, dealer.lng]); } if (bounds.length === 0) { map.setView([46.8, 2.3], 5); } else if (bounds.length === 1) { map.setView(bounds[0], 13); } else { map.fitBounds(bounds, { padding: [60, 60] }); } return () => { if (mapObj.current) { mapObj.current.remove(); mapObj.current = null; } }; }, [leafletOk, groups]); return (
{/* Leaflet container */}
{/* Loading overlay while Leaflet boots */} {!leafletOk && (
)} {/* No-geo badge */} {noGeo.length > 0 && (
{noGeo.length} pièce{noGeo.length > 1 ? "s" : ""} sans localisation
)} {/* Dealer popup card */} {selGroup && (
{selGroup.dealer.name}
📍 {selGroup.dealer.city || "—"}
{t(selGroup.watches.length === 1 ? 'map.watches_one' : 'map.watches', {n: selGroup.watches.length})}
{selGroup.watches.slice(0, 3).map(w => ( ))} {selGroup.watches.length > 3 && (
{t('map.more', {n: selGroup.watches.length - 3})}
)}
{selGroup.dealer.slug && ( )} )}
); } /* ============================================================ SEARCH PAGE ============================================================ */ /* ============================================================ DEALERS MAP — carte dédiée aux fiches dealer ============================================================ */ function DealerMapView({ dealers, go, geo }) { const containerRef = useRef(null); const mapObj = useRef(null); const [leafletOk, setLeafletOk] = useState(!!window.L); useEffect(() => { if (window.L) { setLeafletOk(true); return; } if (!document.getElementById("leaflet-css")) { const lnk = document.createElement("link"); lnk.id = "leaflet-css"; lnk.rel = "stylesheet"; lnk.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"; document.head.appendChild(lnk); } if (!document.getElementById("leaflet-js")) { const s = document.createElement("script"); s.id = "leaflet-js"; s.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"; s.onload = () => setLeafletOk(true); document.head.appendChild(s); } }, []); useEffect(() => { if (!leafletOk || !containerRef.current) return; const L = window.L; if (mapObj.current) { mapObj.current.remove(); mapObj.current = null; } const map = L.map(containerRef.current, { zoomControl: false }); L.control.zoom({ position: "topright" }).addTo(map); mapObj.current = map; L.tileLayer("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", { attribution: "© OSM © CARTO", subdomains: "abcd", maxZoom: 19, }).addTo(map); const withCoords = dealers.filter(d => d.lat && d.lng); const bounds = []; for (const d of withCoords) { const icon = L.divIcon({ className: "", html: `
${d.name}
`, iconAnchor: [30, 28], }); const marker = L.marker([d.lat, d.lng], { icon }); marker.on("click", () => go("dealer", d.slug)); marker.addTo(map); bounds.push([d.lat, d.lng]); } if (geo) { map.setView([geo.lat, geo.lng], 12); } else if (bounds.length === 0) { map.setView([46.8, 2.3], 5); } else if (bounds.length === 1) { map.setView(bounds[0], 13); } else { map.fitBounds(bounds, { padding: [50, 50] }); } return () => { if (mapObj.current) { mapObj.current.remove(); mapObj.current = null; } }; }, [leafletOk, dealers, geo]); return (
{!leafletOk && (
)}
); } function DealerCard({ d, go }) { return (
go("dealer", d.slug)} style={{ cursor:"pointer", borderRadius:12, border:"1px solid var(--line)", background:"rgba(255,255,255,.03)", overflow:"hidden", transition:"border-color .15s" }} onMouseEnter={e => e.currentTarget.style.borderColor="var(--gold)"} onMouseLeave={e => e.currentTarget.style.borderColor="var(--line)"}> {d.logo_url && (
{d.name} {d.is_verified && ( Vérifié )}
)}
{d.name} {d.is_verified && !d.logo_url && ( Vérifié )}
📍 {[d.city, d.country].filter(Boolean).join(", ")}
{d.phone && (
📞 {d.phone}
)} {d.categories && d.categories.length > 0 && (
{d.categories.map(c => ( {c.label_fr} ))}
)}
); } function DealersPage({ go, user, favIds, onFav, addToast, onLogout }) { const { t } = useTranslation(); useMeta({ title: t('dealers.title'), description: t('dealers.sub') }); const [dealers, setDealers] = useState([]); const [loading, setLoading] = useState(true); const [city, setCity] = useState(""); const [geo, setGeo] = useState(null); const [radius, setRadius] = useState(9999); const [catFilter, setCatFilter] = useState(null); const [mapView, setMapView] = useState(false); const isMobile = window.innerWidth < 768; // Recharge les dealers quand la ville change (filtrage serveur) useEffect(() => { setLoading(true); const p = city ? `?city=${encodeURIComponent(city)}` : ""; api.get("/dealers" + p) .then(d => setDealers(d)) .catch(() => {}) .finally(() => setLoading(false)); }, [city]); const haversineKm = (lat1, lng1, lat2, lng2) => { const R = 6371, dLat = (lat2-lat1)*Math.PI/180, dLng = (lng2-lng1)*Math.PI/180; const a = Math.sin(dLat/2)**2 + Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*Math.sin(dLng/2)**2; return R*2*Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); }; const allCategories = React.useMemo(() => { const seen = new Map(); dealers.forEach(d => (d.categories || []).forEach(c => { if (!seen.has(c.id)) seen.set(c.id, c); })); return [...seen.values()].sort((a, b) => a.label_fr.localeCompare(b.label_fr)); }, [dealers]); let visibleDealers = dealers; if (geo && radius < 9999) { visibleDealers = visibleDealers.filter(d => d.lat && d.lng && haversineKm(geo.lat, geo.lng, d.lat, d.lng) <= radius ); } if (catFilter) { visibleDealers = visibleDealers.filter(d => (d.categories || []).some(c => c.id === catFilter)); } const withCoords = visibleDealers.filter(d => d.lat && d.lng); return (
{}} city={city} setCity={setCity} radius={radius} setRadius={setRadius} geo={geo} setGeo={setGeo} favCount={favIds.length} onFav={() => go("favorites")} onAlerts={() => go("alerts")} go={go} user={user} onLogout={onLogout} addToast={addToast} />
{/* Filtre catégories — masqué en vue carte mobile */} {!(isMobile && mapView) && allCategories.length > 0 && (
{allCategories.map(cat => ( ))}
)} {/* Desktop : carte toujours au-dessus de la grille */} {!isMobile && withCoords.length > 0 && (
)} {/* Mobile : carte plein écran quand mapView = true */} {isMobile && mapView && withCoords.length > 0 && (
)} {/* Grille — masquée en vue carte mobile */} {!(isMobile && mapView) && ( loading ? (
) : visibleDealers.length === 0 ? (
{(city || geo) ? "Aucun horloger trouvé dans cette zone." : "Aucun horloger disponible pour l'instant."}
) : (
{visibleDealers.map(d => )}
) )} {/* Bouton flottant toggle carte/liste (mobile uniquement) */} {isMobile && withCoords.length > 0 && ( )}
); } function SearchPage({ go, user, favIds, onFav, addToast, onLogout }) { const { t } = useTranslation(); useMeta({ title: t('search.seo_title'), description: t('search.seo_desc') }); const [watches, setWatches] = useState([]); const [loading, setLoading] = useState(true); const [q, setQ] = useState(""); const [city, setCity] = useState(""); const [radius, setRadius] = useState(9999); const [geo, setGeo] = useState(null); // { lat, lng } from GPS const [f, setFState] = useState(DEFAULT_FILTERS()); const [sort, setSort] = useState("recent"); const [view, setView] = useState("dealers"); const [sheet, setSheet] = useState(false); const [hasMore, setHasMore] = useState(false); const [loadingMore, setLoadingMore] = useState(false); const { addRecent, getRecent } = useRecent(); const [recent, setRecent] = useState(() => getRecent()); const [dealers, setDealers] = useState([]); const [dealersLoading, setDealersLoading] = useState(true); const [dealerCatFilter, setDealerCatFilter] = useState(null); const setF = (k, v) => setFState(p => ({ ...p, [k]: v })); const resetFilters = () => { setFState(DEFAULT_FILTERS()); setQ(""); }; // Charger les dealers pour la carte useEffect(() => { api.get("/dealers").then(d => setDealers(d)).catch(() => {}).finally(() => setDealersLoading(false)); }, []); // Basculer automatiquement vers les annonces dès que l'user tape useEffect(() => { if (MARKETPLACE_ENABLED && q.trim()) setView("grid"); }, [q]); // Navigue vers alertes avec filtres courants pré-remplis const gotoAlertPrefilled = () => { const prefill = {}; if (f.brands.length) prefill.keywords = f.brands.join(" "); else if (q.trim()) prefill.keywords = q.trim(); if (f.priceMax < PRICE_MAX) prefill.max_price = f.priceMax; try { sessionStorage.setItem("we_alert_prefill", JSON.stringify(prefill)); } catch {} go("alerts"); }; const activeFilterCount = f.brands.length + f.conditions.length + (f.serviced ? 1 : 0) + (f.box ? 1 : 0) + (f.papers ? 1 : 0) + (f.priceMin > PRICE_MIN || f.priceMax < PRICE_MAX ? 1 : 0); // Debounced API fetch useEffect(() => { setHasMore(false); const ctrl = new AbortController(); const t = setTimeout(async () => { setLoading(true); try { const p = new URLSearchParams(); if (q.trim()) p.set("q", q.trim()); f.brands.forEach(b => p.append("brands", b)); // multi-marques if (f.priceMin > 0) p.set("min_price", f.priceMin); if (f.priceMax < PRICE_MAX) p.set("max_price", f.priceMax); f.conditions.forEach(c => p.append("conditions", condApiKey(c))); if (f.box) p.set("has_box", "true"); if (f.papers) p.set("has_papers", "true"); if (f.serviced) p.set("recently_serviced", "true"); // GPS coords (prioritaire) ou ville texte if (geo) { p.set("lat", geo.lat); p.set("lng", geo.lng); if (radius < 9999) p.set("radius_km", radius); } else if (city) { p.set("city", city); if (radius < 9999) p.set("radius_km", radius); } p.set("sort", sort); p.set("limit", "24"); const data = await api.get("/search/watches?" + p.toString()); if (!ctrl.signal.aborted) { const arr = data.items || data || []; setWatches(arr); setHasMore(arr.length === 24); } } catch (e) { if (!ctrl.signal.aborted) addToast(e.message, "error"); } finally { if (!ctrl.signal.aborted) setLoading(false); } }, 350); return () => { clearTimeout(t); ctrl.abort(); }; }, [q, f, city, radius, geo, sort]); // Brand counts from current results const brandCounts = useMemo(() => { const map = {}; watches.forEach(w => { map[w.brand] = (map[w.brand] || 0) + 1; }); return Object.keys(map).sort().map(b => ({ name: b, count: map[b] })); }, [watches]); const results = watches; const loadMore = async () => { setLoadingMore(true); try { const p = new URLSearchParams(); if (q.trim()) p.set("q", q.trim()); f.brands.forEach(b => p.append("brands", b)); if (f.priceMin > 0) p.set("min_price", f.priceMin); if (f.priceMax < PRICE_MAX) p.set("max_price", f.priceMax); f.conditions.forEach(c => p.append("conditions", condApiKey(c))); if (f.box) p.set("has_box", "true"); if (f.papers) p.set("has_papers", "true"); if (f.serviced) p.set("recently_serviced", "true"); if (geo) { p.set("lat", geo.lat); p.set("lng", geo.lng); if (radius < 9999) p.set("radius_km", radius); } else if (city) { p.set("city", city); if (radius < 9999) p.set("radius_km", radius); } p.set("sort", sort); p.set("limit", "24"); p.set("offset", watches.length); const data = await api.get("/search/watches?" + p.toString()); const arr = data.items || data || []; setWatches(prev => [...prev, ...arr]); setHasMore(arr.length === 24); } catch (e) { addToast(e.message, "error"); } finally { setLoadingMore(false); } }; return (
go("favorites")} onAlerts={() => go("alerts")} go={go} user={user} onLogout={onLogout} addToast={addToast} /> {/* Vue carte dealers */} {view === "dealers" && (
{MARKETPLACE_ENABLED && (
)} {dealersLoading ? (
) : dealers.length === 0 ? (
{t('dealers.all_empty')}
) : (() => { const allDealerCats = (() => { const seen = new Map(); dealers.forEach(d => (d.categories || []).forEach(c => { if (!seen.has(c.id)) seen.set(c.id, c); })); return [...seen.values()].sort((a, b) => a.label_fr.localeCompare(b.label_fr)); })(); const filteredDealers = dealerCatFilter ? dealers.filter(d => (d.categories || []).some(c => c.id === dealerCatFilter)) : dealers; const cityFiltered = filteredDealers.filter(d => !city || d.city?.toLowerCase().includes(city.toLowerCase()) ); return ( <> {allDealerCats.length > 0 && (
{allDealerCats.map(cat => ( ))}
)}
d.lat && d.lng)} go={go} geo={geo} />
{filteredDealers.map(d => (
go("dealer", d.slug)} style={{ cursor:"pointer", borderRadius:12, border:"1px solid var(--line)", background:"rgba(255,255,255,.03)", overflow:"hidden", transition:"border-color .15s" }} onMouseEnter={e => e.currentTarget.style.borderColor="var(--gold)"} onMouseLeave={e => e.currentTarget.style.borderColor="var(--line)"}> {d.logo_url && (
{d.name}
)}
{d.name} {d.is_verified && !d.logo_url && ( {t('dealers.verified')} )}
📍 {[d.city, d.country].filter(Boolean).join(", ")}
{d.categories && d.categories.length > 0 && (
{d.categories.map(c => ( {c.label_fr} ))}
)}
))}
); })()}
)} {/* Vue annonces — masquée en mode annuaire */} {MARKETPLACE_ENABLED && view !== "dealers" &&
{/* Sort bar */}
{results.length}{hasMore ? "+" : ""} {t(results.length === 1 ? 'search.results_one' : 'search.results', { n: results.length }).replace(/^\d+ /, '')}
{MARKETPLACE_ENABLED &&
}
{loading ? (

{t('search.loading')}

) : view === "grid" ? ( results.length ? ( <>
{results.map(w => ( { addRecent(w); go("watch", w.id); }} /> ))}
{hasMore && (
)} {/* CTA alerte discret en bas des résultats */} {MARKETPLACE_ENABLED && !hasMore && watches.length > 0 && (
{t('search.alert_inline')}
)} ) : (
{t('search.empty.title')}
{t('search.empty.sub')}
{MARKETPLACE_ENABLED && (
{t('search.empty.alert_hint')}
)} {activeFilterCount > 0 && ( )}
) ) : ( { addRecent(w); go("watch", w.id); }} /> )} {/* Récemment consultées */} {recent.length > 0 && !loading && (
{t('search.recent')}
{recent.map(w => (
{ addRecent(w); go("watch", w.id); }}>
{firstPhoto(w) ? {w.brand} : }
{w.brand}
{w.model}
{eur(w.price)}
))}
)}
} {/* Mobile filter sheet */} {sheet && (
setSheet(false)}> e.stopPropagation()}>
)}
); } /* ============================================================ SITE FOOTER ============================================================ */ function SiteFooter({ go }) { const { t } = useTranslation(); return (
© {new Date().getFullYear()} WatchEagle · Blog · · ·
); } /* ============================================================ COOKIE BANNER ============================================================ */ const COOKIE_KEY = "we_cookie_consent"; function CookieBanner({ go }) { const { t } = useTranslation(); const [visible, setVisible] = React.useState(() => !localStorage.getItem(COOKIE_KEY)); const accept = () => { localStorage.setItem(COOKIE_KEY, "accepted"); setVisible(false); }; const refuse = () => { localStorage.setItem(COOKIE_KEY, "refused"); setVisible(false); }; if (!visible) return null; return (
{t('cookie.text')}{" "}
); } /* ============================================================ MENTIONS LÉGALES ============================================================ */ function LegalPage({ go }) { const { lang } = useTranslation(); useMeta({ title: lang === 'en' ? "Legal Notice" : "Mentions légales", noindex: true }); if (lang === 'en') return (

Legal Notice

Publisher

The website WatchEagle (available at watch-eagle.com) is published by:
WatchEagle
Email: info@watch-eagle.com

Publication director: WatchEagle

Hosting

Frontend — Vercel Inc., 340 Pine Street, Suite 701, San Francisco, CA 94104, United States.
Backend & database — Railway Corp., 340 Pine Street Suite 501, San Francisco, CA 94104, United States.

Intellectual property

All content on WatchEagle (text, images, logo, code) is the exclusive property of the publisher, unless otherwise stated. Any reproduction, even partial, is prohibited without prior written authorisation.

Watch photos published in listings are the sole responsibility of the dealers who uploaded them.

Limitation of liability

WatchEagle is a platform connecting buyers with independent watch dealers. WatchEagle cannot be held liable for transactions between users or for the accuracy of information provided by dealers.

Applicable law

This legal notice is governed by French law. Any dispute shall be submitted to the competent jurisdiction.

); return (

Mentions légales

Éditeur du site

Le site WatchEagle (accessible à l'adresse watch-eagle.com) est édité par :
WatchEagle
Email : info@watch-eagle.com

Directeur de la publication : WatchEagle

Hébergement

Frontend — Vercel Inc., 340 Pine Street, Suite 701, San Francisco, CA 94104, États-Unis.
Backend & base de données — Railway Corp., 340 Pine Street Suite 501, San Francisco, CA 94104, États-Unis.

Propriété intellectuelle

L'ensemble des contenus présents sur WatchEagle (textes, images, logo, code) est la propriété exclusive de l'éditeur, sauf mention contraire. Toute reproduction, même partielle, est interdite sans autorisation préalable écrite.

Les photos de montres publiées dans les annonces sont sous la responsabilité des dealers qui les ont téléversées.

Limitation de responsabilité

WatchEagle est une plateforme de mise en relation entre acheteurs et dealers horlogers indépendants. WatchEagle ne saurait être tenu responsable des transactions effectuées entre les utilisateurs, ni de l'exactitude des informations fournies par les dealers.

Droit applicable

Les présentes mentions légales sont régies par le droit français. Tout litige sera soumis à la juridiction compétente.

); } /* ============================================================ CONDITIONS GÉNÉRALES D'UTILISATION ============================================================ */ function CguPage({ go }) { const { lang } = useTranslation(); useMeta({ title: lang === 'en' ? "Terms of Service" : "Conditions générales d'utilisation", noindex: true }); if (lang === 'en') return (

Terms of Service

Last updated: June 2026

1. Purpose

These Terms of Service govern access to and use of the WatchEagle platform (watch-eagle.com), a geolocated directory of pre-owned watch dealers. WatchEagle connects private buyers with independent watch dealers. WatchEagle does not participate in transactions between parties and is neither a seller nor a buyer.

2. Acceptance

Using WatchEagle constitutes unconditional acceptance of these Terms. Anyone who does not accept these terms must stop using the platform.

3. Access to the platform

Browsing listings is free and does not require registration. An account is required to: set up search alerts, save listings as favourites, publish listings (dealers only).

Registration is open to any adult natural person or legal entity. Each user is responsible for the confidentiality of their credentials.

4. Dealer obligations

By publishing listings on WatchEagle, the dealer agrees to:

  • Provide accurate, complete, and up-to-date information about the watches offered (reference, condition, price).
  • Publish only authentic photos of watches actually in stock.
  • Not list counterfeit, stolen, or dubiously sourced watches.
  • Remove or archive listings as soon as a watch is sold.
  • Not use the platform for unsolicited commercial solicitation.
  • Comply with all regulations applicable to reseller activity (VAT, traceability, etc.).

5. Buyer obligations

Buyers agree to:

  • Use dealer contact details solely in the context of a genuine purchase enquiry.
  • Not use the platform for commercial prospecting or solicitation.
  • Not attempt to gain unauthorised access to WatchEagle's systems.

6. Prohibited content

It is prohibited to publish on WatchEagle any content that is:

  • Unlawful, fraudulent, misleading, or infringing third-party rights.
  • Related to counterfeit watches or illegal transactions.
  • Unsolicited advertising or spam.
  • Damaging to the reputation of WatchEagle or its users.

WatchEagle reserves the right to remove any non-compliant content without notice.

7. WatchEagle's liability

WatchEagle is a content host under applicable law. WatchEagle does not systematically review published listings and cannot guarantee their accuracy. WatchEagle cannot be held liable for:

  • Transactions concluded between buyers and dealers.
  • The actual condition of watches described in listings.
  • Temporary service interruptions for maintenance or force majeure.

8. Intellectual property

The code, design, logo, and editorial content of WatchEagle are the exclusive property of the publisher. Photos published by dealers remain their property; by uploading them, they grant WatchEagle a non-exclusive display licence on the platform.

9. Suspension and termination

WatchEagle reserves the right to suspend or delete any account that violates these Terms, without notice or compensation. Users may close their account at any time from their profile settings or by contacting{' '} info@watch-eagle.com.

10. Changes to these Terms

WatchEagle reserves the right to modify these Terms at any time. Users will be informed of material changes by email (if an account is linked). Continued use of the platform constitutes acceptance of the updated terms.

11. Applicable law

These Terms are governed by French law. Any dispute shall be submitted to the exclusive jurisdiction of the competent courts, after an attempt at amicable resolution.

); return (

Conditions générales d'utilisation

Dernière mise à jour : juin 2026

1. Objet

Les présentes Conditions Générales d'Utilisation (CGU) régissent l'accès et l'utilisation de la plateforme WatchEagle (watch-eagle.com), annuaire géolocalisé de revendeurs de montres de seconde main. WatchEagle met en relation des acheteurs particuliers avec des dealers horlogers indépendants. WatchEagle n'intervient pas dans les transactions entre les parties et n'est ni vendeur ni acheteur.

2. Acceptation

L'utilisation de WatchEagle implique l'acceptation sans réserve des présentes CGU. Toute personne qui n'accepte pas ces conditions doit cesser d'utiliser la plateforme.

3. Accès à la plateforme

La consultation des annonces est libre et gratuite, sans inscription. La création d'un compte est nécessaire pour : configurer des alertes de recherche, mettre des annonces en favoris, publier des annonces (dealers uniquement).

L'inscription est ouverte à toute personne physique majeure ou entité juridique. Chaque utilisateur est responsable de la confidentialité de ses identifiants.

4. Obligations des dealers

En publiant des annonces sur WatchEagle, le dealer s'engage à :

  • Fournir des informations exactes, complètes et à jour sur les montres proposées (référence, état, prix).
  • Publier uniquement des photos authentiques des montres effectivement en stock.
  • Ne pas publier de montres contrefaites, volées, ou dont la provenance est douteuse.
  • Retirer ou archiver les annonces dès qu'une montre est vendue.
  • Ne pas utiliser la plateforme à des fins de démarchage commercial non sollicité.
  • Respecter l'ensemble des réglementations applicables à l'activité de revendeur (TVA, traçabilité, etc.).

5. Obligations des acheteurs

L'acheteur s'engage à :

  • Utiliser les coordonnées des dealers uniquement dans le cadre d'une démarche d'achat sérieuse.
  • Ne pas utiliser la plateforme à des fins de prospection commerciale ou de démarchage.
  • Ne pas tenter d'accéder de façon non autorisée aux systèmes de WatchEagle.

6. Contenu interdit

Il est interdit de publier sur WatchEagle tout contenu :

  • Illicite, frauduleux, trompeur ou portant atteinte aux droits de tiers.
  • Relatif à des montres contrefaites ou à des transactions illégales.
  • À caractère publicitaire non autorisé ou de spam.
  • Portant atteinte à la réputation de WatchEagle ou de ses utilisateurs.

WatchEagle se réserve le droit de supprimer tout contenu non conforme sans préavis.

7. Responsabilité de WatchEagle

WatchEagle est un hébergeur de contenu au sens de la loi. WatchEagle ne contrôle pas systématiquement les annonces publiées et ne peut garantir leur exactitude. WatchEagle ne saurait être tenu responsable :

  • Des transactions conclues entre acheteurs et dealers.
  • De l'état réel des montres décrites dans les annonces.
  • Des interruptions temporaires de service pour maintenance ou cas de force majeure.

8. Propriété intellectuelle

Le code, le design, le logo et les contenus éditoriaux de WatchEagle sont la propriété exclusive de l'éditeur. Les photos publiées par les dealers restent leur propriété ; en les téléversant, ils accordent à WatchEagle une licence non exclusive d'affichage sur la plateforme.

9. Suspension et résiliation

WatchEagle se réserve le droit de suspendre ou supprimer tout compte en cas de violation des présentes CGU, sans préavis ni indemnité. L'utilisateur peut clôturer son compte à tout moment depuis les paramètres de son profil ou en contactant info@watch-eagle.com.

10. Modification des CGU

WatchEagle se réserve le droit de modifier les présentes CGU à tout moment. Les utilisateurs seront informés des modifications substantielles par email (si un compte est associé). La poursuite de l'utilisation de la plateforme vaut acceptation des nouvelles conditions.

11. Droit applicable

Les présentes CGU sont régies par le droit français. Tout litige sera soumis à la compétence exclusive des tribunaux compétents, après tentative de résolution amiable.

); } /* ============================================================ POLITIQUE DE CONFIDENTIALITÉ ============================================================ */ function PrivacyPage({ go }) { const { lang } = useTranslation(); useMeta({ title: lang === 'en' ? "Privacy Policy" : "Politique de confidentialité", noindex: true }); if (lang === 'en') return (

Privacy Policy

Last updated: June 2026

1. Data controller

WatchEagle
Contact: info@watch-eagle.com

2. Data collected

We collect only the data strictly necessary for the service to function:

  • Account data: email address, hashed password (argon2).
  • Dealer profile (if applicable): shop name, address, phone, logo, listing photos.
  • Search alerts: search criteria (brand, max price, city).
  • Push subscriptions: endpoint and encryption keys provided by your browser for notifications (if enabled).
  • Technical data: server logs (IP address, user-agent) retained for 30 days.

We use no advertising cookies, no tracking pixels, and no ad networks.

3. Cookies and local storage

WatchEagle uses only essential local storage (localStorage) required for the service to work:

  • Authentication token (we_token) — keeps your session active. Duration: 8 hours.
  • Favourites (we_favs) — local cache synced with our database when you are signed in (table favorites: user ID + listing ID, no behavioural data).
  • Cookie consent (we_cookie_consent) — remembers your choice on the consent banner.

No third-party cookies are set. You can clear this data at any time from your browser settings.

WatchEagle uses Vercel Web Analytics, a cookie-free audience measurement tool that collects no personally identifiable data (no fingerprinting, no cross-referencing). No consent is required for this tool.

4. Purposes of processing

  • Creating and managing your account.
  • Sending email or push notifications when a listing matches your alerts.
  • Geolocated display of dealers on the map (GPS coordinates only, never shared with third parties).
  • Anonymous listing statistics — each view and each click on "Contact" increments an aggregate counter visible to the relevant dealer. These counters are not linked to any identifiable user profile.
  • Security and abuse prevention.

5. Data sharing

Your data is never sold or transferred to third parties for commercial purposes. It may be transmitted to the following technical sub-processors, solely for the purpose of delivering the service:

  • Neon (PostgreSQL database) — EU hosting.
  • Railway (application server) — US hosting, covered by GDPR standard contractual clauses.
  • Vercel (frontend) — US hosting, covered by GDPR standard contractual clauses.
  • Resend (transactional emails) — used only for alerts and welcome emails.

6. Retention periods

  • Account data: until account deletion or 3 years of inactivity.
  • Listings: deleted on dealer request or 2 years after archiving.
  • Push subscriptions: automatically deleted if the browser revokes the subscription, or upon request.
  • Technical logs: 30 rolling days.

7. Your rights (GDPR)

Under the General Data Protection Regulation (GDPR — EU 2016/679), you have the following rights:

  • Access: obtain a copy of your personal data.
  • Rectification: correct inaccurate or incomplete data.
  • Erasure ("right to be forgotten"): request deletion of your account and data.
  • Objection: object to the processing of your data.
  • Portability: receive your data in a structured format.
  • Withdrawal of consent: revoke your consent to push notifications at any time.

To exercise these rights, contact us at info@watch-eagle.com. We commit to responding within 30 days. You may also lodge a complaint with your local data protection authority (in France: CNIL — cnil.fr).

8. Security

Passwords are hashed with the argon2 algorithm (state of the art). All communications are encrypted via TLS/HTTPS. VAPID keys for push notifications use end-to-end encryption.

); return (

Politique de confidentialité

Dernière mise à jour : juin 2026

1. Responsable du traitement

WatchEagle
Contact : info@watch-eagle.com

2. Données collectées

Nous collectons uniquement les données strictement nécessaires au fonctionnement du service :

  • Données de compte : adresse email, mot de passe chiffré (argon2).
  • Profil dealer (si applicable) : nom de la boutique, adresse, téléphone, logo, photos d'annonces.
  • Alertes de recherche : critères de recherche (marque, prix max, ville).
  • Abonnements push : endpoint et clés de chiffrement fournis par votre navigateur pour les notifications (si activées).
  • Données techniques : logs serveur (adresse IP, user-agent) conservés 30 jours.

Nous n'utilisons aucun cookie publicitaire, aucun pixel de tracking, aucune régie publicitaire.

3. Cookies et stockage local

WatchEagle utilise uniquement des données de stockage local (localStorage) essentielles au fonctionnement :

  • Jeton d'authentification (we_token) — conserve votre session. Durée : 8 heures.
  • Favoris (we_favs) — cache local synchronisé avec notre base de données lorsque vous êtes connecté (table favorites : identifiant utilisateur + identifiant annonce, sans donnée comportementale).
  • Consentement cookies (we_cookie_consent) — mémorise votre choix sur ce bandeau.

Aucun cookie tiers n'est déposé. Vous pouvez effacer ces données à tout moment depuis les paramètres de votre navigateur.

WatchEagle utilise Vercel Web Analytics, un outil de mesure d'audience sans cookie et sans collecte de données personnelles identifiables (pas de fingerprinting, pas de croisement de données). Aucun consentement n'est requis pour cet outil.

4. Finalités du traitement

  • Création et gestion de votre compte.
  • Envoi de notifications par email ou push lorsqu'une annonce correspond à vos alertes.
  • Affichage géolocalisé des dealers sur la carte (coordonnées GPS uniquement, jamais partagées avec des tiers).
  • Statistiques anonymes des annonces — chaque vue et chaque clic sur « Contacter » incrémentent un compteur agrégé visible par le dealer concerné. Ces compteurs ne sont liés à aucun profil utilisateur identifiable.
  • Sécurité et prévention des abus.

5. Partage des données

Vos données ne sont jamais vendues ni cédées à des tiers à des fins commerciales. Elles peuvent être transmises aux sous-traitants techniques suivants, dans le strict cadre de l'exécution du service :

  • Neon (base de données PostgreSQL) — hébergement UE.
  • Railway (serveur applicatif) — hébergement États-Unis, couvert par les clauses contractuelles types RGPD.
  • Vercel (frontend) — hébergement États-Unis, couvert par les clauses contractuelles types RGPD.
  • Resend (emails transactionnels) — utilisé uniquement pour l'envoi des alertes et emails de bienvenue.

6. Durée de conservation

  • Données de compte : jusqu'à suppression du compte ou 3 ans d'inactivité.
  • Annonces : supprimées sur demande du dealer ou 2 ans après leur archivage.
  • Abonnements push : supprimés automatiquement si le navigateur révoque l'abonnement, ou sur demande.
  • Logs techniques : 30 jours glissants.

7. Vos droits (RGPD)

Conformément au Règlement Général sur la Protection des Données (RGPD — UE 2016/679), vous disposez des droits suivants :

  • Accès : obtenir une copie de vos données personnelles.
  • Rectification : corriger vos données inexactes ou incomplètes.
  • Effacement (« droit à l'oubli ») : demander la suppression de votre compte et de vos données.
  • Opposition : vous opposer à un traitement de vos données.
  • Portabilité : recevoir vos données dans un format structuré.
  • Retrait du consentement : révoquer à tout moment votre consentement aux notifications push.

Pour exercer ces droits, contactez-nous à info@watch-eagle.com. Nous nous engageons à répondre dans un délai de 30 jours. Vous pouvez également introduire une réclamation auprès de la CNIL (cnil.fr).

8. Sécurité

Les mots de passe sont chiffrés avec l'algorithme argon2 (état de l'art). Les communications sont chiffrées en TLS/HTTPS. Les clés VAPID pour les notifications push utilisent un chiffrement de bout en bout.

); } /* ============================================================ INNER PAGE HEADER ============================================================ */ function PageHeader({ backTo, backLabel, go, user, children }) { const { t } = useTranslation(); return (
{children} {!user && ( )}
); } /* ============================================================ LIGHTBOX ============================================================ */ function Lightbox({ shots, startIdx, onClose }) { const [idx, setIdx] = useState(startIdx); const [zoomed, setZoomed] = useState(false); const touchStartX = useRef(null); const total = shots.length; const prev = () => { setZoomed(false); setIdx(i => (i - 1 + total) % total); }; const next = () => { setZoomed(false); setIdx(i => (i + 1) % total); }; /* Keyboard navigation */ useEffect(() => { const handler = e => { if (e.key === "ArrowLeft") prev(); if (e.key === "ArrowRight") next(); if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []); /* Body scroll lock */ useEffect(() => { document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = ""; }; }, []); /* Swipe detection */ const onTouchStart = e => { touchStartX.current = e.touches[0].clientX; }; const onTouchEnd = e => { if (touchStartX.current === null) return; const dx = e.changedTouches[0].clientX - touchStartX.current; if (dx > 50) prev(); if (dx < -50) next(); touchStartX.current = null; }; return (
{ if (e.target === e.currentTarget) onClose(); }}> {/* Header controls */} {total > 1 && ( {idx + 1} / {total} )} {/* Main image */}
setZoomed(z => !z)} draggable={false} />
{t(zoomed ? 'lb.zoom_out' : 'lb.zoom_in')} {/* Prev / Next arrows (desktop) */} {total > 1 && ( <> )} {/* Dot indicators */} {total > 1 && (
{shots.map((_, i) => (
)}
); } /* ============================================================ DETAIL PAGE ============================================================ */ function DetailPage({ id, go, user, favIds, onFav, addToast }) { const { t } = useTranslation(); const [watch, setWatch] = useState(null); const [loading, setLoading] = useState(true); const [imgIdx, setImgIdx] = useState(0); const [lbOpen, setLbOpen] = useState(false); const [related, setRelated] = useState([]); const { addRecent } = useRecent(); // SEO meta + JSON-LD const watchPhoto = watch ? firstPhoto(watch) : null; useMeta({ title: watch ? `${watch.brand} ${watch.model} ${watch.reference ? '– ' + watch.reference : ''}`.trim() : null, description: watch ? `${watch.brand} ${watch.model} · ${t('cond.' + condApiKey(watch.condition))} · ${eur(watch.price)}${watch.dealer?.city ? ' · ' + watch.dealer.city : ''}` : null, image: watchPhoto || undefined, type: "product", }); useEffect(() => { if (!watch) return; const conditionMap = { "new": "https://schema.org/NewCondition", "very_good": "https://schema.org/UsedCondition", "good": "https://schema.org/UsedCondition", "acceptable": "https://schema.org/DamagedCondition", }; const product = { "@type": "Product", "name": `${watch.brand} ${watch.model}`, "description": watch.description || `${watch.brand} ${watch.model} ${watch.reference || ""}`.trim(), "image": watchPhoto ? [watchPhoto] : [], "brand": { "@type": "Brand", "name": watch.brand }, "sku": watch.reference || String(watch.id), "url": window.location.href, "itemCondition": conditionMap[watch.condition] || "https://schema.org/UsedCondition", "offers": { "@type": "Offer", "price": watch.price ?? undefined, "priceCurrency": watch.currency || "EUR", "url": window.location.href, "availability": watch.status === "available" ? "https://schema.org/InStock" : "https://schema.org/OutOfStock", "seller": watch.dealer?.name ? { "@type": "LocalBusiness", "name": watch.dealer.name, ...(watch.dealer.slug ? { "url": `${window.location.origin}/dealer/${watch.dealer.slug}` } : {}), } : undefined, }, }; const breadcrumb = { "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "WatchEagle", "item": window.location.origin }, { "@type": "ListItem", "position": 2, "name": watch.brand, "item": `${window.location.origin}/search?brand=${encodeURIComponent(watch.brand)}` }, { "@type": "ListItem", "position": 3, "name": `${watch.brand} ${watch.model}`, "item": window.location.href }, ], }; const jsonld = { "@context": "https://schema.org", "@graph": [product, breadcrumb] }; let el = document.getElementById("we-jsonld"); if (!el) { el = document.createElement("script"); el.type = "application/ld+json"; el.id = "we-jsonld"; document.head.appendChild(el); } el.textContent = JSON.stringify(jsonld); return () => { const s = document.getElementById("we-jsonld"); if (s) s.remove(); }; }, [watch]); useEffect(() => { if (!id) return; setLoading(true); api.get("/search/watches/" + id) .then(d => { setWatch(d); setImgIdx(0); addRecent(d); }) .catch(e => addToast(e.message, "error")) .finally(() => setLoading(false)); }, [id]); // Montres similaires (même marque, excluant la courante) useEffect(() => { if (!watch) return; api.get("/search/watches?brands=" + encodeURIComponent(watch.brand) + "&limit=6") .then(data => { const list = (data.items || data || []).filter(w => w.id !== watch.id).slice(0, 4); setRelated(list); }) .catch(() => {}); }, [watch?.brand]); const shareWatch = async () => { const url = window.location.href; try { await navigator.clipboard.writeText(url); addToast(t('toast.copied'), "success"); } catch { addToast(t('toast.copy_fail'), "error"); } }; const contactClick = async type => { try { await api.post("/search/watches/" + id + "/contact-click", { contact_type: type }); } catch {} const d = (watch || {}).dealer || {}; if (type === "phone") { if (d.phone) window.open("tel:" + d.phone); else addToast(t('toast.phone_missing'), "info"); } if (type === "email") { if (d.email) window.open("mailto:" + d.email); else addToast(t('toast.email_missing'), "info"); } if (type === "route") { if (d.maps_url) { // Lien Google Maps explicitement renseigné par le dealer window.open(d.maps_url, "_blank"); } else if (d.address || d.city) { // Adresse texte = la plus précise (saisie par le dealer), Google Maps la géocode côté client const dest = encodeURIComponent([d.address, d.city, d.country].filter(Boolean).join(", ")); window.open(`https://www.google.com/maps/dir/?api=1&destination=${dest}`, "_blank"); } else if (d.lat && d.lng) { // Fallback : coordonnées GPS (moins précises si géocodées depuis la ville seulement) window.open(`https://www.google.com/maps/dir/?api=1&destination=${d.lat},${d.lng}`, "_blank"); } else { addToast(t('toast.addr_missing'), "info"); } } }; const backTo = history.state?.from || "search"; if (loading) return (
); if (!watch) return (
{t('detail.not_found')}
); const d = watch.dealer || {}; const fav = favIds.includes(watch.id); const photos = allPhotos(watch); const hue = brandHue(watch.brand); const shots = photos.length > 0 ? photos : [null, null, null, null]; return (
{lbOpen && shots.filter(Boolean).length > 0 && ( setLbOpen(false)} /> )}
{/* Gallery */}
shots[imgIdx] && setLbOpen(true)}> {shots[imgIdx] ? {watch.brand : } {t('status.' + watch.status)}
{shots.slice(0, 4).map((src, i) => ( ))}
{/* Info */}
{watch.brand}

{watch.model}

{watch.year} · {t('card.ref')} {watch.reference}
{eur(watch.price)} {watch.currency || "EUR"} {watch.price_negotiable && Négociable} {watch.appointment_only && ( Sur RDV )}
{t('detail.box')} {t('detail.papers')} {t('detail.serviced')} {t('cond.' + condApiKey(watch.condition))}
{watch.description &&

{watch.description}

}
{d.logo_url ? {d.name} : }
{d.name} {d.is_verified && }
{d.gmaps_rating && (
{d.gmaps_rating} · {d.gmaps_reviews} {t('dealer.gmaps_reviews')}
)}
{d.city && (
{' '} {d.address_masked ? [d.address || d.city, d.country].filter(Boolean).join(", ") : [d.address, d.city, d.country].filter(Boolean).join(", ") } {d.address_masked && ( {t('detail.addr_on_rdv')} )}
)}
{watch.appointment_only ? ( <> ) : ( <> )}
{d.slug && ( )}
{/* Vous aimerez aussi */} {related.length > 0 && (

{t('detail.related', { brand: watch.brand })}

{related.map(w => ( { addRecent(w); go("watch", w.id); }} /> ))}
)}
); } /* ============================================================ FAVORITES PAGE ============================================================ */ function FavoritesPage({ go, user, favIds, onFav, addToast }) { const { t } = useTranslation(); const [watches, setWatches] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { if (!user) { setLoading(false); return; } api.get("/listings/favorites") .then(d => setWatches(d || [])) .catch(e => addToast(e.message, "error")) .finally(() => setLoading(false)); }, [user]); return (

{t('fav.title')}

{!user ? (
{t('fav.login.title')}
{t('fav.login.sub')}
) : loading ? (
) : watches.length ? ( <>

{t(watches.length === 1 ? 'fav.pieces_one' : 'fav.pieces', { n: watches.length })}

{watches.map(w => ( go("watch", w.id)} /> ))}
) : (
{t('fav.empty.title')}
{t('fav.empty.sub')}
)}
); } /* ── Web Push helpers ──────────────────────────────────────────────────────── */ function urlBase64ToUint8Array(b64) { const pad = "=".repeat((4 - b64.length % 4) % 4); const b = (b64 + pad).replace(/-/g, "+").replace(/_/g, "/"); const raw = atob(b); return Uint8Array.from([...raw].map(c => c.charCodeAt(0))); } function PushNotifBanner({ user, addToast }) { const { t } = useTranslation(); // status: 'loading' | 'unsupported' | 'denied' | 'idle' | 'subscribed' | 'working' const [status, setStatus] = React.useState("loading"); useEffect(() => { if (!user) { setStatus("unsupported"); return; } if (!("serviceWorker" in navigator) || !("PushManager" in window)) { setStatus("unsupported"); return; } if (Notification.permission === "denied") { setStatus("denied"); return; } // Check if we already have a subscription registered navigator.serviceWorker.getRegistration("/sw.js").then(reg => { if (!reg) { setStatus("idle"); return; } return reg.pushManager.getSubscription().then(sub => { setStatus(sub ? "subscribed" : "idle"); }); }).catch(() => setStatus("idle")); }, [user]); const enable = async () => { setStatus("working"); try { const { public_key } = await api.get("/push/vapid-key"); const reg = await navigator.serviceWorker.register("/sw.js", { scope: "/" }); await navigator.serviceWorker.ready; const permission = await Notification.requestPermission(); if (permission !== "granted") { setStatus("denied"); return; } const sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(public_key), }); const j = sub.toJSON(); await api.post("/push/subscribe", { endpoint: j.endpoint, p256dh: j.keys.p256dh, auth: j.keys.auth, }); setStatus("subscribed"); addToast(t('push.enabled'), "success"); } catch (err) { setStatus("idle"); if (err.message && err.message.includes("503")) { addToast(t('push.error_config'), "error"); } else { addToast("Impossible d'activer les notifications : " + err.message, "error"); } } }; const disable = async () => { setStatus("working"); try { const reg = await navigator.serviceWorker.getRegistration("/sw.js"); if (reg) { const sub = await reg.pushManager.getSubscription(); if (sub) { const j = sub.toJSON(); await api.post("/push/unsubscribe", { endpoint: j.endpoint, p256dh: j.keys.p256dh, auth: j.keys.auth, }); await sub.unsubscribe(); } } setStatus("idle"); addToast(t('push.disabled'), "info"); } catch (err) { setStatus("subscribed"); addToast("Erreur : " + err.message, "error"); } }; if (!user || status === "loading" || status === "unsupported") return null; return (
{status === "subscribed" ? t('push.title_on') : t('push.title')}
{status === "denied" ? t('push.sub_denied') : status === "subscribed" ? t('push.sub_on') : t('push.sub')}
{status === "denied" ? ( {t('push.blocked')} ) : status === "subscribed" ? ( ) : ( )}
); } /* ============================================================ ALERTS PAGE ============================================================ */ function AlertsPage({ go, user, addToast }) { const { t } = useTranslation(); useMeta({ title: t('alerts.title'), noindex: true }); const [alerts, setAlerts] = useState([]); const [loading, setLoading] = useState(true); const [showForm, setShowForm] = useState(false); const [form, setForm] = useState({ keywords:"", max_price:"", city:"", radius_km:50 }); const setF = (k, v) => setForm(p => ({ ...p, [k]: v })); useEffect(() => { if (!user) { setLoading(false); return; } api.get("/alerts") .then(d => setAlerts(d || [])) .catch(e => addToast(e.message, "error")) .finally(() => setLoading(false)); }, [user]); // Pré-remplir le formulaire si on arrive depuis "Créer une alerte" sur la recherche vide useEffect(() => { try { const raw = sessionStorage.getItem("we_alert_prefill"); if (!raw) return; const prefill = JSON.parse(raw); sessionStorage.removeItem("we_alert_prefill"); if (prefill.keywords) setF("keywords", prefill.keywords); if (prefill.max_price) setF("max_price", String(prefill.max_price)); setShowForm(true); } catch {} }, []); const toggle = async id => { try { await api.patch("/alerts/" + id + "/toggle"); setAlerts(p => p.map(a => a.id === id ? { ...a, is_active: !a.is_active } : a)); } catch (e) { addToast(e.message, "error"); } }; const del = async id => { try { await api.delete("/alerts/" + id); setAlerts(p => p.filter(a => a.id !== id)); addToast(t('alerts.deleted'), "info"); } catch (e) { addToast(e.message, "error"); } }; const create = async () => { try { const body = { keywords: form.keywords, city: form.city, radius_km: +form.radius_km }; if (form.max_price) body.max_price = +form.max_price; const a = await api.post("/alerts", body); setAlerts(p => [...p, a]); setShowForm(false); setForm({ keywords:"", max_price:"", city:"", radius_km:50 }); addToast(t('alerts.created'), "success"); } catch (e) { addToast(e.message, "error"); } }; return (
{!user ? (
{t('alerts.login.title')}
{t('alerts.login.sub')}
) : ( <>

{t('alerts.title')}

{t('alerts.lead', { n: alerts.length })}

{showForm && (
setF("keywords", e.target.value)} />
setF("max_price", e.target.value)} />
setF("city", e.target.value)} placeholder={t('loc.city_placeholder')} />
setF("radius_km", e.target.value)} />
)} {loading ?
: (
{alerts.length === 0 && !showForm && (
{t('alerts.empty.title')}
{t('alerts.empty.sub')}
)} {alerts.map(a => (
{a.keywords || a.brand || "Alerte"}
{a.max_price ? "≤ " + eur(a.max_price) + " · " : ""} {a.city} · {a.radius_km} km {a.trigger_count > 0 && ( {t(a.trigger_count === 1 ? 'alerts.triggers_one' : 'alerts.triggers', { n: a.trigger_count })} )}
))}
)} )}
); } /* ============================================================ EMAIL VERIFY BANNER ============================================================ */ function EmailVerifyBanner({ addToast }) { const { t } = useTranslation(); const [sent, setSent] = useState(false); const [dismissed, setDismissed] = useState(false); if (dismissed) return null; const resend = async () => { try { await api.post("/auth/resend-verification"); setSent(true); } catch (e) { addToast(e.message, "error"); } }; return (
✉️ {sent ? t('verify.sent') : t('verify.banner')} {!sent && ( )}
); } /* ============================================================ VERIFY EMAIL PAGE ============================================================ */ function VerifyEmailPage({ go, token, addToast, updateVerified }) { const { t } = useTranslation(); const [status, setStatus] = useState("loading"); // loading | success | error useEffect(() => { if (!token) { setStatus("error"); return; } api.get(`/auth/verify-email?token=${encodeURIComponent(token)}`) .then(() => { setStatus("success"); updateVerified(); }) .catch(() => setStatus("error")); }, [token]); return (
WATCHEAGLE
{status === "loading" && ( <>

{t('verify.loading')}

)} {status === "success" && ( <>
✅

{t('verify.title')}

{t('verify.sub')}

)} {status === "error" && ( <>
❌

{t('verify.error_title')}

{t('verify.error_sub')}

)}
); } /* ============================================================ AUTH PAGE ============================================================ */ function AuthPage({ go, mode, onLogin }) { const { t } = useTranslation(); useMeta({ title: mode === 'register' ? t('nav.register') : t('nav.login'), noindex: true }); const isReg = mode === "register"; const [email, setEmail] = useState(""); const [pw, setPw] = useState(""); const [showPw,setShowPw]= useState(false); const [loading,setLoading]=useState(false); const [err, setErr] = useState(""); const [forgotSent, setForgotSent] = useState(false); const submit = async () => { setErr(""); setLoading(true); try { if (isReg) { const regRes = await api.post("/auth/register", { email, password: pw, role: "buyer" }); const u = { email, role: regRes.role || "buyer", is_verified: false }; onLogin(u, regRes.access_token, regRes.refresh_token); go("search"); } else { const res = await api.post("/auth/login", { email, password: pw }); const u = { email, role: res.role || "buyer", is_verified: res.is_verified ?? true }; onLogin(u, res.access_token, res.refresh_token); go(u.role === "dealer" ? "dashboard" : "search"); } } catch (e) { setErr(e.message); } finally { setLoading(false); } }; const forgot = async () => { if (!email) { setErr("Entrez votre email d'abord"); return; } try { await api.post("/auth/forgot-password", { email }); setForgotSent(true); } catch (e) { setErr(e.message); } }; return (
WATCHEAGLE

{isReg ? t('auth.register.title') : t('auth.login.title')}

{isReg ? t('auth.register.sub') : t('auth.login.sub')}

{err && (
{err}
)} {forgotSent && (
{t('auth.forgot.sent')}
)}
setEmail(e.target.value)} />
setPw(e.target.value)} onKeyDown={e => e.key === "Enter" && submit()} />
{!isReg && ( )}
{t('auth.or')}
{isReg ? : }
); } /* ============================================================ DASHBOARD ============================================================ */ const DASH_STATUS_TAB_VALUES = [null, "available", "reserved", "sold", "archived"]; /* ── Profile Tab ────────────────────────────────────────────── */ function ProfileTab({ dealer, needsOnboard, addToast, onSaved, onDealerUpdate }) { const { t } = useTranslation(); const blank = { name: "", description: "", phone: "", email: "", address: "", city: "", postal_code: "", country: "France", website_url: "", specialties: "", languages: "", years_experience: "", opening_hours: "", logo_url: "", address_masked: false, notif_digest: true, }; const [form, setForm] = useState(() => dealer ? { name: dealer.name || "", description: dealer.description || "", phone: dealer.phone || "", email: dealer.email || "", address: dealer.address || "", city: dealer.city || "", postal_code: dealer.postal_code || "", country: dealer.country || "France", website_url: dealer.website_url || "", specialties: dealer.specialties || "", languages: dealer.languages || "", years_experience: dealer.years_experience != null ? String(dealer.years_experience) : "", opening_hours: dealer.opening_hours || "", logo_url: dealer.logo_url || "", address_masked: !!dealer.address_masked, notif_digest: dealer.notif_digest !== false, } : blank); const [saving, setSaving] = useState(false); const [logoUploading,setLogoUploading]= useState(false); const logoRef = useRef(null); const set = (k, v) => setForm(p => ({ ...p, [k]: v })); const handleLogoUpload = async e => { const file = e.target.files?.[0]; if (!file) return; const prevUrl = form.logo_url; setLogoUploading(true); set("logo_url", URL.createObjectURL(file)); // optimistic preview try { const fd = new FormData(); fd.append("file", file); const r = await api.upload("/upload/image?folder=dealers", fd); // folder en query param const absUrl = toAbsoluteImgUrl(r.url); // stocker une URL absolue en DB set("logo_url", absUrl); // Auto-save immédiatement → met à jour la barre de progression const updated = await api.patch("/dealers/me/logo", { logo_url: absUrl }); if (onDealerUpdate) onDealerUpdate(updated); addToast(t('profile.logo_updated'), "success"); } catch (err) { set("logo_url", prevUrl); // revert addToast(err.message, "error"); } finally { setLogoUploading(false); } }; const save = async e => { e.preventDefault(); if (!form.name.trim()) { addToast(t('profile.shop_name_required'), "error"); return; } setSaving(true); try { const endpoint = needsOnboard ? "/dealers/onboard" : "/dealers/me"; const method = needsOnboard ? "post" : "patch"; const payload = { ...form, years_experience: form.years_experience !== "" ? +form.years_experience : null }; const data = await api[method](endpoint, payload); addToast(t(needsOnboard ? 'profile.created' : 'profile.saved'), "success"); onSaved(data); } catch (err) { addToast(err.message, "error"); } finally { setSaving(false); } }; return (

{t(needsOnboard ? 'profile.create' : 'profile.title')}

{t(needsOnboard ? 'profile.create_sub' : 'profile.edit_sub')}

{/* Logo upload */}

{t('profile.logo_section')}

{form.logo_url ? Logo : }
{t('profile.logo_hint')}
{/* Left column */}

{t('profile.general')}