Div validering og bugfix på sykemelding og popp

apps/dolly-frontend/src/main/js/src/components/fagsystem/pensjon/form/Form.tsx

@@ -8,56 +8,69 @@ import { getYearRangeOptions } from '@/utils/DataFormatter'
 import { FormikTextInput } from '@/components/ui/form/inputs/textInput/TextInput'
 import { FormikCheckbox } from '@/components/ui/form/inputs/checbox/Checkbox'
 import React from 'react'
+import StyledAlert from '@/components/ui/alert/StyledAlert'
+import * as _ from 'lodash-es'
 
 export const pensjonPath = 'pensjonforvalter.inntekt'
 
 const hjelpetekst =
 	'Hvis nedjuster med grunnbeløp er valgt skal beløp angis som årsbeløp i dagens kroneverdi, ' +
 	'og vil nedjusteres basert på snitt grunnbeløp i inntektsåret.'
 
-export const PensjonForm = ({ formikBag }) => (
-	<Vis attributt={pensjonPath}>
-		<Panel
-			heading="Pensjonsgivende inntekt (POPP)"
-			hasErrors={panelError(formikBag, pensjonPath)}
-			iconType="pensjon"
-			startOpen={erForsteEllerTest(formikBag.values, [pensjonPath])}
-			informasjonstekst={hjelpetekst}
-		>
-			{/*// @ts-ignore*/}
-			<Kategori title="Pensjonsgivende inntekt" vis={pensjonPath}>
-				<div className="flexbox--flex-wrap">
-					<FormikSelect
-						name={`${pensjonPath}.fomAar`}
-						label="Fra og med år"
-						options={getYearRangeOptions(1968, new Date().getFullYear() - 1)}
-						isClearable={false}
-					/>
-
-					<FormikSelect
-						name={`${pensjonPath}.tomAar`}
-						label="Til og med år"
-						options={getYearRangeOptions(1968, new Date().getFullYear() - 1)}
-						isClearable={false}
-					/>
-
-					<FormikTextInput
-						name={`${pensjonPath}.belop`}
-						label="Beløp"
-						type="number"
-						fastfield="false"
-					/>
-
-					<FormikCheckbox
-						name={`${pensjonPath}.redusertMedGrunnbelop`}
-						label="Nedjuster med grunnbeløp"
-						size="small"
-						checkboxMargin
-					/>
-				</div>
-			</Kategori>
-		</Panel>
-	</Vis>
-)
+export const PensjonForm = ({ formikBag }) => {
+	const minAar = new Date().getFullYear() - 17
+	const valgtAar = _.get(formikBag.values, `${pensjonPath}.fomAar`)
+
+	return (
+		<Vis attributt={pensjonPath}>
+			<Panel
+				heading="Pensjonsgivende inntekt (POPP)"
+				hasErrors={panelError(formikBag, pensjonPath)}
+				iconType="pensjon"
+				startOpen={erForsteEllerTest(formikBag.values, [pensjonPath])}
+				informasjonstekst={hjelpetekst}
+			>
+				{/*// @ts-ignore*/}
+				{!_.has(formikBag.values, 'pdldata.opprettNyPerson.alder') && valgtAar < minAar && (
+					<StyledAlert variant={'info'} size={'small'}>
+						Pensjonsgivende inntekt kan settes fra året personen fyller 13 år. For å sikre at
+						personen får gyldig alder kan denne settes ved å huke av for "Alder" på forrige side.
+					</StyledAlert>
+				)}
+				<Kategori title="Pensjonsgivende inntekt" vis={pensjonPath}>
+					<div className="flexbox--flex-wrap">
+						<FormikSelect
+							name={`${pensjonPath}.fomAar`}
+							label="Fra og med år"
+							options={getYearRangeOptions(1968, new Date().getFullYear() - 1)}
+							isClearable={false}
+						/>
+
+						<FormikSelect
+							name={`${pensjonPath}.tomAar`}
+							label="Til og med år"
+							options={getYearRangeOptions(1968, new Date().getFullYear() - 1)}
+							isClearable={false}
+						/>
+
+						<FormikTextInput
+							name={`${pensjonPath}.belop`}
+							label="Beløp"
+							type="number"
+							fastfield="false"
+						/>
+
+						<FormikCheckbox
+							name={`${pensjonPath}.redusertMedGrunnbelop`}
+							label="Nedjuster med grunnbeløp"
+							size="small"
+							checkboxMargin
+						/>
+					</div>
+				</Kategori>
+			</Panel>
+		</Vis>
+	)
+}
 
 PensjonForm.validation = validation

apps/dolly-frontend/src/main/js/src/components/fagsystem/sykdom/form/Form.tsx

@@ -4,7 +4,8 @@ import { erForsteEllerTest, panelError } from '@/components/ui/form/formUtils'
 import { Sykemelding } from './partials/Sykemelding'
 import { validation } from './validation'
 import { FormikProps } from 'formik'
-import { Alert } from '@navikt/ds-react'
+import React from 'react'
+import StyledAlert from '@/components/ui/alert/StyledAlert'
 
 interface SykdomFormProps {
 	formikBag: FormikProps<{}>
@@ -24,10 +25,10 @@ export const SykdomForm = ({ formikBag }: SykdomFormProps) => (
 		>
 			{formikBag.values.sykemelding != null &&
 				formikBag.values.sykemelding.hasOwnProperty('syntSykemelding') && (
-					<Alert variant={'info'} style={{ marginBottom: '20px' }}>
+					<StyledAlert variant={'info'} size={'small'}>
 						Syntetisk sykemelding behandler en stor mengde data for å opprette realistiske
 						sykemeldinger og kan derfor medføre litt lenger bestillingstid.
-					</Alert>
+					</StyledAlert>
 				)}
 			<Sykemelding formikBag={formikBag} />
 		</Panel>

apps/dolly-frontend/src/main/js/src/components/fagsystem/sykdom/form/partials/DetaljertSykemelding.tsx

@@ -57,13 +57,13 @@ export const DetaljertSykemelding = ({ formikBag }: SykemeldingForm) => {
 
 	const handleArbeidsgiverChange = (v: Arbeidsgiver) => {
 		formikBag.setFieldValue('sykemelding.detaljertSykemelding.mottaker', {
-			navn: v.navn,
-			orgNr: v.orgnr,
+			navn: v?.navn || null,
+			orgNr: v?.orgnr || null,
 			adresse: {
-				by: v.forretningsAdresse.poststed,
-				gate: v.forretningsAdresse.adresse,
-				land: v.forretningsAdresse.landkode,
-				postnummer: v.forretningsAdresse.postnr,
+				by: v?.forretningsAdresse?.poststed || null,
+				gate: v?.forretningsAdresse?.adresse || null,
+				land: v?.forretningsAdresse?.landkode || null,
+				postnummer: v?.forretningsAdresse?.postnr || null,
 			},
 		})
 	}
@@ -121,25 +121,28 @@ export const DetaljertSykemelding = ({ formikBag }: SykemeldingForm) => {
 				/>
 			</Kategori>
 			<Kategori title="Arbeidsgiver" vis="sykemelding">
-				<OrganisasjonMedArbeidsforholdSelect
-					path="sykemelding.detaljertSykemelding.arbeidsgiver.navn"
-					label="Navn"
-					afterChange={(v: Arbeidsgiver) => handleArbeidsgiverChange(v)}
-					valueNavn={true}
-				/>
-				<FormikSelect
-					name="sykemelding.detaljertSykemelding.arbeidsgiver.yrkesbetegnelse"
-					label="Yrkesbetegnelse"
-					kodeverk={ArbeidKodeverk.Yrker}
-					size="xxxlarge"
-					isClearable={false}
-					optionHeight={50}
-				/>
-				<FormikTextInput
-					name="sykemelding.detaljertSykemelding.arbeidsgiver.stillingsprosent"
-					label="Stillingsprosent"
-					type="number"
-				/>
+				<div className="flexbox--flex-wrap">
+					<OrganisasjonMedArbeidsforholdSelect
+						path="sykemelding.detaljertSykemelding.arbeidsgiver.navn"
+						label="Navn"
+						afterChange={(v: Arbeidsgiver) => handleArbeidsgiverChange(v)}
+						valueNavn={true}
+						isClearable={true}
+					/>
+					<FormikSelect
+						name="sykemelding.detaljertSykemelding.arbeidsgiver.yrkesbetegnelse"
+						label="Yrkesbetegnelse"
+						kodeverk={ArbeidKodeverk.Yrker}
+						size="xxxlarge"
+						isClearable={false}
+						optionHeight={50}
+					/>
+					<FormikTextInput
+						name="sykemelding.detaljertSykemelding.arbeidsgiver.stillingsprosent"
+						label="Stillingsprosent"
+						type="number"
+					/>
+				</div>
 			</Kategori>
 			<FormikDollyFieldArray
 				name="sykemelding.detaljertSykemelding.perioder"
@@ -170,26 +173,29 @@ export const DetaljertSykemelding = ({ formikBag }: SykemeldingForm) => {
 				)}
 			</FormikDollyFieldArray>
 			<Kategori title="Detaljer" vis="sykemelding">
-				<FormikTextInput
-					name="sykemelding.detaljertSykemelding.detaljer.tiltakNav"
-					label="Tiltak fra Nav"
-					size="large"
-				/>
-				<FormikTextInput
-					name="sykemelding.detaljertSykemelding.detaljer.tiltakArbeidsplass"
-					label="Tiltak på arbeidsplass"
-					size="large"
-				/>
-				<FormikTextInput
-					name="sykemelding.detaljertSykemelding.detaljer.beskrivHensynArbeidsplassen"
-					label="Hensyn på arbeidsplass"
-					size="large"
-				/>
-				<FormikCheckbox
-					name="sykemelding.detaljertSykemelding.detaljer.arbeidsforEtterEndtPeriode"
-					label="Arbeidsfør etter endt periode"
-					size="small"
-				/>
+				<div className="flexbox--flex-wrap">
+					<FormikTextInput
+						name="sykemelding.detaljertSykemelding.detaljer.tiltakNav"
+						label="Tiltak fra Nav"
+						size="large"
+					/>
+					<FormikTextInput
+						name="sykemelding.detaljertSykemelding.detaljer.tiltakArbeidsplass"
+						label="Tiltak på arbeidsplass"
+						size="large"
+					/>
+					<FormikTextInput
+						name="sykemelding.detaljertSykemelding.detaljer.beskrivHensynArbeidsplassen"
+						label="Hensyn på arbeidsplass"
+						size="large"
+					/>
+					<FormikCheckbox
+						name="sykemelding.detaljertSykemelding.detaljer.arbeidsforEtterEndtPeriode"
+						label="Arbeidsfør etter endt periode"
+						size="small"
+						checkboxMargin
+					/>
+				</div>
 			</Kategori>
 		</div>
 	)

apps/dolly-frontend/src/main/js/src/components/fagsystem/sykdom/form/partials/Sykemelding.tsx

@@ -77,7 +77,7 @@ export const Sykemelding = ({ formikBag }: SykemeldingForm) => {
 	const [typeSykemelding, setTypeSykemelding] = useState(
 		_.get(formikBag.values, 'sykemelding').hasOwnProperty('detaljertSykemelding')
 			? SykemeldingTyper.detaljert
-			: SykemeldingTyper.synt
+			: SykemeldingTyper.synt,
 	)
 
 	const handleToggleChange = (value: SykemeldingTyper) => {
@@ -105,7 +105,7 @@ export const Sykemelding = ({ formikBag }: SykemeldingForm) => {
 			<ToggleGroup
 				size={'small'}
 				onChange={handleToggleChange}
-				defaultValue={SykemeldingTyper.synt}
+				defaultValue={typeSykemelding}
 				style={{ marginBottom: '5px', backgroundColor: '#ffffff' }}
 			>
 				{toggleValues.map((val) => (

apps/dolly-frontend/src/main/js/src/components/fagsystem/sykdom/form/partials/SyntSykemelding.tsx

@@ -24,6 +24,7 @@ export const SyntSykemelding = () => {
 			<OrganisasjonMedArbeidsforholdSelect
 				path="sykemelding.syntSykemelding.orgnummer"
 				label="Organisasjonsnummer"
+				isClearable={true}
 			/>
 		</div>
 	)

apps/dolly-frontend/src/main/js/src/components/fagsystem/sykdom/form/validation.tsx

@@ -2,6 +2,30 @@ import * as Yup from 'yup'
 import { ifPresent, requiredDate, requiredNumber, requiredString } from '@/utils/YupValidations'
 import { testDatoFom, testDatoTom } from '@/components/fagsystem/utils'
 
+const testHarArbeidsforhold = (val) => {
+	return val.test('har-arbeidsforhold', function harArbeidsforhold(selected) {
+		if (!selected) {
+			return true
+		}
+		const values = this?.options?.context
+		const detaljertSykemelding = values?.sykemelding?.detaljertSykemelding
+
+		const valgtArbeidsgiver = detaljertSykemelding
+			? detaljertSykemelding?.mottaker?.orgNr
+			: selected
+
+		const arbeidsgivere = values?.aareg?.map((arbforh) => arbforh?.arbeidsgiver?.orgnummer)
+
+		if (!arbeidsgivere?.includes(valgtArbeidsgiver?.toString())) {
+			return this.createError({
+				message: 'Personen må ha et arbeidsforhold i valgt organisasjon',
+			})
+		}
+
+		return true
+	})
+}
+
 export const validation = {
 	sykemelding: ifPresent(
 		'$sykemelding',
@@ -10,8 +34,8 @@ export const validation = {
 				'$sykemelding.syntSykemelding',
 				Yup.object({
 					startDato: requiredDate,
-					orgnummer: requiredString,
-				})
+					orgnummer: testHarArbeidsforhold(Yup.string().nullable()),
+				}),
 			),
 			detaljertSykemelding: ifPresent(
 				'$sykemelding.detaljertSykemelding',
@@ -27,8 +51,8 @@ export const validation = {
 							Yup.object({
 								diagnose: requiredString,
 								diagnosekode: requiredString,
-							})
-						)
+							}),
+						),
 					),
 					helsepersonell: Yup.object({
 						etternavn: requiredString,
@@ -37,7 +61,7 @@ export const validation = {
 						hprId: requiredString,
 					}),
 					arbeidsgiver: Yup.object({
-						navn: requiredString,
+						navn: testHarArbeidsforhold(Yup.string().nullable()),
 						stillingsprosent: requiredNumber.transform((num) => (isNaN(num) ? undefined : num)),
 						yrkesbetegnelse: requiredString,
 					}),
@@ -46,10 +70,10 @@ export const validation = {
 							aktivitet: Yup.object({}),
 							fom: testDatoFom(requiredDate, 'tom'),
 							tom: testDatoTom(requiredDate, 'fom'),
-						})
+						}),
 					),
-				})
+				}),
 			),
-		})
+		}),
 	),
 }

apps/dolly-frontend/src/main/js/src/components/organisasjonSelect/OrganisasjonLoader.tsx

@@ -12,6 +12,7 @@ type OrganisasjonLoaderProps = {
 	value: any
 	feil?: any
 	useFormikSelect?: boolean
+	isClearable?: boolean
 }
 
 export const OrganisasjonLoader = ({
@@ -23,6 +24,7 @@ export const OrganisasjonLoader = ({
 	useFormikSelect,
 	feil,
 	value,
+	isClearable = false,
 	...props
 }: OrganisasjonLoaderProps) => {
 	const validEnhetstyper = ['BEDR', 'AAFY']
@@ -32,7 +34,7 @@ export const OrganisasjonLoader = ({
 	const formatLabel = (org) => `${org.orgnummer} (${org.enhetstype}) - ${org.navn}`
 	const organisasjonerSorted = organisasjoner
 		.filter((virksomhet) =>
-			kanHaArbeidsforhold ? validEnhetstyper.includes(virksomhet.enhetstype) : true
+			kanHaArbeidsforhold ? validEnhetstyper.includes(virksomhet.enhetstype) : true,
 		)
 		.sort(function (a, b) {
 			if (a.opprinnelse < b.opprinnelse) {
@@ -62,7 +64,7 @@ export const OrganisasjonLoader = ({
 			options={organisasjonerSorted}
 			size="xlarge"
 			optionHeight={50}
-			isClearable={false}
+			isClearable={isClearable}
 			{...props}
 		/>
 	) : (
@@ -75,7 +77,7 @@ export const OrganisasjonLoader = ({
 			onChange={handleChange}
 			value={value}
 			feil={feil}
-			isClearable={false}
+			isClearable={isClearable}
 			{...props}
 		/>
 	)