feat(application-system): Custom text for next button in applications (…

…#15076) * feat: nextButtonText for customField * chore: remove code for dev purposes * chore: remove console.log * chore: remove line breaks * fix: pr comments --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Jun 14, 2024 · 99fe166 · 99fe166
1 parent b6c9b21
commit 99fe166
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -8,17 +8,21 @@ 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,
   FormValue,
   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<React.PropsWithChildren<ScreenProps>> = ({
       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<React.PropsWithChildren<ScreenProps>> = ({
   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<React.PropsWithChildren<ScreenProps>> = ({
     screen.type === FormItemTypes.REPEATER ||
     screen.type === FormItemTypes.EXTERNAL_DATA_PROVIDER
   )
+
   return (
     <FormProvider {...hookFormData}>
       <Box
@@ -391,7 +400,6 @@ const Screen: FC<React.PropsWithChildren<ScreenProps>> = ({
         </GridColumn>
 
         <ToastContainer hideProgressBar closeButton useKeyframeStyles={false} />
-
         <ScreenFooter
           submitButtonDisabled={submitButtonDisabled}
           application={application}
@@ -404,6 +412,7 @@ const Screen: FC<React.PropsWithChildren<ScreenProps>> = ({
           submitField={submitField}
           loading={loading}
           canProceed={!isLoadingOrPending}
+          nextButtonText={nextButtonText}
         />
       </Box>
     </FormProvider>

diff --git 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<ButtonTypes, 'circle'> & {
@@ -65,6 +67,7 @@ export const ScreenFooter: FC<React.PropsWithChildren<FooterProps>> = ({
   renderLastScreenButton,
   renderLastScreenBackButton,
   submitButtonDisabled,
+  nextButtonText,
 }) => {
   const { formatMessage } = useLocale()
   const { userInfo: user } = useAuth()
@@ -168,7 +171,9 @@ export const ScreenFooter: FC<React.PropsWithChildren<FooterProps>> = ({
                   type="submit"
                   disabled={submitButtonDisabled}
                 >
-                  {formatMessage(coreMessages.buttonNext)}
+                  {nextButtonText
+                    ? formatText(nextButtonText, application, formatMessage)
+                    : formatMessage(coreMessages.buttonNext)}
                 </Button>
               </Box>
             )}

diff --git 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,