#94 Fixed UIN label bug

components/VcDetails.tsx

@@ -23,6 +23,13 @@ const VerifiedIcon: React.FC = () => {
 export const VcDetails: React.FC<VcDetailsProps> = (props) => {
   const { t, i18n } = useTranslation('VcDetails');
 
+  //Assigning the UIN and VID from the VC details to display the idtype label using condition
+  const uin = props.vc?.verifiableCredential.credentialSubject.UIN;
+  const vid = props.vc?.verifiableCredential.credentialSubject.VID;
+
+  //Assigning the idtype based on the policy
+  const idType = uin ? t('uin') : vid ? t('vid') : t('idtype');
+
   return (
     <ImageBackground
       borderRadius={10}
@@ -58,10 +65,10 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
               weight="bold"
               size="smaller"
               color={Theme.Colors.DetailsLabel}>
-              {props.vc?.idType}
+              {idType}
             </Text>
             <Text weight="semibold" size="smaller" color={Theme.Colors.Details}>
-              {props.vc?.id}
+              {uin ? uin : vid ? vid : null}
             </Text>
           </Column>
 

components/VcItem.tsx

@@ -109,13 +109,23 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
   const service = useInterpret(machine.current);
   const context = useSelector(service, selectContext);
   const verifiableCredential = useSelector(service, selectVerifiableCredential);
-  const uin = useSelector(service, selectId);
+
+  //Assigning the UIN and VID from the VC details to display the idtype label using condition
+  const uin = verifiableCredential
+    ? verifiableCredential.credentialSubject.UIN
+    : null;
+  const vid = verifiableCredential
+    ? verifiableCredential.credentialSubject.VID
+    : null;
   const tag = useSelector(service, selectTag);
   const generatedOn = useSelector(service, selectGeneratedOn);
   const fullName = !verifiableCredential
     ? ''
     : getLocalizedField(verifiableCredential.credentialSubject.fullName);
 
+  //Assigning the idtype based on the policy
+  const idtype = uin ? t('uin') : vid ? t('vid') : t('idtype');
+  const id = tag || uin ? tag || uin : vid ? vid : null;
   const selectableOrCheck = props.selectable ? (
     <CheckBox
       checked={props.selected}
@@ -166,7 +176,7 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
 
             <Column margin="0 0 0 10">
               {getDetails(t('fullName'), fullName, verifiableCredential)}
-              {getDetails(t('uin'), tag || uin, verifiableCredential)}
+              {getDetails(idtype, id, verifiableCredential)}
               {getDetails(t('generatedOn'), generatedOn, verifiableCredential)}
               {getDetails(t('status'), t('valid'), verifiableCredential)}
             </Column>

locales/en.json

@@ -15,6 +15,8 @@
   "VcDetails": {
     "generatedOn": "Generated on",
     "uin":"UIN",
+    "vid":"VID",
+    "idtype":"Idtype",
     "status": "Status",
     "valid": "Valid",
     "photo": "Photo",

types/vc.ts

@@ -31,6 +31,7 @@ export interface DecodedCredential {
 
 export interface CredentialSubject {
   UIN: string;
+  VID: string;
   addressLine1: string;
   addressLine2: string;
   addressLine3: string;