fix: display only available person-card contact icons on mgt-person-card (#3237)

Author: Mnickii

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

@@ -661,20 +661,22 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
     }
 
     // Video
-
-    ariaLabel = `${this.strings.videoButtonLabel} ${person.displayName}`;
-    const video: TemplateResult = html`
-      <fluent-button class="icon"
-        aria-label=${ariaLabel}
-        @click=${this.videoCallUser}>
-        ${getSvg(SvgIcon.Video)}
-      </fluent-button>
-    `;
+    let video: TemplateResult;
+    if (userPerson?.userPrincipalName) {
+      ariaLabel = `${this.strings.videoButtonLabel} ${person.displayName}`;
+      video = html`
+        <fluent-button class="icon"
+          aria-label=${ariaLabel}
+          @click=${this.videoCallUser}>
+          ${getSvg(SvgIcon.Video)}
+        </fluent-button>
+      `;
+    }
 
     // Call
     let call: TemplateResult;
-    if (userPerson.userPrincipalName) {
-      ariaLabel = `${this.strings.callButtonLabel} ${person.displayName}`;
+    if (this.hasPhone) {
+      ariaLabel = `${this.strings.callButtonLabel} ${userPerson.displayName}`;
       call = html`
          <fluent-button class="icon"
           aria-label=${ariaLabel}