feat(app-sys): changes to app sys that were bundled with financial aid update

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

@@ -46,6 +46,8 @@ import {
   MaybeWithApplicationAndFieldAndLocale,
   DisplayField,
   FieldsRepeaterField,
+  AccordionField,
+  BankAccountField,
 } from '@island.is/application/types'
 import { Locale } from '@island.is/shared/types'
 import { Colors } from '@island.is/island-ui/theme'
@@ -1010,3 +1012,44 @@ export const buildDisplayField = (
     halfWidthOwnline,
   }
 }
+
+export const buildAccordionField = (
+  data: Omit<AccordionField, 'type' | 'component' | 'children'>,
+): AccordionField => {
+  const {
+    accordionItems,
+    title,
+    titleVariant,
+    id,
+    marginTop,
+    marginBottom,
+    condition,
+  } = data
+  return {
+    children: undefined,
+    id,
+    title,
+    titleVariant,
+    marginTop,
+    marginBottom,
+    accordionItems,
+    condition,
+    type: FieldTypes.ACCORDION,
+    component: FieldComponents.ACCORDION,
+  }
+}
+export const buildBankAccountField = (
+  data: Omit<BankAccountField, 'type' | 'component' | 'children'>,
+): BankAccountField => {
+  const { title, id, marginBottom, marginTop, titleVariant } = data
+  return {
+    children: undefined,
+    id,
+    title,
+    marginBottom,
+    marginTop,
+    titleVariant,
+    type: FieldTypes.BANK_ACCOUNT,
+    component: FieldComponents.BANK_ACCOUNT,
+  }
+}

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

@@ -318,6 +318,21 @@ export const coreDefaultFieldMessages = defineMessages({
     defaultMessage: 'Veljið skjöl til að hlaða upp',
     description: 'Default file upload button label',
   },
+  defaultBankAccountBankNumber: {
+    id: 'application.system:core.default.bankAccount.bankNumber',
+    defaultMessage: 'Bankanúmer',
+    description: 'Bank account bank number',
+  },
+  defaultBankAccountLedger: {
+    id: 'application.system:core.default.bankAccount.ledger',
+    defaultMessage: 'Höfuðbók',
+    description: 'Bank account ledger',
+  },
+  defaultBankAccountAccountNumber: {
+    id: 'application.system:core.default.bankAccount.accountNumber',
+    defaultMessage: 'Reikningsnúmer',
+    description: 'Bank account account number',
+  },
   defaultDownloadButtonTitle: {
     id: 'application.system:core.default.pdfLinkButtonField.downloadButtonTitle',
     defaultMessage: 'Hlaða niður skjali',

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

@@ -261,6 +261,8 @@ export enum FieldTypes {
   STATIC_TABLE = 'STATIC_TABLE',
   SLIDER = 'SLIDER',
   DISPLAY = 'DISPLAY',
+  ACCORDION = 'ACCORDION',
+  BANK_ACCOUNT = 'BANK_ACCOUNT',
 }
 
 export enum FieldComponents {
@@ -296,6 +298,8 @@ export enum FieldComponents {
   STATIC_TABLE = 'StaticTableFormField',
   SLIDER = 'SliderFormField',
   DISPLAY = 'DisplayFormField',
+  ACCORDION = 'AccordionFormField',
+  BANK_ACCOUNT = 'BankAccountFormField',
 }
 
 export interface CheckboxField extends InputField {
@@ -675,6 +679,28 @@ export type FieldsRepeaterField = BaseField & {
   }
 }
 
+export type AccordionItem = {
+  itemTitle: FormText
+  itemContent: FormText
+}
+export interface AccordionField extends BaseField {
+  readonly type: FieldTypes.ACCORDION
+  component: FieldComponents.ACCORDION
+  accordionItems:
+    | Array<AccordionItem>
+    | ((application: Application) => Array<AccordionItem>)
+  marginTop?: ResponsiveProp<Space>
+  marginBottom?: ResponsiveProp<Space>
+  titleVariant?: TitleVariants
+}
+export interface BankAccountField extends BaseField {
+  readonly type: FieldTypes.BANK_ACCOUNT
+  component: FieldComponents.BANK_ACCOUNT
+  marginTop?: ResponsiveProp<Space>
+  marginBottom?: ResponsiveProp<Space>
+  titleVariant?: TitleVariants
+}
+
 export interface FindVehicleField extends InputField {
   readonly type: FieldTypes.FIND_VEHICLE
   component: FieldComponents.FIND_VEHICLE
@@ -824,3 +850,5 @@ export type Field =
   | StaticTableField
   | SliderField
   | DisplayField
+  | AccordionField
+  | BankAccountField

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

@@ -79,7 +79,7 @@ export interface Form {
   children: FormChildren[]
   icon?: string
   id: string
-  logo?: React.FC<React.PropsWithChildren<unknown>>
+  logo?: FormComponent
   mode?: FormModes
   renderLastScreenBackButton?: boolean
   renderLastScreenButton?: boolean

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

@@ -0,0 +1,55 @@
+import {
+  AccordionField,
+  AccordionItem as AccordionItemType,
+  FieldBaseProps,
+} from '@island.is/application/types'
+import { Accordion, AccordionItem, Box, Text } from '@island.is/island-ui/core'
+import { useLocale } from '@island.is/localization'
+import { formatText, formatTextWithLocale } from '@island.is/application/core'
+import { Markdown } from '@island.is/shared/components'
+import { useEffect, useState } from 'react'
+
+interface Props extends FieldBaseProps {
+  field: AccordionField
+}
+export const AccordionFormField = ({ field, application }: Props) => {
+  const [items, setItems] = useState<Array<AccordionItemType>>()
+  const { formatMessage, lang: locale } = useLocale()
+  const { accordionItems, marginBottom, marginTop, title, titleVariant } = field
+  useEffect(() => {
+    if (typeof accordionItems === 'function') {
+      setItems(accordionItems(application))
+    } else {
+      setItems(accordionItems)
+    }
+  }, [accordionItems])
+  if (!items || items.length === 0) {
+    return null
+  }
+  return (
+    <Box marginTop={marginTop} marginBottom={marginBottom}>
+      {title && (
+        <Box marginBottom={1}>
+          <Text variant={titleVariant ?? 'h3'}>
+            {formatTextWithLocale(title, application, locale, formatMessage)}
+          </Text>
+        </Box>
+      )}
+      <Accordion>
+        {items.map((item, index) => {
+          return (
+            <AccordionItem
+              key={`accordion-item-${index}`}
+              id={`accordion-item-${index}`}
+              label={formatText(item.itemTitle, application, formatMessage)}
+            >
+              <Markdown>
+                {formatText(item.itemContent, application, formatMessage)}
+              </Markdown>
+            </AccordionItem>
+          )
+        })}
+      </Accordion>
+    </Box>
+  )
+}

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

@@ -0,0 +1,82 @@
+import {
+  coreDefaultFieldMessages,
+  formatText,
+  formatTextWithLocale,
+} from '@island.is/application/core'
+import { BankAccountField, FieldBaseProps } from '@island.is/application/types'
+import { Box, GridColumn, GridRow, Text } from '@island.is/island-ui/core'
+import { useLocale } from '@island.is/localization'
+import { InputController } from '@island.is/shared/form-fields'
+
+interface Props extends FieldBaseProps {
+  field: BankAccountField
+}
+export const BankAccountFormField = ({ field, application }: Props) => {
+  const { formatMessage, lang: locale } = useLocale()
+  const { marginBottom, marginTop, title, titleVariant, id } = field
+  const bankNumber = formatText(
+    coreDefaultFieldMessages.defaultBankAccountBankNumber,
+    application,
+    formatMessage,
+  )
+  const ledger = formatText(
+    coreDefaultFieldMessages.defaultBankAccountLedger,
+    application,
+    formatMessage,
+  )
+  const accountNumber = formatText(
+    coreDefaultFieldMessages.defaultBankAccountAccountNumber,
+    application,
+    formatMessage,
+  )
+  return (
+    <Box marginTop={marginTop} marginBottom={marginBottom}>
+      {title && (
+        <Box marginBottom={1}>
+          <Text variant={titleVariant ?? 'h3'}>
+            {formatTextWithLocale(title, application, locale, formatMessage)}
+          </Text>
+        </Box>
+      )}
+      <GridRow>
+        <GridColumn span={['12/12', '12/12', '12/12', '4/12']}>
+          <Box marginBottom={[2, 2, 4]}>
+            <InputController
+              id={`${id}.bankNumber`}
+              defaultValue=""
+              label={bankNumber}
+              placeholder="0000"
+              format="####"
+              backgroundColor="blue"
+              autoFocus
+            />
+          </Box>
+        </GridColumn>
+        <GridColumn span={['12/12', '12/12', '12/12', '2/12']}>
+          <Box marginBottom={[2, 2, 4]}>
+            <InputController
+              id={`${id}.ledger`}
+              defaultValue=""
+              label={ledger}
+              placeholder="00"
+              format="##"
+              backgroundColor="blue"
+            />
+          </Box>
+        </GridColumn>
+        <GridColumn span={['12/12', '12/12', '12/12', '6/12']}>
+          <Box marginBottom={[2, 2, 4]}>
+            <InputController
+              id={`${id}.accountNumber`}
+              defaultValue=""
+              label={accountNumber}
+              placeholder="000000"
+              format="######"
+              backgroundColor="blue"
+            />
+          </Box>
+        </GridColumn>
+      </GridRow>
+    </Box>
+  )
+}

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

@@ -30,3 +30,5 @@ export { VehicleRadioFormField } from './VehicleRadioFormField/VehicleRadioFormF
 export { StaticTableFormField } from './StaticTableFormField/StaticTableFormField'
 export { SliderFormField } from './SliderFormField/SliderFormField'
 export { DisplayFormField } from './DisplayFormField/DisplayFormField'
+export { AccordionFormField } from './AccordionFormField/AccordionFormField'
+export { BankAccountFormField } from './BankAccountFormField/BankAccountFormField'

libs/application/ui-shell/src/lib/FormShell.tsx

@@ -25,6 +25,7 @@ import {
 } from '../reducer/ApplicationFormReducer'
 import { ActionTypes } from '../reducer/ReducerTypes'
 import * as styles from './FormShell.css'
+import { getFormComponent } from '../utils'
 
 export const FormShell: FC<
   React.PropsWithChildren<{
@@ -66,7 +67,7 @@ export const FormShell: FC<
   } = state.form
   const showProgressTag = mode !== FormModes.DRAFT
   const currentScreen = screens[activeScreen]
-  const FormLogo = form.logo
+  const FormLogo = getFormComponent(form.logo, storedApplication)
 
   const getDraftSectionCurrentScreen = (): number | undefined => {
     const currentDraftScreenSection = sections.find(

libs/application/ui-shell/src/utils.ts

@@ -1,8 +1,10 @@
 import { getValueViaPath } from '@island.is/application/core'
 import {
+  Application,
   DataProviderItem,
   ExternalData,
   FieldTypes,
+  FormComponent,
   FormItemTypes,
   FormValue,
   RecordObject,
@@ -154,3 +156,34 @@ export const parseMessage = (message?: string) => {
 
   return message
 }
+
+function isFunctionalComponent(
+  component: FormComponent | undefined,
+): component is React.FC<React.PropsWithChildren<unknown>> {
+  if (!component) return false
+  return (
+    typeof component === 'function' &&
+    !(component.prototype && component.prototype.isReactComponent) &&
+    component.length === 0
+  )
+}
+function isFunctionReturningComponent(
+  component: FormComponent | undefined,
+): component is (
+  application: Application,
+) => React.FC<React.PropsWithChildren<unknown>> | null | undefined {
+  if (!component) return false
+  return typeof component === 'function' && component.length === 1
+}
+export function getFormComponent(
+  component: FormComponent | undefined,
+  application: Application,
+) {
+  if (isFunctionalComponent(component)) {
+    return component
+  }
+  if (isFunctionReturningComponent(component)) {
+    return component(application)
+  }
+  return null
+}