Merge branch 'uttaksplan-i-planlegger' into uttaksplan-i-planlegger-s…

…tyling
navikt · Jan 30, 2025 · 2d9c10f · 2d9c10f
2 parents 484f17b + ea03c0c
commit 2d9c10f
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 70 deletions.
diff --git a/packages/ny-uttaksplan/src/Uttaksplan.tsx b/packages/ny-uttaksplan/src/Uttaksplan.tsx
@@ -134,7 +134,12 @@ const UttaksplanNy: FunctionComponent<Props> = ({
         >
             <PeriodeListe perioder={komplettPlan} handleUpdatePeriode={handleUpdatePeriode} />
             <Button onClick={openModal}>Legg til periode</Button>
-            <LeggTilPeriodeModal ref={ref} closeModal={closeModal} handleAddPeriode={handleAddPeriode} />
+            <LeggTilPeriodeModal
+                ref={ref}
+                closeModal={closeModal}
+                handleAddPeriode={handleAddPeriode}
+                familiehendelsedato={familiehendelsedato}
+            />
         </UttaksplanDataContext>
     );
 };

diff --git a/packages/ny-uttaksplan/src/components/endre-periode-modal/EndrePeriodeModal.tsx b/packages/ny-uttaksplan/src/components/endre-periode-modal/EndrePeriodeModal.tsx
@@ -15,6 +15,7 @@ interface Props {
     closeModal: () => void | undefined;
     handleUpdatePeriode: (oppdatertPeriode: Planperiode) => void;
     permisjonsperiode: Permisjonsperiode;
+    familiehendelsedato: string;
 }
 
 export type ModalStep = 'step1' | 'step2' | 'step3' | 'step4';
@@ -28,7 +29,7 @@ export interface ModalData {
 }
 
 export const EndrePeriodeModal = forwardRef<HTMLDialogElement, Props>(
-    ({ closeModal, permisjonsperiode, handleUpdatePeriode }, ref) => {
+    ({ closeModal, permisjonsperiode, handleUpdatePeriode, familiehendelsedato }, ref) => {
         const kunEnPeriode = permisjonsperiode.perioder.length === 1;
         const initialModalState: ModalData = {
             valgtPeriode: kunEnPeriode ? permisjonsperiode.perioder[0] : undefined,
@@ -71,6 +72,7 @@ export const EndrePeriodeModal = forwardRef<HTMLDialogElement, Props>(
                 case 'step3':
                     return (
                         <EndreTidsperiodeModalStep
+                            familiehendelsedato={familiehendelsedato}
                             modalData={modalData}
                             setModalData={setModalData}
                             closeModal={closeModalWrapper}

diff --git a/...ages/ny-uttaksplan/src/components/endre-periode-modal/steps/EndreTidsperiodeModalStep.tsx b/...ages/ny-uttaksplan/src/components/endre-periode-modal/steps/EndreTidsperiodeModalStep.tsx
@@ -1,25 +1,27 @@
+import dayjs from 'dayjs';
 import { useForm } from 'react-hook-form';
 import { useIntl } from 'react-intl';
 
 import { Button, Heading } from '@navikt/ds-react';
 
 import { RhfDatepicker, RhfForm } from '@navikt/fp-form-hooks';
-import { isBeforeOrSame, isRequired, isValidDate } from '@navikt/fp-validation';
+import { isAfterOrSame, isBeforeOrSame, isRequired, isValidDate } from '@navikt/fp-validation';
 
 import { ModalData } from '../EndrePeriodeModal';
 
 interface Props {
     modalData: ModalData;
     setModalData: (data: ModalData) => void;
     closeModal: () => void;
+    familiehendelsedato: string;
 }
 
 interface FormValues {
     fom: string | undefined;
     tom: string | undefined;
 }
 
-export const EndreTidsperiodeModalStep = ({ modalData, setModalData, closeModal }: Props) => {
+export const EndreTidsperiodeModalStep = ({ modalData, setModalData, closeModal, familiehendelsedato }: Props) => {
     const intl = useIntl();
     const formMethods = useForm<FormValues>({
         defaultValues: {
@@ -45,6 +47,9 @@ export const EndreTidsperiodeModalStep = ({ modalData, setModalData, closeModal
             <RhfForm formMethods={formMethods} onSubmit={onSubmit} id="skjema">
                 <div style={{ display: 'flex', gap: '2rem', margin: '1rem 0' }}>
                     <RhfDatepicker
+                        showMonthAndYearDropdowns
+                        minDate={dayjs(familiehendelsedato).subtract(3, 'weeks').toDate()}
+                        maxDate={dayjs(familiehendelsedato).add(3, 'years').toDate()}
                         label="Fra og med dato"
                         name="fom"
                         validate={[

diff --git a/packages/ny-uttaksplan/src/components/legg-til-periode-modal/LeggTilPeriodeModal.tsx b/packages/ny-uttaksplan/src/components/legg-til-periode-modal/LeggTilPeriodeModal.tsx
@@ -15,6 +15,7 @@ import { VelgKontotypeModalStep } from './steps/VelgKontotypeModalStep';
 interface Props {
     closeModal: () => void | undefined;
     handleAddPeriode: (oppdatertPeriode: Planperiode) => void;
+    familiehendelsedato: string;
 }
 
 export type ModalStep = 'step1' | 'step2' | 'step3' | 'step4';
@@ -28,73 +29,80 @@ export interface ModalData {
     forelder?: Forelder;
 }
 
-export const LeggTilPeriodeModal = forwardRef<HTMLDialogElement, Props>(({ closeModal, handleAddPeriode }, ref) => {
-    const initialModalState: ModalData = {
-        hvaVilDuGjøre: undefined,
-        fom: undefined,
-        tom: undefined,
-        currentStep: 'step1',
-        kontoType: undefined,
-        forelder: undefined,
-    };
+export const LeggTilPeriodeModal = forwardRef<HTMLDialogElement, Props>(
+    ({ closeModal, handleAddPeriode, familiehendelsedato }, ref) => {
+        const initialModalState: ModalData = {
+            hvaVilDuGjøre: undefined,
+            fom: undefined,
+            tom: undefined,
+            currentStep: 'step1',
+            kontoType: undefined,
+            forelder: undefined,
+        };
 
-    const [modalData, setModalData] = useState<ModalData>(initialModalState);
-    const { currentStep } = modalData;
+        const [modalData, setModalData] = useState<ModalData>(initialModalState);
+        const { currentStep } = modalData;
 
-    const ariaLabelId = 'legg-til-periode-modal-heading';
+        const ariaLabelId = 'legg-til-periode-modal-heading';
 
-    const closeModalWrapper = () => {
-        setModalData(initialModalState);
-        closeModal();
-    };
+        const closeModalWrapper = () => {
+            setModalData(initialModalState);
+            closeModal();
+        };
 
-    const renderContent = () => {
-        switch (currentStep) {
-            case 'step1':
-                return (
-                    <ValgModalStep modalData={modalData} setModalData={setModalData} closeModal={closeModalWrapper} />
-                );
-            case 'step2':
-                return (
-                    <EndreTidsperiodeModalStep
-                        modalData={modalData}
-                        setModalData={setModalData}
-                        closeModal={closeModalWrapper}
-                    />
-                );
-            case 'step3':
-                return (
-                    <VelgKontotypeModalStep
-                        modalData={modalData}
-                        setModalData={setModalData}
-                        closeModal={closeModalWrapper}
-                    />
-                );
-            case 'step4':
-                return (
-                    <OppsummeringModalStep
-                        modalData={modalData}
-                        setModalData={setModalData}
-                        closeModal={closeModalWrapper}
-                        handleAddPeriode={handleAddPeriode}
-                    />
-                );
-            default:
-                return null;
-        }
-    };
+        const renderContent = () => {
+            switch (currentStep) {
+                case 'step1':
+                    return (
+                        <ValgModalStep
+                            modalData={modalData}
+                            setModalData={setModalData}
+                            closeModal={closeModalWrapper}
+                        />
+                    );
+                case 'step2':
+                    return (
+                        <EndreTidsperiodeModalStep
+                            modalData={modalData}
+                            setModalData={setModalData}
+                            closeModal={closeModalWrapper}
+                            familiehendelsedato={familiehendelsedato}
+                        />
+                    );
+                case 'step3':
+                    return (
+                        <VelgKontotypeModalStep
+                            modalData={modalData}
+                            setModalData={setModalData}
+                            closeModal={closeModalWrapper}
+                        />
+                    );
+                case 'step4':
+                    return (
+                        <OppsummeringModalStep
+                            modalData={modalData}
+                            setModalData={setModalData}
+                            closeModal={closeModalWrapper}
+                            handleAddPeriode={handleAddPeriode}
+                        />
+                    );
+                default:
+                    return null;
+            }
+        };
 
-    return (
-        <Modal className={styles.modal} ref={ref} aria-labelledby={ariaLabelId}>
-            <Modal.Header className={styles.header} closeButton={false}>
-                <div className={styles.headerContent}>
-                    <PencilIcon aria-hidden={true} width={24} height={24} />
-                    <Heading size="medium" id={ariaLabelId}>
-                        Legg til periode
-                    </Heading>
-                </div>
-            </Modal.Header>
-            <Modal.Body>{renderContent()}</Modal.Body>
-        </Modal>
-    );
-});
+        return (
+            <Modal className={styles.modal} ref={ref} aria-labelledby={ariaLabelId}>
+                <Modal.Header className={styles.header} closeButton={false}>
+                    <div className={styles.headerContent}>
+                        <PencilIcon aria-hidden={true} width={24} height={24} />
+                        <Heading size="medium" id={ariaLabelId}>
+                            Legg til periode
+                        </Heading>
+                    </div>
+                </Modal.Header>
+                <Modal.Body>{renderContent()}</Modal.Body>
+            </Modal>
+        );
+    },
+);
diff --git a/...s/ny-uttaksplan/src/components/legg-til-periode-modal/steps/EndreTidsperiodeModalStep.tsx b/...s/ny-uttaksplan/src/components/legg-til-periode-modal/steps/EndreTidsperiodeModalStep.tsx
@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { useForm } from 'react-hook-form';
 import { useIntl } from 'react-intl';
 
@@ -12,14 +13,15 @@ interface Props {
     modalData: ModalData;
     setModalData: (data: ModalData) => void;
     closeModal: () => void;
+    familiehendelsedato: string;
 }
 
 interface FormValues {
     fom: string | undefined;
     tom: string | undefined;
 }
 
-export const EndreTidsperiodeModalStep = ({ modalData, setModalData, closeModal }: Props) => {
+export const EndreTidsperiodeModalStep = ({ modalData, setModalData, closeModal, familiehendelsedato }: Props) => {
     const intl = useIntl();
     const { fom, tom } = modalData;
     const formMethods = useForm<FormValues>({
@@ -47,6 +49,9 @@ export const EndreTidsperiodeModalStep = ({ modalData, setModalData, closeModal
             <RhfForm formMethods={formMethods} onSubmit={onSubmit} id="skjema">
                 <div style={{ display: 'flex', gap: '2rem', margin: '1rem 0' }}>
                     <RhfDatepicker
+                        showMonthAndYearDropdowns
+                        minDate={dayjs(familiehendelsedato).subtract(3, 'weeks').toDate()}
+                        maxDate={dayjs(familiehendelsedato).add(3, 'years').toDate()}
                         validate={[
                             isRequired(intl.formatMessage({ id: 'leggTilPeriodeModal.endreTidsperiode.fom.påkrevd' })),
                             isValidDate(
@@ -62,6 +67,9 @@ export const EndreTidsperiodeModalStep = ({ modalData, setModalData, closeModal
                         name="fom"
                     />
                     <RhfDatepicker
+                        showMonthAndYearDropdowns
+                        minDate={dayjs(familiehendelsedato).subtract(3, 'weeks').toDate()}
+                        maxDate={dayjs(familiehendelsedato).add(3, 'years').toDate()}
                         validate={[
                             isRequired(intl.formatMessage({ id: 'leggTilPeriodeModal.endreTidsperiode.tom.påkrevd' })),
                             isValidDate(

diff --git a/packages/ny-uttaksplan/src/components/periode-liste-content/PeriodeListeContent.tsx b/packages/ny-uttaksplan/src/components/periode-liste-content/PeriodeListeContent.tsx
@@ -121,6 +121,7 @@ const PeriodeListeContent: FunctionComponent<Props> = ({
     const erFarEllerMedmor = notEmpty(useContextGetData(UttaksplanContextDataType.ER_FAR_ELLER_MEDMOR));
     const barn = notEmpty(useContextGetData(UttaksplanContextDataType.BARN));
     const familiehendelseType = getFamiliehendelseType(barn);
+    const familiehendelsedato = notEmpty(useContextGetData(UttaksplanContextDataType.FAMILIEHENDELSEDATO));
 
     if (erFamiliehendelse && familiehendelseType !== undefined) {
         return <FamiliehendelseContent familiehendelseType={familiehendelseType} />;
@@ -146,6 +147,7 @@ const PeriodeListeContent: FunctionComponent<Props> = ({
                 </Button>
             </div>
             <EndrePeriodeModal
+                familiehendelsedato={familiehendelsedato}
                 ref={ref}
                 closeModal={closeModal}
                 handleUpdatePeriode={handleUpdatePeriode}