From a0d9ae782e2f71817d2f7aa7818d1bb26151560e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=BAnar=20Vestmann?=
 <43557895+RunarVestmann@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:09:25 +0000
Subject: [PATCH] feat(web): Pension Calculator - After 1 September 2025
 preview (#16392)

* Add preview for 2025 system

* Add translation string

* Fix typo

* Refactor conditional

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../PensionCalculatorResults.css.ts           |  20 +-
 .../PensionCalculatorResults.tsx              | 219 ++++++++++++++++--
 .../translationStrings.ts                     |  37 +++
 .../SocialInsuranceAdministration/utils.ts    |   4 +
 4 files changed, 261 insertions(+), 19 deletions(-)

diff --git a/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.css.ts b/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.css.ts
index 54f76913b245..328a1f9d3e6c 100644
--- a/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.css.ts
+++ b/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.css.ts
@@ -1,6 +1,6 @@
 import { globalStyle, style } from '@vanilla-extract/css'
 
-import { theme } from '@island.is/island-ui/theme'
+import { theme, themeUtils } from '@island.is/island-ui/theme'
 
 const lineWidth = '2px'
 
@@ -9,6 +9,24 @@ export const line = style({
   height: '86px',
 })
 
+export const longLine = style({
+  borderLeft: `${lineWidth} solid ${theme.color.blue200}`,
+})
+
+export const highlightedItemsContainer = style({
+  display: 'grid',
+  ...themeUtils.responsiveStyle({
+    xs: {
+      gridTemplateColumns: '1fr',
+      gap: theme.spacing[4],
+    },
+    lg: {
+      gridTemplateColumns: '1fr auto 1fr',
+      gap: theme.spacing[7],
+    },
+  }),
+})
+
 export const fullWidth = style({
   width: '100%',
 })
diff --git a/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx b/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx
index 02d354022cbe..b7e3000adb09 100644
--- a/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx
+++ b/apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import { Fragment, useState } from 'react'
 import { useIntl } from 'react-intl'
 
 import {
@@ -30,6 +30,7 @@ import {
   QueryGetOrganizationArgs,
   QueryGetOrganizationPageArgs,
   QueryGetPensionCalculationArgs,
+  SocialInsurancePensionCalculationBasePensionType,
   SocialInsurancePensionCalculationInput,
   SocialInsurancePensionCalculationResponse,
   SocialInsurancePensionCalculationResponseItem,
@@ -56,6 +57,7 @@ import {
   convertToQueryParams,
   extractSlug,
   getDateOfCalculationsOptions,
+  is2025PreviewActive,
 } from './utils'
 import * as styles from './PensionCalculatorResults.css'
 
@@ -73,15 +75,19 @@ const ChangeAssumptionsButton = ({ href }: { href: string }) => {
 interface HighlightedItemsProps {
   highlightedItems: SocialInsurancePensionCalculationResponseItem[]
   customPageData: CustomPage | null | undefined
+  topHeadingText?: string
+  topHeadingLevel?: 2 | 3
 }
 
 const HighlightedItems = ({
   highlightedItems,
   customPageData,
+  topHeadingText,
+  topHeadingLevel = 3,
 }: HighlightedItemsProps) => {
   const { formatMessage } = useIntl()
 
-  const higlightedItemIsPresent = highlightedItems.length > 0
+  const highlightedItemPresent = highlightedItems.length > 0
   const perMonthText = formatMessage(translationStrings.perMonth)
   const perYearText = formatMessage(translationStrings.perYear)
 
@@ -108,20 +114,30 @@ const HighlightedItems = ({
           )
         }
 
-        const titleVariant: TextProps['variant'] = index === 0 ? 'h3' : 'h4'
+        const titleAs: TextProps['as'] = (index === 0
+          ? `h${topHeadingLevel}`
+          : `h${topHeadingLevel + 1}`) as unknown as TextProps['as']
+
+        const titleVariant: TextProps['variant'] = (index === 0
+          ? `h${topHeadingLevel + 1}`
+          : `h${topHeadingLevel + 2}`) as unknown as TextProps['variant']
 
         const numericVariant: TextProps['variant'] =
           index === 0 ? 'h5' : 'medium'
 
+        if (index === 0 && topHeadingText) {
+          highlightedItemName = topHeadingText
+        }
+
         return (
           <Stack key={index} space={2}>
             <Inline alignY="center" justifyContent="spaceBetween" space={5}>
-              {higlightedItemIsPresent && (
-                <Text variant={titleVariant} as="h2">
+              {highlightedItemPresent && (
+                <Text variant={titleVariant} as={titleAs}>
                   {highlightedItemName}
                 </Text>
               )}
-              {!higlightedItemIsPresent && <Box />}
+              {!highlightedItemPresent && <Box />}
             </Inline>
 
             <Box className={styles.grid}>
@@ -245,6 +261,7 @@ interface PensionCalculatorResultsProps {
   organizationPage: OrganizationPage
   organization: Organization
   calculation: SocialInsurancePensionCalculationResponse
+  calculation2025: SocialInsurancePensionCalculationResponse
   calculationInput: SocialInsurancePensionCalculationInput
   queryParamString: string
   dateOfCalculationsOptions: Option<string>[]
@@ -254,6 +271,7 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
   organizationPage,
   organization,
   calculation,
+  calculation2025,
   calculationInput,
   queryParamString,
   dateOfCalculationsOptions,
@@ -264,6 +282,8 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
 
   const highlightedItems = calculation.highlightedItems ?? []
 
+  const highlightedItems2025 = calculation2025.highlightedItems ?? []
+
   const title = `${formatMessage(translationStrings.mainTitle)} ${
     dateOfCalculationsOptions.find(
       (o) => o.value === calculationInput.dateOfCalculations,
@@ -274,7 +294,16 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
     typeof calculation.groups?.length === 'number' &&
     calculation.groups.length > 0
 
-  const higlightedItemIsPresent = highlightedItems.length > 0
+  const calculation2025IsPresent =
+    typeof calculation2025.groups?.length === 'number' &&
+    calculation2025.groups.length > 0
+
+  const highlightedItemPresent = highlightedItems.length > 0
+  const highlighted2025ItemIsPresent =
+    highlightedItems2025.length > 0 &&
+    is2025PreviewActive(customPageData) &&
+    calculationInput.dateOfCalculations &&
+    new Date(calculationInput.dateOfCalculations).getFullYear() >= 2024
 
   const isTurnedOff = customPageData?.configJson?.isTurnedOff ?? false
 
@@ -282,6 +311,9 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
     linkResolver('pensioncalculator').href
   }?${queryParamString}`
 
+  const [showDisabilityChangesIn2025, setShowDisabilityChangesIn2025] =
+    useState(false)
+
   return (
     <>
       <Box printHidden>
@@ -329,7 +361,11 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
                         </Text>
                         <Box className={styles.textMaxWidth}>
                           <Text>
-                            {formatMessage(translationStrings.resultDisclaimer)}
+                            {formatMessage(
+                              highlighted2025ItemIsPresent
+                                ? translationStrings.result2025Disclaimer
+                                : translationStrings.resultDisclaimer,
+                            )}
                           </Text>
                         </Box>
                       </Stack>
@@ -343,11 +379,94 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
                           />
                         </Box>
                       </Hidden>
-                      {higlightedItemIsPresent && (
-                        <HighlightedItems
-                          customPageData={customPageData}
-                          highlightedItems={highlightedItems}
-                        />
+                      {highlightedItemPresent && (
+                        <Stack space={2}>
+                          {highlighted2025ItemIsPresent &&
+                            calculationInput.typeOfBasePension ===
+                              SocialInsurancePensionCalculationBasePensionType.Disability && (
+                              <Text as="h2" variant="h3">
+                                {formatMessage(
+                                  translationStrings.highlightedResult2025ItemHeading,
+                                )}
+                              </Text>
+                            )}
+                          <Box className={styles.highlightedItemsContainer}>
+                            <HighlightedItems
+                              customPageData={customPageData}
+                              highlightedItems={highlightedItems}
+                              topHeadingLevel={
+                                highlighted2025ItemIsPresent &&
+                                calculationInput.typeOfBasePension ===
+                                  SocialInsurancePensionCalculationBasePensionType.Disability
+                                  ? 3
+                                  : 2
+                              }
+                              topHeadingText={
+                                highlighted2025ItemIsPresent &&
+                                calculationInput.typeOfBasePension ===
+                                  SocialInsurancePensionCalculationBasePensionType.Disability
+                                  ? String(
+                                      new Date(
+                                        calculationInput.dateOfCalculations ||
+                                          new Date().toISOString(),
+                                      ).getFullYear(),
+                                    )
+                                  : ''
+                              }
+                            />
+
+                            {calculationInput.typeOfBasePension ===
+                              SocialInsurancePensionCalculationBasePensionType.Disability &&
+                              highlighted2025ItemIsPresent && (
+                                <Box className={styles.longLine} />
+                              )}
+
+                            {showDisabilityChangesIn2025 &&
+                              highlighted2025ItemIsPresent && (
+                                <HighlightedItems
+                                  customPageData={customPageData}
+                                  highlightedItems={highlightedItems2025}
+                                  topHeadingText={formatMessage(
+                                    translationStrings.after1stSeptember2025,
+                                  )}
+                                  topHeadingLevel={
+                                    calculationInput.typeOfBasePension ===
+                                    SocialInsurancePensionCalculationBasePensionType.Disability
+                                      ? 3
+                                      : 2
+                                  }
+                                />
+                              )}
+
+                            {calculationInput.typeOfBasePension ===
+                              SocialInsurancePensionCalculationBasePensionType.Disability &&
+                              !showDisabilityChangesIn2025 &&
+                              highlighted2025ItemIsPresent && (
+                                <Stack space={3}>
+                                  <Text variant="h4" as="h3">
+                                    {formatMessage(
+                                      translationStrings.after1stSeptember2025,
+                                    )}
+                                  </Text>
+                                  <Text>
+                                    {formatMessage(
+                                      translationStrings.after1stSeptember2025Description,
+                                    )}
+                                  </Text>
+                                  <Button
+                                    onClick={() => {
+                                      setShowDisabilityChangesIn2025(true)
+                                    }}
+                                    size="small"
+                                  >
+                                    {formatMessage(
+                                      translationStrings.after1stSeptember2025Calculate,
+                                    )}
+                                  </Button>
+                                </Stack>
+                              )}
+                          </Box>
+                        </Stack>
                       )}
 
                       {!calculationIsPresent && (
@@ -362,15 +481,19 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
                       {calculationIsPresent && (
                         <Accordion dividerOnTop={false}>
                           <AccordionItem
-                            startExpanded={!higlightedItemIsPresent}
+                            startExpanded={!highlightedItemPresent}
                             id="resultDetails"
                             labelVariant="h3"
                             labelUse="h3"
                             label={formatMessage(
-                              translationStrings.resultDetailsLabel,
+                              highlighted2025ItemIsPresent &&
+                                calculationInput.typeOfBasePension ===
+                                  SocialInsurancePensionCalculationBasePensionType.Disability
+                                ? translationStrings.resultDetails2024Label
+                                : translationStrings.resultDetailsLabel,
                             )}
                           >
-                            <Box paddingBottom={3}>
+                            <Box>
                               <Stack space={3}>
                                 <Box display="flex" justifyContent="flexEnd">
                                   <Hidden print>
@@ -395,6 +518,20 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
                               </Hidden>
                             </Box>
                           </AccordionItem>
+                          {calculation2025IsPresent &&
+                            showDisabilityChangesIn2025 && (
+                              <AccordionItem
+                                startExpanded={false}
+                                id="resultDetails"
+                                labelVariant="h3"
+                                labelUse="h3"
+                                label={formatMessage(
+                                  translationStrings.result2025DetailsLabel,
+                                )}
+                              >
+                                <ResultTable groups={calculation2025.groups} />
+                              </AccordionItem>
+                            )}
                         </Accordion>
                       )}
                     </Stack>
@@ -413,13 +550,36 @@ const PensionCalculatorResults: CustomScreen<PensionCalculatorResultsProps> = ({
               {title}
             </Text>
             <Box className={styles.textMaxWidth}>
-              <Text>{formatMessage(translationStrings.resultDisclaimer)}</Text>
+              <Text>
+                {highlighted2025ItemIsPresent
+                  ? formatMessage(translationStrings.result2025Disclaimer)
+                  : formatMessage(translationStrings.resultDisclaimer)}
+              </Text>
             </Box>
           </Stack>
-          {higlightedItemIsPresent && (
+          {highlightedItemPresent && (
             <HighlightedItems
               customPageData={customPageData}
               highlightedItems={highlightedItems}
+              topHeadingText={
+                highlighted2025ItemIsPresent &&
+                calculationInput.typeOfBasePension ===
+                  SocialInsurancePensionCalculationBasePensionType.Disability
+                  ? String(
+                      new Date(
+                        calculationInput.dateOfCalculations ||
+                          new Date().toISOString(),
+                      ).getFullYear(),
+                    )
+                  : ''
+              }
+              topHeadingLevel={
+                highlighted2025ItemIsPresent &&
+                calculationInput.typeOfBasePension ===
+                  SocialInsurancePensionCalculationBasePensionType.Disability
+                  ? 3
+                  : 2
+              }
             />
           )}
           <Box paddingTop={2}>
@@ -449,6 +609,9 @@ PensionCalculatorResults.getProps = async ({
     {
       data: { getPensionCalculation },
     },
+    {
+      data: { getPensionCalculation: getPensionCalculation2025 },
+    },
   ] = await Promise.all([
     apolloClient.query<Query, QueryGetOrganizationPageArgs>({
       query: GET_ORGANIZATION_PAGE_QUERY,
@@ -474,6 +637,25 @@ PensionCalculatorResults.getProps = async ({
         input: calculationInput,
       },
     }),
+    is2025PreviewActive(customPageData)
+      ? apolloClient.query<Query, QueryGetPensionCalculationArgs>({
+          query: GET_PENSION_CALCULATION,
+          variables: {
+            input: {
+              ...calculationInput,
+              startYear: 2025,
+              startMonth: 9,
+            },
+          },
+        })
+      : {
+          data: {
+            getPensionCalculation: {
+              groups: [],
+              highlightedItems: [],
+            },
+          },
+        },
   ])
 
   if (!getOrganizationPage) {
@@ -497,6 +679,7 @@ PensionCalculatorResults.getProps = async ({
     organizationPage: getOrganizationPage,
     organization: getOrganization,
     calculation: getPensionCalculation,
+    calculation2025: getPensionCalculation2025,
     calculationInput,
     dateOfCalculationsOptions: getDateOfCalculationsOptions(customPageData),
     queryParamString: queryParams.toString(),
diff --git a/apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts b/apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts
index a38afb243df4..5887cf57f7d1 100644
--- a/apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts
+++ b/apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts
@@ -428,11 +428,23 @@ export const translationStrings = defineMessages({
       'Vinsamlega hafðu í huga að reiknivélin reiknar greiðslur miðað við þær forsendur sem þú gefur upp. Líkanið er einungis til leiðbeiningar en veitir ekki bindandi upplýsingar um endanlega afgreiðslu máls eða greiðslufjárhæðir',
     description: 'Fyrirvari á niðurstöðuskjá',
   },
+  result2025Disclaimer: {
+    id: 'web.pensionCalculator:result2025Disclaimer',
+    defaultMessage:
+      'Reiknivélinni byggir á þeim forsendum sem þú gafst upp. Upphæðir eru aðeins leiðbeinandi og veita ekki bindandi upplýsingar um endanlega afgreiðslu mála eða greiðsluupphæða. Annars vegar eru niðurstöður birtar fyrir árið núna og hins vegar í nýju kerfi eftir 1. september 2025',
+    description:
+      'Fyrirvari á niðurstöðuskjá fyrir örorkulífeyrissamanburð eftir 1. september 2025',
+  },
   highlightedResultItemHeading: {
     id: 'web.pensionCalculator:highlighedResultItemHeading',
     defaultMessage: 'Samtals greiðslur frá TR eftir skatt',
     description: 'H2, Samtals greiðslur frá TR eftir skatt',
   },
+  highlightedResult2025ItemHeading: {
+    id: 'web.pensionCalculator:highlighedResult2025ItemHeading',
+    defaultMessage: 'Samtals ráðstöfunartekjur eftir skatt',
+    description: 'H2, Samtals ráðstöfunartekjur eftir skatt',
+  },
   changeAssumptions: {
     id: 'web.pensionCalculator:changeAssumptions',
     defaultMessage: 'Breyta forsendum',
@@ -443,6 +455,16 @@ export const translationStrings = defineMessages({
     defaultMessage: 'Sundurliðun',
     description: 'Sundurliðun',
   },
+  resultDetails2024Label: {
+    id: 'web.pensionCalculator:resultDetails2024Label',
+    defaultMessage: 'Sundurliðun upphæða 2024',
+    description: 'Sundurliðun upphæða 2024',
+  },
+  result2025DetailsLabel: {
+    id: 'web.pensionCalculator:result2025DetailsLabel',
+    defaultMessage: 'Sundurliðun upphæða eftir 1. september 2025',
+    description: 'Sundurliðun upphæða eftir 1. september 2025',
+  },
   print: {
     id: 'web.pensionCalculator:print',
     defaultMessage: 'Prenta',
@@ -562,6 +584,21 @@ export const translationStrings = defineMessages({
     description:
       'Lýsing fyrir ofan mánuð og ár reit varðandi hvenær notandi vill hefja töku á ellilífeyri',
   },
+  after1stSeptember2025: {
+    id: 'web.pensionCalculator:after1stSeptember2025',
+    defaultMessage: 'Eftir 1. september 2025',
+    description: 'Eftir 1. september 2025',
+  },
+  after1stSeptember2025Calculate: {
+    id: 'web.pensionCalculator:after1stSeptember2025Calculate',
+    defaultMessage: 'Reikna',
+    description: 'Reikna',
+  },
+  after1stSeptember2025Description: {
+    id: 'web.pensionCalculator:after1stSeptember2025Description',
+    defaultMessage: 'Sjá útreikning örorkulífeyris í nýju kerfi',
+    description: 'Sjá útreikning örorkulífeyris í nýju kerfi',
+  },
   birthMonthLabel: {
     id: 'web.pensionCalculator:birthMonthLabel',
     defaultMessage: 'Mánuður',
diff --git a/apps/web/screens/Organization/SocialInsuranceAdministration/utils.ts b/apps/web/screens/Organization/SocialInsuranceAdministration/utils.ts
index 81b1c8cbd719..722370dda5ab 100644
--- a/apps/web/screens/Organization/SocialInsuranceAdministration/utils.ts
+++ b/apps/web/screens/Organization/SocialInsuranceAdministration/utils.ts
@@ -149,3 +149,7 @@ export const extractSlug = (
     : (customPageData?.configJson?.englishSlug as string) ||
         'social-insurance-administration'
 }
+
+export const is2025PreviewActive = (customPageData?: CustomPage | null) => {
+  return Boolean(customPageData?.configJson?.show2025Preview)
+}