Fiks PILS punsj form (#2849)

* Fiks updateIkkeSkalHaFerie PILS * Fiks btn søknadsperiode, periodepaneler PILS * Fiks visning av søknadsperioder PILS * Fiks tekster and modal PLSPunchForm * Fiks åpning av accordion ved start eller oppdater side PILS * Fiks ComponentDidMount og ComonentDiDUpdate PLSPunchForm
navikt · Jan 17, 2025 · f31b669 · f31b669
1 parent 705986b
commit f31b669
Show file tree

Hide file tree

Showing 7 changed files with 261 additions and 167 deletions.
diff --git a/src/app/components/Periodepaneler.tsx b/src/app/components/Periodepaneler.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
 
-import { useIntl } from 'react-intl';
-import { Box } from '@navikt/ds-react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Box, Button } from '@navikt/ds-react';
 
 import { PeriodInput } from 'app/components/period-input/PeriodInput';
 import UhaanderteFeilmeldinger from 'app/components/skjema/UhaanderteFeilmeldinger';
 import { GetErrorMessage, GetUhaandterteFeil } from 'app/models/types';
 import AddCircleSvg from '../assets/SVG/AddCircleSVG';
 import BinSvg from '../assets/SVG/BinSVG';
 import { IPeriode } from '../models/types/Periode';
-import intlHelper from '../utils/intlUtils';
 
 interface Props {
     periods: IPeriode[]; // Liste over periodisert informasjon
@@ -53,6 +52,7 @@ export const Periodepaneler: React.FC<Props> = ({
         const newInfo: IPeriode = { ...periods[index], ...periodeinfo };
         const newArray = [...(periods || [])];
         newArray[index] = newInfo;
+
         return newArray;
     };
 
@@ -61,12 +61,14 @@ export const Periodepaneler: React.FC<Props> = ({
     const addItem = () => {
         const newArray = [...(periods || [])];
         newArray.push(initialPeriode);
+
         return newArray;
     };
 
     const removeItem = (index: number) => {
         const newArray = [...(periods || [])];
         newArray.splice(index, 1);
+
         return newArray;
     };
 
@@ -90,7 +92,7 @@ export const Periodepaneler: React.FC<Props> = ({
                         />
 
                         <div className="ml-4">
-                            <button
+                            <Button
                                 id="slett"
                                 className={getErrorMessage!(feilkodeprefiks!, i) ? 'fjern-feil ' : 'fjern'}
                                 type="button"
@@ -104,16 +106,16 @@ export const Periodepaneler: React.FC<Props> = ({
                                         onRemove();
                                     }
                                 }}
+                                icon={<BinSvg title="fjern" />}
+                                size="small"
                             >
-                                <div className="slettIcon">
-                                    <BinSvg title="fjern" />
-                                </div>
-                                {intlHelper(intl, textFjern || 'skjema.liste.fjern')}
-                            </button>
+                                <FormattedMessage id={textFjern || 'skjema.liste.fjern'} />
+                            </Button>
                         </div>
                     </div>
                 </div>
             ))}
+
             {feilkodeprefiks && (
                 <UhaanderteFeilmeldinger
                     getFeilmeldinger={() => (getUhaandterteFeil && getUhaandterteFeil(feilkodeprefiks)) || []}
@@ -122,7 +124,7 @@ export const Periodepaneler: React.FC<Props> = ({
 
             {kanHaFlere && (
                 <div className="flex flex-wrap">
-                    <button
+                    <Button
                         id="leggtilperiode"
                         className="leggtilperiode"
                         type="button"
@@ -136,12 +138,11 @@ export const Periodepaneler: React.FC<Props> = ({
                                 onAdd();
                             }
                         }}
+                        icon={<AddCircleSvg title="leggtil" />}
+                        size="small"
                     >
-                        <div className="leggtilperiodeIcon">
-                            <AddCircleSvg title="leggtil" />
-                        </div>
-                        {intlHelper(intl, textLeggTil || 'skjema.periodepanel.legg_til')}
-                    </button>
+                        <FormattedMessage id={textLeggTil || 'skjema.periodepanel.legg_til'} />
+                    </Button>
                 </div>
             )}
         </Box>

diff --git a/src/app/i18n/nb.json b/src/app/i18n/nb.json
@@ -340,6 +340,7 @@
     "skjema.knapp.settpaavent": "Sett på vent",
     "skjema.knapp.ferdigstillJournalpost": "Ferdigstill journalpost",
     "skjema.knapp.avbryt": "Avbryt",
+    "skjema.knapp.videre": "Videre",
     "skjema.opplysningeromsoknad": "Opplysninger om søknaden",
     "skjema.opplysningeromkorrigering": "Opplysninger om korrigering",
     "skjema.opplysningeromkorrigering.spm": "Når tok arbeidsgiver kontakt?",

diff --git a/...epenger-livets-sluttfase/containers/EndringAvSøknadsperioder/EndringAvSoknadsperioder.tsx b/...epenger-livets-sluttfase/containers/EndringAvSøknadsperioder/EndringAvSoknadsperioder.tsx
@@ -120,12 +120,7 @@ const EndringAvSoknadsperioder = (props: Props) => {
     };
 
     return (
-        <Accordion.Item
-            open={isOpen}
-            defaultOpen={isOpen}
-            onOpenChange={onClick}
-            data-testid="accordionItem-endringAvSøknadsperioderPanel"
-        >
+        <Accordion.Item open={isOpen} onOpenChange={onClick} data-testid="accordionItem-endringAvSøknadsperioderPanel">
             <Accordion.Header>
                 <FormattedMessage id="skjema.endringAvSøknadsperioder" />
             </Accordion.Header>