[DTMF DIaler] Fix Dialpad bugs (#4062)

* Fix Dialpad bugs

* Change files

* Duplicate change files for beta release

* fix tab away sound keeps playing

* fix cc

* use correct key values

* fix tests

* use Call start time to track the call timer

* fix lint

* fix build

Author: dmceachernmsft

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-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/react-components/src/components/Dialpad/Dialpad.tsx

@@ -220,6 +220,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) => {

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/pages/DtmfDialpadPage.tsx

@@ -6,14 +6,16 @@ import { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';
 import { CallCompositeOptions } from '../CallComposite';
 import { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';
 import { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useAdapter } from '../adapter/CallAdapterProvider';
 import { CommonCallAdapter } from '../adapter';
 import { Stack, Text, useTheme } from '@fluentui/react';
 import { getReadableTime } from '../utils/timerUtils';
 import { DtmfDialpadContentTimerStyles } from '../styles/DtmfDialpadPage.styles';
 import { RemoteParticipantState } from '@internal/calling-stateful-client';
 import { isPhoneNumberIdentifier } from '@azure/communication-common';
+import { useSelector } from '../hooks/useSelector';
+import { getStartTime } from '../selectors/baseSelectors';
 
 /**
  * @internal
@@ -65,6 +67,7 @@ const DtmfDialpadPageContent = (props: DialpadPageContentProps): JSX.Element =>
             /* @conditional-compile-remove(dtmf-dialer) */
             await adapter.sendDtmfTone(tone);
           }}
+          isMobile={props.mobileView}
           dialpadMode={'dtmf'}
         ></Dialpad>
       </Stack>
@@ -75,11 +78,14 @@ const DtmfDialpadPageContent = (props: DialpadPageContentProps): JSX.Element =>
 const DtmfDialerContentTimer = (): JSX.Element => {
   const [time, setTime] = useState<number>(0);
   const elapsedTime = getReadableTime(time);
-  const startTime = useRef(performance.now());
+  const statefulStartTime = useSelector(getStartTime);
+  const startTime = useMemo(() => {
+    return statefulStartTime ?? new Date(Date.now());
+  }, [statefulStartTime]);
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setTime(performance.now() - startTime.current);
+      setTime(new Date(Date.now()).getTime() - startTime?.getTime() ?? 0);
     }, 10);
     return () => {
       clearInterval(interval);

packages/react-composites/src/composites/CallComposite/selectors/baseSelectors.ts

@@ -219,3 +219,8 @@ export const getLatestCapabilitiesChangedInfo = (state: CallAdapterState): Capab
  * @private
  */
 export const getTargetCallees = (state: CallAdapterState): CommunicationIdentifier[] | undefined => state.targetCallees;
+
+/**
+ * @private
+ */
+export const getStartTime = (state: CallAdapterState): Date | undefined => state.call?.startTime;

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

@@ -149,7 +149,7 @@ export const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element =>
         )}
         {alternateCallerId && (
           <CallingDialpad
-            isMobile
+            isMobile={true}
             strings={strings}
             showDialpad={showDialpad}
             onDismissDialpad={onDismissDialpad}