videre arbeid

mock-api/mock_data/saker.json

@@ -11,10 +11,7 @@
             "ønskerJustertUttakVedFødsel": false,
             "rettighetType": "BEGGE_RETT",
             "annenPart": {
-                "type": "person",
-                "fnr": "03506715317",
-                "fornavn": "Aritmetisk",
-                "etternavn": "Okse"
+                "fnr": "03506715317"
             },
             "familiehendelse": {
                 "fødselsdato": "2022-07-01",
@@ -87,11 +84,7 @@
             },
             "barn": [
                 {
-                    "type": "person",
-                    "fnr": "01472254177",
-                    "fornavn": "Magnífico",
-                    "etternavn": "Fattigmannskost",
-                    "fødselsdato": "2022-07-01"
+                    "fnr": "01472254177"
                 }
             ],
             "dekningsgrad": "HUNDRE"
@@ -176,4 +169,4 @@
     ],
     "engangsstønad": [],
     "svangerskapspenger": []
-}
+}

mock-api/mock_data/sokerinfo.json

@@ -26,4 +26,4 @@
             }
         ]
     }
-}
+}

src/app/components/har-saker/HarSaker.tsx

@@ -1,9 +1,12 @@
-import { Heading } from '@navikt/ds-react';
+import { BodyShort, Heading } from '@navikt/ds-react';
 import { bemUtils, formatDate, guid, intlUtils } from '@navikt/fp-common';
 import { useSetBackgroundColor } from 'app/hooks/useBackgroundColor';
 import { GruppertSak } from 'app/types/GruppertSak';
+import { Situasjon } from 'app/types/Situasjon';
 import { ISOStringToDate } from 'app/utils/dateUtils';
 import EtBarn from 'assets/EtBarn';
+import ToBarn from 'assets/ToBarn';
+import TreBarn from 'assets/TreBarn';
 import dayjs from 'dayjs';
 import React from 'react';
 import { IntlShape, useIntl } from 'react-intl';
@@ -15,27 +18,48 @@ interface Props {
     grupperteSaker: GruppertSak[];
 }
 
-export const formaterNavnPåBarn = (
+export const getBarnTittel = (
     fornavn: string[] | undefined,
     fødselsdatoer: Date[] | undefined,
     familiehendelsesdato: Date,
     alleBarnaLever: boolean,
     antallBarn: number,
     intl: IntlShape,
-    type: 'fødsel' | 'termin' | 'adopsjon'
+    type: Situasjon
 ): string => {
     if (fornavn === undefined || fornavn.length === 0 || !alleBarnaLever) {
         return getTittelBarnNårNavnSkalIkkeVises(familiehendelsesdato, fødselsdatoer, antallBarn, intl, type);
     }
 
     if (fornavn.length > 1) {
-        const fornavnene = fornavn.slice(0, -1).join(', ');
+        const fornavnene = fornavn
+            .map((n) => n.trim())
+            .slice(0, -1)
+            .join(', ');
         const sisteFornavn = fornavn[fornavn.length - 1];
         return `${fornavnene} og ${sisteFornavn}`;
     }
     return `${fornavn[0]}`;
 };
 
+export const getBarnUndertittel = (
+    fornavn: string[] | undefined,
+    fødselsdatoer: Date[] | undefined,
+    type: Situasjon,
+    familiehendelsedato: Date,
+    allebarnaLever: boolean
+) => {
+    const viserNavnPåBarn = fornavn !== undefined && fornavn.length > 0 && allebarnaLever;
+    if (type === 'fødsel' && viserNavnPåBarn) {
+        const fødtDatoTekst = formaterFødselsdatoerPåBarn(fødselsdatoer);
+        return `Født ${fødtDatoTekst}`;
+    }
+    if (type === 'adopsjon' && viserNavnPåBarn) {
+        return `Adoptert ${formatDate(familiehendelsedato)}`;
+    }
+    return undefined;
+};
+
 export const getTekstForAntallBarn = (antallBarn: number, intl: IntlShape): string => {
     if (antallBarn === 1) {
         return intlUtils(intl, 'barn');
@@ -73,18 +97,19 @@ export const getTittelBarnNårNavnSkalIkkeVises = (
     fødselsdatoer: Date[] | undefined,
     antallBarn: number,
     intl: IntlShape,
-    type: 'fødsel' | 'termin' | 'adopsjon'
+    type: Situasjon
 ): string => {
     const barnTekst = getTekstForAntallBarn(antallBarn, intl);
     if (antallBarn === 0 || type === 'termin') {
-        intlUtils(intl, 'barnHeader.terminBarn', {
+        return intlUtils(intl, 'barnHeader.terminBarn', {
             barnTekst,
             termindato: formatDate(familiehendelsedato),
         });
     }
 
     if (type === 'adopsjon') {
         return intlUtils(intl, 'barnHeader.adoptertBarn', {
+            barnTekst,
             adopsjonsdato: formatDate(familiehendelsedato),
         });
     } else {
@@ -98,6 +123,17 @@ export const getTittelBarnNårNavnSkalIkkeVises = (
     }
 };
 
+const getIkonForAntallBarn = (antallBarn: number) => {
+    switch (antallBarn) {
+        case 1:
+            return <EtBarn />;
+        case 2:
+            return <ToBarn />;
+        default:
+            return <TreBarn />;
+    }
+};
+
 const HarSaker: React.FunctionComponent<Props> = ({ grupperteSaker }) => {
     const bem = bemUtils('har-saker');
     const intl = useIntl();
@@ -106,33 +142,31 @@ const HarSaker: React.FunctionComponent<Props> = ({ grupperteSaker }) => {
     return (
         <>
             {grupperteSaker.map((gruppering) => {
-                let undertittel = undefined;
-                if (gruppering.type === 'fødsel') {
-                    const fødtDatoTekst = formaterFødselsdatoerPåBarn(gruppering.barn?.fødselsdatoer);
-                    undertittel = `Født ${fødtDatoTekst}`;
-                } else if (gruppering.type === 'adopsjon') {
-                    undertittel = `Adoptert ${formatDate(gruppering.familiehendelsedato)}`;
-                }
+                const tittel = getBarnTittel(
+                    gruppering.barn?.fornavn,
+                    gruppering.barn?.fødselsdatoer,
+                    ISOStringToDate(gruppering.familiehendelsedato)!,
+                    !!gruppering.barn?.alleBarnaLever,
+                    gruppering.antallBarn,
+                    intl,
+                    gruppering.type
+                );
+                const undertittel = getBarnUndertittel(
+                    gruppering.barn?.fornavn,
+                    gruppering.barn?.fødselsdatoer,
+                    gruppering.type,
+                    ISOStringToDate(gruppering.familiehendelsedato)!,
+                    !!gruppering.barn?.alleBarnaLever
+                );
                 return (
                     <div className={bem.block} key={gruppering.familiehendelsedato}>
-                        <Heading size="medium" level="2" className={bem.element('tittel')}>
-                            <EtBarn />
-                            {formaterNavnPåBarn(
-                                gruppering.barn?.fornavn,
-                                gruppering.barn?.fødselsdatoer,
-                                ISOStringToDate(gruppering.familiehendelsedato)!,
-                                !!gruppering.barn?.alleBarnaLever,
-                                gruppering.antallBarn,
-                                intl,
-                                gruppering.type
-                            )}
+                        <Heading size="small" level="2" className={bem.element('tittel')}>
+                            {getIkonForAntallBarn(gruppering.antallBarn)}
+                            <div>
+                                <div>{tittel}</div>
+                                {undertittel && <BodyShort size="medium">{undertittel}</BodyShort>}
+                            </div>
                         </Heading>
-                        {undertittel && (
-                            <Heading size="small" level="3">
-                                {' '}
-                                {undertittel}
-                            </Heading>
-                        )}
                         {gruppering.saker.map((sak) => {
                             return <SakLink key={guid()} sak={sak} />;
                         })}

src/app/components/har-saker/har-saker.css

@@ -8,6 +8,10 @@
     margin-bottom: 1rem;
 }
 
+.har-saker__undertittel {
+    font-size: large;
+}
+
 .har-saker__tittel > :first-child {
     margin-right: 1rem;
 }

src/app/components/header/Header.tsx

@@ -10,9 +10,10 @@ import { Ytelse } from 'app/types/Ytelse';
 import { ISOStringToDate } from 'app/utils/dateUtils';
 import { getFamiliehendelseDato, utledFamiliesituasjon } from 'app/utils/sakerUtils';
 import TåteflaskeBaby from 'assets/TåteflaskeBaby';
+import classNames from 'classnames';
 import React from 'react';
 import { IntlShape, useIntl } from 'react-intl';
-import { formaterNavnPåBarn } from '../har-saker/HarSaker';
+import { getBarnTittel, getBarnUndertittel } from '../har-saker/HarSaker';
 import PreviousLink from '../previous-link/PreviousLink';
 import StatusTag from '../status-tag/StatusTag';
 
@@ -108,25 +109,42 @@ const renderHeaderContent = (
 
     if (selectedRoute === OversiktRoutes.SAKSOVERSIKT && sak) {
         const situasjon = utledFamiliesituasjon(sak.familiehendelse, sak.gjelderAdopsjon);
-        const familiehendelsedato = getFamiliehendelseDato(sak.familiehendelse);
-        const beskrivelse = formaterNavnPåBarn(
+        const familiehendelsedato = ISOStringToDate(getFamiliehendelseDato(sak.familiehendelse));
+        const barnTittel = getBarnTittel(
             barn?.fornavn,
             barn?.fødselsdatoer,
-            ISOStringToDate(familiehendelsedato)!,
+            familiehendelsedato!,
             !!barn?.alleBarnaLever,
             sak.ytelse === Ytelse.FORELDREPENGER ? sak.familiehendelse.antallBarn : 0,
             intl,
             situasjon
         );
+        const barnUndertittel = getBarnUndertittel(
+            barn?.fornavn,
+            barn?.fødselsdatoer,
+            situasjon,
+            familiehendelsedato!,
+            !!barn?.alleBarnaLever
+        );
         return (
             <div className={bem.element('content')}>
                 <TåteflaskeBaby />
                 <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '1rem', marginBottom: '1rem' }}>
                     <Heading size="xlarge">{getSaksoversiktHeading(sak.ytelse)}</Heading>
                     <div className={bem.element('text-with-bar')}>
                         <BodyShort>{`SAKSNR ${sak?.saksnummer}`}</BodyShort>
-                        <div className={bem.element('divider')}>|</div>
-                        <BodyShort className={bem.element('divider-text')}>{beskrivelse}</BodyShort>
+                        <hr
+                            className={classNames(
+                                bem.element('divider'),
+                                barnUndertittel ? bem.modifier('divider-long') : bem.modifier('divider-short')
+                            )}
+                        ></hr>
+                        <div>
+                            <BodyShort className={bem.element('divider-text')}>{barnTittel}</BodyShort>
+                            {barnUndertittel && (
+                                <BodyShort className={bem.element('divider-text')}>{barnUndertittel}</BodyShort>
+                            )}
+                        </div>
                     </div>
                     <StatusTag sak={sak} className={bem.element('tag')} />
                 </div>

src/app/components/header/header.css

@@ -25,7 +25,17 @@
 
 .header__divider {
     margin: 0 0.75rem;
+    width: 0.5px;
     color: var(--a-text-subtle);
+    fill: var(--a-text-subtle);
+}
+
+.header--divider-long {
+    height: 48px;
+}
+
+.header--divider-short {
+    height: 24px;
 }
 
 .header__divider-text {

src/app/intl/nb_NO.json

@@ -1,4 +1,8 @@
 {
+    "barn": "Barn",
+    "tvillinger": "Tvillinger",
+    "trillinger": "Trillinger",
+    "flerlinger": "Flerlinger",
     "Ja": "Ja",
     "Nei": "Nei",
     "barnHeader.terminBarn": "{barnTekst} med termin {termindato}",

src/app/types/GruppertSak.ts

@@ -1,13 +1,14 @@
 import { BarnGruppering } from './BarnGruppering';
 import { EngangsstønadSak } from './EngangsstønadSak';
 import { Foreldrepengesak } from './Foreldrepengesak';
+import { Situasjon } from './Situasjon';
 import { SvangerskapspengeSak } from './SvangerskapspengeSak';
 import { Ytelse } from './Ytelse';
 
 export interface GruppertSak {
     antallBarn: number;
     familiehendelsedato: string;
-    type: 'fødsel' | 'termin' | 'adopsjon';
+    type: Situasjon;
     saker: Array<Foreldrepengesak | SvangerskapspengeSak | EngangsstønadSak>;
     ytelse: Ytelse;
     barn: BarnGruppering | undefined;

src/app/types/Situasjon.ts

@@ -0,0 +1 @@
+export type Situasjon = 'fødsel' | 'termin' | 'adopsjon';

src/app/utils/sakerUtils.ts

@@ -17,6 +17,16 @@ export const getAlleYtelser = (saker: SakOppslag): Sak[] => {
     return [...saker.engangsstønad, ...saker.foreldrepenger, ...saker.svangerskapspenger];
 };
 
+export function sorterPersonEtterEldstOgNavn(p1: Person, p2: Person) {
+    if (dayjs(p1.fødselsdato).isAfter(p2.fødselsdato, 'd')) {
+        return 1;
+    } else if (dayjs(p1.fødselsdato).isBefore(p2.fødselsdato, 'd')) {
+        return -1;
+    } else {
+        return p1.fornavn < p2.fornavn ? -1 : 1;
+    }
+}
+
 const getBarnGrupperingFraSak = (sak: Sak, registrerteBarn: Person[] | undefined): BarnGruppering => {
     const erForeldrepengesak = sak.ytelse === Ytelse.FORELDREPENGER;
     const barnFnrFraSaken = erForeldrepengesak && sak.barn !== undefined ? sak.barn.map((b) => b.fnr).flat() : [];
@@ -33,12 +43,22 @@ const getBarnGrupperingFraSak = (sak: Sak, registrerteBarn: Person[] | undefined
             : [];
 
     const alleBarn = pdlBarnMedSammeFnr.concat(pdlBarnMedSammeFødselsdato);
+    alleBarn.sort(sorterPersonEtterEldstOgNavn);
+    const alleBarnFødselsdatoer = alleBarn
+        .filter((b) => b.fødselsdato !== undefined)
+        .map((b) => ISOStringToDate(b.fødselsdato)!);
+    let fødselsdatoer = [] as Date[];
+    if (alleBarnFødselsdatoer && alleBarnFødselsdatoer.length > 0) {
+        fødselsdatoer = alleBarnFødselsdatoer;
+    } else if (fødselsdatoFraSak) {
+        fødselsdatoer = [fødselsdatoFraSak];
+    }
 
     return {
         fornavn: alleBarn
             ?.filter((b) => b.fornavn !== undefined && b.fornavn.trim() !== '')
             .map((b) => [b.fornavn, b.mellomnavn !== undefined ? b.mellomnavn : ''].join(' ')),
-        fødselsdatoer: alleBarn.filter((b) => b.fødselsdato !== undefined).map((b) => ISOStringToDate(b.fødselsdato)!),
+        fødselsdatoer,
         alleBarnaLever: !!alleBarn?.every((barn) => getLeverPerson(barn)),
     };
 };