fix(web): offer anonymous screening and doctor contact without identity

Refs #95, #96

web/src/screens/AnonymousSignIn.tsx

@@ -1,31 +1,35 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { api } from "../api/client";
-import type { Focus } from "../api/types";
 import { AppShell, Notice, TopBar } from "../components/AppShell";
-import { Icon, type IconName } from "../components/Icon";
+import { Icon } from "../components/Icon";
 import { ru } from "../content/ru";
 import { useSession } from "../session/SessionContext";
 
-const FOCUS: { id: Focus; icon: IconName }[] = [
-  { id: "depression", icon: "smile" },
-  { id: "ptsd", icon: "heart" },
-];
-
-// A3 · Анонимный вход: человек выбирает, что хочет проверить — от этого зависит стартовый опрос
+// Anonymous means no identifying data, with the same screening and care path.
 export function AnonymousSignIn() {
   const t = ru.anonymous;
   const navigate = useNavigate();
   const { signIn } = useSession();
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState(false);
+  const [screening, setScreening] = useState<boolean | null>(null);
 
-  const start = async (focus: Focus) => {
+  useEffect(() => {
+    let alive = true;
+    api.patientCapabilities()
+      .then((v) => { if (alive) setScreening(v.primary_screening); })
+      .catch(() => { if (alive) setError(true); });
+    return () => { alive = false; };
+  }, []);
+
+  const start = async () => {
     setBusy(true);
     setError(false);
     try {
-      signIn(await api.signInAnonymous(focus));
+      // No self-selected diagnosis: the common intake determines the follow-up modules.
+      signIn(await api.signInAnonymous());
       navigate("/flow", { replace: true });
     } catch {
       setError(true);
@@ -38,27 +42,16 @@ export function AnonymousSignIn() {
       <div className="focus">
         <TopBar onBack={() => navigate("/")} />
         <div className="stack signin">
+          <span className="tile-icon tile-icon--teal"><Icon name="lock" size={26} /></span>
           <h1 className="h1">{t.title}</h1>
-
-          <div className="entry-grid">
-            {FOCUS.map(({ id, icon }) => (
-              <button key={id} type="button" className="entry" onClick={() => start(id)} disabled={busy}>
-                <span className="entry__top">
-                  <span className="tile-icon">
-                    <Icon name={icon} size={26} />
-                  </span>
-                </span>
-                <span className="entry__title">
-                  {t.focus[id].title}
-                  <Icon name="chevronRight" />
-                </span>
-                <span className="entry__text">{t.focus[id].text}</span>
-              </button>
-            ))}
-          </div>
-
+          <p className="lead">{t.lead}</p>
+          <Notice>{t.note}</Notice>
+          {screening === false && <Notice>{t.unavailable}</Notice>}
           {error && <Notice tone="danger">{ru.common.networkError}</Notice>}
-          <p className="muted small">{busy ? t.submitting : t.note}</p>
+          <button type="button" className="btn btn--primary" disabled={busy} onClick={() => void start()}>
+            {busy ? t.submitting : screening ? t.start : t.continue}
+            <Icon name="chevronRight" size={20} />
+          </button>
         </div>
       </div>
     </AppShell>