Forbedring av feilside iht Aksel (#1336)

* Legger til ny feilside

* Forbedret struktur på feilsideTekster

* Flytter tekster og håndtering av språk ut fra Feilside.tsx inn i egne, mer spesifiserte filer

* Legger til TODO kommentarer om hva som må gjøres videre

* Endrer feilsidetekster til å innholde mellomrom

* Bytter til å vise alle språk på én gang

* Revert "Bytter til å vise alle språk på én gang"

This reverts commit 5564e92.

* Gjør at språk blir satt i cookies etter å ha blitt valgt

* Legger til språkvelger på feilside

* Bytter til bruk av egne komponenter for innhold på feilside for å gi mer kontrol over hva som vises og hvilket funksjonalitet som skal gis basert på valgt språk

* Flytter innhold på feilsiden ut i egne komponenter

* Lager interface for props for lenke-komponenter på feilsiden

* Endrer lenke til engelsk side

* Fjerner egen FeilsideHeading komponent og fjerner bruk av statuskode

src/frontend/components/Felleskomponenter/Feilside/Feilside.tsx

@@ -1,15 +1,30 @@
-import React from 'react';
+import React, { FC, useEffect } from 'react';
 
-import { Alert } from '@navikt/ds-react';
+import { Box } from '@navikt/ds-react';
+import { setAvailableLanguages } from '@navikt/nav-dekoratoren-moduler';
 
-import SpråkTekst from '../SpråkTekst/SpråkTekst';
+import InnholdContainer from '../InnholdContainer/InnholdContainer';
+
+import { FeilsideInnhold } from './FeilsideInnhold';
+
+export const Feilside: FC = () => {
+    useEffect(() => {
+        visSpråkvelger();
+    }, []);
+
+    const visSpråkvelger = () => {
+        setAvailableLanguages([
+            { locale: 'nb', handleInApp: true },
+            { locale: 'nn', handleInApp: true },
+            { locale: 'en', handleInApp: true },
+        ]).then();
+    };
 
-export const Feilside: React.FC = () => {
     return (
-        <div>
-            <Alert variant={'error'} inline aria-live={'polite'}>
-                <SpråkTekst id={'felles.crashmelding'} />
-            </Alert>
-        </div>
+        <InnholdContainer>
+            <Box marginBlock="32">
+                <FeilsideInnhold />
+            </Box>
+        </InnholdContainer>
     );
 };

src/frontend/components/Felleskomponenter/Feilside/FeilsideInnhold.tsx

@@ -0,0 +1,110 @@
+import React, { FC } from 'react';
+
+import { BodyShort, Heading, Link, List } from '@navikt/ds-react';
+
+import { useSpråk } from '../../../context/SpråkContext';
+import { LocaleType } from '../../../typer/common';
+
+import { GåTilBakeTilForrigeSideLenke } from './GåTilbakeTilForrigeSideLenke';
+import { LastInnSidenPåNyttLenke } from './LastInnSidenPåNyttLenke';
+
+export const FeilsideInnhold: FC = () => {
+    const { valgtLocale } = useSpråk();
+
+    return (
+        <>
+            {valgtLocale === LocaleType.nb && (
+                <>
+                    <Heading level="1" size="large" spacing>
+                        Beklager, noe gikk galt.
+                    </Heading>
+                    <BodyShort spacing>
+                        En teknisk feil på våre servere gjør at siden er utilgjengelig. Dette
+                        skyldes ikke noe du gjorde.
+                    </BodyShort>
+                    <BodyShort>Du kan prøve å</BodyShort>
+                    <List>
+                        <List.Item>
+                            vente noen minutter og{' '}
+                            <LastInnSidenPåNyttLenke>laste siden på nytt</LastInnSidenPåNyttLenke>
+                        </List.Item>
+                        <List.Item>
+                            <GåTilBakeTilForrigeSideLenke>
+                                gå tilbake til forrige side
+                            </GåTilBakeTilForrigeSideLenke>
+                        </List.Item>
+                    </List>
+                    <BodyShort>
+                        Hvis problemet vedvarer, kan du{' '}
+                        <Link href="https://www.nav.no/start/soknad-barnetrygd" target="_blank">
+                            laste ned og sende papirsøknad (åpnes i nytt vindu)
+                        </Link>
+                        .
+                    </BodyShort>
+                </>
+            )}
+
+            {valgtLocale === LocaleType.nn && (
+                <>
+                    <Heading level="1" size="large" spacing>
+                        Beklager, noe gikk galt.
+                    </Heading>
+                    <BodyShort spacing>
+                        Ein teknisk feil på våre servere gjer at sida er utilgjengeleg. Dette
+                        skuldast ikkje noko du gjorde.
+                    </BodyShort>
+                    <BodyShort>Du kan prøve å</BodyShort>
+                    <List>
+                        <List.Item>
+                            vente nokre minutt og{' '}
+                            <LastInnSidenPåNyttLenke>laste sida på nytt</LastInnSidenPåNyttLenke>
+                        </List.Item>
+                        <List.Item>
+                            <GåTilBakeTilForrigeSideLenke>
+                                gå tilbake til førre side
+                            </GåTilBakeTilForrigeSideLenke>
+                        </List.Item>
+                    </List>
+                    <BodyShort>
+                        Viss problemet held fram, kan du{' '}
+                        <Link href="https://www.nav.no/start/soknad-barnetrygd/nn" target="_blank">
+                            lasta ned og senda papirsøknad (blir opna i nytt vindauge)
+                        </Link>
+                        .
+                    </BodyShort>
+                </>
+            )}
+
+            {valgtLocale === LocaleType.en && (
+                <>
+                    <Heading level="1" size="large" spacing>
+                        Something went wrong
+                    </Heading>
+                    <BodyShort spacing>
+                        A technical error on our servers has made the page unavailable. This is not
+                        your fault.
+                    </BodyShort>
+                    <BodyShort>You can try to</BodyShort>
+                    <List>
+                        <List.Item>
+                            wait a few minutes and{' '}
+                            <LastInnSidenPåNyttLenke>reload the page</LastInnSidenPåNyttLenke>
+                        </List.Item>
+                        <List.Item>
+                            <GåTilBakeTilForrigeSideLenke>
+                                go back to the previous page
+                            </GåTilBakeTilForrigeSideLenke>
+                        </List.Item>
+                    </List>
+                    <BodyShort>
+                        If the problem persists, you can{' '}
+                        <Link href="https://www.nav.no/start/soknad-barnetrygd/en" target="_blank">
+                            download and send a paper form (opens in a new window)
+                        </Link>
+                        .
+                    </BodyShort>
+                </>
+            )}
+        </>
+    );
+};

src/frontend/components/Felleskomponenter/Feilside/GåTilbakeTilForrigeSideLenke.tsx

@@ -0,0 +1,30 @@
+import React, { FC, ReactNode } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+
+import { Link } from '@navikt/ds-react';
+
+import { useSteg } from '../../../context/StegContext';
+
+interface IGåTilBakeTilForrigeSideLenkeProps {
+    children: ReactNode;
+}
+
+export const GåTilBakeTilForrigeSideLenke: FC<IGåTilBakeTilForrigeSideLenkeProps> = ({
+    children,
+}) => {
+    const navigate = useNavigate();
+    const { hentForrigeSteg } = useSteg();
+    const forrigeSteg = hentForrigeSteg();
+
+    const handleNavigate = (event: React.MouseEvent) => {
+        event.preventDefault();
+        navigate(forrigeSteg.path);
+    };
+
+    return (
+        <Link href={forrigeSteg.path} variant="action" onClick={handleNavigate}>
+            {children}
+        </Link>
+    );
+};

src/frontend/components/Felleskomponenter/Feilside/LastInnSidenPåNyttLenke.tsx

@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from 'react';
+
+import { Link } from '@navikt/ds-react';
+
+import { useSteg } from '../../../context/StegContext';
+
+interface ILastInnSidenPåNyttLenkeProps {
+    children: ReactNode;
+}
+
+export const LastInnSidenPåNyttLenke: FC<ILastInnSidenPåNyttLenkeProps> = ({ children }) => {
+    const { hentNåværendeSteg } = useSteg();
+    const nåværendeSteg = hentNåværendeSteg();
+
+    const håndterLastInnPåNytt = (event: React.MouseEvent) => {
+        event.preventDefault();
+        location.reload();
+    };
+
+    return (
+        <Link href={nåværendeSteg.path} variant="action" onClick={håndterLastInnPåNytt}>
+            {children}
+        </Link>
+    );
+};

src/frontend/context/SpråkContext.tsx

@@ -10,7 +10,7 @@ import { LocaleType } from '../typer/common';
 const dekoratorLanguageCookieName = 'decorator-language';
 
 export const [SpråkProvider, useSpråk] = createUseContext(() => {
-    const [cookies] = useCookies([dekoratorLanguageCookieName]);
+    const [cookies, setCookie] = useCookies([dekoratorLanguageCookieName]);
     const { [dekoratorLanguageCookieName]: dekoratørSpråk } = cookies;
 
     const defaultSpråk = (dekoratørSpråk as LocaleType) ?? LocaleType.nb;
@@ -26,6 +26,7 @@ export const [SpråkProvider, useSpråk] = createUseContext(() => {
     onLanguageSelect(language => {
         settValgtLocale(language.locale as LocaleType);
         document.documentElement.lang = language.locale;
+        setCookie(dekoratorLanguageCookieName, language.locale);
     });
 
     return {