feat(income-plan): Use new temporary income plan calculation data (#1…

…6933)

* feat(income-plan): Use new temporary income plan calculation data

* defaultValue to current month

* set conditional for month selector

* Add paidOut month

* fallback for month index

* Prevent unnecessary re-render

---------

Co-authored-by: hfhelgason <hfhelgason@deloitte.is>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

libs/application/templates/social-insurance-administration/income-plan/src/fields/PrintScreen/index.tsx

@@ -0,0 +1,18 @@
+import { Box, Button } from '@island.is/island-ui/core'
+
+export const PrintScreen = () => {
+  return (
+    <Box display="flex" justifyContent="flexEnd">
+      <Button
+        variant="utility"
+        icon="print"
+        onClick={(e) => {
+          e.preventDefault()
+          window.print()
+        }}
+      />
+    </Box>
+  )
+}
+
+export default PrintScreen

libs/application/templates/social-insurance-administration/income-plan/src/fields/TemporaryCalculationTable/index.tsx

@@ -6,28 +6,38 @@ import { formatCurrency } from '@island.is/application/ui-components'
 import {
   AlertMessage,
   Box,
-  Button,
   SkeletonLoader,
   Stack,
   Table as T,
 } from '@island.is/island-ui/core'
 import { useLocale } from '@island.is/localization'
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 import { TemporaryCalculationQuery } from '../../graphql/queries'
 import { INCOME, RatioType, YES } from '../../lib/constants'
 import {
   getApplicationAnswers,
   getApplicationExternalData,
 } from '../../lib/incomePlanUtils'
 import { incomePlanFormMessage } from '../../lib/messages'
-import { SocialInsuranceTemporaryCalculationGroup } from '../../types/schema'
+import { SocialInsuranceTemporaryCalculation } from '../../types/schema'
+import { MONTHS } from '@island.is/application/templates/social-insurance-administration-core/lib/constants'
+import { useFormContext } from 'react-hook-form'
 
 export const TemporaryCalculationTable: FC<
   React.PropsWithChildren<FieldBaseProps>
 > = ({ application }) => {
   const { formatMessage } = useLocale()
 
   const { incomePlan } = getApplicationAnswers(application.answers)
+  const { watch, setValue } = useFormContext()
+  useEffect(() => {
+    setValue('temporaryCalculation.show', false)
+  }, [setValue])
+  const temporaryCalculationMonth = watch('temporaryCalculation.month')
+  const monthIndex = Math.max(
+    0,
+    MONTHS.findIndex((month) => month.value === temporaryCalculationMonth),
+  )
   const { categorizedIncomeTypes, incomePlanConditions } =
     getApplicationExternalData(application.externalData)
 
@@ -81,7 +91,9 @@ export const TemporaryCalculationTable: FC<
     }),
   }
 
-  const { data, loading, error } = useQuery(TemporaryCalculationQuery, {
+  const { data, loading, error } = useQuery<{
+    getTemporaryCalculations: SocialInsuranceTemporaryCalculation
+  }>(TemporaryCalculationQuery, {
     variables: {
       input,
     },
@@ -146,41 +158,42 @@ export const TemporaryCalculationTable: FC<
       </Box>
     )
   }
+  setValue('temporaryCalculation.show', true)
+
+  const paidOutMonths = data?.getTemporaryCalculations?.groups
+    ?.find(({ group }) => group === 'Frádráttur')
+    ?.rows?.find(({ name }) => name === 'Útborgað')?.months
+  const paidOutSelectedMonth = paidOutMonths?.[monthIndex]?.amount
 
   return (
     <Box>
-      <Box display="flex" justifyContent="flexEnd">
-        <Button
-          variant="utility"
-          icon="print"
-          onClick={(e) => {
-            e.preventDefault()
-            window.print()
-          }}
-        />
-      </Box>
       <Box marginY={3}>
         <Stack space={3}>
           <T.Table>
             <T.Head>
               <T.Row>
                 <T.HeadData width="50%">
-                  {formatMessage(incomePlanFormMessage.info.tableHeaderOne)}
+                  {formatMessage(
+                    incomePlanFormMessage.info.tableHeaderPaymentTypes,
+                  )}
                 </T.HeadData>
                 <T.HeadData width="25%" align="right" box={{ paddingRight: 0 }}>
-                  {formatMessage(incomePlanFormMessage.info.tableHeaderTwo)}
+                  {formatMessage(
+                    MONTHS.find(
+                      ({ value }) => value === temporaryCalculationMonth,
+                    )?.label ?? MONTHS[0].label,
+                  )}
                 </T.HeadData>
                 <T.HeadData width="25%" align="right">
-                  {formatMessage(incomePlanFormMessage.info.tableHeaderThree)}
+                  {formatMessage(incomePlanFormMessage.info.tableHeaderTotal, {
+                    year: incomePlanConditions.incomePlanYear,
+                  })}
                 </T.HeadData>
               </T.Row>
             </T.Head>
           </T.Table>
-          {data?.getTemporaryCalculations?.groups.map(
-            (
-              group: SocialInsuranceTemporaryCalculationGroup,
-              index: number,
-            ) => (
+          {data?.getTemporaryCalculations?.groups?.map(
+            (group, index: number) => (
               <T.Table key={index}>
                 <T.Head>
                   <T.Row>
@@ -190,27 +203,31 @@ export const TemporaryCalculationTable: FC<
                       align="right"
                       box={{ paddingRight: 0 }}
                     >
-                      {group.total &&
-                        formatCurrency(Math.round(group.total / 12).toString())}
+                      {formatCurrency(
+                        String(group.monthTotals?.[monthIndex]?.amount),
+                      )}
                     </T.HeadData>
                     <T.HeadData width="25%" align="right">
                       {group.total && formatCurrency(group.total.toString())}
                     </T.HeadData>
                   </T.Row>
                 </T.Head>
                 <T.Body>
-                  {group?.rows?.map((row, rowIndex) => (
-                    <T.Row key={`row-${rowIndex}`}>
-                      <T.Data>{row.name}</T.Data>
-                      <T.Data align="right" box={{ paddingRight: 0 }}>
-                        {row.total &&
-                          formatCurrency(Math.round(row.total / 12).toString())}
-                      </T.Data>
-                      <T.Data align="right">
-                        {row.total && formatCurrency(row.total.toString())}
-                      </T.Data>
-                    </T.Row>
-                  ))}
+                  {group?.rows
+                    ?.filter(({ name }) => name !== 'Útborgað')
+                    .map((row, rowIndex) => (
+                      <T.Row key={`row-${rowIndex}`}>
+                        <T.Data>{row.name}</T.Data>
+                        <T.Data align="right" box={{ paddingRight: 0 }}>
+                          {formatCurrency(
+                            String(row.months?.[monthIndex]?.amount),
+                          )}
+                        </T.Data>
+                        <T.Data align="right">
+                          {row.total && formatCurrency(row.total.toString())}
+                        </T.Data>
+                      </T.Row>
+                    ))}
                 </T.Body>
               </T.Table>
             ),
@@ -222,11 +239,7 @@ export const TemporaryCalculationTable: FC<
                   {formatMessage(incomePlanFormMessage.info.paidTableHeader)}
                 </T.HeadData>
                 <T.HeadData width="25%" align="right" box={{ paddingRight: 0 }}>
-                  {formatCurrency(
-                    Math.round(
-                      data?.getTemporaryCalculations?.paidOut / 12,
-                    ).toString(),
-                  )}
+                  {formatCurrency(String(paidOutSelectedMonth))}
                 </T.HeadData>
                 <T.HeadData width="25%" align="right">
                   {formatCurrency(

libs/application/templates/social-insurance-administration/income-plan/src/fields/index.ts

@@ -1,2 +1,3 @@
 export { Review } from './Review'
 export { TemporaryCalculationTable } from './TemporaryCalculationTable'
+export { PrintScreen } from './PrintScreen'

libs/application/templates/social-insurance-administration/income-plan/src/forms/IncomePlanForm.ts

@@ -4,6 +4,7 @@ import {
   buildForm,
   buildMultiField,
   buildSection,
+  buildSelectField,
   buildSubSection,
   buildSubmitField,
   buildTableRepeaterField,
@@ -32,11 +33,13 @@ import {
   YES,
 } from '../lib/constants'
 import {
+  getApplicationAnswers,
   getApplicationExternalData,
   getCategoriesOptions,
   getTypesOptions,
 } from '../lib/incomePlanUtils'
 import { incomePlanFormMessage } from '../lib/messages'
+import { MONTHS } from '@island.is/application/templates/social-insurance-administration-core/lib/constants'
 
 export const IncomePlanForm: Form = buildForm({
   id: 'IncomePlanDraft',
@@ -625,6 +628,21 @@ export const IncomePlanForm: Form = buildForm({
           title: incomePlanFormMessage.info.temporaryCalculationTitle,
           description: incomePlanFormMessage.info.tableDescription,
           children: [
+            buildCustomField({
+              title: '',
+              id: 'overviewPrint',
+              doesNotRequireAnswer: true,
+              component: 'PrintScreen',
+            }),
+            buildSelectField({
+              id: 'temporaryCalculation.month',
+              title: socialInsuranceAdministrationMessage.period.month,
+              width: 'half',
+              options: MONTHS,
+              defaultValue: MONTHS[new Date().getMonth()].value,
+              condition: (answers) =>
+                getApplicationAnswers(answers).temporaryCalculationShow,
+            }),
             buildCustomField({
               id: 'temporaryCalculationTable',
               title: '',

libs/application/templates/social-insurance-administration/income-plan/src/lib/incomePlanUtils.ts

@@ -80,7 +80,22 @@ export const getApplicationAnswers = (answers: Application['answers']) => {
     [],
   ) as IncomePlanRow[]
 
-  return { incomePlan }
+  const temporaryCalculationMonth = getValueViaPath(
+    answers,
+    'temporaryCalculation.month',
+  ) as string
+
+  const temporaryCalculationShow = getValueViaPath(
+    answers,
+    'temporaryCalculation.show',
+    false,
+  ) as boolean
+
+  return {
+    incomePlan,
+    temporaryCalculationMonth,
+    temporaryCalculationShow,
+  }
 }
 
 export const getOneInstanceOfCategory = (

libs/application/templates/social-insurance-administration/income-plan/src/lib/messages.ts

@@ -98,20 +98,15 @@ export const incomePlanFormMessage: MessageDir = {
       defaultMessage: 'Bráðabirgðaútreikningur',
       description: 'Temporary calculation',
     },
-    tableHeaderOne: {
-      id: 'ip.application:table.header.one',
+    tableHeaderPaymentTypes: {
+      id: 'ip.application:table.header.payment.type',
       defaultMessage: 'Greiðslutegundir',
       description: 'Payment types',
     },
-    tableHeaderTwo: {
-      id: 'ip.application:table.header.two',
-      defaultMessage: 'Samtals á mánuði',
-      description: 'Montly total',
-    },
-    tableHeaderThree: {
-      id: 'ip.application:table.header.three',
-      defaultMessage: 'Samtals á ári',
-      description: 'Annual total',
+    tableHeaderTotal: {
+      id: 'ip.application:table.header.total',
+      defaultMessage: 'Samtals {year}',
+      description: 'Total {year}',
     },
     tableDescription: {
       id: 'ip.application:table.description',