From 96c5e61d7dd01630fabd24ef3ed95d55637a52dc Mon Sep 17 00:00:00 2001 From: Jonni Date: Wed, 11 Dec 2024 14:57:52 +0000 Subject: [PATCH 1/5] feat: changes to app sys that were bundled with financial aid update --- .../application/core/src/lib/fieldBuilders.ts | 43 +++++ libs/application/core/src/lib/messages.ts | 15 ++ .../reference-template/src/fields/Logo.tsx | 29 ++++ .../src/fields/akrahreppur.svg | 6 + .../src/fields/akureyri.svg | 157 ++++++++++++++++++ .../src/forms/ExampleForm.ts | 29 +++- libs/application/types/src/lib/Fields.ts | 28 ++++ libs/application/types/src/lib/Form.ts | 2 +- .../AccordionFormField/AccordionFormField.tsx | 54 ++++++ .../BankAccountFormField.tsx | 81 +++++++++ libs/application/ui-fields/src/lib/index.ts | 2 + .../ui-shell/src/lib/FormShell.tsx | 3 +- libs/application/ui-shell/src/utils.ts | 33 ++++ 13 files changed, 479 insertions(+), 3 deletions(-) create mode 100644 libs/application/templates/reference-template/src/fields/Logo.tsx create mode 100644 libs/application/templates/reference-template/src/fields/akrahreppur.svg create mode 100644 libs/application/templates/reference-template/src/fields/akureyri.svg create mode 100644 libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx create mode 100644 libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx diff --git a/libs/application/core/src/lib/fieldBuilders.ts b/libs/application/core/src/lib/fieldBuilders.ts index 1ef54e3fa911..236968055876 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' @@ -996,3 +998,44 @@ export const buildDisplayField = ( rightAlign, } } + +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/templates/reference-template/src/fields/Logo.tsx b/libs/application/templates/reference-template/src/fields/Logo.tsx new file mode 100644 index 000000000000..03e671fafa06 --- /dev/null +++ b/libs/application/templates/reference-template/src/fields/Logo.tsx @@ -0,0 +1,29 @@ +import React, { useEffect, useState } from 'react' +import { getValueViaPath } from '@island.is/application/core' +import { Application } from '@island.is/application/types' +type Props = { + application: Application +} +export const Logo = ({ application }: Props) => { + const [logo, setLogo] = useState() + console.log(application.externalData) + const nationalId = getValueViaPath( + application.externalData, + 'nationalRegistry.data.nationalId', + ) + console.log(nationalId) + + useEffect(() => { + const getLogo = async () => { + if (nationalId === '0101302399') { + const svgLogo = await import(`./akureyri.svg`) + setLogo(svgLogo.default) + } else { + const svgLogo = await import(`./akrahreppur.svg`) + setLogo(svgLogo.default) + } + } + getLogo() + }, []) + return Municipality logo +} diff --git a/libs/application/templates/reference-template/src/fields/akrahreppur.svg b/libs/application/templates/reference-template/src/fields/akrahreppur.svg new file mode 100644 index 000000000000..bceed6a9fcfa --- /dev/null +++ b/libs/application/templates/reference-template/src/fields/akrahreppur.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/libs/application/templates/reference-template/src/fields/akureyri.svg b/libs/application/templates/reference-template/src/fields/akureyri.svg new file mode 100644 index 000000000000..1ad88a2af433 --- /dev/null +++ b/libs/application/templates/reference-template/src/fields/akureyri.svg @@ -0,0 +1,157 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/application/templates/reference-template/src/forms/ExampleForm.ts b/libs/application/templates/reference-template/src/forms/ExampleForm.ts index c402a020c9fd..149a7c4d9e17 100644 --- a/libs/application/templates/reference-template/src/forms/ExampleForm.ts +++ b/libs/application/templates/reference-template/src/forms/ExampleForm.ts @@ -15,25 +15,52 @@ import { buildHiddenInput, buildHiddenInputWithWatchedValue, buildTableRepeaterField, + buildAccordionField, + buildBankAccountField, } from '@island.is/application/core' import { + Application, Comparators, Form, + FormComponent, FormModes, FormValue, } from '@island.is/application/types' import { ApiActions } from '../shared' import { m } from '../lib/messages' +import { createElement } from 'react' +import Logo from '../fields/akureyri.svg' export const ExampleForm: Form = buildForm({ id: 'ExampleFormDraft', title: 'Atvinnuleysisbætur', mode: FormModes.DRAFT, + logo: Logo as unknown as FormComponent, children: [ buildSection({ id: 'conditions', title: m.conditionsSection, - children: [], + children: [ + buildMultiField({ + id: 'accordionAndBankAccount', + title: 'Accordion and bank account', + children: [ + buildAccordionField({ + id: 'accordion', + title: 'Accordion title', + accordionItems: [ + { itemTitle: 'Item title1', itemContent: 'Item content1' }, + { itemTitle: 'Item title2', itemContent: 'Item content2' }, + { itemTitle: 'Item title3', itemContent: 'Item content3' }, + ], + }), + buildBankAccountField({ + id: 'bankAccount', + title: 'Bank account title', + }), + ], + }), + ], }), buildSection({ id: 'tableRepeaterWithPhone', diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts index 0ff0be0e3bfe..37c694d2d721 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 { @@ -670,6 +674,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 @@ -818,3 +844,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..505de58dcd89 --- /dev/null +++ b/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx @@ -0,0 +1,54 @@ +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..fc3b9f92b58c --- /dev/null +++ b/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx @@ -0,0 +1,81 @@ +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 d3be0a1e4747..d23e20c8b96c 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' 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( 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 +} From f265bf0f1fa79ba829562996e16a9676cf2351d2 Mon Sep 17 00:00:00 2001 From: Jonni Date: Wed, 11 Dec 2024 15:04:06 +0000 Subject: [PATCH 2/5] chore: add in line break --- .../ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx b/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx index 505de58dcd89..fe29ba01be9d 100644 --- a/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx +++ b/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx @@ -8,6 +8,7 @@ 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 } From 50687edd8f619d39b2495310d0adc072f8a9aeed Mon Sep 17 00:00:00 2001 From: Jonni Date: Wed, 11 Dec 2024 15:04:37 +0000 Subject: [PATCH 3/5] chore: add in line break --- .../src/lib/BankAccountFormField/BankAccountFormField.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx b/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx index fc3b9f92b58c..22d9b062d4f7 100644 --- a/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx +++ b/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx @@ -7,6 +7,7 @@ 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 } From 30eb9fb6f277dba0a0c1dd73d758bc643a8088d4 Mon Sep 17 00:00:00 2001 From: Jonni Date: Wed, 11 Dec 2024 15:25:41 +0000 Subject: [PATCH 4/5] chore: undo changes to reference-template --- .../reference-template/src/fields/Logo.tsx | 29 ---- .../src/fields/akrahreppur.svg | 6 - .../src/fields/akureyri.svg | 157 ------------------ .../src/forms/ExampleForm.ts | 28 +--- 4 files changed, 1 insertion(+), 219 deletions(-) delete mode 100644 libs/application/templates/reference-template/src/fields/Logo.tsx delete mode 100644 libs/application/templates/reference-template/src/fields/akrahreppur.svg delete mode 100644 libs/application/templates/reference-template/src/fields/akureyri.svg diff --git a/libs/application/templates/reference-template/src/fields/Logo.tsx b/libs/application/templates/reference-template/src/fields/Logo.tsx deleted file mode 100644 index 03e671fafa06..000000000000 --- a/libs/application/templates/reference-template/src/fields/Logo.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { useEffect, useState } from 'react' -import { getValueViaPath } from '@island.is/application/core' -import { Application } from '@island.is/application/types' -type Props = { - application: Application -} -export const Logo = ({ application }: Props) => { - const [logo, setLogo] = useState() - console.log(application.externalData) - const nationalId = getValueViaPath( - application.externalData, - 'nationalRegistry.data.nationalId', - ) - console.log(nationalId) - - useEffect(() => { - const getLogo = async () => { - if (nationalId === '0101302399') { - const svgLogo = await import(`./akureyri.svg`) - setLogo(svgLogo.default) - } else { - const svgLogo = await import(`./akrahreppur.svg`) - setLogo(svgLogo.default) - } - } - getLogo() - }, []) - return Municipality logo -} diff --git a/libs/application/templates/reference-template/src/fields/akrahreppur.svg b/libs/application/templates/reference-template/src/fields/akrahreppur.svg deleted file mode 100644 index bceed6a9fcfa..000000000000 --- a/libs/application/templates/reference-template/src/fields/akrahreppur.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/libs/application/templates/reference-template/src/fields/akureyri.svg b/libs/application/templates/reference-template/src/fields/akureyri.svg deleted file mode 100644 index 1ad88a2af433..000000000000 --- a/libs/application/templates/reference-template/src/fields/akureyri.svg +++ /dev/null @@ -1,157 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/libs/application/templates/reference-template/src/forms/ExampleForm.ts b/libs/application/templates/reference-template/src/forms/ExampleForm.ts index 149a7c4d9e17..73329cba02d7 100644 --- a/libs/application/templates/reference-template/src/forms/ExampleForm.ts +++ b/libs/application/templates/reference-template/src/forms/ExampleForm.ts @@ -15,52 +15,26 @@ import { buildHiddenInput, buildHiddenInputWithWatchedValue, buildTableRepeaterField, - buildAccordionField, - buildBankAccountField, } from '@island.is/application/core' import { - Application, Comparators, Form, - FormComponent, FormModes, FormValue, } from '@island.is/application/types' import { ApiActions } from '../shared' import { m } from '../lib/messages' -import { createElement } from 'react' import Logo from '../fields/akureyri.svg' export const ExampleForm: Form = buildForm({ id: 'ExampleFormDraft', title: 'Atvinnuleysisbætur', mode: FormModes.DRAFT, - logo: Logo as unknown as FormComponent, children: [ buildSection({ id: 'conditions', title: m.conditionsSection, - children: [ - buildMultiField({ - id: 'accordionAndBankAccount', - title: 'Accordion and bank account', - children: [ - buildAccordionField({ - id: 'accordion', - title: 'Accordion title', - accordionItems: [ - { itemTitle: 'Item title1', itemContent: 'Item content1' }, - { itemTitle: 'Item title2', itemContent: 'Item content2' }, - { itemTitle: 'Item title3', itemContent: 'Item content3' }, - ], - }), - buildBankAccountField({ - id: 'bankAccount', - title: 'Bank account title', - }), - ], - }), - ], + children: [], }), buildSection({ id: 'tableRepeaterWithPhone', From 8ab2f133e406355fd88b4517d9e88ca74edcf65b Mon Sep 17 00:00:00 2001 From: Jonni Date: Wed, 11 Dec 2024 15:28:40 +0000 Subject: [PATCH 5/5] chore: remove unused import --- .../templates/reference-template/src/forms/ExampleForm.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/application/templates/reference-template/src/forms/ExampleForm.ts b/libs/application/templates/reference-template/src/forms/ExampleForm.ts index 73329cba02d7..c402a020c9fd 100644 --- a/libs/application/templates/reference-template/src/forms/ExampleForm.ts +++ b/libs/application/templates/reference-template/src/forms/ExampleForm.ts @@ -24,7 +24,6 @@ import { } from '@island.is/application/types' import { ApiActions } from '../shared' import { m } from '../lib/messages' -import Logo from '../fields/akureyri.svg' export const ExampleForm: Form = buildForm({ id: 'ExampleFormDraft',