Avtalesversjoner for beslutter (#1176)

* Lagt til versjoner til avtaler for beslutter Co-authored-by: Magnus Rom <[email protected]>
navikt · Nov 1, 2023 · 39e12d7 · 39e12d7
1 parent 9870541
commit 39e12d7
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 34 deletions.
diff --git a/...kjenningSteg/Oppsummering/BeregningTilskuddOppsummering/BeregningTilskuddOppsummering.tsx b/...kjenningSteg/Oppsummering/BeregningTilskuddOppsummering/BeregningTilskuddOppsummering.tsx
@@ -36,7 +36,7 @@ const BeregningTilskuddOppsummering: FunctionComponent<Beregningsgrunnlag & Kont
                 props.stillingprosent > 0 &&
                 props.stillingprosent < 100 && (
                     <>
-                        <Label>Lønn ved 100% stilling</Label>
+                        <Label>Lønn ved 100% stilling </Label>
                         {props.manedslonn100pst} kr
                     </>
                 )}

diff --git a/src/BeslutterSide/BeslutterSide.less b/src/BeslutterSide/BeslutterSide.less
@@ -13,13 +13,28 @@
         align-items: center;
     }
 
-    &__head-wrapper, &__avtale-wrapper {
+    &__head-wrapper, &__avtale-wrapper, &__avtale-versjon-wrapper {
         width: 100%;
         max-width: @container-desktop;
     }
 
+    &__avtale-wrapper, &__avtale-versjon-wrapper {
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
+    }
+
     &__avtale-wrapper {
+        >.accordion {
+            border: none;
+        }
+        &:last-child {
+            margin-bottom: 4rem;
+        }
+        margin-bottom: 1rem;
+    }
+
+    &__avtale-versjon-wrapper {
         margin-bottom: 4rem;
+        border-radius: 4px;
     }
 
     &__hoved-tittel {

diff --git a/src/BeslutterSide/BeslutterSide.tsx b/src/BeslutterSide/BeslutterSide.tsx
@@ -3,7 +3,7 @@ import TilbakeTilOversiktLenke from '@/AvtaleSide/TilbakeTilOversiktLenke/Tilbak
 import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
 import { avtaleTittel, tiltakstypeTekst } from '@/messages';
 import BEMHelper from '@/utils/bem';
-import React, { Dispatch, FunctionComponent, SetStateAction, useContext, useState } from 'react';
+import React, { Dispatch, FunctionComponent, SetStateAction, Suspense, useContext, useState } from 'react';
 import './BeslutterSide.less';
 import BeslutterPanel from '@/BeslutterSide/beslutterPanel/BeslutterPanel';
 import BeslutterTilskuddsPerioder from '@/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder';
@@ -14,6 +14,8 @@ import { TiltaksType } from '@/types/avtale';
 import OppsummeringArbeidstrening from '@/AvtaleSide/steg/GodkjenningSteg/Oppsummering/OppsummeringArbeidstrening/OppsummeringArbeidstrening';
 import OppsummeringMentor from '@/AvtaleSide/steg/GodkjenningSteg/Oppsummering/OppsummeringMentor/OppsummeringMentor';
 import OppsummeringInkluderingstilskudd from '@/AvtaleSide/steg/GodkjenningSteg/Oppsummering/OppsummeringInkluderingstilskudd/OppsummeringInkluderingstilskudd';
+import VersjoneringKomponent from '@/AvtaleSide/steg/GodkjenningSteg/Versjonering/VersjoneringKomponent';
+import { InnloggetBrukerContext } from '@/InnloggingBoundary/InnloggingBoundary';
 
 const cls = BEMHelper('beslutter-side');
 
@@ -29,6 +31,7 @@ export interface Periode {
 export const TilskuddsperiodeContext = React.createContext<Periode>({} as Periode);
 
 const BeslutterSide: FunctionComponent = () => {
+    const innloggetBruker = useContext(InnloggetBrukerContext);
     const { avtale } = useContext(AvtaleContext);
     const { gjeldendeTilskuddsperiode, enhetOppfolging, enhetGeografisk } = avtale;
     const [visAvslag, setVisAvslag] = useState(false);
@@ -40,6 +43,7 @@ const BeslutterSide: FunctionComponent = () => {
     );
     const [enhetFeil, setEnhetFeil] = useState<string | undefined>(undefined);
     const [, setClsName] = useState<string>();
+    const [visVersjon, setVisVersjon] = useState(false);
 
     const fadeInOut = () => {
         setClsName(cls.element('fade'));
@@ -70,34 +74,39 @@ const BeslutterSide: FunctionComponent = () => {
         <>
             <TilskuddsperiodeContext.Provider value={context}>
                 <VerticalSpacer rem={2} />
-                <div className={cls.element('container')}>
-                    <div className={cls.element('innhold')}>
-                        <div className={cls.element('head-wrapper')}>
-                            <TilbakeTilOversiktLenke />
-                            <Heading size="large" className={cls.element('hoved-tittel')}>
-                                Tilskudd om {tiltakstypeTekst[avtale.tiltakstype]}
-                            </Heading>
-                        </div>
-                        <div className={cls.element('wrapper')}>
-                            <BeslutterPanel />
-                            <BeslutterTilskuddsPerioder startAnimering={fadeInOut} />
-                        </div>
-                        <VerticalSpacer rem={1} />
-                        <div className={cls.element('avtale-wrapper')}>
-                            <Accordion className="accordion">
-                                <Accordion.Item>
-                                    <Accordion.Header>Se avtalen</Accordion.Header>
-                                    <Accordion.Content>
-                                        <Innholdsboks>
-                                            <Heading size="large">{avtaleTittel[avtale.tiltakstype]}</Heading>
-                                            <VerticalSpacer rem={2} />
-                                            {oppsummeringType[avtale.tiltakstype]}
-                                        </Innholdsboks>
-                                    </Accordion.Content>
-                                </Accordion.Item>
-                            </Accordion>
-                        </div>
+                <div className={cls.element('innhold')}>
+                    <div className={cls.element('head-wrapper')}>
+                        <TilbakeTilOversiktLenke />
+                        <Heading size="large" className={cls.element('hoved-tittel')}>
+                            Tilskudd om {tiltakstypeTekst[avtale.tiltakstype]}
+                        </Heading>
                     </div>
+                    <div className={cls.element('wrapper')}>
+                        <BeslutterPanel />
+                        <BeslutterTilskuddsPerioder startAnimering={fadeInOut} />
+                    </div>
+                    <VerticalSpacer rem={1} />
+                    <div className={cls.element('avtale-wrapper')}>
+                        <Accordion className="accordion" onClick={() => setVisVersjon(!visVersjon)}>
+                            <Accordion.Item>
+                                <Accordion.Header>Se avtalen</Accordion.Header>
+                                <Accordion.Content>
+                                    <Innholdsboks>
+                                        <Heading size="large">{avtaleTittel[avtale.tiltakstype]}</Heading>
+                                        <VerticalSpacer rem={2} />
+                                        {oppsummeringType[avtale.tiltakstype]}
+                                    </Innholdsboks>
+                                </Accordion.Content>
+                            </Accordion.Item>
+                        </Accordion>
+                    </div>
+                    {visVersjon && (
+                        <div className={cls.element('avtale-versjon-wrapper')}>
+                            <Suspense fallback={null}>
+                                <VersjoneringKomponent avtale={avtale} rolle={innloggetBruker.rolle} />
+                            </Suspense>
+                        </div>
+                    )}
                 </div>
             </TilskuddsperiodeContext.Provider>
         </>

diff --git a/src/BeslutterSide/beslutterPanel/InfoVisningTilskuddsperiode.tsx b/src/BeslutterSide/beslutterPanel/InfoVisningTilskuddsperiode.tsx
@@ -31,7 +31,7 @@ const InfoVisningTilskuddsperiode: FunctionComponent = () => {
                             gjeldendeTilskuddsperiode.startDato,
                             gjeldendeTilskuddsperiode.sluttDato
                         )}
-                        style={{ minHeight: '2.5rem' }}
+                        style={{ minHeight: '2rem' }}
                     />
                 </div>
                 <div className={cls.element('infovisning-gruppe')}>

diff --git a/src/BeslutterSide/beslutterPanel/TilskuddsperiodeEndreKostnadssted.tsx b/src/BeslutterSide/beslutterPanel/TilskuddsperiodeEndreKostnadssted.tsx
@@ -18,11 +18,10 @@ const TilskuddsperiodeEndreKostnadssted: FunctionComponent = () => {
         <>
             <div className={cls.element('input-wrapper')}>
                 <PakrevdInput
-                    width="S"
+                    size="small"
                     label=""
                     verdi={enhet}
                     settVerdi={(verdi) => setEnhet(verdi)}
-                    maxLength={4}
                     error={enhetFeil}
                 />
                 <VerticalSpacer rem={1} />

diff --git a/src/BeslutterSide/beslutterPanel/beslutterPanel.less b/src/BeslutterSide/beslutterPanel/beslutterPanel.less
@@ -25,7 +25,7 @@
   &__infovisning-rad {
     display: flex;
     align-items: center;
-    margin: 1rem 0;
+    margin-top: 1rem;
 
     & > p:nth-child(1) {
       min-width: 9rem;
@@ -61,6 +61,8 @@
 
   &__input-wrapper {
     display: flex;
+    margin-left: 1rem;
+    width: 5rem;
   }
 
   @media(min-width: @container-tablet) {
@@ -75,6 +77,10 @@
 
     &__infovisning-rad {
       flex-direction: row;
+      .navds-form-field {
+        gap: 0;
+        grid-gap: 0;
+      }
     }
   }
 }