Merge branch 'hotfix/credential-types' into 'main'

Adjust credential types to avoid error

See merge request eclipse/xfsc/personal-credential-manager-cloud/web-ui!55

src/components/card-document/CardDocument.tsx

 'use client';
 
-import { type Credential, type Description } from '@/service/types';
+import type { ValidCredential, Description } from '@/service/types';
 import { formatDateString } from '@/utils/dateUtils';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
@@ -10,13 +10,22 @@ import CardModal from '../card-modal/CardModal';
 import css from './CardDocument.module.scss';
 
 export interface CardDocumentProps {
-  credential: Credential;
+  credential: ValidCredential;
   description: Description;
   metadata?: any; // define metadata type when available in the API
   movable?: boolean;
   id: string;
 }
 
+export function getTitle(credential: ValidCredential): string {
+  if (Array.isArray(credential.type)) {
+    return credential.type[1] ?? credential.type[0];
+  } else {
+    // @ts-expect-error
+    return credential.type ?? credential.Type ?? credential.vct;
+  }
+}
+
 const CardDocument = ({ credential, description, id, movable = false }: CardDocumentProps): JSX.Element => {
   const t = useTranslations('CredentialsOverview');
   const [showModal, setShowModal] = useState(false);
@@ -28,6 +37,8 @@ const CardDocument = ({ credential, description, id, movable = false }: CardDocu
     }),
   });
 
+  console.log('credentials', credential.credentialSubject);
+
   useEffect(() => {
     if (isDragging) {
       console.log('dragging');
@@ -44,7 +55,7 @@ const CardDocument = ({ credential, description, id, movable = false }: CardDocu
         <Container className="d-grid gap-3">
           <Row className="p-1 flex-nowrap">
             <Col className="d-flex flex-column justify-content-center align-items-start">
-              <h2 className="display-6">{credential.type}</h2>
+              <h2 className="display-6">{getTitle(credential)}</h2>
               <strong>
                 {credential.issuanceDate && (
                   <span>
@@ -57,8 +68,8 @@ const CardDocument = ({ credential, description, id, movable = false }: CardDocu
 
           <div>
             {credential &&
-              Object.entries(credential.credentialSubject)
-                .slice(0, 5)
+              Object.entries(credential.credentialSubject ?? {})
+                ?.slice(0, 5)
                 .map(([key, value]) => (
                   <Row
                     key={key}
@@ -101,6 +112,7 @@ const CardDocument = ({ credential, description, id, movable = false }: CardDocu
         handleClose={handleCloseModal}
         data={credential}
         description={description}
+        title={getTitle(credential)}
       />
     </>
   );

src/components/card-modal/CardModal.tsx

@@ -9,9 +9,10 @@ interface CardModalProps {
   handleClose: () => void;
   data: Credential;
   description: Description;
+  title: string;
 }
 
-const CardModal = ({ show, handleClose, data, description }: CardModalProps): JSX.Element => {
+const CardModal = ({ show, handleClose, data, description, title }: CardModalProps): JSX.Element => {
   return (
     <Modal
       show={show}
@@ -19,11 +20,11 @@ const CardModal = ({ show, handleClose, data, description }: CardModalProps): JS
       centered
     >
       <ModalHeader closeButton>
-        <ModalTitle>{data.type}</ModalTitle>
+        <ModalTitle>{title}</ModalTitle>
       </ModalHeader>
       <ModalBody>
         <div>
-          {Object.entries(data.credentialSubject).map(([key, value]) => (
+          {Object.entries(data.credentialSubject ?? {}).map(([key, value]) => (
             <Row
               key={key}
               className="flex-nowrap"

src/components/credential-column/CredentialColumn.tsx

 'use client';
 
-import type { CredentialInPresentation, VerifiableCredentials } from '@/service/types';
+import type { CredentialInPresentation, ValidCredential, VerifiableCredentials } from '@/service/types';
 import CardDocument from '../card-document/CardDocument';
 import css from './CredentialColumn.module.scss';
 import PresentationModal from '../presentation-modal/PresentationModal';
@@ -45,7 +45,7 @@ const CredentialColumn = ({ credential, movable = false, presentation }: Credent
             {column.map(key => (
               <CardDocument
                 key={key}
-                credential={credential.credentials[key]}
+                credential={credential.credentials[key] as ValidCredential}
                 description={credential.description}
                 id={key}
                 movable={movable}

src/service/types.ts

@@ -144,13 +144,17 @@ export interface Credential {
   '@context': Array<string | object>;
   id?: string;
   holder?: string;
-  type: string;
+  type?: string | string[];
+  Type?: string[];
+  vct?: string;
   issuer?: string;
   issuanceDate?: string;
-  credentialSubject: CredentialSubject;
+  credentialSubject?: CredentialSubject;
   proof?: Proof;
 }
 
+export type ValidCredential = Credential & ({ type: string | string[] } | { Type: string } | { vct: string });
+
 export interface CredentialInPresentation {
   '@context': string[];
   id?: string;