[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": "[email protected]",
+  "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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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;
     };
@@ -3195,6 +3195,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;
     };
@@ -2754,6 +2754,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/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;
 

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,43 @@ 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) {
+    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) */
+    return showDtmfDialer;
   }
-  /* @conditional-compile-remove(dtmf-dialer-on-by-default) */
-  showDtmfDialer = true;
   return showDtmfDialer;
 };

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

@@ -41,7 +41,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]
   );