Håndtere ingen barn

apps/omsorgspengerutbetaling-soknad/api-mock/mock-data/ingen-barn.json

@@ -0,0 +1,3 @@
+{
+    "barn": []
+}

apps/omsorgspengerutbetaling-soknad/api-mock/mock-server.cjs

@@ -7,7 +7,7 @@ const busboyCons = require('busboy');
 
 require('dotenv').config();
 
-const barnMock = require('./mock-data/tre-barn-under-13.json');
+const barnMock = require('./mock-data/ingen-barn.json');
 const søkerMock = require('./mock-data/soker.json');
 
 const server = express();

apps/omsorgspengerutbetaling-soknad/src/app/i18n/appMessages.ts

@@ -101,6 +101,7 @@ export const appMessages: MessageFileFormat = {
         'resetMellomlagring.text.1': 'Dersom feilen vedvarer, kan du prøve å starte på nytt med et tom skjema.',
         'resetMellomlagring.startPåNytt': 'Start på nytt',
 
+        'validation.barn.ingenBarn': 'Du må legge til minst ett barn for å kunne gå videre i søknaden.',
         'validation.harUtvidetRett.yesOrNoIsUnanswered':
             'Du må svare at du har fått ekstra omsorgsdager for barn fordi barnet har kronisk sykdom eller funksjonshemning eller ikke.',
         'validation.harDekketTiFørsteDagerSelv.notAnswered': 'Du må svare på om du har dekt  10 dager selv i år.',

apps/omsorgspengerutbetaling-soknad/src/app/søknad/steps/dine-barn/DineBarnForm.tsx

@@ -2,7 +2,7 @@ import { Heading } from '@navikt/ds-react';
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import FormBlock from '@navikt/sif-common-core-ds/src/atoms/form-block/FormBlock';
-import { getTypedFormComponents, ValidationError } from '@navikt/sif-common-formik-ds';
+import { FormikInputGroup, getTypedFormComponents, ValidationError } from '@navikt/sif-common-formik-ds';
 import getIntlFormErrorHandler from '@navikt/sif-common-formik-ds/src/validation/intlFormErrorHandler';
 import { AnnetBarn } from '@navikt/sif-common-forms-ds/src/forms/annet-barn/types';
 import { RegistrertBarn } from '../../../types/RegistrertBarn';
@@ -62,15 +62,29 @@ const DineBarnForm: React.FunctionComponent<DineBarnFormProps> = ({
                 </Heading>
             </FormBlock>
 
-            <RegistrerteBarnPart registrerteBarn={registrerteBarn} />
+            <FormikInputGroup
+                legend={'Barn'}
+                hideLegend={true}
+                name="barn"
+                validate={() => {
+                    const antallBarn = andreBarn.length + registrerteBarn.length;
+                    if (antallBarn === 0) {
+                        return 'ingenBarn';
+                    }
+                }}>
+                <RegistrerteBarnPart registrerteBarn={registrerteBarn} />
 
-            <AndreBarnPart
-                søkerFnr={søker.fødselsnummer}
-                andreBarn={andreBarn}
-                onAndreBarnChange={oppdatereAndreBarn}
-            />
+                <AndreBarnPart
+                    harRegistrerteBarn={registrerteBarn.length > 0}
+                    søkerFnr={søker.fødselsnummer}
+                    andreBarn={andreBarn}
+                    onAndreBarnChange={oppdatereAndreBarn}
+                />
+            </FormikInputGroup>
 
-            <DineBarnScenarioer registrerteBarn={registrerteBarn} formValues={values} />
+            {andreBarn.length + registrerteBarn.length > 0 ? (
+                <DineBarnScenarioer registrerteBarn={registrerteBarn} formValues={values} />
+            ) : null}
         </Form>
     );
 };

apps/omsorgspengerutbetaling-soknad/src/app/søknad/steps/dine-barn/dineBarnStepUtils.ts

@@ -153,6 +153,10 @@ export const getMåDekkeFørsteTiDagerSelv = (
 export const getDineBarnScenario = (barn: Array<RegistrertBarn | AnnetBarn>): DineBarnScenario => {
     const { over13, under13 } = getBarnAlderInfo(barn);
 
+    /** Ingen barn */
+    if (under13 === 0 && over13 === 0) {
+        return DineBarnScenario.ETT_ELLER_TO_UNDER_13;
+    }
     /** Barn under 13 */
     if (under13 > 0 && under13 <= 2) {
         return DineBarnScenario.ETT_ELLER_TO_UNDER_13;
@@ -174,8 +178,8 @@ export const getBarnAlderInfo = (barn: Array<RegistrertBarn | AnnetBarn>): BarnA
         under13,
         over13,
         totalt: barn.length,
-        kunBarnUnder13: under13 === barn.length,
-        kunBarnOver13: over13 === barn.length,
+        kunBarnUnder13: barn.length > 0 && under13 === barn.length,
+        kunBarnOver13: barn.length > 0 && over13 === barn.length,
     };
 };
 

apps/omsorgspengerutbetaling-soknad/src/app/søknad/steps/dine-barn/parts/AndreBarnPart.tsx

@@ -11,10 +11,16 @@ import FormBlock from '@navikt/sif-common-core-ds/src/atoms/form-block/FormBlock
 interface Props {
     søkerFnr: string;
     andreBarn: AnnetBarn[];
+    harRegistrerteBarn: boolean;
     onAndreBarnChange: (values: AnnetBarn[]) => void;
 }
 
-const AndreBarnPart: React.FunctionComponent<Props> = ({ andreBarn, søkerFnr, onAndreBarnChange }) => {
+const AndreBarnPart: React.FunctionComponent<Props> = ({
+    andreBarn,
+    søkerFnr,
+    harRegistrerteBarn,
+    onAndreBarnChange,
+}) => {
     const intl = useIntl();
     const andreBarnFnr = andreBarn.map((barn) => barn.fnr);
     return (
@@ -23,7 +29,9 @@ const AndreBarnPart: React.FunctionComponent<Props> = ({ andreBarn, søkerFnr, o
                 name={DineBarnFormFields.andreBarn}
                 labels={{
                     addLabel: intlHelper(intl, 'step.dineBarn.annetBarnListAndDialog.addLabel'),
-                    listTitle: intlHelper(intl, 'step.dineBarn.annetBarnListAndDialog.listTitle'),
+                    listTitle: harRegistrerteBarn
+                        ? intlHelper(intl, 'step.dineBarn.annetBarnListAndDialog.listTitle')
+                        : undefined,
                     modalTitle: intlHelper(intl, 'step.dineBarn.annetBarnListAndDialog.modalTitle'),
                 }}
                 maxDate={dateToday}

apps/omsorgspengerutbetaling-soknad/src/app/søknad/steps/dine-barn/parts/RegistrerteBarnPart.tsx

@@ -5,14 +5,21 @@ import { RegistrertBarn } from '../../../../types/RegistrertBarn';
 import { FormattedMessage } from 'react-intl';
 import { dateFormatter } from '@navikt/sif-common-utils';
 import { formatName } from '@navikt/sif-common-core-ds/src/utils/personUtils';
+import { Alert } from '@navikt/ds-react';
 
 interface Props {
     registrerteBarn: RegistrertBarn[];
 }
 
 const RegistrerteBarnPart: React.FunctionComponent<Props> = ({ registrerteBarn }) => {
     if (registrerteBarn.length === 0) {
-        return null;
+        return (
+            <div>
+                <Block>
+                    <Alert variant="info">Vi fant ikke noen barn registrert på deg.</Alert>
+                </Block>
+            </div>
+        );
     }
 
     return (

apps/omsorgspengerutbetaling-soknad/src/app/types/DineBarnScenario.ts

@@ -1,4 +1,5 @@
 export enum DineBarnScenario {
+    INGEN_BARN = 'INGEN_BARN',
     ETT_ELLER_TO_UNDER_13 = 'ETT_ELLER_TO_UNDER_13',
     TRE_ELLER_FLERE_UNDER_13 = 'TRE_ELLER_FLERE_UNDER_13',
     KUN_OVER_13 = 'KUN_OVER_13',

packages/sif-common-forms-ds/src/forms/annet-barn/AnnetBarnList.tsx

@@ -18,6 +18,11 @@ const bem = bemUtils('annetBarnList');
 
 const AnnetBarnList = ({ annetBarn = [], onDelete, onEdit }: Props) => {
     const intl = useIntl();
+
+    if (annetBarn.length === 0) {
+        return null;
+    }
+
     const renderAnnetBarnLabel = (annetBarn: AnnetBarn): React.ReactNode => {
         return (
             <div className={bem.element('label')}>