@innspel/react-native 0.9.2 → 0.9.4

package/README.md

@@ -112,6 +112,23 @@ Innspels. Innsenderen skal se hvem som svarte.
 `fontFamily` finnes ikke som token: systemfonten er standard i React Native, og
 å sette den ville brutt med appen rundt.
 
+## Når et innspill er sendt
+
+`onSubmitted` kalles etter en innsending — også når nettet var borte og innspillet
+ligger i køen, for innsenderen trykket Send. Du får `type`, `queued`, og `id` når
+saken finnes hos tjeneren. Ingen identitet: saksnummeret er sakens, og det
+innsenderen alt ser i kvitteringen. «Ja, jeg også» på en kjent feil gir ikke kallet.
+
+```tsx
+<InnspelProvider
+  client={innspel}
+  onSubmitted={({ queued }) => {
+    hentTellingPaaNytt();                 // «Mine innspill · N» i din egen meny
+    if (!queued) spørOmVarslerHvisFørste(); // riktig øyeblikk — ikke ved oppstart
+  }}
+>
+```
+
 ## Hva innsenderen møter
 
 | Skjerm | Hva |

package/dist/index.cjs

@@ -836,9 +836,7 @@ var tekst = {
   fjernLenke: "Fjern lenken til den kjente feilen",
   // 2f — skjermbilde (K4, DD-39, DD-40, DD-42)
   leggVedSkjermbilde: "Legg ved skjermbilde",
-  leggVedHint: "Bildet tas f\xF8rst n\xE5r du trykker \u2014 du ser det f\xF8r det sendes.",
   velgBilde: "Velg bilde",
-  velgBildeHint: "Fra bildene dine. Du ser det og kan maskere det f\xF8r det sendes.",
   skjermbildeUnderGalleri: "Bildet er fra galleriet. Appen maskerer ingenting i det for deg \u2014 mal over det som ikke skal med.",
   bildeFeilet: "kunne ikke hente bildet. Du kan sende uten.",
   skjermbildeTittel: "Se over bildet",
@@ -902,6 +900,8 @@ var tekst = {
   mineSak: (nr) => `Sak ${saksnr(nr)}`,
   /** «Feil · sak 2041» — sporet først, aldri rå id og aldri kontraktens type (DD-50). */
   sakHode: (spor, nr) => `${stor(spor)} \xB7 sak ${saksnr(nr)}`,
+  /** F14: svaret kom siden forrige gang denne enheten viste lista. */
+  nyttSvar: "Nytt svar",
   // Leietakeren fjernet vedlegget. Bare AT — aldri hvorfor, av hvem eller når.
   bildeFjernet: "Bildet er fjernet.",
   svarFra: (leietaker) => `Svar fra ${leietaker}`,
@@ -1191,31 +1191,35 @@ function Felt({
                 )
               ]
             }
-          ) : onSkjermbilde || onVelgBilde ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: { gap: tema.space.sm }, children: [
-            onSkjermbilde ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              Btn,
-              {
-                variant: "secondary",
-                testID: "legg-ved-skjermbilde",
-                ikon: "camera-outline",
-                label: tekst.leggVedSkjermbilde,
-                hint: tekst.leggVedHint,
-                onPress: onSkjermbilde
-              }
-            ) : null,
-            onVelgBilde ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              Btn,
-              {
-                variant: "secondary",
-                testID: "velg-bilde",
-                ikon: "images-outline",
-                label: tekst.velgBilde,
-                hint: tekst.velgBildeHint,
-                onPress: onVelgBilde
-              }
-            ) : null,
-            bildeNotat ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { testID: "bilde-notat", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Hint, { children: bildeNotat }) }) : null
-          ] }) : null,
+          ) : onSkjermbilde || onVelgBilde ? (
+            // F7 (brukerreisene 2026-09-15): knappene har ingen egen hjelpetekst. Web-widgeten
+            // har aldri hatt det, og Følget sender sin egen setning som `imageStepNote` — med
+            // pakkens hint i tillegg sto det tre tekster under to knapper. Løftet om at bildet
+            // tas ved trykk og kan maskeres står i selve steget (Skjermbilde), der det gjelder.
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: { gap: tema.space.sm }, children: [
+              onSkjermbilde ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                Btn,
+                {
+                  variant: "secondary",
+                  testID: "legg-ved-skjermbilde",
+                  ikon: "camera-outline",
+                  label: tekst.leggVedSkjermbilde,
+                  onPress: onSkjermbilde
+                }
+              ) : null,
+              onVelgBilde ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                Btn,
+                {
+                  variant: "secondary",
+                  testID: "velg-bilde",
+                  ikon: "images-outline",
+                  label: tekst.velgBilde,
+                  onPress: onVelgBilde
+                }
+              ) : null,
+              bildeNotat ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { testID: "bilde-notat", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Hint, { children: bildeNotat }) }) : null
+            ] })
+          ) : null,
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: { borderTopWidth: tema.hairline, borderTopColor: tema.color.border, paddingTop: tema.space.sm }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               import_react_native3.Pressable,
@@ -1554,23 +1558,78 @@ function Kvittering({
 // src/widget/MineInnspill.tsx
 var import_react9 = require("react");
 var import_react_native7 = require("react-native");
+
+// src/widget/nyttSvar.ts
+var N\u00D8KKEL = "innspel:svar-sett";
+async function merkNyeSvar(rader, storage) {
+  let grense = 0;
+  try {
+    grense = Number.parseInt(await storage.get(N\u00D8KKEL) ?? "", 10) || 0;
+  } catch {
+    grense = 0;
+  }
+  const tid = (r) => r.pending === true ? NaN : Date.parse(r.reply?.at ?? "");
+  const merket = rader.map((rad) => ({ rad, nytt: tid(rad) > grense }));
+  return [...merket.filter((m) => m.nytt), ...merket.filter((m) => !m.nytt)];
+}
+async function markerSvarSett(storage, n\u00E5 = Date.now()) {
+  try {
+    await storage.set(N\u00D8KKEL, String(n\u00E5));
+  } catch {
+  }
+}
+
+// src/widget/MineInnspill.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function MineInnspill({
   rader,
   laster,
   tenantName,
-  onNytt
+  onNytt,
+  storage
 }) {
   const tema = useTema();
+  const [visning, setVisning] = (0, import_react9.useState)(() => rader.map((rad) => ({ rad, nytt: false })));
+  (0, import_react9.useEffect)(() => {
+    let gjelder = true;
+    void merkNyeSvar(rader, storage).then((m) => {
+      if (gjelder) setVisning(m);
+    }).catch(() => {
+      if (gjelder) setVisning(rader.map((rad) => ({ rad, nytt: false })));
+    });
+    return () => {
+      gjelder = false;
+    };
+  }, [storage, rader]);
+  (0, import_react9.useEffect)(() => {
+    if (!laster && rader.length) void markerSvarSett(storage).catch(() => void 0);
+  }, [storage, laster, rader]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { flex: 1, gap: tema.space.md }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(H, { sub: tekst.mineUnder, children: tekst.mineTittel }),
-    laster ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.ActivityIndicator, { accessibilityLabel: "Henter innspillene dine", color: tema.color.textSecondary }) : rader.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: tekst.mineTom }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.ScrollView, { style: { flex: 1 }, contentContainerStyle: { gap: tema.space.sm }, children: rader.map((rad) => {
+    laster ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.ActivityIndicator, { accessibilityLabel: "Henter innspillene dine", color: tema.color.textSecondary }) : rader.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: tekst.mineTom }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.ScrollView, { style: { flex: 1 }, contentContainerStyle: { gap: tema.space.sm }, children: visning.map(({ rad, nytt }) => {
       const venter = rad.pending === true;
       const v = venter ? venterVisning : statusVisning(rad.status, rad.type, rad.deadlineAt);
       const nokkel = venter ? rad.clientRef : rad.id;
       const svar = venter ? void 0 : rad.reply;
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Card, { dashed: venter, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: venter ? `${tekst.mineIkkeSendt} \xB7 ${rad.type === "onske" ? tekst.onske : tekst.feil}` : tekst.sakHode(rad.type === "onske" ? tekst.onske : tekst.feil, rad.id) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { flexDirection: "row", alignItems: "center", gap: tema.space.xs, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: venter ? `${tekst.mineIkkeSendt} \xB7 ${rad.type === "onske" ? tekst.onske : tekst.feil}` : tekst.sakHode(rad.type === "onske" ? tekst.onske : tekst.feil, rad.id) }),
+          nytt ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_react_native7.Text,
+            {
+              testID: "nytt-svar",
+              style: {
+                color: tema.color.info,
+                backgroundColor: tema.color.infoBg,
+                fontSize: tema.font.tiny,
+                fontWeight: tema.weight.semibold,
+                borderRadius: tema.radius.pill,
+                paddingHorizontal: tema.space.sm
+              },
+              children: tekst.nyttSvar
+            }
+          ) : null
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_react_native7.Text,
           {
@@ -1860,7 +1919,8 @@ function Widget({
   apneOpsjoner,
   onLukk,
   tenantName,
-  imageStepNote
+  imageStepNote,
+  onSubmitted
 }) {
   const tema = useTema();
   const insets = (0, import_react11.useContext)(import_react_native_safe_area_context.SafeAreaInsetsContext) ?? import_react_native_safe_area_context.initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
@@ -2062,7 +2122,7 @@ function Widget({
         text: verdi,
         ...vedlegg ? { attachment: vedlegg } : {},
         ...spor === "feil" && lenketTil ? { relatedKnownIssueId: lenketTil.id } : {},
-        ...fjernede.length ? { context: fjernetKontekst(client, fjernede) } : {}
+        context: fjernetKontekst(client, fjernede, apneOpsjoner?.screen)
       });
       if (res.status === "queued") {
         setKvittering({ art: "k\xF8", ...res.attachment ? { vedlegg: "forkastet" } : {} });
@@ -2076,6 +2136,7 @@ function Widget({
         });
       }
       setSteg("kvittering");
+      onSubmitted?.(res.status === "queued" ? { type: spor, queued: true } : { type: spor, queued: false, id: res.submission.id });
     } catch (e) {
       if (e instanceof import_core2.InnspelQueueFullError) setFeil(e.userMessage);
       else if (e instanceof import_core2.InnspelApiError) setFeil(e.message);
@@ -2083,7 +2144,7 @@ function Widget({
     } finally {
       setSender(false);
     }
-  }, [client, spor, verdi, vedlegg, lenketTil, fjernede]);
+  }, [client, spor, verdi, vedlegg, lenketTil, fjernede, apneOpsjoner?.screen, onSubmitted]);
   const jaOgsa = (0, import_react11.useCallback)(
     async (k) => {
       setSender(true);
@@ -2210,7 +2271,7 @@ function Widget({
                     onEndre: endreTekst,
                     minTextLength: innstillinger.minTextLength,
                     textMaxLength: innstillinger.textMaxLength,
-                    kontekst: client.context,
+                    kontekst: { ...client.context, ...apneOpsjoner?.screen ? { screen: apneOpsjoner.screen } : {} },
                     fjernedeFelter: fjernede,
                     onFjernKontekst: (f) => setFjernede((x) => [...x, f]),
                     ...lenketTil ? { lenketTil, onFjernLenke: () => setLenketTil(void 0) } : {},
@@ -2253,6 +2314,7 @@ function Widget({
                 steg === "mine" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   MineInnspill,
                   {
+                    storage: client.storage,
                     rader: mine,
                     laster: lasterMine,
                     ...tenantName ? { tenantName } : {},
@@ -2277,9 +2339,10 @@ function useNettstatus(client) {
   }, [c]);
   return online;
 }
-function fjernetKontekst(client, fjernede) {
+function fjernetKontekst(client, fjernede, skjerm) {
   const ut = {};
-  for (const k of Object.keys(client.context)) {
+  if (skjerm) ut["screen"] = skjerm;
+  for (const k of [...Object.keys(client.context), "screen"]) {
     if (k !== "sdkVersion" && fjernede.includes(k)) ut[k] = void 0;
   }
   return ut;
@@ -2295,7 +2358,8 @@ function InnspelProvider({
   colorScheme = "dark",
   tenantName,
   screenshot,
-  imageStepNote
+  imageStepNote,
+  onSubmitted
 }) {
   const [synlig, setSynlig] = (0, import_react12.useState)(false);
   const [apneOpsjoner, setApneOpsjoner] = (0, import_react12.useState)();
@@ -2330,6 +2394,7 @@ function InnspelProvider({
         ...apneOpsjoner ? { apneOpsjoner } : {},
         ...tenantName ? { tenantName } : {},
         ...imageStepNote ? { imageStepNote } : {},
+        ...onSubmitted ? { onSubmitted } : {},
         onLukk: close
       }
     )