Rcint 2915

.eslintrc

@@ -33,6 +33,7 @@
     "react/forbid-prop-types": 0,
     "react/require-default-props": 1,
     "jsx-a11y/no-static-element-interactions": 0,
-    "no-shadow": 0
+    "no-shadow": 0,
+    "class-methods-use-this": 0,
   }
 }

dev-server/Phone.js

@@ -45,6 +45,8 @@ import CallHistory from 'ringcentral-integration/modules/CallHistory';
 import ContactMatcher from 'ringcentral-integration/modules/ContactMatcher';
 import ActivityMatcher from 'ringcentral-integration/modules/ActivityMatcher';
 import CallLogger from 'ringcentral-integration/modules/CallLogger';
+import ConversationMatcher from 'ringcentral-integration/modules/ConversationMatcher';
+import ConversationLogger from 'ringcentral-integration/modules/ConversationLogger';
 
 import RouterInteraction from '../src/modules/RouterInteraction';
 
@@ -321,13 +323,7 @@ export default class Phone extends RcModule {
       messageStore: this.messageStore,
       getState: () => this.state.conversation,
     }));
-    this.addModule('messages', new Messages({
-      ...options,
-      alert: this.alert,
-      messageStore: this.messageStore,
-      perPage: 20,
-      getState: () => this.state.messages,
-    }));
+
     this.addModule('conference', new Conference({
       ...options,
       auth: this.auth,
@@ -386,8 +382,36 @@ export default class Phone extends RcModule {
       callMonitor: this.callMonitor,
       contactMatcher: this.contactMatcher,
       activityMatcher: this.activityMatcher,
+      logFunction: async () => {},
+      readyCheckFunction: () => true,
       getState: () => this.state.callLogger,
     }));
+    this.addModule('conversationMatcher', new ConversationMatcher({
+      storage: this.storage,
+      getState: () => this.state.conversationMatcher,
+    }));
+    this.addModule('conversationLogger', new ConversationLogger({
+      ...options,
+      storage: this.storage,
+      dateTimeFormat: this.dateTimeFormat,
+      messageStore: this.messageStore,
+      extensionInfo: this.extensionInfo,
+      contactMatcher: this.contactMatcher,
+      conversationMatcher: this.conversationMatcher,
+      tabManager: this.tabManager,
+      logFunction: async () => {},
+      readyCheckFunction: () => true,
+      getState: () => this.state.conversationLogger,
+    }));
+    this.addModule('messages', new Messages({
+      ...options,
+      alert: this.alert,
+      messageStore: this.messageStore,
+      extensionInfo: this.extensionInfo,
+      contactMatcher: this.contactMatcher,
+      conversationLogger: this.conversationLogger,
+      getState: () => this.state.messages,
+    }));
     this._reducer = combineReducers({
       accountExtension: this.accountExtension.reducer,
       accountInfo: this.accountInfo.reducer,
@@ -424,6 +448,8 @@ export default class Phone extends RcModule {
       composeText: this.composeText.reducer,
       messageStore: this.messageStore.reducer,
       conversation: this.conversation.reducer,
+      conversationMatcher: this.conversationMatcher.reducer,
+      conversationLogger: this.conversationLogger.reducer,
       messages: this.messages.reducer,
       conference: this.conference.reducer,
       activeCalls: this.activeCalls.reducer,

dev-server/containers/App/index.js

@@ -166,6 +166,7 @@ export default function App({
                   router={phone.router}
                   onLogCall={async () => { await sleep(1000); }}
                   onViewContact={() => {}}
+                  onCreateContact={() => {}}
                 />
               )} />
             <Route
@@ -209,6 +210,11 @@ export default function App({
                   messageStore={phone.messageStore}
                   dateTimeFormat={phone.dateTimeFormat}
                   contactMatcher={phone.contactMatcher}
+                  messages={phone.messages}
+                  conversationLogger={phone.conversationLogger}
+                  rateLimiter={phone.rateLimiter}
+                  connectivityMonitor={phone.connectivityMonitor}
+                  onLogConversation={async () => {sleep(1000);}}
                 />
               )} />
             <Route
@@ -217,13 +223,18 @@ export default function App({
               component={() => (
                 <MessagesPage
                   locale={phone.locale}
-                  auth={phone.auth}
+                  router={phone.router}
                   messages={phone.messages}
-                  messageStore={phone.messageStore}
-                  extensionInfo={phone.extensionInfo}
                   regionSettings={phone.regionSettings}
-                  contactMatcher={phone.contactMatcher}
                   dateTimeFormat={phone.dateTimeFormat}
+                  connectivityMonitor={phone.connectivityMonitor}
+                  rateLimiter={phone.rateLimiter}
+                  call={phone.call}
+                  conversationLogger={phone.conversationLogger}
+                  rolesAndPermissions={phone.rolesAndPermissions}
+                  onLogConversation={async () => { await sleep(1000); }}
+                  onViewContact={() => {}}
+                  onCreateContact={() => {}}
                 />
               )} />
           </Route>

package.json

@@ -78,7 +78,7 @@
     "redux-thunk": "^2.1.0",
     "ringcentral": "3.0.0",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.5.27",
+    "ringcentral-integration": "^0.6.0",
     "sass-loader": "^4.1.1",
     "source-map-loader": "^0.1.5",
     "style-loader": "^0.13.1",

src/components/ActionMenu/index.js

@@ -4,6 +4,7 @@ import Spinner from '../Spinner';
 import SlideMenu from '../SlideMenu';
 import EntityModal from '../EntityModal';
 import Button from '../Button';
+import LogButton from '../LogButton';
 import styles from './styles.scss';
 import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
 
@@ -70,52 +71,6 @@ ClickToSmsButton.defaultProps = {
   phoneNumber: undefined,
 };
 
-function LogButton({
-  className,
-  currentLocale,
-  onLogCall,
-  isLogged,
-  disableLinks,
-  isLogging,
-}) {
-  const spinner = isLogging ?
-    (
-      <div className={styles.spinnerContainer}>
-        <Spinner ringWidth={2} />
-      </div>
-    ) :
-    null;
-  return (
-    <Button
-      className={classnames(styles.log, className)}
-      onClick={onLogCall}
-      disabled={disableLinks || isLogging}
-    >
-      <span
-        className={isLogged ?
-          dynamicsFont.edit :
-          dynamicsFont.callLog
-        } />
-      {spinner}
-    </Button>
-  );
-}
-LogButton.propTypes = {
-  className: PropTypes.string,
-  onLogCall: PropTypes.func,
-  isLogged: PropTypes.bool,
-  disableLinks: PropTypes.bool,
-  isLogging: PropTypes.bool,
-  currentLocale: PropTypes.string.isRequired,
-};
-LogButton.defaultProps = {
-  className: undefined,
-  onLogCall: undefined,
-  isLogged: false,
-  disableLinks: false,
-  isLogging: false,
-};
-
 function EntityButton({
   className,
   currentLocale,
@@ -173,31 +128,35 @@ export default class ActionMenu extends Component {
     this.state = {
       entityModalVisible: false,
     };
-
-    this.openEntityModal = () => {
-      this.setState({
-        entityModalVisible: true
-      });
-    };
-    this.closeEntityModal = () => {
-      this.setState({
-        entityModalVisible: false
-      });
-    };
-    this.onCreateEnityModal = (entityType) => {
-      this.props.onCreateEntity(entityType);
-      this.closeEntityModal();
-    };
-    this.onCancelEntityModal = () => {
-      this.closeEntityModal();
-    };
+  }
+  onCreateEnityModal = (entityType) => {
+    this.props.onCreateEntity(entityType);
+    this.closeEntityModal();
+  }
+  onCancelEntityModal = () => {
+    this.closeEntityModal();
+  }
+  openEntityModal = () => {
+    this.setState({
+      entityModalVisible: true
+    });
+  }
+  closeEntityModal = () => {
+    this.setState({
+      entityModalVisible: false
+    });
+  }
+  captureClick = (e) => {
+    if (this.props.stopPropagation) {
+      e.stopPropagation();
+    }
   }
 
   render() {
     const {
       className,
       currentLocale,
-      onLogCall,
+      onLog,
       isLogged,
       isLogging,
       isCreating,
@@ -209,20 +168,21 @@ export default class ActionMenu extends Component {
       phoneNumber,
       disableLinks,
       disableClickToDial,
+      stopPropagation,
     } = this.props;
 
-    const logButton = onLogCall ?
-    (
-      <LogButton
-        className={styles.baseGroup}
-        onLogCall={onLogCall}
-        disableLinks={disableLinks}
-        isLogged={isLogged}
-        isLogging={isLogging}
-        currentLocale={currentLocale}
-      />
-    ) :
-    null;
+    const logButton = onLog ?
+      (
+        <LogButton
+          className={styles.baseGroup}
+          onLog={onLog}
+          disableLinks={disableLinks}
+          isLogged={isLogged}
+          isLogging={isLogging}
+          currentLocale={currentLocale}
+        />
+      ) :
+      null;
 
     let entityButton;
     if (hasEntity && onViewEntity) {
@@ -232,15 +192,15 @@ export default class ActionMenu extends Component {
         hasEntity={hasEntity}
         disableLinks={disableLinks}
         currentLocale={currentLocale}
-        />);
+      />);
     } else if (!hasEntity && phoneNumber && onCreateEntity) {
       entityButton = (<EntityButton
         className={styles.baseGroup}
         onCreateEntity={this.openEntityModal}
         hasEntity={hasEntity}
         disableLinks={disableLinks}
         currentLocale={currentLocale}
-        />);
+      />);
     } else {
       entityButton = null;
     }
@@ -251,7 +211,7 @@ export default class ActionMenu extends Component {
         show={this.state.entityModalVisible}
         onCreate={this.onCreateEnityModal}
         onCancel={this.onCancelEntityModal}
-        />
+      />
       ) : null;
 
     const hasBaseGroup = !!(logButton || entityButton);
@@ -283,17 +243,19 @@ export default class ActionMenu extends Component {
     if (hasSecondGroup) {
       // slide menu
       return (
-        <SlideMenu
-          className={classnames(styles.root, className)}
-          minWidth={40}
-          maxWidth={75} >
-          {clickToDialButton}
-          {clickToSmsButton}
-          {entityButton}
-          {logButton}
-          {entityModal}
-        </SlideMenu>
-
+        <div
+          onClick={this.captureClick}>
+          <SlideMenu
+            className={classnames(styles.root, className)}
+            minWidth={40}
+            maxWidth={75} >
+            {clickToDialButton}
+            {clickToSmsButton}
+            {entityButton}
+            {logButton}
+            {entityModal}
+          </SlideMenu>
+        </div>
       );
     } else if (
       !clickToDialButton &&
@@ -305,7 +267,8 @@ export default class ActionMenu extends Component {
     }
     // no slide menu
     return (
-      <div>
+      <div
+        onClick={this.captureClick} >
         <div className={classnames(styles.root, className)}>
           {clickToDialButton}
           {clickToSmsButton}
@@ -321,7 +284,7 @@ export default class ActionMenu extends Component {
 ActionMenu.propTypes = {
   className: PropTypes.string,
   currentLocale: PropTypes.string.isRequired,
-  onLogCall: PropTypes.func,
+  onLog: PropTypes.func,
   isLogged: PropTypes.bool,
   isLogging: PropTypes.bool,
   isCreating: PropTypes.bool,
@@ -333,10 +296,11 @@ ActionMenu.propTypes = {
   phoneNumber: PropTypes.string,
   disableLinks: PropTypes.bool,
   disableClickToDial: PropTypes.bool,
+  stopPropagation: PropTypes.bool,
 };
 ActionMenu.defaultProps = {
   className: undefined,
-  onLogCall: undefined,
+  onLog: undefined,
   isLogged: false,
   isLogging: false,
   isCreating: false,
@@ -348,4 +312,5 @@ ActionMenu.defaultProps = {
   phoneNumber: undefined,
   disableLinks: false,
   disableClickToDial: false,
+  stopPropagation: false,
 };

src/components/ActionMenu/styles.scss

@@ -4,6 +4,7 @@
   height: 100%;
   top: 0;
   right: 0;
+  cursor: default;
 }
 
 .baseGroup {