diff --git a/ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx b/ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx
index 7a3160f9ccf..1ea38041ca6 100644
--- a/ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx
+++ b/ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx
@@ -2,7 +2,6 @@ import {
IOBadgeHSpacing,
IOBadgeRadius,
IOBadgeVSpacing,
- IOColors,
IOVisualCostants,
makeFontStyleObject
} from "@pagopa/io-app-design-system";
@@ -40,10 +39,11 @@ const ItwDigitalVersionBadge = ({
}
};
- const colorProps = mapCredentialTypes[credentialType] || {
- foreground: IOColors["grey-850"],
- background: IOColors["grey-100"]
- };
+ const colorProps = mapCredentialTypes[credentialType];
+ if (!colorProps) {
+ // If a credential does not have the color configuration means that we should not display the badge
+ return null;
+ }
const { background, foreground } = colorProps;
diff --git a/ts/features/itwallet/common/components/__tests__/ItwCredentialCard.test.tsx b/ts/features/itwallet/common/components/__tests__/ItwCredentialCard.test.tsx
index fd3906acc4c..a35b1ff1480 100644
--- a/ts/features/itwallet/common/components/__tests__/ItwCredentialCard.test.tsx
+++ b/ts/features/itwallet/common/components/__tests__/ItwCredentialCard.test.tsx
@@ -4,6 +4,16 @@ import { CredentialType } from "../../utils/itwMocksUtils";
import { ItwCredentialCard, ItwCredentialStatus } from "../ItwCredentialCard";
describe("ItwCredentialCard", () => {
+ it.each([
+ "EuropeanHealthInsuranceCard",
+ "EuropeanDisabilityCard",
+ "MDL",
+ "PersonIdentificationData"
+ ])("should match snapshot when credential type is %p", type => {
+ const component = render();
+ expect(component).toMatchSnapshot();
+ });
+
it.each([
"valid",
"expired",
@@ -13,10 +23,7 @@ describe("ItwCredentialCard", () => {
"should match snapshot when status is %p",
status => {
const component = render(
-
+
);
expect(component).toMatchSnapshot();
}
diff --git a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap
index 519201c4fac..52c3db1ea0a 100644
--- a/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap
+++ b/ts/features/itwallet/common/components/__tests__/__snapshots__/ItwCredentialCard.test.tsx.snap
@@ -1,5 +1,617 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`ItwCredentialCard should match snapshot when credential type is "EuropeanDisabilityCard" 1`] = `
+
+
+
+
+
+
+
+
+ CARTA EUROPEA DELLA DISABILITÀ
+
+
+
+
+
+
+ Versione digitale
+
+
+
+
+
+
+`;
+
+exports[`ItwCredentialCard should match snapshot when credential type is "EuropeanHealthInsuranceCard" 1`] = `
+
+
+
+
+
+
+
+
+ TESSERA SANITARIA
+
+
+
+
+
+
+ Versione digitale
+
+
+
+
+
+
+`;
+
+exports[`ItwCredentialCard should match snapshot when credential type is "MDL" 1`] = `
+
+
+
+
+
+
+
+
+ PATENTE DI GUIDA
+
+
+
+
+
+
+ Versione digitale
+
+
+
+
+
+
+`;
+
+exports[`ItwCredentialCard should match snapshot when credential type is "PersonIdentificationData" 1`] = `
+
+
+
+
+
+
+
+
+ IDENTITÀ DIGITALE
+
+
+
+
+
+
+`;
+
exports[`ItwCredentialCard should match snapshot when status is "expired" 1`] = `
- IDENTITÀ DIGITALE
+ PATENTE DI GUIDA
- IDENTITÀ DIGITALE
+ PATENTE DI GUIDA
- IDENTITÀ DIGITALE
+ PATENTE DI GUIDA
- IDENTITÀ DIGITALE
+ PATENTE DI GUIDA
@@ -959,7 +1571,7 @@ exports[`ItwCredentialCard should match snapshot when status is "valid" 1`] = `
"paddingVertical": 4,
},
{
- "backgroundColor": "#E8EBF1",
+ "backgroundColor": "#FADCF5",
},
]
}
@@ -983,7 +1595,7 @@ exports[`ItwCredentialCard should match snapshot when status is "valid" 1`] = `
"fontWeight": "400",
},
{
- "color": "#2B2E38",
+ "color": "#5E303E",
},
]
}
@@ -1108,62 +1720,6 @@ exports[`ItwCredentialCard should render the preview 1`] = `
-
-
-
- Versione digitale
-
-
-