[DTMF Dialer] remove old dtmf experience and update long press (#4065)

dmceachernmsft · web-flow · commit 50202875ace8 · 2024-01-26T16:58:05.000-08:00
* 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

* Remove old DTMF experience

* Change files

* Duplicate change files for beta release

* update API

* stable component file

* fix sample dialpads
diff --git a/change-beta/@azure-communication-react-bf020d68-08b5-411d-b7b1-73520aac1b41.json b/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"
+}
diff --git a/change/@azure-communication-react-bf020d68-08b5-411d-b7b1-73520aac1b41.json b/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"
+}
diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md
@@ -2694,7 +2694,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>;
@@ -3132,6 +3132,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';
diff --git a/packages/communication-react/src/index.ts b/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,
diff --git a/packages/react-components/review/beta/react-components.api.md b/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;
diff --git a/packages/react-components/review/stable/react-components.api.md b/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;
 
diff --git a/packages/react-components/src/components/Dialpad/Dialpad.tsx b/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);
@@ -284,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;
@@ -297,7 +304,7 @@ const DialpadContainer = (props: {
     textFieldValue,
     onChange,
     showDeleteButton = true,
-    isMobile = false,
+    longPressTrigger = 'mouseAndTouch',
     disableDtmfPlayback,
     dialpadMode = 'dialer'
   } = props;
@@ -418,7 +425,7 @@ const DialpadContainer = (props: {
                   styles={props.styles}
                   onClick={onClickDialpad}
                   onLongPress={onLongPressDialpad}
-                  isMobile={isMobile}
+                  longPressTrigger={longPressTrigger}
                   dtmfToneAudioContext={dtmfToneAudioContext.current}
                   disableDtmfPlayback={disableDtmfPlayback}
                 />
diff --git a/packages/react-components/src/components/index.ts b/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) */
diff --git a/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx b/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>
diff --git a/packages/react-composites/src/composites/CallComposite/components/CallControls.tsx b/packages/react-composites/src/composites/CallComposite/components/CallControls.tsx
@@ -4,8 +4,6 @@
 import { memoizeFunction, Stack, useTheme } from '@fluentui/react';
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
 import { IContextualMenuItem } from '@fluentui/react';
-/* @conditional-compile-remove(PSTN-calls) */
-import { useState } from 'react';
 import { _isInLobbyOrConnecting } from '@internal/calling-component-bindings';
 import { ControlBar, DevicesButton, ParticipantMenuItemsCallback } from '@internal/react-components';
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -29,8 +27,6 @@ import { MoreButton } from '../../common/MoreButton';
 import { usePropsFor } from '../hooks/usePropsFor';
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
 import { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';
-/* @conditional-compile-remove(PSTN-calls) */
-import { SendDtmfDialpad } from '../../common/SendDtmfDialpad';
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(rooms) */
 import { useAdapter } from '../adapter/CallAdapterProvider';
 import { isDisabled } from '../utils';
@@ -126,16 +122,6 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
     [localeStrings]
   );
 
-  /* @conditional-compile-remove(PSTN-calls) */
-  const dialpadStrings = useMemo(
-    () => ({
-      dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,
-      dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel,
-      placeholderText: localeStrings.strings.call.dtmfDialpadPlaceholderText
-    }),
-    [localeStrings]
-  );
-
   /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
   const holdButtonProps = usePropsFor(HoldButton);
 
@@ -148,9 +134,6 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
   const isReactionAllowed =
     !capabilitiesSelector?.capabilities || capabilitiesSelector.capabilities.useReactions.isPresent;
 
-  /* @conditional-compile-remove(PSTN-calls) */
-  const alternateCallerId = useAdapter().getState().alternateCallerId;
-
   const devicesButtonProps = usePropsFor(DevicesButton);
 
   let numberOfButtons = 0;
@@ -226,22 +209,6 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
         ['data-ui-id']: 'hold-button'
       });
     }
-
-    /* @conditional-compile-remove(PSTN-calls) */
-    // dtmf tone sending only works for 1:1 PSTN call
-    if (alternateCallerId) {
-      items.push({
-        key: 'showDialpadKey',
-        text: localeStrings.strings.call.openDtmfDialpadLabel,
-        onClick: () => {
-          setShowDialpad(true);
-        },
-        iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
-        itemProps: {
-          styles: buttonFlyoutIncreasedSizeStyles
-        }
-      });
-    }
     return items;
   };
 
@@ -373,32 +340,15 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
     });
   }
 
-  /* @conditional-compile-remove(PSTN-calls) */
-  const [showDialpad, setShowDialpad] = useState(false);
-
   const theme = useTheme();
 
   // when props.options is false then we want to hide the whole control bar.
   if (props.options === false) {
     return <></>;
   }
 
-  /* @conditional-compile-remove(PSTN-calls) */
-  const onDismissDialpad = (): void => {
-    setShowDialpad(false);
-  };
-
   return (
     <Stack horizontalAlign="center" className={callControlsContainerStyles}>
-      {
-        /* @conditional-compile-remove(PSTN-calls) */
-        <SendDtmfDialpad
-          isMobile={!!props.isMobile}
-          strings={dialpadStrings}
-          showDialpad={showDialpad}
-          onDismissDialpad={onDismissDialpad}
-        />
-      }
       <Stack.Item>
         {/*
             Note: We use the layout="horizontal" instead of dockedBottom because of how we position the
diff --git a/packages/react-composites/src/composites/CallComposite/pages/DtmfDialpadPage.tsx b/packages/react-composites/src/composites/CallComposite/pages/DtmfDialpadPage.tsx
@@ -67,7 +67,7 @@ const DtmfDialpadPageContent = (props: DialpadPageContentProps): JSX.Element =>
             /* @conditional-compile-remove(dtmf-dialer) */
             await adapter.sendDtmfTone(tone);
           }}
-          isMobile={props.mobileView}
+          longPressTrigger={props.mobileView ? 'touch' : 'mouseAndTouch'}
           dialpadMode={'dtmf'}
         ></Dialpad>
       </Stack>
diff --git a/packages/react-composites/src/composites/common/CallingDialpad.tsx b/packages/react-composites/src/composites/common/CallingDialpad.tsx
@@ -71,7 +71,11 @@ export const CallingDialpad = (props: CallingDialpadProps): JSX.Element => {
   const dialpadComponent = (): JSX.Element => {
     return (
       <>
-        <Dialpad styles={dialpadStyle} onChange={setTextFieldInput} isMobile={isMobile} />
+        <Dialpad
+          styles={dialpadStyle}
+          onChange={setTextFieldInput}
+          longPressTrigger={isMobile ? 'touch' : 'mouseAndTouch'}
+        />
         <PrimaryButton
           text={strings.dialpadStartCallButtonLabel}
           onRenderIcon={() => DialpadStartCallIconTrampoline()}
diff --git a/packages/react-composites/src/composites/common/SendDtmfDialpad.tsx b/packages/react-composites/src/composites/common/SendDtmfDialpad.tsx
diff --git a/samples/CallWithChat/src/app/views/HomeScreen.tsx b/samples/CallWithChat/src/app/views/HomeScreen.tsx
diff --git a/samples/Calling/src/app/views/HomeScreen.tsx b/samples/Calling/src/app/views/HomeScreen.tsx
