Fikser språk i FormProgress (#1316)

* Endrer 'Steg X av X', 'Vis alle steg' og 'Skjul alle steg' slik at de fungerer på NN og EN i tillegg til NB * Legger til steg tittel tekster * Flytter formProgressSteps ut av StegContext * Legger til tittel til formProgressSteps * Fikser visning av tittel * Legger til tittelBlock og tittelFlettefeltVerider * Bytter til bruk av useEffect for reaktiv og riktig oppdaterting av formProgressSteps * Legger til console.log for testing * Fjerner bruk av useEffect * Bytter til bruk av barnForSteg istedenfor barnInkludertISøknaden ettersom barnForSteg og steg alltid er i sync mtp hvor mange barn som eksisterer * Legger til tittel uten flettefelt for Om Barnet * Flytter formProgressSteps ut i egen hook for bedre separasjon av kode * Endrer navn på formProgressSteps til norsk: formProgressSteg
navikt · Aug 7, 2024 · e3323c0 · e3323c0
1 parent 57f210a
commit e3323c0
Show file tree

Hide file tree

Showing 16 changed files with 133 additions and 25 deletions.
diff --git a/src/frontend/components/Felleskomponenter/Steg/Steg.tsx b/src/frontend/components/Felleskomponenter/Steg/Steg.tsx
@@ -31,6 +31,7 @@ import useModal from '../SkjemaModal/useModal';
 import ModellVersjonModal from './ModellVersjonModal';
 import Navigeringspanel from './Navigeringspanel';
 import { ScrollHandler } from './ScrollHandler';
+import { useFormProgressSteg } from './useFormProgressSteg';
 
 interface ISteg {
     tittel: ReactNode;
@@ -87,7 +88,6 @@ const Steg: React.FC<ISteg> = ({ tittel, guide, skjema, gåVidereCallback, child
         plainTekst,
     } = useApp();
     const {
-        formProgressSteps,
         hentNesteSteg,
         hentForrigeSteg,
         hentNåværendeSteg,
@@ -99,6 +99,7 @@ const Steg: React.FC<ISteg> = ({ tittel, guide, skjema, gåVidereCallback, child
     const nesteRoute = hentNesteSteg();
     const forrigeRoute = hentForrigeSteg();
     const nåværendeStegIndex = hentNåværendeStegIndex();
+    const formProgressSteg = useFormProgressSteg();
 
     const nyesteNåværendeRoute: RouteEnum = hentNåværendeSteg().route;
     useFørsteRender(() => logSidevisningBarnetrygd(nyesteNåværendeRoute, søknad.søknadstype));
@@ -158,12 +159,23 @@ const Steg: React.FC<ISteg> = ({ tittel, guide, skjema, gåVidereCallback, child
     };
 
     const håndterGåTilSteg = (stegIndex: number) => {
-        const steg = formProgressSteps[stegIndex];
+        const steg = formProgressSteg[stegIndex];
         navigate(steg.path);
     };
 
     const { tilbakeKnapp } = tekster().FELLES.navigasjon;
 
+    const frittståendeOrdTekster = tekster().FELLES.frittståendeOrd;
+
+    const formProgressStegTekst =
+        plainTekst(frittståendeOrdTekster.steg) +
+        ' ' +
+        hentNåværendeStegIndex() +
+        ' ' +
+        plainTekst(frittståendeOrdTekster.av) +
+        ' ' +
+        formProgressSteg.length;
+
     return (
         <>
             <ScrollHandler />
@@ -186,17 +198,22 @@ const Steg: React.FC<ISteg> = ({ tittel, guide, skjema, gåVidereCallback, child
                                 </Link>
                             </div>
                             <FormProgress
-                                totalSteps={formProgressSteps.length}
+                                translations={{
+                                    step: formProgressStegTekst,
+                                    showAllSteps: plainTekst(frittståendeOrdTekster.visAlleSteg),
+                                    hideAllSteps: plainTekst(frittståendeOrdTekster.skjulAlleSteg),
+                                }}
+                                totalSteps={formProgressSteg.length}
                                 activeStep={hentNåværendeStegIndex()}
                                 onStepChange={stegIndex => håndterGåTilSteg(stegIndex - 1)}
                             >
-                                {formProgressSteps.map((value, index) => (
+                                {formProgressSteg.map((value, index) => (
                                     <FormProgress.Step
                                         key={index}
                                         completed={index + 1 < hentNåværendeStegIndex()}
                                         interactive={index + 1 < hentNåværendeStegIndex()}
                                     >
-                                        {value.label}
+                                        {value.tittel}
                                     </FormProgress.Step>
                                 ))}
                             </FormProgress>

diff --git a/src/frontend/components/Felleskomponenter/Steg/useFormProgressSteg.tsx b/src/frontend/components/Felleskomponenter/Steg/useFormProgressSteg.tsx
@@ -0,0 +1,88 @@
+import { useApp } from '../../../context/AppContext';
+import { useSteg } from '../../../context/StegContext';
+import { ISteg, RouteEnum } from '../../../typer/routes';
+import { FlettefeltVerdier, LocaleRecordBlock } from '../../../typer/sanity/sanity';
+
+interface IStegMedTittel extends ISteg {
+    tittel: string;
+}
+
+export const useFormProgressSteg = (): IStegMedTittel[] => {
+    const { tekster, plainTekst } = useApp();
+    const { steg, barnForSteg } = useSteg();
+
+    const {
+        FORSIDE,
+        OM_DEG,
+        DIN_LIVSSITUASJON,
+        VELG_BARN,
+        OM_BARNA,
+        OM_BARNET,
+        OPPSUMMERING,
+        DOKUMENTASJON,
+        EØS_FOR_BARN,
+        EØS_FOR_SØKER,
+        KVITTERING,
+    } = tekster();
+
+    let antallBarnCounter = 0;
+    return steg
+        .map(steg => {
+            let tittelBlock: LocaleRecordBlock;
+            let tittelFlettefeltVerider: FlettefeltVerdier | undefined = undefined;
+
+            switch (steg.route) {
+                case RouteEnum.Forside:
+                    tittelBlock = FORSIDE.soeknadstittelBarnetrygd;
+                    break;
+                case RouteEnum.OmDeg:
+                    tittelBlock = OM_DEG.omDegTittel;
+                    break;
+                case RouteEnum.DinLivssituasjon:
+                    tittelBlock = DIN_LIVSSITUASJON.dinLivssituasjonTittel;
+                    break;
+                case RouteEnum.VelgBarn:
+                    tittelBlock = VELG_BARN.velgBarnTittel;
+                    break;
+                case RouteEnum.OmBarna:
+                    tittelBlock = OM_BARNA.omBarnaTittel;
+                    break;
+                case RouteEnum.OmBarnet:
+                    if (barnForSteg.length === 0) {
+                        tittelBlock = OM_BARNET.omBarnetTittelUtenFlettefelt;
+                    } else {
+                        tittelBlock = OM_BARNET.omBarnetTittel;
+                        tittelFlettefeltVerider = {
+                            barnetsNavn: barnForSteg[antallBarnCounter].navn,
+                        };
+                        antallBarnCounter++;
+                    }
+                    break;
+                case RouteEnum.EøsForSøker:
+                    tittelBlock = EØS_FOR_SØKER.eoesForSokerTittel;
+                    break;
+                case RouteEnum.EøsForBarn:
+                    tittelBlock = EØS_FOR_BARN.eoesForBarnTittel;
+                    break;
+                case RouteEnum.Oppsummering:
+                    tittelBlock = OPPSUMMERING.oppsummeringTittel;
+                    break;
+                case RouteEnum.Dokumentasjon:
+                    tittelBlock = DOKUMENTASJON.dokumentasjonTittel;
+                    break;
+                case RouteEnum.Kvittering:
+                    tittelBlock = KVITTERING.kvitteringTittel;
+                    break;
+                default:
+                    // Alle routes i RouteEnum må gjennomgås i switch(), ellers feiler _exhaustiveCheck
+                    const _exhaustiveCheck: never = steg.route;
+                    return _exhaustiveCheck;
+            }
+
+            return {
+                ...steg,
+                tittel: plainTekst(tittelBlock, tittelFlettefeltVerider),
+            };
+        })
+        .filter(steg => steg.route !== RouteEnum.Forside && steg.route !== RouteEnum.Kvittering);
+};
diff --git a/src/frontend/components/SøknadsSteg/DinLivssituasjon/innholdTyper.ts b/src/frontend/components/SøknadsSteg/DinLivssituasjon/innholdTyper.ts
@@ -1,5 +1,6 @@
 import { LocaleRecordBlock } from '../../../typer/sanity/sanity';
 
 export interface IDinLivssituasjonTekstinnhold {
+    dinLivssituasjonTittel: LocaleRecordBlock;
     dinLivssituasjonGuide: LocaleRecordBlock;
 }
diff --git a/src/frontend/components/SøknadsSteg/Dokumentasjon/innholdTyper.ts b/src/frontend/components/SøknadsSteg/Dokumentasjon/innholdTyper.ts
@@ -2,6 +2,7 @@ import { BeskrivelseSanityApiNavn } from '../../../typer/dokumentasjon';
 import { LocaleRecordBlock } from '../../../typer/sanity/sanity';
 
 export type IDokumentasjonTekstinnhold = {
+    dokumentasjonTittel: LocaleRecordBlock;
     dokumentasjonGuide: LocaleRecordBlock;
 } & {
     [BeskrivelseSanityApiNavn.dokumentasjonPaaSeparasjonSkilsmisseEllerDoedsfall]: LocaleRecordBlock;

diff --git a/src/frontend/components/SøknadsSteg/EøsSteg/Barn/innholdTyper.ts b/src/frontend/components/SøknadsSteg/EøsSteg/Barn/innholdTyper.ts
@@ -1,5 +1,6 @@
 import { LocaleRecordBlock } from '../../../../typer/sanity/sanity';
 
 export interface IEøsForBarnTekstinnhold {
+    eoesForBarnTittel: LocaleRecordBlock;
     eosForBarnGuide: LocaleRecordBlock;
 }
diff --git a/src/frontend/components/SøknadsSteg/EøsSteg/Søker/innholdTyper.ts b/src/frontend/components/SøknadsSteg/EøsSteg/Søker/innholdTyper.ts
@@ -1,5 +1,6 @@
 import { LocaleRecordBlock } from '../../../../typer/sanity/sanity';
 
 export interface IEøsForSøkerTekstinnhold {
+    eoesForSokerTittel: LocaleRecordBlock;
     eosForSokerGuide: LocaleRecordBlock;
 }
diff --git a/src/frontend/components/SøknadsSteg/Kvittering/innholdTyper.ts b/src/frontend/components/SøknadsSteg/Kvittering/innholdTyper.ts
@@ -0,0 +1,5 @@
+import { LocaleRecordBlock } from '../../../typer/sanity/sanity';
+
+export type IKvitteringTekstinnhold = {
+    kvitteringTittel: LocaleRecordBlock;
+};
diff --git a/src/frontend/components/SøknadsSteg/OmBarnaDine/innholdTyper.ts b/src/frontend/components/SøknadsSteg/OmBarnaDine/innholdTyper.ts
@@ -1,5 +1,6 @@
 import { LocaleRecordBlock } from '../../../typer/sanity/sanity';
 
 export interface IOmBarnaTekstinnhold {
+    omBarnaTittel: LocaleRecordBlock;
     omBarnaGuide: LocaleRecordBlock;
 }
diff --git a/src/frontend/components/SøknadsSteg/OmBarnet/innholdTyper.ts b/src/frontend/components/SøknadsSteg/OmBarnet/innholdTyper.ts
@@ -1,5 +1,7 @@
 import { LocaleRecordBlock } from '../../../typer/sanity/sanity';
 
 export interface IOmBarnetTekstinnhold {
+    omBarnetTittel: LocaleRecordBlock;
+    omBarnetTittelUtenFlettefelt: LocaleRecordBlock;
     omBarnetGuide: LocaleRecordBlock;
 }
diff --git a/src/frontend/components/SøknadsSteg/OmDeg/innholdTyper.ts b/src/frontend/components/SøknadsSteg/OmDeg/innholdTyper.ts
@@ -1,5 +1,6 @@
 import { LocaleRecordBlock } from '../../../typer/sanity/sanity';
 
 export interface IOmDegTekstinnhold {
+    omDegTittel: LocaleRecordBlock;
     omDegGuide: LocaleRecordBlock;
 }
diff --git a/src/frontend/components/SøknadsSteg/Oppsummering/innholdTyper.ts b/src/frontend/components/SøknadsSteg/Oppsummering/innholdTyper.ts
@@ -1,5 +1,6 @@
 import { LocaleRecordBlock } from '../../../typer/sanity/sanity';
 
 export interface IOppsummeringTekstinnhold {
+    oppsummeringTittel: LocaleRecordBlock;
     oppsummeringGuide: LocaleRecordBlock;
 }
diff --git a/src/frontend/components/SøknadsSteg/VelgBarn/innholdTyper.ts b/src/frontend/components/SøknadsSteg/VelgBarn/innholdTyper.ts
@@ -1,5 +1,6 @@
 import { LocaleRecordBlock } from '../../../typer/sanity/sanity';
 
 export interface IVelgBarnTekstinnhold {
+    velgBarnTittel: LocaleRecordBlock;
     velgBarnGuide: LocaleRecordBlock;
 }
diff --git a/src/frontend/context/Steg.test.tsx b/src/frontend/context/Steg.test.tsx
@@ -30,21 +30,6 @@ describe('Steg', () => {
         expect(result.current.steg.length).toEqual(9);
     });
 
-    test(`formProgressSteps skal returnere en liste uten forside og kvittering`, () => {
-        spyOnUseApp({
-            barnInkludertISøknaden: [],
-        });
-        const wrapper = ({ children }) => (
-            <RoutesProvider>
-                <MemoryRouter initialEntries={['/om-barnet/barn/1']}>
-                    <StegProvider>{children}</StegProvider>
-                </MemoryRouter>
-            </RoutesProvider>
-        );
-        const { result } = renderHook(() => useSteg(), { wrapper });
-        expect(result.current.formProgressSteps.length).toEqual(7);
-    });
-
     test(`Kan hente neste steg fra forsiden`, () => {
         spyOnUseApp({
             barnInkludertISøknaden: [

diff --git a/src/frontend/context/StegContext.tsx b/src/frontend/context/StegContext.tsx
@@ -67,10 +67,6 @@ const [StegProvider, useSteg] = createUseContext(() => {
         })
         .flat();
 
-    const formProgressSteps: ISteg[] = steg.filter(
-        steg => steg.route !== RouteEnum.Forside && steg.route !== RouteEnum.Kvittering
-    );
-
     const hentSteg = (pathname: string): ISteg => {
         const index = steg.findIndex(steg => matchPath(steg.path, decodeURIComponent(pathname)));
         return steg[index] ?? steg[0];
@@ -122,7 +118,7 @@ const [StegProvider, useSteg] = createUseContext(() => {
 
     return {
         steg,
-        formProgressSteps,
+        barnForSteg,
         hentStegNummer,
         hentStegObjektForBarn,
         hentNesteSteg,

diff --git a/src/frontend/typer/sanity/sanity.ts b/src/frontend/typer/sanity/sanity.ts
@@ -25,6 +25,7 @@ export enum ESanitySteg {
     EØS_FOR_BARN = 'EØS_FOR_BARN',
     OPPSUMMERING = 'OPPSUMMERING',
     DOKUMENTASJON = 'DOKUMENTASJON',
+    KVITTERING = 'KVITTERING',
     FELLES = 'FELLES',
 }
 

diff --git a/src/frontend/typer/sanity/tekstInnhold.ts b/src/frontend/typer/sanity/tekstInnhold.ts
@@ -2,6 +2,7 @@ import { IDinLivssituasjonTekstinnhold } from '../../components/SøknadsSteg/Din
 import { IDokumentasjonTekstinnhold } from '../../components/SøknadsSteg/Dokumentasjon/innholdTyper';
 import { IEøsForBarnTekstinnhold } from '../../components/SøknadsSteg/EøsSteg/Barn/innholdTyper';
 import { IEøsForSøkerTekstinnhold } from '../../components/SøknadsSteg/EøsSteg/Søker/innholdTyper';
+import { IKvitteringTekstinnhold } from '../../components/SøknadsSteg/Kvittering/innholdTyper';
 import { IOmBarnaTekstinnhold } from '../../components/SøknadsSteg/OmBarnaDine/innholdTyper';
 import { IOmBarnetTekstinnhold } from '../../components/SøknadsSteg/OmBarnet/innholdTyper';
 import { IOmDegTekstinnhold } from '../../components/SøknadsSteg/OmDeg/innholdTyper';
@@ -50,6 +51,7 @@ export interface ITekstinnhold {
     [ESanitySteg.EØS_FOR_BARN]: IEøsForBarnTekstinnhold;
     [ESanitySteg.OPPSUMMERING]: IOppsummeringTekstinnhold;
     [ESanitySteg.DOKUMENTASJON]: IDokumentasjonTekstinnhold;
+    [ESanitySteg.KVITTERING]: IKvitteringTekstinnhold;
     [ESanitySteg.FELLES]: IFellesTekstInnhold;
 }
 
@@ -70,6 +72,10 @@ export interface IFrittståendeOrdTekstinnhold {
     nei: LocaleRecordString;
     barnetrygd: LocaleRecordString;
     skjult: LocaleRecordString;
+    av: LocaleRecordString;
+    steg: LocaleRecordString;
+    visAlleSteg: LocaleRecordString;
+    skjulAlleSteg: LocaleRecordString;
 }
 
 export interface INavigasjonTekstinnhold {