From 7d33a7c29c124cba2dd9127e241bc5cfe3f27f7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon?= Date: Wed, 15 May 2024 13:50:26 +0200 Subject: [PATCH] =?UTF-8?q?Ny=20modal=20for=20=C3=A5=20sp=C3=B8rre=20om=20?= =?UTF-8?q?hvilken=20info=20SB=20savner=20per=20hjelpemiddel=20(#434)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/deploy-dev.yaml | 1 + client/src/innsikt/Fritekst.tsx | 9 +++- .../Sp\303\270rreunders\303\270kelse.tsx" | 10 ++++- .../innsikt/informasjon_om_hjelpemiddel_v1.ts | 20 +++++++++ .../sp\303\270rreunders\303\270kelser.ts" | 3 ++ client/src/io/http.ts | 16 +++++++ client/src/mocks/handlers/saksbehandling.ts | 4 ++ .../InformasjonOmHjelpemiddelModal.tsx | 34 ++++++++++++++ .../saksbilde/hjelpemidler/Hjelpemiddel.tsx | 40 ++++++++++++++++- .../useInformasjonOmHjelpemiddel.tsx | 44 +++++++++++++++++++ 10 files changed, 175 insertions(+), 6 deletions(-) create mode 100644 client/src/innsikt/informasjon_om_hjelpemiddel_v1.ts create mode 100644 client/src/saksbilde/InformasjonOmHjelpemiddelModal.tsx create mode 100644 client/src/saksbilde/hjelpemidler/useInformasjonOmHjelpemiddel.tsx diff --git a/.github/workflows/deploy-dev.yaml b/.github/workflows/deploy-dev.yaml index 93df4b43..4625e6ee 100644 --- a/.github/workflows/deploy-dev.yaml +++ b/.github/workflows/deploy-dev.yaml @@ -9,6 +9,7 @@ on: - 'CODEOWNERS' branches: - main + - savner-informasjon-modal jobs: test: diff --git a/client/src/innsikt/Fritekst.tsx b/client/src/innsikt/Fritekst.tsx index 53abb5ab..a25e143a 100644 --- a/client/src/innsikt/Fritekst.tsx +++ b/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) { 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) { 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, + })} /> ) } diff --git "a/client/src/innsikt/Sp\303\270rreunders\303\270kelse.tsx" "b/client/src/innsikt/Sp\303\270rreunders\303\270kelse.tsx" index f6116916..4734a39f 100644 --- "a/client/src/innsikt/Sp\303\270rreunders\303\270kelse.tsx" +++ "b/client/src/innsikt/Sp\303\270rreunders\303\270kelse.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 { knappetekst?: string onBesvar(spørreundersøkelse: ISpørreundersøkelse, besvarelse: IBesvarelse, svar: ISvar[]): void | Promise + 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({ defaultValues }) @@ -83,6 +84,11 @@ export function Spørreundersøkelse(props: SpørreundersøkelseProps) { > Avbryt + {error && ( + + Klarte ikke å sende inn svaret ditt. Prøv igjen senere. + + )} diff --git a/client/src/innsikt/informasjon_om_hjelpemiddel_v1.ts b/client/src/innsikt/informasjon_om_hjelpemiddel_v1.ts new file mode 100644 index 00000000..0b529f65 --- /dev/null +++ b/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, + }, + ], +} diff --git "a/client/src/innsikt/sp\303\270rreunders\303\270kelser.ts" "b/client/src/innsikt/sp\303\270rreunders\303\270kelser.ts" index 3272a4d7..5f30c6ce 100644 --- "a/client/src/innsikt/sp\303\270rreunders\303\270kelser.ts" +++ "b/client/src/innsikt/sp\303\270rreunders\303\270kelser.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 diff --git a/client/src/io/http.ts b/client/src/io/http.ts index 43d6bff1..d59c9118 100644 --- a/client/src/io/http.ts +++ b/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 }) } diff --git a/client/src/mocks/handlers/saksbehandling.ts b/client/src/mocks/handlers/saksbehandling.ts index b0c1f1e8..ebe3b915 100644 --- a/client/src/mocks/handlers/saksbehandling.ts +++ b/client/src/mocks/handlers/saksbehandling.ts @@ -115,6 +115,10 @@ export const saksbehandlingHandlers: StoreHandlersFactory = ({ sakStore, barnebr return respondNoContent() }), + http.post('/api/sak/:sakId/informasjon-om-hjelpemiddel', async () => { + return respondNoContent() + }), + http.put('/api/sak/:sakId/status', async ({ request, params }) => { const sakId = params.sakId const { status } = await request.json() diff --git a/client/src/saksbilde/InformasjonOmHjelpemiddelModal.tsx b/client/src/saksbilde/InformasjonOmHjelpemiddelModal.tsx new file mode 100644 index 00000000..05e5ba23 --- /dev/null +++ b/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 + error: string | undefined + onClose(): void +} + +export function InformasjonOmHjelpemiddelModal({ + open, + loading, + spørreundersøkelseId, + onBesvar, + onClose, + error, +}: InformasjonOmHjelpemiddelModalProps) { + return ( + + ) +} diff --git a/client/src/saksbilde/hjelpemidler/Hjelpemiddel.tsx b/client/src/saksbilde/hjelpemidler/Hjelpemiddel.tsx index 68802356..d85de01d 100644 --- a/client/src/saksbilde/hjelpemidler/Hjelpemiddel.tsx +++ b/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 = ({ 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 = ({ hjelpemiddel, forenk )} + + {(window.appSettings.MILJO === 'local' || window.appSettings.MILJO === 'dev-gcp') && + sakstype === Sakstype.SØKNAD && + status === OppgaveStatusType.TILDELT_SAKSBEHANDLER && ( + + + + +
+ +
+ + + + )} + {forenkletVisning && visEndreProdukt ? ( = ({ hjelpemiddel, forenk ) : ( )} + + { + await informasjonOmHjelpemiddel.onBesvar(spørreundersøkelse, besvarelse, svar) + }} + /> ) } diff --git a/client/src/saksbilde/hjelpemidler/useInformasjonOmHjelpemiddel.tsx b/client/src/saksbilde/hjelpemidler/useInformasjonOmHjelpemiddel.tsx new file mode 100644 index 00000000..5ab542f4 --- /dev/null +++ b/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(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) + } + }, + } +}