feat(IT Wallet): [SIW-1022] Add PIN/biometric authorization for eID s…

…tore action (#5792) > [!WARNING] > This PR depends on #5780 ## Short description This PR adds the PIN/biometric authorization request before proceeding to the eID store. ## List of changes proposed in this pull request - Added `useItwDismissalDialog` hook which shows a confirmation dialog for the dismissal of the current procedure - Added `ItwIssuanceEidResultScreen` screen and routes - Added required locales - Within the `ItwIssuanceEidPreviewScreen` screen, it now show the PIN/biometric auth request when tapping the "Store" button. ## How to test Navigate to **Profile > Playgrounds > IT Wallet > eID > SPID**, select an IDP. In the eID preview screen, tap on "Store to wallet" button. You should be able to see the PIN/biometric authorization request. ## Preview https://github.com/pagopa/io-app/assets/6160324/5ef9a8a6-400a-4c17-8428-10fd2b28e37b --------- Co-authored-by: Damiano Plebani <[email protected]> Co-authored-by: Mario Perrotta <[email protected]>
pagopa · Jun 4, 2024 · f3bebba · f3bebba
1 parent 0bb9606
commit f3bebba
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 20 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -613,14 +613,14 @@ authentication:
     expiredCardHeaderTitle: Login with CIE
     expiredCardContent: The card used is no longer valid or has expired. Use SPID to enter the app.
     expiredCardHelp: How to renew your Electronic Identity Card?
-  cie_errors: 
-    error_22: 
+  cie_errors:
+    error_22:
       title: You haven't agreed to share your data
       subtitle: To enter, you must agree to share some data
     error_1001:
       title: Sorry, you don't meet the minimum age requirement
       subtitle: You must be at least 18 years old
-    generic: 
+    generic:
       title: Sorry, access was not available.
       subtitle: A problem occurred while logging in. Please try again in a few minutes.
   cie:
@@ -638,7 +638,7 @@ authentication:
       listItemTitle: "How to do it::"
       action: Open Settings
       listItemLabel1: Step 1
-      listItemValue1: Open 'Settings' 
+      listItemValue1: Open 'Settings'
       listItemLabel2: Step 2
       listItemValue2: Search for ‘NFC’ functionality
       listItemLabel3: Step 3
@@ -673,7 +673,7 @@ authentication:
       title: Card temporarily locked
       content: !include cie/temporary_blocked_cie.md
       button: "Load/open CieID"
-    card:      
+    card:
       title: Hold your CIE on the back of your phone
       titleiOS: Place the CIE on your phone, on top.
       layCardMessageHeader: If the reading doesn't start, move the card to different places and wait a few seconds until you feel a vibration.
@@ -695,7 +695,7 @@ authentication:
         wrongPin2AttemptLeft: Wrong PIN
         genericError: Something went wrong! Please try again.
       error:
-        readerCardLostTitle: You removed the card too soon.                
+        readerCardLostTitle: You removed the card too soon.
         onTagLost: Place the card on the back of the device again.
         tryAgain: Something did not work as expected while we read your CIE. It's probably a temporary issue, please try again!
         generic: Something did not work as expected while we read your CIE.
@@ -3177,6 +3177,9 @@ features:
         actions:
           primary: Aggiungi al portafoglio
           secondary: Annulla
+      success:
+        title: "Hai aggiunto\nIdentità Digitale!"
+        subtitle: Premi Continua per aggiungere {{credentialName}}, tessere o metodi di pagamento al tuo Portafoglio.
 webView:
   error:
     missingParams: Not all information necessary to access this page are available

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -613,14 +613,14 @@ authentication:
     expiredCardHeaderTitle: Entra con CIE
     expiredCardContent: La carta utilizzata potrebbe essere scaduta o non più valida. Prova ad usare SPID per entrare in app.
     expiredCardHelp: Come rinnovare la propria Carta di Identità Elettronica?
-  cie_errors: 
-    error_22: 
+  cie_errors:
+    error_22:
       title: Non hai dato il consenso all’invio dei dati
       subtitle: Per accedere, è necessario acconsentire all’invio di alcuni dati.
     error_1001:
       title: Non hai l'età minima richiesta
       subtitle: Per accedere, devi avere almeno 18 anni
-    generic: 
+    generic:
       title: Non è stato possibile accedere
       subtitle: Si è verificato un problema durante l’accesso. Riprova tra qualche minuto.
   cie:
@@ -638,7 +638,7 @@ authentication:
       listItemTitle: "Come fare:"
       action: Apri Impostazioni
       listItemLabel1: Step 1
-      listItemValue1: Apri “Impostazioni” 
+      listItemValue1: Apri “Impostazioni”
       listItemLabel2: Step 2
       listItemValue2: Cerca la funzionalità “NFC”
       listItemLabel3: Step 3
@@ -675,7 +675,7 @@ authentication:
       button: "Scarica / Apri CieID"
     card:
       title: Appoggia la CIE sul retro del dispositivo
-      titleiOS: Appoggia la CIE sul dispositivo, in alto      
+      titleiOS: Appoggia la CIE sul dispositivo, in alto
       layCardMessageHeader: Se la lettura non parte, sposta la carta in punti diversi e attendi qualche secondo finché non senti una vibrazione.
       layCardMessageHeaderiOS: Se la carta non viene letta, spostala in punti diversi e attendi qualche secondo.
       layCardMessageFooter: Se non sai con precisione dove sia l'antenna NFC sposta la carta in punti diversi e attendi qualche secondo finché non senti una vibrazione.
@@ -695,7 +695,7 @@ authentication:
         wrongPin2AttemptLeft: Il PIN non è corretto
         genericError: Si è verificato un errore imprevisto. Riprova.
       error:
-        readerCardLostTitle: Hai rimosso la carta troppo presto                
+        readerCardLostTitle: Hai rimosso la carta troppo presto
         onTagLost: Appoggia di nuovo la carta sul retro del dispositivo.
         tryAgain: Si è verificato un errore durante la verifica della tua carta. Probabilmente è un errore momentaneo, riprova per piacere!
         generic: Si è verificato un errore durante la verifica della tua carta. Se non riesci a risolvere il problema, segnalacelo con l’icona '?' in alto a destra. Grazie!
@@ -3177,6 +3177,9 @@ features:
         actions:
           primary: Aggiungi al portafoglio
           secondary: Annulla
+      success:
+        title: "Hai aggiunto\nIdentità Digitale!"
+        subtitle: Premi Continua per aggiungere {{credentialName}}, tessere o metodi di pagamento al tuo Portafoglio.
 webView:
   error:
     missingParams: Non sono presenti le informazioni necessarie per accedere a questa pagina

diff --git a/ts/features/common/store/reducers/index.ts b/ts/features/common/store/reducers/index.ts
@@ -19,6 +19,7 @@ import {
   fastLoginReducer
 } from "../../../fastLogin/store/reducers";
 import fciReducer, { FciState } from "../../../fci/store/reducers";
+import fimsReducer, { FimsState } from "../../../fims/store/reducers";
 import idPayReducer, { IDPayState } from "../../../idpay/common/store/reducers";
 import itWalletReducer, {
   ItWalletState
@@ -32,18 +33,17 @@ import paymentsReducer, {
   PaymentsState
 } from "../../../payments/common/store/reducers";
 import { PnState, pnReducer } from "../../../pn/store/reducers";
+import {
+  ProfileSettingsState,
+  profileSettingsReducerPersistor
+} from "../../../profileSettings/store/reducers";
 import servicesReducer, {
   ServicesState
 } from "../../../services/common/store/reducers";
-import fimsReducer, { FimsState } from "../../../fims/store/reducers";
 import {
   WhatsNewState,
   whatsNewPersistor
 } from "../../../whatsnew/store/reducers";
-import {
-  ProfileSettingsState,
-  profileSettingsReducerPersistor
-} from "../../../profileSettings/store/reducers";
 
 type LoginFeaturesState = {
   testLogin: TestLoginState;

diff --git a/ts/features/itwallet/common/hooks/useItwDismissalDialog.tsx b/ts/features/itwallet/common/hooks/useItwDismissalDialog.tsx
@@ -0,0 +1,31 @@
+import { Alert } from "react-native";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import I18n from "../../../../i18n";
+
+/**
+ * Allows to show a dismissal dialog in which the user must confirm the desire to close the current flow
+ * @returns a function that show the dialog
+ */
+export const useItwDismissalDialog = () => {
+  const navigation = useIONavigation();
+
+  const handleDismiss = () => {
+    navigation.popToTop();
+    navigation.pop();
+  };
+
+  const show = () =>
+    Alert.alert(I18n.t("features.itWallet.generic.alert.title"), undefined, [
+      {
+        text: I18n.t("features.itWallet.generic.alert.confirm"),
+        style: "destructive",
+        onPress: handleDismiss
+      },
+      {
+        text: I18n.t("features.itWallet.generic.alert.cancel"),
+        style: "cancel"
+      }
+    ]);
+
+  return { show };
+};
diff --git a/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx b/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx
@@ -8,14 +8,18 @@ import { FooterActions } from "../../../../components/ui/FooterActions";
 import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import I18n from "../../../../i18n";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { identificationRequest } from "../../../../store/actions/identification";
+import { useIODispatch } from "../../../../store/hooks";
 import { EidCardPreview } from "../../common/components/EidCardPreview";
 import { ItwCredentialClaimsList } from "../../common/components/ItwCredentialClaimList";
+import { useItwDismissalDialog } from "../../common/hooks/useItwDismissalDialog";
 import {
   ItWalletError,
   getItwGenericMappedError
 } from "../../common/utils/itwErrorsUtils";
 import { ItwCredentialsMocks } from "../../common/utils/itwMocksUtils";
 import { StoredCredential } from "../../common/utils/itwTypesUtils";
+import { ITW_ROUTES } from "../../navigation/routes";
 
 export const ItwIssuanceEidPreviewScreen = () => {
   const navigation = useIONavigation();
@@ -27,6 +31,8 @@ export const ItwIssuanceEidPreviewScreen = () => {
    */
   const ContentView = ({ eid }: { eid: StoredCredential }) => {
     const theme = useIOTheme();
+    const dispatch = useIODispatch();
+    const dismissDialog = useItwDismissalDialog();
 
     const backgroundColor: ColorValue =
       IOColors[theme["appBackground-primary"]];
@@ -37,6 +43,26 @@ export const ItwIssuanceEidPreviewScreen = () => {
       });
     }, []);
 
+    const handleSaveToWallet = () => {
+      dispatch(
+        identificationRequest(
+          false,
+          true,
+          undefined,
+          {
+            label: I18n.t("global.buttons.cancel"),
+            onCancel: () => undefined
+          },
+          {
+            onSuccess: () =>
+              navigation.navigate(ITW_ROUTES.MAIN, {
+                screen: ITW_ROUTES.ISSUANCE.RESULT
+              })
+          }
+        )
+      );
+    };
+
     return (
       <IOScrollViewWithLargeHeader
         excludeEndContentMargin
@@ -65,13 +91,13 @@ export const ItwIssuanceEidPreviewScreen = () => {
               label: I18n.t(
                 "features.itWallet.issuance.credentialPreview.actions.primary"
               ),
-              onPress: () => undefined
+              onPress: handleSaveToWallet
             },
             secondary: {
               label: I18n.t(
                 "features.itWallet.issuance.credentialPreview.actions.secondary"
               ),
-              onPress: () => undefined
+              onPress: dismissDialog.show
             }
           }}
         />

diff --git a/ts/features/itwallet/issuance/screens/ItwIssuanceEidResultScreen.tsx b/ts/features/itwallet/issuance/screens/ItwIssuanceEidResultScreen.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
+import I18n from "../../../../i18n";
+import { useItwDismissalDialog } from "../../common/hooks/useItwDismissalDialog";
+
+export const ItwIssuanceEidResultScreen = () => {
+  const dismissalDialog = useItwDismissalDialog();
+
+  const handleContinue = () => {
+    // TODO continue through the credential issuing
+  };
+
+  return (
+    <OperationResultScreenContent
+      pictogram="success"
+      title={I18n.t("features.itWallet.issuance.success.title")}
+      subtitle={I18n.t("features.itWallet.issuance.success.subtitle", {
+        credentialName: "{Credential.name}"
+      })}
+      action={{
+        label: I18n.t("global.buttons.continue"),
+        onPress: handleContinue
+      }}
+      secondaryAction={{
+        label: I18n.t("global.buttons.close"),
+        onPress: dismissalDialog.show
+      }}
+    />
+  );
+};
diff --git a/ts/features/itwallet/navigation/ItwParamsList.ts b/ts/features/itwallet/navigation/ItwParamsList.ts
@@ -9,4 +9,5 @@ export type ItwParamsList = {
   [ITW_ROUTES.IDENTIFICATION.IDP_SELECTION]: undefined;
   // ISSUANCE
   [ITW_ROUTES.ISSUANCE.EID_PREVIEW]: undefined;
+  [ITW_ROUTES.ISSUANCE.RESULT]: undefined;
 };
diff --git a/ts/features/itwallet/navigation/ItwStackNavigator.tsx b/ts/features/itwallet/navigation/ItwStackNavigator.tsx
@@ -6,6 +6,7 @@ import { ItwIdentificationIdpSelectionScreen } from "../identification/screens/I
 import { ItwIdentificationModeSelectionScreen } from "../identification/screens/ItwIdentificationModeSelectionScreen";
 import { ItwIdentificationNfcInstructionsScreen } from "../identification/screens/ItwIdentificationNfcInstructionsScreen";
 import { ItwIssuanceEidPreviewScreen } from "../issuance/screens/ItwIssuanceEidPreviewScreen";
+import { ItwIssuanceEidResultScreen } from "../issuance/screens/ItwIssuanceEidResultScreen";
 import { ItwParamsList } from "./ItwParamsList";
 import { ITW_ROUTES } from "./routes";
 
@@ -40,5 +41,10 @@ export const ItwStackNavigator = () => (
       component={ItwIssuanceEidPreviewScreen}
       options={{ headerShown: false }}
     />
+    <Stack.Screen
+      name={ITW_ROUTES.ISSUANCE.RESULT}
+      component={ItwIssuanceEidResultScreen}
+      options={{ headerShown: false }}
+    />
   </Stack.Navigator>
 );
diff --git a/ts/features/itwallet/navigation/routes.ts b/ts/features/itwallet/navigation/routes.ts
@@ -9,6 +9,7 @@ export const ITW_ROUTES = {
     IDP_SELECTION: "ITW_IDENTIFICATION_IDP_SELECTION"
   } as const,
   ISSUANCE: {
-    EID_PREVIEW: "ITW_ISSUANCE_EID_PREVIEW"
+    EID_PREVIEW: "ITW_ISSUANCE_EID_PREVIEW",
+    RESULT: "ITW_ISSUANCE_RESULT"
   } as const
 };