chore(IT Wallet): [SIW-433] Update PID issuing flow with new design s…

…ystem components (#5211) ### This PR depends on #5197 ## Short description This PR updates the PID issuing flow with new DS components. ## How to test Start it-wallet with DS toggle enabled. Try Discovery snd Issuing flow. The new DS components should be used.
pagopa · Nov 29, 2023 · de61375 · de61375
1 parent 0488086
commit de61375
Show file tree

Hide file tree

Showing 25 changed files with 1,369 additions and 874 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -3257,14 +3257,10 @@ features:
       buttons:
         addCredential: "Add credential"
     infoAuthScreen:
-      title: "Log in with CIE + PIN and save your digital identity"
-      subTitle: "To activate IT Wallet you need to authenticate yourself using your Electronic Identity Card (CIE) + PIN."
-      howAuth: "After authentication, you will be able to create your Digital Identity, thanks to which you will be able to access the online services of the Public Administration and request other digital credentials."
-      confirm: "Continue with CIE + PIN"
-      footerBox: "Before continuing, make sure you have the Electronic Identity Card (CIE) with you and remember the PIN [Read more](https://www.cartaidentita.interno.gov.it)"
-      readMoreUrl: "https://identitadigitale.gov.it/"
-      noCieInfo: "If you don't have CIE "
-      noCieCta: "find out how to get it."
+      title: "Let's begin!"
+      subTitle: "Get your CIE and its PIN."
+      readMoreUrl: "https://www.cartaidentita.interno.gov.it/"
+      noCieInfo: "Don't you have the CIE?"
       errors:
         nfc:
           title: "Your device does not support NFC which is required to enable IT Wallet"
@@ -3285,21 +3281,43 @@ features:
         cieId: "CieID"
         cieIdSubTitle: "Use CieID app or credentials"
       compareFeatures: "What is the difference?"
+    cie:
+      pinScreen:
+        title: "Enter your CIE PIN"
+        description: "It is an 8 digit code. It was communicated to you in two moments:\n- you received the first 4 digits at the registry office;\n- you received the last 4 digits at home with the CIE.\nPut them together and enter them in this order.\n\n[Have you forgotten your PIN?](https://www.cartaidentita.interno.gov.it/info-utili/codici-di-sicurezza-pin-e-puk/)"
     issuing:
       title: "IT Wallet activation"
+      cie:
+        waiting: 
+          title: "Place the CIE on the back of the device"
+          content: "If the reading doesn't start, move the card to different places and wait a few seconds until you feel a vibration."
+        reading:
+          title: "Hold it still for a few seconds"
+        success:
+          title: "Reading completed!"
+          content: "Continue to add your digital identity and complete IT Wallet activation."
+        error:
+          title: "You removed the CIE too early"
+          retry: "Retry"
+        help: "See how to do it"
       infoConsent:
         footer:
           cancel: "Cancel"
-          confirm: "Authorize"
+          confirm: "Continue"
       loading:
         title: "I am loading the data from the Ministry of the Interior"
         subtitle: "Wait a few seconds"
       pidPreviewScreen: 
         title: "Do you want to add this data to the IT Wallet?"
         checkNotice: "Verify that the following data is correct."
         buttons:
-          add: "Yes, add"
-          notNow: "Not now"
+          add: "Add"
+          cancel: "Cancel"
+        banner:
+          title: "Something doesn't add up?"
+          content: "If you want to delve deeper into some data or report errors, contact support."
+          actionTitle: "Contact support"
+          closeTitle: "Close"
         bottomSheet: 
           title: "Cancel the IT Wallet activation"
           body: "Do you want to cancel the obtaining of the digital identity and therefore the activation of the IT Wallet?"
@@ -3314,9 +3332,9 @@ features:
           title: "I'm activating your IT Wallet"
           subtitle: "Wait a few seconds"
         typ:
-          title: "Done! your IT Wallet is active on IO!"
-          content: "Now you can use IO to access the digital services of the Public Administration and obtain new digital credentials."
-          button: "Continue"
+          title: "IT Wallet is active!"
+          content: "Go to Wallet: you can already add other cards and use your digital identity to access online services."
+          button: "Go to Wallet"
       credentialsCatalogScreen:
         title: "Add more credentials"
         incomingFeature: "Coming soon"

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -3257,14 +3257,10 @@ features:
       buttons:
         addCredential: "Aggiungi documento"
     infoAuthScreen:
-      title: "Accedi con CIE + PIN e salva la tua identità digitale"
-      subTitle: "Per attivare IT Wallet è necessario autenticarti utilizzando la tua Carta di Identità Elettronica (CIE) + PIN."
-      howAuth: "Dopo l’autenticazione potrai creare la tua Identità Digitale, grazie alla quale potrai accedere ai servizi online della Pubblica Amministrazione e richiedere altre credenziali digitali."
-      confirm: "Continua con CIE + PIN"
-      footerBox: "Prima di continua, assicurati di avere con te la Carta d’Identità Elettronica (CIE) e ricordare il PIN [Per saperne di più](https://www.cartaidentita.interno.gov.it)"
-      readMoreUrl: "https://identitadigitale.gov.it/"
-      noCieInfo: "Non hai la CIE? "
-      noCieCta: "Scopri come ottenerla"
+      title: "Iniziamo!"
+      subTitle: "Prendi la tua CIE e il suo PIN."
+      readMoreUrl: "https://www.cartaidentita.interno.gov.it/"
+      noCieInfo: "Non hai la CIE?"
       errors:
         nfc:
           title: "Il tuo dispositivo non supporta la funzione NFC necessaria per attivare IT Wallet"
@@ -3285,21 +3281,43 @@ features:
         cieId: "CieID"
         cieIdSubTitle: "Usa app o credenziali CieID"
       compareFeatures: "Qual è la differenza?"
+    cie:
+      pinScreen:
+        title: "Inserisci il PIN della CIE"
+        description: "È un codice di 8 cifre. Ti è stato comunicato in due momenti:\n- le prime 4 cifre le hai ricevute all’anagrafe;\n- le ultime 4 cifre le hai ricevute a casa con la CIE.\nMettile insieme e inseriscile in quest’ordine.\n\n[Hai dimenticato il PIN?](https://www.cartaidentita.interno.gov.it/info-utili/codici-di-sicurezza-pin-e-puk/)"
     issuing:
       title: "Attivazione IT Wallet"
+      cie:
+        waiting: 
+          title: "Appoggia la CIE sul retro del dispositivo"
+          content: "Se la lettura non parte, sposta la carta in punti diversi e attendi qualche secondo finché non senti una vibrazione."
+        reading:
+          title: "Tienila ferma per qualche secondo"
+        success:
+          title: "Lettura completata!"
+          content: "Continua per aggiungere la tua identità digitale e completare l’attivazione di IT Wallet."
+        error:
+          title: "Hai rimosso la CIE troppo presto"
+          retry: "Riprova"
+        help: "Guarda come fare"
       infoConsent:
         footer:
           cancel: "Annulla"
-          confirm: "Autorizza"
+          confirm: "Continua"
       loading:
         title: "Sto caricando i dati dal Ministero dell’Interno"
         subtitle: "Attendi qualche secondo"
       pidPreviewScreen: 
-        title: "Vuoi aggiungere questi dati all’IT Wallet?"
-        checkNotice: "Verifica che i seguenti dati siano corretti"
+        title: "Ecco un’anteprima della tua Identità Digitale"
+        checkNotice: "Verifica che le informazioni siano corrette e aggiungila per completare l’attivazione di IT Wallet."
         buttons:
-          add: "Sì, aggiungi"
-          notNow: "Non ora"
+          add: "Aggiungi"
+          cancel: "Annulla"
+        banner:
+          title: "Qualcosa non torna?"
+          content: "Se vuoi approfondire alcuni dati o segnalare errori, contatta l’assistenza."
+          actionTitle: "Contatta l'assistenza"
+          closeTitle: "Chiudi"
         bottomSheet: 
           title: "Annulla attivazione dell’IT Wallet"
           body: "Vuoi annullare l’ottenimento dell’identità digitale e quindi l’attivazione dell’IT Wallet?"
@@ -3314,9 +3332,9 @@ features:
           title: "Sto attivando il tuo IT Wallet"
           subtitle: "Attendi qualche secondo"
         typ:
-          title: "Fatto! il tuo IT Wallet è attivo su IO!"
-          content: "Ora puoi usare IO per accedere ai servizi digitali della Pubblica Amministrazione e ottenere nuove credenziali digitali."
-          button: "Continua"
+          title: "IT Wallet è attivo!"
+          content: "Vai al Portafoglio: puoi già aggiungere altre tessere e usare la tua identità digitale per accedere ai servizi online."
+          button: "Vai al Portafoglio"
       credentialsCatalogScreen:
         title: "Aggiungi altri documenti"
         incomingFeature: "In arrivo"

diff --git a/ts/features/it-wallet/components/ItwActionCompleted.tsx b/ts/features/it-wallet/components/ItwActionCompleted.tsx
diff --git a/ts/features/it-wallet/components/ItwErrorView.tsx b/ts/features/it-wallet/components/ItwErrorView.tsx
diff --git a/ts/features/it-wallet/components/ItwPidClaimsList.tsx b/ts/features/it-wallet/components/ItwPidClaimsList.tsx
@@ -5,8 +5,8 @@ import {
   PidWithToken
 } from "@pagopa/io-react-native-wallet/lib/typescript/pid/sd-jwt";
 import { isDate } from "date-fns";
+import { ListItemInfo } from "@pagopa/io-app-design-system";
 import { ISSUER_URL, mapAssuranceLevel } from "../utils/mocks";
-import ListItemComponent from "../../../components/screens/ListItemComponent";
 import I18n from "../../../i18n";
 import { localeDateFormat } from "../../../utils/locale";
 
@@ -73,7 +73,7 @@ const ItwPidClaimsList = (props: ClaimsListProps) => {
     const title = I18n.t(
       `features.itWallet.verifiableCredentials.claims.${claim}`
     );
-    return <ListItemComponent title={title} subTitle={subTitle} hideIcon />;
+    return <ListItemInfo label={title} value={subTitle} />;
   };
 
   const RenderExpiryDate = () => {
@@ -82,12 +82,11 @@ const ItwPidClaimsList = (props: ClaimsListProps) => {
       I18n.t("global.dateFormats.shortFormat")
     );
     return (
-      <ListItemComponent
-        title={I18n.t(
+      <ListItemInfo
+        label={I18n.t(
           "features.itWallet.verifiableCredentials.claims.expirationDate"
         )}
-        subTitle={expirationDate}
-        hideIcon
+        value={expirationDate}
       />
     );
   };
@@ -97,35 +96,54 @@ const ItwPidClaimsList = (props: ClaimsListProps) => {
   }: {
     onLinkPress: () => void;
   }) => (
-    <ListItemComponent
-      title={I18n.t(
+    <ListItemInfo
+      label={I18n.t(
         "features.itWallet.verifiableCredentials.claims.securityLevel"
       )}
-      subTitle={mapAssuranceLevel(
+      value={mapAssuranceLevel(
         props.decodedPid.pid.verification.assuranceLevel
       )}
-      iconName={"info"}
-      onPress={onLinkPress}
+      endElement={{
+        type: "iconButton",
+        componentProps: {
+          icon: "info",
+          onPress: onLinkPress,
+          accessibilityLabel: ""
+        }
+      }}
     />
   );
 
   const RenderIssuer = () => (
     <>
-      <ListItemComponent
-        title={I18n.t(
+      <ListItemInfo
+        label={I18n.t(
           "features.itWallet.verifiableCredentials.claims.issuedBy"
         )}
-        subTitle={
+        value={
           props.decodedPid.pid.verification.evidence[0].record.source
             .organization_name
         }
-        hideIcon
+        endElement={{
+          type: "iconButton",
+          componentProps: {
+            icon: "info",
+            onPress: () => Linking.openURL(ISSUER_URL),
+            accessibilityLabel: ""
+          }
+        }}
       />
-      <ListItemComponent
-        title={I18n.t("features.itWallet.verifiableCredentials.claims.info")}
-        subTitle={ISSUER_URL}
-        hideIcon
-        onPress={() => Linking.openURL(ISSUER_URL)}
+      <ListItemInfo
+        label={I18n.t("features.itWallet.verifiableCredentials.claims.info")}
+        value={ISSUER_URL}
+        endElement={{
+          type: "iconButton",
+          componentProps: {
+            icon: "website",
+            onPress: () => Linking.openURL(ISSUER_URL),
+            accessibilityLabel: ""
+          }
+        }}
       />
     </>
   );