Click on dialpad call button to call a PSTN user

change/@internal-react-composites-c13fc1f4-2770-4590-b1b0-5e1bde5e64b5.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Use addparticipant handler to call a PSTN user",
+  "packageName": "@internal/react-composites",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -740,6 +740,7 @@ export interface CallWithChatAdapterUiState {
 
 // @public
 export interface CallWithChatClientState {
+    alternateCallerId?: string | undefined;
     call?: CallState;
     chat?: ChatThreadClientState;
     devices: DeviceManagerState;

packages/react-composites/review/beta/react-composites.api.md

@@ -529,6 +529,7 @@ export interface CallWithChatAdapterUiState {
 
 // @public
 export interface CallWithChatClientState {
+    alternateCallerId?: string | undefined;
     call?: CallState;
     chat?: ChatThreadClientState;
     devices: DeviceManagerState;

packages/react-composites/src/composites/CallComposite/components/CallPane.tsx

@@ -29,6 +29,12 @@ import { useLocale } from '../../localization';
 import { getPipStyles } from '../../common/styles/ModalLocalAndRemotePIP.styles';
 import { useMinMaxDragPosition } from '../../common/utils';
 import { availableSpaceStyles, hiddenStyles, sidePaneStyles, sidePaneTokens } from '../../common/styles/Pane.styles';
+/* @conditional-compile-remove(PSTN-calls) */
+import { CommunicationIdentifier } from '@azure/communication-common';
+/* @conditional-compile-remove(PSTN-calls) */
+import { AddPhoneNumberOptions } from '@azure/communication-calling';
+/* @conditional-compile-remove(PSTN-calls) */
+import { useAdapter } from '../adapter/CallAdapterProvider';
 
 /**
  * Pane that is used to store participants for Call composite
@@ -82,12 +88,23 @@ export const CallPane = (props: {
     await props.callAdapter.removeParticipant(participantId);
   };
 
+  /* @conditional-compile-remove(PSTN-calls) */
+  const addParticipantToCall = async (
+    participant: CommunicationIdentifier,
+    options?: AddPhoneNumberOptions
+  ): Promise<void> => {
+    await props.callAdapter.addParticipant(participant, options);
+  };
+
   const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);
 
   const pipStyles = useMemo(() => getPipStyles(theme), [theme]);
 
   const dataUiId = props.activePane === 'people' ? 'call-composite-people-pane' : '';
 
+  /* @conditional-compile-remove(PSTN-calls) */
+  const alternateCallerId = useAdapter().getState().alternateCallerId;
+
   return (
     <Stack verticalFill grow styles={paneStyles} data-ui-id={dataUiId} tokens={props.mobileView ? {} : sidePaneTokens}>
       {header}
@@ -99,8 +116,12 @@ export const CallPane = (props: {
                 <PeoplePaneContent
                   {...props}
                   onRemoveParticipant={removeParticipantFromCall}
+                  /* @conditional-compile-remove(PSTN-calls) */
+                  onAddParticipant={addParticipantToCall}
                   setDrawerMenuItems={setDrawerMenuItems}
                   strings={strings}
+                  /* @conditional-compile-remove(PSTN-calls) */
+                  alternateCallerId={alternateCallerId}
                 />
               </CallAdapterProvider>
             </Stack>

packages/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.tsx

@@ -32,6 +32,10 @@ import { _pxToRem } from '@internal/acs-ui-common';
 import { getPipStyles } from '../common/styles/ModalLocalAndRemotePIP.styles';
 import { useMinMaxDragPosition } from '../common/utils';
 import { availableSpaceStyles, hiddenStyles, sidePaneStyles, sidePaneTokens } from '../common/styles/Pane.styles';
+/* @conditional-compile-remove(PSTN-calls) */
+import { CommunicationIdentifier } from '@azure/communication-common';
+/* @conditional-compile-remove(PSTN-calls) */
+import { AddPhoneNumberOptions } from '@azure/communication-calling';
 
 /**
  * Pane that is used to store chat and people for CallWithChat composite
@@ -62,6 +66,9 @@ export const CallWithChatPane = (props: {
   const callWithChatStrings = useCallWithChatCompositeStrings();
   const theme = useTheme();
 
+  /* @conditional-compile-remove(PSTN-calls) */
+  const alternateCallerId = props.callAdapter.getState().alternateCallerId;
+
   const header =
     props.activePane === 'none' ? null : props.mobileView ? (
       <TabHeader {...props} strings={callWithChatStrings} activeTab={props.activePane} />
@@ -104,13 +111,25 @@ export const CallWithChatPane = (props: {
     await props.chatAdapter.removeParticipant(participantId);
   };
 
+  /* @conditional-compile-remove(PSTN-calls) */
+  const addParticipantToCall = async (
+    participant: CommunicationIdentifier,
+    options?: AddPhoneNumberOptions
+  ): Promise<void> => {
+    await props.callAdapter.addParticipant(participant, options);
+  };
+
   const peopleContent = (
     <CallAdapterProvider adapter={props.callAdapter}>
       <PeoplePaneContent
         {...props}
         onRemoveParticipant={removeParticipantFromCallWithChat}
         setDrawerMenuItems={setDrawerMenuItems}
         strings={callWithChatStrings}
+        /* @conditional-compile-remove(PSTN-calls) */
+        onAddParticipant={addParticipantToCall}
+        /* @conditional-compile-remove(PSTN-calls) */
+        alternateCallerId={alternateCallerId}
       />
     </CallAdapterProvider>
   );

packages/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.ts

@@ -135,6 +135,8 @@ function callAdapterStateFromCallWithChatAdapterState(
     call: callWithChatAdapterState.call,
     devices: callWithChatAdapterState.devices,
     isTeamsCall: callWithChatAdapterState.isTeamsCall,
-    latestErrors: callWithChatAdapterState.latestCallErrors
+    latestErrors: callWithChatAdapterState.latestCallErrors,
+    /* @conditional-compile-remove(PSTN-calls) */
+    alternateCallerId: callWithChatAdapterState.alternateCallerId
   };
 }

packages/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.ts

@@ -61,6 +61,9 @@ export interface CallWithChatClientState {
   devices: DeviceManagerState;
   /** State of whether the active call is a Teams interop call */
   isTeamsCall: boolean;
+  /* @conditional-compile-remove(PSTN-calls) */
+  /** alternateCallerId for PSTN call */
+  alternateCallerId?: string | undefined;
 }
 
 /**
@@ -93,7 +96,9 @@ export function callWithChatAdapterStateFromBackingStates(
     latestCallErrors: callAdapterState.latestErrors,
     latestChatErrors: chatAdapterState.latestErrors,
     /* @conditional-compile-remove(file-sharing) */
-    fileUploads: chatAdapterState.fileUploads
+    fileUploads: chatAdapterState.fileUploads,
+    /* @conditional-compile-remove(PSTN-calls) */
+    alternateCallerId: callAdapterState.alternateCallerId
   };
 }
 

packages/react-composites/src/composites/common/AddPeopleButton.tsx

@@ -17,13 +17,20 @@ import {
 } from './styles/PeoplePaneContent.styles';
 /* @conditional-compile-remove(PSTN-calls) */
 import { AddPeopleDropdown } from './AddPeopleDropdown';
+/* @conditional-compile-remove(PSTN-calls) */
+import { CommunicationIdentifier } from '@azure/communication-common';
+/* @conditional-compile-remove(PSTN-calls) */
+import { AddPhoneNumberOptions } from '@azure/communication-calling';
 
 /** @private */
 export interface AddPeopleButtonProps {
   inviteLink?: string;
   mobileView?: boolean;
   participantList?: JSX.Element;
   strings: CallWithChatCompositeStrings | /* @conditional-compile-remove(one-to-n-calling) */ CallCompositeStrings;
+  /* @conditional-compile-remove(PSTN-calls) */
+  onAddParticipant: (participant: CommunicationIdentifier, options?: AddPhoneNumberOptions) => void;
+  alternateCallerId?: string;
 }
 
 /** @private */
@@ -39,11 +46,25 @@ export const AddPeopleButton = (props: AddPeopleButtonProps): JSX.Element => {
 
   /* @conditional-compile-remove(PSTN-calls) */
   if (mobileView) {
-    return <AddPeopleDropdown strings={strings} mobileView={mobileView} inviteLink={inviteLink} />;
+    return (
+      <AddPeopleDropdown
+        strings={strings}
+        mobileView={mobileView}
+        inviteLink={inviteLink}
+        onAddParticipant={props.onAddParticipant}
+        alternateCallerId={props.alternateCallerId}
+      />
+    );
   } else {
     return (
       <Stack tokens={peoplePaneContainerTokens}>
-        <AddPeopleDropdown strings={strings} mobileView={mobileView} inviteLink={inviteLink} />
+        <AddPeopleDropdown
+          strings={strings}
+          mobileView={mobileView}
+          inviteLink={inviteLink}
+          onAddParticipant={props.onAddParticipant}
+          alternateCallerId={props.alternateCallerId}
+        />
         {participantList}
       </Stack>
     );

packages/react-composites/src/composites/common/AddPeopleDropdown.tsx

@@ -22,6 +22,8 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-u
 import { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';
 import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
 import { convertContextualMenuItemToDrawerMenuItem } from '../CallWithChatComposite/ConvertContextualMenuItemToDrawerMenuItem';
+import { CommunicationIdentifier } from '@azure/communication-common';
+import { AddPhoneNumberOptions } from '@azure/communication-calling';
 
 /** @private */
 export interface AddPeopleDropdownStrings extends CallingDialpadStrings {
@@ -35,13 +37,15 @@ export interface AddPeopleDropdownProps {
   inviteLink?: string;
   mobileView?: boolean;
   strings: AddPeopleDropdownStrings;
+  onAddParticipant: (participant: CommunicationIdentifier, options?: AddPhoneNumberOptions) => void;
+  alternateCallerId?: string;
 }
 
 /** @private */
 export const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {
   const theme = useTheme();
 
-  const { inviteLink, strings, mobileView } = props;
+  const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;
 
   const [showDialpad, setShowDialpad] = useState(false);
 
@@ -69,22 +73,26 @@ export const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element =>
       });
     }
 
-    menuProps.items.push({
-      key: 'DialpadKey',
-      text: strings.openDialpadButtonLabel,
-      itemProps: { styles: copyLinkButtonStylesThemed },
-      iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },
-      onClick: () => setShowDialpad(true),
-      'data-ui-id': 'call-with-chat-composite-dial-phone-number-button'
-    });
+    // only show the dialpad option when alternateCallerId is set
+    if (alternateCallerId) {
+      menuProps.items.push({
+        key: 'DialpadKey',
+        text: strings.openDialpadButtonLabel,
+        itemProps: { styles: copyLinkButtonStylesThemed },
+        iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },
+        onClick: () => setShowDialpad(true),
+        'data-ui-id': 'call-with-chat-composite-dial-phone-number-button'
+      });
+    }
 
     return menuProps;
   }, [
     strings.copyInviteLinkButtonLabel,
     strings.openDialpadButtonLabel,
     copyLinkButtonStylesThemed,
     inviteLink,
-    menuStyleThemed
+    menuStyleThemed,
+    alternateCallerId
   ]);
 
   const onDismissDialpad = (): void => {
@@ -120,8 +128,16 @@ export const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element =>
             <_DrawerMenu onLightDismiss={() => setAddPeopleDrawerMenuItems([])} items={addPeopleDrawerMenuItems} />
           </Stack>
         )}
-
-        <CallingDialpad isMobile strings={strings} showDialpad={showDialpad} onDismissDialpad={onDismissDialpad} />
+        {alternateCallerId && (
+          <CallingDialpad
+            isMobile
+            strings={strings}
+            showDialpad={showDialpad}
+            onDismissDialpad={onDismissDialpad}
+            onAddParticipant={onAddParticipant}
+            alternateCallerId={alternateCallerId}
+          />
+        )}
       </Stack>
     );
   }
@@ -130,12 +146,16 @@ export const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element =>
     <>
       {
         <Stack>
-          <CallingDialpad
-            isMobile={false}
-            strings={strings}
-            showDialpad={showDialpad}
-            onDismissDialpad={onDismissDialpad}
-          />
+          {alternateCallerId && (
+            <CallingDialpad
+              isMobile={false}
+              strings={strings}
+              showDialpad={showDialpad}
+              onDismissDialpad={onDismissDialpad}
+              onAddParticipant={onAddParticipant}
+              alternateCallerId={alternateCallerId}
+            />
+          )}
 
           <Stack styles={copyLinkButtonStackStyles}>
             <DefaultButton

packages/react-composites/src/composites/common/CallingDialpad.tsx

@@ -13,6 +13,8 @@ import { themedCallButtonStyle, themedDialpadStyle } from './CallingDialpad.styl
 /* @conditional-compile-remove(PSTN-calls) */
 import { CallWithChatCompositeIcon } from './icons';
 import { drawerContainerStyles } from '../CallWithChatComposite/styles/CallWithChatCompositeStyles';
+import { CommunicationIdentifier } from '@azure/communication-common';
+import { AddPhoneNumberOptions } from '@azure/communication-calling';
 
 /** @private */
 export interface CallingDialpadStrings {
@@ -28,11 +30,13 @@ export interface CallingDialpadProps {
   showDialpad: boolean;
   strings: CallingDialpadStrings;
   onDismissDialpad: () => void;
+  onAddParticipant: (participant: CommunicationIdentifier, options?: AddPhoneNumberOptions) => void;
+  alternateCallerId: string;
 }
 
 /** @private */
 export const CallingDialpad = (props: CallingDialpadProps): JSX.Element => {
-  const { strings, isMobile, showDialpad, onDismissDialpad } = props;
+  const { strings, isMobile, showDialpad, onDismissDialpad, onAddParticipant, alternateCallerId } = props;
   const [textFieldInput, setTextFieldInput] = useState('');
 
   const theme = useTheme();
@@ -43,8 +47,17 @@ export const CallingDialpad = (props: CallingDialpadProps): JSX.Element => {
   };
 
   const onClickCall = (): void => {
-    //place holder for adding calling functionality
-    console.log(textFieldInput);
+    if (onAddParticipant) {
+      /**
+       * Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.
+       * We assume the input number always include countrycode
+       */
+
+      const phoneNumber = { phoneNumber: '+' + textFieldInput.replace(/\D/g, '').replaceAll(' ', '') };
+
+      onAddParticipant(phoneNumber, { alternateCallerId: { phoneNumber: alternateCallerId } });
+      onDismissTriggered();
+    }
   };
 
   const dialpadModelStyle: Partial<IModalStyles> = useMemo(() => themedDialpadModelStyle(theme), [theme]);
@@ -56,7 +69,7 @@ export const CallingDialpad = (props: CallingDialpadProps): JSX.Element => {
   const dialpadComponent = (): JSX.Element => {
     return (
       <>
-        <Dialpad onChange={setTextFieldInput} styles={dialpadStyle} />
+        <Dialpad styles={dialpadStyle} onChange={setTextFieldInput} />
         <PrimaryButton
           text={strings.dialpadStartCallButtonLabel}
           onRenderIcon={() => DialpadStartCallIconTrampoline()}