From 45ef92fe42373a79f6fa4831b7f1be41d8746556 Mon Sep 17 00:00:00 2001 From: Gunnar K Vilbergsson Date: Wed, 30 Oct 2024 11:06:26 +0000 Subject: [PATCH 1/3] Add locale to arguments passed to options functions for select, radio and checkbox fields --- .../application/core/src/lib/fieldBuilders.ts | 8 ++++--- .../src/forms/ExampleForm.ts | 24 ++++++++++++++----- libs/application/types/src/lib/Fields.ts | 9 ++++--- .../CheckboxFormField/CheckboxFormField.tsx | 6 ++--- .../src/lib/RadioFormField/RadioFormField.tsx | 6 ++--- .../lib/SelectFormField/SelectFormField.tsx | 6 ++--- 6 files changed, 38 insertions(+), 21 deletions(-) diff --git a/libs/application/core/src/lib/fieldBuilders.ts b/libs/application/core/src/lib/fieldBuilders.ts index 15ed082dedce..757689a82d1d 100644 --- a/libs/application/core/src/lib/fieldBuilders.ts +++ b/libs/application/core/src/lib/fieldBuilders.ts @@ -44,8 +44,9 @@ import { AccordionField, BankAccountField, SliderField, + MaybeWithApplicationAndFieldAndLocale, } from '@island.is/application/types' - +import { Locale } from '@island.is/shared/types' import { Colors } from '@island.is/island-ui/theme' import { SpanType, BoxProps } from '@island.is/island-ui/core/types' import { coreDefaultFieldMessages } from './messages' @@ -525,12 +526,13 @@ export const buildSubmitField = (data: { } export const buildFieldOptions = ( - maybeOptions: MaybeWithApplicationAndField, + maybeOptions: MaybeWithApplicationAndFieldAndLocale, application: Application, field: Field, + locale: Locale, ): Option[] => { if (typeof maybeOptions === 'function') { - return maybeOptions(application, field) + return maybeOptions(application, field, locale) } return maybeOptions diff --git a/libs/application/templates/reference-template/src/forms/ExampleForm.ts b/libs/application/templates/reference-template/src/forms/ExampleForm.ts index ced834ba746a..3bb92327c717 100644 --- a/libs/application/templates/reference-template/src/forms/ExampleForm.ts +++ b/libs/application/templates/reference-template/src/forms/ExampleForm.ts @@ -116,12 +116,24 @@ export const ExampleForm: Form = buildForm({ title: m.careerIndustry, description: m.careerIndustryDescription, required: true, - options: [ - { label: 'Hugbúnaður', value: 'software' }, - { label: 'Fjármál', value: 'finance' }, - { label: 'Efnahagsráðgjöf', value: 'consulting' }, - { label: 'Önnur', value: 'other' }, - ], + options: (options, application, locale) => { + if (locale === 'is') { + return [ + { label: locale, value: locale }, + { label: 'Hugbúnaður', value: 'software' }, + { label: 'Fjármál', value: 'finance' }, + { label: 'Efnahagsráðgjöf', value: 'consulting' }, + { label: 'Önnur', value: 'other' }, + ] + } + return [ + { label: locale, value: locale }, + { label: 'Software', value: 'software' }, + { label: 'Finance', value: 'finance' }, + { label: 'Consulting', value: 'consulting' }, + { label: 'Other', value: 'other' }, + ] + }, }), buildRadioField({ id: 'careerHistory', diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts index a5ed41802863..cd067322b088 100644 --- a/libs/application/types/src/lib/Fields.ts +++ b/libs/application/types/src/lib/Fields.ts @@ -26,6 +26,9 @@ export type RecordObject = Record export type MaybeWithApplicationAndField = | T | ((application: Application, field: Field) => T) +export type MaybeWithApplicationAndFieldAndLocale = + | T + | ((application: Application, field: Field, locale: Locale) => T) export type ValidAnswers = 'yes' | 'no' | undefined export type FieldWidth = 'full' | 'half' export type TitleVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' @@ -274,7 +277,7 @@ export enum FieldComponents { export interface CheckboxField extends BaseField { readonly type: FieldTypes.CHECKBOX component: FieldComponents.CHECKBOX - options: MaybeWithApplicationAndField + options: MaybeWithApplicationAndFieldAndLocale large?: boolean strong?: boolean required?: boolean @@ -311,7 +314,7 @@ export interface DescriptionField extends BaseField { export interface RadioField extends BaseField { readonly type: FieldTypes.RADIO component: FieldComponents.RADIO - options: MaybeWithApplicationAndField + options: MaybeWithApplicationAndFieldAndLocale backgroundColor?: InputBackgroundColor largeButtons?: boolean required?: boolean @@ -324,7 +327,7 @@ export interface RadioField extends BaseField { export interface SelectField extends BaseField { readonly type: FieldTypes.SELECT component: FieldComponents.SELECT - options: MaybeWithApplicationAndField + options: MaybeWithApplicationAndFieldAndLocale onSelect?(s: SelectOption, cb: (t: unknown) => void): void placeholder?: FormText backgroundColor?: InputBackgroundColor diff --git a/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx b/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx index 32ac27632a3c..16c497413544 100644 --- a/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx +++ b/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx @@ -40,11 +40,11 @@ export const CheckboxFormField = ({ onSelect, spacing, } = field - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const finalOptions = useMemo( - () => buildFieldOptions(options, application, field), - [options, application], + () => buildFieldOptions(options, application, field, locale), + [options, application, locale], ) return ( diff --git a/libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx b/libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx index 9a4ec002fdd9..646098058292 100644 --- a/libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx +++ b/libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx @@ -39,11 +39,11 @@ export const RadioFormField: FC> = ({ hasIllustration, widthWithIllustration, } = field - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const finalOptions = useMemo( - () => buildFieldOptions(options, application, field), - [options, application], + () => buildFieldOptions(options, application, field, locale), + [options, application, locale], ) console.debug( diff --git a/libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx b/libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx index 1c9ae5f3ecfd..e34bfa7afa24 100644 --- a/libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx +++ b/libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx @@ -36,11 +36,11 @@ export const SelectFormField: FC> = ({ required = false, isMulti, } = field - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const finalOptions = useMemo( - () => buildFieldOptions(options, application, field), - [options, application, field], + () => buildFieldOptions(options, application, field, locale), + [options, application, field, locale], ) return ( From 39870542870712fae13440a5bde2ec069cc704c4 Mon Sep 17 00:00:00 2001 From: Gunnar K Vilbergsson Date: Wed, 30 Oct 2024 13:59:21 +0000 Subject: [PATCH 2/3] Add locale to title in all fields --- libs/application/core/src/lib/formUtils.ts | 42 ++++++++++++++++++- .../src/fields/FilesRecipientCard/index.tsx | 13 ++++-- .../CommissionFieldRepeater.tsx | 17 ++++++-- .../src/fields/FieldLabel.tsx | 12 ++++-- .../src/fields/FieldTitle/FieldTitle.tsx | 12 ++++-- .../fields/AdditionalOwnersOverview/index.tsx | 12 ++++-- .../TextWithTooltip/TextWithTooltip.tsx | 8 ++-- .../SecondaryContact/SecondaryContact.tsx | 13 ++++-- .../fields/PropertyOverviewRepeater/index.tsx | 15 +++++-- .../src/fields/PropertyRepeater/index.tsx | 15 +++++-- .../src/forms/ExampleForm.ts | 9 +++- libs/application/types/src/lib/Fields.ts | 10 ++++- libs/application/types/src/lib/Form.ts | 11 ++++- .../AccordionFormField/AccordionFormField.tsx | 12 ++++-- .../AlertMessageFormField.tsx | 12 ++++-- .../AsyncSelectFormField.tsx | 12 ++++-- .../BankAccountFormField.tsx | 11 ++++- .../CheckboxFormField/CheckboxFormField.tsx | 9 +++- .../CompanySearchFormField.tsx | 16 +++++-- .../src/lib/DateFormField/DateFormField.tsx | 9 +++- .../DescriptionFormField.tsx | 34 +++++++++++---- .../lib/DividerFormField/DividerFormField.tsx | 12 ++++-- .../ExpandableDescriptionFormField.tsx | 12 ++++-- .../src/lib/ImageFormField/ImageFormField.tsx | 12 ++++-- .../src/lib/LinkFormField/LinkFormField.tsx | 12 ++++-- .../src/lib/PhoneFormField/PhoneFormField.tsx | 12 ++++-- .../src/lib/RadioFormField/RadioFormField.tsx | 14 ++++++- .../lib/SelectFormField/SelectFormField.tsx | 9 +++- .../StaticTableFormField.tsx | 12 ++++-- .../lib/SubmitFormField/SubmitFormField.tsx | 14 +++++-- .../TableRepeaterFormField.tsx | 16 +++++-- .../src/lib/TextFormField/TextFormField.tsx | 15 +++++-- .../ui-shell/src/components/FormStepper.tsx | 15 +++++-- .../ui-shell/src/components/Screen.tsx | 10 ++++- .../ui-shell/src/hooks/useApplicationTitle.ts | 15 +++++-- 35 files changed, 383 insertions(+), 101 deletions(-) diff --git a/libs/application/core/src/lib/formUtils.ts b/libs/application/core/src/lib/formUtils.ts index f4586e39971d..b7f704749a77 100644 --- a/libs/application/core/src/lib/formUtils.ts +++ b/libs/application/core/src/lib/formUtils.ts @@ -24,8 +24,9 @@ import { StaticText, StaticTextObject, SubSection, + FormTextWithLocale, } from '@island.is/application/types' -import { User } from '@island.is/shared/types' +import { Locale, User } from '@island.is/shared/types' const containsArray = (obj: RecordObject) => { let contains = false @@ -278,6 +279,45 @@ export const formatText = ( return formatMessage(text) as T extends FormTextArray ? string[] : string } +export const formatTextWithLocale = < + T extends FormTextArray | FormText | FormTextWithLocale, +>( + text: T, + application: Application, + locale: Locale, + formatMessage: MessageFormatter, +): T extends FormTextArray ? string[] : string => { + if (typeof text === 'function') { + const message = ( + text as (_: Application, locale: Locale) => StaticText | StaticText[] + )(application, locale) + if (Array.isArray(message)) { + return message.map((m) => + handleMessageFormatting(m, formatMessage), + ) as T extends FormTextArray ? string[] : string + } + return handleMessageFormatting( + message, + formatMessage, + ) as T extends FormTextArray ? string[] : string + } else if (Array.isArray(text)) { + const texts = text as StaticText[] + return texts.map((m) => + handleMessageFormatting(m, formatMessage), + ) as T extends FormTextArray ? string[] : string + } else if (typeof text === 'object') { + const staticTextObject = text as StaticTextObject + if (staticTextObject.values) { + return formatMessage( + staticTextObject, + staticTextObject.values, + ) as T extends FormTextArray ? string[] : string + } + } + + return formatMessage(text) as T extends FormTextArray ? string[] : string +} + export const formatAndParseAsHTML = ( text: FormText, application: Application, diff --git a/libs/application/templates/announcement-of-death/src/fields/FilesRecipientCard/index.tsx b/libs/application/templates/announcement-of-death/src/fields/FilesRecipientCard/index.tsx index edd147a871a3..2834f5ff996d 100644 --- a/libs/application/templates/announcement-of-death/src/fields/FilesRecipientCard/index.tsx +++ b/libs/application/templates/announcement-of-death/src/fields/FilesRecipientCard/index.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react' import { useLocale } from '@island.is/localization' import { SelectController } from '@island.is/shared/form-fields' -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { Application, FieldBaseProps, @@ -11,7 +11,7 @@ import { Box, Tag, Text } from '@island.is/island-ui/core' import { m } from '../../lib/messages' import { Answers as AODAnswers } from '../../types' import { isPerson } from 'kennitala' - +import { Locale } from '@island.is/shared/types' type FilesRecipientCardProps = { field: { props: { @@ -25,7 +25,7 @@ type FilesRecipientCardProps = { export const FilesRecipientCard: FC< React.PropsWithChildren & FilesRecipientCardProps> > = ({ application, field }) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() let options = application.answers?.estateMembers?.members?.length && application.answers.estateMembers.members.length !== 0 @@ -67,7 +67,12 @@ export const FilesRecipientCard: FC< > {field.title && ( - {formatText(field.title, application, formatMessage)} + {formatTextWithLocale( + field.title, + application, + locale as Locale, + formatMessage, + )} )} {field.description && ( diff --git a/libs/application/templates/data-protection-complaint/src/fields/CommissionFieldRepeater/CommissionFieldRepeater.tsx b/libs/application/templates/data-protection-complaint/src/fields/CommissionFieldRepeater/CommissionFieldRepeater.tsx index f45ae678fe41..c8a456ca759e 100644 --- a/libs/application/templates/data-protection-complaint/src/fields/CommissionFieldRepeater/CommissionFieldRepeater.tsx +++ b/libs/application/templates/data-protection-complaint/src/fields/CommissionFieldRepeater/CommissionFieldRepeater.tsx @@ -1,6 +1,10 @@ import React, { FC, useEffect } from 'react' import { useLocale } from '@island.is/localization' -import { formatText, getErrorViaPath } from '@island.is/application/core' +import { + formatText, + formatTextWithLocale, + getErrorViaPath, +} from '@island.is/application/core' import { FieldBaseProps } from '@island.is/application/types' import { InputController } from '@island.is/shared/form-fields' import { @@ -13,7 +17,7 @@ import { import { useFieldArray } from 'react-hook-form' import * as styles from './CommissionFieldRepeater.css' import { info } from '../../lib/messages' - +import { Locale } from '@island.is/shared/types' type PersonField = { name: string nationalId: string @@ -23,7 +27,7 @@ export const CommissionFieldRepeater: FC< React.PropsWithChildren > = ({ application, errors, field }) => { const { id, title } = field - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const { fields, append, remove } = useFieldArray({ name: id }) useEffect(() => { @@ -58,7 +62,12 @@ export const CommissionFieldRepeater: FC< )} - {formatText(title, application, formatMessage)}{' '} + {formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )}{' '} {index > 0 ? index + 1 : ''} diff --git a/libs/application/templates/data-protection-complaint/src/fields/FieldLabel.tsx b/libs/application/templates/data-protection-complaint/src/fields/FieldLabel.tsx index 099cfdc70fbe..739633ae92f9 100644 --- a/libs/application/templates/data-protection-complaint/src/fields/FieldLabel.tsx +++ b/libs/application/templates/data-protection-complaint/src/fields/FieldLabel.tsx @@ -1,19 +1,25 @@ import { useLocale } from '@island.is/localization' -import { formatText } from '@island.is/application/core' +import { formatTextWithLocale } from '@island.is/application/core' import { FieldBaseProps } from '@island.is/application/types' import { Text } from '@island.is/island-ui/core' import React, { FC } from 'react' +import { Locale } from '@island.is/shared/types' export const FieldLabel: FC> = ({ application, field, }) => { const { title } = field - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() return ( - {formatText(title, application, formatMessage)} + {formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} ) } diff --git a/libs/application/templates/funding-government-projects/src/fields/FieldTitle/FieldTitle.tsx b/libs/application/templates/funding-government-projects/src/fields/FieldTitle/FieldTitle.tsx index 1a5d6f8d739f..572f86d15566 100644 --- a/libs/application/templates/funding-government-projects/src/fields/FieldTitle/FieldTitle.tsx +++ b/libs/application/templates/funding-government-projects/src/fields/FieldTitle/FieldTitle.tsx @@ -1,8 +1,9 @@ import React from 'react' -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { FieldBaseProps } from '@island.is/application/types' import { ResponsiveSpace, Text } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' +import { Locale } from '@island.is/shared/types' type Props = FieldBaseProps & { field: { @@ -14,7 +15,7 @@ type Props = FieldBaseProps & { } export const FieldTitle = ({ field, application }: Props) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() return ( <> { marginTop={field.props.marginTop || 0} marginBottom={field.description ? 1 : 0} > - {formatText(field.title, application, formatMessage)} + {formatTextWithLocale( + field.title, + application, + locale as Locale, + formatMessage, + )} {field.props.required && ( {' *'} diff --git a/libs/application/templates/grindavik-housing-buyout/src/fields/AdditionalOwnersOverview/index.tsx b/libs/application/templates/grindavik-housing-buyout/src/fields/AdditionalOwnersOverview/index.tsx index 444b4b350d02..9fbaf30ba6d2 100644 --- a/libs/application/templates/grindavik-housing-buyout/src/fields/AdditionalOwnersOverview/index.tsx +++ b/libs/application/templates/grindavik-housing-buyout/src/fields/AdditionalOwnersOverview/index.tsx @@ -11,13 +11,14 @@ import { import { applicantInformationMessages } from '@island.is/application/ui-forms' import { useLocale } from '@island.is/localization' import { format as formatNationalId } from 'kennitala' -import { formatText } from '@island.is/application/core' +import { formatTextWithLocale } from '@island.is/application/core' import * as m from '../../lib/messages' import { formatBankInfo, formatPhoneNumber, removeCountryCode, } from '@island.is/application/ui-components' +import { Locale } from '@island.is/shared/types' const KeyValue = ({ label, value }: { label: StaticText; value: string }) => { const { formatMessage } = useLocale() @@ -36,13 +37,18 @@ export const AdditionalOwnersOverview = ({ field, }: FieldBaseProps) => { const additionalOwners = application.answers.additionalOwners ?? [] - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() return ( - {formatText(field.title, application, formatMessage)} + {formatTextWithLocale( + field.title, + application, + locale as Locale, + formatMessage, + )} {additionalOwners.map((owner, index) => ( diff --git a/libs/application/templates/health-insurance/src/fields/TextWithTooltip/TextWithTooltip.tsx b/libs/application/templates/health-insurance/src/fields/TextWithTooltip/TextWithTooltip.tsx index 94760bfc3279..6fe5e122a64b 100644 --- a/libs/application/templates/health-insurance/src/fields/TextWithTooltip/TextWithTooltip.tsx +++ b/libs/application/templates/health-insurance/src/fields/TextWithTooltip/TextWithTooltip.tsx @@ -1,8 +1,9 @@ -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { FieldBaseProps } from '@island.is/application/types' import { Box, Text, Tooltip } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' import * as styles from './TextWithTooltip.css' +import { Locale } from '@island.is/shared/types' export interface Props extends FieldBaseProps { title?: string @@ -15,14 +16,15 @@ export const TextWithTooltip = ({ title = '', description = '', }: Props) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() return ( - {formatText( + {formatTextWithLocale( field.title ? field.title : title, application, + locale as Locale, formatMessage, )}{' '} > = ({ field, application, }) => { const { setValue, getValues } = useFormContext() - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const { id, title } = field const isEnabled = getValues('hasSecondaryContact') === YES @@ -42,7 +44,12 @@ const SecondaryContact: FC> = ({ /> - {formatText(title, application, formatMessage)} + {formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} diff --git a/libs/application/templates/operating-license/src/fields/PropertyOverviewRepeater/index.tsx b/libs/application/templates/operating-license/src/fields/PropertyOverviewRepeater/index.tsx index 7f7a718e40bd..481939c35098 100644 --- a/libs/application/templates/operating-license/src/fields/PropertyOverviewRepeater/index.tsx +++ b/libs/application/templates/operating-license/src/fields/PropertyOverviewRepeater/index.tsx @@ -4,7 +4,11 @@ import { Box, GridColumn, GridRow, Text } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' import { m } from '../../lib/messages' import { Property, PropertyField } from '../../lib/constants' -import { formatText, getValueViaPath } from '@island.is/application/core' +import { + formatTextWithLocale, + getValueViaPath, +} from '@island.is/application/core' +import { Locale } from '@island.is/shared/types' interface PropTypes extends FieldBaseProps { field: CustomField @@ -13,7 +17,7 @@ interface PropTypes extends FieldBaseProps { export const PropertyOverviewRepeater: FC< React.PropsWithChildren > = ({ field, application }) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const { title } = field const { id } = field.props as { id: string } const fields = getValueViaPath(application.answers, id) as Property[] @@ -25,7 +29,12 @@ export const PropertyOverviewRepeater: FC< field={item} index={index} key={index + item.propertyNumber} - title={formatText(title, application, formatMessage)} + title={formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} /> ))} diff --git a/libs/application/templates/operating-license/src/fields/PropertyRepeater/index.tsx b/libs/application/templates/operating-license/src/fields/PropertyRepeater/index.tsx index d44a752c1d40..fec64956c813 100644 --- a/libs/application/templates/operating-license/src/fields/PropertyRepeater/index.tsx +++ b/libs/application/templates/operating-license/src/fields/PropertyRepeater/index.tsx @@ -21,15 +21,19 @@ import { Query } from '@island.is/api/schema' import { GET_REAL_ESTATE_ADDRESS } from '../../graphql' import { PropertyField } from '../../lib/constants' import * as styles from './PropertyRepeater.css' -import { formatText, getValueViaPath } from '@island.is/application/core' +import { + formatTextWithLocale, + getValueViaPath, +} from '@island.is/application/core' import { error as errorMsg } from '../../lib/error' +import { Locale } from '@island.is/shared/types' export const PropertyRepeater: FC> = ({ field, application, errors, }) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const { id, title } = field const { fields, append, remove } = useFieldArray({ name: `${id}`, @@ -42,7 +46,12 @@ export const PropertyRepeater: FC> = ({ error = getValueViaPath(errors, `properties.${id.split('.').pop() ?? ''}`) } - const repeaterTitle = formatText(title, application, formatMessage) + const repeaterTitle = formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + ) const handleAddProperty = () => append({ propertyNumber: '', diff --git a/libs/application/templates/reference-template/src/forms/ExampleForm.ts b/libs/application/templates/reference-template/src/forms/ExampleForm.ts index 3bb92327c717..ebd50346daf6 100644 --- a/libs/application/templates/reference-template/src/forms/ExampleForm.ts +++ b/libs/application/templates/reference-template/src/forms/ExampleForm.ts @@ -48,7 +48,7 @@ export const ExampleForm: Form = buildForm({ }), buildMultiField({ id: 'about', - title: m.about, + title: m.about.defaultMessage, children: [ buildTextField({ id: 'person.name', @@ -97,7 +97,12 @@ export const ExampleForm: Form = buildForm({ }), buildFileUploadField({ id: 'attachments', - title: 'Viðhengi', + title: (application, locale) => { + if (locale === 'is') { + return 'Viðhengi - IS' + } + return 'Attachments - EN' + }, introduction: 'Hér getur þú bætt við viðhengjum við umsóknina þína.', uploadMultiple: true, }), diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts index cd067322b088..74dc07779ae5 100644 --- a/libs/application/types/src/lib/Fields.ts +++ b/libs/application/types/src/lib/Fields.ts @@ -8,7 +8,13 @@ import type { ResponsiveProp, SpanType, } from '@island.is/island-ui/core/types' -import { FormItem, FormText, FormTextArray, StaticText } from './Form' +import { + FormItem, + FormText, + FormTextArray, + FormTextWithLocale, + StaticText, +} from './Form' import { ApolloClient } from '@apollo/client' import { Application } from './Application' import { CallToAction } from './StateMachine' @@ -189,7 +195,7 @@ export interface SelectOption { export interface BaseField extends FormItem { readonly id: string readonly component: FieldComponents | string - readonly title: FormText + readonly title: FormTextWithLocale readonly description?: FormText readonly children: undefined disabled?: boolean diff --git a/libs/application/types/src/lib/Form.ts b/libs/application/types/src/lib/Form.ts index c44d9c18c823..66665519be10 100644 --- a/libs/application/types/src/lib/Form.ts +++ b/libs/application/types/src/lib/Form.ts @@ -9,7 +9,7 @@ import { Field, RecordObject, SubmitField } from './Fields' import { Condition } from './Condition' import { Application, FormValue } from './Application' import { TestSupport } from '@island.is/island-ui/utils' - +import { Locale } from '@island.is/shared/types' export type BeforeSubmitCallback = () => Promise<[true, null] | [false, string]> export type SetBeforeSubmitCallback = ( @@ -33,6 +33,13 @@ export type FormText = | StaticText | ((application: Application) => StaticText | null | undefined) +export type FormTextWithLocale = + | StaticText + | (( + application: Application, + locale: Locale, + ) => StaticText | null | undefined) + export type FormComponent = | React.FC> | (( @@ -95,7 +102,7 @@ export interface FormItem extends TestSupport { readonly id?: string condition?: Condition readonly type: string - readonly title: FormText + readonly title: FormTextWithLocale readonly nextButtonText?: FormText } diff --git a/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx b/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx index 8cbd4e2c9bc0..26365509c62f 100644 --- a/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx +++ b/libs/application/ui-fields/src/lib/AccordionFormField/AccordionFormField.tsx @@ -5,9 +5,10 @@ import { } from '@island.is/application/types' import { Accordion, AccordionItem, Box, Text } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { Markdown } from '@island.is/shared/components' import { useEffect, useState } from 'react' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: AccordionField @@ -15,7 +16,7 @@ interface Props extends FieldBaseProps { export const AccordionFormField = ({ field, application }: Props) => { const [items, setItems] = useState>() - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const { accordionItems, marginBottom, marginTop, title, titleVariant } = field useEffect(() => { @@ -35,7 +36,12 @@ export const AccordionFormField = ({ field, application }: Props) => { {title && ( - {formatText(field.title, application, formatMessage)} + {formatTextWithLocale( + field.title, + application, + locale as Locale, + formatMessage, + )} )} diff --git a/libs/application/ui-fields/src/lib/AlertMessageFormField/AlertMessageFormField.tsx b/libs/application/ui-fields/src/lib/AlertMessageFormField/AlertMessageFormField.tsx index 3af35029ddb5..a1ec7eb23602 100644 --- a/libs/application/ui-fields/src/lib/AlertMessageFormField/AlertMessageFormField.tsx +++ b/libs/application/ui-fields/src/lib/AlertMessageFormField/AlertMessageFormField.tsx @@ -1,9 +1,10 @@ -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { AlertMessage, Box, Text, Button } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' import React, { FC } from 'react' import { Markdown } from '@island.is/shared/components' import { AlertMessageField, FieldBaseProps } from '@island.is/application/types' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: AlertMessageField @@ -13,7 +14,7 @@ export const AlertMessageFormField: FC> = ({ application, field, }) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() return ( > = ({ > diff --git a/libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx b/libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx index 22f97bc59d4a..50887f7a8674 100644 --- a/libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx +++ b/libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx @@ -1,6 +1,6 @@ import React, { FC, useEffect, useState } from 'react' -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { AsyncSelectField, FieldBaseProps } from '@island.is/application/types' import { Box } from '@island.is/island-ui/core' import { @@ -12,6 +12,7 @@ import { useApolloClient } from '@apollo/client/react' import { Option } from '@island.is/application/types' import { getDefaultValue } from '../../getDefaultValue' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: AsyncSelectField @@ -36,7 +37,7 @@ export const AsyncSelectFormField: FC> = ({ isMulti, required = false, } = field - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const apolloClient = useApolloClient() const [options, setOptions] = useState([]) const [hasLoadingError, setHasLoadingError] = useState(false) @@ -68,7 +69,12 @@ export const AsyncSelectFormField: FC> = ({ required={required} dataTestId={field.dataTestId} defaultValue={getDefaultValue(field, application)} - label={formatText(title, application, formatMessage)} + label={formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} name={id} disabled={disabled} error={ diff --git a/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx b/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx index 70205b9bb7a5..01b74ba49222 100644 --- a/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx +++ b/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx @@ -1,18 +1,20 @@ 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' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: BankAccountField } export const BankAccountFormField = ({ field, application }: Props) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const { marginBottom, marginTop, title, titleVariant, id } = field const bankNumber = formatText( coreDefaultFieldMessages.defaultBankAccountBankNumber, @@ -35,7 +37,12 @@ export const BankAccountFormField = ({ field, application }: Props) => { {title && ( - {formatText(field.title, application, formatMessage)} + {formatTextWithLocale( + field.title, + application, + locale as Locale, + formatMessage, + )} )} diff --git a/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx b/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx index 16c497413544..42c5349d0d38 100644 --- a/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx +++ b/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx @@ -5,6 +5,7 @@ import { formatText, getValueViaPath, buildFieldOptions, + formatTextWithLocale, } from '@island.is/application/core' import { CheckboxField, FieldBaseProps } from '@island.is/application/types' import { Text, Box } from '@island.is/island-ui/core' @@ -15,6 +16,7 @@ import { import { useLocale } from '@island.is/localization' import { getDefaultValue } from '../../getDefaultValue' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: CheckboxField @@ -51,7 +53,12 @@ export const CheckboxFormField = ({
{showFieldName && ( - {formatText(title, application, formatMessage)} + {formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} )} diff --git a/libs/application/ui-fields/src/lib/CompanySearchFormField/CompanySearchFormField.tsx b/libs/application/ui-fields/src/lib/CompanySearchFormField/CompanySearchFormField.tsx index adeb40e31d8b..9c4c9aa405b4 100644 --- a/libs/application/ui-fields/src/lib/CompanySearchFormField/CompanySearchFormField.tsx +++ b/libs/application/ui-fields/src/lib/CompanySearchFormField/CompanySearchFormField.tsx @@ -3,11 +3,16 @@ import { FieldBaseProps, } from '@island.is/application/types' import React, { FC } from 'react' -import { formatText, getValueViaPath } from '@island.is/application/core' +import { + formatText, + formatTextWithLocale, + getValueViaPath, +} from '@island.is/application/core' import { Box } from '@island.is/island-ui/core' import { CompanySearchController } from '@island.is/application/ui-components' import { useLocale } from '@island.is/localization' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: CompanySearchField @@ -27,7 +32,7 @@ export const CompanySearchFormField: FC> = ({ checkIfEmployerIsOnForbiddenList, required, } = field - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const searchField = getValueViaPath(application.answers, id, { nationalId: '', @@ -52,7 +57,12 @@ export const CompanySearchFormField: FC> = ({ error={error} defaultValue={initialValue} name={id} - label={formatText(title, application, formatMessage)} + label={formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} placeholder={ placeholder !== undefined ? formatText(placeholder as string, application, formatMessage) diff --git a/libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx b/libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx index 38a0cbe05c95..f6d2469a64f2 100644 --- a/libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx +++ b/libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx @@ -1,6 +1,10 @@ import React, { FC, useMemo } from 'react' -import { formatText, getValueViaPath } from '@island.is/application/core' +import { + formatText, + formatTextWithLocale, + getValueViaPath, +} from '@island.is/application/core' import { FieldBaseProps, DateField, @@ -14,6 +18,7 @@ import { } from '@island.is/shared/form-fields' import { useLocale } from '@island.is/localization' import { getDefaultValue } from '../../getDefaultValue' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: DateField @@ -130,7 +135,7 @@ export const DateFormField: FC> = ({ maxDate={finalMaxDate} backgroundColor={backgroundColor} readOnly={readOnly} - label={formatText(title, application, formatMessage)} + label={formatTextWithLocale(title, application, lang, formatMessage)} placeholder={ placeholder ? formatText(placeholder, application, formatMessage) diff --git a/libs/application/ui-fields/src/lib/DescriptionFormField/DescriptionFormField.tsx b/libs/application/ui-fields/src/lib/DescriptionFormField/DescriptionFormField.tsx index d196870350fd..0be2ba24e8a2 100644 --- a/libs/application/ui-fields/src/lib/DescriptionFormField/DescriptionFormField.tsx +++ b/libs/application/ui-fields/src/lib/DescriptionFormField/DescriptionFormField.tsx @@ -1,11 +1,11 @@ import React, { FC } from 'react' -import { formatText } from '@island.is/application/core' +import { formatTextWithLocale } from '@island.is/application/core' import { Application, DescriptionField } from '@island.is/application/types' import { Text, Tooltip, Box } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' import { Markdown } from '@island.is/shared/components' - +import { Locale } from '@island.is/shared/types' export const DescriptionFormField: FC< React.PropsWithChildren<{ application: Application @@ -14,7 +14,7 @@ export const DescriptionFormField: FC< showFieldName: boolean }> > = ({ application, field, showFieldName }) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() return ( {showFieldName && ( - {formatText(field.title, application, formatMessage)} + {formatTextWithLocale( + field.title, + application, + locale as Locale, + formatMessage, + )} {field.titleTooltip && ( )} @@ -37,13 +47,23 @@ export const DescriptionFormField: FC< {field.description && ( - {formatText(field.description, application, formatMessage)} + {formatTextWithLocale( + field.description, + application, + locale as Locale, + formatMessage, + )} )} {field.tooltip && ( )} diff --git a/libs/application/ui-fields/src/lib/DividerFormField/DividerFormField.tsx b/libs/application/ui-fields/src/lib/DividerFormField/DividerFormField.tsx index 9d34ca8452f0..ce78ba633ed8 100644 --- a/libs/application/ui-fields/src/lib/DividerFormField/DividerFormField.tsx +++ b/libs/application/ui-fields/src/lib/DividerFormField/DividerFormField.tsx @@ -1,9 +1,10 @@ import React, { FC } from 'react' -import { formatText } from '@island.is/application/core' +import { formatTextWithLocale } from '@island.is/application/core' import { DividerField, Application } from '@island.is/application/types' import { Box, Text, Divider } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' +import { Locale } from '@island.is/shared/types' export const DividerFormField: FC< React.PropsWithChildren<{ @@ -11,12 +12,17 @@ export const DividerFormField: FC< application: Application }> > = ({ field, application }) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() if (field.title) { return ( - {formatText(field.title, application, formatMessage)} + {formatTextWithLocale( + field.title, + application, + locale as Locale, + formatMessage, + )} ) diff --git a/libs/application/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx b/libs/application/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx index 50750b2f8f0a..50a71eae9cd5 100644 --- a/libs/application/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx +++ b/libs/application/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx @@ -1,4 +1,4 @@ -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { AccordionCard, Box, BulletList } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' import React, { FC } from 'react' @@ -7,6 +7,7 @@ import { FieldBaseProps, } from '@island.is/application/types' import { Markdown } from '@island.is/shared/components' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: ExpandableDescriptionField } @@ -14,14 +15,19 @@ interface Props extends FieldBaseProps { export const ExpandableDescriptionFormField: FC< React.PropsWithChildren > = ({ application, field }) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() return ( {field.introText && ( diff --git a/libs/application/ui-fields/src/lib/ImageFormField/ImageFormField.tsx b/libs/application/ui-fields/src/lib/ImageFormField/ImageFormField.tsx index 292b0ac4f1db..037e1fe4a43e 100644 --- a/libs/application/ui-fields/src/lib/ImageFormField/ImageFormField.tsx +++ b/libs/application/ui-fields/src/lib/ImageFormField/ImageFormField.tsx @@ -2,10 +2,11 @@ import { FieldBaseProps, ImageField } from '@island.is/application/types' import { Box, Text } from '@island.is/island-ui/core' import * as styles from './ImageFormField.css' import { useLocale } from '@island.is/localization' -import { formatText } from '@island.is/application/core' +import { formatTextWithLocale } from '@island.is/application/core' import { theme } from '@island.is/island-ui/theme' import { useWindowSize } from 'react-use' import { useEffect, useState } from 'react' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: ImageField @@ -50,7 +51,7 @@ export const ImageFormField = ({ field, application }: Props) => { useState() const [imageWidthForScreenWidth, setImageWidthForScreenWidth] = useState() - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const { width } = useWindowSize() const { imageWidth, imagePosition, image: Image } = field @@ -94,7 +95,12 @@ export const ImageFormField = ({ field, application }: Props) => { {field.title && ( - {formatText(field.title, application, formatMessage)} + {formatTextWithLocale( + field.title, + application, + locale as Locale, + formatMessage, + )} )} diff --git a/libs/application/ui-fields/src/lib/LinkFormField/LinkFormField.tsx b/libs/application/ui-fields/src/lib/LinkFormField/LinkFormField.tsx index 5029c7214088..31fdfee22c5e 100644 --- a/libs/application/ui-fields/src/lib/LinkFormField/LinkFormField.tsx +++ b/libs/application/ui-fields/src/lib/LinkFormField/LinkFormField.tsx @@ -1,9 +1,10 @@ import { useCallback } from 'react' -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { LinkField, Application } from '@island.is/application/types' import { Box, Button } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' import useGenerateFileUrl from './hooks/useGenerateFileUrl' +import { Locale } from '@island.is/shared/types' type Props = { field: LinkField @@ -11,7 +12,7 @@ type Props = { } export const LinkFormField = ({ field, application }: Props) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const openLink = useCallback(() => { window.open( formatText(field.link ?? '', application, formatMessage), @@ -47,7 +48,12 @@ export const LinkFormField = ({ field, application }: Props) => { type="button" variant="ghost" > - {formatText(field.title, application, formatMessage)} + {formatTextWithLocale( + field.title, + application, + locale as Locale, + formatMessage, + )} ) diff --git a/libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx b/libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx index 0fbcbb72c30e..bf7fff8664e0 100644 --- a/libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx +++ b/libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react' import { useFormContext } from 'react-hook-form' -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { FieldBaseProps, PhoneField } from '@island.is/application/types' import { Box } from '@island.is/island-ui/core' import { @@ -9,6 +9,7 @@ import { } from '@island.is/shared/form-fields' import { useLocale } from '@island.is/localization' import { getDefaultValue } from '../../getDefaultValue' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: PhoneField @@ -36,7 +37,7 @@ export const PhoneFormField: FC> = ({ onChange = () => undefined, } = field const { control, clearErrors } = useFormContext() - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() return (
@@ -60,7 +61,12 @@ export const PhoneFormField: FC> = ({ )} label={ showFieldName - ? formatText(title, application, formatMessage) + ? formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + ) : undefined } autoFocus={autoFocus} diff --git a/libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx b/libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx index 646098058292..efc681edbf6a 100644 --- a/libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx +++ b/libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx @@ -5,6 +5,7 @@ import { formatText, getValueViaPath, buildFieldOptions, + formatTextWithLocale, } from '@island.is/application/core' import { FieldBaseProps, RadioField } from '@island.is/application/types' import { useLocale } from '@island.is/localization' @@ -15,6 +16,7 @@ import { } from '@island.is/shared/form-fields' import { getDefaultValue } from '../../getDefaultValue' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: RadioField @@ -47,9 +49,12 @@ export const RadioFormField: FC> = ({ ) console.debug( - `Radio title ${JSON.stringify(title)}, and formatted: ${formatText( + `Radio title ${JSON.stringify( + title, + )}, and formatted: ${formatTextWithLocale( title, application, + locale as Locale, formatMessage, )}`, ) @@ -58,7 +63,12 @@ export const RadioFormField: FC> = ({ {showFieldName && ( - {formatText(title, application, formatMessage)} + {formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} )} diff --git a/libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx b/libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx index e34bfa7afa24..fdcb21b12dd6 100644 --- a/libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx +++ b/libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx @@ -4,6 +4,7 @@ import { formatText, buildFieldOptions, getValueViaPath, + formatTextWithLocale, } from '@island.is/application/core' import { FieldBaseProps, SelectField } from '@island.is/application/types' import { Box } from '@island.is/island-ui/core' @@ -14,6 +15,7 @@ import { import { useLocale } from '@island.is/localization' import { getDefaultValue } from '../../getDefaultValue' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: SelectField @@ -59,7 +61,12 @@ export const SelectFormField: FC> = ({ getDefaultValue(field, application)) || (required ? '' : undefined) } - label={formatText(title, application, formatMessage)} + label={formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} name={id} disabled={disabled} error={error} diff --git a/libs/application/ui-fields/src/lib/StaticTableFormField/StaticTableFormField.tsx b/libs/application/ui-fields/src/lib/StaticTableFormField/StaticTableFormField.tsx index ab1ec077fdf3..0ddce4f704d6 100644 --- a/libs/application/ui-fields/src/lib/StaticTableFormField/StaticTableFormField.tsx +++ b/libs/application/ui-fields/src/lib/StaticTableFormField/StaticTableFormField.tsx @@ -2,8 +2,9 @@ import { FieldBaseProps, StaticTableField } from '@island.is/application/types' import { FC } from 'react' import { Box, Table as T, Text } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { FieldDescription } from '@island.is/shared/form-fields' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: StaticTableField @@ -15,7 +16,7 @@ export const StaticTableFormField: FC = ({ showFieldName, }) => { const { marginTop, marginBottom, description, title, titleVariant } = field - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const header = typeof field.header === 'function' ? field.header(application) @@ -31,7 +32,12 @@ export const StaticTableFormField: FC = ({ {showFieldName && ( - {formatText(title, application, formatMessage)} + {formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} )} {description && ( diff --git a/libs/application/ui-fields/src/lib/SubmitFormField/SubmitFormField.tsx b/libs/application/ui-fields/src/lib/SubmitFormField/SubmitFormField.tsx index dae3e049c320..2d2612566e04 100644 --- a/libs/application/ui-fields/src/lib/SubmitFormField/SubmitFormField.tsx +++ b/libs/application/ui-fields/src/lib/SubmitFormField/SubmitFormField.tsx @@ -1,10 +1,11 @@ import React, { FC, useMemo } from 'react' -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { SubmitField, FieldBaseProps } from '@island.is/application/types' import { Text, Box } from '@island.is/island-ui/core' import { RadioController } from '@island.is/shared/form-fields' import { useLocale } from '@island.is/localization' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: SubmitField @@ -16,7 +17,7 @@ export const SubmitFormField: FC> = ({ error, }) => { const { id, title, actions, placement } = field - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const actionsAsOptions = useMemo(() => { return actions.map((a) => { return { @@ -39,7 +40,14 @@ export const SubmitFormField: FC> = ({ padding={4} marginTop={4} > - {formatText(title, application, formatMessage)} + + {formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} + diff --git a/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx b/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx index 6c4c7ea33a9b..22c9a0aaef7c 100644 --- a/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx +++ b/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx @@ -1,4 +1,8 @@ -import { coreMessages, formatText } from '@island.is/application/core' +import { + coreMessages, + formatText, + formatTextWithLocale, +} from '@island.is/application/core' import { FieldBaseProps, TableRepeaterField, @@ -20,6 +24,7 @@ import { FC, useState } from 'react' import { useFieldArray, useFormContext, useWatch } from 'react-hook-form' import { handleCustomMappedValues } from './utils' import { Item } from './TableRepeaterItem' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: TableRepeaterField @@ -54,7 +59,7 @@ export const TableRepeaterFormField: FC = ({ ...rawItems[key], })) - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const methods = useFormContext() const [activeIndex, setActiveIndex] = useState(-1) const { fields, append, remove } = useFieldArray({ @@ -112,7 +117,12 @@ export const TableRepeaterFormField: FC = ({ {showFieldName && ( - {formatText(title, application, formatMessage)} + {formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + )} )} {description && ( diff --git a/libs/application/ui-fields/src/lib/TextFormField/TextFormField.tsx b/libs/application/ui-fields/src/lib/TextFormField/TextFormField.tsx index b3b73e6b556a..f52a84b1880d 100644 --- a/libs/application/ui-fields/src/lib/TextFormField/TextFormField.tsx +++ b/libs/application/ui-fields/src/lib/TextFormField/TextFormField.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react' import { useFormContext } from 'react-hook-form' -import { formatText } from '@island.is/application/core' +import { formatText, formatTextWithLocale } from '@island.is/application/core' import { FieldBaseProps, TextField } from '@island.is/application/types' import { Box } from '@island.is/island-ui/core' import { @@ -11,6 +11,7 @@ import { import { useLocale } from '@island.is/localization' import { getDefaultValue } from '../../getDefaultValue' +import { Locale } from '@island.is/shared/types' interface Props extends FieldBaseProps { field: TextField @@ -45,7 +46,7 @@ export const TextFormField: FC> = ({ onChange = () => undefined, } = field const { clearErrors } = useFormContext() - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() return (
@@ -61,14 +62,20 @@ export const TextFormField: FC> = ({ readOnly={readOnly} id={id} dataTestId={dataTestId} - placeholder={formatText( + placeholder={formatTextWithLocale( placeholder || '', application, + locale as Locale, formatMessage, )} label={ showFieldName - ? formatText(title, application, formatMessage) + ? formatTextWithLocale( + title, + application, + locale as Locale, + formatMessage, + ) : undefined } autoFocus={autoFocus} diff --git a/libs/application/ui-shell/src/components/FormStepper.tsx b/libs/application/ui-shell/src/components/FormStepper.tsx index 5029dac268a2..0936fd7b182f 100644 --- a/libs/application/ui-shell/src/components/FormStepper.tsx +++ b/libs/application/ui-shell/src/components/FormStepper.tsx @@ -10,7 +10,8 @@ import { MessageDescriptor } from 'react-intl' import { FormScreen } from '../types' import useIsMobile from '../hooks/useIsMobile' import { ExcludesFalse } from '@island.is/application/utils' -import { formatText } from '@island.is/application/core' +import { formatTextWithLocale } from '@island.is/application/core' +import { Locale } from '@island.is/shared/types' type Props = { form: { @@ -30,7 +31,7 @@ const FormStepper = ({ currentScreen, application, }: Props) => { - const { formatMessage } = useLocale() + const { formatMessage, lang: locale } = useLocale() const { isMobile } = useIsMobile() const parseSubsections = ( @@ -57,7 +58,12 @@ const FormStepper = ({ .map((child, i) => { const isChildActive = isParentActive && currentScreen.subSectionIndex === i - const childText = formatText(child.title, application, formatMessage) + const childText = formatTextWithLocale( + child.title, + application, + locale as Locale, + formatMessage, + ) if (!childText) return null @@ -91,9 +97,10 @@ const FormStepper = ({ [ stepperTitle, ...sections.map((section, i) => { - const sectionTitle = formatText( + const sectionTitle = formatTextWithLocale( section.title, application, + locale as Locale, formatMessage, ) diff --git a/libs/application/ui-shell/src/components/Screen.tsx b/libs/application/ui-shell/src/components/Screen.tsx index 850aa2b479a2..195f315f7b28 100644 --- a/libs/application/ui-shell/src/components/Screen.tsx +++ b/libs/application/ui-shell/src/components/Screen.tsx @@ -10,7 +10,7 @@ import React, { import { ApolloError, useMutation } from '@apollo/client' import { coreMessages, - formatText, + formatTextWithLocale, mergeAnswers, } from '@island.is/application/core' import { @@ -55,6 +55,7 @@ import { extractAnswersToSubmitFromScreen, findSubmitField } from '../utils' import ScreenFooter from './ScreenFooter' import RefetchContext from '../context/RefetchContext' import { MessageDescriptor } from 'react-intl' +import { Locale } from '@island.is/shared/types' type ScreenProps = { activeScreenIndex: number @@ -345,7 +346,12 @@ const Screen: FC> = ({ marginBottom={1} {...(shouldCreateTopLevelRegion ? { id: screen.id } : {})} > - {formatText(screen.title, application, formatMessage)} + {formatTextWithLocale( + screen.title, + application, + locale as Locale, + formatMessage, + )} {screen.type === FormItemTypes.REPEATER ? ( diff --git a/libs/application/ui-shell/src/hooks/useApplicationTitle.ts b/libs/application/ui-shell/src/hooks/useApplicationTitle.ts index 273fb8ceef63..8f50c7fae3e9 100644 --- a/libs/application/ui-shell/src/hooks/useApplicationTitle.ts +++ b/libs/application/ui-shell/src/hooks/useApplicationTitle.ts @@ -1,6 +1,6 @@ import { useLocale } from '@island.is/localization' import { - formatText, + formatTextWithLocale, getSubSectionsInSection, } from '@island.is/application/core' import { Section, SubSection } from '@island.is/application/types' @@ -8,9 +8,11 @@ import { FormatMessage } from '@island.is/localization' import { ApplicationUIState } from '../reducer/ReducerTypes' import { useDocumentTitle } from './useDocumentTitle' +import { Locale } from '@island.is/shared/types' export const getApplicationTitle = ( state: ApplicationUIState, + locale: Locale, formatMessage: FormatMessage, ) => { const activeScreen = state.screens[state.activeScreen] @@ -30,9 +32,10 @@ export const getApplicationTitle = ( const titleParts = [`${formName} | Ísland.is`] if (activeSection) { - const sectionTitle = formatText( + const sectionTitle = formatTextWithLocale( activeSection.title, state.application, + locale as Locale, formatMessage, ) @@ -43,8 +46,12 @@ export const getApplicationTitle = ( } export const useApplicationTitle = (state: ApplicationUIState) => { - const { formatMessage } = useLocale() - const applicationTitle = getApplicationTitle(state, formatMessage) + const { formatMessage, lang: locale } = useLocale() + const applicationTitle = getApplicationTitle( + state, + locale as Locale, + formatMessage, + ) useDocumentTitle(applicationTitle) } From 2bb280af8d325a4ab736e760390217baba2c919b Mon Sep 17 00:00:00 2001 From: Gunnar K Vilbergsson Date: Wed, 30 Oct 2024 14:57:45 +0000 Subject: [PATCH 3/3] Fix test --- .../src/hooks/useApplicationTitle.spec.ts | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/libs/application/ui-shell/src/hooks/useApplicationTitle.spec.ts b/libs/application/ui-shell/src/hooks/useApplicationTitle.spec.ts index 773828e5b4fc..6a99bb398981 100644 --- a/libs/application/ui-shell/src/hooks/useApplicationTitle.spec.ts +++ b/libs/application/ui-shell/src/hooks/useApplicationTitle.spec.ts @@ -13,9 +13,11 @@ import { z } from 'zod' import { getApplicationTitle } from './useApplicationTitle' import { MessageDescriptor } from 'react-intl' import { initializeReducer } from '../reducer/ApplicationFormReducer' +import { FormatMessage } from '@island.is/localization' describe('getApplicationTitle', () => { let applicationState: ApplicationUIState + const locale = 'is' const formatMessage = (str: MessageDescriptor | string) => str.toString() beforeEach(() => { @@ -79,21 +81,33 @@ describe('getApplicationTitle', () => { }) it('should at least return application name', () => { - const title = getApplicationTitle(applicationState, formatMessage) + const title = getApplicationTitle( + applicationState, + locale, + formatMessage as FormatMessage, + ) expect(title).toEqual('Test | Ísland.is') }) it('should include section name when available', () => { applicationState.activeScreen = 1 - const title = getApplicationTitle(applicationState, formatMessage) + const title = getApplicationTitle( + applicationState, + locale, + formatMessage as FormatMessage, + ) expect(title).toEqual('First section - Test | Ísland.is') }) it('should include sub-section name when available', () => { applicationState.activeScreen = 2 - const title = getApplicationTitle(applicationState, formatMessage) + const title = getApplicationTitle( + applicationState, + locale, + formatMessage as FormatMessage, + ) expect(title).toEqual('Subsection - Test | Ísland.is') })