Turn fullscreen error from screen into component

src/app/UpdateScreen.tsx

@@ -1,6 +1,6 @@
 import {type ReactNode, useEffect} from 'react'
 import {ScreenOutsideNavigation} from '@/components/features/screen/ScreenOutsideNavigation'
-import {FullScreenError} from '@/components/features/screen/error/FullScreenError'
+import {FullScreenError} from '@/components/ui/feedback/error/FullScreenError'
 import {UpdateFigure} from '@/components/ui/media/errors/UpdateFigure'
 import {useDeviceContext} from '@/hooks/useDeviceContext'
 import {useHideSplashScreen} from '@/hooks/useHideSplashScreen'
@@ -54,7 +54,6 @@ export const UpdateScreen = ({children}: Props) => {
           testID="UpdateScreenOpenStoreButton"
           text="Om de app te kunnen gebruiken moet u eerst updaten."
           title="De versie van de app is verouderd en werkt niet meer."
-          withTopInset
         />
       </ScreenOutsideNavigation>
     )

src/components/features/NoInternetFullScreenError.tsx

@@ -2,7 +2,7 @@ import {useFocusEffect} from '@react-navigation/core'
 import {useCallback, useEffect} from 'react'
 import {Platform, Linking} from 'react-native'
 import {Screen} from '@/components/features/screen/Screen'
-import {FullScreenError} from '@/components/features/screen/error/FullScreenError'
+import {FullScreenError} from '@/components/ui/feedback/error/FullScreenError'
 import {NoInternetFigure} from '@/components/ui/media/errors/NoInternetFigure'
 import {useDispatch} from '@/hooks/redux/useDispatch'
 import {useDeviceContext} from '@/hooks/useDeviceContext'

src/components/features/screen/Screen.tsx

@@ -14,6 +14,7 @@ export type ScreenProps = {
   bottomSheet?: ReactNode
   children: ReactNode
   hasStickyAlert?: boolean
+  isOutsideNavigation?: boolean
   keyboardAware?: boolean
   scroll?: boolean
   stickyFooter?: ReactNode

src/components/features/screen/ScreenBase.tsx

@@ -3,22 +3,19 @@ import {StyleSheet} from 'react-native'
 import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context'
 import {HideFromAccessibilityWhenBottomSheetIsOpen} from '@/components/features/accessibility/HideFromAccessibilityWhenBottomSheetIsOpen'
 import {HideFromAccessibilityWhenOverlayIsOpen} from '@/components/features/accessibility/HideFromAccessibilityWhenOverlayIsOpen'
-import {Header} from '@/components/features/header/Header'
 import {ScreenProps, WithInsetProps} from '@/components/features/screen/Screen'
+import {ScreenHeader} from '@/components/features/screen/ScreenHeader'
 import {ScreenInnerWrapper} from '@/components/features/screen/ScreenInnerWrapper'
 import {ScreenWrapper} from '@/components/features/screen/ScreenWrapper'
 import {AlertTopOfScreen} from '@/components/ui/feedback/alert/AlertTopOfScreen'
 import {Gutter} from '@/components/ui/layout/Gutter'
-import {useNavigation} from '@/hooks/navigation/useNavigation'
-import {useRoute} from '@/hooks/navigation/useRoute'
-import {useSelector} from '@/hooks/redux/useSelector'
 import {DisableScrollProvider} from '@/providers/disableScroll.provider'
-import {selectIsBottomSheetPresentRouteNames} from '@/store/slices/bottomSheet'
 
 export const ScreenBase = ({
   bottomSheet,
   children,
   hasStickyAlert,
+  isOutsideNavigation = false,
   stickyFooter,
   stickyHeader,
   withBottomInset = true,
@@ -29,17 +26,10 @@ export const ScreenBase = ({
   trackScroll,
   ...wrapperProps
 }: ScreenProps) => {
-  const {name: routeName} = useRoute()
-  const isBottomSheetPresentRouteNames = useSelector(
-    selectIsBottomSheetPresentRouteNames,
-  )
-  const isBottomSheetPresent =
-    isBottomSheetPresentRouteNames.includes(routeName)
-
   const insets = useSafeAreaInsets()
 
   const hasStickyFooter = !!stickyFooter
-  const hasStickyHeader = !!stickyHeader || !!isBottomSheetPresent
+  const hasStickyHeader = !!stickyHeader
 
   const styles = useMemo(
     () =>
@@ -61,21 +51,13 @@ export const ScreenBase = ({
       withTopInset,
     ],
   )
-  const navigation = useNavigation()
-  const route = useRoute()
 
   return (
     <DisableScrollProvider>
       <HideFromAccessibilityWhenOverlayIsOpen
         style={styles.screen}
         testID={testID}>
-        {!!isBottomSheetPresent && (
-          <Header
-            back={{}}
-            navigation={navigation}
-            route={route}
-          />
-        )}
+        {!isOutsideNavigation && <ScreenHeader />}
         {stickyHeader}
         {!!hasStickyAlert && <AlertTopOfScreen />}
         <HideFromAccessibilityWhenBottomSheetIsOpen

src/components/features/screen/ScreenHeader.tsx

@@ -0,0 +1,27 @@
+import {Header} from '@/components/features/header/Header'
+import {useNavigation} from '@/hooks/navigation/useNavigation'
+import {useRoute} from '@/hooks/navigation/useRoute'
+import {useSelector} from '@/hooks/redux/useSelector'
+import {selectIsBottomSheetPresentRouteNames} from '@/store/slices/bottomSheet'
+
+export const ScreenHeader = () => {
+  const isBottomSheetPresentRouteNames = useSelector(
+    selectIsBottomSheetPresentRouteNames,
+  )
+  const navigation = useNavigation()
+  const route = useRoute()
+  const isBottomSheetPresent = isBottomSheetPresentRouteNames.includes(
+    route.name,
+  )
+
+  return (
+    !!isBottomSheetPresent &&
+    !!route && (
+      <Header
+        back={{}}
+        navigation={navigation}
+        route={route}
+      />
+    )
+  )
+}

src/components/features/screen/ScreenOutsideNavigation.tsx

@@ -13,5 +13,10 @@ export const ScreenOutsideNavigation = ({
 }: ScreenOutsideNavigationProps) => {
   useTrackScreenOutsideNavigation(name)
 
-  return <ScreenBase {...screenProps} />
+  return (
+    <ScreenBase
+      {...screenProps}
+      isOutsideNavigation
+    />
+  )
 }

src/components/features/screen/error/Content.tsx → src/components/ui/feedback/error/Content.tsx

@@ -1,10 +1,10 @@
 import {useMemo} from 'react'
-import {FullScreenErrorHeader} from '@/components/features/screen/error/Header'
-import {ImageWithBackground} from '@/components/features/screen/error/ImageWithBackground'
+import {FullScreenErrorHeader} from '@/components/ui/feedback/error/Header'
+import {ImageWithBackground} from '@/components/ui/feedback/error/ImageWithBackground'
 import {
   SharedProps,
   FullScreenErrorProps,
-} from '@/components/features/screen/error/types'
+} from '@/components/ui/feedback/error/types'
 import {Column} from '@/components/ui/layout/Column'
 import {Row} from '@/components/ui/layout/Row'
 

src/components/ui/feedback/error/FullScreenError.tsx

@@ -0,0 +1,58 @@
+import {Button} from '@/components/ui/buttons/Button'
+import {Box} from '@/components/ui/containers/Box'
+import {FullScreenErrorContent} from '@/components/ui/feedback/error/Content'
+import {FullScreenErrorHeader} from '@/components/ui/feedback/error/Header'
+import {FullScreenErrorProps} from '@/components/ui/feedback/error/types'
+import {Column} from '@/components/ui/layout/Column'
+import {useDeviceContext} from '@/hooks/useDeviceContext'
+
+export const FullScreenError = ({
+  buttonAccessibilityLabel,
+  buttonLabel,
+  error,
+  text,
+  Image,
+  onPress,
+  testID,
+  title,
+  TopComponent,
+  withFacadesBackground = true,
+  ...columnProps
+}: FullScreenErrorProps) => {
+  const {isPortrait} = useDeviceContext()
+
+  return (
+    <Column
+      grow={1}
+      {...columnProps}>
+      {!!isPortrait && (
+        <FullScreenErrorHeader
+          error={error}
+          isPortrait={isPortrait}
+          testID={testID + 'Header'}
+          text={text}
+          title={title}
+          TopComponent={TopComponent}
+        />
+      )}
+      <FullScreenErrorContent
+        error={error}
+        Image={Image}
+        isPortrait={isPortrait}
+        testID={testID + 'Content'}
+        text={text}
+        title={title}
+        TopComponent={TopComponent}
+        withFacadesBackground={withFacadesBackground}
+      />
+      <Box inset="md">
+        <Button
+          accessibilityLabel={buttonAccessibilityLabel}
+          label={buttonLabel}
+          onPress={onPress}
+          testID={testID + 'Button'}
+        />
+      </Box>
+    </Column>
+  )
+}

src/components/features/screen/error/Header.tsx → src/components/ui/feedback/error/Header.tsx

@@ -1,5 +1,5 @@
-import {SharedProps} from '@/components/features/screen/error/types'
 import {Box} from '@/components/ui/containers/Box'
+import {SharedProps} from '@/components/ui/feedback/error/types'
 import {Column} from '@/components/ui/layout/Column'
 import {Paragraph} from '@/components/ui/text/Paragraph'
 import {Title} from '@/components/ui/text/Title'
@@ -21,8 +21,7 @@ export const FullScreenErrorHeader = ({
     <Column
       align="center"
       grow={1}
-      gutter="md"
-      halign="center">
+      gutter="md">
       {!!TopComponent && TopComponent}
       <Title
         level="h3"

src/components/features/screen/error/ImageWithBackground.tsx → src/components/ui/feedback/error/ImageWithBackground.tsx

@@ -2,8 +2,8 @@ import {ComponentType} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {SvgProps} from 'react-native-svg'
 import AmsterdamFacadesImage from '@/assets/images/amsterdam-facades.svg'
-import {FullScreenErrorProps} from '@/components/features/screen/error/types'
 import {Box} from '@/components/ui/containers/Box'
+import {FullScreenErrorProps} from '@/components/ui/feedback/error/types'
 import {HideOnSmallSize} from '@/components/ui/layout/HideOnSmallSize'
 import {Theme} from '@/themes/themes'
 import {useThemable} from '@/themes/useThemable'

src/components/features/screen/error/types.ts → src/components/ui/feedback/error/types.ts

@@ -2,7 +2,7 @@ import {SerializedError} from '@reduxjs/toolkit'
 import {FetchBaseQueryError} from '@reduxjs/toolkit/query'
 import {ComponentType, ReactNode} from 'react'
 import {SvgProps} from 'react-native-svg'
-import {ScreenProps} from '@/components/features/screen/Screen'
+import {ColumnProps} from '@/components/ui/layout/Column'
 
 export type ErrorType = FetchBaseQueryError | SerializedError | undefined
 
@@ -13,10 +13,11 @@ export type FullScreenErrorProps = {
   buttonLabel: string
   error?: ErrorType
   onPress: () => void
+  testID: string
   text?: string
   title: string
   withFacadesBackground?: boolean
-} & Omit<ScreenProps, 'children'>
+} & Omit<ColumnProps, 'children'>
 
 export type SharedProps = {
   TopComponent: FullScreenErrorProps['TopComponent']

src/modules/city-pass/components/error/CityPassFullScreenError.tsx

@@ -1,6 +1,6 @@
 import {NoInternetErrorFullScreen} from '@/components/features/NoInternetFullScreenError'
-import {FullScreenError} from '@/components/features/screen/error/FullScreenError'
-import {ErrorType} from '@/components/features/screen/error/types'
+import {FullScreenError} from '@/components/ui/feedback/error/FullScreenError'
+import {ErrorType} from '@/components/ui/feedback/error/types'
 import {useSelector} from '@/hooks/redux/useSelector'
 import {FullScreenErrorFigure} from '@/modules/city-pass/components/error/FullScreenErrorFigure'
 import {selectIsInternetReachable} from '@/store/slices/internetConnection'

src/modules/construction-work/components/project/Project.tsx

@@ -1,9 +1,9 @@
 import {NoInternetErrorFullScreen} from '@/components/features/NoInternetFullScreenError'
-import {FullScreenError} from '@/components/features/screen/error/FullScreenError'
 import {Box} from '@/components/ui/containers/Box'
 import {HorizontalSafeArea} from '@/components/ui/containers/HorizontalSafeArea'
 import {SingleSelectable} from '@/components/ui/containers/SingleSelectable'
 import {PleaseWait} from '@/components/ui/feedback/PleaseWait'
+import {FullScreenError} from '@/components/ui/feedback/error/FullScreenError'
 import {Column} from '@/components/ui/layout/Column'
 import {FigureWithFacadesBackground} from '@/components/ui/media/FigureWithFacadesBackground'
 import {LazyImage} from '@/components/ui/media/LazyImage'

src/modules/construction-work/components/project/ProjectNews.tsx

@@ -1,8 +1,8 @@
 import {skipToken} from '@reduxjs/toolkit/dist/query'
 import {useEffect} from 'react'
 import {NoInternetErrorFullScreen} from '@/components/features/NoInternetFullScreenError'
-import {FullScreenError} from '@/components/features/screen/error/FullScreenError'
 import {PleaseWait} from '@/components/ui/feedback/PleaseWait'
+import {FullScreenError} from '@/components/ui/feedback/error/FullScreenError'
 import {ConstructionWorkDetailFigure} from '@/components/ui/media/errors/ConstructionWorkDetailFigure'
 import {useNavigation} from '@/hooks/navigation/useNavigation'
 import {useSetScreenTitle} from '@/hooks/navigation/useSetScreenTitle'

src/modules/construction-work/components/projects/ProjectsList.tsx

@@ -8,10 +8,10 @@ import type {ProjectsListItem} from '@/modules/construction-work/types/project'
 import type {SerializedError} from '@reduxjs/toolkit'
 import type {FetchBaseQueryError} from '@reduxjs/toolkit/query'
 import {NoInternetErrorFullScreen} from '@/components/features/NoInternetFullScreenError'
-import {FullScreenError} from '@/components/features/screen/error/FullScreenError'
 import {Box} from '@/components/ui/containers/Box'
 import {EmptyMessage} from '@/components/ui/feedback/EmptyMessage'
 import {PleaseWait} from '@/components/ui/feedback/PleaseWait'
+import {FullScreenError} from '@/components/ui/feedback/error/FullScreenError'
 import {ConstructionWorkFigure} from '@/components/ui/media/errors/ConstructionWorkFigure'
 import {useNavigation} from '@/hooks/navigation/useNavigation'
 import {useSelector} from '@/hooks/redux/useSelector'
@@ -201,7 +201,6 @@ export const ProjectsList = ({
         onPress={() => navigation.goBack()}
         testID="ConstructionWorkError"
         title="Er zijn geen werkzaamheden beschikbaar"
-        withBottomInset
       />
     )
   }

src/modules/home/components/ModuleSettings.tsx

@@ -1,10 +1,10 @@
 import {pascalCase} from 'pascal-case'
 import {getVersion} from 'react-native-device-info'
 import {NoInternetErrorFullScreen} from '@/components/features/NoInternetFullScreenError'
-import {FullScreenError} from '@/components/features/screen/error/FullScreenError'
 import {Box} from '@/components/ui/containers/Box'
 import {EmptyMessage} from '@/components/ui/feedback/EmptyMessage'
 import {PleaseWait} from '@/components/ui/feedback/PleaseWait'
+import {FullScreenError} from '@/components/ui/feedback/error/FullScreenError'
 import {Column} from '@/components/ui/layout/Column'
 import {ModulesFigure} from '@/components/ui/media/errors/ModulesFigure'
 import {Paragraph} from '@/components/ui/text/Paragraph'

src/modules/home/screens/Home.screen.tsx

@@ -1,8 +1,8 @@
 import {NoInternetErrorFullScreen} from '@/components/features/NoInternetFullScreenError'
 import {Tip} from '@/components/features/product-tour/types'
 import {Screen} from '@/components/features/screen/Screen'
-import {FullScreenError} from '@/components/features/screen/error/FullScreenError'
 import {PleaseWait} from '@/components/ui/feedback/PleaseWait'
+import {FullScreenError} from '@/components/ui/feedback/error/FullScreenError'
 import {ModulesFigure} from '@/components/ui/media/errors/ModulesFigure'
 import {useSelector} from '@/hooks/redux/useSelector'
 import {useDeviceContext} from '@/hooks/useDeviceContext'