Fikser bug i visning av uføregradinfo (#2792)

cypress/e2e/run-0/arbeidstaker_50.cy.ts

@@ -73,6 +73,8 @@ describe('Tester arbeidstakersøknad - gradert 50%', () => {
         // Test spørsmål
         cy.get('[data-cy="ja-nei-stor"] input[value=JA]').click()
 
+        cy.contains('Antall timer du skrev inn, betyr at du har jobbet').should('not.exist')
+
         // Underspørsmål 1
         cy.contains(
             'Hvor mange timer i uken jobber du vanligvis når du er frisk? Varierer det, kan du oppgi gjennomsnittet.',
@@ -91,7 +93,7 @@ describe('Tester arbeidstakersøknad - gradert 50%', () => {
         // Gradkalkulatoren dermed vil regne ut at man har hatt 9 arbeidsdager i denne perioden
         // 12 timer * (9 dager/5) * 0.5 (50% sykefraværsgrad) = 10.8 timer, så vi prøver litt lavere enn det
         cy.get('.undersporsmal .navds-text-field__input#34c3cb3f-1aeb-3095-9ac6-d8f4f4c9e539').type('10.7')
-
+        cy.contains('Antall timer du skrev inn, betyr at du har jobbet 49% av det du gjør når du er frisk.')
         klikkGaVidere(true)
 
         cy.get('.navds-read-more__button').contains('Er prosenten lavere enn du forventet?')
@@ -101,6 +103,7 @@ describe('Tester arbeidstakersøknad - gradert 50%', () => {
         cy.contains(
             'Antall timer du skrev inn, betyr at du har jobbet 49 % av det du gjør når du er frisk. Du må enten svare nei på øverste spørsmålet eller endre antall timer totalt.',
         )
+        cy.contains('Antall timer du skrev inn, betyr at du har jobbet 49% av det du gjør når du er frisk.')
 
         // Endre timer til 11, som er mer enn 10.8
         cy.get('.undersporsmal .navds-text-field__input#34c3cb3f-1aeb-3095-9ac6-d8f4f4c9e539').clear()

src/components/sporsmal/typer/radio-timer-prosent.tsx

@@ -1,9 +1,10 @@
 import { Alert, BodyLong, BodyShort, Radio, RadioGroup, ReadMore } from '@navikt/ds-react'
 import React from 'react'
-import { Controller, useFormContext } from 'react-hook-form'
+import { Controller, useFormContext, useWatch } from 'react-hook-form'
 
+import { Soknad } from '../../../types/types'
 import { rodeUkeDagerIPerioden } from '../../../utils/helligdager-utils'
-import { hentUndersporsmal } from '../../../utils/soknad-utils'
+import { hentSporsmal, hentUndersporsmal } from '../../../utils/soknad-utils'
 import validerArbeidsgrad from '../../../utils/sporsmal/valider-arbeidsgrad'
 import { getLedetekst, tekst } from '../../../utils/tekster'
 import Vis from '../../vis'
@@ -12,6 +13,58 @@ import { hentFeilmelding } from '../sporsmal-utils'
 import UndersporsmalListe from '../undersporsmal/undersporsmal-liste'
 import { useSoknadMedDetaljer } from '../../../hooks/useSoknadMedDetaljer'
 
+interface TimerProsentAlertProps {
+    valgtSoknad: Soknad
+    beregnGradNy: (
+        hvorMyeTimerVerdi: string,
+        jobberDuNormalArbeidsuke: string,
+        hvorMangeTimerPerUke: string,
+    ) => number | undefined
+}
+
+const TimerProsentAlert = ({ valgtSoknad, beregnGradNy }: TimerProsentAlertProps) => {
+    const { control } = useFormContext()
+
+    const relevantTagList = ['HVOR_MYE_TIMER_VERDI', 'JOBBER_DU_NORMAL_ARBEIDSUKE', 'HVOR_MANGE_TIMER_PER_UKE']
+
+    const tagToIdMap = new Map<string, string>()
+    relevantTagList.forEach((tag) => {
+        const sporsmalId = hentSporsmal(valgtSoknad, tag)?.id
+        if (sporsmalId) {
+            tagToIdMap.set(tag, sporsmalId)
+        }
+    })
+
+    const hvorMyeTimerVerdi = useWatch({
+        control,
+        name: tagToIdMap.get('HVOR_MYE_TIMER_VERDI') || '',
+    })
+    const jobberDuNormalArbeidsuke = useWatch({
+        control,
+        name: tagToIdMap.get('JOBBER_DU_NORMAL_ARBEIDSUKE') || '',
+    })
+    const hvorMangeTimerPerUke = useWatch({
+        control,
+        name: tagToIdMap.get('HVOR_MANGE_TIMER_PER_UKE') || '',
+    })
+
+    const beregnetGrad = beregnGradNy(hvorMyeTimerVerdi, jobberDuNormalArbeidsuke, hvorMangeTimerPerUke)
+
+    return (
+        <div>
+            {beregnetGrad !== undefined && (
+                <Alert variant="info" style={{ marginTop: '1rem' }}>
+                    <BodyShort>
+                        {getLedetekst(tekst('sykepengesoknad.jobb-underveis-timer-i-prosent'), {
+                            '%PROSENT%': Math.floor(beregnetGrad * 100),
+                        })}
+                    </BodyShort>
+                </Alert>
+            )}
+        </div>
+    )
+}
+
 const RadioTimerProsent = ({ sporsmal }: SpmProps) => {
     const {
         formState: { errors },
@@ -23,17 +76,20 @@ const RadioTimerProsent = ({ sporsmal }: SpmProps) => {
         watchRadio = getValues(sporsmal.id)
     }
 
-    // watchTimer er lagt inn for å rendre prosent-alerten
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const watchTimer = watch(hentUndersporsmal(sporsmal!, 'HVOR_MYE_TIMER_VERDI')!.id)
+    const timerId = hentUndersporsmal(sporsmal, 'HVOR_MYE_TIMER_VERDI_0')?.id
+    let watchTimer = timerId ? watch(timerId) : undefined
+    if (watchTimer === undefined && timerId) {
+        watchTimer = getValues(timerId)
+    }
     const errorTimer = errors[hentUndersporsmal(sporsmal!, 'HVOR_MYE_TIMER_VERDI')!.id]
 
     const feilmelding = hentFeilmelding(sporsmal)
     const { valgtSoknad } = useSoknadMedDetaljer()
 
-    const { validerGrad, beregnGrad } = validerArbeidsgrad(sporsmal)
+    const { beregnGradNy } = validerArbeidsgrad(sporsmal)
 
     const lavereProsentHjelpTittel = tekst('ekspanderbarhjelp.prosenten_lavere_enn_forventet_arbeidstaker.tittel')
+
     return (
         <>
             <Controller
@@ -67,23 +123,9 @@ const RadioTimerProsent = ({ sporsmal }: SpmProps) => {
                 )
             })}
 
-            <Vis
-                hvis={
-                    watchRadio?.toLowerCase() === 'timer' &&
-                    beregnGrad?.() &&
-                    beregnGrad() !== Infinity &&
-                    validerGrad!() == true
-                }
-                render={() => (
-                    <Alert variant="info" style={{ marginTop: '1rem' }}>
-                        <BodyShort>
-                            {getLedetekst(tekst('sykepengesoknad.jobb-underveis-timer-i-prosent'), {
-                                '%PROSENT%': Math.floor(beregnGrad!() * 100),
-                            })}
-                        </BodyShort>
-                    </Alert>
-                )}
-            />
+            {valgtSoknad && sporsmal.undersporsmal.length > 0 && beregnGradNy && (
+                <TimerProsentAlert valgtSoknad={valgtSoknad} beregnGradNy={beregnGradNy} />
+            )}
 
             <Vis
                 hvis={errorTimer && rodeUkeDagerIPerioden(valgtSoknad!.fom, valgtSoknad!.tom)}

src/utils/soknad-utils.ts

@@ -35,6 +35,10 @@ export const flattenSporsmal = (sporsmal: ReadonlyArray<Sporsmal>) => {
     return flatArr
 }
 
+export const hentSporsmalMedId = (soknad: Soknad, id: string): Sporsmal | undefined => {
+    return flattenSporsmal(soknad.sporsmal).find((spm) => spm.id === id)
+}
+
 export const hentSporsmal = (soknad: Soknad, tag: string): Sporsmal | undefined => {
     return flattenSporsmal(soknad.sporsmal).find((spm) => spm.tag === tag)
 }

src/utils/sporsmal/valider-arbeidsgrad.ts

@@ -68,6 +68,52 @@ const useValiderArbeidsgrad = (sporsmal: Sporsmal) => {
             : true
     }
 
+    const beregnGradNy = (
+        hvorMyeTimerVerdi: string,
+        jobberDuNormalArbeidsuke: string,
+        hvorMangeTimerPerUke: string,
+    ) => {
+        /* Forskjellen på denne funksjonen og beregnGrad er at denne funksjonen tar
+        inn verdier som argumenter, mens beregnGrad henter verdier fra formen.
+        beregnGrad virker onSubmit, men ikke alltid fortløpende mens bruker fyller
+        inn verdier.
+         */
+        const faktiskeSykedager =
+            valgtSoknad.soknadstype === RSSoknadstype.ARBEIDSTAKERE
+                ? sykedagerForArbeidstakere()
+                : sykedagerForFrilansere()
+        const dagerIPeriode = faktiskeSykedager.length
+
+        const uker = dagerIPeriode / 5
+
+        function timerPerUkeVanligvis() {
+            if (jobberDuNormalArbeidsuke === 'JA') {
+                return 37.5
+            }
+            if (hvorMangeTimerPerUke !== '') {
+                return parseFloat(hvorMangeTimerPerUke)
+            }
+            // vi kan ikke regne ut arbeidsgrad hvis bruker ikke har svart her
+            return undefined
+        }
+
+        function timerDennePerioden() {
+            if (hvorMyeTimerVerdi !== '') {
+                return parseFloat(hvorMyeTimerVerdi)
+            }
+            // vi beregner ikke arbeidsgrad hvis bruker oppgir prosent eller ikke enda har opgitt antall timer
+            return undefined
+        }
+        const timerPerUke = timerPerUkeVanligvis()
+        const faktiskTimer = timerDennePerioden()
+
+        if (!faktiskTimer || !timerPerUke) {
+            return undefined
+        } else {
+            return faktiskTimer / uker / timerPerUke
+        }
+    }
+
     const beregnGrad = () => {
         const values = getValues()
         const timerPerUkeId = hentUndersporsmal(hovedSporsmal!, 'HVOR_MANGE_TIMER_PER_UKE')!.id
@@ -88,7 +134,7 @@ const useValiderArbeidsgrad = (sporsmal: Sporsmal) => {
         return faktiskTimer / uker / timerPerUke
     }
 
-    return { beregnGrad, validerGrad, periode, hovedSporsmal }
+    return { beregnGrad, validerGrad, periode, hovedSporsmal, beregnGradNy }
 }
 
 export default useValiderArbeidsgrad