chore(IT Wallet): [SIW-1518] Add Health Insurance card details screen (…

…#6154)

⚠️ Depends on #6139

## Short description
This PR refactors the credential details screen and adds the ability to
render the details of the European Health Insurance card credential.

## List of changes proposed in this pull request
- Added `getThemeColorByCredentialType` utility function that return the
`CredentialTheme` data for each credential type
- Added correct typography to `ItwCredentialCard` component
- Added `content` to `WellKnownClaim` enum: `content` is the claim that
contains the PDF attachment for the European Health Insurance card,
which should not be rendered in the card details screen.
- Replaced `ItwCredentialClaimsList`
with`ItwCredentialPreviewClaimsList` and `ItwPresentationClaimsSection`
for the preview and details screen respectively. This was necessary due
to customizations needed by both screens:
- Added `ItwCredentialPreviewClaimsList` component, which renders the
claims list in the credential preview screen and does not support the
ability to hide claims
- Refactored `ItwPresentationClaimsSection` which now supports the
ability to render special claims (like the Disability Card QR Code) and
has the "hide claims" toggle.
- Refactored `ItwPresentationCredentialDetailScreen` to correctly
display details for the European Health Insurance card credential:
- Added `ItwPresentationDetailsScreenBase` component, which is a wrapper
for the screen and manages the header animation
- Added `ItwPresentationDetailsHeader` component to render the correct
header based on the credential type: it can render a simple header with
a title or a `ItwPresentationCredentialCard` component
- Added `ItwPresentationAdditionalInfoSection` component to render
additional information required by a credential details screen, which
are not part of the credential claims
   - Added `ItwPresentationFiscalCode` component
- Moved logic for credential card rendering in
`ItwPresentationCredentialCard`
- Added tests for new components
- Updated test snapshots

## How to test
Navigate to the details screen of the European Health Insurance card
details screen and check that the header is rendered correctly and the
claims list is not displayed. Only the issuer claim should be visible.

## Preview



https://github.com/user-attachments/assets/548f5639-cab1-410a-acbb-1067e64370af

---------

Co-authored-by: LazyAfternoons <LazyAfternoons@users.noreply.github.com>

locales/en/index.yml

@@ -684,7 +684,7 @@ authentication:
         title: How to activate it
         request_cie:
           label: Ask for your CIE
-        activate_cie: 
+        activate_cie:
           title: Activate CIE credentials
         activate_spid:
           title: Ask for your SPID
@@ -2607,7 +2607,7 @@ bonus:
   active: Active
   failed: Failed
   redeemed: Consumed
-  termsAndConditionFooter: 'By pressing “{{ctaText}}” you declare that you are in possession of the requirements and have read and understood the [Guide]({{regulationLink}}) and the [Privacy Policy].'
+  termsAndConditionFooter: "By pressing “{{ctaText}}” you declare that you are in possession of the requirements and have read and understood the [Guide]({{regulationLink}}) and the [Privacy Policy]."
   tos:
     title: Information on the processing of personal data
     content: !include bonus/bonusVacanze/bonus_tos.md
@@ -3211,6 +3211,10 @@ features:
           issuedDate: "Valida dal"
           expirationDate: "Valida fino"
           restrictionConditions: "Codici"
+      unrecognizedData:
+        title: "Non riconosci alcuni dati?"
+        body: "Se ci sono errori nei dati o vuoi capire meglio cosa significano, puoi contattare il Ministero dell’Interno."
+        cta: "Chiedi informazioni o segnala errori"
     discovery:
       banner:
         title: "Novità: Documenti su IO"
@@ -3301,7 +3305,7 @@ features:
         secondaryAction: Chiudi
       genericCredentialError:
         title: Documento non disponibile
-        body: Si è verificato un errore oppure potresti non avere diritto al documento. 
+        body: Si è verificato un errore oppure potresti non avere diritto al documento.
         primaryAction: Riprova
         secondaryAction: Chiudi
     unsupportedDevice:
@@ -3317,6 +3321,8 @@ features:
         mdl:
           content: "In questa fase, la versione digitale della Patente non ha lo stesso valore del documento fisico: dovrai presentarla insieme a un documento di identità valido."
           action: Scopri di più
+        ehc:
+          content: "This document is valid only in Italy. The official copy of the document is in PDF."
         expired:
           content: Il documento non è più valido. Se sei già in possesso del nuovo documento valido, puoi aggiornare la versione digitale nel Portafoglio
           action: Aggiorna il documento
@@ -3340,7 +3346,7 @@ features:
           expiring: Expiring
         actions:
           removeFromWallet: "Remove from Wallet"
-          requestAssistance: "Something wrong? Contact {{authSource}}"
+          requestAssistance: "Something wrong?"
           showClaimValues: "Show claim values"
           hideClaimValues: "Hide claim values"
         dialogs:
@@ -3351,6 +3357,7 @@ features:
         toast:
           removed: Fatto! Hai rimosso {{credentialName}}
         flipCard: "Show back"
+        fiscalCode: Your Fiscal Code
       trustmark:
         cta: Mostra certificato di autenticità
         title: Certificato di autenticità

locales/it/index.yml

@@ -684,7 +684,7 @@ authentication:
         title: Come attivarla
         request_cie:
           label: Richiedi la tua CIE
-        activate_cie: 
+        activate_cie:
           title: Attiva le credenziali CIE
         activate_spid:
           title: Attiva SPID
@@ -3211,6 +3211,10 @@ features:
           issuedDate: "Valida dal"
           expirationDate: "Valida fino"
           restrictionConditions: "Codici"
+      unrecognizedData:
+        title: "Non riconosci alcuni dati?"
+        body: "Se ci sono errori nei dati o vuoi capire meglio cosa significano, puoi contattare il Ministero dell’Interno."
+        cta: "Chiedi informazioni o segnala errori"
     discovery:
       banner:
         title: "Novità: Documenti su IO"
@@ -3301,7 +3305,7 @@ features:
         secondaryAction: Chiudi
       genericCredentialError:
         title: Documento non disponibile
-        body: Si è verificato un errore oppure potresti non avere diritto al documento. 
+        body: Si è verificato un errore oppure potresti non avere diritto al documento.
         primaryAction: Riprova
         secondaryAction: Chiudi
     unsupportedDevice:
@@ -3317,6 +3321,8 @@ features:
         mdl:
           content: "In questa fase, la versione digitale della Patente non ha lo stesso valore del documento fisico: dovrai presentarla insieme a un documento di identità valido."
           action: Scopri di più
+        ehc:
+          content: "Questo documento è valido solo in Italia. La copia ufficiale del documento si trova nel PDF."
         expired:
           content: Il documento non è più valido. Se sei già in possesso del nuovo documento valido, puoi aggiornare la versione digitale nel Portafoglio
           action: Aggiorna il documento
@@ -3340,7 +3346,7 @@ features:
           expiring: In scadenza
         actions:
           removeFromWallet: "Rimuovi dal Portafoglio"
-          requestAssistance: "Qualcosa non torna? Contatta {{authSource}}"
+          requestAssistance: "Qualcosa non torna?"
           showClaimValues: "Mostra gli attributi del documento"
           hideClaimValues: "Nascondi gli attributi del documento"
         dialogs:
@@ -3351,6 +3357,7 @@ features:
         toast:
           removed: Fatto! Hai rimosso {{credentialName}}
         flipCard: "Mostra retro"
+        fiscalCode: Il tuo Codice Fiscale
       trustmark:
         cta: Mostra certificato di autenticità
         title: Certificato di autenticità

ts/features/itwallet/common/components/ItwCredentialCard.tsx

@@ -1,16 +1,17 @@
 import {
   Badge,
-  Body,
-  HSpacer,
+  HStack,
   IOColors,
+  makeFontStyleObject,
   Tag
 } from "@pagopa/io-app-design-system";
 import React from "react";
-import { ImageSourcePropType, StyleSheet, View } from "react-native";
+import { ImageSourcePropType, StyleSheet, Text, View } from "react-native";
 import { AnimatedImage } from "../../../../components/AnimatedImage";
 import I18n from "../../../../i18n";
-import { CredentialType } from "../utils/itwMocksUtils";
 import { getCredentialNameFromType } from "../utils/itwCredentialUtils";
+import { CredentialType } from "../utils/itwMocksUtils";
+import { getThemeColorByCredentialType } from "../utils/itwStyleUtils";
 
 export type ItwCredentialStatus = "valid" | "pending" | "expiring" | "expired";
 
@@ -26,7 +27,8 @@ export const ItwCredentialCard = ({
   isPreview = false
 }: ItwCredentialCard) => {
   const isValid = status === "valid";
-  const labelColor: IOColors = isValid ? "bluegreyDark" : "grey-700";
+  const theme = getThemeColorByCredentialType(credentialType);
+  const labelColor = isValid ? theme.textColor : IOColors["grey-700"];
 
   const cardBackgroundSource =
     credentialCardBackgrounds[credentialType][isValid ? 0 : 1];
@@ -41,23 +43,13 @@ export const ItwCredentialCard = ({
             style={styles.cardBackground}
           />
         </View>
-        <View style={styles.infoContainer}>
-          <View style={styles.header}>
-            <Body
-              color={labelColor}
-              weight="Semibold"
-              numberOfLines={2}
-              style={{ flex: 1 }}
-            >
+        <View style={styles.header}>
+          <HStack space={16}>
+            <Text style={[styles.label, { color: labelColor }]}>
               {getCredentialNameFromType(credentialType, "").toUpperCase()}
-            </Body>
-            {statusTagProps && (
-              <>
-                <HSpacer size={16} />
-                <Tag {...statusTagProps} />
-              </>
-            )}
-          </View>
+            </Text>
+            {statusTagProps && <Tag {...statusTagProps} />}
+          </HStack>
         </View>
         {!isValid && <DigitalVersionBadge />}
         <View
@@ -154,15 +146,18 @@ const styles = StyleSheet.create({
     borderLeftWidth: 9,
     borderColor: transparentBorderColor
   },
-  infoContainer: {
-    paddingHorizontal: 16,
-    paddingTop: 14
+  label: {
+    flex: 1,
+    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro"),
+    fontSize: 16
   },
   header: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingTop: 14
   },
   digitalVersionBadge: { position: "absolute", bottom: 16, right: -10 }
 });

ts/features/itwallet/common/components/ItwQrCodeClaimImage.tsx

@@ -1,21 +1,17 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
 import { QrCodeImage } from "../../../../components/QrCodeImage";
-import { ParsedCredential } from "../utils/itwTypesUtils";
+import { ClaimDisplayFormat } from "../utils/itwClaimsUtils";
 
 type ItwQrCodeClaimImageProps = {
-  claim?: ParsedCredential[keyof ParsedCredential];
-  isHidden?: boolean;
+  claim: ClaimDisplayFormat;
 };
 
 /**
  * This component allows to render the content of a claim in form of a QR Code
  */
-export const ItwQrCodeClaimImage = ({
-  claim,
-  isHidden
-}: ItwQrCodeClaimImageProps) => {
-  if (claim === undefined || typeof claim.value !== "string" || isHidden) {
+export const ItwQrCodeClaimImage = ({ claim }: ItwQrCodeClaimImageProps) => {
+  if (claim.value === undefined || typeof claim.value !== "string") {
     return null;
   }