Fikse utenlandsopphold tekst

src/components/EøsIdent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Checkbox, Label, ReadMore } from '@navikt/ds-react';
 import { TextFieldMedBredde } from './TextFieldMedBredde';
-import { hentTekst } from '../utils/søknad';
+import { hentTekstMedVariabel } from '../utils/søknad';
 import { useLokalIntlContext } from '../context/LokalIntlContext';
 import { IUtenlandsopphold } from '../models/steg/omDeg/medlemskap';
 
@@ -20,16 +20,14 @@ const EøsIdent: React.FC<Props> = ({
 }) => {
   const intl = useLokalIntlContext();
 
-  const hentTekstMedLandverdi = (tekst: string) => {
-    return hentTekst(tekst, intl) + ' ' + utenlandsopphold.land?.verdi;
-  };
+  if (!utenlandsopphold.land) {
+    return null;
+  }
 
-  const tekstMedLandVerdi =
-    hentTekstMedLandverdi(
-      'medlemskap.periodeBoddIUtlandet.utenlandskIDNummer'
-    ) + '?';
-  const harIkkeUtenlandsPersonIdTekst = hentTekstMedLandverdi(
-    'medlemskap.periodeBoddIUtlandet.harIkkeIdNummer'
+  const utenlandskIDNummerTekst = hentTekstMedVariabel(
+    'medlemskap.periodeBoddIUtlandet.utenlandskIDNummer',
+    intl,
+    { 0: utenlandsopphold.land.verdi }
   );
 
   const settUtenlandskPersonId = (
@@ -38,7 +36,7 @@ const EøsIdent: React.FC<Props> = ({
     const oppdatertUtenlandsopphold = {
       ...utenlandsopphold,
       personidentEøsLand: {
-        label: tekstMedLandVerdi,
+        label: utenlandskIDNummerTekst,
         verdi: e.target.value,
       },
     };
@@ -60,7 +58,7 @@ const EøsIdent: React.FC<Props> = ({
 
   return (
     <div>
-      <Label>{tekstMedLandVerdi}</Label>
+      <Label>{utenlandskIDNummerTekst}</Label>
       <ReadMore size={'small'} header={halvåpenTekstid}>
         {åpneTekstid}
       </ReadMore>
@@ -82,7 +80,11 @@ const EøsIdent: React.FC<Props> = ({
           toggleHarUtenlandskPersonId(!utenlandsopphold.kanIkkeOppgiPersonident)
         }
       >
-        {harIkkeUtenlandsPersonIdTekst}
+        {hentTekstMedVariabel(
+          'medlemskap.periodeBoddIUtlandet.harIkkeIdNummer',
+          intl,
+          { 0: utenlandsopphold.land.verdi }
+        )}
       </Checkbox>
     </div>
   );

src/language/tekster_en.ts

@@ -173,14 +173,14 @@ export default {
   'medlemskap.spm.bosatt': 'Have you lived in Norway for the past five years?',
   'medlemskap.periodeBoddIUtlandet.utenlandsopphold': 'Period spent abroad ',
   'medlemskap.periodeBoddIUtlandet.utenlandskIDNummer':
-    'What is your ID number in',
+    'What is your ID number in {0}?',
   'medlemskap.periodeBoddIUtlandet.harIkkeIdNummer':
-    'I do not have an ID number in',
+    'I do not have an ID number in {0}',
   'medlemskap.hjelpetekst-åpne.begrunnelse': 'The reason we ask about this',
   'medlemskap.hjelpetekst-innhold.begrunnelse':
     'When you have stayed in another EEA country during the last 5 years, we sometimes need to obtain information from that country. This is because we need information to assess whether you are entitled to benefits.',
   'medlemskap.periodeBoddIUtlandet.sisteAdresse':
-    'What is the last address you lived at in',
+    'What is the last address you lived at in {0}?',
   'medlemskap.periodeBoddIUtlandet.land': 'In what country were you staying?',
   'medlemskap.periodeBoddIUtlandet.slett': 'Remove period spent abroad',
   'medlemskap.periodeBoddIUtlandet': 'When did you live overseas?',

src/language/tekster_nb.ts

@@ -170,15 +170,17 @@ export default {
   'medlemskap.periodeBoddIUtlandet.slett': 'Fjern utenlandsperiode',
   'medlemskap.periodeBoddIUtlandet': 'Når oppholdt du deg i utlandet?',
   'medlemskap.periodeBoddIUtlandet.utenlandskIDNummer':
-    'Hva er id-nummeret ditt i',
-  'medlemskap.periodeBoddIUtlandet.harIkkeIdNummer': 'Jeg har ikke id-nummer i',
+    'Hva er id-nummeret ditt i {0}?',
+  'medlemskap.periodeBoddIUtlandet.harIkkeIdNummer':
+    'Jeg har ikke id-nummer i {0}',
   'medlemskap.hjelpetekst-åpne.begrunnelse': 'Grunnen til at vi spør om dette',
   'medlemskap.hjelpetekst-innhold.begrunnelse':
     'Når du har oppholdt deg i et annet EØS-land i løpet av de siste 5 årene, må vi noen ganger innhente opplysninger fra dette landet. Det er fordi vi trenger opplysninger for å vurdere om du har rett til stønad.',
   'medlemskap.periodeBoddIUtlandet.sisteAdresse':
-    'Hva er den siste adressen du bodde på i',
+    'Hva er den siste adressen du bodde på i {0}?',
   'medlemskap.periodeBoddIUtlandet.land': 'I hvilket land oppholdt du deg i?',
-  'medlemskap.periodeBoddIUtlandet.begrunnelse': 'Hvorfor oppholdt du deg i',
+  'medlemskap.periodeBoddIUtlandet.begrunnelse':
+    'Hvorfor oppholdt du deg i {0}?',
   'medlemskap.periodeBoddIUtlandet.flereutenlandsopphold':
     'Har du hatt flere utenlandsopphold de siste 5 årene?',
   'medlemskap.periodeBoddIUtlandet.knapp': 'Legg til et utenlandsopphold',

src/søknad/steg/1-omdeg/medlemskap/Utenlandsopphold.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { SlettKnapp } from '../../../../components/knapper/SlettKnapp';
 import { hentTittelMedNr } from '../../../../language/utils';
 import PeriodeDatovelgere from '../../../../components/dato/PeriodeDatovelger';
-import { hentTekst } from '../../../../utils/søknad';
+import { hentTekst, hentTekstMedVariabel } from '../../../../utils/søknad';
 import {
   ILandMedKode,
   IUtenlandsopphold,
@@ -54,26 +54,21 @@ const Utenlandsopphold: FC<Props> = ({
   const periodeTittel = hentTittelMedNr(
     perioderBoddIUtlandet!,
     oppholdsnr,
-    intl.formatMessage({
-      id: 'medlemskap.periodeBoddIUtlandet.utenlandsopphold',
-    })
+    hentTekst('medlemskap.periodeBoddIUtlandet.utenlandsopphold', intl)
+  );
+  const begrunnelseTekst = hentTekstMedVariabel(
+    'medlemskap.periodeBoddIUtlandet.begrunnelse',
+    intl,
+    { 0: utenlandsopphold.land?.verdi || '' }
+  );
+  const sisteAdresseTekst = hentTekstMedVariabel(
+    'medlemskap.periodeBoddIUtlandet.sisteAdresse',
+    intl,
+    { 0: utenlandsopphold.land?.verdi || '' }
   );
-  const begrunnelseTekst = intl.formatMessage({
-    id: 'medlemskap.periodeBoddIUtlandet.begrunnelse',
-  });
-  const sisteAdresseTekst = intl.formatMessage({
-    id: 'medlemskap.periodeBoddIUtlandet.sisteAdresse',
-  });
 
   const landConfig = utenlandsoppholdLand(land);
 
-  const tekstMedLandVerdi = (tekst: string): string => {
-    if (utenlandsopphold.land) {
-      return tekst + ' ' + utenlandsopphold.land.verdi + '?';
-    }
-    return '';
-  };
-
   const fjernUtenlandsperiode = () => {
     if (perioderBoddIUtlandet && perioderBoddIUtlandet.length > 1) {
       const utenlandsopphold = perioderBoddIUtlandet?.filter(
@@ -198,7 +193,7 @@ const Utenlandsopphold: FC<Props> = ({
         // eslint-disable-next-line no-prototype-builtins
         utenlandsopphold.land?.hasOwnProperty('verdi') && (
           <StyledTextarea
-            label={tekstMedLandVerdi(begrunnelseTekst)}
+            label={begrunnelseTekst}
             placeholder={'...'}
             value={begrunnelse.verdi}
             maxLength={1000}
@@ -228,20 +223,14 @@ const Utenlandsopphold: FC<Props> = ({
             }
           />
         )}
-      {skalViseAdresseTekstfelt(utenlandsopphold) && (
+      {utenlandsopphold.land && skalViseAdresseTekstfelt(utenlandsopphold) && (
         <TextFieldMedBredde
           className={'inputfelt-tekst'}
           key={'navn'}
-          label={tekstMedLandVerdi(sisteAdresseTekst)}
+          label={sisteAdresseTekst}
           type="text"
           bredde={'L'}
-          onChange={(e) =>
-            settFeltNavn(
-              e,
-              'adresseEøsLand',
-              tekstMedLandVerdi(sisteAdresseTekst)
-            )
-          }
+          onChange={(e) => settFeltNavn(e, 'adresseEøsLand', sisteAdresseTekst)}
           value={adresseEøsLand?.verdi}
         />
       )}

src/utils/søknad.ts

@@ -86,6 +86,14 @@ export const hentTekst = (id: string, intl: LokalIntlShape) => {
   return intl.formatMessage({ id: id });
 };
 
+export const hentTekstMedVariabel = (
+  id: string,
+  intl: LokalIntlShape,
+  variabel?: Record<string, string>
+) => {
+  return intl.formatMessage({ id: id }, variabel);
+};
+
 export const fraStringTilTall = (tallAvTypenStreng: string) => {
   const parsed = Number.parseInt(tallAvTypenStreng, 10);
   if (Number.isNaN(parsed)) {