diff --git a/libs/application/core/src/lib/fieldBuilders.ts b/libs/application/core/src/lib/fieldBuilders.ts index a1035cbc3b55..935a3062aab7 100644 --- a/libs/application/core/src/lib/fieldBuilders.ts +++ b/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 => { + 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 => { + const { title, id, marginBottom, marginTop, titleVariant } = data + return { + children: undefined, + id, + title, + marginBottom, + marginTop, + titleVariant, + type: FieldTypes.BANK_ACCOUNT, + component: FieldComponents.BANK_ACCOUNT, + } +} diff --git a/libs/application/core/src/lib/messages.ts b/libs/application/core/src/lib/messages.ts index aaaafd03dee2..65cb2f5cdd67 100644 --- a/libs/application/core/src/lib/messages.ts +++ b/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', diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts index f89d41400fcf..fafd82964b7c 100644 --- a/libs/application/types/src/lib/Fields.ts +++ b/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 + | ((application: Application) => Array) + marginTop?: ResponsiveProp + marginBottom?: ResponsiveProp + titleVariant?: TitleVariants +} +export interface BankAccountField extends BaseField { + readonly type: FieldTypes.BANK_ACCOUNT + component: FieldComponents.BANK_ACCOUNT + marginTop?: ResponsiveProp + marginBottom?: ResponsiveProp + 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 diff --git a/libs/application/types/src/lib/Form.ts b/libs/application/types/src/lib/Form.ts index 379ccfa0cce4..e3656d70d405 100644 --- a/libs/application/types/src/lib/Form.ts +++ b/libs/application/types/src/lib/Form.ts @@ -79,7 +79,7 @@ export interface Form { children: FormChildren[] icon?: string id: string - logo?: React.FC> + logo?: FormComponent mode?: FormModes renderLastScreenBackButton?: boolean renderLastScreenButton?: boolean diff --git a/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx b/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx new file mode 100644 index 000000000000..fe29ba01be9d --- /dev/null +++ b/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>() + 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 ( + + {title && ( + + + {formatTextWithLocale(title, application, locale, formatMessage)} + + + )} + + {items.map((item, index) => { + return ( + + + {formatText(item.itemContent, application, formatMessage)} + + + ) + })} + + + ) +} diff --git a/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx b/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx new file mode 100644 index 000000000000..22d9b062d4f7 --- /dev/null +++ b/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 ( + + {title && ( + + + {formatTextWithLocale(title, application, locale, formatMessage)} + + + )} + + + + + + + + + + + + + + + + + + + ) +} diff --git a/libs/application/ui-fields/src/lib/index.ts b/libs/application/ui-fields/src/lib/index.ts index d805491651c5..a6379668ef5a 100644 --- a/libs/application/ui-fields/src/lib/index.ts +++ b/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' diff --git a/libs/application/ui-shell/src/lib/FormShell.tsx b/libs/application/ui-shell/src/lib/FormShell.tsx index 8e1beef1c9ee..31a047f6112c 100644 --- a/libs/application/ui-shell/src/lib/FormShell.tsx +++ b/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' import { canGoBack } from '../reducer/reducerUtils' export const FormShell: FC< @@ -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( diff --git a/libs/application/ui-shell/src/utils.ts b/libs/application/ui-shell/src/utils.ts index e027cfd073d5..4f63543491f5 100644 --- a/libs/application/ui-shell/src/utils.ts +++ b/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> { + 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> | 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 +}