Merge pull request #3583 from navikt/feature/skattekort-frontend-ny

Feature/skattekort frontend ny

apps/dolly-frontend/config.test.yml

@@ -59,6 +59,7 @@ spec:
         - application: testnav-varslinger-service-dev
         - application: testnorge-profil-api-dev
         - application: testnorge-tilbakemelding-api
+        - application: testnav-skattekort-service
       external:
         - host: testnav-pensjon-testdata-facade-proxy.dev-fss-pub.nais.io
         - host: testnav-sigrunstub-proxy.dev-fss-pub.nais.io

apps/dolly-frontend/config.unstable.yml

@@ -54,6 +54,7 @@ spec:
         - application: testnav-varslinger-service-dev
         - application: testnorge-profil-api-dev
         - application: testnorge-tilbakemelding-api
+        - application: testnav-skattekort-service
       external:
         - host: testnav-pensjon-testdata-facade-proxy.dev-fss-pub.nais.io
         - host: testnav-sigrunstub-proxy.dev-fss-pub.nais.io

apps/dolly-frontend/src/main/java/no/nav/dolly/web/DollyFrontendApplicationStarter.java

@@ -83,6 +83,7 @@ public RouteLocator customRouteLocator(RouteLocatorBuilder builder) {
                 .route(createRoute(consumers.getGenererNavnService()))
                 .route(createRoute(consumers.getTestnavKodeverkService()))
                 .route(createRoute(consumers.getTestnavTenorSearchService()))
+                .route(createRoute(consumers.getTestnavSkattekortService()))
                 .route(createRoute(consumers.getTestnavLevendeArbeidsforholdAnsettelse(), "testnav-levende-arbeidsforhold-ansettelse"))
                 .route(createRoute(consumers.getTestnavLevendeArbeidsforholdScheduler(), "testnav-levende-arbeidsforhold-scheduler"))
                 .build();

apps/dolly-frontend/src/main/java/no/nav/dolly/web/config/Consumers.java

@@ -62,6 +62,7 @@ public class Consumers {
     private ServerProperties testnorgeProfilApi;
     private ServerProperties testnorgeTilbakemeldingApi;
     private ServerProperties testnavTenorSearchService;
+    private ServerProperties testnavSkattekortService;
     private ServerProperties testnavLevendeArbeidsforholdAnsettelse;
     private ServerProperties testnavLevendeArbeidsforholdScheduler;
 

apps/dolly-frontend/src/main/js/proxy-routes.json

@@ -229,6 +229,11 @@
     "changeOrigin": true,
     "secure": false
   },
+  "/testnav-skattekort-service/api": {
+    "target": "http://localhost:8020",
+    "changeOrigin": true,
+    "secure": false
+  },
   "/testnav-levende-arbeidsforhold-ansettelse/api": {
     "target": "http://localhost:8020",
     "changeOrigin": true,

apps/dolly-frontend/src/main/js/src/components/bestilling/sammendrag/kriterier/BestillingKriterieMapper.tsx

@@ -9,6 +9,7 @@ import {
 	omraaderArrayToString,
 	oversettBoolean,
 	showLabel,
+	toTitleCase,
 	uppercaseAndUnderscoreToCapitalized,
 } from '@/utils/DataFormatter'
 import {
@@ -27,6 +28,7 @@ import { useNavEnheter } from '@/utils/hooks/useNorg2'
 import { kodeverkKeyToLabel } from '@/components/fagsystem/sigrunstubPensjonsgivende/utils'
 import { useContext } from 'react'
 import { BestillingsveilederContext } from '@/components/bestillingsveileder/BestillingsveilederContext'
+import { showKodeverkLabel } from '@/components/fagsystem/skattekort/visning/Visning'
 
 // TODO: Flytte til selector?
 // - Denne kan forminskes ved bruk av hjelpefunksjoner
@@ -2126,6 +2128,59 @@ const mapInntektsmelding = (bestillingData, data) => {
 	}
 }
 
+const mapSkattekort = (bestillingData, data) => {
+	const skattekortKriterier = bestillingData.skattekort
+
+	if (skattekortKriterier) {
+		const skattekort = {
+			header: 'Skattekort (SOKOS)',
+			itemRows: [],
+		}
+
+		skattekortKriterier?.arbeidsgiverSkatt?.forEach((arbeidsgiver, idx) => {
+			const arbeidstaker = arbeidsgiver?.arbeidstaker?.[0]
+			const trekkListe = arbeidstaker?.skattekort?.forskuddstrekk
+
+			const tilleggsopplysningFormatted = arbeidstaker?.tilleggsopplysning?.map(
+				(tilleggsopplysning) => {
+					return showKodeverkLabel('TILLEGGSOPPLYSNING', tilleggsopplysning)
+				},
+			)
+
+			skattekort.itemRows.push([
+				{ numberHeader: `Skattekort ${idx + 1}` },
+				obj(
+					'Resultat på forespørsel',
+					showKodeverkLabel('RESULTATSTATUS', arbeidstaker?.resultatPaaForespoersel),
+				),
+				obj('Inntektsår', arbeidstaker?.inntektsaar),
+				obj('Utstedt dato', formatDate(arbeidstaker?.skattekort?.utstedtDato)),
+				obj('Skattekortidentifikator', arbeidstaker?.skattekort?.skattekortidentifikator),
+				obj('Tilleggsopplysning', arrayToString(tilleggsopplysningFormatted)),
+				obj('Arbeidsgiver (org.nr.)', arbeidsgiver?.arbeidsgiveridentifikator?.organisasjonsnummer),
+				obj('Arbeidsgiver (ident)', arbeidsgiver?.arbeidsgiveridentifikator?.personidentifikator),
+			])
+
+			trekkListe?.forEach((item, idx) => {
+				const forskuddstrekkType = Object.keys(item)?.filter((key) => item[key])?.[0]
+				const forskuddstrekk = item[forskuddstrekkType]
+
+				skattekort.itemRows.push([
+					{ numberHeader: `Forskuddstrekk ${idx + 1}: ${toTitleCase(forskuddstrekkType)}` },
+					obj('Trekkode', showKodeverkLabel('TREKKODE', forskuddstrekk?.trekkode)),
+					obj('Frikortbeløp', forskuddstrekk?.frikortbeloep),
+					obj('Tabelltype', showKodeverkLabel('TABELLTYPE', forskuddstrekk?.tabelltype)),
+					obj('Tabellnummer', forskuddstrekk?.tabellnummer),
+					obj('Prosentsats', forskuddstrekk?.prosentsats),
+					obj('Antall måneder for trekk', forskuddstrekk?.antallMaanederForTrekk),
+				])
+			})
+		})
+
+		data.push(skattekort)
+	}
+}
+
 const mapDokarkiv = (bestillingData, data) => {
 	const dokarkivKriterier = bestillingData.dokarkiv
 
@@ -2326,16 +2381,17 @@ export function mapBestillingData(bestillingData, bestillingsinformasjon, firstI
 	mapSigrunStub(bestillingData, data)
 	mapSigrunstubPensjonsgivende(bestillingData, data)
 	mapInntektStub(bestillingData, data)
+	mapInntektsmelding(bestillingData, data)
+	mapSkattekort(bestillingData, data)
 	mapArbeidsplassenCV(bestillingData, data)
+	mapPensjon(bestillingData, data, navEnheter)
+	mapArena(bestillingData, data)
 	mapSykemelding(bestillingData, data)
 	mapBrregstub(bestillingData, data)
+	mapInst(bestillingData, data)
 	mapKrr(bestillingData, data)
 	mapMedlemskapsperiode(bestillingData, data)
-	mapArena(bestillingData, data)
-	mapInst(bestillingData, data)
 	mapUdiStub(bestillingData, data)
-	mapPensjon(bestillingData, data, navEnheter)
-	mapInntektsmelding(bestillingData, data)
 	mapDokarkiv(bestillingData, data)
 	mapHistark(bestillingData, data)
 	mapOrganisasjon(bestillingData, data)

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/options/malOptions.tsx

@@ -30,6 +30,9 @@ export const initialValuesBasedOnMal = (mal: any, environments: any) => {
 	if (initialValuesMal.inntektstub) {
 		initialValuesMal.inntektstub = getUpdatedInntektstubData(initialValuesMal.inntektstub)
 	}
+	if (initialValuesMal.skattekort) {
+		initialValuesMal.skattekort = getUpdatedSkattekortData(initialValuesMal.skattekort)
+	}
 	if (initialValuesMal.instdata) {
 		initialValuesMal.instdata = getUpdatedInstData(initialValuesMal.instdata)
 	}
@@ -156,6 +159,25 @@ const getUpdatedAaregData = (aaregData: any) => {
 const getUpdatedInntektsmeldingData = (inntektsmeldingData: any) =>
 	inntektsmeldingData.map((inntekt: any) => updateData(inntekt, initialValues.inntektsmelding))
 
+const getUpdatedSkattekortData = (skattekortData: any) => {
+	const newSkattekortData = Object.assign({}, skattekortData)
+	newSkattekortData.arbeidsgiverSkatt = newSkattekortData.arbeidsgiverSkatt.map(
+		(arbeidsgiver: any) => {
+			const identifikator = Object.fromEntries(
+				Object.entries(arbeidsgiver?.arbeidsgiveridentifikator)?.filter(([key, value]) => value),
+			)
+			_.set(arbeidsgiver, 'arbeidsgiveridentifikator', identifikator)
+			const forskuddstrekk = arbeidsgiver?.arbeidstaker?.[0]?.skattekort?.forskuddstrekk?.map(
+				(forskuddstrekk: any) =>
+					Object.fromEntries(Object.entries(forskuddstrekk)?.filter(([key, value]) => value)),
+			)
+			_.set(arbeidsgiver, 'arbeidstaker[0].skattekort.forskuddstrekk', forskuddstrekk)
+			return arbeidsgiver
+		},
+	)
+	return newSkattekortData
+}
+
 const getUpdatedInstData = (instData: any) =>
 	instData.map((data: any) => updateData(data, initialValues.instdata))
 

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stegVelger/steg/steg1/paneler/ArbeidInntekt.tsx

@@ -10,13 +10,18 @@ import {
 	getInitialSigrunstubPensjonsgivende,
 	sigrunstubPensjonsgivendeAttributt,
 } from '@/components/fagsystem/sigrunstubPensjonsgivende/form/Form'
+import {
+	initialArbeidsgiverSkatt,
+	skattekortAttributt,
+} from '@/components/fagsystem/skattekort/form/Form'
 
 export const ArbeidInntektPanel = ({ stateModifier, formValues }) => {
 	const sm = stateModifier(ArbeidInntektPanel.initialValues)
 
 	const infoTekst =
 		'Arbeidsforhold: \nDataene her blir lagt til AAREG. \n\nInntekt: \nSkatte- og inntektsgrunnlag. Inntektene blir lagt i Sigrun-stub.' +
-		'\n\nPensjonsgivende inntekt: \nInntektene blir lagt til i POPP-register. \n\nInntektstub: \nInformasjonen blir lagt i Inntekt-stub.'
+		'\n\nPensjonsgivende inntekt: \nInntektene blir lagt til i POPP-register. \n\nInntektstub: \nInformasjonen blir lagt i Inntekt-stub.' +
+		'\n\nSkattekort: Dataene blir lagt til i SOKOS.'
 
 	return (
 		<Panel
@@ -31,6 +36,7 @@ export const ArbeidInntektPanel = ({ stateModifier, formValues }) => {
 				inntektstubAttributt,
 				inntektsmeldingAttributt,
 				sigrunstubPensjonsgivendeAttributt,
+				skattekortAttributt,
 			])}
 		>
 			<AttributtKategori title="Arbeidsforhold (Aareg)" attr={sm.attrs}>
@@ -46,6 +52,9 @@ export const ArbeidInntektPanel = ({ stateModifier, formValues }) => {
 			<AttributtKategori title="Inntektsmelding (fra Altinn)" attr={sm.attrs}>
 				<Attributt attr={sm.attrs.inntektsmelding} id="inntekt_inntektstub" />
 			</AttributtKategori>
+			<AttributtKategori title="Skattekort (SOKOS)" attr={sm.attrs}>
+				<Attributt attr={sm.attrs.skattekort} />
+			</AttributtKategori>
 		</Panel>
 	)
 }
@@ -150,4 +159,13 @@ ArbeidInntektPanel.initialValues = ({ set, del, has }) => ({
 			del('inntektstub')
 		},
 	},
+	skattekort: {
+		label: 'Har skattekort',
+		checked: has('skattekort'),
+		add: () =>
+			set('skattekort', {
+				arbeidsgiverSkatt: [initialArbeidsgiverSkatt()],
+			}),
+		remove: () => del('skattekort'),
+	},
 })

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stegVelger/steg/steg2/DollyValidation.tsx

@@ -21,6 +21,7 @@ import { KrrstubForm } from '@/components/fagsystem/krrstub/form/KrrForm'
 import { MiljoVelger } from '@/components/miljoVelger/MiljoVelger'
 import { MalForm } from '@/components/bestillingsveileder/stegVelger/steg/steg3/MalForm'
 import { VelgGruppe } from '@/components/bestillingsveileder/stegVelger/steg/steg3/VelgGruppe'
+import { SkattekortForm } from '@/components/fagsystem/skattekort/form/Form'
 
 export const DollyValidation = Yup.object({
 	...PdlfForm.validation,
@@ -30,6 +31,7 @@ export const DollyValidation = Yup.object({
 	...SigrunstubPensjonsgivendeForm.validation,
 	...InntektstubForm.validation,
 	...InntektsmeldingForm.validation,
+	...SkattekortForm.validation,
 	...SykdomForm.validation,
 	...BrregstubForm.validation,
 	...InstForm.validation,

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stegVelger/steg/steg2/Steg2.tsx

@@ -24,6 +24,7 @@ import { UforetrygdForm } from '@/components/fagsystem/uforetrygd/form/Form'
 import { SigrunstubPensjonsgivendeForm } from '@/components/fagsystem/sigrunstubPensjonsgivende/form/Form'
 import { KrrstubForm } from '@/components/fagsystem/krrstub/form/KrrForm'
 import { useFormContext } from 'react-hook-form'
+import { SkattekortForm } from '@/components/fagsystem/skattekort/form/Form'
 import { PensjonsavtaleForm } from '@/components/fagsystem/pensjonsavtale/form/Form'
 
 const gruppeNavn = (gruppe) => <span style={{ fontWeight: 'bold' }}>{gruppe.navn}</span>
@@ -65,11 +66,12 @@ export const Steg2 = () => {
 		<div>
 			<PdlfForm />
 			<AaregForm />
-			<ArbeidsplassenForm />
 			<SigrunstubForm />
 			<SigrunstubPensjonsgivendeForm />
 			<InntektstubForm />
 			<InntektsmeldingForm />
+			<SkattekortForm />
+			<ArbeidsplassenForm />
 			<PensjonForm />
 			<PensjonsavtaleForm />
 			<TjenestepensjonForm />

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/utils.tsx

@@ -74,6 +74,7 @@ export const rootPaths = [
 	'medl',
 	'sykemelding',
 	'organisasjon',
+	'skattekort',
 ]
 
 export const harAvhukedeAttributter = (values) => {

apps/dolly-frontend/src/main/js/src/components/codeView/CodeView.tsx

@@ -3,14 +3,17 @@ import styled from 'styled-components'
 
 const StyledSyntaxHighlighter = styled(SyntaxHighlighter)`
 	font-size: 0.9em;
-	max-width: 820px;
+	width: 100%;
 `
 
 type Props = {
 	code: string
 	language: string
+	wrapLongLines?: boolean
 }
 
-export default ({ code, language }: Props) => (
-	<StyledSyntaxHighlighter language={language}>{code}</StyledSyntaxHighlighter>
+export default ({ code, language, wrapLongLines = false }: Props) => (
+	<StyledSyntaxHighlighter language={language} wrapLongLines={wrapLongLines}>
+		{code}
+	</StyledSyntaxHighlighter>
 )

apps/dolly-frontend/src/main/js/src/components/fagsystem/skattekort/form/ArbeidsgiverToggle.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { ToggleGroup } from '@navikt/ds-react'
+import { OrgnummerToggle } from '@/components/fagsystem/inntektstub/form/partials/orgnummerToggle'
+import { FormTextInput } from '@/components/ui/form/inputs/textInput/TextInput'
+import { Kategori } from '@/components/ui/form/kategori/Kategori'
+import { UseFormReturn } from 'react-hook-form/dist/types'
+
+enum ToggleValg {
+	ORGANISASJON = 'ORGANISASJON',
+	PRIVAT = 'PRIVAT',
+}
+
+type ArbeidsgiverToggleProps = {
+	formMethods: UseFormReturn
+	path: string
+}
+
+export const ArbeidsgiverToggle = ({ formMethods, path }: ArbeidsgiverToggleProps) => {
+	const organisasjonPath = `${path}.organisasjonsnummer`
+	const personPath = `${path}.personidentifikator`
+
+	const [inputType, setInputType] = useState(
+		formMethods.watch(`${path}.personidentifikator`)?.length === 11
+			? ToggleValg.PRIVAT
+			: ToggleValg.ORGANISASJON,
+	)
+
+	const handleToggleChange = (value: ToggleValg) => {
+		setInputType(value)
+		if (value === ToggleValg.ORGANISASJON) {
+			formMethods.setValue(organisasjonPath, '')
+			formMethods.setValue(personPath, undefined)
+		} else if (value === ToggleValg.PRIVAT) {
+			formMethods.setValue(personPath, '')
+			formMethods.setValue(organisasjonPath, undefined)
+		}
+	}
+
+	return (
+		<Kategori title="Arbeidsgiver">
+			<div className="toggle--wrapper">
+				<ToggleGroup
+					size={'small'}
+					onChange={handleToggleChange}
+					defaultValue={inputType}
+					style={{ backgroundColor: '#ffffff' }}
+				>
+					<ToggleGroup.Item key={ToggleValg.ORGANISASJON} value={ToggleValg.ORGANISASJON}>
+						Organisasjon
+					</ToggleGroup.Item>
+					<ToggleGroup.Item key={ToggleValg.PRIVAT} value={ToggleValg.PRIVAT}>
+						Privat
+					</ToggleGroup.Item>
+				</ToggleGroup>
+
+				{inputType === ToggleValg.ORGANISASJON ? (
+					<OrgnummerToggle
+						formMethods={formMethods}
+						path={organisasjonPath}
+						opplysningspliktigPath={null}
+					/>
+				) : (
+					<div className="flexbox--flex-wrap" style={{ marginTop: '5px' }}>
+						<FormTextInput name={personPath} label="Personidentifikator" size="xlarge" />
+					</div>
+				)}
+			</div>
+		</Kategori>
+	)
+}