diff --git a/mock-api/mock_data/saker.json b/mock-api/mock_data/saker.json index cc961fb2..d00ac625 100644 --- a/mock-api/mock_data/saker.json +++ b/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": [] -} \ No newline at end of file +} diff --git a/mock-api/mock_data/sokerinfo.json b/mock-api/mock_data/sokerinfo.json index 24859b58..0e1ba3d9 100644 --- a/mock-api/mock_data/sokerinfo.json +++ b/mock-api/mock_data/sokerinfo.json @@ -26,4 +26,4 @@ } ] } -} \ No newline at end of file +} diff --git a/src/app/components/har-saker/HarSaker.tsx b/src/app/components/har-saker/HarSaker.tsx index e6a050f5..24c54cb2 100644 --- a/src/app/components/har-saker/HarSaker.tsx +++ b/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,11 +97,11 @@ 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), }); @@ -85,6 +109,7 @@ export const getTittelBarnNårNavnSkalIkkeVises = ( 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 ; + case 2: + return ; + default: + return ; + } +}; + const HarSaker: React.FunctionComponent = ({ grupperteSaker }) => { const bem = bemUtils('har-saker'); const intl = useIntl(); @@ -106,33 +142,31 @@ const HarSaker: React.FunctionComponent = ({ 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 (
- - - {formaterNavnPåBarn( - gruppering.barn?.fornavn, - gruppering.barn?.fødselsdatoer, - ISOStringToDate(gruppering.familiehendelsedato)!, - !!gruppering.barn?.alleBarnaLever, - gruppering.antallBarn, - intl, - gruppering.type - )} + + {getIkonForAntallBarn(gruppering.antallBarn)} +
+
{tittel}
+ {undertittel && {undertittel}} +
- {undertittel && ( - - {' '} - {undertittel} - - )} {gruppering.saker.map((sak) => { return ; })} diff --git a/src/app/components/har-saker/har-saker.css b/src/app/components/har-saker/har-saker.css index a93784ec..91207c03 100644 --- a/src/app/components/har-saker/har-saker.css +++ b/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; } \ No newline at end of file diff --git a/src/app/components/header/Header.tsx b/src/app/components/header/Header.tsx index f62455ac..d6c7e9de 100644 --- a/src/app/components/header/Header.tsx +++ b/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,16 +109,23 @@ 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 (
@@ -125,8 +133,18 @@ const renderHeaderContent = ( {getSaksoversiktHeading(sak.ytelse)}
{`SAKSNR ${sak?.saksnummer}`} -
|
- {beskrivelse} +
+
+ {barnTittel} + {barnUndertittel && ( + {barnUndertittel} + )} +
diff --git a/src/app/components/header/header.css b/src/app/components/header/header.css index a9a93995..bf8eacdb 100644 --- a/src/app/components/header/header.css +++ b/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 { diff --git a/src/app/intl/nb_NO.json b/src/app/intl/nb_NO.json index b87964f1..eb903999 100644 --- a/src/app/intl/nb_NO.json +++ b/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}", diff --git a/src/app/types/GruppertSak.ts b/src/app/types/GruppertSak.ts index 98024f60..e68e408e 100644 --- a/src/app/types/GruppertSak.ts +++ b/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; ytelse: Ytelse; barn: BarnGruppering | undefined; diff --git a/src/app/types/Situasjon.ts b/src/app/types/Situasjon.ts new file mode 100644 index 00000000..0e118ede --- /dev/null +++ b/src/app/types/Situasjon.ts @@ -0,0 +1 @@ +export type Situasjon = 'fødsel' | 'termin' | 'adopsjon'; diff --git a/src/app/utils/sakerUtils.ts b/src/app/utils/sakerUtils.ts index b8b23ed0..94e5f61b 100644 --- a/src/app/utils/sakerUtils.ts +++ b/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)), }; }; diff --git a/src/assets/ToBarn.tsx b/src/assets/ToBarn.tsx new file mode 100644 index 00000000..224a350c --- /dev/null +++ b/src/assets/ToBarn.tsx @@ -0,0 +1,137 @@ +import * as React from 'react'; + +const ToBarn = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default ToBarn; diff --git a/src/assets/TreBarn.tsx b/src/assets/TreBarn.tsx new file mode 100644 index 00000000..520c3c2f --- /dev/null +++ b/src/assets/TreBarn.tsx @@ -0,0 +1,201 @@ +import * as React from 'react'; + +const TreBarn = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default TreBarn;