Call control flip (#324)

* add flip panel

* adjust ui

* add call flip

* adjust indentation

* add cursor style

* change key to id

* when user confirm to flip then user cannot select flip number

* adjust

Author: sophiewu2333

dev-server/containers/App/index.js

@@ -192,6 +192,7 @@ export default function App({
                   contactMatcher={phone.contactMatcher}
                   webphone={phone.webphone}
                   regionSettings={phone.regionSettings}
+                  forwardingNumber={phone.forwardingNumber}
                   showContactDisplayPlaceholder={false}
                   onAdd={() => {
                     phone.router.push('/');

src/components/ActiveCallPad/index.js

@@ -40,6 +40,7 @@ export default function ActiveCallPad(props) {
   const onRecordClicked = props.isOnRecord ?
     props.onStopRecord :
     props.onRecord;
+  const disabledFlip = props.flipNumbers.length === 0;
   return (
     <div className={classnames(styles.root, props.className)}>
       <div className={styles.callCtrlButtonGroup}>
@@ -98,11 +99,11 @@ export default function ActiveCallPad(props) {
             className={styles.callButton}
           />
           <ActiveCallButton
-            onClick={props.isOnHold ? () => {} : () => {}}
+            onClick={(disabledFlip || props.isOnHold) ? () => {} : props.onShowFlipPanel}
             title={i18n.getString('flip', props.currentLocale)}
             icon={FlipIcon}
             className={styles.callButton}
-            disabled={props.isOnHold}
+            disabled={disabledFlip || props.isOnHold}
           />
         </div>
       </div>
@@ -135,6 +136,8 @@ ActiveCallPad.propTypes = {
   hangup: PropTypes.func.isRequired,
   onShowKeyPad: PropTypes.func.isRequired,
   onAdd: PropTypes.func.isRequired,
+  onShowFlipPanel: PropTypes.func.isRequired,
+  flipNumbers: PropTypes.array.isRequired,
 };
 
 ActiveCallPad.defaultProps = {

src/components/ActiveCallPanel/index.js

@@ -110,9 +110,11 @@ function ActiveCallPanel({
   onShowKeyPad,
   hangup,
   onAdd,
+  onShowFlipPanel,
   children,
   showContactDisplayPlaceholder,
   brand,
+  flipNumbers
 }) {
   return (
     <div className={styles.root}>
@@ -157,6 +159,8 @@ function ActiveCallPanel({
           onShowKeyPad={onShowKeyPad}
           hangup={hangup}
           onAdd={onAdd}
+          onShowFlipPanel={onShowFlipPanel}
+          flipNumbers={flipNumbers}
         />
         {children}
       </Panel>
@@ -193,6 +197,8 @@ ActiveCallPanel.propTypes = {
   backButtonLabel: PropTypes.string,
   brand: PropTypes.string,
   showContactDisplayPlaceholder: PropTypes.bool,
+  onShowFlipPanel: PropTypes.func.isRequired,
+  flipNumbers: PropTypes.array.isRequired,
 };
 
 ActiveCallPanel.defaultProps = {
@@ -206,6 +212,7 @@ ActiveCallPanel.defaultProps = {
   backButtonLabel: 'Active Calls',
   brand: 'RingCentral',
   showContactDisplayPlaceholder: true,
+  flipNumbers: [],
 };
 
 export default ActiveCallPanel;

src/components/CallCtrlPanel/index.js

@@ -3,12 +3,14 @@ import PropTypes from 'prop-types';
 
 import ActiveCallDialPad from '../ActiveCallDialPad';
 import ActiveCallPanel from '../ActiveCallPanel';
+import FlipPanel from '../FlipPanel';
 
 class CallCtrlPanel extends Component {
   constructor(props) {
     super(props);
     this.state = {
       isShowKeyPad: false,
+      isShowFlipPanel: false,
     };
 
     this.hiddenKeyPad = () => {
@@ -22,6 +24,18 @@ class CallCtrlPanel extends Component {
         isShowKeyPad: true,
       });
     };
+
+    this.showFlipPanel = () => {
+      this.setState({
+        isShowFlipPanel: true
+      });
+    };
+
+    this.hideFlipPanel = () => {
+      this.setState({
+        isShowFlipPanel: false
+      });
+    };
   }
 
   render() {
@@ -35,6 +49,19 @@ class CallCtrlPanel extends Component {
         />
       );
     }
+    if (this.state.isShowFlipPanel) {
+      return (
+        <FlipPanel
+          isOnFlip={this.props.isOnFlip}
+          flipNumbers={this.props.flipNumbers}
+          currentLocale={this.props.currentLocale}
+          formatPhone={this.props.formatPhone}
+          hideFlipPanel={this.hideFlipPanel}
+          flip={this.props.flip}
+          hangup={this.props.hangup}
+        />
+      );
+    }
     return (
       <ActiveCallPanel
         backButtonLabel={this.props.backButtonLabel}
@@ -66,6 +93,8 @@ class CallCtrlPanel extends Component {
         avatarUrl={this.props.avatarUrl}
         brand={this.props.brand}
         showContactDisplayPlaceholder={this.props.showContactDisplayPlaceholder}
+        onShowFlipPanel={this.showFlipPanel}
+        flipNumbers={this.props.flipNumbers}
       >
         {this.props.children}
       </ActiveCallPanel>
@@ -84,6 +113,8 @@ CallCtrlPanel.propTypes = {
   isOnMute: PropTypes.bool,
   isOnHold: PropTypes.bool,
   isOnRecord: PropTypes.bool,
+  isOnFlip: PropTypes.bool,
+  flipNumbers: PropTypes.array,
   onMute: PropTypes.func.isRequired,
   onUnmute: PropTypes.func.isRequired,
   onHold: PropTypes.func.isRequired,
@@ -92,6 +123,7 @@ CallCtrlPanel.propTypes = {
   onStopRecord: PropTypes.func.isRequired,
   onAdd: PropTypes.func.isRequired,
   hangup: PropTypes.func.isRequired,
+  flip: PropTypes.func.isRequired,
   onBackButtonClick: PropTypes.func.isRequired,
   onKeyPadChange: PropTypes.func.isRequired,
   formatPhone: PropTypes.func.isRequired,
@@ -111,6 +143,8 @@ CallCtrlPanel.defaultProps = {
   isOnMute: false,
   isOnHold: false,
   isOnRecord: false,
+  isOnFlip: false,
+  flipNumbers: [],
   phoneNumber: null,
   children: undefined,
   avatarUrl: null,

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

@@ -0,0 +1,3 @@
+export default {
+  flipHeader: 'Flip call to...',
+};

src/components/FlipPanel/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/FlipPanel/i18n/loadLocale.js

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

src/components/FlipPanel/index.js

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import BackHeader from '../BackHeader';
+import RadioButtonGroup from '../RadioBtnGroup';
+import CircleButton from '../CircleButton';
+import FlipIcon from '../../assets/images/Flip.svg';
+import EndIcon from '../../assets/images/End.svg';
+import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
+import styles from './styles.scss';
+import i18n from './i18n';
+
+export default class FlipPanel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      flipValue: '',
+    };
+    this.onRadioSelect = (value) => {
+      this.setState({
+        flipValue: value,
+      });
+    };
+    this.flip = () => {
+      this.props.flip(this.state.flipValue);
+    };
+  }
+  render() {
+    return (
+      <div className={styles.root}>
+        <BackHeader
+          onBackClick={this.props.isOnFlip ? () => {} : this.props.hideFlipPanel}
+          backButton={(
+            <span className={styles.backButton}>
+              {
+                this.props.isOnFlip ? null :
+                <i className={classnames(dynamicsFont.arrow, styles.backIcon)} />
+              }
+            </span>
+          )}
+          buttons={[]}
+        >
+          {i18n.getString('flipHeader', this.props.currentLocale)}
+        </BackHeader>
+        <div className={styles.flipContainer}>
+          <RadioButtonGroup
+            className={styles.radioGroup}
+            radioOptions={this.props.flipNumbers}
+            disabled={this.props.isOnFlip}
+            formatPhone={this.props.formatPhone}
+            onRadioSelect={this.onRadioSelect}
+          />
+          <div className={styles.buttonGroup}>
+            <div className={styles.button}>
+              <CircleButton
+                className={this.props.isOnFlip ? styles.buttonDisabled : styles.flipButton}
+                iconClassName={styles.flipIcon}
+                onClick={this.props.isOnFlip ? () => {} : this.flip}
+                icon={FlipIcon}
+                showBorder
+              />
+            </div>
+            <div className={styles.button}>
+              <CircleButton
+                className={styles.hangupButton}
+                iconClassName={styles.hangupIcon}
+                onClick={this.props.hangup}
+                icon={EndIcon}
+                showBorder={false}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FlipPanel.propTypes = {
+  isOnFlip: PropTypes.bool.isRequired,
+  flipNumbers: PropTypes.array.isRequired,
+  currentLocale: PropTypes.string.isRequired,
+  formatPhone: PropTypes.func.isRequired,
+  hideFlipPanel: PropTypes.func.isRequired,
+  flip: PropTypes.func.isRequired,
+  hangup: PropTypes.func.isRequired,
+};

src/components/FlipPanel/styles.scss

@@ -0,0 +1,87 @@
+@import '../../lib/commonStyles/colors';
+@import '../../lib/commonStyles/full-size';
+@import '../../lib/commonStyles/fonts';
+
+.root {
+  @include full-size;
+  box-sizing: border-box;
+}
+
+.backButton {
+  color: $lightblack;
+
+  .backIcon {
+    display: inline-block;
+    transform: rotate(90deg);
+    margin-top: 5px;
+    margin-left: 10px;
+  }
+  .backLabel {
+    display: inline-block;
+    width: 79px;
+    font-size: 14px;
+  }
+}
+
+.flipContainer {
+  width: 100%;
+  height: 100%;
+}
+
+.radioGroup{
+  height: 60%;
+  overflow-y: scroll;
+}
+
+.buttonGroup {
+  height: 35%;
+  margin-top: 5%;
+  text-align: center;
+
+  .button{
+    display: inline-block;
+    width: calc(100% / 6);
+    height: 33%;
+    padding: 0 20px 0 20px;
+  }
+
+  .flipButton {
+    circle {
+      stroke: solid 1px #0073ae;
+      opacity: 0.24;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .buttonDisabled {
+    circle {
+      fill: $lightgray;
+      stroke: $gray;
+    }
+    path {
+      fill: $primary-color-highlight-solid;
+    }
+    g {
+      cursor: default;
+    }
+  }
+
+  .hangupButton {
+    circle {
+      fill: #0073ae;
+      opacity: 0.45;
+      &:hover {
+        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
+        opacity: 1;
+      }
+    }
+  }
+
+  .hangupIcon {
+    path {
+      fill: $line-background-color
+    }
+  }
+}