Fluent: fix DTMF key command usage (#5198)

* Fix DTMF key command usage

* Changelog

* Fix star and pound

Author: OEvgeny

CHANGELOG.md

@@ -34,6 +34,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Improved performance for `useMemoized`, in PR [5190](https://github.com/microsoft/BotFramework-WebChat/pull/5190), by [@OEvgeny](https://github.com/OEvgeny)
 -  Fixed send box zoomed in when clicked on mobile Safari, in PR [5192](https://github.com/microsoft/BotFramework-WebChat/pull/5192), by [@OEvgeny](https://github.com/OEvgeny)
 -  Added missing support for chat history scroll with keyboard when Fluent send box is focused, in PR [5191](https://github.com/microsoft/BotFramework-WebChat/pull/5191), by [@OEvgeny](https://github.com/OEvgeny)
+-  Fixed DTMF command usage sent by telephone keypad, in PR [5198](https://github.com/microsoft/BotFramework-WebChat/pull/5198), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Changed
 

__tests__/__image_snapshots__/html/telephone-keypad-tap-js-fluent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png

@@ -45,14 +45,29 @@
         await host.click(pageElements.byTestId(WebChat.testIds.sendBoxTelephoneKeypadToolbarButton));
 
         await (
-          await directLine.actPostActivity(() =>
+          await directLine.actPostActivity(() => 
+            host.click(pageElements.byTestId(WebChat.testIds.sendBoxTelephoneKeypadButtonPound))
+          )
+        ).resolveAll();
+
+        await (
+          await directLine.actPostActivity(() => 
+            host.click(pageElements.byTestId(WebChat.testIds.sendBoxTelephoneKeypadButtonStar))
+          )
+        ).resolveAll();
+
+        await (
+          await directLine.actPostActivity(() => 
             host.click(pageElements.byTestId(WebChat.testIds.sendBoxTelephoneKeypadButton5))
           )
         ).resolveAll();
 
-        // THEN: Should send "/DTMF 5".
-        await pageConditions.numActivitiesShown(2);
-        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', '/DTMF 5');
+
+        // THEN: Should send "/DTMFKey 5".
+        await pageConditions.numActivitiesShown(4);
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', '/DTMFKey #');
+        expect(pageElements.activityContents()[2]).toHaveProperty('textContent', '/DTMFKey *');
+        expect(pageElements.activityContents()[3]).toHaveProperty('textContent', '/DTMFKey 5');
 
         // THEN: Should not close the keypad and keep focusing on the button "5".
         expect(pageElements.byTestId(WebChat.testIds.sendBoxTelephoneKeypadButton5)).toBeTruthy();

__tests__/html/fluentTheme/telephoneKeypad.tap.html

@@ -143,7 +143,7 @@ function SendBox(
 
   const handleTelephoneKeypadButtonClick = useCallback(
     // TODO: We need more official way of sending DTMF.
-    (dtmf: DTMF) => sendMessage(`/DTMF ${dtmf}`),
+    (dtmf: DTMF) => sendMessage(`/DTMFKey ${dtmf}`),
     [sendMessage]
   );
 

packages/fluent-theme/src/components/sendBox/SendBox.tsx

@@ -29,9 +29,7 @@ const Button = memo(
         ref={ref}
         type="button"
       >
-        <span className={classNames['telephone-keypad__button__text']}>
-          {button === 'star' ? '\u2217' : button === 'pound' ? '#' : button}
-        </span>
+        <span className={classNames['telephone-keypad__button__text']}>{button === '*' ? '\u2217' : button}</span>
         {!!ruby && <ruby className={classNames['telephone-keypad__button__ruby']}>{ruby}</ruby>}
       </button>
     );

packages/fluent-theme/src/components/telephoneKeypad/private/Button.tsx

@@ -50,8 +50,8 @@ const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizonta
   const handleButton8Click = useCallback(() => onButtonClickRef.current?.('8'), [onButtonClickRef]);
   const handleButton9Click = useCallback(() => onButtonClickRef.current?.('9'), [onButtonClickRef]);
   const handleButton0Click = useCallback(() => onButtonClickRef.current?.('0'), [onButtonClickRef]);
-  const handleButtonStarClick = useCallback(() => onButtonClickRef.current?.('star'), [onButtonClickRef]);
-  const handleButtonPoundClick = useCallback(() => onButtonClickRef.current?.('pound'), [onButtonClickRef]);
+  const handleButtonStarClick = useCallback(() => onButtonClickRef.current?.('*'), [onButtonClickRef]);
+  const handleButtonPoundClick = useCallback(() => onButtonClickRef.current?.('#'), [onButtonClickRef]);
   const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
     event => {
       if (event.key === 'Escape') {
@@ -123,13 +123,9 @@ const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizonta
           onClick={handleButton9Click}
           ruby="WXYZ"
         />
-        <Button button="star" data-testid={testIds.sendBoxTelephoneKeypadButtonStar} onClick={handleButtonStarClick} />
+        <Button button="*" data-testid={testIds.sendBoxTelephoneKeypadButtonStar} onClick={handleButtonStarClick} />
         <Button button="0" data-testid={testIds.sendBoxTelephoneKeypadButton0} onClick={handleButton0Click} ruby="+" />
-        <Button
-          button="pound"
-          data-testid={testIds.sendBoxTelephoneKeypadButtonPound}
-          onClick={handleButtonPoundClick}
-        />
+        <Button button="#" data-testid={testIds.sendBoxTelephoneKeypadButtonPound} onClick={handleButtonPoundClick} />
       </Orientation>
       <div className={classNames['telephone-keypad__info-message']}>
         <InfoSmallIcon />

packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.tsx

@@ -1 +1 @@
-export type DTMF = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '0' | 'star' | 'pound';
+export type DTMF = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '0' | '*' | '#';