Skip to content

Commit

Permalink
feat(app-sys): changes to app sys that were bundled with financial ai…
Browse files Browse the repository at this point in the history
…d update (#17210)

* feat: changes to app sys that were bundled with financial aid update

* chore: add in line break

* chore: add in line break

* chore: undo changes to reference-template

* chore: remove unused import

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
jonnigs and kodiakhq[bot] authored Dec 13, 2024
1 parent 5a13f96 commit 444cedf
Show file tree
Hide file tree
Showing 9 changed files with 261 additions and 2 deletions.
43 changes: 43 additions & 0 deletions libs/application/core/src/lib/fieldBuilders.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
}
}
15 changes: 15 additions & 0 deletions libs/application/core/src/lib/messages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
28 changes: 28 additions & 0 deletions libs/application/types/src/lib/Fields.ts
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,8 @@ export enum FieldTypes {
STATIC_TABLE = 'STATIC_TABLE',
SLIDER = 'SLIDER',
DISPLAY = 'DISPLAY',
ACCORDION = 'ACCORDION',
BANK_ACCOUNT = 'BANK_ACCOUNT',
}

export enum FieldComponents {
Expand Down Expand Up @@ -296,6 +298,8 @@ export enum FieldComponents {
STATIC_TABLE = 'StaticTableFormField',
SLIDER = 'SliderFormField',
DISPLAY = 'DisplayFormField',
ACCORDION = 'AccordionFormField',
BANK_ACCOUNT = 'BankAccountFormField',
}

export interface CheckboxField extends InputField {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -824,3 +850,5 @@ export type Field =
| StaticTableField
| SliderField
| DisplayField
| AccordionField
| BankAccountField
2 changes: 1 addition & 1 deletion libs/application/types/src/lib/Form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
)
}
Original file line number Diff line number Diff line change
@@ -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>
)
}
2 changes: 2 additions & 0 deletions libs/application/ui-fields/src/lib/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
3 changes: 2 additions & 1 deletion libs/application/ui-shell/src/lib/FormShell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
} from '../reducer/ApplicationFormReducer'
import { ActionTypes } from '../reducer/ReducerTypes'
import * as styles from './FormShell.css'
import { getFormComponent } from '../utils'
import { canGoBack } from '../reducer/reducerUtils'

export const FormShell: FC<
Expand Down Expand Up @@ -67,7 +68,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(
Expand Down
33 changes: 33 additions & 0 deletions libs/application/ui-shell/src/utils.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { getValueViaPath } from '@island.is/application/core'
import {
Application,
DataProviderItem,
ExternalData,
FieldTypes,
FormComponent,
FormItemTypes,
FormValue,
RecordObject,
Expand Down Expand Up @@ -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
}

0 comments on commit 444cedf

Please sign in to comment.