chore(IT Wallet): [SIW-535] Refactor title card component (#5093)

## Short description
This PR adds customizable credential title to the
`ItwCredentialCard.tsx` component which was left out by mistake in
#5086, hence why the same ticket number.

## List of changes proposed in this pull request
- Adds `title` props in `ItwCredentialCards.tsx` component;
- Updates usage accordingly.

## How to test
Check for any regression in the issuing flow which uses a PID card and
also in the wallet section after obtaining a PID.

---------

Co-authored-by: Mario Perrotta <[email protected]>

ts/features/it-wallet/components/ItwCredentialCard.tsx

@@ -7,13 +7,13 @@ import {
   ImageSourcePropType
 } from "react-native";
 import { H3, H6, IOColors } from "@pagopa/io-app-design-system";
-import I18n from "../../../i18n";
 import customVariables from "../../../theme/variables";
 
 /**
- * Props for the component which consists of the name and fiscal code to be render on the card.
+ * Props for the component.
  */
 type Props = {
+  title: string;
   name: string;
   fiscalCode: string;
   backgroundImage: ImageSourcePropType;
@@ -64,17 +64,25 @@ const styles = StyleSheet.create({
 
 /**
  * Renders a card for the PID credential with the name and fiscal code of the owner.
- * @param props - props of the screen containg name and fiscal code.
+ * @param title - the credential title.
+ * @param name - the name of the owner.
+ * @param fiscalCode - the fiscal code of the owner.
+ * @param backgroundImage - the background image of the card.
  */
-const ItwCredentialCard = ({ name, fiscalCode, backgroundImage }: Props) => (
+const ItwCredentialCard = ({
+  title,
+  name,
+  fiscalCode,
+  backgroundImage
+}: Props) => (
   <View>
     <Image source={backgroundImage} style={styles.cardBackground} />
     <H3
       color="white"
       accessibilityLabel={name}
       style={[styles.text, styles.titleText]}
     >
-      {I18n.t("features.itWallet.verifiableCredentials.type.digitalCredential")}
+      {title}
     </H3>
     <H6
       style={[styles.text, styles.nameText]}

ts/features/it-wallet/screens/ItwHomeScreen.tsx

@@ -93,6 +93,9 @@ const ItwHomeScreen = () => {
           }
         >
           <ItwCredentialCard
+            title={I18n.t(
+              "features.itWallet.verifiableCredentials.type.digitalCredential"
+            )}
             name={`${decodedPid?.pid.claims.givenName} ${decodedPid?.pid.claims.familyName}`}
             fiscalCode={decodedPid?.pid.claims.taxIdCode as string}
             backgroundImage={require("../assets/img/pidCredentialCard.png")}

ts/features/it-wallet/screens/credentials/ItwPidDetails.tsx

@@ -49,6 +49,9 @@ const ItwPidDetails = () => {
         <VSpacer />
         <View style={IOStyles.horizontalContentPadding}>
           <ItwCredentialCard
+            title={I18n.t(
+              "features.itWallet.verifiableCredentials.type.digitalCredential"
+            )}
             name={`${decodedPid.pid.claims.givenName} ${decodedPid.pid.claims.familyName}`}
             fiscalCode={decodedPid.pid.claims.taxIdCode as string}
             backgroundImage={require("../../assets/img/pidCredentialCard.png")}

ts/features/it-wallet/screens/issuing/ItwPidPreviewScreen.tsx

@@ -82,6 +82,9 @@ const ItwPidPreviewScreen = () => {
           <VSpacer />
           <View style={IOStyles.horizontalContentPadding}>
             <ItwCredentialCard
+              title={I18n.t(
+                "features.itWallet.verifiableCredentials.type.digitalCredential"
+              )}
               name={name}
               fiscalCode={fiscalCode}
               backgroundImage={require("../../assets/img/pidCredentialCard.png")}