fix: rework parameter passing to click events in contact card section (#1809)

* fix: rework parameter passing to click events in contact card section

* Adding a story to demonstrate the anonymous use of mgt-person-card

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

Author: gavinbarron

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

@@ -19,7 +19,7 @@ import { strings } from './strings';
 /**
  * Represents a contact part and its metadata
  *
- * @interface IContectPart
+ * @interface IContactPart
  */
 interface IContactPart {
   // tslint:disable-next-line: completed-docs
@@ -34,6 +34,8 @@ interface IContactPart {
   showCompact: boolean;
 }
 
+type Protocol = 'mailto:' | 'tel:';
+
 /**
  * The contact details subsection of the person card
  *
@@ -73,49 +75,49 @@ export class MgtPersonCardContact extends BasePersonCardSection {
     return !!availableParts.length;
   }
 
-  private _person: User;
+  private _person?: User;
 
   // tslint:disable: object-literal-sort-keys
-  private _contactParts = {
+  private _contactParts: Record<string, IContactPart> = {
     email: {
       icon: getSvg(SvgIcon.Email, '#929292'),
-      onClick: () => this.sendEmail(),
+      onClick: () => this.sendEmail(getEmailFromGraphEntity(this._person)),
       showCompact: true,
       title: 'Email'
-    } as IContactPart,
+    },
     chat: {
       icon: getSvg(SvgIcon.Chat, '#929292'),
-      onClick: () => this.sendChat(),
+      onClick: () => this.sendChat(this._person?.userPrincipalName),
       showCompact: false,
       title: 'Teams'
-    } as IContactPart,
+    },
     businessPhone: {
       icon: getSvg(SvgIcon.CellPhone, '#929292'),
-      onClick: () => this.sendCall('businessPhone'),
+      onClick: () => this.sendCall(this._person?.businessPhones?.length > 0 ? this._person.businessPhones[0] : null),
       showCompact: true,
       title: 'Business Phone'
-    } as IContactPart,
+    },
     cellPhone: {
       icon: getSvg(SvgIcon.CellPhone, '#929292'),
-      onClick: () => this.sendCall('cellPhone'),
+      onClick: () => this.sendCall(this._person?.mobilePhone),
       showCompact: true,
       title: 'Mobile Phone'
-    } as IContactPart,
+    },
     department: {
       icon: getSvg(SvgIcon.Department, '#929292'),
       showCompact: false,
       title: 'Department'
-    } as IContactPart,
+    },
     title: {
       icon: getSvg(SvgIcon.Person, '#929292'),
       showCompact: false,
       title: 'Title'
-    } as IContactPart,
+    },
     officeLocation: {
       icon: getSvg(SvgIcon.OfficeLocation, '#929292'),
       showCompact: true,
       title: 'Office Location'
-    } as IContactPart
+    }
   };
   // tslint:enable: object-literal-sort-keys
 
@@ -286,19 +288,27 @@ export class MgtPersonCardContact extends BasePersonCardSection {
     }
   }
 
+  private sendLink(protocol: Protocol, resource: string): void {
+    if (resource) {
+      window.open(`${protocol}${resource}`, '_blank', 'noreferrer');
+    } else {
+      console.error(`Target resource for ${protocol} link was not provided: resource: ${resource}`);
+    }
+  }
+
   /**
    * Send a chat message to the user
    *
    * @protected
    * @memberof MgtPersonCardContact
    */
-  protected sendChat(): void {
-    const chat = this._contactParts.chat.value;
-    if (!chat) {
+  protected sendChat(upn: string): void {
+    if (!upn) {
+      console.error("Can't send chat when upn is not provided");
       return;
     }
 
-    const url = `https://teams.microsoft.com/l/chat/0/0?users=${chat}`;
+    const url = `https://teams.microsoft.com/l/chat/0/0?users=${upn}`;
     const openWindow = () => window.open(url, '_blank', 'noreferrer');
 
     if (TeamsHelper.isAvailable) {
@@ -318,11 +328,8 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * @protected
    * @memberof MgtPersonCardContact
    */
-  protected sendEmail(): void {
-    const email = this._contactParts.email.value;
-    if (email) {
-      window.open('mailto:' + email, '_blank', 'noreferrer');
-    }
+  protected sendEmail(email: string): void {
+    this.sendLink('mailto:', email);
   }
 
   /**
@@ -331,13 +338,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * @protected
    * @memberof MgtPersonCardContact
    */
-  protected sendCall(phone): void {
-    const cellPhone = this._contactParts.cellPhone.value;
-    const businessPhone = this._contactParts.businessPhone.value;
-    if (phone === 'cellPhone') {
-      window.open('tel:' + cellPhone, '_blank', 'noreferrer');
-    } else if (phone === 'businessPhone') {
-      window.open('tel:' + businessPhone, '_blank', 'noreferrer');
-    }
-  }
+  protected sendCall = (phone: string): void => {
+    this.sendLink('tel:', phone);
+  };
 }

stories/components/personCard/personCard.a.js

@@ -85,3 +85,24 @@ export const localization = () => html`
   };
   </script>
 `;
+
+export const AnonymousDisplay = () => html`
+<div style="margin-bottom: 10px">
+  <strong>Note:</strong> this story forces an anonymous context and explicity sets the user being displayed.<br />
+  Refer to the JavaScript tab for setup details.
+</div>
+<mgt-person-card class="anonymous-display"></mgt-person-card>
+<script>
+  import { Providers, Msal2Provider } from './mgt.storybook.js';
+  Providers.globalProvider = new Msal2Provider({ clientId: "fake" });
+  const personCard = document.querySelector('.anonymous-display');
+  personCard.personDetails = {
+      displayName: 'Megan Bowen',
+      jobTitle: 'CEO',
+      userPrincipalName: '[email protected]',
+      mail: '[email protected]',
+      businessPhones: ['423-555-0120'],
+      mobilePhone: '424-555-0130',
+  };
+</script>
+`;