diff --git a/src/app/components/uttaksplanlegger/Uttaksplanlegger.tsx b/src/app/components/uttaksplanlegger/Uttaksplanlegger.tsx index 5900d1884a..ef0e6109d7 100644 --- a/src/app/components/uttaksplanlegger/Uttaksplanlegger.tsx +++ b/src/app/components/uttaksplanlegger/Uttaksplanlegger.tsx @@ -206,7 +206,8 @@ class Uttaksplanlegger extends React.Component { info={infoOmTaptUttakVedUttakEtterSeksUkerFarMedmor} onLeggTilOpphold={this.settInnNyttOpphold} /> - ) + ), + erSamtidigUttak: false }); } diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/Periodeliste.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/Periodeliste.tsx index ddd4b02b7b..5e08f6d895 100644 --- a/src/app/components/uttaksplanlegger/components/periodeliste/Periodeliste.tsx +++ b/src/app/components/uttaksplanlegger/components/periodeliste/Periodeliste.tsx @@ -136,6 +136,7 @@ class Periodeliste extends React.Component { tittel={item.tittel} beskrivelse={item.beskrivelse} onToggle={onToggle} + erSamtidigUttak={false} /> ))} {filteredPerioder.map((periode) => { diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/elements/PeriodeHeader.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/elements/PeriodeHeader.tsx index b2e105b5b6..15202d5d03 100644 --- a/src/app/components/uttaksplanlegger/components/periodeliste/elements/PeriodeHeader.tsx +++ b/src/app/components/uttaksplanlegger/components/periodeliste/elements/PeriodeHeader.tsx @@ -7,7 +7,9 @@ import { Periodetype, StønadskontoType, isForeldrepengerFørFødselUttaksperiode, - isUtsettelseAnnenPart + isUtsettelseAnnenPart, + isUttakAnnenPart, + isUttaksperiode } from '../../../../../types/uttaksplan/periodetyper'; import { Tidsperioden, getValidTidsperiode } from '../../../../../util/uttaksplan/Tidsperioden'; import getMessage from 'common/util/i18nUtils'; @@ -90,12 +92,16 @@ const PeriodeHeader: React.StatelessComponent = ({ } const foreldernavn = getPeriodeForelderNavn(periode, navnPåForeldre); const periodetittel = getPeriodeTittel(intl, periode, navnPåForeldre); + const samtidigUttakAnnenPart = isUttakAnnenPart(periode) && periode.ønskerSamtidigUttak === true; + const samtidigUttak = isUttaksperiode(periode) && periode.ønskerSamtidigUttak === true; + return ( {varighetString} diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/elements/PeriodelisteItemHeader.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/elements/PeriodelisteItemHeader.tsx index 2cb44bba41..30111dc74f 100644 --- a/src/app/components/uttaksplanlegger/components/periodeliste/elements/PeriodelisteItemHeader.tsx +++ b/src/app/components/uttaksplanlegger/components/periodeliste/elements/PeriodelisteItemHeader.tsx @@ -18,6 +18,7 @@ interface Props { beskrivelse?: React.ReactNode; melding?: VeilederMessage; tidsperiode?: Tidsperiode; + erSamtidigUttak?: boolean; type: 'periode' | 'info'; } @@ -46,7 +47,8 @@ const PeriodelisteItemHeader: React.StatelessComponent = ({ tittel, beskrivelse, melding, - tidsperiode + tidsperiode, + erSamtidigUttak }) => { return (
@@ -58,8 +60,13 @@ const PeriodelisteItemHeader: React.StatelessComponent = ({ {ikon}
- {tittel} - {beskrivelse && {beskrivelse}} +
+ {tittel} + {beskrivelse && {beskrivelse}} +
+
+ {erSamtidigUttak &&
Samtidig uttak
} +
{melding && (
diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/elements/periodeheader.less b/src/app/components/uttaksplanlegger/components/periodeliste/elements/periodeheader.less index 31e4a77133..29db0ea982 100644 --- a/src/app/components/uttaksplanlegger/components/periodeliste/elements/periodeheader.less +++ b/src/app/components/uttaksplanlegger/components/periodeliste/elements/periodeheader.less @@ -25,15 +25,34 @@ line-height: 0; } &__beskrivelse { + display: flex; padding-left: 1rem; padding-top: 1rem; padding-bottom: 1rem; flex-grow: 3; } + &__beskrivelse__tekst { + min-width: 200px; + } &__advarsel { width: 3rem; flex-grow: 0; } + + &__samtidig-uttak-punkt { + position: relative; + + &:before { + content: ' \00b7'; + font-size: 70px; + display: inline-block; + color: #634689; + position: absolute; + left: -1.25rem; + top: -0.125rem; + } + } + &__tidsrom { min-width: 11rem; @media (max-width: @tablet-breakpoint) { diff --git "a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteAvsl\303\245ttPeriode.tsx" "b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteAvsl\303\245ttPeriode.tsx" index 5979270aae..6ce56f9398 100644 --- "a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteAvsl\303\245ttPeriode.tsx" +++ "b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteAvsl\303\245ttPeriode.tsx" @@ -69,6 +69,7 @@ const PeriodelisteAvslåttPeriode: React.StatelessComponent} + erSamtidigUttak={false} renderContent={() => (
diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteGruppertInfoPart.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteGruppertInfoPart.tsx index c9540fd9e5..518d4731a6 100644 --- a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteGruppertInfoPart.tsx +++ b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteGruppertInfoPart.tsx @@ -41,6 +41,7 @@ const PeriodelisteGruppertInfoPart: React.StatelessComponent onToggle={onToggle} beskrivelse={beskrivelse} ikon={} + erSamtidigUttak={false} renderContent={() => (
{isAvslåttPeriode(periode) ? ( diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteInfo.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteInfo.tsx index 5687fc0755..ca047fcba8 100644 --- a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteInfo.tsx +++ b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteInfo.tsx @@ -21,6 +21,7 @@ export interface PeriodelisteInformasjon { farge?: UttaksplanColor; periodeFargestrek?: UttaksplanColor; border?: boolean; + erSamtidigUttak: boolean; } const PeriodelisteInfo: React.StatelessComponent = ({ @@ -34,7 +35,8 @@ const PeriodelisteInfo: React.StatelessComponent = ({ tidsperiode, farge = 'yellow', border, - periodeFargestrek + periodeFargestrek, + erSamtidigUttak }) => { return ( = ({ tittel={tittel} beskrivelse={beskrivelse} tidsperiode={tidsperiode} + erSamtidigUttak={erSamtidigUttak} /> )} renderContent={renderContent} diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteOppholdAnnenPart.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteOppholdAnnenPart.tsx index b26c0b4edb..eebaf1e738 100644 --- a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteOppholdAnnenPart.tsx +++ b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteOppholdAnnenPart.tsx @@ -48,6 +48,7 @@ const PeriodelisteOppholdAnnenPart: React.StatelessComponent (