chore(IT Wallet): [SIW-579] Refactor componente ItwResultScreen (#5114

)

## Short description
This PR proposes a refactor of the `ItwResultScreen` to align it more
closely with its intended function as a screen body, rather than a
standalone screen. This component can serve as an error mapping
component in a folded `pot` or as the foundational element for handling
various types of errors. Therefore, it should no longer include any
screen-related base components but should instead function solely as a
body component.

## List of changes proposed in this pull request
- Renames the component to `ItwKoView.tsx`;
- Removes the outer `SafeAreaView` component which should be handled
instead by the parent screen component;
- Adjusts its usage in the `ItwMissingFeatureScreen.tsx`.

## How to test
Check the `ItwMissingFeatureScreen` for any regression both with old and
new design system.

ts/features/it-wallet/components/ItwKoView.tsx

@@ -0,0 +1,96 @@
+import {
+  ButtonLink,
+  ButtonSolid,
+  H3,
+  IOPictograms,
+  LabelSmall,
+  Pictogram,
+  VSpacer,
+  WithTestID
+} from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+
+type ActionProps = {
+  label: string;
+  accessibilityLabel: string;
+  onPress: () => void;
+};
+
+type ItwKoViewProps = WithTestID<{
+  pictogram?: IOPictograms;
+  title: string;
+  subtitle?: string;
+  action?: ActionProps;
+  secondaryAction?: ActionProps;
+}>;
+
+const ItwKoView = ({
+  pictogram,
+  title,
+  subtitle,
+  action,
+  secondaryAction,
+  testID
+}: ItwKoViewProps) => (
+  <ScrollView
+    testID={testID}
+    centerContent={true}
+    contentContainerStyle={[
+      styles.wrapper,
+      /* Android fallback because `centerContent` is only an iOS property */
+      Platform.OS === "android" && styles.wrapper_android
+    ]}
+  >
+    {pictogram && (
+      <>
+        <Pictogram name={pictogram} size={120} />
+        <VSpacer size={24} />
+      </>
+    )}
+    <H3 style={styles.text}>{title}</H3>
+    {subtitle && (
+      <>
+        <VSpacer size={8} />
+        <LabelSmall style={styles.text} color="grey-650" weight="Regular">
+          {subtitle}
+        </LabelSmall>
+      </>
+    )}
+    {action && (
+      <>
+        <VSpacer size={24} />
+        <View>
+          <ButtonSolid {...action} />
+        </View>
+      </>
+    )}
+    {secondaryAction && (
+      <>
+        <VSpacer size={24} />
+        <View>
+          <ButtonLink {...secondaryAction} />
+        </View>
+      </>
+    )}
+  </ScrollView>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    alignContent: "center"
+  },
+  wrapper_android: {
+    flexGrow: 1,
+    justifyContent: "center"
+  },
+  text: {
+    textAlign: "center"
+  }
+});
+
+export default ItwKoView;

ts/features/it-wallet/screens/generic/ItwMissingFeatureScreen.tsx

@@ -10,7 +10,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { View } from "react-native";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import I18n from "../../../../i18n";
-import ItwResultScreen from "./ItwResultScreen";
+import ItwKoView from "../../components/ItwKoView";
 
 const ItwMissingFeatureScreen = () => {
   const { isExperimental } = useIOExperimentalDesign();
@@ -21,7 +21,7 @@ const ItwMissingFeatureScreen = () => {
    * Includes a centered button to go back.
    */
   const ExperimentalContentView = () => (
-    <ItwResultScreen
+    <ItwKoView
       title={I18n.t("features.itWallet.missingFeatureScreen.title")}
       subtitle={I18n.t("features.itWallet.missingFeatureScreen.subtitle")}
       pictogram="empty"
@@ -40,11 +40,13 @@ const ItwMissingFeatureScreen = () => {
    * Doesn't include a button to go back.
    */
   const LegacyContentView = () => (
-    <ItwResultScreen
-      title={I18n.t("features.itWallet.missingFeatureScreen.title")}
-      subtitle={I18n.t("features.itWallet.missingFeatureScreen.subtitle")}
-      pictogram="empty"
-    />
+    <View style={{ ...IOStyles.flex, ...IOStyles.horizontalContentPadding }}>
+      <ItwKoView
+        title={I18n.t("features.itWallet.missingFeatureScreen.title")}
+        subtitle={I18n.t("features.itWallet.missingFeatureScreen.subtitle")}
+        pictogram="empty"
+      />
+    </View>
   );
 
   /**
@@ -62,7 +64,9 @@ const ItwMissingFeatureScreen = () => {
   };
 
   return isExperimental ? (
-    <ExperimentalContentView />
+    <View style={{ ...IOStyles.flex, ...IOStyles.horizontalContentPadding }}>
+      <ExperimentalContentView />
+    </View>
   ) : (
     <BaseScreenComponent
       goBack={true}