@innspel/react-native 0.3.1 → 0.4.1

package/README.md

@@ -32,6 +32,14 @@ export default () => (
 );
 ```
 
+Vil du at plattformen skal telle tragten (åpnet → spor valgt → sendt), gi
+`init()` mottaket fra understien — anonymt, aldri tekst:
+
+```ts
+import { createIngestTelemetry } from '@innspel/core/telemetri';
+// … telemetry: createIngestTelemetry({ baseUrl, tenantKey, platform: 'ios', appVersion: '1.4.2' }),
+```
+
 Åpne widgeten hvor som helst under provideren:
 
 ```tsx

package/dist/index.cjs

@@ -618,6 +618,32 @@ var tekst = {
   gaaUtTekst: (navn) => `Du tas ut av testgruppen med en gang. \xAB${navn}\xBB sl\xE5s av for deg, og vi tar ikke kontakt igjen. Det du allerede har svart, beholdes.`,
   bliVaerende: "Bli v\xE6rende",
   gaaUtBekreft: "G\xE5 ut",
+  // 3c (M3.2) — oppgavene og «Hvordan gikk det?»: tre lukkede valg, aldri en skala
+  oppgaverTittel: "Oppgavene",
+  oppgaveIkkeBegynt: "Ikke begynt",
+  oppgaveGjort: "Gjort",
+  oppgaveGjortLabel: (tittel) => `Gjort: ${tittel}`,
+  oppgaveGjortMed: (utfall) => `Gjort \xB7 ${utfall}`,
+  hvordanGikkDet: "Hvordan gikk det?",
+  utfallFungerte: "Fungerte",
+  utfallDelvis: "Delvis",
+  utfallIkke: "Ikke",
+  setningLabel: "Vil du si \xE9n setning om det? (valgfritt)",
+  setningPlaceholder: "Kopien kom, men rullesjefen manglet p\xE5 torsdag.",
+  lagre: "Lagre",
+  lagreHint: "Ferdig \u2014 ingen flere sp\xF8rsm\xE5l n\xE5.",
+  /** Etter «Ikke»: feilsporet er vertens — plattformen navigerer aldri selv. */
+  meldFeil: "Meld det som feil",
+  meldFeilHint: "Gikk det ikke? Et innspill hjelper oss \xE5 finne ut hvorfor.",
+  svarFeil: (arsak) => `Kunne ikke lagre svaret: ${arsak}`,
+  // 3d (M3.2) — oppfølgingskortene (DD-34): arten avgjør knappene
+  oppfolgingRegion: "Oppf\xF8lging fra betaprogrammet",
+  oppfolgingKontakt: (nr, maks) => `Kontakt ${nr} av ${maks} \xB7 tar under ett minutt`,
+  oppfolgingPaaminnelseHint: (nr, maks) => `Kontakt ${nr} av ${maks} \xB7 planlagt p\xE5minnelse`,
+  oppfolgingUtgangHint: (nr, maks) => `Kontakt ${nr} av ${maks} \xB7 den siste vi sender`,
+  senere: "Senere",
+  svarNaa: "Svar n\xE5",
+  aapneOppgavene: "\xC5pne oppgavene",
   // Felles
   tilbake: "Tilbake",
   lukk: "Lukk",
@@ -1830,8 +1856,8 @@ function InnspelPrivate({ children, style }) {
 
 // src/program/InnspelProgram.tsx
 var import_core3 = require("@innspel/core");
-var import_react14 = require("react");
-var import_react_native13 = require("react-native");
+var import_react17 = require("react");
+var import_react_native16 = require("react-native");
 
 // src/program/Aksept.tsx
 var import_react13 = require("react");
@@ -1987,22 +2013,264 @@ function Aksept({
   ) }) });
 }
 
-// src/program/InnspelProgram.tsx
+// src/program/HvordanGikkDet.tsx
+var import_react14 = require("react");
+var import_react_native13 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var UTFALL = [
+  { verdi: "fungerte", ikon: "\u2713", etikett: tekst.utfallFungerte },
+  { verdi: "delvis", ikon: "\u25D0", etikett: tekst.utfallDelvis },
+  { verdi: "ikke", ikon: "\u2715", etikett: tekst.utfallIkke }
+];
+var SETNING_MAKS = 140;
+function utfallEtikett(verdi) {
+  return UTFALL.find((u) => u.verdi === verdi)?.etikett ?? verdi;
+}
+function HvordanGikkDet({
+  under,
+  sender,
+  feil,
+  onLagre,
+  onLukk
+}) {
+  const tema = useTema();
+  const [valgt, setValgt] = (0, import_react14.useState)();
+  const [setning, setSetning] = (0, import_react14.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: onLukk, accessibilityViewIsModal: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.View, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end", padding: tema.space.md }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_react_native13.View,
+    {
+      testID: "hvordan-gikk-det",
+      accessibilityViewIsModal: true,
+      style: {
+        backgroundColor: tema.color.surface,
+        borderRadius: tema.radius.lg,
+        borderWidth: tema.hairline,
+        borderColor: tema.color.borderStrong,
+        padding: tema.space.md,
+        gap: tema.space.md
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Btn, { variant: "ghost", testID: "hvordan-tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: onLukk }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Hint, { children: under }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(H, { children: tekst.hvordanGikkDet }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.View, { testID: "utfall-gruppe", accessibilityRole: "radiogroup", accessibilityLabel: tekst.hvordanGikkDet, style: { flexDirection: "row", gap: tema.space.sm }, children: UTFALL.map((u) => {
+          const aktiv = valgt === u.verdi;
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            import_react_native13.Pressable,
+            {
+              testID: `utfall-${u.verdi}`,
+              accessibilityRole: "radio",
+              accessibilityLabel: u.etikett,
+              accessibilityState: { checked: aktiv },
+              onPress: () => setValgt(u.verdi),
+              style: {
+                flex: 1,
+                minHeight: tema.touch,
+                alignItems: "center",
+                justifyContent: "center",
+                gap: tema.space.xs,
+                padding: tema.space.sm,
+                borderRadius: tema.radius.md,
+                borderWidth: tema.hairline,
+                borderColor: aktiv ? tema.color.brand : tema.color.borderStrong,
+                backgroundColor: aktiv ? tema.color.brandBg : tema.color.surfaceRaised
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.h3, color: tema.color.textPrimary }, children: u.ikon }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.small, fontWeight: aktiv ? tema.weight.semibold : tema.weight.regular }, children: u.etikett })
+              ]
+            },
+            u.verdi
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native13.View, { style: { gap: tema.space.xs }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: tekst.setningLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_react_native13.TextInput,
+            {
+              testID: "hvordan-setning",
+              accessibilityLabel: tekst.setningLabel,
+              value: setning,
+              onChangeText: setSetning,
+              maxLength: SETNING_MAKS,
+              multiline: true,
+              numberOfLines: 3,
+              placeholder: tekst.setningPlaceholder,
+              placeholderTextColor: tema.color.textMuted,
+              style: {
+                backgroundColor: tema.color.surfaceRaised,
+                borderWidth: tema.hairline,
+                borderColor: tema.color.borderStrong,
+                borderRadius: tema.radius.md,
+                padding: tema.space.md,
+                color: tema.color.textPrimary,
+                fontSize: tema.font.body,
+                lineHeight: tema.lineHeight.body,
+                minHeight: tema.touch * 2,
+                textAlignVertical: "top"
+              }
+            }
+          )
+        ] }),
+        feil ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.svarFeil(feil) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Btn,
+          {
+            testID: "hvordan-lagre",
+            label: tekst.lagre,
+            hint: tekst.lagreHint,
+            disabled: valgt === void 0 || sender,
+            onPress: () => {
+              if (valgt === void 0) return;
+              const trimmet = setning.trim();
+              onLagre(valgt, trimmet.length > 0 ? trimmet : void 0);
+            }
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+// src/program/Oppfolging.tsx
+var import_react15 = require("react");
+var import_react_native14 = require("react-native");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function tarSvar(kind) {
+  return kind === "hvordan_gikk_det" || kind === "sjekkpunkt";
+}
+function Oppfolging({
+  oppfolging,
+  kontaktNr,
+  maksKontakter,
+  onSenere,
+  onSvar,
+  onAapneOppgavene,
+  onGaaUt
+}) {
+  const tema = useTema();
+  const art = tarSvar(oppfolging.kind) ? "spoersmaal" : oppfolging.kind === "tilbud_om_utgang" ? "utgang" : "paaminnelse";
+  const ikon = art === "spoersmaal" ? "\u{1F9EA}" : art === "utgang" ? "\u{1F6AA}" : "\u{1F4C5}";
+  const hint = art === "spoersmaal" ? tekst.oppfolgingKontakt(kontaktNr, maksKontakter) : art === "utgang" ? tekst.oppfolgingUtgangHint(kontaktNr, maksKontakter) : tekst.oppfolgingPaaminnelseHint(kontaktNr, maksKontakter);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    import_react_native14.View,
+    {
+      testID: `oppfolging-${oppfolging.id}`,
+      accessibilityLabel: tekst.oppfolgingRegion,
+      style: {
+        backgroundColor: tema.color.brandBg,
+        borderWidth: tema.hairline,
+        borderColor: tema.color.brand,
+        borderRadius: tema.radius.lg,
+        padding: tema.space.md,
+        gap: tema.space.sm
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native14.View, { style: { flexDirection: "row", gap: tema.space.sm, alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.h3 }, children: ikon }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native14.View, { style: { flex: 1, gap: tema.space.xs }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: oppfolging.question }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Hint, { children: hint })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: art === "utgang" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Btn, { grow: true, variant: "secondary", testID: `bli-vaerende-${oppfolging.id}`, label: tekst.bliVaerende, onPress: onSenere }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Btn, { grow: true, variant: "danger", testID: `gaa-ut-${oppfolging.id}`, ikon: "\u{1F6AA}", label: tekst.gaaUtBekreft, onPress: onGaaUt })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Btn, { grow: true, variant: "secondary", testID: `senere-${oppfolging.id}`, label: tekst.senere, onPress: onSenere }),
+          art === "spoersmaal" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Btn, { grow: true, testID: `svar-naa-${oppfolging.id}`, label: tekst.svarNaa, onPress: onSvar }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Btn, { grow: true, testID: `aapne-oppgavene-${oppfolging.id}`, label: tekst.aapneOppgavene, onPress: onAapneOppgavene })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/program/Oppgaver.tsx
+var import_react16 = require("react");
+var import_react_native15 = require("react-native");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Oppgaver({
+  tasks,
+  completions,
+  onGjort
+}) {
+  const tema = useTema();
+  const ferdig = new Map(completions.map((c) => [c.taskId, c]));
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { testID: "oppgaver", accessibilityLabel: tekst.oppgaverTittel, style: { gap: tema.space.sm }, children: [...tasks].sort((a, b) => a.order - b.order).map((o) => {
+    const c = ferdig.get(o.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      import_react_native15.View,
+      {
+        testID: `oppgave-${o.id}`,
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: tema.space.sm,
+          paddingVertical: tema.space.xs,
+          borderBottomWidth: tema.hairline,
+          borderBottomColor: tema.color.border
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native15.View, { style: { flex: 1, gap: tema.space.xs }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: o.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Hint, { children: [
+              c ? tekst.oppgaveGjortMed(utfallEtikett(c.outcome)) : `${tekst.oppgaveIkkeBegynt} \xB7 ${tekst.akseptOppgaveTid(o.estimatedMinutes)}`,
+              c?.text ? ` \xB7 \xAB${c.text}\xBB` : ""
+            ] })
+          ] }),
+          c ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.Text, { accessibilityLabel: tekst.oppgaveGjortMed(utfallEtikett(c.outcome)), style: { color: tema.color.success, fontSize: tema.font.h3 }, children: "\u2713" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Btn, { variant: "secondary", testID: `gjort-${o.id}`, ikon: "\u2713", label: tekst.oppgaveGjort, accessibilityLabel: tekst.oppgaveGjortLabel(o.title), onPress: () => onGjort(o) })
+        ]
+      },
+      o.id
+    );
+  }) });
+}
+
+// src/program/InnspelProgram.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function InnspelProgram({
   invitationToken,
-  onEndring
+  onEndring,
+  onMeldFeil
 }) {
   const { client } = useInnspel();
   const tema = useTema();
-  const [mine, setMine] = (0, import_react14.useState)();
-  const [deltakelse, setDeltakelse] = (0, import_react14.useState)();
-  const [viserAksept, setViserAksept] = (0, import_react14.useState)(false);
-  const [viserGaaUt, setViserGaaUt] = (0, import_react14.useState)(false);
-  const [avvist, setAvvist] = (0, import_react14.useState)(false);
-  const [sender, setSender] = (0, import_react14.useState)(false);
-  const [feil, setFeil] = (0, import_react14.useState)();
-  (0, import_react14.useEffect)(() => {
+  const [mine, setMine] = (0, import_react17.useState)();
+  const [deltakelse, setDeltakelse] = (0, import_react17.useState)();
+  const [viserAksept, setViserAksept] = (0, import_react17.useState)(false);
+  const [viserGaaUt, setViserGaaUt] = (0, import_react17.useState)(false);
+  const [avvist, setAvvist] = (0, import_react17.useState)(false);
+  const [sender, setSender] = (0, import_react17.useState)(false);
+  const [feil, setFeil] = (0, import_react17.useState)();
+  const [dialog, setDialog] = (0, import_react17.useState)();
+  const [svarFeil, setSvarFeil] = (0, import_react17.useState)();
+  const [lagtBort, setLagtBort] = (0, import_react17.useState)(/* @__PURE__ */ new Set());
+  const [meldFeilFor, setMeldFeilFor] = (0, import_react17.useState)();
+  const leggBort = (0, import_react17.useCallback)((id) => setLagtBort((s) => /* @__PURE__ */ new Set([...s, id])), []);
+  const lagreSvar = (0, import_react17.useCallback)(
+    async (outcome, text) => {
+      if (!dialog || !deltakelse) return;
+      setSender(true);
+      setSvarFeil(void 0);
+      try {
+        if (dialog.type === "oppgave") {
+          const ny = await client.programs.completeTask(dialog.task.id, { outcome, ...text ? { text } : {} });
+          setDeltakelse({ ...deltakelse, completions: [...deltakelse.completions, ny] });
+          if (outcome === "ikke" && onMeldFeil) setMeldFeilFor(dialog.task);
+        } else {
+          await client.programs.respond(dialog.oppfolging.id, { outcome, ...text ? { text } : {} });
+          setMine((m) => m ? { ...m, pendingFollowUps: m.pendingFollowUps.filter((f) => f.id !== dialog.oppfolging.id) } : m);
+        }
+        setDialog(void 0);
+      } catch (e) {
+        setSvarFeil(e instanceof import_core3.InnspelApiError ? e.message : "tjeneren svarte ikke.");
+      } finally {
+        setSender(false);
+      }
+    },
+    [client, deltakelse, dialog, onMeldFeil]
+  );
+  (0, import_react17.useEffect)(() => {
     if (client.isAnonymous) return;
     let levende = true;
     void client.programs.list().then((svar) => {
@@ -2014,7 +2282,7 @@ function InnspelProgram({
       levende = false;
     };
   }, [client]);
-  const bliMed = (0, import_react14.useCallback)(async () => {
+  const bliMed = (0, import_react17.useCallback)(async () => {
     if (!invitationToken) return;
     setSender(true);
     setFeil(void 0);
@@ -2029,7 +2297,7 @@ function InnspelProgram({
       setSender(false);
     }
   }, [client, invitationToken, onEndring]);
-  const gaaUt = (0, import_react14.useCallback)(async () => {
+  const gaaUt = (0, import_react17.useCallback)(async () => {
     if (!deltakelse) return;
     setSender(true);
     try {
@@ -2047,14 +2315,69 @@ function InnspelProgram({
   const program = deltakelse?.program ?? invitasjon?.program;
   if (!program) return null;
   if (deltakelse) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native13.View, { testID: "program-deltakelse", accessibilityLabel: tekst.deltakelseRegion, style: { gap: tema.space.sm }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Card, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(H, { sub: tekst.deltakelsePeriode(periode(program.opensAt, program.closesAt), deltakelse.contactsSent, program.maxContacts), children: program.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Hint, { children: tekst.deltakelseOppgaverKommer }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Btn, { variant: "ghost", testID: "gaa-ut", ikon: "\u{1F6AA}", label: tekst.gaaUt, onPress: () => setViserGaaUt(true) })
+    const kort = (mine?.pendingFollowUps ?? []).filter((f) => f.programId === program.id && !lagtBort.has(f.id)).sort((a, b) => a.emittedAt.localeCompare(b.emittedAt));
+    const forsteKontaktNr = Math.max(1, deltakelse.contactsSent - kort.length + 1);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { testID: "program-deltakelse", accessibilityLabel: tekst.deltakelseRegion, style: { gap: tema.space.sm }, children: [
+      kort.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Oppfolging,
+        {
+          oppfolging: f,
+          kontaktNr: forsteKontaktNr + i,
+          maksKontakter: program.maxContacts,
+          onSenere: () => leggBort(f.id),
+          onSvar: () => {
+            setSvarFeil(void 0);
+            setDialog({ type: "oppfolging", oppfolging: f });
+          },
+          onAapneOppgavene: () => leggBort(f.id),
+          onGaaUt: () => setViserGaaUt(true)
+        },
+        f.id
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Card, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(H, { sub: tekst.deltakelsePeriode(periode(program.opensAt, program.closesAt), deltakelse.contactsSent, program.maxContacts), children: program.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Oppgaver,
+          {
+            tasks: program.tasks,
+            completions: deltakelse.completions,
+            onGjort: (task) => {
+              setSvarFeil(void 0);
+              setDialog({ type: "oppgave", task });
+            }
+          }
+        ),
+        meldFeilFor && onMeldFeil ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: { gap: tema.space.xs }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Hint, { children: tekst.meldFeilHint }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            Btn,
+            {
+              variant: "secondary",
+              testID: "meld-feil",
+              ikon: "\u{1F41E}",
+              label: tekst.meldFeil,
+              onPress: () => {
+                const task = meldFeilFor;
+                setMeldFeilFor(void 0);
+                onMeldFeil(task);
+              }
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Btn, { variant: "ghost", testID: "gaa-ut", ikon: "\u{1F6AA}", label: tekst.gaaUt, onPress: () => setViserGaaUt(true) })
       ] }),
-      viserGaaUt ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: () => setViserGaaUt(false), accessibilityViewIsModal: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.View, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end", padding: tema.space.md }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        import_react_native13.View,
+      dialog ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        HvordanGikkDet,
+        {
+          under: dialog.type === "oppgave" ? dialog.task.title : dialog.oppfolging.question,
+          sender,
+          ...svarFeil ? { feil: svarFeil } : {},
+          onLagre: (outcome, text) => void lagreSvar(outcome, text),
+          onLukk: () => setDialog(void 0)
+        }
+      ) : null,
+      viserGaaUt ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: () => setViserGaaUt(false), accessibilityViewIsModal: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.View, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end", padding: tema.space.md }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        import_react_native16.View,
         {
           testID: "gaa-ut-dialog",
           accessibilityViewIsModal: true,
@@ -2067,11 +2390,11 @@ function InnspelProgram({
             gap: tema.space.md
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(H, { children: tekst.gaaUtTittel }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: tekst.gaaUtTekst(program.name) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native13.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Btn, { grow: true, variant: "secondary", testID: "bli-vaerende", label: tekst.bliVaerende, onPress: () => setViserGaaUt(false) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Btn, { grow: true, variant: "danger", testID: "bekreft-gaa-ut", ikon: "\u{1F6AA}", label: tekst.gaaUtBekreft, disabled: sender, onPress: () => void gaaUt() })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(H, { children: tekst.gaaUtTittel }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: tekst.gaaUtTekst(program.name) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Btn, { grow: true, variant: "secondary", testID: "bli-vaerende", label: tekst.bliVaerende, onPress: () => setViserGaaUt(false) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Btn, { grow: true, variant: "danger", testID: "bekreft-gaa-ut", ikon: "\u{1F6AA}", label: tekst.gaaUtBekreft, disabled: sender, onPress: () => void gaaUt() })
             ] })
           ]
         }
@@ -2079,9 +2402,9 @@ function InnspelProgram({
     ] });
   }
   if (!invitasjon || avvist) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      import_react_native13.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      import_react_native16.View,
       {
         testID: "program-banner",
         accessibilityLabel: tekst.invitasjonRegion,
@@ -2094,30 +2417,30 @@ function InnspelProgram({
           gap: tema.space.sm
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native13.View, { style: { flexDirection: "row", gap: tema.space.sm, alignItems: "flex-start" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.h3 }, children: "\u{1F9EA}" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native13.View, { style: { flex: 1, gap: tema.space.xs }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: tekst.invitasjonHva(program.name) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Hint, { children: tekst.invitasjonKontakter(program.maxContacts) })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: { flexDirection: "row", gap: tema.space.sm, alignItems: "flex-start" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.h3 }, children: "\u{1F9EA}" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: { flex: 1, gap: tema.space.xs }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: tekst.invitasjonHva(program.name) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Hint, { children: tekst.invitasjonKontakter(program.maxContacts) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              import_react_native13.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_react_native16.Pressable,
               {
                 testID: "avvis-invitasjon",
                 accessibilityRole: "button",
                 accessibilityLabel: tekst.avvisInvitasjon,
                 onPress: () => setAvvist(true),
                 style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
               }
             )
           ] }),
-          feil && !viserAksept ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.akseptFeil(feil) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Btn, { variant: "secondary", testID: "les-mer", label: tekst.lesMer, onPress: () => setViserAksept(true) })
+          feil && !viserAksept ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.akseptFeil(feil) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Btn, { variant: "secondary", testID: "les-mer", label: tekst.lesMer, onPress: () => setViserAksept(true) })
         ]
       }
     ),
-    viserAksept ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    viserAksept ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Aksept,
       {
         program,