[DTMF Dialer] introduce dialpad to composite (#4041)

* Add new screen for dialpadContent

* add dialer button

* refactor callback type for button action

* Change files

* Duplicate change files for beta release

* fix build

* fix cc

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: dmceachernmsft

change-beta/@azure-communication-react-d3f773e7-fede-431d-bd66-acd8454a8dfb.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "DTMF Dialer",
+  "comment": "Introduce new DTMF tone screen where you can use the dialpad to send DTMF tones in the call",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-d3f773e7-fede-431d-bd66-acd8454a8dfb.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "DTMF Dialer",
+  "comment": "Introduce new DTMF tone screen where you can use the dialpad to send DTMF tones in the call",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -594,6 +594,7 @@ export type CallCompositeIcons = {
     OverflowGalleryTop?: JSX.Element;
     LargeGalleryLayout?: JSX.Element;
     DefaultCustomButton?: JSX.Element;
+    DtmfDialpadButton?: JSX.Element;
 };
 
 // @public
@@ -1243,6 +1244,7 @@ export type CallWithChatCompositeIcons = {
     PeoplePaneOpenDialpad?: JSX.Element;
     DialpadStartCall?: JSX.Element;
     DefaultCustomButton?: JSX.Element;
+    DtmfDialpadButton?: JSX.Element;
     EditBoxCancel?: JSX.Element;
     EditBoxSubmit?: JSX.Element;
     MessageDelivered?: JSX.Element;
@@ -2536,6 +2538,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     OverflowGalleryTop?: JSX.Element | undefined;
     LargeGalleryLayout?: JSX.Element | undefined;
     DefaultCustomButton?: JSX.Element | undefined;
+    DtmfDialpadButton?: JSX.Element | undefined;
     ChevronLeft?: JSX.Element | undefined;
     ControlBarChatButtonActive?: JSX.Element | undefined;
     ControlBarChatButtonInactive?: JSX.Element | undefined;

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

@@ -411,6 +411,7 @@ export type CallCompositeIcons = {
     OverflowGalleryTop?: JSX.Element;
     LargeGalleryLayout?: JSX.Element;
     DefaultCustomButton?: JSX.Element;
+    DtmfDialpadButton?: JSX.Element;
 };
 
 // @public
@@ -941,6 +942,7 @@ export type CallWithChatCompositeIcons = {
     PeoplePaneOpenDialpad?: JSX.Element;
     DialpadStartCall?: JSX.Element;
     DefaultCustomButton?: JSX.Element;
+    DtmfDialpadButton?: JSX.Element;
     EditBoxCancel?: JSX.Element;
     EditBoxSubmit?: JSX.Element;
     MessageDelivered?: JSX.Element;
@@ -1482,6 +1484,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     OverflowGalleryTop?: JSX.Element | undefined;
     LargeGalleryLayout?: JSX.Element | undefined;
     DefaultCustomButton?: JSX.Element | undefined;
+    DtmfDialpadButton?: JSX.Element | undefined;
     ChevronLeft?: JSX.Element | undefined;
     ControlBarChatButtonActive?: JSX.Element | undefined;
     ControlBarChatButtonInactive?: JSX.Element | undefined;

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

@@ -57,6 +57,8 @@ import { capabilitiesChangedInfoAndRoleSelector } from './selectors/capabilities
 /* @conditional-compile-remove(capabilities) */
 import { useTrackedCapabilityChangedNotifications } from './utils/TrackCapabilityChangedNotifications';
 import { useEndedCallConsoleErrors } from './utils/useConsoleErrors';
+/* @conditional-compile-remove(dtmf-dialer) */
+import { DtmfDialpadPage } from './pages/DtmfDialpadPage';
 
 /**
  * Props for {@link CallComposite}.
@@ -365,7 +367,8 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
 
   const [sidePaneRenderer, setSidePaneRenderer] = React.useState<SidePaneRenderer | undefined>();
   const [injectedSidePaneProps, setInjectedSidePaneProps] = React.useState<InjectedSidePaneProps>();
-
+  /* @conditional-compile-remove(dtmf-dialer) */
+  const [dialpadScreen, setDialpadScreen] = useState<boolean>(false);
   /* @conditional-compile-remove(gallery-layouts) */
   const [userSetGalleryLayout, setUserSetGalleryLayout] = useState<VideoGalleryLayout>(
     props.options?.galleryOptions?.layout ?? 'floatingLocalVideo'
@@ -575,6 +578,8 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
           userSetOverflowGalleryPosition={userSetOverflowGalleryPosition}
           /* @conditional-compile-remove(capabilities) */
           capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}
+          /* @conditional-compile-remove(dtmf-dialer) */
+          onSetDialpadPage={() => setDialpadScreen(!dialpadScreen)}
         />
       );
       break;
@@ -619,6 +624,26 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
       break;
   }
 
+  /* @conditional-compile-remove(dtmf-dialer) */
+  if (dialpadScreen) {
+    pageElement = (
+      <>
+        <DtmfDialpadPage
+          mobileView={props.mobileView}
+          modalLayerHostId={props.modalLayerHostId}
+          options={props.options}
+          updateSidePaneRenderer={setSidePaneRenderer}
+          mobileChatTabHeader={props.mobileChatTabHeader}
+          latestErrors={latestErrors}
+          onDismissError={onDismissError}
+          /* @conditional-compile-remove(capabilities) */
+          capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}
+          onSetDialpadPage={() => setDialpadScreen(!dialpadScreen)}
+        />
+      </>
+    );
+  }
+
   if (!pageElement) {
     throw new Error('Invalid call composite page');
   }

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

@@ -109,6 +109,8 @@ export interface CallArrangementProps {
   /* @conditional-compile-remove(capabilities) */
   capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;
   onCloseChatPane?: () => void;
+  /* @conditional-compile-remove(dtmf-dialer) */
+  onSetDialpadPage?: () => void;
 }
 
 /**
@@ -363,6 +365,8 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                   onUserSetGalleryLayout={props.onUserSetGalleryLayoutChange}
                   /* @conditional-compile-remove(gallery-layouts) */
                   userSetGalleryLayout={props.userSetGalleryLayout}
+                  /* @conditional-compile-remove(dtmf-dialer) */
+                  onSetDialpadPage={props.onSetDialpadPage}
                   peopleButtonRef={peopleButtonRef}
                   cameraButtonRef={cameraButtonRef}
                 />

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

@@ -53,6 +53,8 @@ export interface CallPageProps {
   /* @conditional-compile-remove(gallery-layouts) */
   onSetUserSetOverflowGalleryPosition?: (position: 'Responsive' | 'horizontalTop') => void;
   onCloseChatPane?: () => void;
+  /* @conditional-compile-remove(dtmf-dialer) */
+  onSetDialpadPage: () => void;
 }
 
 /**
@@ -148,6 +150,8 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
       userSetGalleryLayout={galleryLayout}
       /* @conditional-compile-remove(capabilities) */
       capabilitiesChangedNotificationBarProps={props.capabilitiesChangedNotificationBarProps}
+      /* @conditional-compile-remove(dtmf-dialer) */
+      onSetDialpadPage={props.onSetDialpadPage}
     />
   );
 };

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

@@ -0,0 +1,126 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { ActiveErrorMessage, Dialpad, DtmfTone, ErrorBar } from '@internal/react-components';
+import { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';
+import { CallCompositeOptions } from '../CallComposite';
+import { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';
+import { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';
+import { usePropsFor } from '../hooks/usePropsFor';
+import { useLocale } from '../../localization';
+import { disableCallControls, reduceCallControlsForMobile } from '../utils';
+import React, { useRef, useState } from 'react';
+import { useAdapter } from '../adapter/CallAdapterProvider';
+import { CallArrangement } from '../components/CallArrangement';
+import { CommonCallAdapter } from '../adapter';
+import { Stack, Text, useTheme } from '@fluentui/react';
+import { getReadableTime } from '../utils/timerUtils';
+import { DtmfDialpadContentTimerStyles } from '../styles/DtmfDialpadPage.styles';
+
+/**
+ * @internal
+ */
+export interface DialpadPageProps {
+  mobileView: boolean;
+  options?: CallCompositeOptions;
+  modalLayerHostId: string;
+  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
+  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;
+  latestErrors: ActiveErrorMessage[];
+  onDismissError: (error: ActiveErrorMessage) => void;
+  /* @conditional-compile-remove(capabilities) */
+  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;
+  onSetDialpadPage: () => void;
+}
+
+interface DialpadPageContentProps {
+  mobileView: boolean;
+  adapter: CommonCallAdapter;
+}
+
+const DtmfDialpadPageContent = (props: DialpadPageContentProps): JSX.Element => {
+  const { adapter } = props;
+
+  const [time, setTime] = useState<number>(0);
+  const elapsedTime = getReadableTime(time);
+  const startTime = useRef(performance.now());
+  const adapterState = adapter.getState();
+  const theme = useTheme();
+
+  const calleeId = adapterState.targetCallees?.[0];
+  const remoteParticipants = adapterState.call?.remoteParticipants;
+  let calleeName;
+
+  if (remoteParticipants) {
+    calleeName = Object.values(remoteParticipants).find((p) => p.identifier === calleeId);
+  }
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(performance.now() - startTime.current);
+    }, 10);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [startTime]);
+
+  return (
+    <Stack style={{ height: '100%', width: '100%', background: theme.palette.white }}>
+      <Stack style={{ margin: 'auto' }}>
+        <Text styles={DtmfDialpadContentTimerStyles}>{elapsedTime}</Text>
+        <Text>{calleeName !== 'Unnamed participant' ? calleeName : ''}</Text>
+        <Dialpad
+          onSendDtmfTone={async (tone: DtmfTone) => {
+            /* @conditional-compile-remove(dtmf-dialer) */
+            await adapter.sendDtmfTone(tone);
+          }}
+          enableInputEditing={false}
+        ></Dialpad>
+      </Stack>
+    </Stack>
+  );
+};
+
+/**
+ * @internal
+ */
+export const DtmfDialpadPage = (props: DialpadPageProps): JSX.Element => {
+  const errorBarProps = usePropsFor(ErrorBar);
+  const strings = useLocale().strings.call;
+  const adapter = useAdapter();
+
+  let callControlOptions = props.mobileView
+    ? reduceCallControlsForMobile(props.options?.callControls)
+    : props.options?.callControls;
+
+  callControlOptions = disableCallControls(callControlOptions, [
+    'cameraButton',
+    'microphoneButton',
+    'devicesButton',
+    'screenShareButton',
+    /* @conditional-compile-remove(PSTN-calls) */
+    /* @conditional-compile-remove(one-to-n-calling) */
+    'holdButton'
+  ]);
+
+  return (
+    <CallArrangement
+      complianceBannerProps={{ strings }}
+      errorBarProps={props.options?.errorBar !== false && errorBarProps}
+      callControlProps={{
+        options: callControlOptions,
+        increaseFlyoutItemSize: props.mobileView
+      }}
+      mobileView={props.mobileView}
+      modalLayerHostId={props.modalLayerHostId}
+      onRenderGalleryContent={() => <DtmfDialpadPageContent adapter={adapter} mobileView={props.mobileView} />}
+      dataUiId={'hold-page'}
+      updateSidePaneRenderer={props.updateSidePaneRenderer}
+      mobileChatTabHeader={props.mobileChatTabHeader}
+      latestErrors={props.latestErrors}
+      onDismissError={props.onDismissError}
+      /* @conditional-compile-remove(dtmf-dialer) */
+      onSetDialpadPage={props.onSetDialpadPage}
+    />
+  );
+};

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

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { ITextStyles } from '@fluentui/react';
+import { _pxToRem } from '@internal/acs-ui-common';
+
+/**
+ * styles for hold pane timer
+ *
+ * @private
+ */
+export const DtmfDialpadContentTimerStyles: ITextStyles = {
+  root: {
+    color: 'inherit',
+    fontWeight: 600,
+    fontSize: _pxToRem(20),
+    lineHeight: _pxToRem(28),
+    margin: 'auto'
+  }
+};

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

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/**
+ * @internal
+ */
+export const getMinutes = (time: number): number => {
+  return Math.floor(getSeconds(time) / 60);
+};
+
+/**
+ * @internal
+ */
+export const getSeconds = (time: number): number => {
+  return Math.floor(time / 1000);
+};
+
+/**
+ * @internal
+ */
+export const getHours = (time: number): number => {
+  return Math.floor(getMinutes(time) / 60);
+};
+
+/**
+ * @internal
+ */
+export const getReadableTime = (time: number): string => {
+  const hours = getHours(time);
+  const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);
+  const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);
+  return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;
+};