Fritekstfelt på vedtaksiden hvis det er avslag på grunn opplysningsplikt

client/src/mocks/data/BarnebrillesakStore.ts

@@ -1,4 +1,3 @@
-import { log } from 'console'
 import dayjs from 'dayjs'
 import Dexie, { Table } from 'dexie'
 
@@ -24,8 +23,8 @@ import {
   TotrinnskontrollVurdering,
   Utbetalingsmottaker,
   Vilkår,
-  Vilkårsgrunnlag,
   VilkårsResultat,
+  Vilkårsgrunnlag,
   Vilkårsvurdering,
   VurderVilkårRequest,
 } from '../../types/types.internal'
@@ -492,8 +491,8 @@ export class BarnebrillesakStore extends Dexie {
     return this.notater.where('sakId').equals(sakId).toArray()
   }
 
-  async lagreBrevtekst(sakId: string, brevmal: string, brevtekst: string) {
-    this.brevtekst.put({ brevmal, målform: MålformType.BOKMÅL, data: { brevtekst: brevtekst }, sakId }, sakId)
+  async lagreBrevtekst(sakId: string, brevtype: string, brevtekst: string) {
+    this.brevtekst.put({ brevtype, målform: MålformType.BOKMÅL, data: { brevtekst: brevtekst }, sakId }, sakId)
   }
 
   async fjernBrevtekst(sakId: string) {

client/src/mocks/data/JournalpostStore.ts

@@ -48,25 +48,12 @@ function lagDokumenter(journalpostID: string): Array<Omit<LagretDokument, 'dokum
   return [
     {
       journalpostID,
+
       tittel: 'Tilskudd ved kjøp av briller til barn',
       brevkode: 'NAV 10-07.34',
       vedlegg: [],
       varianter: [{ format: DokumentFormat.ORIGINAL }, { format: DokumentFormat.ARKIV }],
     },
-    {
-      journalpostID,
-      tittel: 'Originalkvittering',
-      brevkode: 'X5',
-      vedlegg: [],
-      varianter: [{ format: DokumentFormat.ARKIV }],
-    },
-    {
-      journalpostID,
-      tittel: 'Kvitteringsside for dokumentinnsending',
-      brevkode: 'L7',
-      vedlegg: [],
-      varianter: [{ format: DokumentFormat.ARKIV }],
-    },
   ]
 }
 

client/src/mocks/handlers/brevTekst.ts

@@ -3,15 +3,15 @@ import { rest } from 'msw'
 import { BrevTekst } from '../../types/types.internal'
 import { StoreHandlersFactory } from '../data'
 
-type NyBrevtekst = Pick<BrevTekst, 'brevmal' | 'data'>
+type NyBrevtekst = Pick<BrevTekst, 'brevtype' | 'data'>
 
 export const brevtekstHandlers: StoreHandlersFactory = ({ barnebrillesakStore }) => [
   rest.post<NyBrevtekst, { sakId: string }>(`/api/sak/:sakId/brevutkast`, async (req, res, ctx) => {
-    const { brevmal, data } = await req.json<NyBrevtekst>()
-    await barnebrillesakStore.lagreBrevtekst(req.params.sakId, brevmal, data.brevtekst)
+    const { brevtype, data } = await req.json<NyBrevtekst>()
+    await barnebrillesakStore.lagreBrevtekst(req.params.sakId, brevtype, data.brevtekst)
     return res(ctx.delay(500), ctx.status(201))
   }),
-  rest.get<undefined, { sakId: string }>(`/api/sak/:sakId/brevutkast/:brevmal`, async (req, res, ctx) => {
+  rest.get<undefined, { sakId: string }>(`/api/sak/:sakId/brevutkast/:brevtype`, async (req, res, ctx) => {
     const brevTekst = await barnebrillesakStore.hentBrevtekst(req.params.sakId)
 
     if (brevTekst) {
@@ -20,7 +20,7 @@ export const brevtekstHandlers: StoreHandlersFactory = ({ barnebrillesakStore })
       return res(
         ctx.delay(200),
         ctx.status(200),
-        ctx.json({ sakId: req.params.sakId, brevmal: '', data: { brevtekst: '' } })
+        ctx.json({ sakId: req.params.sakId, brevtype: '', data: { brevtekst: '' } })
       )
     }
   }),

client/src/saksbilde/barnebriller/steg/søknadsregistrering/skjemaelementer/Opplysningsplikt.tsx

@@ -23,10 +23,12 @@ export function Opplysningsplikt() {
         )}
       />
       {opplysningsplikt.vilkårOppfylt === VilkårsResultat.NEI && (
-        <Alert variant="warning" size="small">
-          Denne vurderingen vil gjøre at søkeren får avslag med begrunnelsen at opplysningsplikten ikke er oppfylt
-          (ftrl. $ 21-3)
-        </Alert>
+        <Avstand paddingTop={6}>
+          <Alert variant="warning" size="small">
+            Denne vurderingen vil gjøre at søkeren får avslag med begrunnelsen at opplysningsplikten ikke er oppfylt
+            (ftrl. $ 21-3)
+          </Alert>
+        </Avstand>
       )}
     </Avstand>
   )

client/src/saksbilde/barnebriller/steg/vedtak/Vedtak.tsx

@@ -1,10 +1,11 @@
-import { useState } from 'react'
+import { ChangeEvent, useEffect, useState } from 'react'
 import { useParams } from 'react-router'
 import styled from 'styled-components'
+import useSWR from 'swr'
 
-import { Alert, Button, Detail, Heading, Panel, Tag } from '@navikt/ds-react'
+import { Alert, Button, Detail, Heading, Loader, Panel, Tag, Textarea } from '@navikt/ds-react'
 
-import { post } from '../../../../io/http'
+import { post, postBrevutkast } from '../../../../io/http'
 import { formaterDato } from '../../../../utils/date'
 import { capitalizeName, formaterKontonummer } from '../../../../utils/stringFormating'
 
@@ -14,9 +15,17 @@ import { Knappepanel } from '../../../../felleskomponenter/Button'
 import { Kolonne, Rad } from '../../../../felleskomponenter/Flex'
 import { TreKolonner } from '../../../../felleskomponenter/Kolonner'
 import { SkjemaAlert } from '../../../../felleskomponenter/SkjemaAlert'
+import { Bakgrunnslagring } from '../../../../felleskomponenter/brev/Bakgrunnslagring'
 import { Etikett } from '../../../../felleskomponenter/typografi'
 import { useSaksbehandlerKanRedigereBarnebrillesak } from '../../../../tilgang/useSaksbehandlerKanRedigereBarnebrillesak'
-import { Brevtype, OppgaveStatusType, StegType, VilkårsResultat } from '../../../../types/types.internal'
+import {
+  BrevTekst,
+  Brevtype,
+  MålformType,
+  OppgaveStatusType,
+  StegType,
+  VilkårsResultat,
+} from '../../../../types/types.internal'
 import { useBrillesak } from '../../../sakHook'
 import { useManuellSaksbehandlingContext } from '../../ManuellSaksbehandlingTabContext'
 import { alertVariant } from '../vilkårsvurdering/oppsummertStatus'
@@ -28,6 +37,15 @@ export const Vedtak: React.FC = () => {
   const { setValgtTab } = useManuellSaksbehandlingContext()
   const { sak, mutate } = useBrillesak()
   const saksbehandlerKanRedigereBarnebrillesak = useSaksbehandlerKanRedigereBarnebrillesak(sak?.data)
+  const { data } = useBrevtekst(saksnummer)
+
+  const brevtekst = data?.data.brevtekst
+  const [fritekst, setFritekst] = useState(brevtekst || '')
+  const [submitAttempt, setSubmitAttempt] = useState(false)
+  const [timer, setTimer] = useState<NodeJS.Timeout | undefined>(undefined)
+  const [valideringsFeil, setValideringsfeil] = useState<string | undefined>(undefined)
+  const [lagrer, setLagrer] = useState(false)
+  const debounceVentetid = 2000
 
   const VENSTREKOLONNE_BREDDE = '180px'
 
@@ -45,6 +63,62 @@ export const Vedtak: React.FC = () => {
       })
   }
 
+  useEffect(() => {
+    if (brevtekst) {
+      setFritekst(brevtekst)
+    }
+  }, [brevtekst])
+
+  useEffect(() => {
+    if (lagrer) {
+      // kall forhåndsvisning
+    }
+  }, [lagrer])
+
+  useEffect(() => {
+    if (submitAttempt) {
+      valider()
+    }
+  }, [fritekst, submitAttempt])
+
+  const valider = () => {
+    if (fritekst === '') {
+      setValideringsfeil('Du kan ikke sende brevet uten å ha lagt til tekst')
+      return false
+    } else {
+      setValideringsfeil(undefined)
+      return true
+    }
+  }
+
+  const onTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setFritekst(event.target.value)
+    clearTimeout(timer)
+
+    const newTimer = setTimeout(() => {
+      lagreUtkast(event.target.value)
+    }, debounceVentetid)
+
+    setTimer(newTimer)
+  }
+
+  function byggBrevPayload(tekst?: string): BrevTekst {
+    return {
+      sakId: saksnummer!,
+      målform: sak?.data.vilkårsgrunnlag?.målform || MålformType.BOKMÅL,
+      brevtype: Brevtype.BARNEBRILLER_INNHENTE_OPPLYSNINGER,
+      data: {
+        brevtekst: tekst ? tekst : fritekst,
+      },
+    }
+  }
+
+  const lagreUtkast = async (tekst: string) => {
+    setLagrer(true)
+    await postBrevutkast(byggBrevPayload(tekst))
+    setLagrer(false)
+  }
+
   if (!sak) return <div>Fant ikke saken</div> // TODO: Håndere dette bedre/høyrere opp i komponent treet.
 
   if (sak?.data.steg === StegType.INNHENTE_FAKTA) {
@@ -81,6 +155,10 @@ export const Vedtak: React.FC = () => {
     sak.data.status === OppgaveStatusType.TILDELT_SAKSBEHANDLER &&
     (status === VilkårsResultat.NEI || sak?.data.utbetalingsmottaker?.kontonummer !== undefined)
 
+  const visFritekstFelt =
+    sak.data.vilkårsgrunnlag?.opplysningsplikt.vilkårOppfylt === VilkårsResultat.NEI &&
+    sak.data.status === OppgaveStatusType.TILDELT_SAKSBEHANDLER
+
   return (
     <TreKolonner>
       <Panel>
@@ -155,6 +233,33 @@ export const Vedtak: React.FC = () => {
         )}
         {!vedtakFattet && (
           <>
+            {visFritekstFelt && (
+              <>
+                <Avstand paddingTop={6} />
+                <Textarea
+                  minRows={5}
+                  maxRows={20}
+                  label="Beskriv hvilke opplysninger som mangler"
+                  error={valideringsFeil}
+                  description="Vises i brevet som en del av begrunnelsen for avslaget"
+                  size="small"
+                  value={fritekst}
+                  onChange={(event) => onTextChange(event)}
+                />
+                <Bakgrunnslagring>
+                  {lagrer && (
+                    <>
+                      <span>
+                        <Loader size="xsmall" />
+                      </span>
+                      <span>
+                        <Detail>Lagrer</Detail>
+                      </span>
+                    </>
+                  )}
+                </Bakgrunnslagring>
+              </>
+            )}
             <Avstand paddingBottom={6} />
             {visAlertGodkjenning && (
               <Alert variant="info" size="small">
@@ -181,7 +286,12 @@ export const Vedtak: React.FC = () => {
         )}
       </Panel>
       <VenstreKolonne>
-        <BrevPanel sakId={sak.data.sakId} fullSize={true} brevtype={Brevtype.BARNEBRILLER_VEDTAK} />
+        <BrevPanel
+          sakId={sak.data.sakId}
+          fullSize={true}
+          brevtype={Brevtype.BARNEBRILLER_VEDTAK}
+          hentForhåndsvisningPåNytt={lagrer}
+        />
       </VenstreKolonne>
     </TreKolonner>
   )
@@ -193,3 +303,13 @@ const VenstreKolonne = styled(Panel)`
   margin: 0;
   height: 100%;
 `
+
+// Todo fix nullable når flytter til egen komponent
+function useBrevtekst(sakId?: string, brevtype = Brevtype.BARNEBRILLER_VEDTAK) {
+  const { data, isLoading } = useSWR<BrevTekst>(sakId ? `/api/sak/${sakId}/brevutkast/${brevtype}` : null)
+
+  return {
+    data,
+    isLoading,
+  }
+}

client/src/saksbilde/barnebriller/steg/vedtak/brev/BrevPanel.tsx

@@ -23,17 +23,19 @@ interface BrevPanelProps {
   sakId: number | string
   brevtype: Brevtype
   fullSize: boolean
+  hentForhåndsvisningPåNytt?: boolean
 }
 
 export const BrevPanel: React.FC<BrevPanelProps> = (props) => {
-  const { sakId, brevtype, fullSize } = props
+  const { sakId, brevtype, fullSize, hentForhåndsvisningPåNytt } = props
   const { hentetDokument, hentForhåndsvisning, isDokumentError } = useBrev()
 
   useEffect(() => {
-    if (sakId) {
+    if (sakId || hentForhåndsvisningPåNytt) {
+      console.log('Henter forhåndsvisning på nytt')
       hentForhåndsvisning(sakId, brevtype)
     }
-  }, [sakId])
+  }, [sakId, hentForhåndsvisningPåNytt])
 
   if (!sakId) {
     return <div>Mangler sakID</div>

client/src/saksbilde/høyrekolonne/brevutsending/SendBrevPanel.tsx

@@ -1,5 +1,4 @@
 import React, { ChangeEvent, useEffect, useState } from 'react'
-import styled from 'styled-components'
 import useSwr, { useSWRConfig } from 'swr'
 
 import { Button, Detail, Heading, Loader, Panel, Radio, RadioGroup, Select, Skeleton, Textarea } from '@navikt/ds-react'
@@ -9,8 +8,9 @@ import { postBrevutkast, postBrevutsending } from '../../../io/http'
 import { Avstand } from '../../../felleskomponenter/Avstand'
 import { Knappepanel } from '../../../felleskomponenter/Button'
 import { InfoToast } from '../../../felleskomponenter/Toast'
+import { Bakgrunnslagring } from '../../../felleskomponenter/brev/Bakgrunnslagring'
 import { Brødtekst } from '../../../felleskomponenter/typografi'
-import { Brevmal, BrevTekst, MålformType } from '../../../types/types.internal'
+import { BrevTekst, Brevtype, MålformType } from '../../../types/types.internal'
 import { ForhåndsvisningsModal } from './ForhåndsvisningModal'
 import { SendBrevModal } from './SendBrevModal'
 import { UtgåendeBrev } from './UtgåendeBrev'
@@ -76,7 +76,7 @@ export const SendBrevPanel = React.memo((props: SendBrevProps) => {
     return {
       sakId: sakId,
       målform: valgtMålform || målform,
-      brevmal: Brevmal.BARNEBRILLER_INNHENTE_OPPLYSNINGER,
+      brevtype: Brevtype.BARNEBRILLER_INNHENTE_OPPLYSNINGER,
       data: {
         brevtekst: tekst ? tekst : fritekst,
       },
@@ -130,7 +130,7 @@ export const SendBrevPanel = React.memo((props: SendBrevProps) => {
           ) : (
             <form onSubmit={(e) => e.preventDefault()}>
               <Select size="small" label="Velg brevmal">
-                <option value={Brevmal.BARNEBRILLER_INNHENTE_OPPLYSNINGER}>Innhente opplysninger</option>
+                <option value={Brevtype.BARNEBRILLER_INNHENTE_OPPLYSNINGER}>Innhente opplysninger</option>
               </Select>
               <Avstand paddingTop={6} />
               <RadioGroup
@@ -212,21 +212,11 @@ export const SendBrevPanel = React.memo((props: SendBrevProps) => {
   )
 })
 
-function useBrevtekst(sakId: string, brevmal = Brevmal.BARNEBRILLER_INNHENTE_OPPLYSNINGER) {
-  const { data, isLoading } = useSwr<BrevTekst>(`/api/sak/${sakId}/brevutkast/${brevmal}`)
+function useBrevtekst(sakId: string, brevtype = Brevtype.BARNEBRILLER_INNHENTE_OPPLYSNINGER) {
+  const { data, isLoading } = useSwr<BrevTekst>(`/api/sak/${sakId}/brevutkast/${brevtype}`)
 
   return {
     data,
     isLoading,
   }
 }
-
-const Bakgrunnslagring = styled.div`
-  display: flex;
-  justify-content: right;
-  vertical-align: baseline;
-  gap: 0.4rem;
-  padding-top: 0.5rem;
-  padding-right: 0.6rem;
-  height: var(--a-spacing-4);
-`

client/src/types/types.internal.ts

@@ -311,7 +311,7 @@ export interface BrevTekst {
   sakId: string
   målform: MålformType
   data: { brevtekst: string }
-  brevmal: string
+  brevtype: string
 }
 
 export interface HjelpemiddelArtikkel {
@@ -769,10 +769,6 @@ export enum BarnebrilleSidebarTabs {
   NOTAT = 'NOTAT',
 }
 
-export enum Brevmal {
-  BARNEBRILLER_INNHENTE_OPPLYSNINGER = 'BARNEBRILLER_INNHENTE_OPPLYSNINGER',
-}
-
 export enum Brevtype {
   BARNEBRILLER_VEDTAK = 'BARNEBRILLER_VEDTAK',
   BARNEBRILLER_INNHENTE_OPPLYSNINGER = 'BARNEBRILLER_INNHENTE_OPPLYSNINGER',