Ny modal for å spørre om hvilken info SB savner per hjelpemiddel (#434)

.github/workflows/deploy-dev.yaml

@@ -9,6 +9,7 @@ on:
       - 'CODEOWNERS'
     branches:
       - main
+      - savner-informasjon-modal
 
 jobs:
   test:

client/src/innsikt/Fritekst.tsx

@@ -6,7 +6,7 @@ import type { SpørsmålProps } from './Spørsmål'
 
 export function Fritekst(props: SpørsmålProps<IFritekst>) {
   const {
-    spørsmål: { tekst, beskrivelse, påkrevd },
+    spørsmål: { tekst, beskrivelse, påkrevd, maksLengde },
     navn,
     size,
   } = props
@@ -19,7 +19,12 @@ export function Fritekst(props: SpørsmålProps<IFritekst>) {
       label={tekst}
       description={beskrivelse}
       error={error?.message}
-      {...register(name, { required: påkrevd && 'Må fylles ut', maxLength: 1000, shouldUnregister: true })}
+      maxLength={maksLengde}
+      {...register(name, {
+        required: påkrevd && 'Må fylles ut',
+        maxLength: maksLengde ?? 1000,
+        shouldUnregister: true,
+      })}
     />
   )
 }

client/src/innsikt/Spørreundersøkelse.tsx

@@ -1,7 +1,7 @@
 import type { ISpørreundersøkelse, SpørreundersøkelseId } from './spørreundersøkelser'
 import { useSpørreundersøkelse } from './useSpørreundersøkelse'
 import { FormProvider, useForm } from 'react-hook-form'
-import { Button, Modal, ModalProps, ReadMore, VStack } from '@navikt/ds-react'
+import { Alert, Button, Modal, ModalProps, ReadMore, VStack } from '@navikt/ds-react'
 import { Spørsmål } from './Spørsmål'
 import React, { useRef } from 'react'
 import { besvarelseToSvar, IBesvarelse, ISvar } from './Besvarelse'
@@ -14,11 +14,12 @@ export interface SpørreundersøkelseProps extends Pick<ModalProps, 'open'> {
   knappetekst?: string
 
   onBesvar(spørreundersøkelse: ISpørreundersøkelse, besvarelse: IBesvarelse, svar: ISvar[]): void | Promise<void>
+  error?: string | undefined
   onClose?(): void
 }
 
 export function Spørreundersøkelse(props: SpørreundersøkelseProps) {
-  const { open, loading, spørreundersøkelseId, size, knappetekst = 'Besvar', onBesvar, onClose } = props
+  const { open, loading, spørreundersøkelseId, size, knappetekst = 'Besvar', onBesvar, onClose, error } = props
   const { spørreundersøkelse, defaultValues } = useSpørreundersøkelse(spørreundersøkelseId)
   const { spørsmål } = spørreundersøkelse
   const form = useForm<IBesvarelse>({ defaultValues })
@@ -83,6 +84,11 @@ export function Spørreundersøkelse(props: SpørreundersøkelseProps) {
             >
               Avbryt
             </Button>
+            {error && (
+              <Alert variant="error" inline>
+                Klarte ikke å sende inn svaret ditt. Prøv igjen senere.
+              </Alert>
+            )}
           </Modal.Footer>
         </form>
       </FormProvider>

client/src/innsikt/informasjon_om_hjelpemiddel_v1.ts

@@ -0,0 +1,20 @@
+import type { ISpørreundersøkelse } from './spørreundersøkelser'
+
+export const informasjon_om_hjelpemiddel_v1: ISpørreundersøkelse = {
+  skjema: 'informasjon_om_hjelpemiddel_v1',
+  tittel: 'Hvilken informasjon trenger du?',
+  beskrivelse: {
+    header: 'Grunnen til at vi spør om dette',
+    body: 'Teamene som jobber med Hotsak og digital behovsmelding bruker svaret ditt til å lære mer om hvordan vi kan forbedre søknaden, og gi deg som saksbehandler den informasjonen du trenger. Forklar hva du savner av informasjon knyttet til dette hjelpemiddelet. Det du skriver vil kun brukes av teamet som jobber med Hotsak og den digitale behovsmeldingen. Ikke skriv personopplysninger.',
+  },
+  spørsmål: [
+    {
+      type: 'fritekst',
+      tekst: 'Forklar hva du savner av informasjon knyttet til dette hjelpemiddelet.',
+      beskrivelse:
+        'Det du skriver vil kun brukes av teamet som jobber med Hotsak og den digitale behovsmeldingen. Ikke skriv personopplysninger.',
+      påkrevd: true,
+      maksLengde: 250,
+    },
+  ],
+}

client/src/innsikt/spørreundersøkelser.ts

@@ -1,6 +1,7 @@
 import { sak_overført_gosys_v1 } from './sak_overført_gosys_v1'
 import { barnebrillesak_overført_gosys_v1 } from './barnebrillesak_overført_gosys_v1'
 import { desanitizeName } from './Besvarelse'
+import { informasjon_om_hjelpemiddel_v1 } from './informasjon_om_hjelpemiddel_v1'
 
 export type Spørsmålstype = 'enkeltvalg' | 'flervalg' | 'fritekst' | 'oppfølgingsspørsmål'
 
@@ -25,6 +26,7 @@ export interface IFlervalg extends ISpørsmål, IAlternativer {
 
 export interface IFritekst extends ISpørsmål {
   type: 'fritekst'
+  maksLengde?: number
 }
 
 export interface ISpørsmålsliste {
@@ -44,6 +46,7 @@ export interface ISpørreundersøkelse extends ISpørsmålsliste {
 export const spørreundersøkelser = {
   sak_overført_gosys_v1,
   barnebrillesak_overført_gosys_v1,
+  informasjon_om_hjelpemiddel_v1,
 }
 
 export type SpørreundersøkelseId = keyof typeof spørreundersøkelser

client/src/io/http.ts

@@ -5,6 +5,7 @@ import type {
   BrevTekst,
   Brevtype,
   EndreHjelpemiddelRequest,
+  HjelpemiddelType,
   JournalføringRequest,
   OppdaterVilkårData,
   OppgaveStatusType,
@@ -240,6 +241,21 @@ export const putSendTilGosys = async (
   return put(`${baseUrl}/api/sak/${sakId}/tilbakeforing`, { spørreundersøkelse, besvarelse, tilbakemelding: svar })
 }
 
+export const postInformasjonOmHjelpemiddel = async (
+  sakId: number | string,
+  spørreundersøkelse: ISpørreundersøkelse,
+  besvarelse: IBesvarelse,
+  svar: ISvar[],
+  hjelpemiddel: HjelpemiddelType
+) => {
+  return post(`${baseUrl}/api/sak/${sakId}/informasjon-om-hjelpemiddel`, {
+    spørreundersøkelse,
+    besvarelse,
+    tilbakemelding: svar,
+    hjelpemiddel,
+  })
+}
+
 export const postEndringslogginnslagLest = async (endringslogginnslagId: string) => {
   return post(`${baseUrl}/api/endringslogg/leste`, { endringslogginnslagId })
 }

client/src/mocks/handlers/saksbehandling.ts

@@ -115,6 +115,10 @@ export const saksbehandlingHandlers: StoreHandlersFactory = ({ sakStore, barnebr
     return respondNoContent()
   }),
 
+  http.post<SakParams>('/api/sak/:sakId/informasjon-om-hjelpemiddel', async () => {
+    return respondNoContent()
+  }),
+
   http.put<SakParams, { status: OppgaveStatusType }>('/api/sak/:sakId/status', async ({ request, params }) => {
     const sakId = params.sakId
     const { status } = await request.json()

client/src/saksbilde/InformasjonOmHjelpemiddelModal.tsx

@@ -0,0 +1,34 @@
+import type { IBesvarelse, ISvar } from '../innsikt/Besvarelse'
+import { Spørreundersøkelse } from '../innsikt/Spørreundersøkelse'
+import type { ISpørreundersøkelse, SpørreundersøkelseId } from '../innsikt/spørreundersøkelser'
+
+export interface InformasjonOmHjelpemiddelModalProps {
+  open: boolean
+  loading: boolean
+  spørreundersøkelseId: SpørreundersøkelseId
+  onBesvar(spørreundersøkelse: ISpørreundersøkelse, besvarelse: IBesvarelse, svar: ISvar[]): void | Promise<void>
+  error: string | undefined
+  onClose(): void
+}
+
+export function InformasjonOmHjelpemiddelModal({
+  open,
+  loading,
+  spørreundersøkelseId,
+  onBesvar,
+  onClose,
+  error,
+}: InformasjonOmHjelpemiddelModalProps) {
+  return (
+    <Spørreundersøkelse
+      open={open}
+      loading={loading}
+      spørreundersøkelseId={spørreundersøkelseId}
+      size="small"
+      knappetekst="Send"
+      onBesvar={onBesvar}
+      onClose={onClose}
+      error={error}
+    />
+  )
+}

client/src/saksbilde/hjelpemidler/Hjelpemiddel.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import styled from 'styled-components'
 import { useSWRConfig } from 'swr'
 
-import { ChevronDownIcon, ChevronUpIcon, PersonFillIcon } from '@navikt/aksel-icons'
+import { ChatIcon, ChevronDownIcon, ChevronUpIcon, PersonFillIcon } from '@navikt/aksel-icons'
 import { Button, CopyButton, HStack, Link, Tooltip } from '@navikt/ds-react'
 
 import { putEndreHjelpemiddel } from '../../io/http'
@@ -18,12 +18,16 @@ import {
   HjelpemiddelType,
   OppgaveStatusType,
   Sak,
+  Sakstype,
 } from '../../types/types.internal'
 import { EndreHjelpemiddel } from './EndreHjelpemiddel'
 import { Utlevert } from './Utlevert'
 import { useFinnHjelpemiddel } from './useFinnHjelpemiddel'
 import { useHjelpemiddel } from './useHjelpemiddel'
 import { amplitude_taxonomy, logAmplitudeEvent } from '../../utils/amplitude'
+import { InformasjonOmHjelpemiddelModal } from '../InformasjonOmHjelpemiddelModal'
+import { useInformasjonOmHjelpemiddel } from './useInformasjonOmHjelpemiddel'
+import { Avstand } from '../../felleskomponenter/Avstand'
 
 const HjelpemiddelContainer = styled.div`
   font-size: 1rem;
@@ -83,10 +87,11 @@ interface HjelpemiddelProps {
 }
 
 export const Hjelpemiddel: React.FC<HjelpemiddelProps> = ({ hjelpemiddel, forenkletVisning, sak }) => {
-  const { personinformasjon, status, sakId } = sak
+  const { personinformasjon, status, sakId, sakstype } = sak
 
   const [visEndreProdukt, setVisEndreProdukt] = useState(false)
   const { mutate } = useSWRConfig()
+  const informasjonOmHjelpemiddel = useInformasjonOmHjelpemiddel(sakId, 'informasjon_om_hjelpemiddel_v1', hjelpemiddel)
 
   const produkt = useFinnHjelpemiddel(hjelpemiddel.hmsnr)
   const endretProdukt = hjelpemiddel.endretHjelpemiddel
@@ -272,6 +277,30 @@ export const Hjelpemiddel: React.FC<HjelpemiddelProps> = ({ hjelpemiddel, forenk
           </Rad>
         )}
       </Rad>
+
+      {(window.appSettings.MILJO === 'local' || window.appSettings.MILJO === 'dev-gcp') &&
+        sakstype === Sakstype.SØKNAD &&
+        status === OppgaveStatusType.TILDELT_SAKSBEHANDLER && (
+          <Avstand marginTop={2}>
+            <Rad>
+              <EtikettKolonne />
+              <Kolonne>
+                <div>
+                  <Button
+                    variant="tertiary"
+                    size="small"
+                    icon={<ChatIcon />}
+                    iconPosition="left"
+                    onClick={() => informasjonOmHjelpemiddel.onOpen()}
+                  >
+                    Jeg ønsker mer informasjon
+                  </Button>
+                </div>
+              </Kolonne>
+            </Rad>
+          </Avstand>
+        )}
+
       {forenkletVisning && visEndreProdukt ? (
         <EndreHjelpemiddel
           hjelpemiddelId={hjelpemiddel.id}
@@ -284,6 +313,13 @@ export const Hjelpemiddel: React.FC<HjelpemiddelProps> = ({ hjelpemiddel, forenk
       ) : (
         <Strek />
       )}
+
+      <InformasjonOmHjelpemiddelModal
+        {...informasjonOmHjelpemiddel}
+        onBesvar={async (spørreundersøkelse, besvarelse, svar) => {
+          await informasjonOmHjelpemiddel.onBesvar(spørreundersøkelse, besvarelse, svar)
+        }}
+      />
     </HjelpemiddelContainer>
   )
 }

client/src/saksbilde/hjelpemidler/useInformasjonOmHjelpemiddel.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+
+import { SpørreundersøkelseId } from '../../innsikt/spørreundersøkelser'
+import { postInformasjonOmHjelpemiddel } from '../../io/http'
+import { HjelpemiddelType } from '../../types/types.internal'
+import { InformasjonOmHjelpemiddelModalProps } from '../InformasjonOmHjelpemiddelModal'
+
+export function useInformasjonOmHjelpemiddel(
+  sakId: string,
+  spørreundersøkelseId: SpørreundersøkelseId,
+  hjelpemiddel: HjelpemiddelType
+): InformasjonOmHjelpemiddelModalProps & {
+  onOpen(): void
+} {
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  return {
+    open,
+    loading,
+    spørreundersøkelseId,
+    error,
+    onOpen() {
+      setOpen(true)
+    },
+    onClose() {
+      setOpen(false)
+      setError(undefined)
+    },
+    async onBesvar(spørreundersøkelse, besvarelse, svar) {
+      setError(undefined)
+      setLoading(true)
+      try {
+        await postInformasjonOmHjelpemiddel(sakId, spørreundersøkelse, besvarelse, svar, hjelpemiddel)
+        setOpen(false)
+      } catch (err: any) {
+        console.log(err)
+        setError(err)
+      } finally {
+        setLoading(false)
+      }
+    },
+  }
+}