fix: display contact icons with personDetails (#3276)

* fix contact icon display

* fix icon display with personDetails

* use already imported Person

Co-authored-by: Musale Martin <[email protected]>

---------

Co-authored-by: Musale Martin <[email protected]>

Author: Mnickii

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.graph.ts

@@ -6,7 +6,7 @@
  */
 
 import { BatchResponse, CacheItem, CacheService, CacheStore, IBatch, IGraph, prepScopes } from '@microsoft/mgt-element';
-import { Chat, ChatMessage } from '@microsoft/microsoft-graph-types';
+import { Chat, ChatMessage, Person } from '@microsoft/microsoft-graph-types';
 import { Profile } from '@microsoft/microsoft-graph-types-beta';
 
 import { getEmailFromGraphEntity } from '../../graph/graph.people';
@@ -48,7 +48,7 @@ export const getPersonCardGraphData = async (
   personDetails: IDynamicPerson,
   isMe: boolean
 ): Promise<MgtPersonCardState> => {
-  const userId = personDetails.id;
+  const userId: string = personDetails.id || (personDetails as Person).userPrincipalName;
   const email = getEmailFromGraphEntity(personDetails);
   const cache: CacheStore<CacheCardState> = CacheService.getCache<CacheCardState>(
     schemas.users,

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts

@@ -649,7 +649,7 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
 
     // Chat
     let chat: TemplateResult;
-    if (userPerson?.userPrincipalName) {
+    if (userPerson?.userPrincipalName || userPerson?.mail) {
       ariaLabel = `${this.strings.chatButtonLabel} ${person.displayName}`;
       chat = html`
         <fluent-button class="icon"
@@ -662,7 +662,7 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
 
     // Video
     let video: TemplateResult;
-    if (userPerson?.userPrincipalName) {
+    if (userPerson?.userPrincipalName || userPerson?.mail) {
       ariaLabel = `${this.strings.videoButtonLabel} ${person.displayName}`;
       video = html`
         <fluent-button class="icon"
@@ -990,15 +990,12 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
     // check if personDetail already populated
     if (this.personDetails) {
       const user = this.personDetails;
-      let id: string;
-      if (isUser(user)) {
-        id = user.userPrincipalName || user.id;
-      }
+      const userId = (user as Person).userPrincipalName || user.id;
 
       // if we have an id but no email, we should get data from the graph
       // in some graph calls, the user object does not contain the email
-      if (id && !getEmailFromGraphEntity(user)) {
-        const person = await getUserWithPhoto(graph, id);
+      if (userId && !getEmailFromGraphEntity(user)) {
+        const person = await getUserWithPhoto(graph, userId);
         this.personDetails = person;
         this.personImage = this.getImage();
       }
@@ -1041,9 +1038,11 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
       }
     }
 
+    const personId = this.personDetails?.id || (this.personDetails as Person)?.userPrincipalName;
+
     // populate state
-    if (this.personDetails?.id) {
-      this._cardState = await getPersonCardGraphData(graph, this.personDetails, this._me === this.personDetails.id);
+    if (personId) {
+      this._cardState = await getPersonCardGraphData(graph, this.personDetails, this._me === personId);
     }
 
     this.loadSections();
@@ -1096,8 +1095,8 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
   };
 
   private get hasPhone(): boolean {
-    const user = this.personDetails as User;
-    const person = this.personDetails as microsoftgraph.Person;
+    const user = this.internalPersonDetails as User;
+    const person = this.internalPersonDetails as Person;
     return Boolean(user?.businessPhones?.length) || Boolean(person?.phones?.length);
   }
 
@@ -1108,8 +1107,8 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
    * @memberof MgtPersonCard
    */
   protected callUser = () => {
-    const user = this.personDetails as User;
-    const person = this.personDetails as microsoftgraph.Person;
+    const user = this.internalPersonDetails as User;
+    const person = this.internalPersonDetails as Person;
 
     if (user?.businessPhones?.length) {
       const phone = user.businessPhones[0];
@@ -1163,8 +1162,8 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
    */
   protected videoCallUser = () => {
     const user = this.personDetails as User;
-    if (user?.userPrincipalName) {
-      const users: string = user.userPrincipalName;
+    if (user?.userPrincipalName || user?.mail) {
+      const users: string = user.userPrincipalName || user.mail;
 
       const url = `https://teams.microsoft.com/l/call/0/0?users=${users}&withVideo=true`;
 
@@ -1258,7 +1257,7 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
       return this.personImage;
     }
 
-    const person = this.personDetails;
+    const person = this.internalPersonDetails;
     return person?.personImage ? person.personImage : null;
   }