Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web): Pension Calculator - "After September 1 2025" year option #17117

Merged
merged 9 commits into from
Dec 16, 2024
Merged

feat(web): Pension Calculator - "After September 1 2025" year option #17117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
58a28d4
Add new options to base pension type
RunarVestmann Dec 3, 2024
37c337f
Update logic
RunarVestmann Dec 4, 2024
ec48ce5
Add more translation strings
RunarVestmann Dec 6, 2024
8fdeb52
Remove comment
RunarVestmann Dec 6, 2024
0904182
Add text for 2025 calculator
RunarVestmann Dec 9, 2024
7c52554
Add translation string
RunarVestmann Dec 12, 2024
44f6a69
Decrease font size and wrap text
RunarVestmann Dec 13, 2024
9226769
Update title
RunarVestmann Dec 13, 2024
7ed1866
Merge branch 'main' into feature/web-pension-calculator-new-year-option
kodiakhq[bot] Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 144 additions & 24 deletions apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { PropsWithChildren, useMemo, useState } from 'react'
import { PropsWithChildren, useEffect, useMemo, useState } from 'react'
import { Controller, FormProvider, useForm } from 'react-hook-form'
import { useIntl } from 'react-intl'
import add from 'date-fns/add'
Expand Down Expand Up @@ -57,6 +57,8 @@ import {
convertToQueryParams,
extractSlug,
getDateOfCalculationsOptions,
is2025FormPreviewActive,
NEW_SYSTEM_TAKES_PLACE_DATE,
} from './utils'
import * as styles from './PensionCalculator.css'

Expand All @@ -70,7 +72,10 @@ const hasDisabilityAssessment = (
) => {
return (
typeOfBasePension === BasePensionType.Disability ||
typeOfBasePension === BasePensionType.Rehabilitation
typeOfBasePension === BasePensionType.Rehabilitation ||
typeOfBasePension === BasePensionType.NewSystemDisability ||
typeOfBasePension === BasePensionType.NewSystemPartialDisability ||
typeOfBasePension === BasePensionType.NewSystemMedicalAndRehabilitation
)
}

Expand Down Expand Up @@ -131,6 +136,15 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
defaultValues,
})

const [dateOfCalculations, setDateOfCalculations] = useQueryState(
'dateOfCalculations',
{
defaultValue:
methods.formState.defaultValues?.dateOfCalculations ??
dateOfCalculationsOptions[0].value,
},
)

const currencyInputMaxLength =
customPageData?.configJson?.currencyInputMaxLength ?? 14

Expand Down Expand Up @@ -165,7 +179,47 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
? maxMonthPensionDelayIfBorn1951OrEarlier
: maxMonthPensionDelayIfBornAfter1951

const allCalculatorsOptions = useMemo(() => {
const options = [...dateOfCalculationsOptions]

if (is2025FormPreviewActive(customPageData)) {
options.unshift({
label: formatMessage(translationStrings.form2025PreviewLabel),
value: NEW_SYSTEM_TAKES_PLACE_DATE.toISOString(),
})
}

return options
}, [customPageData, dateOfCalculationsOptions, formatMessage])

const isNewSystemActive =
is2025FormPreviewActive(customPageData) &&
dateOfCalculations === NEW_SYSTEM_TAKES_PLACE_DATE.toISOString()

const basePensionTypeOptions = useMemo<Option<BasePensionType>[]>(() => {
if (isNewSystemActive) {
const options = [
{
label: formatMessage(
translationStrings.basePensionNewSystemDisabilityLabel,
),
value: BasePensionType.NewSystemDisability,
},
{
label: formatMessage(
translationStrings.basePensionNewSystemPartialDisabilityLabel,
),
value: BasePensionType.NewSystemPartialDisability,
},
{
label: formatMessage(
translationStrings.basePensionNewSystemMedicalAndRehabilitation,
),
value: BasePensionType.NewSystemMedicalAndRehabilitation,
},
]
return options
}
const options = [
{
label: formatMessage(translationStrings.basePensionRetirementLabel),
Expand All @@ -190,9 +244,10 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
value: BasePensionType.HalfRetirement,
},
]

options.sort(sortAlpha('label'))
return options
}, [formatMessage])
}, [formatMessage, isNewSystemActive])

const hasSpouseOptions = useMemo<Option<boolean>[]>(() => {
return [
Expand Down Expand Up @@ -265,15 +320,6 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
]
}, [formatMessage])

const [dateOfCalculations, setDateOfCalculations] = useQueryState(
'dateOfCalculations',
{
defaultValue:
methods.formState.defaultValues?.dateOfCalculations ??
dateOfCalculationsOptions[0].value,
},
)

const { linkResolver } = useLinkResolver()

const router = useRouter()
Expand Down Expand Up @@ -355,6 +401,30 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
]
}, [formatMessage])

// Make sure we never enter an invalid state
useEffect(() => {
if (isNewSystemActive) {
if (
typeOfBasePension !== BasePensionType.NewSystemDisability &&
typeOfBasePension !== BasePensionType.NewSystemPartialDisability &&
typeOfBasePension !== BasePensionType.NewSystemMedicalAndRehabilitation
) {
methods.setValue(
'typeOfBasePension',
BasePensionType.NewSystemDisability,
)
}
} else {
if (
typeOfBasePension === BasePensionType.NewSystemDisability ||
typeOfBasePension === BasePensionType.NewSystemPartialDisability ||
typeOfBasePension === BasePensionType.NewSystemMedicalAndRehabilitation
) {
methods.setValue('typeOfBasePension', BasePensionType.Retirement)
}
}
}, [isNewSystemActive, methods, typeOfBasePension])

const birthYearOptions = useMemo<Option<number>[]>(() => {
const today = new Date()
const options: Option<number>[] = []
Expand Down Expand Up @@ -411,10 +481,17 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
return options
}, [defaultPensionDate, maxMonthPensionDelay, maxMonthPensionHurry])

const title = `${formatMessage(translationStrings.mainTitle)} ${
dateOfCalculationsOptions.find((o) => o.value === dateOfCalculations)
?.label ?? dateOfCalculationsOptions[0].label
}`
const title = `${formatMessage(
isNewSystemActive
? translationStrings.form2025PreviewMainTitle
: translationStrings.mainTitle,
)}`
const titlePostfix = `${(
allCalculatorsOptions.find((o) => o.value === dateOfCalculations)?.label ??
dateOfCalculationsOptions[0].label
).toLowerCase()}`

const titleVariant = isNewSystemActive ? 'h2' : 'h1'

const startMonthOptions = useMemo(() => {
if (!defaultPensionDate) {
Expand Down Expand Up @@ -477,9 +554,16 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
>
<Box paddingY={5}>
<Stack space={3}>
<Text variant="h1" as="h1">
{title}
</Text>
{isNewSystemActive && (
<Text variant={titleVariant} as="h1">
{title} <div>{titlePostfix}</div>
</Text>
)}
{!isNewSystemActive && (
<Text variant={titleVariant} as="h1">
{title} {titlePostfix}
</Text>
)}
<Text>{formatMessage(translationStrings.isTurnedOff)}</Text>
</Stack>
</Box>
Expand All @@ -500,9 +584,16 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
<Stack space={3}>
<Stack space={3}>
<Box paddingTop={6}>
<Text variant="h1" as="h1">
{title}
</Text>
{isNewSystemActive && (
<Text variant={titleVariant} as="h1">
{title} <div>{titlePostfix}</div>
</Text>
)}
{!isNewSystemActive && (
<Text variant={titleVariant} as="h1">
{title} {titlePostfix}
</Text>
)}
</Box>
</Stack>
<Box
Expand Down Expand Up @@ -533,10 +624,31 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
translationStrings.dateOfCalculationsPlaceholder,
)}
size="sm"
options={dateOfCalculationsOptions}
options={allCalculatorsOptions}
onSelect={(option) => {
if (option) {
setDateOfCalculations(option.value)
if (isNewSystemActive) {
if (
option.value ===
NEW_SYSTEM_TAKES_PLACE_DATE.toISOString()
) {
// Date is being moved to the new system date
methods.setValue(
'typeOfBasePension',
BasePensionType.NewSystemDisability,
)
} else if (
dateOfCalculations ===
NEW_SYSTEM_TAKES_PLACE_DATE.toISOString()
) {
// Date is being moved from new system date
methods.setValue(
'typeOfBasePension',
BasePensionType.Retirement,
)
}
}
}
}}
/>
Expand Down Expand Up @@ -827,6 +939,10 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({

{(typeOfBasePension ===
BasePensionType.Disability ||
typeOfBasePension ===
BasePensionType.NewSystemDisability ||
typeOfBasePension ===
BasePensionType.NewSystemPartialDisability ||
typeOfBasePension ===
BasePensionType.Rehabilitation) && (
<Box className={styles.inputContainer}>
Expand All @@ -839,7 +955,11 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
}
label={formatMessage(
typeOfBasePension ===
BasePensionType.Disability
BasePensionType.Disability ||
typeOfBasePension ===
BasePensionType.NewSystemDisability ||
typeOfBasePension ===
BasePensionType.NewSystemPartialDisability
? translationStrings.ageOfFirst75DisabilityAssessment
: translationStrings.ageOfFirst75RehabilitationAssessment,
)}
Expand Down
63 changes: 52 additions & 11 deletions apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Fragment, useState } from 'react'
import { Fragment, useMemo, useState } from 'react'
import { useIntl } from 'react-intl'

import {
Expand Down Expand Up @@ -58,7 +58,9 @@ import {
convertToQueryParams,
extractSlug,
getDateOfCalculationsOptions,
is2025FormPreviewActive,
is2025PreviewActive,
NEW_SYSTEM_TAKES_PLACE_DATE,
} from './utils'
import * as styles from './PensionCalculatorResults.css'

Expand Down Expand Up @@ -285,11 +287,36 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({

const highlightedItems2025 = calculation2025.highlightedItems ?? []

const title = `${formatMessage(translationStrings.mainTitle)} ${
dateOfCalculationsOptions.find(
const allCalculatorsOptions = useMemo(() => {
const options = [...dateOfCalculationsOptions]

if (is2025FormPreviewActive(customPageData)) {
options.unshift({
label: formatMessage(translationStrings.form2025PreviewLabel),
value: NEW_SYSTEM_TAKES_PLACE_DATE.toISOString(),
})
}

return options
}, [customPageData, dateOfCalculationsOptions, formatMessage])

const isNewSystemActive =
is2025FormPreviewActive(customPageData) &&
calculationInput.dateOfCalculations ===
NEW_SYSTEM_TAKES_PLACE_DATE.toISOString()

const title = `${formatMessage(
isNewSystemActive
? translationStrings.form2025PreviewMainTitle
: translationStrings.mainTitle,
)}`
const titlePostfix = `${(
allCalculatorsOptions.find(
(o) => o.value === calculationInput.dateOfCalculations,
)?.label ?? ''
}`
)?.label ?? dateOfCalculationsOptions[0].label
).toLowerCase()}`

const titleVariant = isNewSystemActive ? 'h2' : 'h1'

const calculationIsPresent =
typeof calculation.groups?.length === 'number' &&
Expand Down Expand Up @@ -334,9 +361,16 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
>
<Box paddingY={5}>
<Stack space={3}>
<Text variant="h1" as="h1">
{title}
</Text>
{isNewSystemActive && (
<Text variant={titleVariant} as="h1">
{title} <div>{titlePostfix}</div>
</Text>
)}
{!isNewSystemActive && (
<Text variant={titleVariant} as="h1">
{title} {titlePostfix}
</Text>
)}
<Text>
{formatMessage(translationStrings.isTurnedOff)}
</Text>
Expand All @@ -357,9 +391,16 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
<Box paddingY={6}>
<Stack space={5}>
<Stack space={2}>
<Text variant="h1" as="h1">
{title}
</Text>
{isNewSystemActive && (
<Text variant={titleVariant} as="h1">
{title} <div>{titlePostfix}</div>
</Text>
)}
{!isNewSystemActive && (
<Text variant={titleVariant} as="h1">
{title} {titlePostfix}
</Text>
)}
<Box className={styles.textMaxWidth}>
<Text>
{formatMessage(
Expand Down
Loading
Loading