FO Lagt til lenker til til infosider for ytelsane + oppdatert tekst n… (

#4758)

FO Lagt til lenker til til infosider for ytelsane + oppdatert tekst når ein ikkje har saker

apps/foreldrepengeoversikt/src/components/har-ikke-saker/HarIkkeSaker.stories.tsx

@@ -1,10 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react/*';
+import { MemoryRouter } from 'react-router-dom';
 
-import HarIkkeSaker from './HarIkkeSaker';
+import { HarIkkeSaker } from './HarIkkeSaker';
 
 const meta = {
     title: 'HarIkkeSaker',
     component: HarIkkeSaker,
+    render: (props) => {
+        return (
+            <MemoryRouter>
+                <HarIkkeSaker {...props} />
+            </MemoryRouter>
+        );
+    },
 } satisfies Meta<typeof HarIkkeSaker>;
 export default meta;
 

apps/foreldrepengeoversikt/src/components/har-ikke-saker/HarIkkeSaker.test.tsx

@@ -0,0 +1,32 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+
+import * as stories from './HarIkkeSaker.stories';
+
+const { HarOppdatertSak, Default } = composeStories(stories);
+
+describe('<HarIkkeSaker>', () => {
+    it('skal vise infotekst og lenker', async () => {
+        render(<HarOppdatertSak />);
+
+        expect(
+            await screen.findByText('Du har ingen søknader om foreldrepenger, engangsstønad eller svangerskapspenger'),
+        ).toBeInTheDocument();
+        expect(screen.getByText('Les om hva du har rett på')).toBeInTheDocument();
+        expect(screen.getByText('Søk om foreldrepenger')).toBeInTheDocument();
+        expect(screen.getByText('Søk om svangerskapspenger')).toBeInTheDocument();
+        expect(screen.getByText('Søk om engangsstønad')).toBeInTheDocument();
+    });
+
+    it('skal kun vise lenker', async () => {
+        render(<Default />);
+
+        expect(await screen.findByText('Les om hva du har rett på')).toBeInTheDocument();
+        expect(screen.getByText('Søk om foreldrepenger')).toBeInTheDocument();
+        expect(screen.getByText('Søk om svangerskapspenger')).toBeInTheDocument();
+        expect(screen.getByText('Søk om engangsstønad')).toBeInTheDocument();
+        expect(
+            screen.queryByText('Du har ingen søknader om foreldrepenger, engangsstønad eller svangerskapspenger'),
+        ).not.toBeInTheDocument();
+    });
+});

apps/foreldrepengeoversikt/src/components/har-ikke-saker/HarIkkeSaker.tsx

@@ -1,45 +1,29 @@
-import { ExternalLinkIcon } from '@navikt/aksel-icons';
 import { FunctionComponent } from 'react';
+import { FormattedMessage } from 'react-intl';
 
-import { Alert, BodyShort, Button, Heading, Link, VStack } from '@navikt/ds-react';
+import { Alert, Heading, VStack } from '@navikt/ds-react';
 
 import { useSetBackgroundColor } from '../../hooks/useBackgroundColor';
-import ContentSection from '../content-section/ContentSection';
+import { SøkelenkerPanel } from '../søkelenker/SøkelenkerPanel';
 
 interface Props {
     harOppdatertSak: boolean;
 }
 
-const HarIkkeSaker: FunctionComponent<Props> = ({ harOppdatertSak }) => {
+export const HarIkkeSaker: FunctionComponent<Props> = ({ harOppdatertSak }) => {
     useSetBackgroundColor('blue');
 
     return (
-        <>
+        <VStack gap="8">
             {harOppdatertSak && (
                 <Alert variant="info">
-                    Vi finner ingen søknader fra deg. Hvis du har sendt en søknad i posten kan det ta to uker før
-                    søknaden registreres i NAVs systemer.
+                    <Heading spacing size="small" level="3">
+                        <FormattedMessage id="HarIkkeSaker.IngenSoknader" />
+                    </Heading>
+                    <FormattedMessage id="HarIkkeSaker.ToUker" />
                 </Alert>
             )}
-            <ContentSection>
-                <Heading level="2" size="medium" spacing>
-                    Kort om foreldrepenger
-                </Heading>
-                <VStack gap="4">
-                    <BodyShort>
-                        Foreldrepenger skal erstatte inntekten din når du skal være hjemme med barnet i forbindelse med
-                        fødsel eller adopsjon.
-                    </BodyShort>
-                    <Link href="https://www.nav.no/foreldrepenger">
-                        Les mer om foreldrepenger <ExternalLinkIcon aria-hidden={true} />
-                    </Link>
-                    <Button as="a" href="https://foreldrepengesoknad.nav.no" className="w-fit">
-                        Søk om foreldrepenger
-                    </Button>
-                </VStack>
-            </ContentSection>
-        </>
+            <SøkelenkerPanel />
+        </VStack>
     );
 };
-
-export default HarIkkeSaker;

apps/foreldrepengeoversikt/src/components/har-saker/HarSaker.stories.tsx

@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
 import saker from 'storybookData/saker/saker.json';
 
 import { Ytelse } from './../../types/Ytelse';
-import HarSaker from './HarSaker';
+import { HarSaker } from './HarSaker';
 
 const meta = {
     title: 'HarSaker',

apps/foreldrepengeoversikt/src/components/har-saker/HarSaker.tsx

@@ -5,6 +5,7 @@ import { BodyShort, HStack, Heading, VStack } from '@navikt/ds-react';
 import { capitalizeFirstLetter } from '@navikt/fp-utils';
 
 import { SakLink } from '../sak-link/SakLink';
+import { SøkelenkerPanel } from '../søkelenker/SøkelenkerPanel';
 import { useSetBackgroundColor } from './../../hooks/useBackgroundColor';
 import { GruppertSak } from './../../types/GruppertSak';
 import { guid } from './../../utils/guid';
@@ -15,13 +16,13 @@ interface Props {
     harMinstEttArbeidsforhold: boolean;
 }
 
-const HarSaker: React.FunctionComponent<Props> = ({ grupperteSaker, harMinstEttArbeidsforhold }) => {
+export const HarSaker: React.FunctionComponent<Props> = ({ grupperteSaker, harMinstEttArbeidsforhold }) => {
     const intl = useIntl();
     useSetBackgroundColor('blue');
 
     return (
         <>
-            {grupperteSaker.map((gruppering) => {
+            {grupperteSaker.map((gruppering, index) => {
                 const { tittel, undertittel } = getSakTittel({
                     barngruppering: gruppering.barn,
                     familiehendelsedato: gruppering.familiehendelsedato,
@@ -48,11 +49,10 @@ const HarSaker: React.FunctionComponent<Props> = ({ grupperteSaker, harMinstEttA
                                 );
                             })}
                         </VStack>
+                        {index === 0 && <SøkelenkerPanel doBleed />}
                     </div>
                 );
             })}
         </>
     );
 };
-
-export default HarSaker;

apps/foreldrepengeoversikt/src/components/søkelenker/SøkelenkerPanel.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { MemoryRouter } from 'react-router-dom';
+
+import { LayoutWrapper } from '../../sections/LayoutWrapper';
+import { SøkelenkerPanel } from './SøkelenkerPanel';
+
+const meta = {
+    title: 'SøkelenkerPanel',
+    component: SøkelenkerPanel,
+    render: (props) => {
+        return (
+            <MemoryRouter>
+                <LayoutWrapper className="pt-1 pb-1 pl-4 pr-4">
+                    <SøkelenkerPanel {...props} />
+                </LayoutWrapper>
+            </MemoryRouter>
+        );
+    },
+} satisfies Meta<typeof SøkelenkerPanel>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const MedBakgrunn: Story = {
+    args: {
+        doBleed: true,
+    },
+};

apps/foreldrepengeoversikt/src/components/søkelenker/SøkelenkerPanel.test.tsx

@@ -0,0 +1,17 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+
+import * as stories from './SøkelenkerPanel.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<SøkelenkerPanel>', () => {
+    it('skal vise lenker', async () => {
+        render(<Default />);
+
+        expect(await screen.findByText('Les om hva du har rett på')).toBeInTheDocument();
+        expect(screen.getByText('Søk om foreldrepenger')).toBeInTheDocument();
+        expect(screen.getByText('Søk om svangerskapspenger')).toBeInTheDocument();
+        expect(screen.getByText('Søk om engangsstønad')).toBeInTheDocument();
+    });
+});

apps/foreldrepengeoversikt/src/components/søkelenker/SøkelenkerPanel.tsx

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { useIntl } from 'react-intl';
+
+import { Bleed, HGrid } from '@navikt/ds-react';
+
+import { links } from '@navikt/fp-constants';
+
+import { LenkePanel } from '../../components/lenke-panel/LenkePanel';
+import { LayoutWrapper } from '../../sections/LayoutWrapper';
+
+const PanelBleed = ({ children, doBleed }: { children: ReactNode; doBleed: boolean }) => {
+    return doBleed ? (
+        <div className="pt-12">
+            <Bleed marginInline="full" className="bg-surface-neutral-subtle">
+                <LayoutWrapper className="pt-1 pb-1 pl-4 pr-4">{children}</LayoutWrapper>
+            </Bleed>
+        </div>
+    ) : (
+        children
+    );
+};
+
+interface Props {
+    doBleed?: boolean;
+}
+
+export const SøkelenkerPanel = ({ doBleed = false }: Props) => {
+    const intl = useIntl();
+    return (
+        <PanelBleed doBleed={doBleed}>
+            <HGrid gap="4" columns={{ sm: 1, md: 2 }} className={doBleed ? 'mt-12 mb-12' : undefined}>
+                <LenkePanel
+                    tittel={intl.formatMessage({ id: 'SøkelenkerPanel.HarRett' })}
+                    undertittel={intl.formatMessage({ id: 'SøkelenkerPanel.VenterBarn' })}
+                    to={links.rettOgPlikt}
+                />
+                <LenkePanel tittel={intl.formatMessage({ id: 'SøkelenkerPanel.SokFp' })} to={links.foreldrepenger} />
+                <LenkePanel
+                    tittel={intl.formatMessage({ id: 'SøkelenkerPanel.SokSvp' })}
+                    to={links.svangerskapspenger}
+                />
+                <LenkePanel tittel={intl.formatMessage({ id: 'SøkelenkerPanel.SokEs' })} to={links.engangsstonad} />
+            </HGrid>
+        </PanelBleed>
+    );
+};

apps/foreldrepengeoversikt/src/intl/messages/nb_NO.json

@@ -168,5 +168,12 @@
     "KontonummerInfoTekst.Mangler": "NAV mangler kontonummeret som {ytelse, select, foreldrepenger {foreldrepengene} svangerskapspenger {svangerskapspengene} other {engangsstønaden}} vil bli betalt til hvis du får søknaden din innvilget.",
     "DinPlan.EndrePlan": "Endre planen",
     "DinPlan.Liste": "Liste",
-    "DinPlan.Kalender": "Kalender"
+    "DinPlan.Kalender": "Kalender",
+    "SøkelenkerPanel.HarRett": "Les om hva du har rett på",
+    "SøkelenkerPanel.VenterBarn": "Hvis du venter eller har nylig fått barn",
+    "SøkelenkerPanel.SokFp": "Søk om foreldrepenger",
+    "SøkelenkerPanel.SokSvp": "Søk om svangerskapspenger",
+    "SøkelenkerPanel.SokEs": "Søk om engangsstønad",
+    "HarIkkeSaker.IngenSoknader": "Du har ingen søknader om foreldrepenger, engangsstønad eller svangerskapspenger",
+    "HarIkkeSaker.ToUker": "Det kan ta opp til to uker for å få svar dersom du har søkt via brev."
 }

apps/foreldrepengeoversikt/src/pages/forside/Forside.tsx

@@ -5,8 +5,8 @@ import { Alert, VStack } from '@navikt/ds-react';
 
 import { erSakOppdatertOptions } from './../../api/api';
 import BekreftelseSendtSøknad from './../../components/bekreftelse-sendt-søknad/BekreftelseSendtSøknad';
-import HarIkkeSaker from './../../components/har-ikke-saker/HarIkkeSaker';
-import HarSaker from './../../components/har-saker/HarSaker';
+import { HarIkkeSaker } from './../../components/har-ikke-saker/HarIkkeSaker';
+import { HarSaker } from './../../components/har-saker/HarSaker';
 import { ForsideHeader } from './../../components/header/Header';
 import { SakLink } from './../../components/sak-link/SakLink';
 import {