diff --git a/src/advanced-calculator/Pension/index.tsx b/src/advanced-calculator/Pension/index.tsx index 8ed7ccc45..95b682375 100644 --- a/src/advanced-calculator/Pension/index.tsx +++ b/src/advanced-calculator/Pension/index.tsx @@ -1,27 +1,30 @@ -import { ONE_G } from '../config'; - import PensionGraph from '../Graphs/PensionGraph'; import RangeSlider from '../Components/RangeSlider'; import { useState } from 'react'; import style from '../calculator.module.css'; -import {Heading3} from "@components/heading"; - -const SEVEN_POINT_ONE_G = ONE_G * 7.1; -// const TWELVE_G = ONE_G * 12; - -const differenceWhenGreaterThan7G = (salary: number) => { - const difference = Math.floor(salary - SEVEN_POINT_ONE_G); - return Math.sign(difference) > 0 ? difference : 0; -}; - -export default function Pension({ yearlySalary }: { yearlySalary: number }) { +import { Heading3 } from '@components/heading'; + +export default function Pension({ + yearlySalary, + oneG, +}: { + yearlySalary: number; + oneG: number; +}) { const [compareSalary, setCompareSalary] = useState(500000); const [comparePensionPercentage, setComparePensionChange] = useState({ below7G: 5, above7G: 5, }); + const sevenG = oneG * 7.1; + + function differenceWhenGreaterThan7G(salary: number) { + const difference = Math.floor(salary - sevenG); + return Math.sign(difference) > 0 ? difference : 0; + } + function handleOnCompareSalaryChange(value: number) { setCompareSalary(value); } @@ -72,9 +75,7 @@ export default function Pension({ yearlySalary }: { yearlySalary: number }) {
- - Årslønn hos nåverende arbeidsgiver - + Årslønn hos nåverende arbeidsgiver
- - Pensjon, i prosent (mellom 0 til 7.1G) - + Pensjon, i prosent (mellom 0 til 7.1G)
- - Pensjon, i prosent (over 7.1G) - + Pensjon, i prosent (over 7.1G)
diff --git a/src/advanced-calculator/index.tsx b/src/advanced-calculator/index.tsx index 86e50c3ad..e83a68e36 100644 --- a/src/advanced-calculator/index.tsx +++ b/src/advanced-calculator/index.tsx @@ -1,28 +1,29 @@ -import { ReactNode, useEffect, useState } from 'react'; +import { AnimatePresence, motion } from 'framer-motion'; +import { ReactNode, useState } from 'react'; import InView from './Components/InView'; import RangeSlider from './Components/RangeSlider'; import { TextSplitter } from './Components/TextSplitter'; -import { SalaryCalculatorProps } from './config'; import Counter from './Counter'; import BonusGraph from './Graphs/BonusGraph'; import SalaryGraph from './Graphs/SalaryGraph'; +import Pension from './Pension'; +import { SalaryCalculatorProps } from './config'; import { - daysUntilSalaryRaise, calculateYearsSince, + daysUntilSalaryRaise, gradDateOfTheYear, } from './helpers/daysUntilNewSalary'; import { getAverageBonus, getHistoricBonus } from './helpers/getHistoricBonus'; import getPayscale from './helpers/getPayscale'; import { numberOfWorkingDaysInChristmas } from './helpers/paidHolidaysOff'; import { formatCurrencyFromNumber, getMaxYear } from './helpers/utils'; -import Pension from './Pension'; -import { motion, AnimatePresence } from 'framer-motion'; -import style from './calculator.module.css'; import { Button } from '@components/button'; +import { Heading4 } from '@components/heading'; import { and } from 'src/utils/css'; import { useMediaQuery } from 'src/utils/use-media-query'; -import { Heading4 } from '@components/heading'; +import style from './calculator.module.css'; +import { useOneG } from './use-g'; const CalculatorSection = ({ children }: { children: ReactNode }) => { return
{children}
; @@ -43,24 +44,16 @@ const DEGREE: { [key: string]: string } = { export default function Calculator(props: SalaryCalculatorProps) { const [selectedYear, setSelectedYear] = useState(props.year); const [selectedValidYear, setSelectedValidYear] = useState(props.year); - const [grunnbelop, setGrunnbelop] = useState(118620); const [degree, setDegree] = useState(props.degree); const thisYear = new Date().getFullYear(); const year = selectedValidYear + (degree === 'bachelor' ? 1 : 0); const payscale = getPayscale(year); - + const isOverrideVisibleControls = useMediaQuery(`(min-width: 900px)`) ?? true; const [mobileVisibleInternal, setMobileVisible] = useState(true); - useEffect(() => { - const getGrunnbelop = async () => { - const res = await fetch('https://g.nav.no/api/v1/grunnbeloep'); - const json = await res.json(); - setGrunnbelop(json['grunnbeloep']) - } - getGrunnbelop(); - },[]); + const oneG = useOneG(); const mobileVisible = isOverrideVisibleControls || mobileVisibleInternal; @@ -112,173 +105,173 @@ export default function Calculator(props: SalaryCalculatorProps) { )} >
- {mobileVisible && ( - -
-
- Hva slags utdanning har du? -
-
-
- - + {mobileVisible && ( + +
+
+ Hva slags utdanning har du?
+
+
+ + +
-
- - +
+ + +
-
- -
-
-
- Vi baserer lønn på erfaring +
+
+
+ Vi baserer lønn på erfaring +
+
+ {totalExperience} +
-
- {totalExperience} -
-
-
-
- Det vil gi en årslønn på +
+
+ Det vil gi en årslønn på +
+
+ +
-
- + +
+
+ Årslønn + gjennomsnittlig bonus +
+
+ +
-
-
-
- Årslønn + gjennomsnittlig bonus +
+
+ Årlig pensjon, 7% +
+
+ +
-
+
+ + )} +
+ {!mobileVisible && ( + + {totalExperience} gir årslønn og snitt bonus på totalt{' '} + -
-
- -
-
- Årlig pensjon, 7% -
-
+ />{' '} + kr + {' '} + +{' '} + -
-
-
- - )} -
- {!mobileVisible && ( - {' '} + i årlig pensjon. + + )} + -
+ {mobileVisible ? 'Skjul' : 'Endre'} + +
@@ -325,7 +318,7 @@ export default function Calculator(props: SalaryCalculatorProps) {

- + @@ -465,7 +458,7 @@ export default function Calculator(props: SalaryCalculatorProps) {
  • Full lønn under permisjon. NAV dekker opp til{' '} - {formatCurrencyFromNumber(grunnbelop * 6)} (6G). Variant + {formatCurrencyFromNumber(oneG * 6)} (6G). Variant tar seg av resten.
  • diff --git a/src/advanced-calculator/use-g.ts b/src/advanced-calculator/use-g.ts new file mode 100644 index 000000000..166b08f29 --- /dev/null +++ b/src/advanced-calculator/use-g.ts @@ -0,0 +1,23 @@ +import { useEffect, useState } from 'react'; + +const DEFAULT_G_FALLBACK = 118620; + +export function useOneG() { + const [grunnbelop, setGrunnbelop] = useState(DEFAULT_G_FALLBACK); + useEffect(() => { + const fetchG = async () => { + try { + const res = await fetch('https://g.nav.no/api/v1/grunnbeloep'); + const json = await res.json(); + + if (json.grunnbeloep) { + setGrunnbelop(json.grunnbeloep); + } + } catch (e) {} + }; + + fetchG(); + }, []); + + return grunnbelop; +}