From fbece809992fcb01f82fcf9aa5e114c68b5b9432 Mon Sep 17 00:00:00 2001
From: Veronika Sif <veronikasif@hotmail.com>
Date: Thu, 15 Aug 2024 14:11:02 +0000
Subject: [PATCH] [TS-839] Calculate income per year

---
 .../income-plan/src/forms/IncomePlanForm.ts   |  37 +++
 libs/application/types/src/lib/Fields.ts      |  14 +-
 .../TableRepeaterFormField.tsx                | 261 ++++++++++--------
 3 files changed, 198 insertions(+), 114 deletions(-)

diff --git a/libs/application/templates/social-insurance-administration/income-plan/src/forms/IncomePlanForm.ts b/libs/application/templates/social-insurance-administration/income-plan/src/forms/IncomePlanForm.ts
index 143092113d34..d4e66c75598b 100644
--- a/libs/application/templates/social-insurance-administration/income-plan/src/forms/IncomePlanForm.ts
+++ b/libs/application/templates/social-insurance-administration/income-plan/src/forms/IncomePlanForm.ts
@@ -172,6 +172,43 @@ export const IncomePlanForm: Form = buildForm({
                   readonly: (_, activeField) => {
                     return activeField?.income === RatioType.MONTHLY
                   },
+                  updateValueObj: {
+                    valueModifier: (_, activeField) => {
+                      if (
+                        activeField?.income === RatioType.MONTHLY &&
+                        activeField?.currency === ISK
+                      ) {
+                        return (
+                          Number(activeField?.equalIncomePerMonth) * 12
+                        ).toString()
+                      }
+
+                      if (
+                        activeField?.income === RatioType.MONTHLY &&
+                        activeField?.currency !== ISK
+                      ) {
+                        return (
+                          Number(activeField?.equalForeignIncomePerMonth) * 12
+                        ).toString()
+                      }
+                      return undefined
+                    },
+                    watchValue: (_, activeField) => {
+                      if (
+                        activeField?.income === RatioType.MONTHLY &&
+                        activeField?.currency === ISK
+                      ) {
+                        return 'equalIncomePerMonth'
+                      }
+                      if (
+                        activeField?.income === RatioType.MONTHLY &&
+                        activeField?.currency !== ISK
+                      ) {
+                        return 'equalForeignIncomePerMonth'
+                      }
+                      return undefined
+                    },
+                  },
                   suffix: '',
                   condition: (_, activeField) => {
                     return (
diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts
index 0571cf036565..ebca208d90cc 100644
--- a/libs/application/types/src/lib/Fields.ts
+++ b/libs/application/types/src/lib/Fields.ts
@@ -68,7 +68,7 @@ type TableRepeaterOptions =
   | RepeaterOption[]
   | ((
       application: Application,
-      activeField: Record<string, string>,
+      activeField?: Record<string, string>,
     ) => RepeaterOption[] | [])
 
 export type TableRepeaterItem = {
@@ -94,6 +94,18 @@ export type TableRepeaterItem = {
         application: Application,
         activeField?: Record<string, string>,
       ) => boolean)
+  updateValueObj?: {
+    valueModifier: (
+      application: Application,
+      activeField?: Record<string, string>,
+    ) => unknown
+    watchValue:
+      | string
+      | ((
+          application: Application,
+          activeField?: Record<string, string>,
+        ) => string | undefined)
+  }
 } & (
   | {
       component: 'input'
diff --git a/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx b/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx
index 225e3acdac89..dc141d9766e4 100644
--- a/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx
+++ b/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx
@@ -1,19 +1,22 @@
 import { coreMessages, formatText } from '@island.is/application/core'
 import {
+  Application,
   FieldBaseProps,
   TableRepeaterField,
+  TableRepeaterItem,
 } from '@island.is/application/types'
+import { NationalIdWithName } from '@island.is/application/ui-components'
 import {
-  Stack,
+  AlertMessage,
   Box,
   Button,
+  GridColumn,
+  GridRow,
+  Icon,
+  Stack,
   Table as T,
   Text,
-  Icon,
   Tooltip,
-  GridRow,
-  GridColumn,
-  AlertMessage,
 } from '@island.is/island-ui/core'
 import { useLocale } from '@island.is/localization'
 import {
@@ -24,9 +27,8 @@ import {
   RadioController,
   SelectController,
 } from '@island.is/shared/form-fields'
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useFieldArray, useFormContext, useWatch } from 'react-hook-form'
-import { NationalIdWithName } from '@island.is/application/ui-components'
 import { handleCustomMappedValues } from './utils'
 
 interface Props extends FieldBaseProps {
@@ -117,16 +119,6 @@ export const TableRepeaterFormField: FC<Props> = ({
     setActiveIndex(index)
   }
 
-  const getFieldError = (id: string) => {
-    /**
-     * Errors that occur in a field-array have incorrect typing
-     * This hack is needed to get the correct type
-     */
-    const errorList = error as unknown as Record<string, string>[] | undefined
-    const errors = errorList?.[activeIndex]
-    return errors?.[id]
-  }
-
   const formatTableValue = (key: string, item: Record<string, string>) => {
     const formatFn = table?.format?.[key]
     const formatted = formatFn ? formatFn(item[key]) : item[key]
@@ -242,102 +234,17 @@ export const TableRepeaterFormField: FC<Props> = ({
                 </Text>
               )}
               <GridRow rowGap={[2, 2, 2, 3]}>
-                {items.map((item) => {
-                  const {
-                    component,
-                    id: itemId,
-                    backgroundColor = 'blue',
-                    label = '',
-                    placeholder = '',
-                    options,
-                    width = 'full',
-                    condition,
-                    readonly = false,
-                    ...props
-                  } = item
-                  const isHalfColumn = component !== 'radio' && width === 'half'
-                  const isThirdColumn =
-                    component !== 'radio' && width === 'third'
-                  const span = isHalfColumn
-                    ? '1/2'
-                    : isThirdColumn
-                    ? '1/3'
-                    : '1/1'
-                  const Component = componentMapper[component]
-                  const id = `${data.id}[${activeIndex}].${itemId}`
-                  const activeValues =
-                    activeIndex >= 0 && values ? values[activeIndex] : undefined
-
-                  let translatedOptions: any = []
-                  if (typeof options === 'function') {
-                    translatedOptions = options(application, activeValues)
-                  } else {
-                    translatedOptions = options?.map((option) => ({
-                      ...option,
-                      label: formatText(
-                        option.label,
-                        application,
-                        formatMessage,
-                      ),
-                      ...(option.tooltip && {
-                        tooltip: formatText(
-                          option.tooltip,
-                          application,
-                          formatMessage,
-                        ),
-                      }),
-                    }))
-                  }
-
-                  let Readonly: boolean | undefined
-                  if (typeof readonly === 'function') {
-                    Readonly = readonly(application, activeValues)
-                  } else {
-                    Readonly = readonly
-                  }
-
-                  if (condition && !condition(application, activeValues)) {
-                    return null
-                  }
-
-                  return (
-                    <GridColumn key={id} span={['1/1', '1/1', '1/1', span]}>
-                      {component === 'radio' && label && (
-                        <Text
-                          variant="h4"
-                          as="h4"
-                          id={id + 'title'}
-                          marginBottom={3}
-                        >
-                          {formatText(label, application, formatMessage)}
-                        </Text>
-                      )}
-                      <Component
-                        id={id}
-                        name={id}
-                        label={formatText(label, application, formatMessage)}
-                        options={translatedOptions}
-                        placeholder={formatText(
-                          placeholder,
-                          application,
-                          formatMessage,
-                        )}
-                        split={width === 'half' ? '1/2' : '1/1'}
-                        error={getFieldError(itemId)}
-                        control={methods.control}
-                        readOnly={Readonly}
-                        backgroundColor={backgroundColor}
-                        onChange={() => {
-                          if (error) {
-                            methods.clearErrors(id)
-                          }
-                        }}
-                        application={application}
-                        {...props}
-                      />
-                    </GridColumn>
-                  )
-                })}
+                {items.map((item) => (
+                  <Item
+                    key={`${data.id}[${activeIndex}].${item.id}`}
+                    application={application}
+                    error={error}
+                    item={item}
+                    dataId={data.id}
+                    activeIndex={activeIndex}
+                    values={values}
+                  />
+                ))}
               </GridRow>
               <Box display="flex" justifyContent="flexEnd">
                 <Button
@@ -372,3 +279,131 @@ export const TableRepeaterFormField: FC<Props> = ({
     </Box>
   )
 }
+
+interface ItemFieldProps {
+  application: Application
+  error?: string
+  item: TableRepeaterItem & { id: string }
+  dataId: string
+  activeIndex: number
+  values: Array<Record<string, string>>
+}
+
+const Item: FC<ItemFieldProps> = ({
+  application,
+  error,
+  item,
+  dataId,
+  activeIndex,
+  values,
+}) => {
+  const { formatMessage } = useLocale()
+  const { setValue, control, clearErrors } = useFormContext()
+
+  const {
+    component,
+    id: itemId,
+    backgroundColor = 'blue',
+    label = '',
+    placeholder = '',
+    options,
+    width = 'full',
+    condition,
+    readonly = false,
+    updateValueObj,
+    ...props
+  } = item
+  const isHalfColumn = component !== 'radio' && width === 'half'
+  const isThirdColumn = component !== 'radio' && width === 'third'
+  const span = isHalfColumn ? '1/2' : isThirdColumn ? '1/3' : '1/1'
+  const Component = componentMapper[component]
+  const id = `${dataId}[${activeIndex}].${itemId}`
+  const activeValues =
+    activeIndex >= 0 && values ? values[activeIndex] : undefined
+
+  let watchedValue: string | undefined
+  if (updateValueObj) {
+    const watchedValueId =
+      typeof updateValueObj.watchValue === 'function'
+        ? updateValueObj.watchValue(application, activeValues)
+        : updateValueObj.watchValue
+
+    if (watchedValueId) {
+      watchedValue = activeValues?.[`${watchedValueId}`]
+    }
+  }
+
+  useEffect(() => {
+    if (updateValueObj && watchedValue) {
+      const finalValue = updateValueObj.valueModifier(application, activeValues)
+
+      if (finalValue) {
+        setValue(id, finalValue)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchedValue])
+
+  const getFieldError = (id: string) => {
+    /**
+     * Errors that occur in a field-array have incorrect typing
+     * This hack is needed to get the correct type
+     */
+    const errorList = error as unknown as Record<string, string>[] | undefined
+    const errors = errorList?.[activeIndex]
+    return errors?.[id]
+  }
+
+  let translatedOptions: any = []
+  if (typeof options === 'function') {
+    translatedOptions = options(application, activeValues)
+  } else {
+    translatedOptions = options?.map((option) => ({
+      ...option,
+      label: formatText(option.label, application, formatMessage),
+      ...(option.tooltip && {
+        tooltip: formatText(option.tooltip, application, formatMessage),
+      }),
+    }))
+  }
+
+  let Readonly: boolean | undefined
+  if (typeof readonly === 'function') {
+    Readonly = readonly(application, activeValues)
+  } else {
+    Readonly = readonly
+  }
+
+  if (condition && !condition(application, activeValues)) {
+    return null
+  }
+
+  return (
+    <GridColumn span={['1/1', '1/1', '1/1', span]}>
+      {component === 'radio' && label && (
+        <Text variant="h4" as="h4" id={id + 'title'} marginBottom={3}>
+          {formatText(label, application, formatMessage)}
+        </Text>
+      )}
+      <Component
+        id={id}
+        name={id}
+        label={formatText(label, application, formatMessage)}
+        options={translatedOptions}
+        placeholder={formatText(placeholder, application, formatMessage)}
+        split={width === 'half' ? '1/2' : '1/1'}
+        error={getFieldError(itemId)}
+        control={control}
+        readOnly={Readonly}
+        backgroundColor={backgroundColor}
+        onChange={() => {
+          if (error) {
+            clearErrors(id)
+          }
+        }}
+        application={application}
+        {...props}
+      />
+    </GridColumn>
+  )
+}