chore(IT Wallet): [SIW-1793] Update non-matching identity screen

locales/en/index.yml

@@ -3363,9 +3363,13 @@ features:
         primaryAction: Apri impostazioni
         secondaryAction: Continua
       notMatchingIdentityScreen:
-        title: "Tutti i documenti saranno rimossi da IO"
-        subtitle: "Se accedi con una nuova identità, le versioni digitali dei documenti che hai aggiunto al Portafoglio saranno rimosse e Documenti su IO disattivata."
-        action: "Continua con la nuova identità"
+        title: "Stai accedendo con un nuovo dispositivo"
+        message: "Quando accedi all'app IO da un dispositivo diverso da quello abituale (ad esempio quello di un'altra persona) per motivi di sicurezza queste funzionalità vengono reimpostate:\n\n- Documenti su IO"
+        banner:
+          title: Ti suggeriamo di accedere all'app solo dal tuo dispositivo.
+        alert:
+          title: Vuoi davvero uscire?
+          message: Dovrai entrare di nuovo con SPID o CIE per usare l'app.
       loading:
         cieId:
           title: Connessione con la tua app CieID in corso...

locales/it/index.yml

@@ -3363,9 +3363,13 @@ features:
         primaryAction: Apri impostazioni
         secondaryAction: Continua
       notMatchingIdentityScreen:
-        title: "Tutti i documenti saranno rimossi da IO"
-        subtitle: "Se accedi con una nuova identità, le versioni digitali dei documenti che hai aggiunto al Portafoglio saranno rimosse e Documenti su IO disattivata."
-        action: "Continua con la nuova identità"
+        title: "Stai accedendo con un nuovo dispositivo"
+        message: "Quando accedi all'app IO da un dispositivo diverso da quello abituale (ad esempio quello di un'altra persona) per motivi di sicurezza queste funzionalità vengono reimpostate:\n\n- Documenti su IO"
+        banner:
+          title: Ti suggeriamo di accedere all'app solo dal tuo dispositivo.
+        alert:
+          title: Vuoi davvero uscire?
+          message: Dovrai entrare di nuovo con SPID o CIE per usare l'app.
       loading:
         cieId:
           title: Connessione con la tua app CieID in corso...

ts/features/itwallet/lifecycle/screens/ItwIdentityNotMatchingScreen.tsx

@@ -1,18 +1,24 @@
 import React from "react";
 import { useFocusEffect } from "@react-navigation/native";
+import { Banner, ContentWrapper, VStack } from "@pagopa/io-app-design-system";
+import { Alert } from "react-native";
+import { constNull } from "fp-ts/lib/function";
 import I18n from "../../../../i18n";
 import {
   itwLifecycleIdentityCheckCompleted,
   itwLifecycleWalletReset
 } from "../store/actions";
-import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
 import { logoutRequest } from "../../../../store/actions/authentication";
 import { useAvoidHardwareBackButton } from "../../../../utils/useAvoidHardwareBackButton";
 import { useIODispatch, useIOStore } from "../../../../store/hooks";
 import { trackItwIdNotMatch, trackWalletNewIdReset } from "../../analytics";
+import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
+import { useItwDisableGestureNavigation } from "../../common/hooks/useItwDisableGestureNavigation";
+import IOMarkdown from "../../../../components/IOMarkdown";
 
 export const ItwIdentityNotMatchingScreen = () => {
   useAvoidHardwareBackButton();
+  useItwDisableGestureNavigation();
 
   useFocusEffect(trackItwIdNotMatch);
 
@@ -26,33 +32,66 @@ export const ItwIdentityNotMatchingScreen = () => {
   };
 
   const handleCancel = () => {
-    dispatch(logoutRequest({ withApiCall: true }));
+    Alert.alert(
+      I18n.t(
+        "features.itWallet.identification.notMatchingIdentityScreen.alert.title"
+      ),
+      I18n.t(
+        "features.itWallet.identification.notMatchingIdentityScreen.alert.message"
+      ),
+      [
+        {
+          text: I18n.t("global.buttons.exit"),
+          style: "destructive",
+          onPress: () => dispatch(logoutRequest({ withApiCall: true }))
+        },
+        {
+          text: I18n.t("global.buttons.cancel"),
+          onPress: constNull // Do nothing, just dismiss the alert
+        }
+      ],
+      { cancelable: false }
+    );
   };
 
   return (
-    <OperationResultScreenContent
-      pictogram="attention"
-      title={I18n.t(
-        "features.itWallet.identification.notMatchingIdentityScreen.title"
-      )}
-      subtitle={I18n.t(
-        "features.itWallet.identification.notMatchingIdentityScreen.subtitle"
-      )}
-      isHeaderVisible={false}
-      action={{
+    <IOScrollViewWithLargeHeader
+      title={{
         label: I18n.t(
-          "features.itWallet.identification.notMatchingIdentityScreen.action"
-        ),
-        accessibilityLabel: I18n.t(
-          "features.itWallet.identification.notMatchingIdentityScreen.action"
-        ),
-        onPress: resetWallet
+          "features.itWallet.identification.notMatchingIdentityScreen.title"
+        )
       }}
-      secondaryAction={{
-        label: I18n.t("global.buttons.cancel"),
-        accessibilityLabel: I18n.t("global.buttons.cancel"),
-        onPress: handleCancel
+      headerActionsProp={{ showHelp: true }}
+      goBack={handleCancel}
+      actions={{
+        type: "TwoButtons",
+        primary: {
+          label: I18n.t("global.buttons.continue"),
+          onPress: resetWallet
+        },
+        secondary: {
+          label: I18n.t("global.buttons.exit"),
+          onPress: handleCancel
+        }
       }}
-    />
+    >
+      <ContentWrapper>
+        <VStack space={24}>
+          <IOMarkdown
+            content={I18n.t(
+              "features.itWallet.identification.notMatchingIdentityScreen.message"
+            )}
+          />
+          <Banner
+            content={I18n.t(
+              "features.itWallet.identification.notMatchingIdentityScreen.banner.title"
+            )}
+            pictogramName="security"
+            size="small"
+            color="neutral"
+          />
+        </VStack>
+      </ContentWrapper>
+    </IOScrollViewWithLargeHeader>
   );
 };

ts/features/itwallet/navigation/ItwStackNavigator.tsx

@@ -218,7 +218,7 @@ const InnerNavigator = () => {
       <Stack.Screen
         name={ITW_ROUTES.IDENTITY_NOT_MATCHING_SCREEN}
         component={ItwIdentityNotMatchingScreen}
-        options={{ headerShown: false, gestureEnabled: false }}
+        options={{ gestureEnabled: false }}
       />
       <Stack.Screen
         name={ITW_ROUTES.WALLET_REVOCATION_SCREEN}