19 create the button that will content the link

src/webparts/spfxReactDirectoryWebpart/components/DirectoryHook.tsx

@@ -31,6 +31,7 @@ import { ISPServices } from "./SPServices/ISPServices";
 import { spservices } from "./SPServices/spservices";
 import { PersonaCard } from "./PersonaCard/PersonaCard";
 import Paging from "./Pagination/Paging";
+import { UserBase } from "@pnp/sp/src/siteusers";
 
 const wrapStackTokens: IStackTokens = { childrenGap: 30 };
 
@@ -120,13 +121,15 @@ const DirectoryHook: React.FC<IReactDirectoryProps> = (props) => {
               context={props.context}
               prefLang={props.prefLang}
               profileProperties={{
-                DisplayName: user.PreferredName,
+                DisplayName:
+                  user.FirstName && user.LastName ? `${user.FirstName}   ${user.LastName}` : user.PreferredName,
                 Title: user.JobTitle,
                 PictureUrl: user.PictureURL,
                 Email: user.WorkEmail,
                 Department: user.Department,
                 WorkPhone: user.WorkPhone,
                 Location: user.OfficeNumber ? user.OfficeNumber : user.BaseOfficeLocation,
+                UserID: "priyamvada.singh_tbs-sct.gc.ca#EXT#@gcxgce.onmicrosoft.com",
               }}
             />
           );

src/webparts/spfxReactDirectoryWebpart/components/PersonaCard/IUserProperties.ts

@@ -1,10 +1,11 @@
 export interface IUserProperties {
   Department: string;
   MobilePhone?: string;
-  PictureUrl: string;
+  PictureUrl?: string;
   Title: string;
   DisplayName: string;
   Email: string;
   WorkPhone?: string;
   Location?: string;
+  UserID: string;
 }

src/webparts/spfxReactDirectoryWebpart/components/PersonaCard/PersonaCard.tsx

@@ -191,8 +191,16 @@ export class PersonaCard extends React.Component<IPersonaCardProps, IPersonaCard
           </Stack.Item>
           <Stack.Item align="center" styles={stackItemStyles}>
             <PrimaryButton href={`mailto: ${this.props.profileProperties.Email}`}>
+              <Icon iconName="PublicEmail" style={{ verticalAlign: "sub", marginRight: 5 }} />
               {strings.SendEmailLabel}
             </PrimaryButton>
+            <PrimaryButton
+              style={{ marginLeft: 50 }}
+              href={`https://teams.microsoft.com/l/chat/0/0?users=${this.props.profileProperties.Email}`}
+              target="_blank"
+            >
+              <Icon iconName="Chat" style={{ verticalAlign: "sub", marginRight: 5 }} /> {strings.StartChatLabel}
+            </PrimaryButton>
           </Stack.Item>
         </Stack>
       </div>

src/webparts/spfxReactDirectoryWebpart/components/SPServices/spservices.ts

@@ -46,13 +46,14 @@ export class spservices implements ISPServices {
       "BaseOfficeLocation",
       "SPS-UserType",
       "GroupId",
+      "UserPrincipalName",
     ];
     try {
       let users = await sp.search(<SearchQuery>{
         Querytext: qrytext,
         StartRow: startItem,
         RowLimit: endItem,
-        EnableInterleaving: true,
+        // EnableInterleaving: true,
         SelectProperties: searchProperties,
         SourceId: "b09a7990-05ea-4af9-81ef-edfab16c4e31",
         SortList: [{ Property: "FirstName", Direction: SortDirection.Ascending }],

src/webparts/spfxReactDirectoryWebpart/loc/en-us.js

@@ -1,6 +1,6 @@
 define([], function () {
   return {
-    SearchPlaceHolder: "Search by last name",
+    SearchPlaceHolder: "Search by last name id",
     PropertyPaneDescription: "Search People from Organization Directory",
     BasicGroupName: "Properties",
     TitleFieldLabel: "Web Part Title",
@@ -11,6 +11,7 @@ define([], function () {
     SearchBoxLabel: "Search for a colleague (Last Name)",
     SearchButtonLabel: "Search",
     SendEmailLabel: "Send Email",
+    StartChatLabel: "Start Chat",
     NoUserFoundLabelText: "Invite a colleague",
     NoUserFoundImageAltText: "A hiding yeti",
     NoUserFoundEmail:

src/webparts/spfxReactDirectoryWebpart/loc/mystrings.d.ts

@@ -11,7 +11,6 @@ declare interface ISpfxReactDirectoryWebpartWebPartStrings {
   AppTeamsTabEnvironment: string;
   AppOfficeEnvironment: string;
   AppOutlookEnvironment: string;
-
   SearchPlaceHolder: string;
   PropertyPaneDescription: string;
   BasicGroupName: string;
@@ -21,16 +20,17 @@ declare interface ISpfxReactDirectoryWebpartWebPartStrings {
   LoadingText: string;
   SearchBoxLabel: string;
   SendEmailLabel: string;
+  StartChatLabel: string;
   NoUserFoundLabelText: string;
   NoUserFoundImageAltText: string;
   NoUserFoundEmailSubject: string;
   NoUserFoundEmailBody: string;
   NoUserFoundEmail: string;
 
-  SearchButtonLabel:String;
+  SearchButtonLabel: String;
 }
 
-declare module 'SpfxReactDirectoryWebpartWebPartStrings' {
+declare module "SpfxReactDirectoryWebpartWebPartStrings" {
   const strings: ISpfxReactDirectoryWebpartWebPartStrings;
   export = strings;
 }