Add blind transfer to call control

package.json

@@ -84,7 +84,7 @@
     "redux-thunk": "^2.1.0",
     "ringcentral": "^3.1.2",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.1",
+    "ringcentral-integration": "^0.7.4",
     "sass-loader": "^6.0.5",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",

src/components/ActiveCallDialPad/styles.scss

@@ -49,7 +49,9 @@ $input-height: 30px;
 }
 
 .stopButton {
-  background: #ff4646;
+  circle {
+    fill: #ff4646;
+  }
   g, path {
     fill: #ffffff;
   }

src/components/ActiveCallPad/index.js

@@ -95,7 +95,7 @@ export default function ActiveCallPad(props) {
         </div>
         <div className={styles.buttonRow}>
           <ActiveCallButton
-            onClick={() => null}
+            onClick={props.onToggleTransferPanel}
             title={i18n.getString('transfer', props.currentLocale)}
             icon={TransferIcon}
             className={styles.callButton}
@@ -139,6 +139,7 @@ ActiveCallPad.propTypes = {
   onShowKeyPad: PropTypes.func.isRequired,
   onAdd: PropTypes.func.isRequired,
   onShowFlipPanel: PropTypes.func.isRequired,
+  onToggleTransferPanel: PropTypes.func.isRequired,
   flipNumbers: PropTypes.array.isRequired,
 };
 

src/components/ActiveCallPanel/index.js

@@ -111,6 +111,7 @@ function ActiveCallPanel({
   hangup,
   onAdd,
   onShowFlipPanel,
+  onToggleTransferPanel,
   children,
   showContactDisplayPlaceholder,
   brand,
@@ -160,6 +161,7 @@ function ActiveCallPanel({
           hangup={hangup}
           onAdd={onAdd}
           onShowFlipPanel={onShowFlipPanel}
+          onToggleTransferPanel={onToggleTransferPanel}
           flipNumbers={flipNumbers}
         />
         {children}
@@ -199,6 +201,7 @@ ActiveCallPanel.propTypes = {
   showContactDisplayPlaceholder: PropTypes.bool,
   onShowFlipPanel: PropTypes.func,
   flipNumbers: PropTypes.array,
+  onToggleTransferPanel: PropTypes.func,
 };
 
 ActiveCallPanel.defaultProps = {
@@ -213,6 +216,7 @@ ActiveCallPanel.defaultProps = {
   showContactDisplayPlaceholder: true,
   flipNumbers: [],
   onShowFlipPanel: () => null,
+  onToggleTransferPanel: () => null,
 };
 
 export default ActiveCallPanel;

src/components/CallCtrlPanel/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import ActiveCallDialPad from '../ActiveCallDialPad';
 import ActiveCallPanel from '../ActiveCallPanel';
 import FlipPanel from '../FlipPanel';
+import TransferPanel from '../TransferPanel';
 
 class CallCtrlPanel extends Component {
   constructor(props) {
@@ -36,6 +37,12 @@ class CallCtrlPanel extends Component {
         isShowFlipPanel: false
       });
     };
+
+    this.toggleTransferPanel = () => {
+      this.setState(prevState => ({
+        isShowTransferPanel: !prevState.isShowTransferPanel
+      }));
+    };
   }
 
   render() {
@@ -62,6 +69,16 @@ class CallCtrlPanel extends Component {
         />
       );
     }
+    if (this.state.isShowTransferPanel) {
+      return (
+        <TransferPanel
+          transfer={this.props.transfer}
+          currentLocale={this.props.currentLocale}
+          toggleTransferPanel={this.toggleTransferPanel}
+          isOnTransfer={this.props.isOnTransfer}
+        />
+      );
+    }
     return (
       <ActiveCallPanel
         backButtonLabel={this.props.backButtonLabel}
@@ -94,6 +111,7 @@ class CallCtrlPanel extends Component {
         brand={this.props.brand}
         showContactDisplayPlaceholder={this.props.showContactDisplayPlaceholder}
         onShowFlipPanel={this.showFlipPanel}
+        onToggleTransferPanel={this.toggleTransferPanel}
         flipNumbers={this.props.flipNumbers}
       >
         {this.props.children}
@@ -113,6 +131,7 @@ CallCtrlPanel.propTypes = {
   isOnMute: PropTypes.bool,
   isOnHold: PropTypes.bool,
   isOnFlip: PropTypes.bool,
+  isOnTransfer: PropTypes.bool,
   flipNumbers: PropTypes.array,
   recordStatus: PropTypes.string.isRequired,
   onMute: PropTypes.func.isRequired,
@@ -124,6 +143,7 @@ CallCtrlPanel.propTypes = {
   onAdd: PropTypes.func.isRequired,
   hangup: PropTypes.func.isRequired,
   flip: PropTypes.func.isRequired,
+  transfer: PropTypes.func.isRequired,
   onBackButtonClick: PropTypes.func.isRequired,
   onKeyPadChange: PropTypes.func.isRequired,
   formatPhone: PropTypes.func.isRequired,
@@ -142,7 +162,7 @@ CallCtrlPanel.defaultProps = {
   startTime: null,
   isOnMute: false,
   isOnHold: false,
-  isOnRecord: false,
+  isOnTransfer: false,
   isOnFlip: false,
   flipNumbers: [],
   phoneNumber: null,

src/components/TransferPanel/i18n/en-US.js

@@ -0,0 +1,5 @@
+export default {
+  to: 'To:',
+  transferTo: 'Transfer to',
+  blindTransfer: 'Transfer'
+};

src/components/TransferPanel/i18n/index.js

@@ -0,0 +1,4 @@
+import I18n from 'ringcentral-integration/lib/I18n';
+import loadLocale from './loadLocale';
+
+export default new I18n(loadLocale);

src/components/TransferPanel/i18n/loadLocale.js

@@ -0,0 +1 @@
+/* loadLocale */

src/components/TransferPanel/index.js

@@ -0,0 +1,98 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import DialPad from '../DialPad';
+import BackHeader from '../BackHeader';
+import ActiveCallButton from '../ActiveCallButton';
+import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
+import TransferIcon from '../../assets/images/Transfer.svg';
+import styles from './styles.scss';
+import i18n from './i18n';
+
+export default class TransferPanel extends PureComponent {
+  static propTypes = {
+    transfer: PropTypes.func.isRequired,
+    currentLocale: PropTypes.string.isRequired,
+    toggleTransferPanel: PropTypes.func.isRequired,
+    isOnTransfer: PropTypes.bool.isRequired
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+    };
+  }
+
+  onButtonOutput = (key) => {
+    this.setState((preState) => {
+      const value = preState.value + key;
+      return { value };
+    });
+  }
+
+  handleChange = (event) => {
+    this.setState({ value: event.target.value });
+  }
+
+  clearText = () => {
+    this.setState({
+      value: ''
+    });
+  }
+
+  transfer = () => {
+    this.props.transfer(this.state.value);
+  }
+
+  render() {
+    const showClearButton = this.state.value === '' ? { display: 'none' } : { display: 'block' };
+    const isButtonDisabled = this.state.value === '' || this.props.isOnTransfer;
+    return (
+      <div className={styles.root}>
+        <BackHeader
+          onBackClick={this.props.toggleTransferPanel}
+          backButton={(
+            <span className={styles.backButton}>
+              <i className={classnames(dynamicsFont.arrow, styles.backIcon)} />
+            </span>
+          )}
+          buttons={[]}
+        >
+          {i18n.getString('transferTo', this.props.currentLocale)}
+        </BackHeader>
+        <div className={styles.dialInput}>
+          <label>
+            {i18n.getString('to', this.props.currentLocale)}
+          </label>
+          <input
+            className={styles.input}
+            onChange={this.handleChange}
+            value={this.state.value}
+          />
+          <span
+            style={showClearButton}
+            className={classnames(styles.clear, dynamicsFont.clear)}
+            onClick={this.clearText}
+          />
+        </div>
+        <div className={styles.padContainer}>
+          <DialPad
+            className={styles.dialPad}
+            onButtonOutput={this.onButtonOutput}
+          />
+          <div className={styles.buttonRow}>
+            <ActiveCallButton
+              onClick={this.transfer}
+              className={styles.button}
+              icon={TransferIcon}
+              title={i18n.getString('blindTransfer', this.props.currentLocale)}
+              disabled={isButtonDisabled}
+              showBorder
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/TransferPanel/styles.scss

@@ -0,0 +1,90 @@
+@import '../../lib/commonStyles/colors';
+@import '../../lib/commonStyles/full-size';
+@import '../../lib/commonStyles/fonts';
+
+$input-height: 30px;
+
+.root {
+  @include full-size;
+  box-sizing: border-box;
+}
+
+.dialInput {
+  height: $input-height;
+  box-sizing: content-box;
+  width: calc(100% - 30px);
+  border: 0px;
+  margin-bottom: 5px;
+  padding: 5px 0;
+  margin: 5px 20px;
+  min-width: 100px;
+  label {
+    color: $darkergray;
+  }
+  input {
+    @include secondary-font;
+    box-sizing: content-box;
+    display: inline-block;
+    text-align: left;
+    padding: 0;
+    outline: 0;
+    height: 100%;
+    width: calc(100% - 55px);
+    margin-left: 5%;
+    background-color: transparent;
+    border: none;
+    font-size:15px;
+    color: $lightblack;
+  }
+  .input::-ms-clear {
+    display: none;
+  }
+}
+
+.padContainer {
+  height: calc(100% - #{$input-height});
+  padding: 0 10px;
+}
+
+.dialPad {
+  height: 65%;
+}
+
+.button {
+  width: 30%;
+  text-align: center;
+  padding: 2px;
+}
+
+.buttonRow {
+  text-align: center;
+  height: 20%;
+}
+
+.backButton {
+  color: $lightblack;
+
+  .backIcon {
+    display: inline-block;
+    position: absolute;
+    transform: rotate(90deg);
+    top: 5px;
+    left: 10px;
+  }
+  .backLabel {
+    display: inline-block;
+    width: 79px;
+    font-size: 14px;
+  }
+}
+.clear {
+  position: absolute;
+  right: 25px;
+  margin-top: -24px;
+  cursor: pointer;
+  font-size: 18px;
+  color: $grey-light;
+  &:hover {
+    color: $rc-blue;
+  }
+}

src/components/WebphoneAlert/i18n/en-US.js

@@ -12,5 +12,6 @@ export default {
   [webphoneErrors.holdError]: 'Call cannot be hold at the moment.',
   [webphoneErrors.flipError]: 'Cannot flip the call. Please try again later.',
   [webphoneErrors.recordError]: 'You cannot record the call at the moment. Error code: {errorCode}',
-  [webphoneErrors.recordDisabled]: 'Sorry, your account does not have the feature to record a call. Please contact your account administrator.'
+  [webphoneErrors.recordDisabled]: 'Sorry, your account does not have the feature to record a call. Please contact your account administrator.',
+  [webphoneErrors.transferError]: 'Cannot transfer the call. Please try again later.'
 };

src/components/WebphoneAlert/index.js

@@ -37,5 +37,6 @@ WebphoneAlert.handleMessage = ({ message }) => (
   (message === webphoneErrors.holdError) ||
   (message === webphoneErrors.flipError) ||
   (message === webphoneErrors.recordError) ||
-  (message === webphoneErrors.recordDisabled)
+  (message === webphoneErrors.recordDisabled) ||
+  (message === webphoneErrors.transferError)
 );