diff --git a/CHANGELOG.md b/CHANGELOG.md index ea5b7ce225..a0e352af76 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/__tests__/__image_snapshots__/html/telephone-keypad-tap-js-fluent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png b/__tests__/__image_snapshots__/html/telephone-keypad-tap-js-fluent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png index a31fbb6285..ac23686320 100644 Binary files a/__tests__/__image_snapshots__/html/telephone-keypad-tap-js-fluent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png and b/__tests__/__image_snapshots__/html/telephone-keypad-tap-js-fluent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png differ diff --git a/__tests__/html/fluentTheme/telephoneKeypad.tap.html b/__tests__/html/fluentTheme/telephoneKeypad.tap.html index 5e6746f58c..f8f2f20820 100644 --- a/__tests__/html/fluentTheme/telephoneKeypad.tap.html +++ b/__tests__/html/fluentTheme/telephoneKeypad.tap.html @@ -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(); diff --git a/packages/fluent-theme/src/components/sendBox/SendBox.tsx b/packages/fluent-theme/src/components/sendBox/SendBox.tsx index 4f803392c8..e93065c40b 100644 --- a/packages/fluent-theme/src/components/sendBox/SendBox.tsx +++ b/packages/fluent-theme/src/components/sendBox/SendBox.tsx @@ -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] ); diff --git a/packages/fluent-theme/src/components/telephoneKeypad/private/Button.tsx b/packages/fluent-theme/src/components/telephoneKeypad/private/Button.tsx index 2a1401408c..f7329dc3d4 100644 --- a/packages/fluent-theme/src/components/telephoneKeypad/private/Button.tsx +++ b/packages/fluent-theme/src/components/telephoneKeypad/private/Button.tsx @@ -29,9 +29,7 @@ const Button = memo( ref={ref} type="button" > - - {button === 'star' ? '\u2217' : button === 'pound' ? '#' : button} - + {button === '*' ? '\u2217' : button} {!!ruby && {ruby}} ); diff --git a/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.tsx b/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.tsx index 7034ea8ffc..f39798f156 100644 --- a/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.tsx +++ b/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.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>( event => { if (event.key === 'Escape') { @@ -123,13 +123,9 @@ const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizonta onClick={handleButton9Click} ruby="WXYZ" /> -