feat(IT Wallet): [SIW-980] Add eID issuing IDP selection screen

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

@@ -0,0 +1,46 @@
+import { VSpacer } from "@pagopa/io-app-design-system";
+import { useFocusEffect } from "@react-navigation/native";
+import React from "react";
+import { Alert } from "react-native";
+import { SpidIdp } from "../../../../../definitions/content/SpidIdp";
+import { isReady } from "../../../../common/model/RemoteValue";
+import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
+import { randomOrderIdps } from "../../../../screens/authentication/IdpSelectionScreen";
+import { loadIdps } from "../../../../store/actions/content";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { idpsRemoteValueSelector } from "../../../../store/reducers/content";
+import {
+  LocalIdpsFallback,
+  idps as idpsFallback
+} from "../../../../utils/idps";
+import IdpsGrid from "../../../../components/IdpsGrid";
+
+export const ItwIdentificationIdpSelectionScreen = () => {
+  const dispatch = useIODispatch();
+  const idps = useIOSelector(idpsRemoteValueSelector);
+  const idpValue = isReady(idps) ? idps.value.items : idpsFallback;
+  const randomIdps = React.useRef<ReadonlyArray<SpidIdp | LocalIdpsFallback>>(
+    randomOrderIdps(idpValue)
+  );
+
+  useFocusEffect(
+    React.useCallback(() => {
+      dispatch(loadIdps.request());
+    }, [dispatch])
+  );
+
+  const onIdpSelected = (_idp: LocalIdpsFallback) => {
+    Alert.alert("Not implemented");
+  };
+
+  return (
+    <RNavScreenWithLargeHeader title={{ label: "" }}>
+      <IdpsGrid
+        idps={randomIdps.current}
+        onIdpSelected={onIdpSelected}
+        headerComponent={undefined}
+        footerComponent={<VSpacer size={24} />}
+      />
+    </RNavScreenWithLargeHeader>
+  );
+};

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

@@ -14,9 +14,9 @@ import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { isCieSupportedSelector } from "../../../../store/reducers/cie";
 import { cieFlowForDevServerEnabled } from "../../../cieLogin/utils";
-import { ITW_ROUTES } from "../../navigation/routes";
 import { itwNfcIsEnabled } from "../store/actions";
 import { itwIsNfcEnabledSelector } from "../store/selectors";
+import { ITW_ROUTES } from "../../navigation/routes";
 
 export const ItwIdentificationModeSelectionScreen = () => {
   const navigation = useIONavigation();
@@ -41,7 +41,9 @@ export const ItwIdentificationModeSelectionScreen = () => {
   );
 
   const handleSpidPress = () => {
-    Alert.alert("Not implemented");
+    navigation.navigate(ITW_ROUTES.MAIN, {
+      screen: ITW_ROUTES.IDENTIFICATION.IDP_SELECTION
+    });
   };
 
   const handleCiePinPress = () => {

ts/features/itwallet/navigation/ItwParamsList.ts

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

ts/features/itwallet/navigation/ItwStackNavigator.tsx

@@ -4,6 +4,7 @@ import { isGestureEnabled } from "../../../utils/navigation";
 import { ItwIdentificationModeSelectionScreen } from "../identification/screens/ItwIdentificationModeSelectionScreen";
 import { ItwDiscoveryInfoScreen } from "../discovery/screens/ItwDiscoveryInfoScreen";
 import { ItwIdentificationNfcInstructionsScreen } from "../identification/screens/ItwIdentificationNfcInstructionsScreen";
+import { ItwIdentificationIdpSelectionScreen } from "../identification/screens/ItwIdentificationIdpSelectionScreen";
 import { ItwParamsList } from "./ItwParamsList";
 import { ITW_ROUTES } from "./routes";
 
@@ -28,5 +29,9 @@ export const ItwStackNavigator = () => (
       name={ITW_ROUTES.IDENTIFICATION.NFC_INSTRUCTIONS}
       component={ItwIdentificationNfcInstructionsScreen}
     />
+    <Stack.Screen
+      name={ITW_ROUTES.IDENTIFICATION.IDP_SELECTION}
+      component={ItwIdentificationIdpSelectionScreen}
+    />
   </Stack.Navigator>
 );

ts/features/itwallet/navigation/routes.ts

@@ -5,6 +5,7 @@ export const ITW_ROUTES = {
   } as const,
   IDENTIFICATION: {
     MODE_SELECTION: "ITW_IDENTIFICATION_MODE_SELECTION",
-    NFC_INSTRUCTIONS: "ITW_IDENTIFICATION_NFC_INSTRUCTIONS"
+    NFC_INSTRUCTIONS: "ITW_IDENTIFICATION_NFC_INSTRUCTIONS",
+    IDP_SELECTION: "ITW_IDENTIFICATION_IDP_SELECTION"
   } as const
 };