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

…17117) * Add new options to base pension type * Update logic * Add more translation strings * Remove comment * Add text for 2025 calculator * Add translation string * Decrease font size and wrap text * Update title --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Dec 16, 2024 · 1ba7f52 · 1ba7f52
1 parent f090a75
commit 1ba7f52
Show file tree

Hide file tree

Showing 6 changed files with 270 additions and 36 deletions.
diff --git a/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculator.tsx b/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculator.tsx
@@ -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'
@@ -57,6 +57,8 @@ import {
   convertToQueryParams,
   extractSlug,
   getDateOfCalculationsOptions,
+  is2025FormPreviewActive,
+  NEW_SYSTEM_TAKES_PLACE_DATE,
 } from './utils'
 import * as styles from './PensionCalculator.css'
 
@@ -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
   )
 }
 
@@ -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
 
@@ -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),
@@ -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 [
@@ -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()
@@ -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>[] = []
@@ -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) {
@@ -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>
@@ -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
@@ -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,
+                                    )
+                                  }
+                                }
                               }
                             }}
                           />
@@ -827,6 +939,10 @@ const PensionCalculator: CustomScreen<PensionCalculatorProps> = ({
 
                             {(typeOfBasePension ===
                               BasePensionType.Disability ||
+                              typeOfBasePension ===
+                                BasePensionType.NewSystemDisability ||
+                              typeOfBasePension ===
+                                BasePensionType.NewSystemPartialDisability ||
                               typeOfBasePension ===
                                 BasePensionType.Rehabilitation) && (
                               <Box className={styles.inputContainer}>
@@ -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,
                                   )}

diff --git a/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx b/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react'
+import { Fragment, useMemo, useState } from 'react'
 import { useIntl } from 'react-intl'
 
 import {
@@ -58,7 +58,9 @@ import {
   convertToQueryParams,
   extractSlug,
   getDateOfCalculationsOptions,
+  is2025FormPreviewActive,
   is2025PreviewActive,
+  NEW_SYSTEM_TAKES_PLACE_DATE,
 } from './utils'
 import * as styles from './PensionCalculatorResults.css'
 
@@ -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' &&
@@ -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>
@@ -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(