[INJIMOB-1369] fetch idType from wellknown to display in detailed view (

mosip#1444) * [INJIMOB-1369] remove vc verification for openg2p vc Signed-off-by: PuBHARGAVI <[email protected]> * [INJIMOB-1369] verify only esignet and otp flow VC's Signed-off-by: PuBHARGAVI <[email protected]> * [INJIMOB-1369] change rsa bit size to 1024 in crypto util file Signed-off-by: PuBHARGAVI <[email protected]> * [INJIMOB-1369] - Remove issuer hardcoding for rendering id type, activation status and supporting multiple credential type. Signed-off-by: Swati Goel <[email protected]> * [INJIMOB-1369] show id type properly in history logs Signed-off-by: PuBHARGAVI <[email protected]> * [INJIMOB-1369] point to injimob-1369-id4africa branch of secure keystore Signed-off-by: PuBHARGAVI <[email protected]> * [INJIMOB-1369] show the translations properly for the id type based on selected language and fix the display of benifits field of sunbird VC Signed-off-by: PuBHARGAVI <[email protected]> * [INJIMOB-1369] use semicolon as separator for benifits field instead of comma Signed-off-by: PuBHARGAVI <[email protected]> * Revert "[INJIMOB-1369] use semicolon as separator for benifits field instead of comma" This reverts commit cb6399a. * [INJIMOB-1369] remove uin and vid fields from detail view add on fields list Signed-off-by: PuBHARGAVI <[email protected]> * [INJIMOB-1369] convert idType object to switch case and return insurance card as idType for the cards for which translations are not available Signed-off-by: PuBHARGAVI <[email protected]> * [INJIMOB-1368] fetch the list of fields properly from wellknown credential supported field based on the type of it" wellknown config version 11 has credential supported field type as array of objects but v13 has object of objects so added logic to fetch the list of fields properly based on type Signed-off-by: PuBHARGAVI <[email protected]> * [INJIMOB-1369] use credential type of selected VC from wellknown api response rather than from config Signed-off-by: PuBHARGAVI <[email protected]> --------- Signed-off-by: PuBHARGAVI <[email protected]> Signed-off-by: Swati Goel <[email protected]> Co-authored-by: Swati Goel <[email protected]>
tw-mosip · May 20, 2024 · 7fd13ed · 7fd13ed
1 parent d73b53d
commit 7fd13ed
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 58 deletions.
diff --git a/components/ActivityLogEvent.ts b/components/ActivityLogEvent.ts
@@ -1,4 +1,4 @@
-import {ID_TYPE} from '../shared/openId4VCI/Utils';
+import {getIDTypeTranslations} from '../shared/openId4VCI/Utils';
 
 export type ActivityLogType =
   | '' // replacement for undefined
@@ -58,7 +58,7 @@ export class ActivityLog {
 
 export function getActionText(activity: ActivityLog, t) {
   if (activity.idType && activity.idType !== '') {
-    let cardType = ID_TYPE[`${activity.idType}`]();
+    let cardType = getIDTypeTranslations(`${activity.idType}`);
     return `${t(activity.type, {idType: cardType, id: activity.id})}`;
   }
   return `${t(activity.type, {idType: '', id: activity.id})}`;

diff --git a/components/QrCodeOverlay.tsx b/components/QrCodeOverlay.tsx
@@ -109,6 +109,6 @@ export const QrCodeOverlay: React.FC<QrCodeOverlayProps> = props => {
 };
 
 interface QrCodeOverlayProps {
-  verifiableCredential: VerifiableCredential;
+  verifiableCredential: VerifiableCredential | Credential;
   meta: VCMetadata;
 }
diff --git a/components/VC/Views/VCDetailView.tsx b/components/VC/Views/VCDetailView.tsx
@@ -3,6 +3,7 @@ import {useTranslation} from 'react-i18next';
 import {Image, ImageBackground, View} from 'react-native';
 import {
   VerifiableCredential,
+  VerifiableCredentialData,
   WalletBindingResponse,
 } from '../../../machines/VerifiableCredential/VCMetaMachine/vc';
 import {Button, Column, Row, Text} from '../../ui';
@@ -21,7 +22,7 @@ import {
   isVCLoaded,
   setBackgroundColour,
 } from '../common/VCUtils';
-import {setTextColor} from '../common/VCItemField';
+import {setHrLineColor, setTextColor} from '../common/VCItemField';
 import {ActivityIndicator} from '../../ui/ActivityIndicator';
 import {ProfileIcon} from '../../ProfileIcon';
 
@@ -134,8 +135,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = props => {
                     style={[
                       Theme.Styles.hrLine,
                       {
-                        borderBottomColor: setTextColor(wellknown, 'hrLine')
-                          ?.color,
+                        borderBottomColor: setHrLineColor(wellknown),
                       },
                     ]}></View>
                   <Column padding="0 14 14 14">
@@ -235,8 +235,8 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = props => {
 
 export interface VCItemDetailsProps {
   credential: VerifiableCredential | Credential;
-  verifiableCredentialData: any;
-  walletBindingResponse: WalletBindingResponse;
+  verifiableCredentialData: VerifiableCredentialData;
+  walletBindingResponse?: WalletBindingResponse;
   onBinding?: () => void;
   activeTab?: Number;
   vcHasImage: boolean;

diff --git a/components/VC/common/VCItemField.tsx b/components/VC/common/VCItemField.tsx
@@ -39,14 +39,18 @@ export const VCItemField = props => {
   );
 };
 
-export const setTextColor = (wellknown: any, component = '') => {
-  if (wellknown && wellknown?.credentials_supported[0]?.display) {
+export const setTextColor = (wellknown: any) => {
+  if (wellknown?.display) {
     return {
-      color: wellknown.credentials_supported[0]?.display[0]?.text_color
-        ? wellknown.credentials_supported[0].display[0].text_color
-        : component === 'hrLine'
-        ? Theme.Styles.hrLine.borderBottomColor
-        : Theme.Colors.Details,
+      color: wellknown.display[0]?.text_color ?? Theme.Colors.Details,
     };
   }
 };
+
+export const setHrLineColor = (wellknown: any) => {
+  if (wellknown && wellknown?.display) {
+    return (
+      wellknown?.display[0]?.text_color ?? Theme.Styles.hrLine.borderBottomColor
+    );
+  }
+};
diff --git a/components/VC/common/VCUtils.tsx b/components/VC/common/VCUtils.tsx
@@ -8,9 +8,13 @@ import {VCItemField} from './VCItemField';
 import React from 'react';
 import {Theme} from '../../ui/styleUtils';
 import {CREDENTIAL_REGISTRY_EDIT} from 'react-native-dotenv';
-import {ID_TYPE, getIDType} from '../../../shared/openId4VCI/Utils';
+import {
+  getIDType,
+  getIDTypeTranslations,
+} from '../../../shared/openId4VCI/Utils';
 import {VCVerification} from '../../VCVerification';
 import {MIMOTO_BASE_URL} from '../../../shared/constants';
+import {VCItemDetailsProps} from '../Views/VCDetailView';
 
 export const CARD_VIEW_DEFAULT_FIELDS = ['fullName'];
 export const DETAIL_VIEW_DEFAULT_FIELDS = [
@@ -43,7 +47,7 @@ export const BOTTOM_SECTION_FIELDS_WITH_DETAILED_ADDRESS_FIELDS = [
 ];
 
 export const getFieldValue = (
-  verifiableCredential: VerifiableCredential,
+  verifiableCredential: VerifiableCredential | Credential,
   field: string,
   wellknown: any,
   props: any,
@@ -63,7 +67,7 @@ export const getFieldValue = (
         />
       );
     case 'idType':
-      return ID_TYPE[getIDType(props.credential)]();
+      return getIdType(wellknown);
     case 'credentialRegistry':
       return props?.vc?.credentialRegistry;
     case 'address':
@@ -80,11 +84,30 @@ export const getFieldValue = (
   }
 };
 
+export const getSelectedCredentialTypeDetails = (
+  wellknown: any,
+  vcCredentialTypes: Object[],
+) => {
+  for (let credential in wellknown.credentials_supported) {
+    const credentialDetails = wellknown.credentials_supported[credential];
+
+    if (
+      JSON.stringify(credentialDetails.credential_definition.type) ===
+      JSON.stringify(vcCredentialTypes)
+    ) {
+      return credentialDetails;
+    }
+  }
+
+  console.error(
+    'Selected credential type is not available in wellknown config supported credentials list',
+  );
+};
+
 export const getFieldName = (field: string, wellknown: any) => {
-  if (wellknown && wellknown.credentials_supported) {
-    const fieldObj =
-      wellknown.credentials_supported[0].credential_definition
-        .credentialSubject[field];
+  if (wellknown) {
+    const credentialDefinition = wellknown.credential_definition;
+    let fieldObj = credentialDefinition.credentialSubject[field];
     if (fieldObj) {
       const newFieldObj = fieldObj.display.map(obj => {
         return {language: obj.locale, value: obj.name};
@@ -96,12 +119,10 @@ export const getFieldName = (field: string, wellknown: any) => {
 };
 
 export const setBackgroundColour = (wellknown: any) => {
-  if (wellknown && wellknown.credentials_supported[0]?.display) {
+  if (wellknown?.display) {
     return {
-      backgroundColor: wellknown.credentials_supported[0].display[0]
-        ?.background_color
-        ? wellknown.credentials_supported[0].display[0].background_color
-        : Theme.Colors.textValue,
+      backgroundColor:
+        wellknown.display[0]?.background_color ?? Theme.Colors.textValue,
     };
   }
 };
@@ -141,9 +162,9 @@ function formattedDateTime(timeStamp: any) {
 
 export const fieldItemIterator = (
   fields: any[],
-  verifiableCredential: any,
+  verifiableCredential: VerifiableCredential | Credential,
   wellknown: any,
-  props: any,
+  props: VCItemDetailsProps,
 ) => {
   return fields.map(field => {
     const fieldName = getFieldName(field, wellknown);
@@ -188,3 +209,12 @@ export const getMosipLogo = () => {
     alt_text: 'a square logo of mosip',
   };
 };
+
+export const getIdType = (wellknown: any) => {
+  if (wellknown && wellknown?.display) {
+    const idTypeObj = wellknown.display.map(displayProps => {
+      return {language: displayProps.locale, value: displayProps.name};
+    });
+    return getLocalizedField(idTypeObj);
+  }
+};
diff --git a/machines/VerifiableCredential/VCItemMachine/VCItemSelectors.ts b/machines/VerifiableCredential/VCItemMachine/VCItemSelectors.ts
@@ -2,6 +2,7 @@ import {StateFrom} from 'xstate';
 import {VCMetadata} from '../../../shared/VCMetadata';
 import {VCItemMachine} from './VCItemMachine';
 import {getMosipLogo} from '../../../components/VC/common/VCUtils';
+import {VerifiableCredentialData} from '../VCMetaMachine/vc';
 
 type State = StateFrom<typeof VCItemMachine>;
 
@@ -15,7 +16,9 @@ export function selectCredential(state: State) {
     : state.context.verifiableCredential;
 }
 
-export function selectVerifiableCredentialData(state: State) {
+export function selectVerifiableCredentialData(
+  state: State,
+): VerifiableCredentialData {
   const vcMetadata = new VCMetadata(state.context.vcMetadata);
   return vcMetadata.isFromOpenId4VCI()
     ? {

diff --git a/machines/VerifiableCredential/VCMetaMachine/vc.d.ts b/machines/VerifiableCredential/VCMetaMachine/vc.d.ts
@@ -1,3 +1,4 @@
+import {VCMetadata} from '../../../shared/VCMetadata';
 import {displayType, logoType} from '../../Issuers/IssuersMachine';
 
 export interface VC {
@@ -65,6 +66,15 @@ export interface VerifiableCredential {
   credentialTypes: Object[];
 }
 
+export interface VerifiableCredentialData {
+  vcMetadata: VCMetadata;
+  face: string;
+  issuerLogo: logoType;
+  wellKnown?: string;
+  credentialTypes?: Object[];
+  issuer?: string;
+}
+
 export interface CredentialWrapper {
   verifiableCredential: VerifiableCredential;
   identifier: string;

diff --git a/shared/openId4VCI/Utils.ts b/shared/openId4VCI/Utils.ts
@@ -11,10 +11,12 @@ import i18n from '../../i18n';
 import {
   Credential,
   CredentialWrapper,
+  VerifiableCredentialType,
 } from '../../machines/VerifiableCredential/VCMetaMachine/vc';
 import {
   BOTTOM_SECTION_FIELDS_WITH_DETAILED_ADDRESS_FIELDS,
   DETAIL_VIEW_ADD_ON_FIELDS,
+  getSelectedCredentialTypeDetails,
 } from '../../components/VC/common/VCUtils';
 
 export const Protocols = {
@@ -28,13 +30,20 @@ export const Issuers = {
   ESignet: 'ESignet',
 };
 
-export const ID_TYPE = {
-  MOSIPVerifiableCredential: () => i18n.t('VcDetails:nationalCard'),
-  InsuranceCredential: () => i18n.t('VcDetails:insuranceCard'),
-  OpenG2PBeneficiaryVerifiableCredential: () =>
-    i18n.t('VcDetails:beneficiaryCard'),
-  OpenG2PRegistryVerifiableCredential: () =>
-    i18n.t('VcDetails:socialRegistryCard'),
+export const getIDTypeTranslations = (idType: VerifiableCredentialType) => {
+  switch (idType) {
+    case 'MOSIPVerifiableCredential':
+      return i18n.t('VcDetails:nationalCard');
+    case 'InsuranceCredential':
+      return i18n.t('VcDetails:insuranceCard');
+    case 'OpenG2PBeneficiaryVerifiableCredential':
+      return i18n.t('VcDetails:beneficiaryCard');
+    case 'OpenG2PRegistryVerifiableCredential':
+      return i18n.t('VcDetails:socialRegistryCard');
+    default: {
+      return i18n.t('VcDetails:insuranceCard');
+    }
+  }
 };
 
 export const getIDType = (verifiableCredential: Credential) => {
@@ -117,7 +126,7 @@ export const updateCredentialInformation = (context, credential) => {
   credentialWrapper.verifiableCredential.wellKnown =
     context.selectedIssuer['.well-known'];
   credentialWrapper.verifiableCredential.credentialTypes =
-    context.selectedIssuer['credential_type'];
+    getCredentialType(context);
   credentialWrapper.verifiableCredential.issuerLogo =
     getDisplayObjectForCurrentLanguage(context.selectedIssuer.display)?.logo;
   credentialWrapper.vcMetadata = context.vcMetadata || {};
@@ -192,48 +201,46 @@ export const getJWK = async publicKey => {
 export const getCredentialIssuersWellKnownConfig = async (
   issuer: string,
   wellknown: string,
-  credentialTypes: Object[],
+  vcCredentialTypes: Object[],
   defaultFields: string[],
 ) => {
   let fields: string[] = defaultFields;
   let response = null;
+  let credentialDetails;
   if (wellknown) {
     response = await CACHED_API.fetchIssuerWellknownConfig(issuer, wellknown);
-    if (!response) {
-      fields = [];
-    } else if (response?.credentials_supported[0].order) {
-      fields = response?.credentials_supported[0].order;
-    } else {
-      const supportedCredentialTypes = credentialTypes.filter(
-        type => type !== 'VerifiableCredential',
+    if (response) {
+      credentialDetails = getSelectedCredentialTypeDetails(
+        response,
+        vcCredentialTypes,
       );
-      const selectedCredentialType = supportedCredentialTypes[0];
-
-      response?.credentials_supported.filter(credential => {
-        if (credential.id === selectedCredentialType) {
-          fields = Object.keys(
-            credential.credential_definition.credentialSubject,
-          );
-        }
-      });
+      if (Object.keys(credentialDetails).includes('order')) {
+        fields = credentialDetails.order;
+      } else {
+        fields = Object.keys(
+          credentialDetails.credential_definition.credentialSubject,
+        );
+      }
+    } else {
+      fields = [];
     }
   }
   return {
-    wellknown: response,
+    wellknown: credentialDetails,
     fields: fields,
   };
 };
 
 export const getDetailedViewFields = async (
   issuer: string,
   wellknown: string,
-  credentialTypes: Object[],
+  vcCredentialTypes: Object[],
   defaultFields: string[],
 ) => {
   let response = await getCredentialIssuersWellKnownConfig(
     issuer,
     wellknown,
-    credentialTypes,
+    vcCredentialTypes,
     defaultFields,
   );