diff --git a/apps/application-system/form/src/routes/Application.tsx b/apps/application-system/form/src/routes/Application.tsx index 6089533ae754a..713ba8a0b2d32 100644 --- a/apps/application-system/form/src/routes/Application.tsx +++ b/apps/application-system/form/src/routes/Application.tsx @@ -1,4 +1,3 @@ -import React from 'react' import { useParams } from 'react-router-dom' import { ApplicationForm, ErrorShell } from '@island.is/application/ui-shell' diff --git a/libs/application/core/src/lib/fieldBuilders.ts b/libs/application/core/src/lib/fieldBuilders.ts index f177d23bcd039..575115e45a09a 100644 --- a/libs/application/core/src/lib/fieldBuilders.ts +++ b/libs/application/core/src/lib/fieldBuilders.ts @@ -65,6 +65,7 @@ const extractCommonFields = ( title, dataTestId, width = 'full', + nextButtonText, } = data return { @@ -77,6 +78,7 @@ const extractCommonFields = ( doesNotRequireAnswer, title, width, + nextButtonText, } } diff --git a/libs/application/types/src/lib/Form.ts b/libs/application/types/src/lib/Form.ts index 808b7803c3167..d0af617c7a7e3 100644 --- a/libs/application/types/src/lib/Form.ts +++ b/libs/application/types/src/lib/Form.ts @@ -86,6 +86,7 @@ export interface FormItem extends TestSupport { condition?: Condition readonly type: string readonly title: FormText + readonly nextButtonText?: FormText } export interface Section extends FormItem { diff --git a/libs/application/ui-shell/src/components/Screen.tsx b/libs/application/ui-shell/src/components/Screen.tsx index bc72e13c6a6a2..850aa2b479a23 100644 --- a/libs/application/ui-shell/src/components/Screen.tsx +++ b/libs/application/ui-shell/src/components/Screen.tsx @@ -8,10 +8,13 @@ import React, { useState, } from 'react' import { ApolloError, useMutation } from '@apollo/client' -import { formatText, mergeAnswers } from '@island.is/application/core' +import { + coreMessages, + formatText, + mergeAnswers, +} from '@island.is/application/core' import { Application, - Answer, ExternalData, FormItemTypes, FormModes, @@ -19,6 +22,7 @@ import { Schema, BeforeSubmitCallback, Section, + FormText, } from '@island.is/application/types' import { Box, @@ -50,6 +54,7 @@ import FormExternalDataProvider from './FormExternalDataProvider' import { extractAnswersToSubmitFromScreen, findSubmitField } from '../utils' import ScreenFooter from './ScreenFooter' import RefetchContext from '../context/RefetchContext' +import { MessageDescriptor } from 'react-intl' type ScreenProps = { activeScreenIndex: number @@ -113,6 +118,7 @@ const Screen: FC> = ({ resolver({ formValue, context, formatMessage }), context: { dataSchema, formNode: screen }, }) + const [fieldLoadingState, setFieldLoadingState] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false) const refetch = useContext<() => void>(RefetchContext) @@ -258,6 +264,8 @@ const Screen: FC> = ({ const { width } = useWindowSize() const headerHeight = 85 + const nextButtonText = screen.nextButtonText ?? coreMessages.buttonNext + useEffect(() => { if (width < theme.breakpoints.md) { return setIsMobile(true) @@ -315,6 +323,7 @@ const Screen: FC> = ({ screen.type === FormItemTypes.REPEATER || screen.type === FormItemTypes.EXTERNAL_DATA_PROVIDER ) + return ( > = ({ - > = ({ submitField={submitField} loading={loading} canProceed={!isLoadingOrPending} + nextButtonText={nextButtonText} /> diff --git a/libs/application/ui-shell/src/components/ScreenFooter.tsx b/libs/application/ui-shell/src/components/ScreenFooter.tsx index 76bf164611a52..276f7a2c781a2 100644 --- a/libs/application/ui-shell/src/components/ScreenFooter.tsx +++ b/libs/application/ui-shell/src/components/ScreenFooter.tsx @@ -7,6 +7,7 @@ import { FormModes, SubmitField, CallToAction, + FormText, } from '@island.is/application/types' import * as styles from './ScreenFooter.css' @@ -25,6 +26,7 @@ interface FooterProps { shouldLastScreenButtonSubmit?: boolean renderLastScreenBackButton?: boolean submitButtonDisabled?: boolean + nextButtonText?: FormText } type SubmitButton = Omit & { @@ -65,6 +67,7 @@ export const ScreenFooter: FC> = ({ renderLastScreenButton, renderLastScreenBackButton, submitButtonDisabled, + nextButtonText, }) => { const { formatMessage } = useLocale() const { userInfo: user } = useAuth() @@ -168,7 +171,9 @@ export const ScreenFooter: FC> = ({ type="submit" disabled={submitButtonDisabled} > - {formatMessage(coreMessages.buttonNext)} + {nextButtonText + ? formatText(nextButtonText, application, formatMessage) + : formatMessage(coreMessages.buttonNext)} )} diff --git a/libs/application/ui-shell/src/lib/FormShell.tsx b/libs/application/ui-shell/src/lib/FormShell.tsx index 0317de002a77e..46d32069587fb 100644 --- a/libs/application/ui-shell/src/lib/FormShell.tsx +++ b/libs/application/ui-shell/src/lib/FormShell.tsx @@ -1,5 +1,4 @@ import React, { FC, useEffect, useReducer, useState } from 'react' -import cn from 'classnames' import { Application,