From 64895299e25d5c159f841112e1624fdacd1f5bec Mon Sep 17 00:00:00 2001
From: Federico Mastrini <federicomastrini93@gmail.com>
Date: Fri, 20 Sep 2024 11:31:29 +0200
Subject: [PATCH] fix(IT Wallet): [SIW-1658] Remove digital version badge from
 eID card (#6202)

## Short description
This PR fixes a regression which causes the display of the "Digital
version" badge on eID cards

## List of changes proposed in this pull request
- Removed "Digital version" badge from eID card
- Added tests

## How to test
Navigate to the wallet, check that the eID does not have the "Digital
version" badge on it, both in the wallet and in the details screen
---
 .../components/ItwDigitalVersionBadge.tsx     |  10 +-
 .../__tests__/ItwCredentialCard.test.tsx      |  15 +-
 .../ItwCredentialCard.test.tsx.snap           | 702 ++++++++++++++++--
 3 files changed, 645 insertions(+), 82 deletions(-)

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(<ItwCredentialCard credentialType={type} />);
+    expect(component).toMatchSnapshot();
+  });
+
   it.each([
     "valid",
     "expired",
@@ -13,10 +23,7 @@ describe("ItwCredentialCard", () => {
     "should match snapshot when status is %p",
     status => {
       const component = render(
-        <ItwCredentialCard
-          credentialType={CredentialType.PID}
-          status={status}
-        />
+        <ItwCredentialCard credentialType={"MDL"} status={status} />
       );
       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`] = `
+<View
+  style={false}
+>
+  <View
+    style={
+      {
+        "aspectRatio": 1.6,
+        "borderRadius": 8,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#E8EBF1",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <Image
+        accessibilityIgnoresInvertColors={false}
+        onLoad={[Function]}
+        source={
+          {
+            "testUri": "../../../img/features/itWallet/cards/dc.png",
+          }
+        }
+        style={
+          [
+            {
+              "opacity": 0,
+            },
+            {
+              "height": "100%",
+              "width": "100%",
+            },
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingTop": 14,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "columnGap": 16,
+            "display": "flex",
+            "flexDirection": "row",
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "flex": 1,
+                "fontFamily": "Titillium Sans Pro",
+                "fontSize": 16,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+              },
+              {
+                "color": "#17406F",
+              },
+            ]
+          }
+        >
+          CARTA EUROPEA DELLA DISABILITÀ
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "bottom": 16,
+          "position": "absolute",
+          "right": 0,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderBottomLeftRadius": 24,
+              "borderCurve": "continuous",
+              "borderTopLeftRadius": 24,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 8,
+              "paddingVertical": 4,
+            },
+            {
+              "backgroundColor": "#E8EEF4",
+            },
+          ]
+        }
+      >
+        <Text
+          ellipsizeMode="tail"
+          maxFontSizeMultiplier={1.25}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "alignSelf": "center",
+                "flexShrink": 1,
+                "fontSize": 12,
+                "lineHeight": 16,
+                "textTransform": "uppercase",
+              },
+              {
+                "fontFamily": "Readex Pro",
+                "fontStyle": "normal",
+                "fontWeight": "400",
+              },
+              {
+                "color": "#01527F",
+              },
+            ]
+          }
+        >
+          Versione digitale
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "borderColor": "transparent",
+            "borderLeftWidth": 9,
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "borderColor": "transparent",
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`ItwCredentialCard should match snapshot when credential type is "EuropeanHealthInsuranceCard" 1`] = `
+<View
+  style={false}
+>
+  <View
+    style={
+      {
+        "aspectRatio": 1.6,
+        "borderRadius": 8,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#E8EBF1",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <Image
+        accessibilityIgnoresInvertColors={false}
+        onLoad={[Function]}
+        source={
+          {
+            "testUri": "../../../img/features/itWallet/cards/ts.png",
+          }
+        }
+        style={
+          [
+            {
+              "opacity": 0,
+            },
+            {
+              "height": "100%",
+              "width": "100%",
+            },
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingTop": 14,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "columnGap": 16,
+            "display": "flex",
+            "flexDirection": "row",
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "flex": 1,
+                "fontFamily": "Titillium Sans Pro",
+                "fontSize": 16,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+              },
+              {
+                "color": "#032D5C",
+              },
+            ]
+          }
+        >
+          TESSERA SANITARIA
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "bottom": 16,
+          "position": "absolute",
+          "right": 0,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderBottomLeftRadius": 24,
+              "borderCurve": "continuous",
+              "borderTopLeftRadius": 24,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 8,
+              "paddingVertical": 4,
+            },
+            {
+              "backgroundColor": "#ABD8F2",
+            },
+          ]
+        }
+      >
+        <Text
+          ellipsizeMode="tail"
+          maxFontSizeMultiplier={1.25}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "alignSelf": "center",
+                "flexShrink": 1,
+                "fontSize": 12,
+                "lineHeight": 16,
+                "textTransform": "uppercase",
+              },
+              {
+                "fontFamily": "Readex Pro",
+                "fontStyle": "normal",
+                "fontWeight": "400",
+              },
+              {
+                "color": "#032D5C",
+              },
+            ]
+          }
+        >
+          Versione digitale
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "borderColor": "transparent",
+            "borderLeftWidth": 9,
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "borderColor": "transparent",
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`ItwCredentialCard should match snapshot when credential type is "MDL" 1`] = `
+<View
+  style={false}
+>
+  <View
+    style={
+      {
+        "aspectRatio": 1.6,
+        "borderRadius": 8,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#E8EBF1",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <Image
+        accessibilityIgnoresInvertColors={false}
+        onLoad={[Function]}
+        source={
+          {
+            "testUri": "../../../img/features/itWallet/cards/mdl.png",
+          }
+        }
+        style={
+          [
+            {
+              "opacity": 0,
+            },
+            {
+              "height": "100%",
+              "width": "100%",
+            },
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingTop": 14,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "columnGap": 16,
+            "display": "flex",
+            "flexDirection": "row",
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "flex": 1,
+                "fontFamily": "Titillium Sans Pro",
+                "fontSize": 16,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+              },
+              {
+                "color": "#652035",
+              },
+            ]
+          }
+        >
+          PATENTE DI GUIDA
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "bottom": 16,
+          "position": "absolute",
+          "right": 0,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderBottomLeftRadius": 24,
+              "borderCurve": "continuous",
+              "borderTopLeftRadius": 24,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 8,
+              "paddingVertical": 4,
+            },
+            {
+              "backgroundColor": "#FADCF5",
+            },
+          ]
+        }
+      >
+        <Text
+          ellipsizeMode="tail"
+          maxFontSizeMultiplier={1.25}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "alignSelf": "center",
+                "flexShrink": 1,
+                "fontSize": 12,
+                "lineHeight": 16,
+                "textTransform": "uppercase",
+              },
+              {
+                "fontFamily": "Readex Pro",
+                "fontStyle": "normal",
+                "fontWeight": "400",
+              },
+              {
+                "color": "#5E303E",
+              },
+            ]
+          }
+        >
+          Versione digitale
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "borderColor": "transparent",
+            "borderLeftWidth": 9,
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "borderColor": "transparent",
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`ItwCredentialCard should match snapshot when credential type is "PersonIdentificationData" 1`] = `
+<View
+  style={false}
+>
+  <View
+    style={
+      {
+        "aspectRatio": 1.6,
+        "borderRadius": 8,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#E8EBF1",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <Image
+        accessibilityIgnoresInvertColors={false}
+        onLoad={[Function]}
+        source={
+          {
+            "testUri": "../../../img/features/itWallet/cards/eid.png",
+          }
+        }
+        style={
+          [
+            {
+              "opacity": 0,
+            },
+            {
+              "height": "100%",
+              "width": "100%",
+            },
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingTop": 14,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "columnGap": 16,
+            "display": "flex",
+            "flexDirection": "row",
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "flex": 1,
+                "fontFamily": "Titillium Sans Pro",
+                "fontSize": 16,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+              },
+              {
+                "color": "#032D5C",
+              },
+            ]
+          }
+        >
+          IDENTITÀ DIGITALE
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "borderColor": "transparent",
+            "borderLeftWidth": 9,
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "borderColor": "transparent",
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;
+
 exports[`ItwCredentialCard should match snapshot when status is "expired" 1`] = `
 <View
   style={false}
@@ -30,7 +642,7 @@ exports[`ItwCredentialCard should match snapshot when status is "expired" 1`] =
         onLoad={[Function]}
         source={
           {
-            "testUri": "../../../img/features/itWallet/cards/eid_off.png",
+            "testUri": "../../../img/features/itWallet/cards/mdl_off.png",
           }
         }
         style={
@@ -83,7 +695,7 @@ exports[`ItwCredentialCard should match snapshot when status is "expired" 1`] =
             ]
           }
         >
-          IDENTITÀ DIGITALE
+          PATENTE DI GUIDA
         </Text>
         <View
           style={
@@ -226,7 +838,7 @@ exports[`ItwCredentialCard should match snapshot when status is "expired" 1`] =
               "paddingVertical": 4,
             },
             {
-              "backgroundColor": "#E8EBF1",
+              "backgroundColor": "#FADCF5",
             },
           ]
         }
@@ -250,7 +862,7 @@ exports[`ItwCredentialCard should match snapshot when status is "expired" 1`] =
                 "fontWeight": "400",
               },
               {
-                "color": "#2B2E38",
+                "color": "#5E303E",
               },
             ]
           }
@@ -313,7 +925,7 @@ exports[`ItwCredentialCard should match snapshot when status is "expiring" 1`] =
         onLoad={[Function]}
         source={
           {
-            "testUri": "../../../img/features/itWallet/cards/eid_off.png",
+            "testUri": "../../../img/features/itWallet/cards/mdl_off.png",
           }
         }
         style={
@@ -366,7 +978,7 @@ exports[`ItwCredentialCard should match snapshot when status is "expiring" 1`] =
             ]
           }
         >
-          IDENTITÀ DIGITALE
+          PATENTE DI GUIDA
         </Text>
         <View
           style={
@@ -509,7 +1121,7 @@ exports[`ItwCredentialCard should match snapshot when status is "expiring" 1`] =
               "paddingVertical": 4,
             },
             {
-              "backgroundColor": "#E8EBF1",
+              "backgroundColor": "#FADCF5",
             },
           ]
         }
@@ -533,7 +1145,7 @@ exports[`ItwCredentialCard should match snapshot when status is "expiring" 1`] =
                 "fontWeight": "400",
               },
               {
-                "color": "#2B2E38",
+                "color": "#5E303E",
               },
             ]
           }
@@ -596,7 +1208,7 @@ exports[`ItwCredentialCard should match snapshot when status is "pending" 1`] =
         onLoad={[Function]}
         source={
           {
-            "testUri": "../../../img/features/itWallet/cards/eid_off.png",
+            "testUri": "../../../img/features/itWallet/cards/mdl_off.png",
           }
         }
         style={
@@ -649,7 +1261,7 @@ exports[`ItwCredentialCard should match snapshot when status is "pending" 1`] =
             ]
           }
         >
-          IDENTITÀ DIGITALE
+          PATENTE DI GUIDA
         </Text>
         <View
           style={
@@ -792,7 +1404,7 @@ exports[`ItwCredentialCard should match snapshot when status is "pending" 1`] =
               "paddingVertical": 4,
             },
             {
-              "backgroundColor": "#E8EBF1",
+              "backgroundColor": "#FADCF5",
             },
           ]
         }
@@ -816,7 +1428,7 @@ exports[`ItwCredentialCard should match snapshot when status is "pending" 1`] =
                 "fontWeight": "400",
               },
               {
-                "color": "#2B2E38",
+                "color": "#5E303E",
               },
             ]
           }
@@ -879,7 +1491,7 @@ exports[`ItwCredentialCard should match snapshot when status is "valid" 1`] = `
         onLoad={[Function]}
         source={
           {
-            "testUri": "../../../img/features/itWallet/cards/eid.png",
+            "testUri": "../../../img/features/itWallet/cards/mdl.png",
           }
         }
         style={
@@ -927,12 +1539,12 @@ exports[`ItwCredentialCard should match snapshot when status is "valid" 1`] = `
                 "fontWeight": "600",
               },
               {
-                "color": "#032D5C",
+                "color": "#652035",
               },
             ]
           }
         >
-          IDENTITÀ DIGITALE
+          PATENTE DI GUIDA
         </Text>
       </View>
     </View>
@@ -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`] = `
         </Text>
       </View>
     </View>
-    <View
-      style={
-        {
-          "bottom": 16,
-          "position": "absolute",
-          "right": 0,
-        }
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "borderBottomLeftRadius": 24,
-              "borderCurve": "continuous",
-              "borderTopLeftRadius": 24,
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 8,
-              "paddingVertical": 4,
-            },
-            {
-              "backgroundColor": "#E8EBF1",
-            },
-          ]
-        }
-      >
-        <Text
-          ellipsizeMode="tail"
-          maxFontSizeMultiplier={1.25}
-          numberOfLines={1}
-          style={
-            [
-              {
-                "alignSelf": "center",
-                "flexShrink": 1,
-                "fontSize": 12,
-                "lineHeight": 16,
-                "textTransform": "uppercase",
-              },
-              {
-                "fontFamily": "Readex Pro",
-                "fontStyle": "normal",
-                "fontWeight": "400",
-              },
-              {
-                "color": "#2B2E38",
-              },
-            ]
-          }
-        >
-          Versione digitale
-        </Text>
-      </View>
-    </View>
     <View
       style={
         [