feat(IT Wallet): [SIW-1742] Display credentials authentic source

locales/en/index.yml

@@ -3255,11 +3255,11 @@ features:
         placeOfBirth: "Luogo di nascita"
         expirationDate: "Scadenza"
         securityLevel: "Livello di sicurezza"
-        issuedBy: "Credenziale emessa da"
         info: "Ulteriori info su questi dati"
         issuedByNew: "Emessa da"
         releasedBy: Emissione versione digitale
         attachments: "Attachments"
+        authenticSource: Origine dei dati
         mdl:
           category: "Licenza {{category}}"
           issuedDate: "Valida dal"
@@ -3334,6 +3334,9 @@ features:
           about:
             title: "Chi è?"
             subtitle: "È l'ente riconosciuto dallo Stato a fornirti la versione digitale dei tuoi documenti."
+          authSource:
+            title: "Chi è?"
+            subtitle: "È l'ente che detiene i dati contenuti all'interno del tuo documento."
         actions:
           primary: Aggiungi al portafoglio
           secondary: Annulla

locales/it/index.yml

@@ -3255,11 +3255,11 @@ features:
         placeOfBirth: "Luogo di nascita"
         expirationDate: "Scadenza"
         securityLevel: "Livello di sicurezza"
-        issuedBy: "Credenziale emessa da"
         info: "Ulteriori info su questi dati"
         issuedByNew: "Emessa da"
         releasedBy: Emissione versione digitale
         attachments: "Allegati"
+        authenticSource: Origine dei dati
         mdl:
           category: "Licenza {{category}}"
           issuedDate: "Valida dal"
@@ -3334,6 +3334,9 @@ features:
           about:
             title: "Chi è?"
             subtitle: "È l'ente riconosciuto dallo Stato a fornirti la versione digitale dei tuoi documenti."
+          authSource:
+            title: "Chi è?"
+            subtitle: "È l'ente che detiene i dati contenuti all'interno del tuo documento."
         actions:
           primary: Aggiungi al portafoglio
           secondary: Annulla

package.json

@@ -115,7 +115,7 @@
     "@pagopa/io-react-native-integrity": "^0.3.0",
     "@pagopa/io-react-native-jwt": "^1.2.0",
     "@pagopa/io-react-native-login-utils": "1.0.6",
-    "@pagopa/io-react-native-wallet": "^0.20.0",
+    "@pagopa/io-react-native-wallet": "^0.21.0",
     "@pagopa/io-react-native-zendesk": "^0.3.29",
     "@pagopa/react-native-cie": "^1.3.0",
     "@pagopa/ts-commons": "^10.15.0",

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

@@ -0,0 +1,160 @@
+import { Divider, ListItemInfo } from "@pagopa/io-app-design-system";
+import React, { useMemo } from "react";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import I18n from "../../../../i18n";
+import { useItwInfoBottomSheet } from "../hooks/useItwInfoBottomSheet";
+import { StoredCredential } from "../utils/itwTypesUtils";
+import {
+  CREDENTIALS_MAP,
+  trackWalletCredentialShowAuthSource,
+  trackWalletCredentialShowIssuer
+} from "../../analytics";
+
+type ItwIssuanceMetadataProps = {
+  credential: StoredCredential;
+  isPreview?: boolean;
+};
+
+type ItwMetadataIssuanceListItemProps = {
+  label: string;
+  value: string;
+  bottomSheet: {
+    contentTitle: string;
+    contentBody: string;
+    onPress: () => void;
+  };
+  isPreview?: boolean;
+};
+
+const ItwMetadataIssuanceListItem = ({
+  label,
+  value,
+  bottomSheet: bottomSheetProps,
+  isPreview
+}: ItwMetadataIssuanceListItemProps) => {
+  const bottomSheet = useItwInfoBottomSheet({
+    title: value,
+    content: [
+      {
+        title: bottomSheetProps.contentTitle,
+        body: bottomSheetProps.contentBody
+      }
+    ]
+  });
+
+  const endElement: ListItemInfo["endElement"] = useMemo(() => {
+    if (isPreview) {
+      return;
+    }
+
+    return {
+      type: "iconButton",
+      componentProps: {
+        icon: "info",
+        accessibilityLabel: `Info ${label}`,
+        onPress: () => {
+          bottomSheetProps.onPress();
+          bottomSheet.present();
+        }
+      }
+    };
+  }, [isPreview, bottomSheet, bottomSheetProps, label]);
+
+  return (
+    <>
+      <ListItemInfo
+        endElement={endElement}
+        label={label}
+        value={value}
+        accessibilityLabel={`${label} ${value}`}
+      />
+      {bottomSheet.bottomSheet}
+    </>
+  );
+};
+
+const getAuthSource = (credential: StoredCredential) =>
+  pipe(
+    credential.issuerConf.openid_credential_issuer
+      .credential_configurations_supported?.[credential.credentialType],
+    O.fromNullable,
+    O.map(config => config.authentic_source),
+    O.toUndefined
+  );
+
+/**
+ * Renders additional issuance-related metadata, i.e. releaser and auth source.
+ * They are not part of the claims list, thus they're rendered separately.
+ * @param credential - the credential with the issuer configuration
+ * @param isPreview - whether the component is rendered in preview mode which hides the info button.
+ * @returns the list items with the metadata.
+ */
+export const ItwIssuanceMetadata = ({
+  credential,
+  isPreview
+}: ItwIssuanceMetadataProps) => {
+  const releaserName =
+    credential.issuerConf.federation_entity.organization_name;
+  const authSource = getAuthSource(credential);
+
+  const releaserNameBottomSheet: ItwMetadataIssuanceListItemProps["bottomSheet"] =
+    useMemo(
+      () => ({
+        contentTitle: I18n.t(
+          "features.itWallet.issuance.credentialPreview.bottomSheet.about.title"
+        ),
+        contentBody: I18n.t(
+          "features.itWallet.issuance.credentialPreview.bottomSheet.about.subtitle"
+        ),
+        onPress: () =>
+          trackWalletCredentialShowIssuer(
+            CREDENTIALS_MAP[credential.credentialType]
+          )
+      }),
+      [credential.credentialType]
+    );
+
+  const authSourceBottomSheet: ItwMetadataIssuanceListItemProps["bottomSheet"] =
+    useMemo(
+      () => ({
+        contentTitle: I18n.t(
+          "features.itWallet.issuance.credentialPreview.bottomSheet.authSource.title"
+        ),
+        contentBody: I18n.t(
+          "features.itWallet.issuance.credentialPreview.bottomSheet.authSource.subtitle"
+        ),
+        onPress: () =>
+          trackWalletCredentialShowAuthSource(
+            CREDENTIALS_MAP[credential.credentialType]
+          )
+      }),
+      [credential.credentialType]
+    );
+
+  return (
+    <>
+      {authSource && (
+        <ItwMetadataIssuanceListItem
+          label={I18n.t(
+            "features.itWallet.verifiableCredentials.claims.authenticSource"
+          )}
+          value={authSource}
+          isPreview={isPreview}
+          bottomSheet={authSourceBottomSheet}
+        />
+      )}
+      {authSource && releaserName && <Divider />}
+      {releaserName && (
+        <ItwMetadataIssuanceListItem
+          label={I18n.t(
+            "features.itWallet.verifiableCredentials.claims.releasedBy"
+          )}
+          value={releaserName}
+          isPreview={isPreview}
+          bottomSheet={releaserNameBottomSheet}
+        />
+      )}
+    </>
+  );
+};

ts/features/itwallet/issuance/components/ItwCredentialPreviewClaimsList.tsx

@@ -2,7 +2,7 @@ import { Divider } from "@pagopa/io-app-design-system";
 import React from "react";
 import { View } from "react-native";
 import { ItwCredentialClaim } from "../../common/components/ItwCredentialClaim";
-import { ItwReleaserName } from "../../common/components/ItwReleaserName";
+import { ItwIssuanceMetadata } from "../../common/components/ItwIssuanceMetadata";
 import { parseClaims, WellKnownClaim } from "../../common/utils/itwClaimsUtils";
 import { StoredCredential } from "../../common/utils/itwTypesUtils";
 
@@ -35,7 +35,7 @@ const ItwCredentialPreviewClaimsList = ({
       {releaserVisible && (
         <>
           <Divider />
-          <ItwReleaserName credential={data} isPreview={true} />
+          <ItwIssuanceMetadata credential={data} isPreview={true} />
         </>
       )}
     </>

ts/features/itwallet/presentation/components/ItwPresentationClaimsSection.tsx

@@ -9,7 +9,7 @@ import { View } from "react-native";
 import I18n from "../../../../i18n";
 import { ItwCredentialClaim } from "../../common/components/ItwCredentialClaim";
 import { ItwQrCodeClaimImage } from "../../common/components/ItwQrCodeClaimImage";
-import { ItwReleaserName } from "../../common/components/ItwReleaserName";
+import { ItwIssuanceMetadata } from "../../common/components/ItwIssuanceMetadata";
 import {
   getCredentialStatus,
   parseClaims,
@@ -81,7 +81,7 @@ export const ItwPresentationClaimsSection = ({
         );
       })}
       {claims.length > 0 && <Divider />}
-      <ItwReleaserName credential={credential} isPreview={false} />
+      <ItwIssuanceMetadata credential={credential} isPreview={false} />
     </View>
   );
 };

ts/features/itwallet/presentation/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap

@@ -1887,7 +1887,7 @@ exports[`ItwPresentationClaimsSection should match the snapshot when claims are
                               }
                             >
                               <View
-                                accessibilityLabel="Info"
+                                accessibilityLabel="Info Emissione versione digitale"
                                 accessibilityRole="button"
                                 accessibilityState={
                                   {
@@ -4386,7 +4386,7 @@ exports[`ItwPresentationClaimsSection should match the snapshot when claims are
                               }
                             >
                               <View
-                                accessibilityLabel="Info"
+                                accessibilityLabel="Info Emissione versione digitale"
                                 accessibilityRole="button"
                                 accessibilityState={
                                   {

yarn.lock

@@ -2110,10 +2110,10 @@
   resolved "https://registry.yarnpkg.com/@pagopa/io-react-native-login-utils/-/io-react-native-login-utils-1.0.6.tgz#b211e953eb05b76b43effc0d9d7be79767c361f9"
   integrity sha512-Dx1WPdqFaB76Wv8WgkLCIQoj9ADZeWyfe/GTnGWQKeIWnTe5v3socbEDdax9fh0asxizuTVzTVj962H2nCQxwg==
 
-"@pagopa/io-react-native-wallet@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@pagopa/io-react-native-wallet/-/io-react-native-wallet-0.20.0.tgz#f6c3794d94716074a938051fa115b56f94fa6931"
-  integrity sha512-hAMTMre3lhSdD7zyj7Qk9izBwOEPqm0/Zh9X8zcdjGECKG0bqFOpT0XWqGp1JTpj8/Hwnk07DRV8RPnkaQBwRg==
+"@pagopa/io-react-native-wallet@^0.21.0":
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-react-native-wallet/-/io-react-native-wallet-0.21.0.tgz#6ef096bf6864c9ebbc165a13eac7c3f8987b06a4"
+  integrity sha512-2k0gCbm7Qv0gllfp69V7AEFEPK3QlWqzRj99GsLVCdkLdb4zFtuQp+Ifxkp2IPPUyPYsZ0fqF67V4QFapzYJQQ==
   dependencies:
     js-sha256 "^0.9.0"
     parse-url "^9.2.0"