[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","emller","name","sami-tech-retours","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/emller/sami-tech-retours/code/frontend/components/App.tsx","extension","id","4234e03d-12f8-4ecf-9ad4-2097db216dfd","App.tsx","fileId","01a09189-5662-71b2-beb6-9d19ff7710b2","parentId","01a09189-5663-7486-bd31-505f0a1f3f4b","branchId","35ff6f46-dcdc-4cd7-a4a5-2561eb24a897","branchVersion",105,"latest",true,"createdAt",["D",1789166064801],"version",69,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport jsQR from \"https://esm.sh/jsqr@1.4.0\";\nimport { playScannerBeep, unlockScannerAudio } from \"../scannerAudio.ts\";\n\ntype ResultState = {\n kind: \"idle\" | \"loading\" | \"ready\" | \"success\" | \"error\";\n message: string;\n tracking?: string;\n code?: string;\n status?: string | null;\n};\n\nfunction sleep(ms: number) {\n return new Promise((resolve) => setTimeout(resolve, ms));\n}\n\nfunction extractTracking(raw: string) {\n const value = String(raw || \"\").trim();\n if (!value) return \"\";\n if (/^[A-Za-z0-9_-]{6,64}$/.test(value)) return value.toUpperCase();\n const ecotrackLike = value.match(/\\b[A-Z]{3,10}\\d{8,24}\\b/i);\n return ecotrackLike?.[0]?.toUpperCase() || \"\";\n}\n\nfunction normalizeStatus(value: unknown) {\n return String(value ?? \"\")\n .trim()\n .toLowerCase()\n .normalize(\"NFD\")\n .replace(/[\\u0300-\\u036f]/g, \"\")\n .replace(/[\\s-]+/g, \"_\");\n}\n\nfunction isReturnReadyStatus(value: unknown) {\n return [\"retour_recu\", \"livraison_echoue_recu\"].includes(normalizeStatus(value));\n}\n\nexport function App() {\n const videoRef = useRef(null);\n const canvasRef = useRef(null);\n const streamRef = useRef(null);\n const scanningRef = useRef(false);\n const lastScanRef = useRef(\"\");\n const framesRef = useRef(0);\n const [cameraOn, setCameraOn] = useState(false);\n const [qrDetected, setQrDetected] = useState(false);\n const [integrationReady, setIntegrationReady] = useState(false);\n const [settingsOpen, setSettingsOpen] = useState(false);\n const [apiToken, setApiToken] = useState(\"\");\n const [manualTracking, setManualTracking] = useState(\"\");\n const [apiConfigured, setApiConfigured] = useState(false);\n const [settingsMessage, setSettingsMessage] = useState(\"\");\n const [savingSettings, setSavingSettings] = useState(false);\n const [validatingReturn, setValidatingReturn] = useState(false);\n const [result, setResult] = useState({ kind: \"idle\", message: \"Prêt à scanner\" });\n const [history, setHistory] = useState([]);\n\n useEffect(() => {\n fetch(\"/api/config\")\n .then((r) => r.json())\n .then((data) => setIntegrationReady(Boolean(data.integrationReady)))\n .catch(() => setIntegrationReady(false));\n\n fetch(\"/api/ecotrack/settings\")\n .then((r) => r.json())\n .then((data) => {\n setApiConfigured(Boolean(data.configured));\n })\n .catch(() => {});\n\n // Essaie d'armer l'audio immédiatement, puis réessaie au premier geste utilisateur\n // si Android/Chrome a restauré une session déjà déverrouillée.\n unlockScannerAudio();\n const armAudio = () => unlockScannerAudio();\n document.addEventListener(\"pointerdown\", armAudio, { capture: true, once: true });\n document.addEventListener(\"keydown\", armAudio, { capture: true, once: true });\n\n void startCamera();\n\n return () => {\n document.removeEventListener(\"pointerdown\", armAudio, true);\n document.removeEventListener(\"keydown\", armAudio, true);\n stopCamera();\n };\n }, []);\n\n async function saveEcotrackSettings() {\n const token = apiToken.trim();\n if (!token) {\n setSettingsMessage(\"Entre ton API Token.\");\n return;\n }\n\n setSavingSettings(true);\n setSettingsMessage(\"Enregistrement…\");\n try {\n const response = await fetch(\"/api/ecotrack/settings\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ apiToken: token }),\n });\n const data = await response.json();\n if (!response.ok || !data.ok) {\n setSettingsMessage(data.message || \"Impossible d’enregistrer l’API.\");\n return;\n }\n setApiConfigured(true);\n setIntegrationReady(true);\n setApiToken(\"\");\n setSettingsMessage(\"API Ecotrack enregistrée côté serveur.\");\n } catch {\n setSettingsMessage(\"Erreur réseau pendant l’enregistrement.\");\n } finally {\n setSavingSettings(false);\n }\n }\n\n async function removeEcotrackSettings() {\n setSavingSettings(true);\n try {\n const response = await fetch(\"/api/ecotrack/settings\", { method: \"DELETE\" });\n const data = await response.json();\n if (response.ok && data.ok) {\n setApiConfigured(false);\n setIntegrationReady(false);\n setApiToken(\"\");\n setSettingsMessage(\"API supprimée.\");\n } else {\n setSettingsMessage(data.message || \"Impossible de supprimer l’API.\");\n }\n } catch {\n setSettingsMessage(\"Erreur réseau.\");\n } finally {\n setSavingSettings(false);\n }\n }\n\n async function submitManualTracking() {\n const tracking = manualTracking.trim().toUpperCase();\n if (!tracking) {\n setResult({ kind: \"error\", message: \"Entre un numéro de tracking.\" });\n return;\n }\n if (!/^[A-Z0-9_-]{6,64}$/.test(tracking)) {\n setResult({ kind: \"error\", message: \"Numéro de tracking invalide.\", tracking });\n return;\n }\n\n setQrDetected(false);\n scanningRef.current = false;\n setResult({ kind: \"loading\", message: \"Vérification du tracking…\", tracking });\n try {\n const response = await fetch(\"/api/validate\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ tracking }),\n });\n const data = await response.json();\n if (response.ok && data.code === \"TRACKING_FOUND\") {\n playScannerBeep();\n setResult({ kind: \"ready\", message: data.message || \"Tracking trouvé dans OM Express.\", tracking, code: data.code, status: data.status ?? null });\n if (!isReturnReadyStatus(data.status)) await resumeScanner(900);\n return;\n }\n if (response.ok && data.ok) {\n setResult({ kind: \"success\", message: data.message || \"Retour validé\", tracking, code: data.code, status: data.status ?? null });\n setHistory((items) => [tracking, ...items.filter((item) => item !== tracking)].slice(0, 8));\n if (navigator.vibrate) navigator.vibrate([80, 50, 120]);\n await resumeScanner(700);\n return;\n }\n setResult({ kind: \"error\", message: data.message || \"Tracking vérifié, mais aucune validation n’a été effectuée.\", tracking });\n await resumeScanner(900);\n } catch {\n setResult({ kind: \"error\", message: \"Erreur réseau pendant la vérification.\", tracking });\n await resumeScanner(900);\n }\n }\n\n function stopCamera() {\n scanningRef.current = false;\n streamRef.current?.getTracks().forEach((track) => track.stop());\n streamRef.current = null;\n setCameraOn(false);\n }\n\n async function resumeScanner(delayMs = 700) {\n await sleep(delayMs);\n setQrDetected(false);\n lastScanRef.current = \"\";\n framesRef.current = 0;\n\n const stream = streamRef.current;\n const video = videoRef.current;\n const hasLiveCamera = Boolean(stream && stream.getVideoTracks().some((track) => track.readyState === \"live\") && video);\n\n if (hasLiveCamera) {\n scanningRef.current = true;\n setCameraOn(true);\n setResult({ kind: \"idle\", message: \"Analyse QR active — place le QR dans le cadre\" });\n void scanLoop();\n return;\n }\n\n await startCamera();\n }\n\n async function improveCamera(stream: MediaStream) {\n try {\n const track = stream.getVideoTracks()[0];\n if (!track) return;\n const capabilities = (track.getCapabilities?.() || {}) as any;\n const advanced: any[] = [];\n\n if (Array.isArray(capabilities.focusMode) && capabilities.focusMode.includes(\"continuous\")) {\n advanced.push({ focusMode: \"continuous\" });\n }\n if (capabilities.zoom && typeof capabilities.zoom.min === \"number\") {\n const targetZoom = Math.min(capabilities.zoom.max ?? 2, Math.max(capabilities.zoom.min, 1.6));\n advanced.push({ zoom: targetZoom });\n }\n if (advanced.length) {\n await track.applyConstraints({ advanced } as any);\n }\n } catch {\n // Le téléphone peut ignorer autofocus/zoom sans bloquer le scanner.\n }\n }\n\n async function startCamera() {\n setQrDetected(false);\n stopCamera();\n lastScanRef.current = \"\";\n framesRef.current = 0;\n setResult({ kind: \"idle\", message: \"Ouverture de la caméra…\" });\n\n try {\n if (!navigator.mediaDevices?.getUserMedia) throw new Error(\"camera_unavailable\");\n\n const stream = await navigator.mediaDevices.getUserMedia({\n video: {\n facingMode: { ideal: \"environment\" },\n width: { ideal: 1920 },\n height: { ideal: 1080 },\n },\n audio: false,\n });\n\n streamRef.current = stream;\n await improveCamera(stream);\n\n const video = videoRef.current;\n if (!video) return;\n video.srcObject = stream;\n video.setAttribute(\"playsinline\", \"true\");\n await video.play();\n\n scanningRef.current = true;\n setCameraOn(true);\n setResult({ kind: \"idle\", message: \"Analyse QR active — place le QR dans le cadre\" });\n void scanLoop();\n } catch (error) {\n console.error(\"Camera error\", error);\n setResult({ kind: \"error\", message: \"Impossible d’ouvrir la caméra. Autorise la caméra dans Chrome puis réessaie.\" });\n }\n }\n\n async function scanWithNativeDetector(video: HTMLVideoElement) {\n const Detector = (window as any).BarcodeDetector;\n if (!Detector) return \"\";\n try {\n const supported = typeof Detector.getSupportedFormats === \"function\"\n ? await Detector.getSupportedFormats()\n : [\"qr_code\"];\n if (!supported.includes(\"qr_code\")) return \"\";\n const detector = new Detector({ formats: [\"qr_code\"] });\n const codes = await detector.detect(video);\n return String(codes?.[0]?.rawValue || \"\").trim();\n } catch {\n return \"\";\n }\n }\n\n function decodeCanvas(canvas: HTMLCanvasElement) {\n const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n if (!ctx || canvas.width < 2 || canvas.height < 2) return \"\";\n const image = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const decoded = jsQR(image.data, image.width, image.height, { inversionAttempts: \"attemptBoth\" });\n return String(decoded?.data || \"\").trim();\n }\n\n function scanWithJsQR(video: HTMLVideoElement) {\n const canvas = canvasRef.current;\n if (!canvas || video.videoWidth < 2 || video.videoHeight < 2) return \"\";\n\n const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n if (!ctx) return \"\";\n\n // 1) Analyse de l'image complète.\n const maxWidth = 960;\n const scale = Math.min(1, maxWidth / video.videoWidth);\n canvas.width = Math.max(2, Math.round(video.videoWidth * scale));\n canvas.height = Math.max(2, Math.round(video.videoHeight * scale));\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n let raw = decodeCanvas(canvas);\n if (raw) return raw;\n\n // 2) Deuxième passe : zone centrale, utile quand le QR est petit dans l'image.\n const cropSize = Math.round(Math.min(video.videoWidth, video.videoHeight) * 0.78);\n const sx = Math.round((video.videoWidth - cropSize) / 2);\n const sy = Math.round((video.videoHeight - cropSize) / 2);\n const cropOut = 720;\n canvas.width = cropOut;\n canvas.height = cropOut;\n const cropCtx = canvas.getContext(\"2d\", { willReadFrequently: true });\n if (!cropCtx) return \"\";\n cropCtx.drawImage(video, sx, sy, cropSize, cropSize, 0, 0, cropOut, cropOut);\n raw = decodeCanvas(canvas);\n return raw;\n }\n\n async function scanLoop() {\n while (scanningRef.current) {\n const video = videoRef.current;\n\n if (video && video.readyState >= 2 && video.videoWidth > 0) {\n framesRef.current += 1;\n let raw = await scanWithNativeDetector(video);\n if (!raw) raw = scanWithJsQR(video);\n\n if (raw && raw !== lastScanRef.current) {\n lastScanRef.current = raw;\n scanningRef.current = false;\n setQrDetected(true);\n if (navigator.vibrate) navigator.vibrate([70, 40, 110]);\n setResult({ kind: \"loading\", message: \"QR détecté\", tracking: raw });\n await sleep(150);\n await handleQr(raw);\n return;\n }\n\n if (framesRef.current === 12) {\n setResult({ kind: \"idle\", message: \"Recherche du QR… rapproche-le et garde-le bien net\" });\n } else if (framesRef.current === 35) {\n setResult({ kind: \"idle\", message: \"QR non détecté — rapproche-le, garde-le bien net et centré\" });\n }\n }\n\n await sleep(160);\n }\n }\n\n async function handleQr(raw: string) {\n const tracking = extractTracking(raw);\n\n if (!tracking) {\n setResult({ kind: \"error\", message: \"QR lu, mais aucun numéro de tracking reconnu.\", tracking: raw });\n await resumeScanner(900);\n return;\n }\n\n setResult({ kind: \"loading\", message: \"QR détecté — tracking reconnu\", tracking });\n await sleep(120);\n\n try {\n const response = await fetch(\"/api/validate\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ tracking }),\n });\n const data = await response.json();\n\n if (response.ok && data.code === \"TRACKING_FOUND\") {\n playScannerBeep();\n setResult({ kind: \"ready\", message: data.message || \"Tracking trouvé dans OM Express.\", tracking, code: data.code, status: data.status ?? null });\n if (!isReturnReadyStatus(data.status)) await resumeScanner(900);\n return;\n }\n\n if (response.ok && data.ok) {\n setResult({ kind: \"success\", message: data.message || \"Retour validé\", tracking, code: data.code, status: data.status ?? null });\n setHistory((items) => [tracking, ...items.filter((item) => item !== tracking)].slice(0, 8));\n if (navigator.vibrate) navigator.vibrate([80, 50, 120]);\n await resumeScanner(700);\n return;\n }\n\n setResult({ kind: \"error\", message: data.message || \"QR détecté, mais la validation Ecotrack n’est pas encore disponible.\", tracking });\n await resumeScanner(900);\n } catch {\n setResult({ kind: \"error\", message: \"QR détecté, mais erreur réseau côté validation.\", tracking });\n await resumeScanner(900);\n }\n }\n\n async function validateReturn() {\n const tracking = result.tracking?.trim().toUpperCase() || \"\";\n const normalized = normalizeStatus(result.status);\n if (!tracking || ![\"retour_recu\", \"livraison_echoue_recu\"].includes(normalized)) return;\n\n setValidatingReturn(true);\n setResult((current) => ({ ...current, kind: \"loading\", message: \"Validation du retour dans OM Express…\" }));\n try {\n const response = await fetch(\"/api/return/validate\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ tracking }),\n });\n const raw = await response.text();\n let data: any = null;\n try {\n data = raw ? JSON.parse(raw) : null;\n } catch {\n data = null;\n }\n if (response.ok && data?.ok) {\n setResult({ kind: \"success\", message: data.message || \"Retour validé avec succès.\", tracking, code: data.code || \"RETURN_VALIDATED\", status: \"return_validated_by_partener\" });\n setHistory((items) => [tracking, ...items.filter((item) => item !== tracking)].slice(0, 8));\n setManualTracking(\"\");\n if (navigator.vibrate) navigator.vibrate([100, 50, 160]);\n return;\n }\n const fallback = raw && raw.length < 300 && !raw.trim().startsWith(\"<\") ? raw : `Erreur serveur (${response.status}).`;\n setResult({ kind: \"error\", message: data?.message || fallback || \"OM Express n’a pas confirmé la validation.\", tracking, code: data?.code, status: result.status ?? null });\n } catch {\n setResult({ kind: \"error\", message: \"Erreur réseau pendant la validation du retour.\", tracking, status: result.status ?? null });\n } finally {\n setValidatingReturn(false);\n await resumeScanner(700);\n }\n }\n\n const canValidateReturn = result.kind === \"ready\" && isReturnReadyStatus(result.status);\n\n return (\n

SAMI.TECH

Retours Ecotrack

{integrationReady ? \"API SAUVEGARDÉE\" : \"À CONFIGURER\"}

\n {\n stopCamera();\n setSettingsMessage(\"\");\n setSettingsOpen((open) => !open);\n }}\n aria-label=\"Paramètres Ecotrack\"\n >⚙\n

\n\n {!integrationReady && (\n

Ajoute ton API Ecotrack directement ici pour préparer la connexion au serveur.

\n )}\n\n {(settingsOpen || !apiConfigured) && (\n

PARAMÈTRES ECOTRACK

{apiConfigured ? \"API enregistrée\" : \"Ajouter l’API\"}

\n {apiConfigured && ✓}\n

\n\n API Token\n setApiToken(e.currentTarget.value)}\n placeholder={apiConfigured ? \"•••••••• entre un nouveau token pour le remplacer\" : \"Colle ton API Token\"}\n />\n\n

\n \n {apiConfigured && (\n \n )}\n

\n {settingsMessage &&

{settingsMessage}

}\n

Le token n’est jamais réaffiché après l’enregistrement.

\n )}\n\n

ÉTAT

{result.message}

\n {result.tracking &&

{result.tracking}

}\n

\n\n

SAISIE MANUELLE

\n setManualTracking(e.currentTarget.value.toUpperCase())}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") void submitManualTracking();\n }}\n placeholder=\"Ex. ECCDA2260901788920\"\n />\n \n

\n\n {canValidateReturn && (\n \n )}\n\n {history.length > 0 && (\n

DERNIERS RETOURS VALIDÉS

\n {history.map((item) => (\n

{item}✓

\n ))}\n

\n )}\n\n \n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","3632ee8b-d3b0-4a9d-b80b-ecc4536ce5a6",["D",1789148091907],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Scanner mobile pour valider les retours Ecotrack","imageUrl","userId","d1a4e165-322f-4bea-a472-a3bfe065b80a","pinnedFileId","01a09189-5663-7486-bd31-6d54914632cb","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a04a3a-ab09-722d-b08e-d53e0c46d95a","tursoName","3632ee8bd3b04a9db80becc4536ce5a6","tursoHostname","3632ee8bd3b04a9db80becc4536ce5a6-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789495880338],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":32,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","E. Müller","avatar","https://lh3.googleusercontent.com/a/ACg8ocLJnTmCFn0ipeSgvNaIC4rYdYukPA7khbo2Fye1VgNbr6ozzQ=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

{apiConfigured ? \"API enregistrée\" : \"Ajouter l’API\"}

Scanner un retour