Add dialpad to transfer dialog + various dialpad UI improvements (#6363)

Co-authored-by: Germain <germain@souquet.com>
Co-authored-by: Andrew Morgan <andrew@amorgan.xyz>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>

src/CallHandler.tsx

@@ -394,7 +394,7 @@ export default class CallHandler extends EventEmitter {
     }
 
     private setCallListeners(call: MatrixCall) {
-        let mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call);
+        let mappedRoomId = this.roomIdForCall(call);
 
         call.on(CallEvent.Error, (err: CallError) => {
             if (!this.matchesCallForThisRoom(call)) return;
@@ -871,6 +871,12 @@ export default class CallHandler extends EventEmitter {
             case Action.DialNumber:
                 this.dialNumber(payload.number);
                 break;
+            case Action.TransferCallToMatrixID:
+                this.startTransferToMatrixID(payload.call, payload.destination, payload.consultFirst);
+                break;
+            case Action.TransferCallToPhoneNumber:
+                this.startTransferToPhoneNumber(payload.call, payload.destination, payload.consultFirst);
+                break;
         }
     };
 
@@ -905,6 +911,48 @@ export default class CallHandler extends EventEmitter {
         });
     }
 
+    private async startTransferToPhoneNumber(call: MatrixCall, destination: string, consultFirst: boolean) {
+        const results = await this.pstnLookup(destination);
+        if (!results || results.length === 0 || !results[0].userid) {
+            Modal.createTrackedDialog('', '', ErrorDialog, {
+                title: _t("Unable to transfer call"),
+                description: _t("There was an error looking up the phone number"),
+            });
+            return;
+        }
+
+        await this.startTransferToMatrixID(call, results[0].userid, consultFirst);
+    }
+
+    private async startTransferToMatrixID(call: MatrixCall, destination: string, consultFirst: boolean) {
+        if (consultFirst) {
+            const dmRoomId = await ensureDMExists(MatrixClientPeg.get(), destination);
+
+            dis.dispatch({
+                action: 'place_call',
+                type: call.type,
+                room_id: dmRoomId,
+                transferee: call,
+            });
+            dis.dispatch({
+                action: 'view_room',
+                room_id: dmRoomId,
+                should_peek: false,
+                joining: false,
+            });
+        } else {
+            try {
+                await call.transfer(destination);
+            } catch (e) {
+                console.log("Failed to transfer call", e);
+                Modal.createTrackedDialog('Failed to transfer call', '', ErrorDialog, {
+                    title: _t('Transfer Failed'),
+                    description: _t('Failed to transfer call'),
+                });
+            }
+        }
+    }
+
     setActiveCallRoomId(activeCallRoomId: string) {
         logger.info("Setting call in room " + activeCallRoomId + " active");
 

src/components/structures/TabbedView.tsx

@@ -20,6 +20,7 @@ import * as React from "react";
 import { _t } from '../../languageHandler';
 import AutoHideScrollbar from './AutoHideScrollbar';
 import { replaceableComponent } from "../../utils/replaceableComponent";
+import classNames from "classnames";
 import AccessibleButton from "../views/elements/AccessibleButton";
 
 /**
@@ -37,9 +38,16 @@ export class Tab {
     }
 }
 
+export enum TabLocation {
+    LEFT = 'left',
+    TOP = 'top',
+}
+
 interface IProps {
     tabs: Tab[];
     initialTabId?: string;
+    tabLocation: TabLocation;
+    onChange?: (tabId: string) => void;
 }
 
 interface IState {
@@ -62,6 +70,10 @@ export default class TabbedView extends React.Component<IProps, IState> {
         };
     }
 
+    static defaultProps = {
+        tabLocation: TabLocation.LEFT,
+    };
+
     private _getActiveTabIndex() {
         if (!this.state || !this.state.activeTabIndex) return 0;
         return this.state.activeTabIndex;
@@ -75,6 +87,7 @@ export default class TabbedView extends React.Component<IProps, IState> {
     private _setActiveTab(tab: Tab) {
         const idx = this.props.tabs.indexOf(tab);
         if (idx !== -1) {
+            if (this.props.onChange) this.props.onChange(tab.id);
             this.setState({ activeTabIndex: idx });
         } else {
             console.error("Could not find tab " + tab.label + " in tabs");
@@ -119,8 +132,14 @@ export default class TabbedView extends React.Component<IProps, IState> {
         const labels = this.props.tabs.map(tab => this._renderTabLabel(tab));
         const panel = this._renderTabPanel(this.props.tabs[this._getActiveTabIndex()]);
 
+        const tabbedViewClasses = classNames({
+            'mx_TabbedView': true,
+            'mx_TabbedView_tabsOnLeft': this.props.tabLocation == TabLocation.LEFT,
+            'mx_TabbedView_tabsOnTop': this.props.tabLocation == TabLocation.TOP,
+        });
+
         return (
-            <div className="mx_TabbedView">
+            <div className={tabbedViewClasses}>
                 <div className="mx_TabbedView_tabLabels">
                     {labels}
                 </div>

src/components/views/context_menus/CallContextMenu.tsx

@@ -53,7 +53,7 @@ export default class CallContextMenu extends React.Component<IProps> {
     onTransferClick = () => {
         Modal.createTrackedDialog(
             'Transfer Call', '', InviteDialog, { kind: KIND_CALL_TRANSFER, call: this.props.call },
-            /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
+            /*className=*/"mx_InviteDialog_transferWrapper", /*isPriority=*/false, /*isStatic=*/true,
         );
         this.props.onFinished();
     };

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t } from '../../../languageHandler';
+import AccessibleButton from "../elements/AccessibleButton";
 import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import Field from "../elements/Field";
-import Dialpad from '../voip/DialPad';
+import DialPad from '../voip/DialPad';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends IContextMenuProps {
@@ -45,24 +45,29 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
         this.setState({ value: this.state.value + digit });
     };
 
+    onCancelClick = () => {
+        this.props.onFinished();
+    };
+
     onChange = (ev) => {
         this.setState({ value: ev.target.value });
     };
 
     render() {
         return <ContextMenu {...this.props}>
-            <div className="mx_DialPadContextMenu_header">
+            <div className="mx_DialPadContextMenuWrapper">
                 <div>
-                    <span className="mx_DialPadContextMenu_title">{_t("Dial pad")}</span>
+                    <AccessibleButton className="mx_DialPadContextMenu_cancel" onClick={this.onCancelClick} />
+                </div>
+                <div className="mx_DialPadContextMenu_header">
+                    <Field className="mx_DialPadContextMenu_dialled"
+                        value={this.state.value} autoFocus={true}
+                        onChange={this.onChange}
+                    />
+                </div>
+                <div className="mx_DialPadContextMenu_dialPad">
+                    <DialPad onDigitPress={this.onDigitPress} hasDial={false} />
                 </div>
-                <Field className="mx_DialPadContextMenu_dialled"
-                    value={this.state.value} autoFocus={true}
-                    onChange={this.onChange}
-                />
-            </div>
-            <div className="mx_DialPadContextMenu_horizSep" />
-            <div className="mx_DialPadContextMenu_dialPad">
-                <Dialpad onDigitPress={this.onDigitPress} hasDialAndDelete={false} />
             </div>
         </ContextMenu>;
     }

src/components/views/dialogs/InviteDialog.tsx

@@ -32,7 +32,6 @@ import Modal from "../../../Modal";
 import { humanizeTime } from "../../../utils/humanize";
 import createRoom, {
     canEncryptToAllUsers,
-    ensureDMExists,
     findDMForUser,
     privateShouldBeEncrypted,
 } from "../../../createRoom";
@@ -64,9 +63,14 @@ import { copyPlaintext, selectText } from "../../../utils/strings";
 import * as ContextMenu from "../../structures/ContextMenu";
 import { toRightOf } from "../../structures/ContextMenu";
 import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
+import { TransferCallPayload } from '../../../dispatcher/payloads/TransferCallPayload';
+import Field from '../elements/Field';
+import TabbedView, { Tab, TabLocation } from '../../structures/TabbedView';
+import Dialpad from '../voip/DialPad';
 import QuestionDialog from "./QuestionDialog";
 import Spinner from "../elements/Spinner";
 import BaseDialog from "./BaseDialog";
+import DialPadBackspaceButton from "../elements/DialPadBackspaceButton";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -79,11 +83,19 @@ interface IRecentUser {
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
+// NB. This dialog needs the 'mx_InviteDialog_transferWrapper' wrapper class to have the correct
+// padding on the bottom (because all modals have 24px padding on all sides), so this needs to
+// be passed when creating the modal
 export const KIND_CALL_TRANSFER = "call_transfer";
 
 const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
 const INCREMENT_ROOMS_SHOWN = 5; // Number of rooms to add when 'show more' is clicked
 
+enum TabId {
+    UserDirectory = 'users',
+    DialPad = 'dialpad',
+}
+
 // This is the interface that is expected by various components in the Invite Dialog and RoomInvite.
 // It is a bit awkward because it also matches the RoomMember class from the js-sdk with some extra support
 // for 3PIDs/email addresses.
@@ -356,6 +368,8 @@ interface IInviteDialogState {
     canUseIdentityServer: boolean;
     tryingIdentityServer: boolean;
     consultFirst: boolean;
+    dialPadValue: string;
+    currentTabId: TabId;
 
     // These two flags are used for the 'Go' button to communicate what is going on.
     busy: boolean;
@@ -407,6 +421,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             canUseIdentityServer: !!MatrixClientPeg.get().getIdentityServerUrl(),
             tryingIdentityServer: false,
             consultFirst: false,
+            dialPadValue: '',
+            currentTabId: TabId.UserDirectory,
 
             // These two flags are used for the 'Go' button to communicate what is going on.
             busy: false,
@@ -768,44 +784,32 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     };
 
     private transferCall = async () => {
-        this.convertFilter();
-        const targets = this.convertFilter();
-        const targetIds = targets.map(t => t.userId);
-        if (targetIds.length > 1) {
-            this.setState({
-                errorText: _t("A call can only be transferred to a single user."),
-            });
-        }
-
-        if (this.state.consultFirst) {
-            const dmRoomId = await ensureDMExists(MatrixClientPeg.get(), targetIds[0]);
-
-            dis.dispatch({
-                action: 'place_call',
-                type: this.props.call.type,
-                room_id: dmRoomId,
-                transferee: this.props.call,
-            });
-            dis.dispatch({
-                action: 'view_room',
-                room_id: dmRoomId,
-                should_peek: false,
-                joining: false,
-            });
-            this.props.onFinished();
-        } else {
-            this.setState({ busy: true });
-            try {
-                await this.props.call.transfer(targetIds[0]);
-                this.setState({ busy: false });
-                this.props.onFinished();
-            } catch (e) {
+        if (this.state.currentTabId == TabId.UserDirectory) {
+            this.convertFilter();
+            const targets = this.convertFilter();
+            const targetIds = targets.map(t => t.userId);
+            if (targetIds.length > 1) {
                 this.setState({
-                    busy: false,
-                    errorText: _t("Failed to transfer call"),
+                    errorText: _t("A call can only be transferred to a single user."),
                 });
+                return;
             }
+
+            dis.dispatch({
+                action: Action.TransferCallToMatrixID,
+                call: this.props.call,
+                destination: targetIds[0],
+                consultFirst: this.state.consultFirst,
+            } as TransferCallPayload);
+        } else {
+            dis.dispatch({
+                action: Action.TransferCallToPhoneNumber,
+                call: this.props.call,
+                destination: this.state.dialPadValue,
+                consultFirst: this.state.consultFirst,
+            } as TransferCallPayload);
         }
+        this.props.onFinished();
     };
 
     private onKeyDown = (e) => {
@@ -827,6 +831,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     };
 
+    private onCancel = () => {
+        this.props.onFinished([]);
+    };
+
     private updateSuggestions = async (term) => {
         MatrixClientPeg.get().searchUserDirectory({ term }).then(async r => {
             if (term !== this.state.filterText) {
@@ -962,11 +970,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     private toggleMember = (member: Member) => {
         if (!this.state.busy) {
             let filterText = this.state.filterText;
-            const targets = this.state.targets.map(t => t); // cheap clone for mutation
+            let targets = this.state.targets.map(t => t); // cheap clone for mutation
             const idx = targets.indexOf(member);
             if (idx >= 0) {
                 targets.splice(idx, 1);
             } else {
+                if (this.props.kind === KIND_CALL_TRANSFER && targets.length > 0) {
+                    targets = [];
+                }
                 targets.push(member);
                 filterText = ""; // clear the filter when the user accepts a suggestion
             }
@@ -1189,6 +1200,11 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     }
 
     private renderEditor() {
+        const hasPlaceholder = (
+            this.props.kind == KIND_CALL_TRANSFER &&
+            this.state.targets.length === 0 &&
+            this.state.filterText.length === 0
+        );
         const targets = this.state.targets.map(t => (
             <DMUserTile member={t} onRemove={!this.state.busy && this.removeMember} key={t.userId} />
         ));
@@ -1201,8 +1217,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 ref={this.editorRef}
                 onPaste={this.onPaste}
                 autoFocus={true}
-                disabled={this.state.busy}
+                disabled={this.state.busy || (this.props.kind == KIND_CALL_TRANSFER && this.state.targets.length > 0)}
                 autoComplete="off"
+                placeholder={hasPlaceholder ? _t("Search") : null}
             />
         );
         return (
@@ -1249,6 +1266,28 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     }
 
+    private onDialFormSubmit = ev => {
+        ev.preventDefault();
+        this.transferCall();
+    };
+
+    private onDialChange = ev => {
+        this.setState({ dialPadValue: ev.currentTarget.value });
+    };
+
+    private onDigitPress = digit => {
+        this.setState({ dialPadValue: this.state.dialPadValue + digit });
+    };
+
+    private onDeletePress = () => {
+        if (this.state.dialPadValue.length === 0) return;
+        this.setState({ dialPadValue: this.state.dialPadValue.slice(0, -1) });
+    };
+
+    private onTabChange = (tabId: TabId) => {
+        this.setState({ currentTabId: tabId });
+    };
+
     private async onLinkClick(e) {
         e.preventDefault();
         selectText(e.target);
@@ -1278,12 +1317,16 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         let helpText;
         let buttonText;
         let goButtonFn;
+        let consultConnectSection;
         let extraSection;
         let footer;
         let keySharingWarning = <span />;
 
         const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer);
 
+        const hasSelection = this.state.targets.length > 0
+            || (this.state.filterText && this.state.filterText.includes('@'));
+
         const cli = MatrixClientPeg.get();
         const userId = cli.getUserId();
         if (this.props.kind === KIND_DM) {
@@ -1421,23 +1464,116 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             }
         } else if (this.props.kind === KIND_CALL_TRANSFER) {
             title = _t("Transfer");
-            buttonText = _t("Transfer");
-            goButtonFn = this.transferCall;
-            footer = <div>
+
+            consultConnectSection = <div className="mx_InviteDialog_transferConsultConnect">
                 <label>
                     <input type="checkbox" checked={this.state.consultFirst} onChange={this.onConsultFirstChange} />
                     {_t("Consult first")}
                 </label>
+                <AccessibleButton
+                    kind="secondary"
+                    onClick={this.onCancel}
+                    className='mx_InviteDialog_transferConsultConnect_pushRight'
+                >
+                    {_t("Cancel")}
+                </AccessibleButton>
+                <AccessibleButton
+                    kind="primary"
+                    onClick={this.transferCall}
+                    className='mx_InviteDialog_transferButton'
+                    disabled={!hasSelection && this.state.dialPadValue === ''}
+                >
+                    {_t("Transfer")}
+                </AccessibleButton>
             </div>;
         } else {
             console.error("Unknown kind of InviteDialog: " + this.props.kind);
         }
 
-        const hasSelection = this.state.targets.length > 0
-            || (this.state.filterText && this.state.filterText.includes('@'));
+        const goButton = this.props.kind == KIND_CALL_TRANSFER ? null : <AccessibleButton
+            kind="primary"
+            onClick={goButtonFn}
+            className='mx_InviteDialog_goButton'
+            disabled={this.state.busy || !hasSelection}
+        >
+            {buttonText}
+        </AccessibleButton>;
+
+        const usersSection = <React.Fragment>
+            <p className='mx_InviteDialog_helpText'>{helpText}</p>
+            <div className='mx_InviteDialog_addressBar'>
+                {this.renderEditor()}
+                <div className='mx_InviteDialog_buttonAndSpinner'>
+                    {goButton}
+                    {spinner}
+                </div>
+            </div>
+            {keySharingWarning}
+            {this.renderIdentityServerWarning()}
+            <div className='error'>{this.state.errorText}</div>
+            <div className='mx_InviteDialog_userSections'>
+                {this.renderSection('recents')}
+                {this.renderSection('suggestions')}
+                {extraSection}
+            </div>
+            {footer}
+        </React.Fragment>;
+
+        let dialogContent;
+        if (this.props.kind === KIND_CALL_TRANSFER) {
+            const tabs = [];
+            tabs.push(new Tab(
+                TabId.UserDirectory, _td("User Directory"), 'mx_InviteDialog_userDirectoryIcon', usersSection,
+            ));
+
+            const backspaceButton = (
+                <DialPadBackspaceButton onBackspacePress={this.onDeletePress} />
+            );
+
+            // Only show the backspace button if the field has content
+            let dialPadField;
+            if (this.state.dialPadValue.length !== 0) {
+                dialPadField = <Field className="mx_InviteDialog_dialPadField" id="dialpad_number"
+                    value={this.state.dialPadValue}
+                    autoFocus={true}
+                    onChange={this.onDialChange}
+                    postfixComponent={backspaceButton}
+                />;
+            } else {
+                dialPadField = <Field className="mx_InviteDialog_dialPadField" id="dialpad_number"
+                    value={this.state.dialPadValue}
+                    autoFocus={true}
+                    onChange={this.onDialChange}
+                />;
+            }
+
+            const dialPadSection = <div className="mx_InviteDialog_dialPad">
+                <form onSubmit={this.onDialFormSubmit}>
+                    {dialPadField}
+                </form>
+                <Dialpad hasDial={false}
+                    onDigitPress={this.onDigitPress} onDeletePress={this.onDeletePress}
+                />
+            </div>;
+            tabs.push(new Tab(TabId.DialPad, _td("Dial pad"), 'mx_InviteDialog_dialPadIcon', dialPadSection));
+            dialogContent = <React.Fragment>
+                <TabbedView tabs={tabs} initialTabId={this.state.currentTabId}
+                    tabLocation={TabLocation.TOP} onChange={this.onTabChange}
+                />
+                {consultConnectSection}
+            </React.Fragment>;
+        } else {
+            dialogContent = <React.Fragment>
+                {usersSection}
+                {consultConnectSection}
+            </React.Fragment>;
+        }
+
         return (
             <BaseDialog
-                className={classNames("mx_InviteDialog", {
+                className={classNames({
+                    mx_InviteDialog_transfer: this.props.kind === KIND_CALL_TRANSFER,
+                    mx_InviteDialog_other: this.props.kind !== KIND_CALL_TRANSFER,
                     mx_InviteDialog_hasFooter: !!footer,
                 })}
                 hasCancel={true}
@@ -1445,30 +1581,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 title={title}
             >
                 <div className='mx_InviteDialog_content'>
-                    <p className='mx_InviteDialog_helpText'>{helpText}</p>
-                    <div className='mx_InviteDialog_addressBar'>
-                        {this.renderEditor()}
-                        <div className='mx_InviteDialog_buttonAndSpinner'>
-                            <AccessibleButton
-                                kind="primary"
-                                onClick={goButtonFn}
-                                className='mx_InviteDialog_goButton'
-                                disabled={this.state.busy || !hasSelection}
-                            >
-                                {buttonText}
-                            </AccessibleButton>
-                            {spinner}
-                        </div>
-                    </div>
-                    {keySharingWarning}
-                    {this.renderIdentityServerWarning()}
-                    <div className='error'>{this.state.errorText}</div>
-                    <div className='mx_InviteDialog_userSections'>
-                        {this.renderSection('recents')}
-                        {this.renderSection('suggestions')}
-                        {extraSection}
-                    </div>
-                    {footer}
+                    {dialogContent}
                 </div>
             </BaseDialog>
         );

src/components/views/elements/DialPadBackspaceButton.tsx

@@ -0,0 +1,31 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import AccessibleButton from "./AccessibleButton";
+
+interface IProps {
+    // Callback for when the button is pressed
+    onBackspacePress: () => void;
+}
+
+export default class DialPadBackspaceButton extends React.PureComponent<IProps> {
+    render() {
+        return <div className="mx_DialPadBackspaceButtonWrapper">
+            <AccessibleButton className="mx_DialPadBackspaceButton" onClick={this.props.onBackspacePress} />
+        </div>;
+    }
+}

src/components/views/voip/DialPad.tsx

@@ -19,16 +19,17 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const BUTTONS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
+const BUTTON_LETTERS = ['', 'ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQRS', 'TUV', 'WXYZ', '', '+', ''];
 
 enum DialPadButtonKind {
     Digit,
-    Delete,
     Dial,
 }
 
 interface IButtonProps {
     kind: DialPadButtonKind;
     digit?: string;
+    digitSubtext?: string;
     onButtonPress: (string) => void;
 }
 
@@ -42,11 +43,10 @@ class DialPadButton extends React.PureComponent<IButtonProps> {
             case DialPadButtonKind.Digit:
                 return <AccessibleButton className="mx_DialPad_button" onClick={this.onClick}>
                     {this.props.digit}
+                    <div className="mx_DialPad_buttonSubText">
+                        {this.props.digitSubtext}
+                    </div>
                 </AccessibleButton>;
-            case DialPadButtonKind.Delete:
-                return <AccessibleButton className="mx_DialPad_button mx_DialPad_deleteButton"
-                    onClick={this.onClick}
-                />;
             case DialPadButtonKind.Dial:
                 return <AccessibleButton className="mx_DialPad_button mx_DialPad_dialButton" onClick={this.onClick} />;
         }
@@ -55,7 +55,7 @@ class DialPadButton extends React.PureComponent<IButtonProps> {
 
 interface IProps {
     onDigitPress: (string) => void;
-    hasDialAndDelete: boolean;
+    hasDial: boolean;
     onDeletePress?: (string) => void;
     onDialPress?: (string) => void;
 }
@@ -65,16 +65,15 @@ export default class Dialpad extends React.PureComponent<IProps> {
     render() {
         const buttonNodes = [];
 
-        for (const button of BUTTONS) {
+        for (let i = 0; i < BUTTONS.length; i++) {
+            const button = BUTTONS[i];
+            const digitSubtext = BUTTON_LETTERS[i];
             buttonNodes.push(<DialPadButton key={button} kind={DialPadButtonKind.Digit}
-                digit={button} onButtonPress={this.props.onDigitPress}
+                digit={button} digitSubtext={digitSubtext} onButtonPress={this.props.onDigitPress}
             />);
         }
 
-        if (this.props.hasDialAndDelete) {
-            buttonNodes.push(<DialPadButton key="del" kind={DialPadButtonKind.Delete}
-                onButtonPress={this.props.onDeletePress}
-            />);
+        if (this.props.hasDial) {
             buttonNodes.push(<DialPadButton key="dial" kind={DialPadButtonKind.Dial}
                 onButtonPress={this.props.onDialPress}
             />);

src/components/views/voip/DialPadModal.tsx

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import * as React from "react";
-import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import Field from "../elements/Field";
 import DialPad from './DialPad';
@@ -23,6 +22,7 @@ import dis from '../../../dispatcher/dispatcher';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { DialNumberPayload } from "../../../dispatcher/payloads/DialNumberPayload";
 import { Action } from "../../../dispatcher/actions";
+import DialPadBackspaceButton from "../elements/DialPadBackspaceButton";
 
 interface IProps {
     onFinished: (boolean) => void;
@@ -74,22 +74,38 @@ export default class DialpadModal extends React.PureComponent<IProps, IState> {
     };
 
     render() {
+        const backspaceButton = (
+            <DialPadBackspaceButton onBackspacePress={this.onDeletePress} />
+        );
+
+        // Only show the backspace button if the field has content
+        let dialPadField;
+        if (this.state.value.length !== 0) {
+            dialPadField = <Field className="mx_DialPadModal_field" id="dialpad_number"
+                value={this.state.value}
+                autoFocus={true}
+                onChange={this.onChange}
+                postfixComponent={backspaceButton}
+            />;
+        } else {
+            dialPadField = <Field className="mx_DialPadModal_field" id="dialpad_number"
+                value={this.state.value}
+                autoFocus={true}
+                onChange={this.onChange}
+            />;
+        }
+
         return <div className="mx_DialPadModal">
+            <div>
+                <AccessibleButton className="mx_DialPadModal_cancel" onClick={this.onCancelClick} />
+            </div>
             <div className="mx_DialPadModal_header">
-                <div>
-                    <span className="mx_DialPadModal_title">{_t("Dial pad")}</span>
-                    <AccessibleButton className="mx_DialPadModal_cancel" onClick={this.onCancelClick} />
-                </div>
                 <form onSubmit={this.onFormSubmit}>
-                    <Field className="mx_DialPadModal_field" id="dialpad_number"
-                        value={this.state.value} autoFocus={true}
-                        onChange={this.onChange}
-                    />
+                    {dialPadField}
                 </form>
             </div>
-            <div className="mx_DialPadModal_horizSep" />
             <div className="mx_DialPadModal_dialPad">
-                <DialPad hasDialAndDelete={true}
+                <DialPad hasDial={true}
                     onDigitPress={this.onDigitPress}
                     onDeletePress={this.onDeletePress}
                     onDialPress={this.onDialPress}

src/dispatcher/actions.ts

@@ -118,6 +118,18 @@ export enum Action {
      */
     DialNumber = "dial_number",
 
+    /**
+     * Start a call transfer to a Matrix ID
+     * payload: TransferCallPayload
+     */
+    TransferCallToMatrixID = "transfer_call_to_matrix_id",
+
+    /**
+     * Start a call transfer to a phone number
+     * payload: TransferCallPayload
+     */
+     TransferCallToPhoneNumber = "transfer_call_to_phone_number",
+
     /**
      * Fired when CallHandler has checked for PSTN protocol support
      * payload: none

src/dispatcher/payloads/TransferCallPayload.ts

@@ -0,0 +1,33 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ActionPayload } from "../payloads";
+import { Action } from "../actions";
+import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+
+export interface TransferCallPayload extends ActionPayload {
+    action: Action.TransferCallToMatrixID | Action.TransferCallToPhoneNumber;
+    // The call to transfer
+    call: MatrixCall;
+    // Where to transfer the call. A Matrix ID if action == TransferCallToMatrixID
+    // and a phone number if action == TransferCallToPhoneNumber
+    destination: string;
+    // If true, puts the current call on hold and dials the transfer target, giving
+    // the user a button to complete the transfer when ready.
+    // If false, ends the call immediately and sends the user to the transfer
+    // destination
+    consultFirst: boolean;
+}

src/i18n/strings/en_EN.json

@@ -65,6 +65,9 @@
     "You cannot place a call with yourself.": "You cannot place a call with yourself.",
     "Unable to look up phone number": "Unable to look up phone number",
     "There was an error looking up the phone number": "There was an error looking up the phone number",
+    "Unable to transfer call": "Unable to transfer call",
+    "Transfer Failed": "Transfer Failed",
+    "Failed to transfer call": "Failed to transfer call",
     "Call in Progress": "Call in Progress",
     "A call is currently being placed!": "A call is currently being placed!",
     "Permission Required": "Permission Required",
@@ -910,7 +913,6 @@
     "Fill Screen": "Fill Screen",
     "Return to call": "Return to call",
     "%(name)s on hold": "%(name)s on hold",
-    "Dial pad": "Dial pad",
     "Unknown caller": "Unknown caller",
     "Incoming voice call": "Incoming voice call",
     "Incoming video call": "Incoming video call",
@@ -2294,7 +2296,6 @@
     "Something went wrong trying to invite the users.": "Something went wrong trying to invite the users.",
     "We couldn't invite those users. Please check the users you want to invite and try again.": "We couldn't invite those users. Please check the users you want to invite and try again.",
     "A call can only be transferred to a single user.": "A call can only be transferred to a single user.",
-    "Failed to transfer call": "Failed to transfer call",
     "Failed to find the following users": "Failed to find the following users",
     "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s": "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s",
     "Recent Conversations": "Recent Conversations",
@@ -2317,6 +2318,8 @@
     "Invited people will be able to read old messages.": "Invited people will be able to read old messages.",
     "Transfer": "Transfer",
     "Consult first": "Consult first",
+    "User Directory": "User Directory",
+    "Dial pad": "Dial pad",
     "a new master key signature": "a new master key signature",
     "a new cross-signing key signature": "a new cross-signing key signature",
     "a device cross-signing signature": "a device cross-signing signature",