From d252aeb89bd8b3c80c5bc5ad66cb4cf49201cef3 Mon Sep 17 00:00:00 2001
From: Andreas Dybdahl <andreas.dyb@gmail.com>
Date: Thu, 29 Aug 2019 13:02:49 +0200
Subject: [PATCH] =?UTF-8?q?F=C3=B8rste=20utkast=20for=20visning=20av=20sam?=
 =?UTF-8?q?tidig=20uttak?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: c3f456c74df39be8ce6d43a286f2f6e56dc60786
---
 .../uttaksplanlegger/Uttaksplanlegger.tsx     |  3 ++-
 .../components/periodeliste/Periodeliste.tsx  |  1 +
 .../periodeliste/elements/PeriodeHeader.tsx   |  8 +++++++-
 .../elements/PeriodelisteItemHeader.tsx       | 13 ++++++++++---
 .../periodeliste/elements/periodeheader.less  | 19 +++++++++++++++++++
 .../PeriodelisteAvsl\303\245ttPeriode.tsx"    |  1 +
 .../items/PeriodelisteGruppertInfoPart.tsx    |  1 +
 .../periodeliste/items/PeriodelisteHull.tsx   |  1 +
 .../periodeliste/items/PeriodelisteInfo.tsx   |  5 ++++-
 .../items/PeriodelisteOppholdAnnenPart.tsx    |  1 +
 10 files changed, 47 insertions(+), 6 deletions(-)

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<Props, State> {
                         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<Props> {
                                     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<Props & InjectedIntlProps> = ({
     }
     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 (
         <PeriodelisteItemHeader
             type="periode"
             isOpen={isOpen}
             melding={melding}
             tittel={periodetittel}
+            erSamtidigUttak={samtidigUttak || samtidigUttakAnnenPart}
             beskrivelse={
                 <>
                     {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<Props> = ({
     tittel,
     beskrivelse,
     melding,
-    tidsperiode
+    tidsperiode,
+    erSamtidigUttak
 }) => {
     return (
         <div className={BEM.modifier(type)}>
@@ -58,8 +60,13 @@ const PeriodelisteItemHeader: React.StatelessComponent<Props> = ({
                     {ikon}
                 </div>
                 <div className={BEM.element('beskrivelse')}>
-                    <Element tag="h1">{tittel}</Element>
-                    {beskrivelse && <Normaltekst>{beskrivelse}</Normaltekst>}
+                    <div className={BEM.element('beskrivelse__tekst')}>
+                        <Element tag="h1">{tittel}</Element>
+                        {beskrivelse && <Normaltekst>{beskrivelse}</Normaltekst>}
+                    </div>
+                    <div>
+                        {erSamtidigUttak && <div className={BEM.element('samtidig-uttak-punkt')}>Samtidig uttak</div>}
+                    </div>
                 </div>
                 {melding && (
                     <div className={BEM.element('advarsel')}>
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<Props & InjectedIntl
             onToggle={onToggle}
             beskrivelse={beskrivelse}
             ikon={<UttaksplanAdvarselIkon />}
+            erSamtidigUttak={false}
             renderContent={() => (
                 <div>
                     <Block>
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<Props & InjectedInt
             tittel={tittel}
             isExpanded={isExpanded}
             onToggle={onToggle}
+            erSamtidigUttak={false}
             ikon={getPeriodeIkon(periode, navnPåForeldre)}
             farge="transparent"
             border={stil === 'medRammeOgStrek'}
diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteHull.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteHull.tsx
index 151d118b1c..28f89d98ad 100644
--- a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteHull.tsx
+++ b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteHull.tsx
@@ -89,6 +89,7 @@ const PeriodelisteHullItem: React.StatelessComponent<Props & InjectedIntlProps>
             onToggle={onToggle}
             beskrivelse={beskrivelse}
             ikon={<UttaksplanAdvarselIkon />}
+            erSamtidigUttak={false}
             renderContent={() => (
                 <div>
                     {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<Props> = ({
@@ -34,7 +35,8 @@ const PeriodelisteInfo: React.StatelessComponent<Props> = ({
     tidsperiode,
     farge = 'yellow',
     border,
-    periodeFargestrek
+    periodeFargestrek,
+    erSamtidigUttak
 }) => {
     return (
         <PeriodelisteItemWrapper
@@ -54,6 +56,7 @@ const PeriodelisteInfo: React.StatelessComponent<Props> = ({
                         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<Props & InjectedInt
             ikon={getPeriodeIkon(periode, navnPåForeldre)}
             farge="transparent"
             border={true}
+            erSamtidigUttak={isUttakAnnenPart(periode) ? periode.ønskerSamtidigUttak === true : false}
             renderContent={() => (
                 <div>
                     <strong>