[Bugfix] dialpad logic updates

change-beta/@azure-communication-react-456476e6-cbe9-4bcc-b458-61d65bdc2e28.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "fix",
+  "workstream": "Allow for contoso to hard set the dialer page, on, off, or follow our auto behaviors",
+  "comment": "Allow for contoso to hard set the dialer page, on, off, or follow our behaviors",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-456476e6-cbe9-4bcc-b458-61d65bdc2e28.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "fix",
+  "workstream": "Allow for contoso to hard set the dialer page, on, off, or follow our auto behaviors",
+  "comment": "Allow for contoso to hard set the dialer page, on, off, or follow our behaviors",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

common/config/babel/features.js

@@ -21,8 +21,6 @@ module.exports = {
     "in-progress-beta-feature-demo",
     // Feature for remote UFD
     "remote-ufd",
-    // Feature for showing dtmp dialer by default
-    "dtmf-dialer-on-by-default",
     // Feature for together mode
     "together-mode",
     // Feature for forbid/permit remote participants audio/video access

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

@@ -761,7 +761,7 @@ export type CallCompositeOptions = {
     remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
     localVideoTile?: boolean | LocalVideoTileOptions;
     videoTilesOptions?: VideoTilesOptions;
-    disableAutoShowDtmfDialer?: boolean;
+    disableAutoShowDtmfDialer?: boolean | DtmfDialPadOptions;
     galleryOptions?: {
         layout?: VideoGalleryLayout;
     };
@@ -3278,6 +3278,12 @@ interface Disposable_2 {
 }
 export { Disposable_2 as Disposable }
 
+// @public
+export interface DtmfDialPadOptions {
+    // (undocumented)
+    dialerBehavior?: 'autoShow' | 'alwaysShow' | 'alwaysHide';
+}
+
 // @public
 export type DtmfTone = 'A' | 'B' | 'C' | 'D' | 'Flash' | 'Num0' | 'Num1' | 'Num2' | 'Num3' | 'Num4' | 'Num5' | 'Num6' | 'Num7' | 'Num8' | 'Num9' | 'Pound' | 'Star';
 

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

@@ -570,7 +570,7 @@ export type CallCompositeOptions = {
     remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
     localVideoTile?: boolean | LocalVideoTileOptions;
     videoTilesOptions?: VideoTilesOptions;
-    disableAutoShowDtmfDialer?: boolean;
+    disableAutoShowDtmfDialer?: boolean | DtmfDialPadOptions;
     galleryOptions?: {
         layout?: VideoGalleryLayout;
     };
@@ -2836,6 +2836,12 @@ interface Disposable_2 {
 }
 export { Disposable_2 as Disposable }
 
+// @public
+export interface DtmfDialPadOptions {
+    // (undocumented)
+    dialerBehavior?: 'autoShow' | 'alwaysShow' | 'alwaysHide';
+}
+
 // @public
 export type DtmfTone = 'A' | 'B' | 'C' | 'D' | 'Flash' | 'Num0' | 'Num1' | 'Num2' | 'Num3' | 'Num4' | 'Num5' | 'Num6' | 'Num7' | 'Num8' | 'Num9' | 'Pound' | 'Star';
 

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

@@ -149,6 +149,15 @@ export interface LocalVideoTileOptions {
    */
   position?: 'grid' | 'floating';
 }
+
+/**
+ * Options to determine the rendering behavior of the dtmfDialer in the CallComposite
+ * @public
+ */
+export interface DtmfDialPadOptions {
+  dialerBehavior?: 'autoShow' | 'alwaysShow' | 'alwaysHide';
+}
+
 /**
  * Optional features of the {@link CallComposite}.
  *
@@ -244,7 +253,7 @@ export type CallCompositeOptions = {
    * - PSTN Calls
    * @defaultValue false
    */
-  disableAutoShowDtmfDialer?: boolean;
+  disableAutoShowDtmfDialer?: boolean | DtmfDialPadOptions;
   /**
    * Options for controlling the starting layout of the composite's video gallery
    */

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

@@ -95,6 +95,7 @@ import { useCompositeStringsForNotificationStackStrings } from '../hooks/useComp
 /* @conditional-compile-remove(breakout-rooms) */
 import { BreakoutRoomsBanner } from './BreakoutRoomsBanner';
 import { FocusableElement } from '../../common/types/FocusableElement';
+import { DtmfDialPadOptions } from '../CallComposite';
 
 /**
  * @private
@@ -116,21 +117,17 @@ export interface CallArrangementProps {
   latestErrors: ActiveErrorMessage[] | ActiveNotification[];
   latestNotifications?: ActiveNotification[];
   onDismissError: (error: ActiveErrorMessage | ActiveNotification) => void;
-
   onDismissNotification?: (notification: ActiveNotification) => void;
   onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void;
   onUserSetGalleryLayoutChange?: (layout: VideoGalleryLayout) => void;
   userSetGalleryLayout?: VideoGalleryLayout;
-
   capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;
   onCloseChatPane?: () => void;
   onSetDialpadPage?: () => void;
   dtmfDialerPresent?: boolean;
-
+  dtmfDialerOptions?: boolean | DtmfDialPadOptions;
   setIsPromptOpen?: (isOpen: boolean) => void;
-
   setPromptProps?: (props: PromptProps) => void;
-
   hideSpotlightButtons?: boolean;
   pinnedParticipants?: string[];
   setPinnedParticipants?: (pinnedParticipants: string[]) => void;
@@ -565,6 +562,7 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                 userSetGalleryLayout={props.userSetGalleryLayout}
                 onSetDialpadPage={props.onSetDialpadPage}
                 dtmfDialerPresent={props.dtmfDialerPresent}
+                dtmfDialerOptions={props.dtmfDialerOptions}
                 reactionResources={reactionResources}
                 onClickMeetingPhoneInfo={onMeetingPhoneInfoClicked}
               />

packages/react-composites/src/composites/CallComposite/index.ts

@@ -7,6 +7,7 @@ export type { CallCompositeOptions, CallCompositeProps, RemoteVideoTileMenuOptio
 export type { DeviceCheckOptions } from './CallComposite';
 export type { LocalVideoTileOptions } from './CallComposite';
 export type { CallControlOptions } from './types/CallControlOptions';
+export type { DtmfDialPadOptions } from './CallComposite';
 
 export * from './Strings';
 

packages/react-composites/src/composites/CallComposite/pages/CallPage.tsx

@@ -12,7 +12,7 @@ import React, { useMemo } from 'react';
 import { useState } from 'react';
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
 import { useLocale } from '../../localization';
-import { CallCompositeOptions } from '../CallComposite';
+import { CallCompositeOptions, DtmfDialPadOptions } from '../CallComposite';
 import { CallArrangement } from '../components/CallArrangement';
 import { MediaGallery } from '../components/MediaGallery';
 import { NetworkReconnectTile } from '../components/NetworkReconnectTile';
@@ -61,7 +61,7 @@ export interface CallPageProps {
   pinnedParticipants?: string[];
   setPinnedParticipants?: (pinnedParticipants: string[]) => void;
   compositeAudioContext?: AudioContext;
-  disableAutoShowDtmfDialer?: boolean;
+  disableAutoShowDtmfDialer?: boolean | DtmfDialPadOptions;
 }
 
 /**
@@ -82,7 +82,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
     pinnedParticipants = [],
     setPinnedParticipants,
     compositeAudioContext,
-    disableAutoShowDtmfDialer = false,
+    disableAutoShowDtmfDialer = { dialerBehavior: 'autoShow' },
     latestNotifications,
     onDismissNotification
   } = props;
@@ -98,10 +98,8 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
   const networkReconnectTileProps = useSelector(networkReconnectTileSelector);
   const remoteParticipantsConnected = useSelector(getRemoteParticipantsConnectedSelector);
   const callees = useSelector(getTargetCallees);
-  const renderDtmfDialerFromStart = showDtmfDialer(callees, remoteParticipantsConnected);
-  const [dtmfDialerPresent, setDtmfDialerPresent] = useState<boolean>(
-    renderDtmfDialerFromStart && disableAutoShowDtmfDialer
-  );
+  const renderDtmfDialerFromStart = showDtmfDialer(callees, remoteParticipantsConnected, disableAutoShowDtmfDialer);
+  const [dtmfDialerPresent, setDtmfDialerPresent] = useState<boolean>(renderDtmfDialerFromStart);
 
   const strings = useLocale().strings.call;
 
@@ -213,6 +211,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
         /* @conditional-compile-remove(call-readiness) */
         doNotShowCameraAccessNotifications={props.options?.deviceChecks?.camera === 'doNotPrompt'}
         captionsOptions={options?.captionsBanner}
+        dtmfDialerOptions={disableAutoShowDtmfDialer}
       />
       {<Prompt isOpen={isPromptOpen} onDismiss={() => setIsPromptOpen(false)} {...promptProps} />}
     </>

packages/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.ts

@@ -12,6 +12,7 @@ import {
   isMicrosoftTeamsAppIdentifier,
   isPhoneNumberIdentifier
 } from '@azure/communication-common';
+import { DtmfDialPadOptions } from '../CallComposite';
 
 type ParticipantChangedAnnouncmentStrings = {
   participantJoinedNoticeString: string;
@@ -174,22 +175,41 @@ export const createAnnouncementString = (
  */
 export const showDtmfDialer = (
   callees?: CommunicationIdentifier[],
-  remoteParticipants?: RemoteParticipantState[]
+  remoteParticipants?: RemoteParticipantState[],
+  dialerOptions?: boolean | DtmfDialPadOptions
 ): boolean => {
-  let showDtmfDialer = false;
-  callees?.forEach((callee) => {
-    if (isMicrosoftTeamsAppIdentifier(callee) || isPhoneNumberIdentifier(callee)) {
-      showDtmfDialer = true;
+  let showDtmfDialerAuto = false;
+  if (typeof dialerOptions === 'object' && 'dialerBehavior' in dialerOptions) {
+    const hideDtmfDialerAlways = dialerOptions.dialerBehavior && dialerOptions.dialerBehavior === 'alwaysHide';
+    const showDtmfDialerAlways = dialerOptions.dialerBehavior === 'alwaysShow';
+    showDtmfDialerAuto = dialerOptions.dialerBehavior === 'autoShow' ? true : false;
+    if (showDtmfDialerAlways) {
+      return true;
     }
-  });
-  if (remoteParticipants) {
-    remoteParticipants.forEach((participant) => {
-      if (!('phoneNumber' in participant.identifier || 'teamsAppId' in participant.identifier)) {
-        showDtmfDialer = false;
+    if (hideDtmfDialerAlways) {
+      return false;
+    }
+  }
+  let showDtmfDialer = false;
+
+  /**
+   * We also want to check to see if the option is undefined. If this is the case we want this function
+   * to fallback on the original logic so that it will also render the callControls to show and hide the dialpad
+   * for the user.
+   */
+  if (showDtmfDialerAuto || dialerOptions === undefined || dialerOptions === false) {
+    callees?.forEach((callee) => {
+      if (isMicrosoftTeamsAppIdentifier(callee) || isPhoneNumberIdentifier(callee)) {
+        showDtmfDialer = true;
       }
     });
+    if (remoteParticipants) {
+      remoteParticipants.forEach((participant) => {
+        if (!('phoneNumber' in participant.identifier || 'teamsAppId' in participant.identifier)) {
+          showDtmfDialer = false;
+        }
+      });
+    }
   }
-  /* @conditional-compile-remove(dtmf-dialer-on-by-default) */
-  showDtmfDialer = true;
   return showDtmfDialer;
 };

packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx

@@ -43,6 +43,8 @@ import { getTargetCallees } from '../../CallComposite/selectors/baseSelectors';
 import { getTeamsMeetingCoordinates, getIsTeamsMeeting } from '../../CallComposite/selectors/baseSelectors';
 import { showDtmfDialer } from '../../CallComposite/utils/MediaGalleryUtils';
 import { SpokenLanguageSettingsDrawer } from './SpokenLanguageSettingsDrawer';
+import { DtmfDialPadOptions } from '../../CallComposite';
+import { getRemoteParticipantsConnectedSelector } from '../../CallComposite/selectors/mediaGallerySelector';
 
 /** @private */
 export interface MoreDrawerStrings {
@@ -136,6 +138,10 @@ export interface MoreDrawerDevicesMenuProps {
    * Whether the dialpad is present in the call
    */
   dtmfDialerPresent?: boolean;
+  /**
+   * options for the controls of the DTMF dialer
+   */
+  dtmfDialerOptions?: boolean | DtmfDialPadOptions;
 }
 
 /** @private */
@@ -176,7 +182,8 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
   const holdButtonProps = usePropsFor(HoldButton);
 
   const callees = useSelector(getTargetCallees);
-  const allowDtmfDialer = showDtmfDialer(callees);
+  const participants = useSelector(getRemoteParticipantsConnectedSelector);
+  const allowDtmfDialer = showDtmfDialer(callees, participants, props.dtmfDialerOptions);
   const [dtmfDialerChecked, setDtmfDialerChecked] = useState<boolean>(props.dtmfDialerPresent ?? false);
 
   const raiseHandButtonProps = usePropsFor(RaiseHandButton) as RaiseHandButtonProps;

packages/react-composites/src/composites/common/Drawer/PreparedMoreDrawer.tsx

@@ -11,6 +11,7 @@ import { CommonCallControlOptions } from '../types/CommonCallControlOptions';
 /* @condtional-compile-remove(gallery-options) */
 import { VideoGalleryLayout } from '@internal/react-components';
 import { ReactionResources } from '@internal/react-components';
+import { DtmfDialPadOptions } from '../../CallComposite';
 
 /** @private */
 export interface PreparedMoreDrawerProps {
@@ -24,6 +25,7 @@ export interface PreparedMoreDrawerProps {
   userSetGalleryLayout?: VideoGalleryLayout;
   onSetDialpadPage?: () => void;
   dtmfDialerPresent?: boolean;
+  dtmfDialerOptions?: boolean | DtmfDialPadOptions;
   useTeamsCaptions?: boolean;
   reactionResources?: ReactionResources;
   onClickMeetingPhoneInfo?: () => void;
@@ -41,7 +43,6 @@ export const PreparedMoreDrawer = (props: PreparedMoreDrawerProps): JSX.Element
       captionsMenuTitle: strings.moreDrawerCaptionsMenuTitle,
       spokenLanguageMenuTitle: strings.moreDrawerSpokenLanguageMenuTitle,
       captionLanguageMenuTitle: strings.moreDrawerCaptionLanguageMenuTitle,
-
       galleryOptionsMenuTitle: strings.moreDrawerGalleryOptionsMenuTitle
     }),
     [strings]

samples/Calling/src/app/views/CallCompositeContainer.tsx

@@ -45,7 +45,7 @@ export const CallCompositeContainer = (props: CallCompositeContainerProps): JSX.
           hangUpForEveryone: 'endCallOptions'
         }
       },
-      autoShowDtmfDialer: true
+      disableAutoShowDtmfDialer: { dialerBehavior: 'autoShow' }
     }),
     [shouldHideScreenShare]
   );