feat(IT Wallet): [SIW-1090] Add NFC enable instructions screen

locales/en/index.yml

@@ -3037,6 +3037,17 @@ features:
           cieId:
             title: CieID
             subtitle: Usa credenziali e app CieID
+      nfc:
+        title: Attiva l'NFC per continuare
+        description: La funzionalità NFC permette al dispositivo di leggere la tua CIE.
+        header: "Ecco come:"
+        steps:
+          label: Step {{value}}
+          1: Vai alle impostazioni
+          2: Cerca "NFC"
+          3: Attivalo
+        primaryAction: Vai alle impostazioni
+        secondaryAction: Ho fatto
 webView:
   error:
     missingParams: Not all information necessary to access this page are available

locales/it/index.yml

@@ -3037,6 +3037,17 @@ features:
           cieId:
             title: CieID
             subtitle: Usa credenziali e app CieID
+      nfc:
+        title: Attiva l'NFC per continuare
+        description: La funzionalità NFC permette al dispositivo di leggere la tua CIE.
+        header: "Ecco come:"
+        steps:
+          label: Step {{value}}
+          1: Vai alle impostazioni
+          2: Cerca "NFC"
+          3: Attivalo
+        primaryAction: Vai alle impostazioni
+        secondaryAction: Ho fatto
 webView:
   error:
     missingParams: Non sono presenti le informazioni necessarie per accedere a questa pagina

ts/features/itwallet/identification/screens/ItwIdentificationModeSelectionScreen.tsx

@@ -10,22 +10,25 @@ import React from "react";
 import { Alert } from "react-native";
 import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
 import I18n from "../../../../i18n";
-import { nfcIsEnabled } from "../../../../store/actions/cie";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import {
   isCieSupportedSelector,
   isNfcEnabledSelector
 } from "../../../../store/reducers/cie";
 import { cieFlowForDevServerEnabled } from "../../../cieLogin/utils";
+import { ITW_ROUTES } from "../../navigation/routes";
+import { itwNfcIsEnabled } from "../store/actions";
 
 export const ItwIdentificationModeSelectionScreen = () => {
+  const navigation = useIONavigation();
   const dispatch = useIODispatch();
   const isCieSupportedPot = useIOSelector(isCieSupportedSelector);
   const isNfcEnabledPot = useIOSelector(isNfcEnabledSelector);
 
   useFocusEffect(
     React.useCallback(() => {
-      dispatch(nfcIsEnabled.request());
+      dispatch(itwNfcIsEnabled.request());
     }, [dispatch])
   );
 
@@ -45,9 +48,11 @@ export const ItwIdentificationModeSelectionScreen = () => {
 
   const handleCiePinPress = () => {
     if (isNfcEnabled) {
-      Alert.alert("NFC not enabled");
-    } else {
       Alert.alert("Not implemented");
+    } else {
+      navigation.navigate(ITW_ROUTES.MAIN, {
+        screen: ITW_ROUTES.IDENTIFICATION.NFC_INSTRUCTIONS
+      });
     }
   };
 

ts/features/itwallet/identification/screens/ItwIdentificationNfcInstructionsScreen.tsx

@@ -0,0 +1,74 @@
+import {
+  ContentWrapper,
+  Divider,
+  ListItemHeader,
+  ListItemInfo
+} from "@pagopa/io-app-design-system";
+import React from "react";
+import { Linking } from "react-native";
+import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
+import I18n from "../../../../i18n";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { FooterStackButton } from "../../common/components/FooterStackButton";
+
+export const ItwIdentificationNfcInstructionsScreen = () => {
+  const navigation = useIONavigation();
+
+  const handleOpenSettingsPress = async () => {
+    await Linking.openSettings();
+  };
+
+  const handleClosePress = () => {
+    navigation.pop();
+  };
+
+  return (
+    <RNavScreenWithLargeHeader
+      title={{ label: I18n.t("features.itWallet.identification.nfc.title") }}
+      description={I18n.t("features.itWallet.identification.nfc.description")}
+      fixedBottomSlot={
+        <FooterStackButton
+          primaryActionProps={{
+            label: I18n.t("features.itWallet.identification.nfc.primaryAction"),
+            onPress: handleOpenSettingsPress
+          }}
+          secondaryActionProps={{
+            label: I18n.t(
+              "features.itWallet.identification.nfc.secondaryAction"
+            ),
+            onPress: handleClosePress
+          }}
+        />
+      }
+    >
+      <ContentWrapper>
+        <ListItemHeader
+          label={I18n.t("features.itWallet.identification.nfc.header")}
+        />
+        <ListItemInfo
+          label={I18n.t("features.itWallet.identification.nfc.steps.label", {
+            value: 1
+          })}
+          value={I18n.t("features.itWallet.identification.nfc.steps.1")}
+          icon="systemSettingsAndroid"
+        />
+        <Divider />
+        <ListItemInfo
+          label={I18n.t("features.itWallet.identification.nfc.steps.label", {
+            value: 2
+          })}
+          value={I18n.t("features.itWallet.identification.nfc.steps.2")}
+          icon="systemAppsAndroid"
+        />
+        <Divider />
+        <ListItemInfo
+          label={I18n.t("features.itWallet.identification.nfc.steps.label", {
+            value: 3
+          })}
+          value={I18n.t("features.itWallet.identification.nfc.steps.3")}
+          icon="systemToggleInstructions"
+        />
+      </ContentWrapper>
+    </RNavScreenWithLargeHeader>
+  );
+};

ts/features/itwallet/navigation/ItwParamsList.ts

@@ -5,4 +5,5 @@ export type ItwParamsList = {
   [ITW_ROUTES.DISCOVERY.INFO]: undefined;
   // IDENTIFICATION
   [ITW_ROUTES.IDENTIFICATION.MODE_SELECTION]: undefined;
+  [ITW_ROUTES.IDENTIFICATION.NFC_INSTRUCTIONS]: undefined;
 };

ts/features/itwallet/navigation/ItwStackNavigator.tsx

@@ -1,8 +1,9 @@
-import * as React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { ItwDiscoveryInfoScreen } from "../discovery/screens/ItwDiscoveryInfoScreen";
+import * as React from "react";
 import { isGestureEnabled } from "../../../utils/navigation";
 import { ItwIdentificationModeSelectionScreen } from "../identification/screens/ItwIdentificationModeSelectionScreen";
+import { ItwDiscoveryInfoScreen } from "../discovery/screens/ItwDiscoveryInfoScreen";
+import { ItwIdentificationNfcInstructionsScreen } from "../identification/screens/ItwIdentificationNfcInstructionsScreen";
 import { ItwParamsList } from "./ItwParamsList";
 import { ITW_ROUTES } from "./routes";
 
@@ -23,5 +24,9 @@ export const ItwStackNavigator = () => (
       name={ITW_ROUTES.IDENTIFICATION.MODE_SELECTION}
       component={ItwIdentificationModeSelectionScreen}
     />
+    <Stack.Screen
+      name={ITW_ROUTES.IDENTIFICATION.NFC_INSTRUCTIONS}
+      component={ItwIdentificationNfcInstructionsScreen}
+    />
   </Stack.Navigator>
 );

ts/features/itwallet/navigation/routes.ts

@@ -4,6 +4,7 @@ export const ITW_ROUTES = {
     INFO: "ITW_DISCOVERY_INFO"
   } as const,
   IDENTIFICATION: {
-    MODE_SELECTION: "ITW_IDENTIFICATION_MODE_SELECTION"
+    MODE_SELECTION: "ITW_IDENTIFICATION_MODE_SELECTION",
+    NFC_INSTRUCTIONS: "ITW_IDENTIFICATION_NFC_INSTRUCTIONS"
   } as const
 };