@innspel/react-native 0.9.4 → 0.10.0

package/README.md

@@ -139,7 +139,7 @@ innsenderen alt ser i kvitteringen. «Ja, jeg også» på en kjent feil gir ikke
 | Mønstervarsel | Ser teksten ut til å inneholde e-post, telefonnummer, kortnummer, IP eller en tilgangsnøkkel, spør widgeten om det skal fjernes. Den fjerner **aldri** noe selv. |
 | Skjermbilde | Valgfritt, én eller to veier: «Legg ved skjermbilde» (skjermen bak arket, tatt ved trykk) og «Velg bilde» (fra galleriet, med din velger). Forhåndsvises og maskeres på enheten — private views automatisk på en fangst, resten med felt, pensel eller «Masker all tekst». Se under. |
 | Kvittering | Lover noe konkret, per spor, med saksnummer. Ber aldri om en vurdering av appen. Feilet bildet, sier den det — saken er sendt uansett. |
-| Mine innspill | Status, løftet som hører til, og svaret fra deg under saken. Det som venter på nett står øverst. |
+| Mine innspill | Status, løftet som hører til, og svaret fra deg under saken. Det som venter på nett står øverst. «Legg til mer» på en åpen sak: ett felt i kortet, maks tre tillegg, aldri et svar på svaret — tilleggene står under innsenderens egen tekst, og i panelet på saken. |
 
 ## Offline
 

package/dist/index.cjs

@@ -392,7 +392,7 @@ function useTema() {
 }
 
 // src/widget/Widget.tsx
-var import_core2 = require("@innspel/core");
+var import_core3 = require("@innspel/core");
 var import_react11 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
@@ -401,6 +401,9 @@ var import_react_native_safe_area_context = require("react-native-safe-area-cont
 var import_react3 = require("react");
 var import_react_native_svg = require("react-native-svg");
 
+// ../../node_modules/ionicons/dist/svg/add-outline.svg
+var add_outline_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon"><path d="M256 112v288M400 256H112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32px"/></svg>';
+
 // ../../node_modules/ionicons/dist/svg/arrow-back-outline.svg
 var arrow_back_outline_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon"><path d="M244 400 100 256l144-144M120 256h292" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48px"/></svg>';
 
@@ -496,6 +499,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var utenTittel = (svg) => svg.replace(/<title>[\s\S]*?<\/title>/g, "");
 var IKONER = Object.fromEntries(
   Object.entries({
+    "add-outline": add_outline_default,
     "arrow-back-outline": arrow_back_outline_default,
     "brush-outline": brush_outline_default,
     // Fylte varianter: bare på sporvalgets to kort (DD-63), der ikonet bærer stemningen.
@@ -906,6 +910,17 @@ var tekst = {
   bildeFjernet: "Bildet er fjernet.",
   svarFra: (leietaker) => `Svar fra ${leietaker}`,
   svarFraGenerisk: "Svar",
+  // DD-69 — «Legg til mer»: innsenderens egne ord, ikke et svar på svaret.
+  leggTilMer: "Legg til mer",
+  leggTilMerLabel: "Legg til mer p\xE5 denne saken",
+  leggTilMerPlaceholder: "Hva vil du legge til?",
+  leggTilMerHint: "Blir st\xE5ende p\xE5 saken din, under det du alt har skrevet. Ikke et svar p\xE5 svaret \u2014 det blir ingen samtale her.",
+  avbryt: "Avbryt",
+  duLaTil: (dato) => `Du la til \xB7 ${dato}`,
+  lagtTil: "Lagt til",
+  tilleggTak: "Du har lagt til tre ganger. Har du mer, send et nytt innspill.",
+  tilleggLukket: "Saken er avsluttet \u2014 send et nytt innspill.",
+  tilleggFeil: (arsak) => `Kunne ikke legge til: ${arsak} Teksten din er beholdt.`,
   sendNytt: "Send nytt innspill",
   /** Tom tilstand: det finnes ikke noe «nytt» å sende når ingenting er sendt. */
   sendForste: "Send innspill",
@@ -1556,6 +1571,7 @@ function Kvittering({
 }
 
 // src/widget/MineInnspill.tsx
+var import_core = require("@innspel/core");
 var import_react9 = require("react");
 var import_react_native7 = require("react-native");
 
@@ -1586,9 +1602,38 @@ function MineInnspill({
   laster,
   tenantName,
   onNytt,
-  storage
+  storage,
+  leggTil,
+  onOppdatert,
+  minTextLength,
+  textMaxLength
 }) {
   const tema = useTema();
+  const min = minTextLength ?? 10;
+  const maks = textMaxLength ?? 280;
+  const [apen, setApen] = (0, import_react9.useState)(null);
+  const [utkast, setUtkast] = (0, import_react9.useState)("");
+  const [sender, setSender] = (0, import_react9.useState)(false);
+  const [feil, setFeil] = (0, import_react9.useState)();
+  const [lagtTil, setLagtTil] = (0, import_react9.useState)();
+  const send = async (id) => {
+    if (!leggTil) return;
+    setSender(true);
+    setFeil(void 0);
+    try {
+      const sak = await leggTil(id, utkast.trim());
+      onOppdatert?.(sak);
+      setApen(null);
+      setUtkast("");
+      setLagtTil(id);
+    } catch (e) {
+      const kode = e instanceof import_core.InnspelApiError ? e.code : void 0;
+      const tekstFeil = kode === "addendum_limit_reached" ? tekst.tilleggTak : kode === "submission_closed" ? tekst.tilleggLukket : tekst.tilleggFeil(e instanceof Error && e.message ? e.message : "ukjent feil.");
+      setFeil({ id, tekst: tekstFeil });
+    } finally {
+      setSender(false);
+    }
+  };
   const [visning, setVisning] = (0, import_react9.useState)(() => rader.map((rad) => ({ rad, nytt: false })));
   (0, import_react9.useEffect)(() => {
     let gjelder = true;
@@ -1610,7 +1655,16 @@ function MineInnspill({
       const venter = rad.pending === true;
       const v = venter ? venterVisning : statusVisning(rad.status, rad.type, rad.deadlineAt);
       const nokkel = venter ? rad.clientRef : rad.id;
+      const sakId = venter ? void 0 : rad.id;
       const svar = venter ? void 0 : rad.reply;
+      const tillegg = venter ? [] : rad.addenda ?? [];
+      const kanLeggeTil = !venter && !!leggTil && rad.canAddAddendum === true;
+      const taketN\u00E5dd = !venter && rad.canAddAddendum === false && tillegg.length >= 3;
+      const feltApent = sakId !== void 0 && apen === sakId;
+      const brukt = utkast.length;
+      const forKort = brukt < min;
+      const full = brukt >= maks;
+      const visTeller = brukt >= maks * 0.8;
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Card, { dashed: venter, children: [
         /* @__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) }),
@@ -1641,10 +1695,123 @@ function MineInnspill({
             children: rad.text
           }
         ),
+        tillegg.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { testID: `tillegg-${sakId}`, style: { gap: tema.space.xs }, children: tillegg.map((a) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          import_react_native7.View,
+          {
+            style: {
+              borderLeftWidth: tema.hairline * 2,
+              borderLeftColor: tema.color.border,
+              paddingLeft: tema.space.sm,
+              gap: tema.space.xs
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { flexDirection: "row", alignItems: "center", gap: tema.space.xs }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Ikon, { navn: "add-outline", storrelse: "minste", farge: tema.color.textSecondary }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: tekst.duLaTil(formaterFrist(a.createdAt)) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: { color: tema.color.textPrimary, fontSize: tema.font.small, lineHeight: tema.lineHeight.small }, children: a.text })
+            ]
+          },
+          a.id
+        )) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { gap: tema.space.xs }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusPill, { ikon: v.ikon, etikett: v.etikett, fg: v.fg, bg: v.bg }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: v.lofte })
         ] }),
+        sakId !== void 0 && lagtTil === sakId ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { accessibilityLiveRegion: "polite", testID: `lagt-til-${sakId}`, style: { color: tema.color.success, fontSize: tema.font.small }, children: tekst.lagtTil }) : null,
+        feltApent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { testID: `tillegg-felt-${sakId}`, style: { gap: tema.space.sm }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: tekst.leggTilMerLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_react_native7.TextInput,
+            {
+              testID: "tillegg-tekst",
+              accessibilityLabel: tekst.leggTilMerLabel,
+              value: utkast,
+              onChangeText: setUtkast,
+              maxLength: maks,
+              multiline: true,
+              numberOfLines: 3,
+              autoFocus: true,
+              placeholder: tekst.leggTilMerPlaceholder,
+              placeholderTextColor: tema.color.textMuted,
+              style: {
+                backgroundColor: tema.color.surfaceRaised,
+                borderWidth: tema.hairline,
+                borderColor: full ? tema.color.warning : 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"
+              }
+            }
+          ),
+          visTeller ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            import_react_native7.Text,
+            {
+              testID: "tillegg-teller",
+              accessibilityLiveRegion: full ? "assertive" : "polite",
+              style: { alignSelf: "flex-end", color: full ? tema.color.warning : tema.color.textMuted, fontSize: tema.font.small },
+              children: [
+                brukt,
+                " / ",
+                maks,
+                full ? tekst.tellerFull : ""
+              ]
+            }
+          ) : null,
+          feil?.id === sakId ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { accessibilityLiveRegion: "assertive", testID: `tillegg-feil-${sakId}`, style: { color: tema.color.danger, fontSize: tema.font.small, lineHeight: tema.lineHeight.small }, children: feil.tekst }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              Btn,
+              {
+                testID: "tillegg-send",
+                label: sender ? tekst.sender : tekst.send,
+                disabled: forKort || sender,
+                busy: sender,
+                ...forKort ? { hint: tekst.forKort(min) } : {},
+                onPress: () => sakId !== void 0 && void send(sakId),
+                grow: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              Btn,
+              {
+                testID: "tillegg-avbryt",
+                label: tekst.avbryt,
+                variant: "secondary",
+                onPress: () => {
+                  setApen(null);
+                  setUtkast("");
+                  setFeil(void 0);
+                },
+                grow: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: tekst.leggTilMerHint })
+        ] }) : kanLeggeTil ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          import_react_native7.Pressable,
+          {
+            testID: `legg-til-mer-${sakId}`,
+            accessibilityRole: "button",
+            accessibilityLabel: tekst.leggTilMerLabel,
+            onPress: () => {
+              if (sakId === void 0) return;
+              setApen(sakId);
+              setUtkast("");
+              setFeil(void 0);
+              setLagtTil(void 0);
+            },
+            style: { alignSelf: "flex-start", minHeight: tema.touch, flexDirection: "row", alignItems: "center", gap: tema.space.xs, paddingHorizontal: tema.space.sm },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Ikon, { navn: "add-outline", storrelse: "minste", farge: tema.color.actionSecondaryText }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: { color: tema.color.actionSecondaryText, fontSize: tema.font.body, fontWeight: tema.weight.semibold }, children: tekst.leggTilMer })
+            ]
+          }
+        ) : taketN\u00E5dd ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: tekst.tilleggTak }) : null,
         !venter && rad.attachmentRemoved ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { testID: `bilde-fjernet-${rad.id}`, style: { flexDirection: "row", gap: tema.space.xs, alignItems: "center" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Ikon, { navn: "trash-outline", storrelse: "minste", farge: tema.color.textMuted }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Hint, { children: tekst.bildeFjernet })
@@ -1681,7 +1848,7 @@ function MineInnspill({
 }
 
 // src/widget/Skjermbilde.tsx
-var import_core = require("@innspel/core");
+var import_core2 = require("@innspel/core");
 var import_react10 = require("react");
 var import_react_native8 = require("react-native");
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -1708,7 +1875,7 @@ function Skjermbilde({
     return { width: Math.floor(bilde.width * s), height: Math.floor(bilde.height * s) };
   }, [ramme, bilde.width, bilde.height]);
   const automasker = (0, import_react10.useMemo)(
-    () => visning ? automaskerRot.map((r) => (0, import_core.skaler)(r, rotStorrelse, visning)) : [],
+    () => visning ? automaskerRot.map((r) => (0, import_core2.skaler)(r, rotStorrelse, visning)) : [],
     [automaskerRot, rotStorrelse, visning]
   );
   const onLayout = (0, import_react10.useCallback)((e) => {
@@ -1719,13 +1886,13 @@ function Skjermbilde({
   const onGrant = (e) => {
     if (!visning) return;
     const p = punkt(e);
-    const treff = egne.findIndex((r) => (0, import_core.treffer)(p, r));
+    const treff = egne.findIndex((r) => (0, import_core2.treffer)(p, r));
     if (treff >= 0) {
       setEgne((x) => x.filter((_, i) => i !== treff));
       return;
     }
     if (verktoy === "felt") {
-      const r = (0, import_core.trykkTilRekt)(p, { width: tema.touch * 4, height: tema.touch }, visning);
+      const r = (0, import_core2.trykkTilRekt)(p, { width: tema.touch * 4, height: tema.touch }, visning);
       if (r) setEgne((x) => [...x, r]);
       return;
     }
@@ -1737,7 +1904,7 @@ function Skjermbilde({
   };
   const onRelease = () => {
     if (verktoy !== "pensel" || !visning || strok.current.length === 0) return;
-    const rekter = (0, import_core.strokTilRekter)(strok.current, screenRules.brushWidth, visning);
+    const rekter = (0, import_core2.strokTilRekter)(strok.current, screenRules.brushWidth, visning);
     strok.current = [];
     if (rekter.length) setEgne((x) => [...x, ...rekter]);
   };
@@ -2138,8 +2305,8 @@ 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);
+      if (e instanceof import_core3.InnspelQueueFullError) setFeil(e.userMessage);
+      else if (e instanceof import_core3.InnspelApiError) setFeil(e.message);
       else setFeil("tjeneren svarte ikke.");
     } finally {
       setSender(false);
@@ -2153,7 +2320,7 @@ function Widget({
         setKvittering({ art: "jaOgsa", nr: res.id });
         setSteg("kvittering");
       } catch (e) {
-        setFeil(e instanceof import_core2.InnspelApiError ? e.message : "tjeneren svarte ikke.");
+        setFeil(e instanceof import_core3.InnspelApiError ? e.message : "tjeneren svarte ikke.");
       } finally {
         setSender(false);
       }
@@ -2318,7 +2485,11 @@ function Widget({
                     rader: mine,
                     laster: lasterMine,
                     ...tenantName ? { tenantName } : {},
-                    onNytt: nyttFraMine
+                    onNytt: nyttFraMine,
+                    leggTil: (id, text) => client.subjects.addAddendum(id, text),
+                    onOppdatert: (sak) => setMine((liste) => liste.map((r) => r.pending !== true && r.id === sak.id ? sak : r)),
+                    minTextLength: innstillinger.minTextLength,
+                    textMaxLength: innstillinger.textMaxLength
                   }
                 ) : null
               ]
@@ -2426,7 +2597,7 @@ function InnspelPrivate({ children, style }) {
 }
 
 // src/program/InnspelProgram.tsx
-var import_core3 = require("@innspel/core");
+var import_core4 = require("@innspel/core");
 var import_react18 = require("react");
 var import_react_native16 = require("react-native");
 
@@ -2874,7 +3045,7 @@ function InnspelProgram({
         }
         setDialog(void 0);
       } catch (e) {
-        setSvarFeil(e instanceof import_core3.InnspelApiError ? e.message : "tjeneren svarte ikke.");
+        setSvarFeil(e instanceof import_core4.InnspelApiError ? e.message : "tjeneren svarte ikke.");
       } finally {
         setSender(false);
       }
@@ -2903,7 +3074,7 @@ function InnspelProgram({
       setViserAksept(false);
       onEndring?.(ny);
     } catch (e) {
-      setFeil(e instanceof import_core3.InnspelApiError ? e.message : "tjeneren svarte ikke.");
+      setFeil(e instanceof import_core4.InnspelApiError ? e.message : "tjeneren svarte ikke.");
     } finally {
       setSender(false);
     }
@@ -2917,7 +3088,7 @@ function InnspelProgram({
       setViserGaaUt(false);
       onEndring?.(null);
     } catch (e) {
-      setFeil(e instanceof import_core3.InnspelApiError ? e.message : "tjeneren svarte ikke.");
+      setFeil(e instanceof import_core4.InnspelApiError ? e.message : "tjeneren svarte ikke.");
     } finally {
       setSender(false);
     }