Fiks at søknad krasjer når man ombestemmer seg ved bosatt utland

navikt · Sep 3, 2024 · 22a317e · 22a317e
1 parent 8e0090b
commit 22a317e
Showing 1 changed file with 28 additions and 33 deletions.
diff --git a/apps/barnepensjon-ui/src/components/application/the-deceased/StaysAbroad.tsx b/apps/barnepensjon-ui/src/components/application/the-deceased/StaysAbroad.tsx
@@ -3,29 +3,18 @@ import { RHFGeneralQuestionRadio } from '../../common/rhf/RHFRadio'
 import { RHFNumberInput } from '../../common/rhf/RHFInput'
 import { FieldArrayWithId, useFieldArray, useFormContext } from 'react-hook-form'
 import { IDeceasedParent, IStaysAbroad } from '../../../context/application/application'
-import { BodyShort, Box, Button, HGrid, Label, Panel } from '@navikt/ds-react'
+import { BodyShort, Box, Button, HGrid, Label, VStack } from '@navikt/ds-react'
 import { RHFSelect } from '../../common/rhf/RHFSelect'
 import { useEffect } from 'react'
 import { RHFCheckboksGruppe } from '../../common/rhf/RHFCheckboksPanelGruppe'
 import { OppholdUtlandType } from '../../../api/dto/FellesOpplysninger'
 import Datepicker from '../../common/Datepicker'
 import { DeleteFilled } from '@navikt/ds-icons'
 import FormElement from '../../common/FormElement'
-import styled from 'styled-components'
 import { GridColumns, GridGap } from '../../../utils/grid'
 import { RHFCombobox } from '~components/common/rhf/RHFCombobox'
 import { Options } from '~hooks/useCountries'
 
-const StaysAbroadCheckboxDiv = styled.div`
-    .skjemagruppe {
-        display: flex;
-    }
-
-    .skjemaelement {
-        padding-right: 1rem;
-    }
-`
-
 export default function StaysAbroad({ countries, currencies }: { countries: Options[]; currencies: any }) {
     const { t } = useTranslation('aboutTheDeceased')
     const { control, watch } = useFormContext<IDeceasedParent>()
@@ -45,20 +34,23 @@ export default function StaysAbroad({ countries, currencies }: { countries: Opti
     const staysAbroad = watch('staysAbroad')
 
     const amountOrCurrencyHasInput = (staysAbroad: IStaysAbroad, index: number): boolean => {
-        const amount = staysAbroad.abroadStays!![index]?.pension?.amount
-        const amountHasInput = amount ? amount.length > 0 : false
+        if (staysAbroad.abroadStays) {
+            const amount = staysAbroad.abroadStays[index]?.pension?.amount
+            const amountHasInput = amount ? amount.length > 0 : false
 
-        const currency = staysAbroad.abroadStays!![index]?.pension?.currency
-        const currencyHasInput = currency ? currency.length > 0 : false
+            const currency = staysAbroad.abroadStays[index]?.pension?.currency
+            const currencyHasInput = currency ? currency.length > 0 : false
 
-        return amountHasInput || currencyHasInput
+            return amountHasInput || currencyHasInput
+        }
+        return false
     }
 
     return (
         <>
             {fields.map((field: FieldArrayWithId, index: number) => (
                 <FormElement key={field.id}>
-                    <Panel border>
+                    <Box borderWidth="1" padding="4">
                         <Box maxWidth="14rem">
                             <RHFCombobox
                                 name={`staysAbroad.abroadStays[${index}].country`}
@@ -67,16 +59,14 @@ export default function StaysAbroad({ countries, currencies }: { countries: Opti
                             />
                         </Box>
                         <FormElement>
-                            <StaysAbroadCheckboxDiv>
-                                <RHFCheckboksGruppe
-                                    name={`staysAbroad.abroadStays[${index}].type`}
-                                    legend={t('livedOrWorkedAbroad')}
-                                    required={true}
-                                    checkboxes={Object.values(OppholdUtlandType).map((value) => {
-                                        return { children: t(value), value }
-                                    })}
-                                />
-                            </StaysAbroadCheckboxDiv>
+                            <RHFCheckboksGruppe
+                                name={`staysAbroad.abroadStays[${index}].type`}
+                                legend={t('livedOrWorkedAbroad')}
+                                required={true}
+                                checkboxes={Object.values(OppholdUtlandType).map((value) => {
+                                    return { children: t(value), value }
+                                })}
+                            />
                         </FormElement>
                         <HGrid gap={GridGap} columns={GridColumns} align={'start'}>
                             <Datepicker
@@ -129,15 +119,20 @@ export default function StaysAbroad({ countries, currencies }: { countries: Opti
                         </FormElement>
 
                         {fields.length > 1 && (
-                            <div style={{ textAlign: 'right' }}>
+                            <VStack align="end">
                                 <FormElement>
-                                    <Button variant={'secondary'} type={'button'} onClick={() => remove(index)}>
-                                        <DeleteFilled /> &nbsp;{t('deleteButton', { ns: 'btn' })}
+                                    <Button
+                                        variant={'secondary'}
+                                        type={'button'}
+                                        onClick={() => remove(index)}
+                                        icon={<DeleteFilled />}
+                                    >
+                                        {t('deleteButton', { ns: 'btn' })}
                                     </Button>
                                 </FormElement>
-                            </div>
+                            </VStack>
                         )}
-                    </Panel>
+                    </Box>
                 </FormElement>
             ))}
             <Button variant={'secondary'} type={'button'} onClick={() => append({}, { shouldFocus: true })}>