[DTMF Dialer] remove old dtmf experience and update long press

change-beta/@azure-communication-react-bf020d68-08b5-411d-b7b1-73520aac1b41.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "DTMF Dialer",
+  "comment": "Remove old DTMF experience and update dialpad API to be platform agnostic",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change-beta/@azure-communication-react-ea251a2f-977e-44b8-b4da-77f39da085c8.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "fix",
+  "workstream": "DTMF Dialer",
+  "comment": "Fix Dialpad bugs",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-bf020d68-08b5-411d-b7b1-73520aac1b41.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "DTMF Dialer",
+  "comment": "Remove old DTMF experience and update dialpad API to be platform agnostic",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-ea251a2f-977e-44b8-b4da-77f39da085c8.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "fix",
+  "workstream": "DTMF Dialer",
+  "comment": "Fix Dialpad bugs",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -2693,7 +2693,7 @@ export type DialpadMode = 'dtmf' | 'dialer';
 export interface DialpadProps {
     dialpadMode?: DialpadMode;
     disableDtmfPlayback?: boolean;
-    isMobile?: boolean;
+    longPressTrigger?: LongPressTrigger;
     onChange?: (input: string) => void;
     onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;
     onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;
@@ -3131,6 +3131,9 @@ export interface LocalVideoTileOptions {
 // @public
 export type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';
 
+// @beta
+export type LongPressTrigger = 'mouseAndTouch' | 'touch';
+
 // @public
 export type MediaDiagnosticChangedEvent = MediaDiagnosticChangedEventArgs & {
     type: 'media';

packages/communication-react/src/index.ts

@@ -312,7 +312,14 @@ export type { ImageGalleryProps, ImageGalleryImageProps, ImageGalleryStrings } f
 /* @conditional-compile-remove(data-loss-prevention) */
 export type { BlockedMessage } from '../../react-components/src';
 /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-export type { DialpadMode, DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from '../../react-components/src';
+export type {
+  DialpadMode,
+  DialpadProps,
+  DialpadStrings,
+  DialpadStyles,
+  DtmfTone,
+  LongPressTrigger
+} from '../../react-components/src';
 /* @conditional-compile-remove(file-sharing) */
 export type {
   ActiveFileUpload,

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

@@ -971,7 +971,7 @@ export type DialpadMode = 'dtmf' | 'dialer';
 export interface DialpadProps {
     dialpadMode?: DialpadMode;
     disableDtmfPlayback?: boolean;
-    isMobile?: boolean;
+    longPressTrigger?: LongPressTrigger;
     onChange?: (input: string) => void;
     onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;
     onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;
@@ -1421,6 +1421,9 @@ export const _LocalVideoTile: React_2.MemoExoticComponent<(props: {
 // @public
 export type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';
 
+// @beta
+export type LongPressTrigger = 'mouseAndTouch' | 'touch';
+
 // @beta
 export interface Mention {
     displayText: string;

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

@@ -743,7 +743,7 @@ export type DialpadMode = 'dtmf' | 'dialer';
 export interface DialpadProps {
     dialpadMode?: DialpadMode;
     disableDtmfPlayback?: boolean;
-    isMobile?: boolean;
+    longPressTrigger?: LongPressTrigger;
     onChange?: (input: string) => void;
     onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;
     onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;
@@ -1125,6 +1125,9 @@ export const _LocalVideoTile: React_2.MemoExoticComponent<(props: {
 // @public
 export type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';
 
+// @beta
+export type LongPressTrigger = 'mouseAndTouch' | 'touch';
+
 // @public
 export type Message = ChatMessage | SystemMessage | CustomMessage;
 

packages/react-components/src/components/Dialpad/Dialpad.tsx

@@ -86,6 +86,12 @@ export type DtmfTone =
  */
 export type DialpadMode = 'dtmf' | 'dialer';
 
+/**
+ * Modes of how the longpress handlers can be tiggered.
+ * @beta
+ */
+export type LongPressTrigger = 'mouseAndTouch' | 'touch';
+
 /**
  * Props for {@link Dialpad} component.
  *
@@ -114,9 +120,10 @@ export interface DialpadProps {
    */
   showDeleteButton?: boolean;
   /**
-   * flag to determine if dialpad is in mobile view, default false
+   * Determines what kind of device that the user is on and should respect that based on interaction
+   * interfaces available to the user
    */
-  isMobile?: boolean;
+  longPressTrigger?: LongPressTrigger;
   /**
    * Styles for customizing the dialpad component
    */
@@ -178,13 +185,13 @@ const DialpadButton = (props: {
   index: number;
   onClick: (input: string, index: number) => void;
   onLongPress: (input: string, index: number) => void;
-  isMobile?: boolean;
+  longPressTrigger: LongPressTrigger;
   dtmfToneAudioContext: AudioContext;
   disableDtmfPlayback?: boolean;
 }): JSX.Element => {
   const theme = useTheme();
 
-  const { digit, index, onClick, onLongPress, isMobile = false, dtmfToneAudioContext, disableDtmfPlayback } = props;
+  const { digit, index, onClick, onLongPress, longPressTrigger, dtmfToneAudioContext, disableDtmfPlayback } = props;
   const [buttonPressed, setButtonPressed] = useState(false);
 
   const dtmfToneSound = useRef<Tone>(
@@ -199,9 +206,9 @@ const DialpadButton = (props: {
       onLongPress: async () => {
         onLongPress(digit, index);
       },
-      touchEventsOnly: isMobile
+      touchEventsOnly: longPressTrigger === 'touch'
     }),
-    [digit, index, isMobile, onClick, onLongPress]
+    [digit, index, longPressTrigger, onClick, onLongPress]
   );
 
   const longPressHandlers = useLongPress(useLongPressProps);
@@ -220,6 +227,15 @@ const DialpadButton = (props: {
           setButtonPressed(true);
           return;
         }
+        if (
+          e.key === 'Tab' ||
+          e.key === 'ArrowLeft' ||
+          e.key === 'ArrowRight' ||
+          e.key === 'ArrowUp' ||
+          e.key === 'ArrowDown'
+        ) {
+          dtmfToneSound.current.stop();
+        }
         longPressHandlers.onKeyDown();
       }}
       onKeyUp={(e) => {
@@ -275,7 +291,7 @@ const DialpadContainer = (props: {
   /**  boolean input to determine when to show/hide delete button, default true */
   showDeleteButton?: boolean;
   /**  boolean input to determine if dialpad is in mobile view, default false */
-  isMobile?: boolean;
+  longPressTrigger?: LongPressTrigger;
   styles?: DialpadStyles;
   disableDtmfPlayback?: boolean;
   dialpadMode?: DialpadMode;
@@ -288,7 +304,7 @@ const DialpadContainer = (props: {
     textFieldValue,
     onChange,
     showDeleteButton = true,
-    isMobile = false,
+    longPressTrigger = 'mouseAndTouch',
     disableDtmfPlayback,
     dialpadMode = 'dialer'
   } = props;
@@ -409,7 +425,7 @@ const DialpadContainer = (props: {
                   styles={props.styles}
                   onClick={onClickDialpad}
                   onLongPress={onLongPressDialpad}
-                  isMobile={isMobile}
+                  longPressTrigger={longPressTrigger}
                   dtmfToneAudioContext={dtmfToneAudioContext.current}
                   disableDtmfPlayback={disableDtmfPlayback}
                 />

packages/react-components/src/components/index.ts

@@ -211,7 +211,7 @@ export { _ComplianceBanner } from './ComplianceBanner';
 export type { _ComplianceBannerProps, _ComplianceBannerStrings } from './ComplianceBanner';
 export { Dialpad } from './Dialpad/Dialpad';
 export type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from './Dialpad/Dialpad';
-export type { DialpadMode } from './Dialpad/Dialpad';
+export type { DialpadMode, LongPressTrigger } from './Dialpad/Dialpad';
 /* @conditional-compile-remove(end-of-call-survey) */
 export { _StarSurvey } from './Survey/StarSurvey/StarSurvey';
 /* @conditional-compile-remove(end-of-call-survey) */

packages/react-components/src/components/utils/useLongPress.ts

@@ -90,8 +90,11 @@ export default function useLongPress(props: {
   }, [startPressTimer]);
 
   const handleOnTouchEnd = useCallback(() => {
+    if (!isLongPress && onClick) {
+      onClick();
+    }
     timerRef.current && clearTimeout(timerRef.current);
-  }, []);
+  }, [onClick, isLongPress]);
 
   const handleOnTouchMove = useCallback(() => {
     timerRef.current && clearTimeout(timerRef.current);

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

@@ -7,6 +7,10 @@ import { _MockCallAdapter } from './MockCallAdapter';
 import { CallComposite } from './CallComposite';
 import { render } from '@testing-library/react';
 
+window.AudioContext = jest.fn().mockImplementation(() => {
+  return {};
+});
+
 describe('CallComposite device permission test for different roles', () => {
   let audioDevicePermissionRequests = 0;
   let videoDevicePermissionRequests = 0;

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

@@ -46,10 +46,6 @@ import { useSelector } from '../hooks/useSelector';
 import { callStatusSelector } from '../selectors/callStatusSelector';
 import { CallControlOptions } from '../types/CallControlOptions';
 import { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';
-/* @conditional-compile-remove(PSTN-calls) */
-import { SendDtmfDialpad } from '../../common/SendDtmfDialpad';
-/* @conditional-compile-remove(PSTN-calls) */
-import { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
 import { getPage } from '../selectors/baseSelectors';
 /* @conditional-compile-remove(close-captions) */
@@ -210,19 +206,6 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
     };
   }, [isMobileWithActivePane, props.mobileView]);
 
-  /* @conditional-compile-remove(PSTN-calls) */
-  const callWithChatStrings = useCallWithChatCompositeStrings();
-
-  /* @conditional-compile-remove(PSTN-calls) */
-  const dialpadStrings = useMemo(
-    () => ({
-      dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,
-      dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
-      placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText
-    }),
-    [callWithChatStrings]
-  );
-
   /* @conditional-compile-remove(video-background-effects) */
   const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;
 
@@ -246,22 +229,6 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
     togglePeoplePane();
   }, [togglePeoplePane]);
 
-  /* @conditional-compile-remove(PSTN-calls) */
-  const alternateCallerId = useAdapter().getState().alternateCallerId;
-
-  /* @conditional-compile-remove(PSTN-calls) */
-  const [showDtmfDialpad, setShowDtmfDialpad] = useState(false);
-
-  /* @conditional-compile-remove(PSTN-calls) */
-  const onDismissDtmfDialpad = (): void => {
-    setShowDtmfDialpad(false);
-  };
-
-  /* @conditional-compile-remove(PSTN-calls) */
-  const onClickShowDialpad = (): void => {
-    setShowDtmfDialpad(true);
-  };
-
   const drawerContainerStylesValue = useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
 
   /* @conditional-compile-remove(rooms) */
@@ -358,8 +325,6 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                   isCaptionsOn={isCaptionsOn}
                   /* @conditional-compile-remove(video-background-effects) */
                   onClickVideoEffects={onResolveVideoEffectDependency ? openVideoEffectsPane : undefined}
-                  /* @conditional-compile-remove(PSTN-calls) */
-                  onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}
                   displayVertical={verticalControlBar}
                   /* @conditional-compile-remove(gallery-layouts) */
                   onUserSetOverflowGalleryPositionChange={props.onUserSetOverflowGalleryPositionChange}
@@ -383,8 +348,6 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                 callControls={props.callControlProps.options}
                 onLightDismiss={closeDrawer}
                 onPeopleButtonClicked={onMoreDrawerPeopleClicked}
-                /* @conditional-compile-remove(PSTN-calls) */
-                onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}
                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                 disableButtonsForHoldScreen={isInLocalHold}
                 /* @conditional-compile-remove(close-captions) */
@@ -400,20 +363,6 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
               />
             </Stack>
           )}
-
-          {
-            /* @conditional-compile-remove(PSTN-calls) */
-            props.callControlProps?.options !== false && showDtmfDialpad && (
-              <Stack styles={drawerContainerStylesValue}>
-                <SendDtmfDialpad
-                  isMobile={props.mobileView}
-                  strings={dialpadStrings}
-                  showDialpad={showDtmfDialpad}
-                  onDismissDialpad={onDismissDtmfDialpad}
-                />
-              </Stack>
-            )
-          }
           <Stack horizontal grow>
             <Stack.Item style={callCompositeContainerCSS}>
               <Stack.Item styles={callGalleryStyles} grow>