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

## Short description
This PR proses a refactor to the `PidCredential.tsx` card component to
generalize it for any credential.

## List of changes proposed in this pull request
- Renames the component to `ItwCredentialCard`;
- Adds `backgroundImage` prop;
- Simplifies the styling;  
- Replaces typography components with the new design system.

## How to test
Test the activation flow and check for any regression. Also check the
preview in the wallet section after obtaining a PID.

locales/it/index.yml

@@ -3489,7 +3489,7 @@ features:
         label: "Ho capito"
     verifiableCredentials:
       type:
-        digitalCredential: "Identità Digitale"
+        digitalCredential: "Identità digitale"
         disabilityCard: "Tessera Europa della disabilità"
         healthCard: "Tessera Sanitaria"
         drivingLicense: "Licenza di guida"

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

@@ -0,0 +1,96 @@
+import * as React from "react";
+import {
+  View,
+  Dimensions,
+  Image,
+  StyleSheet,
+  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.
+ */
+type Props = {
+  name: string;
+  fiscalCode: string;
+  backgroundImage: ImageSourcePropType;
+};
+
+/**
+ * Card dimension 498 x 858
+ */
+const CARD_WIDTH =
+  Dimensions.get("screen").width - 2 * customVariables.contentPadding;
+
+const SCALE_FACTOR = CARD_WIDTH / 858;
+
+const TEXT_LEFT_MARGIN = 50 * SCALE_FACTOR;
+
+const CARD_HEIGHT = 498 * SCALE_FACTOR;
+
+const NAME_MARGIN_TOP = 320 * SCALE_FACTOR;
+
+const FISCAL_CODE_MARGIN_TOP = NAME_MARGIN_TOP + 65 * SCALE_FACTOR;
+
+const TITLE_MARGIN_TOP = 50 * SCALE_FACTOR;
+
+const styles = StyleSheet.create({
+  cardBackground: {
+    resizeMode: "contain",
+    height: CARD_HEIGHT,
+    width: CARD_WIDTH
+  },
+  text: {
+    position: "absolute",
+    marginLeft: TEXT_LEFT_MARGIN,
+    color: IOColors.white
+  },
+  fiscalCodeText: {
+    marginTop: FISCAL_CODE_MARGIN_TOP,
+    color: IOColors.white
+  },
+  nameText: {
+    marginTop: NAME_MARGIN_TOP,
+    color: IOColors.white
+  },
+  titleText: {
+    marginTop: TITLE_MARGIN_TOP,
+    colors: IOColors.white
+  }
+});
+
+/**
+ * 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.
+ */
+const ItwCredentialCard = ({ 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")}
+    </H3>
+    <H6
+      style={[styles.text, styles.nameText]}
+      color="white"
+      accessibilityLabel={name}
+    >
+      {name}
+    </H6>
+    <H6
+      style={[styles.text, styles.fiscalCodeText]}
+      color="white"
+      accessibilityLabel={name}
+    >
+      {fiscalCode}
+    </H6>
+  </View>
+);
+
+export default ItwCredentialCard;

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

@@ -20,7 +20,6 @@ import { IOStyles } from "../../../components/core/variables/IOStyles";
 import BadgeButton from "../components/design/BadgeButton";
 import { useIOSelector } from "../../../store/hooks";
 import { ITW_ROUTES } from "../navigation/ItwRoutes";
-import PidCredential from "../components/PidCredential";
 import { IOStackNavigationProp } from "../../../navigation/params/AppParamsList";
 import { ItwParamsList } from "../navigation/ItwParamsList";
 import LoadingSpinnerOverlay from "../../../components/LoadingSpinnerOverlay";
@@ -31,6 +30,7 @@ import { ItwCredentialsPidSelector } from "../store/reducers/itwCredentialsReduc
 import { ItwDecodedPidPotSelector } from "../store/reducers/itwPidDecodeReducer";
 import { useItwResetFlow } from "../hooks/useItwResetFlow";
 import { itWalletExperimentalEnabled } from "../../../config";
+import ItwCredentialCard from "../components/ItwCredentialCard";
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "wallet.contextualHelpTitle",
@@ -92,9 +92,10 @@ const ItwHomeScreen = () => {
             })
           }
         >
-          <PidCredential
+          <ItwCredentialCard
             name={`${decodedPid?.pid.claims.givenName} ${decodedPid?.pid.claims.familyName}`}
             fiscalCode={decodedPid?.pid.claims.taxIdCode as string}
+            backgroundImage={require("../assets/img/pidCredentialCard.png")}
           />
         </Pressable>
         <View

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

@@ -10,7 +10,6 @@ import I18n from "../../../../i18n";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { useIOSelector } from "../../../../store/hooks";
-import PidCredential from "../../components/PidCredential";
 import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import { itwDecodedPidValueSelector } from "../../store/reducers/itwPidDecodeReducer";
@@ -20,6 +19,7 @@ import { IOStackNavigationProp } from "../../../../navigation/params/AppParamsLi
 import { ItwParamsList } from "../../navigation/ItwParamsList";
 import ItwPidClaimsList from "../../components/ItwPidClaimsList";
 import { BlockButtonProps } from "../../../../components/ui/BlockButtons";
+import ItwCredentialCard from "../../components/ItwCredentialCard";
 
 export type ContentViewParams = {
   decodedPid: PidWithToken;
@@ -48,9 +48,10 @@ const ItwPidDetails = () => {
       <ScrollView>
         <VSpacer />
         <View style={IOStyles.horizontalContentPadding}>
-          <PidCredential
+          <ItwCredentialCard
             name={`${decodedPid.pid.claims.givenName} ${decodedPid.pid.claims.familyName}`}
             fiscalCode={decodedPid.pid.claims.taxIdCode as string}
+            backgroundImage={require("../../assets/img/pidCredentialCard.png")}
           />
           <VSpacer />
           <ItwPidClaimsList

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

@@ -11,7 +11,6 @@ import {
   FeatureInfo,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import PidCredential from "../../components/PidCredential";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import I18n from "../../../../i18n";
@@ -32,6 +31,7 @@ import ItwPidClaimsList from "../../components/ItwPidClaimsList";
 import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
 import { itwDecodePid } from "../../store/actions/itwCredentialsActions";
 import { itwPidValueSelector } from "../../store/reducers/itwPidReducer";
+import ItwCredentialCard from "../../components/ItwCredentialCard";
 
 type ContentViewProps = {
   decodedPid: PidWithToken;
@@ -81,7 +81,11 @@ const ItwPidPreviewScreen = () => {
         >
           <VSpacer />
           <View style={IOStyles.horizontalContentPadding}>
-            <PidCredential name={name} fiscalCode={fiscalCode} />
+            <ItwCredentialCard
+              name={name}
+              fiscalCode={fiscalCode}
+              backgroundImage={require("../../assets/img/pidCredentialCard.png")}
+            />
             <VSpacer />
             <FeatureInfo
               body={I18n.t(