feat(app-sys): Shared display field (#17007)

* feat: start of display field

* feat: display field

* fix: revert changes to another template

* feat: simplify useEffect logic and undo example form changes

* chore: undo example form changes

---------

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

libs/application/core/src/lib/fieldBuilders.ts

@@ -46,6 +46,7 @@ import {
   SliderField,
   MaybeWithApplication,
   MaybeWithApplicationAndFieldAndLocale,
+  DisplayField,
   FieldsRepeaterField,
 } from '@island.is/application/types'
 import { Locale } from '@island.is/shared/types'
@@ -1009,3 +1010,34 @@ export const buildSliderField = (
     saveAsString,
   }
 }
+
+export const buildDisplayField = (
+  data: Omit<DisplayField, 'type' | 'component' | 'children'>,
+): DisplayField => {
+  const {
+    title,
+    titleVariant,
+    label,
+    variant,
+    marginTop,
+    marginBottom,
+    value,
+    suffix,
+    rightAlign,
+  } = data
+  return {
+    ...extractCommonFields(data),
+    title,
+    titleVariant,
+    label,
+    variant,
+    marginTop,
+    marginBottom,
+    type: FieldTypes.DISPLAY,
+    component: FieldComponents.DISPLAY,
+    children: undefined,
+    value,
+    suffix,
+    rightAlign,
+  }
+}

libs/application/types/src/lib/Fields.ts

@@ -16,7 +16,7 @@ import {
   StaticText,
 } from './Form'
 import { ApolloClient } from '@apollo/client'
-import { Application } from './Application'
+import { Application, FormValue } from './Application'
 import { CallToAction } from './StateMachine'
 import { Colors, theme } from '@island.is/island-ui/theme'
 import { Condition } from './Condition'
@@ -262,6 +262,7 @@ export enum FieldTypes {
   ACCORDION = 'ACCORDION',
   BANK_ACCOUNT = 'BANK_ACCOUNT',
   SLIDER = 'SLIDER',
+  DISPLAY = 'DISPLAY',
 }
 
 export enum FieldComponents {
@@ -298,6 +299,7 @@ export enum FieldComponents {
   ACCORDION = 'AccordionFormField',
   BANK_ACCOUNT = 'BankAccountFormField',
   SLIDER = 'SliderFormField',
+  DISPLAY = 'DisplayFormField',
 }
 
 export interface CheckboxField extends InputField {
@@ -796,6 +798,19 @@ export interface SliderField extends BaseField {
   saveAsString?: boolean
 }
 
+export interface DisplayField extends BaseField {
+  readonly type: FieldTypes.DISPLAY
+  component: FieldComponents.DISPLAY
+  marginTop?: ResponsiveProp<Space>
+  marginBottom?: ResponsiveProp<Space>
+  titleVariant?: TitleVariants
+  suffix?: MessageDescriptor | string
+  rightAlign?: boolean
+  variant?: TextFieldVariant
+  label?: MessageDescriptor | string
+  value: (answers: FormValue) => string
+}
+
 export type Field =
   | CheckboxField
   | CustomField
@@ -832,3 +847,4 @@ export type Field =
   | AccordionField
   | BankAccountField
   | SliderField
+  | DisplayField

libs/application/ui-fields/src/lib/DisplayFormField/DisplayFormField.tsx

@@ -0,0 +1,80 @@
+import { formatTextWithLocale } from '@island.is/application/core'
+import { DisplayField, FieldBaseProps } from '@island.is/application/types'
+import { Box, Text } from '@island.is/island-ui/core'
+import { useLocale } from '@island.is/localization'
+import { InputController } from '@island.is/shared/form-fields'
+import { useEffect, useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { Locale } from '@island.is/shared/types'
+
+interface Props extends FieldBaseProps {
+  field: DisplayField
+}
+
+export const DisplayFormField = ({ field, application }: Props) => {
+  const {
+    value,
+    id,
+    title,
+    titleVariant = 'h4',
+    label,
+    variant,
+    suffix,
+    rightAlign = false,
+  } = field
+  const { watch, setValue } = useFormContext()
+  const allValues = watch()
+  const { formatMessage, lang: locale } = useLocale()
+  const [displayValue, setDisplayValue] = useState(allValues[id])
+
+  useEffect(() => {
+    const newDisplayValue = value(allValues)
+    setDisplayValue(newDisplayValue)
+    setValue(id, newDisplayValue)
+  }, [allValues])
+
+  return (
+    <Box paddingY={3}>
+      {title ? (
+        <Text variant={titleVariant} paddingBottom={1}>
+          {formatTextWithLocale(
+            title,
+            application,
+            locale as Locale,
+            formatMessage,
+          )}
+        </Text>
+      ) : null}
+
+      <InputController
+        id={id}
+        name={id}
+        label={
+          label &&
+          formatTextWithLocale(
+            label,
+            application,
+            locale as Locale,
+            formatMessage,
+          )
+        }
+        rightAlign={rightAlign}
+        readOnly
+        backgroundColor="blue"
+        currency={variant === 'currency'}
+        suffix={
+          suffix &&
+          formatTextWithLocale(
+            suffix,
+            application,
+            locale as Locale,
+            formatMessage,
+          )
+        }
+        type={
+          variant === 'currency' || variant === 'textarea' ? undefined : variant
+        }
+      />
+    </Box>
+  )
+}

libs/application/ui-fields/src/lib/index.ts

@@ -31,3 +31,4 @@ export { StaticTableFormField } from './StaticTableFormField/StaticTableFormFiel
 export { AccordionFormField } from './AccordionFormField/AccordionFormField'
 export { BankAccountFormField } from './BankAccountFormField/BankAccountFormField'
 export { SliderFormField } from './SliderFormField/SliderFormField'
+export { DisplayFormField } from './DisplayFormField/DisplayFormField'