fix(application-system): Possible to go back to hidden screens

libs/application/ui-shell/src/components/Screen.tsx

@@ -76,6 +76,7 @@ type ScreenProps = {
   renderLastScreenBackButton?: boolean
   goToScreen: (id: string) => void
   setUpdateForbidden: (value: boolean) => void
+  canGoBack: boolean
 }
 
 const getServerValidationErrors = (error: ApolloError | undefined) => {
@@ -107,6 +108,7 @@ const Screen: FC<React.PropsWithChildren<ScreenProps>> = ({
   renderLastScreenBackButton,
   screen,
   sections,
+  canGoBack,
 }) => {
   const { answers: formValue, externalData, id: applicationId } = application
   const { lang: locale, formatMessage } = useLocale()
@@ -416,6 +418,7 @@ const Screen: FC<React.PropsWithChildren<ScreenProps>> = ({
           numberOfScreens={numberOfScreens}
           mode={mode}
           goBack={goBack}
+          canGoBack={canGoBack}
           submitField={submitField}
           loading={loading}
           canProceed={!isLoadingOrPending}

libs/application/ui-shell/src/components/ScreenFooter.tsx

@@ -27,6 +27,7 @@ interface FooterProps {
   renderLastScreenBackButton?: boolean
   submitButtonDisabled?: boolean
   nextButtonText?: FormText
+  canGoBack: boolean
 }
 
 type SubmitButton = Omit<ButtonTypes, 'circle'> & {
@@ -68,13 +69,13 @@ export const ScreenFooter: FC<React.PropsWithChildren<FooterProps>> = ({
   renderLastScreenBackButton,
   submitButtonDisabled,
   nextButtonText,
+  canGoBack,
 }) => {
   const { formatMessage } = useLocale()
   const user = useUserInfo()
   const hasSubmitField = submitField !== undefined
   const isLastScreen = activeScreenIndex === numberOfScreens - 1
-  const showGoBack =
-    activeScreenIndex > 0 && (!isLastScreen || renderLastScreenBackButton)
+  const showGoBack = canGoBack && (!isLastScreen || renderLastScreenBackButton)
 
   if (
     (isLastScreen && !renderLastScreenButton) ||

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 { canGoBack } from '../reducer/reducerUtils'
 
 export const FormShell: FC<
   React.PropsWithChildren<{
@@ -142,6 +143,7 @@ export const FormShell: FC<
                       payload,
                     })
                   }}
+                  canGoBack={canGoBack(screens, activeScreen)}
                   prevScreen={() => dispatch({ type: ActionTypes.PREV_SCREEN })}
                   activeScreenIndex={activeScreen}
                   numberOfScreens={screens.length}

libs/application/ui-shell/src/reducer/reducerUtils.ts

@@ -181,6 +181,25 @@ export const moveToScreen = (
   return screenIndex
 }
 
+export const canGoBack = (
+  screens: FormScreen[],
+  screenIndex: number,
+): boolean => {
+  // Check if we're already at the start
+  if (screenIndex <= 0) {
+    return false
+  }
+
+  // Look for any navigable screen behind where we are
+  for (let i = screenIndex - 1; i >= 0; i--) {
+    if (screens[i].isNavigable) {
+      return true
+    }
+  }
+
+  return false
+}
+
 const convertFieldToScreen = (
   field: Field,
   answers: FormValue,