@innspel/react-native 0.2.2 → 0.3.0

package/README.md

@@ -143,8 +143,26 @@ WebP; høyst 5 MB og 4096 × 4096.
 
 ## Betaprogram
 
-Betaprogram-fanen kommer i M3. `innspel.programs.list()` finnes allerede i
-kjernen om du vil bygge din egen.
+```tsx
+import { InnspelProgram } from '@innspel/react-native';
+
+<InnspelProgram invitationToken={tokenFraDyplenke} />
+```
+
+Sett den der invitasjonen hører hjemme — typisk øverst på hjemskjermen. Uten
+invitasjon og uten deltakelse rendrer den **ingenting**.
+
+Den viser invitasjonsbanneret, aksepten med tallene (N oppgaver × M minutter,
+dato til dato, maks K kontakter), oppgavene, kjente feil du slipper å melde, og
+«Gå ut av programmet» med bekreftelse. Utgangen er umiddelbar.
+
+**Tokenet kommer fra deg.** Plattformen sender aldri invitasjonen: du får
+`program.invitation_created` som webhook med engangs-tokenet og pseudonymet,
+løser pseudonymet til din egen bruker, og sender lenken i din egen kanal. Fanger
+appen tokenet fra dyplenken og gir det hit, kan testeren bli med. Uten token
+vises invitasjonen fortsatt, men «Bli med» er inaktiv.
+
+Oppgavene med utfall og «Hvordan gikk det?» kommer i neste versjon.
 
 ## Versjoner
 

package/dist/index.cjs

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   InnspelPrivate: () => InnspelPrivate,
+  InnspelProgram: () => InnspelProgram,
   InnspelProvider: () => InnspelProvider,
   byggTema: () => byggTema,
   createMemoryStorage: () => createMemoryStorage,
@@ -583,6 +584,40 @@ var tekst = {
   svarFra: (leietaker) => `Svar fra ${leietaker}`,
   svarFraGenerisk: "Svar",
   sendNytt: "Send nytt innspill",
+  // 3a — invitasjonsbanneret (DD-12)
+  invitasjonRegion: "Invitasjon til betaprogram",
+  invitasjonHva: (navn) => `Vil du teste \xAB${navn}\xBB?`,
+  invitasjonKontakter: (maks) => `Vi tar kontakt maks ${maks} ganger. Du kan g\xE5 ut n\xE5r som helst.`,
+  lesMer: "Les mer og bli med",
+  avvisInvitasjon: "Avvis invitasjonen",
+  // 3b — aksepten (DD-13, DD-32, DD-37)
+  akseptHva: "Hva testes",
+  /** DD-32: tallene på én linje, FØR forklaringen — N oppgaver · ca. M min hver · dato–dato · maks K kontakter. */
+  akseptTall: (oppgaver, minutter, periode2, kontakter) => `${oppgaver} oppgaver \xB7 ca. ${minutter} min hver \xB7 ${periode2} \xB7 maks ${kontakter} kontakter`,
+  akseptOppgaver: "Hva vi ber om",
+  akseptOppgaveTid: (minutter) => `ca. ${minutter} min`,
+  akseptKjenteFeil: (antall) => `Kjente feil (${antall})`,
+  akseptKjenteFeilUnder: "Disse trenger du ikke melde \u2014 vi vet om dem.",
+  akseptInnsamling: "Hva som samles inn",
+  akseptInnsamlingTekst: "Skjerm, appversjon, plattform, OS og hva du svarer. Aldri navn, e-post, telefon eller posisjon.",
+  akseptVilkar: "Les vilk\xE5rene (\xE5pnes i nettleser)",
+  akseptVilkarHint: "Bare en lenke. Ingen avkryssing, ingen signatur \u2014 \xABBli med\xBB binder deg ikke til noe.",
+  akseptIngenVilkar: "Ingen vilk\xE5r, ingen avtale \u2014 plattformen kjenner ikke navnet ditt og kan ikke inng\xE5 \xE9n.",
+  akseptUtgang: "Du kan g\xE5 ut n\xE5r som helst \u2014 herfra.",
+  bliMed: "Bli med",
+  bliMedHint: "Samtykket gjelder bare dette programmet.",
+  /** DD-12: tokenet er engangs og kom i leietakerens egen kanal — plattformen sender aldri. */
+  bliMedUtenToken: "\xC5pne lenken vi sendte deg for \xE5 bli med.",
+  akseptFeil: (arsak) => `Kunne ikke bli med: ${arsak}`,
+  // 3c (M3.1-delen) — deltakelsen og «Gå ut» (DD-36)
+  deltakelseRegion: "Ditt betaprogram",
+  deltakelsePeriode: (periode2, brukt, maks) => `${periode2} \xB7 ${brukt} av ${maks} kontakter brukt`,
+  deltakelseOppgaverKommer: "Oppgavene kan gj\xF8res n\xE5r det passer deg.",
+  gaaUt: "G\xE5 ut av programmet",
+  gaaUtTittel: "G\xE5 ut av programmet?",
+  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",
   // Felles
   tilbake: "Tilbake",
   lukk: "Lukk",
@@ -1793,6 +1828,309 @@ function InnspelPrivate({ children, style }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.View, { ref, collapsable: false, style, testID: "innspel-privat", children });
 }
 
+// src/program/InnspelProgram.tsx
+var import_core3 = require("@innspel/core");
+var import_react14 = require("react");
+var import_react_native13 = require("react-native");
+
+// src/program/Aksept.tsx
+var import_react13 = require("react");
+var import_react_native12 = require("react-native");
+
+// src/program/periode.ts
+var MANEDER = [
+  "januar",
+  "februar",
+  "mars",
+  "april",
+  "mai",
+  "juni",
+  "juli",
+  "august",
+  "september",
+  "oktober",
+  "november",
+  "desember"
+];
+function periode(opensAt, closesAt) {
+  const fra = new Date(opensAt);
+  const til = new Date(closesAt);
+  if (Number.isNaN(fra.getTime()) || Number.isNaN(til.getTime())) return "";
+  const sammeManed = fra.getMonth() === til.getMonth() && fra.getFullYear() === til.getFullYear();
+  return sammeManed ? `${fra.getDate()}.\u2013${til.getDate()}. ${MANEDER[til.getMonth()]}` : `${fra.getDate()}. ${MANEDER[fra.getMonth()]} \u2013 ${til.getDate()}. ${MANEDER[til.getMonth()]}`;
+}
+function minutterPerOppgave(tasks) {
+  if (tasks.length === 0) return 0;
+  return Math.round(tasks.reduce((sum, t2) => sum + t2.estimatedMinutes, 0) / tasks.length);
+}
+
+// src/program/Aksept.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Aksept({
+  program,
+  harToken,
+  sender,
+  feil,
+  onBliMed,
+  onLukk
+}) {
+  const tema = useTema();
+  const tall = tekst.akseptTall(
+    program.tasks.length,
+    minutterPerOppgave(program.tasks),
+    periode(program.opensAt, program.closesAt),
+    program.maxContacts
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.Modal, { visible: true, transparent: true, animationType: "slide", onRequestClose: onLukk, accessibilityViewIsModal: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.View, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    import_react_native12.View,
+    {
+      testID: "program-aksept",
+      accessibilityViewIsModal: true,
+      style: {
+        backgroundColor: tema.color.bg,
+        borderTopLeftRadius: tema.radius.lg * 2,
+        borderTopRightRadius: tema.radius.lg * 2,
+        padding: tema.screenPadding,
+        gap: tema.space.md,
+        maxHeight: "92%",
+        minHeight: "60%"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Btn, { variant: "ghost", testID: "aksept-tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: onLukk }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.View, {})
+        ] }),
+        feil ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.akseptFeil(feil) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.ScrollView, { contentContainerStyle: { gap: tema.space.md }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(H, { sub: tekst.akseptHva, children: program.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_react_native12.Text,
+            {
+              accessibilityRole: "text",
+              style: {
+                color: tema.color.textPrimary,
+                fontSize: tema.font.body,
+                lineHeight: tema.lineHeight.body,
+                fontWeight: tema.weight.semibold
+              },
+              children: tall
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: program.hypothesis }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Card, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(H, { children: tekst.akseptOppgaver }),
+            program.tasks.map((o) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: { gap: tema.space.xs }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: o.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Hint, { children: [
+                tekst.akseptOppgaveTid(o.estimatedMinutes),
+                o.screenHint ? ` \xB7 ${o.screenHint}` : ""
+              ] })
+            ] }, o.id))
+          ] }),
+          program.knownIssues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Card, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(H, { sub: tekst.akseptKjenteFeilUnder, children: tekst.akseptKjenteFeil(program.knownIssues.length) }),
+            program.knownIssues.map((k) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: { gap: tema.space.xs }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.small, lineHeight: tema.lineHeight.small }, children: k.title }),
+              k.workaround ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small, lineHeight: tema.lineHeight.small }, children: [
+                tekst.omvei,
+                " ",
+                k.workaround
+              ] }) : null,
+              k.fixedIn ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                StatusPill,
+                {
+                  ikon: k.status === "fikset" ? "\u2713" : "\u{1F527}",
+                  etikett: k.status === "fikset" ? tekst.rettetI(k.fixedIn) : tekst.rettesI(k.fixedIn),
+                  farge: k.status === "fikset" ? "success" : "info"
+                }
+              ) : null
+            ] }, k.id))
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Card, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(H, { sub: tekst.akseptInnsamlingTekst, children: tekst.akseptInnsamling }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Hint, { children: tekst.kontekstAldri })
+          ] }),
+          program.termsUrl && !program.commitmentFree ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: { gap: tema.space.xs }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_react_native12.Pressable,
+              {
+                testID: "vilkar-lenke",
+                accessibilityRole: "link",
+                accessibilityLabel: tekst.akseptVilkar,
+                onPress: () => void import_react_native12.Linking.openURL(String(program.termsUrl)),
+                style: { minHeight: tema.touch, justifyContent: "center" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, textDecorationLine: "underline" }, children: [
+                  "\u{1F517} ",
+                  tekst.akseptVilkar
+                ] })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Hint, { children: tekst.akseptVilkarHint })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Hint, { children: tekst.akseptIngenVilkar }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: [
+            "\u{1F6AA} ",
+            tekst.akseptUtgang
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Btn,
+          {
+            testID: "bli-med",
+            label: tekst.bliMed,
+            disabled: !harToken || sender,
+            hint: harToken ? tekst.bliMedHint : tekst.bliMedUtenToken,
+            onPress: onBliMed
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+// src/program/InnspelProgram.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function InnspelProgram({
+  invitationToken,
+  onEndring
+}) {
+  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)(() => {
+    if (client.isAnonymous) return;
+    let levende = true;
+    void client.programs.list().then((svar) => {
+      if (!levende) return;
+      setMine(svar);
+      setDeltakelse(svar.participations.find((p) => p.status !== "trukket"));
+    }).catch(() => void 0);
+    return () => {
+      levende = false;
+    };
+  }, [client]);
+  const bliMed = (0, import_react14.useCallback)(async () => {
+    if (!invitationToken) return;
+    setSender(true);
+    setFeil(void 0);
+    try {
+      const ny = await client.programs.accept(invitationToken);
+      setDeltakelse(ny);
+      setViserAksept(false);
+      onEndring?.(ny);
+    } catch (e) {
+      setFeil(e instanceof import_core3.InnspelApiError ? e.message : "tjeneren svarte ikke.");
+    } finally {
+      setSender(false);
+    }
+  }, [client, invitationToken, onEndring]);
+  const gaaUt = (0, import_react14.useCallback)(async () => {
+    if (!deltakelse) return;
+    setSender(true);
+    try {
+      await client.programs.withdraw(deltakelse.id);
+      setDeltakelse(void 0);
+      setViserGaaUt(false);
+      onEndring?.(null);
+    } catch (e) {
+      setFeil(e instanceof import_core3.InnspelApiError ? e.message : "tjeneren svarte ikke.");
+    } finally {
+      setSender(false);
+    }
+  }, [client, deltakelse, onEndring]);
+  const invitasjon = deltakelse ? void 0 : mine?.invitations[0];
+  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) })
+      ] }),
+      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,
+        {
+          testID: "gaa-ut-dialog",
+          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)(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() })
+            ] })
+          ]
+        }
+      ) }) }) : null
+    ] });
+  }
+  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,
+      {
+        testID: "program-banner",
+        accessibilityLabel: tekst.invitasjonRegion,
+        style: {
+          backgroundColor: tema.color.brandBg,
+          borderRadius: tema.radius.lg,
+          borderWidth: tema.hairline,
+          borderColor: tema.color.brand,
+          padding: tema.space.md,
+          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_runtime12.jsx)(
+              import_react_native13.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" })
+              }
+            )
+          ] }),
+          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) })
+        ]
+      }
+    ),
+    viserAksept ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      Aksept,
+      {
+        program,
+        harToken: !!invitationToken,
+        sender,
+        ...feil ? { feil } : {},
+        onBliMed: () => void bliMed(),
+        onLukk: () => setViserAksept(false)
+      }
+    ) : null
+  ] });
+}
+
 // src/lagring.ts
 function createStorage(pakke) {
   return {
@@ -1816,6 +2154,7 @@ function createMemoryStorage() {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InnspelPrivate,
+  InnspelProgram,
   InnspelProvider,
   byggTema,
   createMemoryStorage,