Merge/dynamics 1.1.1

dev-server/Phone.js

@@ -465,10 +465,12 @@ export default class Phone extends RcModule {
     this.addModule('callMonitor', new CallMonitor({
       ...options,
       accountInfo: this.accountInfo,
-      detailedPresence: this.detailedPresence,
       activeCalls: this.activeCalls,
       activityMatcher: this.activityMatcher,
+      call: this.call,
       contactMatcher: this.contactMatcher,
+      detailedPresence: this.detailedPresence,
+      storage: this.storage,
       webphone: this.webphone,
       onRinging: async () => {
         if (this.webphone._webphone) {

package.json

@@ -30,9 +30,9 @@
     "react-redux": "^5.0.1",
     "react-router": "^3.0.0",
     "react-router-redux": "^4.0.7",
-    "ringcentral": "3.1.1",
+    "ringcentral": "^3.1.2",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.0-rc14",
+    "ringcentral-integration": "^0.7.0",
     "whatwg-fetch": "^2.0.1"
   },
   "devDependencies": {
@@ -82,9 +82,9 @@
     "redux": "^3.6.0",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.1.0",
-    "ringcentral": "^3.1.1",
+    "ringcentral": "^3.1.2",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.0-rc19",
+    "ringcentral-integration": "^0.7.0",
     "sass-loader": "^6.0.5",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",

src/components/ActionMenu/index.js

@@ -148,7 +148,7 @@ export default class ActionMenu extends Component {
     });
   }
   captureClick = (e) => {
-    e.captureClick = this.props.captureClick;
+    // e.captureClick = this.props.captureClick;
     if (this.props.stopPropagation) {
       e.stopPropagation();
     }

src/components/CallItem/index.js

@@ -103,20 +103,30 @@ export default class CallItem extends Component {
     this.setState({
       selected,
     });
-    if (this.props.call.activityMatches.length > 0) {
+    if (
+      this.props.call.activityMatches.length > 0 &&
+      this.props.autoLog
+    ) {
       this.logCall({ redirect: false, selected });
     }
   }
   getInitialContactIndex(nextProps = this.props) {
     const contactMatches = this.getContactMatches(nextProps);
     const activityMatches = nextProps.call.activityMatches;
+    // console.log('getInitialContactIndex:', nextProps.call.toNumberEntity);
     for (const activity of activityMatches) {
       const index = contactMatches.findIndex(contact => (
         // TODO find a better name or mechanism...
         this.props.isLoggedContact(nextProps.call, activity, contact)
       ));
       if (index > -1) return index;
     }
+    if (nextProps.call.toNumberEntity) {
+      const index = contactMatches.findIndex(contact => (
+        contact.id === nextProps.call.toNumberEntity
+      ));
+      return index;
+    }
     return -1;
   }
   getSelectedContact = (selected = this.state.selected) => {
@@ -413,6 +423,7 @@ CallItem.propTypes = {
   // webphoneHangup: PropTypes.func,
   // webphoneResume: PropTypes.func,
   enableContactFallback: PropTypes.bool,
+  autoLog: PropTypes.bool,
 };
 
 CallItem.defaultProps = {
@@ -432,4 +443,5 @@ CallItem.defaultProps = {
   // webphoneHangup: () => null,
   // webphoneResume: () => null,
   enableContactFallback: undefined,
+  autoLog: false,
 };

src/components/CallList/index.js

@@ -40,6 +40,7 @@ function CallList({
   webphoneHangup,
   webphoneResume,
   enableContactFallback,
+  autoLog,
 }) {
   if (calls && calls.length) {
     return (
@@ -69,6 +70,7 @@ function CallList({
             webphoneHangup={webphoneHangup}
             webphoneResume={webphoneResume}
             enableContactFallback={enableContactFallback}
+            autoLog={autoLog}
           />
         ))}
       </div>
@@ -105,6 +107,7 @@ CallList.propTypes = {
   webphoneHangup: PropTypes.func,
   webphoneResume: PropTypes.func,
   enableContactFallback: PropTypes.bool,
+  autoLog: PropTypes.bool,
 };
 CallList.defaultProps = {
   className: null,
@@ -125,6 +128,7 @@ CallList.defaultProps = {
   webphoneHangup: undefined,
   webphoneResume: undefined,
   enableContactFallback: undefined,
+  autoLog: false,
 };
 
 export default CallList;

src/components/CallsPanel/index.js

@@ -35,6 +35,7 @@ export default function CallsPanel({
   webphoneHangup,
   webphoneResume,
   enableContactFallback,
+  autoLog,
 }) {
   const content = showSpinner ?
     <SpinnerOverlay /> :
@@ -62,6 +63,7 @@ export default function CallsPanel({
         webphoneHangup={webphoneHangup}
         webphoneResume={webphoneResume}
         enableContactFallback={enableContactFallback}
+        autoLog={autoLog}
       />
     );
   return (
@@ -101,6 +103,7 @@ CallsPanel.propTypes = {
   webphoneHangup: PropTypes.func,
   webphoneResume: PropTypes.func,
   enableContactFallback: PropTypes.bool,
+  autoLog: PropTypes.bool,
 };
 
 CallsPanel.defaultProps = {
@@ -122,4 +125,5 @@ CallsPanel.defaultProps = {
   webphoneHangup: undefined,
   webphoneResume: undefined,
   enableContactFallback: undefined,
+  autoLog: false,
 };

src/components/ComposeTextPanel/index.js

@@ -72,6 +72,7 @@ class ComposeTextPanel extends Component {
     };
 
     this.onTextAreaKeyDown = (e) => {
+      console.debug('onTextAreaKeyDown', e);
       if (e.key === 'Enter') {
         e.preventDefault();
         this.props.send();
@@ -141,7 +142,7 @@ class ComposeTextPanel extends Component {
                 value={this.props.messageText}
                 maxLength="1000"
                 onChange={this.onTextChange}
-                onKeyDown={this.onTextAreaKeyDown}
+                onKeyPressCapture={this.onTextAreaKeyDown}
               />
             </div>
             <div className={styles.submitField}>

src/components/ContactDropdownList/styles.scss

@@ -41,10 +41,10 @@
   }
 
   li.active {
-    color: $rc-blue;
+    color: $primary-color;
 
     .name {
-      color: $rc-blue;
+      color: $primary-color;
     }
   }
 }

src/components/ConversationMessageList/styles.scss

@@ -47,13 +47,17 @@
   min-width: 50%;
   max-width: 60%;
   text-align: left;
-  word-break: break-word;
   hyphens: auto;
   padding: 10px 15px;
   background: $sms-bubble-background-color;
   border-radius: 16px;
   min-height: 13px;
   box-sizing: content-box;
+  /* For Firefox */
+  white-space: pre-wrap;
+  word-break: break-all;
+  /* For Chrome and IE */
+  word-wrap: break-word;
 }
 
 .messageBody.inbound {

src/components/ConversationPanel/index.js

@@ -213,7 +213,7 @@ class ConversationPanel extends Component {
                 value={this.state.textValue}
                 maxLength="1000"
                 onChange={this.onTextChange}
-                onKeyDown={this.onTextAreaKeyDown}
+                onKeyPressCapture={this.onTextAreaKeyDown}
               />
             </div>
             <div className={styles.submitField}>

src/components/MessageItem/index.js

@@ -171,10 +171,10 @@ export default class MessageItem extends Component {
     }
   }
   showConversationDetail = (e) => {
-    if (e.captureClick === false) {
-      delete e.captureClick;
-      return;
-    }
+    // if (e.captureClick === false) {
+    //   delete e.captureClick;
+    //   return;
+    // }
     this.props.showConversationDetail(this.props.conversation.conversationId);
   }
 
@@ -249,6 +249,7 @@ export default class MessageItem extends Component {
           isLogging={isLogging || this.state.isLogging}
           isLogged={conversationMatches.length > 0}
           isCreating={this.state.isCreating}
+          stopPropagation
         />
       </div>
     );

src/components/MessageItem/styles.scss

@@ -36,7 +36,7 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  max-width: 200px;
+  max-width: 170px;
 }
 .contactDisplay {
   position: absolute;

src/components/MessageList/index.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import SearchInput from '../SearchInput';
-import Panel from '../Panel';
 import MessageItem from '../MessageItem';
 import styles from './styles.scss';
 import i18n from './i18n';

src/components/RecipientsInput/index.js

@@ -9,7 +9,7 @@ function SelectedRecipientItem({
   name = phoneNumber,
   onRemove,
 }) {
-  const className = phoneNumber.length > 5 ? styles.blue : null;
+  const className = phoneNumber.length > 5 ? styles.phoneNumber : styles.extension;
   return (
     <li className={className}>
       <span>{name}</span>
@@ -120,7 +120,20 @@ class RecipientsInput extends Component {
       }
     };
 
-    this.handleHotKey = (e) => {
+    this.isSplitter = (e) => {
+      if (
+        e.key === ',' || e.key === ';' || e.key === 'Enter' ||
+        (e.key === 'Unidentified' && // for Safari (FF cannot rely on keyCode...)
+        (e.keyCode === 186 || // semicolon
+        e.keyCode === 188 || // comma
+        e.keyCode === 13)) // enter
+      ) {
+        return true;
+      }
+      return false;
+    };
+    // using React SyntheticEvent to deal with cross browser issue
+    this.handleHotKey = (e: React.KeyboardEvent) => {
       if (this.state.isFocusOnInput && this.props.value.length >= 3) {
         if (e.key === 'ArrowUp') {
           this.reduceSelectedContactIndex();
@@ -134,7 +147,7 @@ class RecipientsInput extends Component {
           selectedContactIndex: 0,
         });
       }
-      if (e.key === ',' || e.key === ';' || e.key === 'Enter') {
+      if (this.isSplitter(e)) {
         e.preventDefault();
         if (this.props.value.length === 0) {
           return;

src/components/RecipientsInput/styles.scss

@@ -38,6 +38,9 @@
 .inputField {
   position: relative;
   padding-right: 20px;
+  input::-ms-clear {
+    display: none;
+  }
 }
 
 .numberInput {
@@ -54,6 +57,9 @@
     color: #A9A9A9;
   }
 }
+.numberInput::-ms-clear {
+  display: none;
+}
 
 .contactsDropdown {
   width: 100%;
@@ -67,7 +73,6 @@
   li {
     position: relative;
     color: #fff;
-    background-color: #66d17b;
     border-radius: 20px;
     font-size: 13px;
     line-height: 1;
@@ -84,12 +89,17 @@
     }
   }
 
-  .blue {
-    background-color: $rc-blue;
+  .phoneNumber {
+    background-color: $primary-color;
     opacity: 0.6;
   }
+  .extension {
+    background-color: $extension-background-color;
+  }
+
 }
 
+
 .removeReceiver {
   position: absolute;
   bottom: 4px;