Feature/forward call

dev-server/Phone.js

@@ -242,12 +242,32 @@ export default class Phone extends RcModule {
       tabManager: this.tabManager,
       getState: () => this.state.forwardingNumber,
     }));
+    reducers.forwardingNumber = this.forwardingNumber.reducer;
     this.addModule('contactMatcher', new ContactMatcher({
       ...options,
       storage: this.storage,
       getState: () => this.state.contactMatcher,
     }));
     reducers.contactMatcher = this.contactMatcher.reducer;
+    this.addModule('regionSettings', new RegionSettings({
+      ...options,
+      storage: this.storage,
+      extensionInfo: this.extensionInfo,
+      dialingPlan: this.dialingPlan,
+      alert: this.alert,
+      tabManager: this.tabManager,
+      getState: () => this.state.regionSettings,
+    }));
+    reducers.regionSettings = this.regionSettings.reducer;
+    this.addModule('numberValidate', new NumberValidate({
+      ...options,
+      client: this.client,
+      accountExtension: this.accountExtension,
+      regionSettings: this.regionSettings,
+      accountInfo: this.accountInfo,
+      getState: () => this.state.numberValidate,
+    }));
+    reducers.numberValidate = this.numberValidate.reducer;
     this.addModule('webphone', new Webphone({
       appKey: apiConfig.appKey,
       appName: 'RingCentral Widget',
@@ -261,20 +281,10 @@ export default class Phone extends RcModule {
       webphoneLogLevel: 3,
       extensionDevice: this.extensionDevice,
       globalStorage: this.globalStorage,
+      numberValidate: this.numberValidate,
       getState: () => this.state.webphone,
     }));
     reducers.webphone = this.webphone.reducer;
-    reducers.forwardingNumber = this.forwardingNumber.reducer;
-    this.addModule('regionSettings', new RegionSettings({
-      ...options,
-      storage: this.storage,
-      extensionInfo: this.extensionInfo,
-      dialingPlan: this.dialingPlan,
-      alert: this.alert,
-      tabManager: this.tabManager,
-      getState: () => this.state.regionSettings,
-    }));
-    reducers.regionSettings = this.regionSettings.reducer;
     this.addModule('callingSettings', new CallingSettings({
       ...options,
       alert: this.alert,
@@ -289,15 +299,6 @@ export default class Phone extends RcModule {
       getState: () => this.state.callingSettings,
     }));
     reducers.callingSettings = this.callingSettings.reducer;
-    this.addModule('numberValidate', new NumberValidate({
-      ...options,
-      client: this.client,
-      accountExtension: this.accountExtension,
-      regionSettings: this.regionSettings,
-      accountInfo: this.accountInfo,
-      getState: () => this.state.numberValidate,
-    }));
-    reducers.numberValidate = this.numberValidate.reducer;
     this.addModule('call', new Call({
       ...options,
       alert: this.alert,

dev-server/containers/App/index.js

@@ -43,6 +43,7 @@ export default function App({
               <ActiveCallPage
                 locale={phone.locale}
                 webphone={phone.webphone}
+                forwardingNumber={phone.forwardingNumber}
                 regionSettings={phone.regionSettings}
                 router={phone.router}
                 contactMatcher={phone.contactMatcher}

docs/src/app/pages/Components/IncomingCallPad/Demo.js

@@ -7,7 +7,12 @@ props.answer = () => null;
 props.reject = () => null;
 props.toVoiceMail = () => null;
 props.currentLocale = 'en-US';
-
+props.forwardingNumbers = [{
+  id: '123',
+  label: 'Mobile',
+  phoneNumber: '12345678',
+}];
+props.onForward = () => null;
 /**
  * A example of `IncomingCallPad`
  */

docs/src/app/pages/Components/IncomingCallPanel/Demo.js

@@ -17,6 +17,12 @@ props.phoneNumber = '1234567890';
 props.selectedMatcherIndex = 0;
 props.onSelectMatcherName = () => null;
 props.onBackButtonClick = () => null;
+props.forwardingNumbers = [{
+  id: '123',
+  label: 'Mobile',
+  phoneNumber: '12345678',
+}];
+props.onForward = () => null;
 /**
  * A example of `IncomingCallPanel`
  */

src/components/CircleButton/styles.scss

@@ -24,8 +24,8 @@
   fill: transparent;
   stroke-width: 10;
   font-weight: 100;
-  stroke: $primary-color;
-  opacity: 0.3;
+  stroke: $primary-color-highlight;
+  opacity: 0.9;
 }
 
 .noBorder {
@@ -38,7 +38,7 @@
 
   &:hover {
     .circle {
-      opacity: 0.5;
+      stroke: $primary-color-highlight-solid;
     }
     .noBorder {
       stroke: transparent;

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

@@ -0,0 +1,5 @@
+export default {
+  forward: 'Forward',
+  cancel: 'Cancel',
+  customNumber: 'Custom number'
+};

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

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

src/components/ForwardForm/index.js

@@ -0,0 +1,208 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import isBlank from 'ringcentral-integration/lib/isBlank';
+
+import TextInput from '../TextInput';
+import Button from '../Button';
+
+import styles from './styles.scss';
+import i18n from './i18n';
+
+const cleanRegex = /[^\d+*-]/g;
+
+function ForwardNumbers({
+  numbers,
+  onSelect,
+  selected,
+  formatPhone,
+}) {
+  return (
+    <div className={styles.numbers}>
+      {
+        numbers.map((number, index) => (
+          <div
+            key={number.id}
+            className={
+              classnames(styles.number, (index === selected ? styles.active : null))
+            }
+            onClick={() => onSelect(index)}
+          >
+            <span className={styles.label}>{number.label}</span>
+            <span className={styles.colon}>:</span>
+            <span>{formatPhone(number.phoneNumber)}</span>
+          </div>
+        ))
+      }
+    </div>
+  );
+}
+
+ForwardNumbers.propTypes = {
+  numbers: PropTypes.array.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  selected: PropTypes.number.isRequired,
+  formatPhone: PropTypes.func.isRequired,
+};
+
+export default class ForwardForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedIndex: 0,
+      customValue: '',
+      handling: false,
+    };
+
+    this.filter = value => value.replace(cleanRegex, '');
+    this.onCustomValueChange = (e) => {
+      const value = e.currentTarget.value;
+      const cleanValue = this.filter(value);
+      this.setState({
+        customValue: cleanValue,
+      });
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(cleanValue);
+      }
+    };
+
+    this.onSelect = (index) => {
+      this.setState({
+        selectedIndex: index,
+      });
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(this.getValue());
+      }
+    };
+
+    this.onForward = async () => {
+      this.setState({
+        handling: true,
+      });
+      const result = await this.props.onForward(this.getValue());
+      if (!this._mounted) {
+        return;
+      }
+      this.setState({
+        handling: false,
+      });
+      if (result) {
+        this.props.onCancel();
+      }
+    };
+
+    this.onSelectCustomNumber = () => {
+      this.onSelect(this.props.forwardingNumbers.length);
+      if (this.customInput && this.customInput.input) {
+        setTimeout(() => {
+          this.customInput.input.focus();
+        }, 100);
+      }
+    };
+  }
+
+  componentDidMount() {
+    this._mounted = true;
+    this.focusInput();
+  }
+
+  componentWillUnmount() {
+    this._mounted = false;
+  }
+
+  getValue() {
+    if (this.state.selectedIndex < this.props.forwardingNumbers.length) {
+      const forwardingNumber = this.props.forwardingNumbers[this.state.selectedIndex];
+      return (
+        forwardingNumber && forwardingNumber.phoneNumber
+      );
+    }
+    return this.state.customValue;
+  }
+
+  focusInput() {
+    if (
+      this.state.selectedIndex === this.props.forwardingNumbers.length &&
+      this.customInput &&
+      this.customInput.input
+    ) {
+      this.customInput.input.focus();
+    }
+  }
+
+  render() {
+    const {
+      className,
+      onCancel,
+      currentLocale,
+      forwardingNumbers,
+      formatPhone,
+    } = this.props;
+    const value = this.getValue();
+    const disableButton = isBlank(value) && !this.state.handling;
+    return (
+      <div className={classnames(styles.root, className)}>
+        <ForwardNumbers
+          formatPhone={formatPhone}
+          numbers={forwardingNumbers}
+          onSelect={this.onSelect}
+          selected={this.state.selectedIndex}
+        />
+        <div
+          className={
+            classnames(
+              styles.custromNumber,
+              this.state.selectedIndex === forwardingNumbers.length ? styles.active : null
+            )
+          }
+          onClick={this.onSelectCustomNumber}
+        >
+          <div className={styles.customLabel}>
+            {i18n.getString('customNumber', currentLocale)}
+          </div>
+          <TextInput
+            ref={(input) => { this.customInput = input; }}
+            filter={this.filter}
+            className={styles.customInput}
+            value={this.state.customValue}
+            onChange={this.onCustomValueChange}
+          />
+        </div>
+        <div className={styles.buttonGroup}>
+          <Button
+            className={styles.cancelButton}
+            onClick={onCancel}
+          >
+            {i18n.getString('cancel', currentLocale)}
+          </Button>
+          <Button
+            className={
+              classnames(styles.forwardButton, disableButton ? styles.disabled : null)
+            }
+            onClick={this.onForward}
+            disabled={disableButton}
+          >
+            <span className={styles.buttonText}>
+              {i18n.getString('forward', currentLocale)}
+            </span>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+ForwardForm.propTypes = {
+  className: PropTypes.string,
+  onCancel: PropTypes.func.isRequired,
+  currentLocale: PropTypes.string.isRequired,
+  forwardingNumbers: PropTypes.array.isRequired,
+  formatPhone: PropTypes.func.isRequired,
+  onForward: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
+};
+
+ForwardForm.defaultProps = {
+  className: null,
+  onChange: undefined,
+};