feat: meeting schedule api and dialer/meeting status events (#356)

* feat: add events of dialer and meeting status, meeting schedule api

* add docs

* fix dialer status issue

Author: embbnux

docs/control-widget.md

@@ -217,3 +217,58 @@ Remove:
 ```
 RCAdapter.dispose();
 ```
+
+## Navigate To
+
+Navigate to path:
+
+```js
+document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
+  type: 'rc-adapter-navigate-to',
+  path: '/messages', // '/meeting', '/dialer', '//history', '/settings'
+}, '*');
+```
+
+## Schedule a meeting
+
+```js
+// meeting info
+const meetingBody = {
+  topic: "Embbnux Ji's Meeting",
+  meetingType: "Scheduled",
+  password: "",
+  schedule: {
+    startTime: 1583312400368,
+    durationInMinutes: 60,
+    timeZone: {
+      id: "1"
+    }
+  },
+  allowJoinBeforeHost: false,
+  startHostVideo: false,
+  startParticipantsVideo: false,
+  audioOptions: [
+    "Phone",
+    "ComputerAudio"
+  ]
+};
+
+// send a request to schedule meeting
+const requestId = Date.now().toString();
+document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
+  type: 'rc-adapter-message-request',
+  requestId: requestId,
+  path: '/schedule-meeting',
+  body: meetingBody,
+}, '*');
+
+// listen response
+window.addEventListener('message', function (e) {
+  var data = e.data;
+  if (data && data.type === 'rc-adapter-message-response') {
+    if (data.responseId === requestId) {
+      console.log(data.response);
+    }
+  }
+});
+```

docs/widget-event.md

@@ -201,3 +201,45 @@ window.addEventListener('message', (e) => {
   }
 });
 ```
+
+## Dialer status event
+
+Before we use [GoToDial](control-widget.md#go-to-dial-and-start-a-call) API, we need to check dialer status.
+
+Get dialer status:
+
+```js
+window.addEventListener('message', (e) => {
+  const data = e.data;
+  if (data) {
+    switch (data.type) {
+      case 'rc-dialer-status-notify':
+        // get dialer status from widget
+        console.log('rc-dialer-status-notify:', data.ready);
+        break;
+      default:
+        break;
+    }
+  }
+});
+```
+
+## Meeting status event
+
+Get meeting status and permission:
+
+```js
+window.addEventListener('message', (e) => {
+  const data = e.data;
+  if (data) {
+    switch (data.type) {
+      case 'rc-meeting-status-notify':
+        // get meeting status and permission from widget
+        console.log('rc-meeting-status-notify:', data.ready, data.permission);
+        break;
+      default:
+        break;
+    }
+  }
+});
+```

src/lib/Adapter/index.js

@@ -4,6 +4,7 @@ import url from 'url';
 
 import parseUri from '../parseUri';
 import messageTypes from './messageTypes';
+import requestWithPostMessage from '../requestWithPostMessage';
 
 import styles from './styles.scss';
 import Notification from '../notification';
@@ -151,10 +152,10 @@ class Adapter extends AdapterCore {
           console.log('rc-login-status-notify:', data.loggedIn, data.loginNumber);
           break;
         case 'rc-calling-settings-notify':
-          console.log('rc-calling-settings-notify:', data);
+          console.log('rc-calling-settings-notify:', data.callWith, data.callingMode);
           break;
         case 'rc-region-settings-notify':
-          console.log('rc-region-settings-notify:', data);
+          console.log('rc-region-settings-notify:', data.countryCode, data.areaCode);
           break;
         case 'rc-active-call-notify':
           console.log('rc-active-call-notify:', data.call);
@@ -175,6 +176,12 @@ class Adapter extends AdapterCore {
         case 'rc-callLogger-auto-log-notify':
           console.log('rc-callLogger-auto-log-notify:', data.autoLog);
           break;
+        case 'rc-dialer-status-notify':
+          console.log('rc-dialer-status-notify:', data.ready);
+          break;
+        case 'rc-meeting-status-notify':
+          console.log('rc-meeting-status-notify:', data.ready, data.permission);
+          break;
         default:
           super._onMessage(data);
           break;
@@ -322,6 +329,16 @@ class Adapter extends AdapterCore {
     }
   }
 
+  _requestWithPostMessage(path, body) {
+    return requestWithPostMessage(
+      path,
+      body,
+      5000,
+      this._contentFrameEl.contentWindow,
+      'rc-adapter-message'
+    );
+  }
+
   setRinging(ringing) {
     this._ringing = !!ringing;
     this._renderMainClass();
@@ -382,6 +399,17 @@ class Adapter extends AdapterCore {
     });
   }
 
+  navigateTo(path) {
+    this._postMessage({
+      type: 'rc-adapter-navigate-to',
+      path,
+    });
+  }
+
+  scheduleMeeting(meetingInfo) {
+    return this._requestWithPostMessage('/schedule-meeting', meetingInfo);
+  }
+
   _updateWidgetCurrentPath(path) {
     this._widgetCurrentPath = path;
     this._updateCallBarStatus();

src/lib/requestWithPostMessage.js

@@ -1,27 +1,27 @@
 import uuid from 'uuid';
 
-export default function requestWithPostMessage(path, body, timeout = 3000) {
+export default function requestWithPostMessage(path, body, timeout = 3000, target = window.parent, prefix = 'rc-post-message') {
   return new Promise((resolve, reject) => {
     const id = uuid.v4();
     let responseFunc;
     const catchTimeout = setTimeout(() => {
       window.removeEventListener('message', responseFunc);
-      reject('Time out');
+      reject(Error('Time out'));
     }, timeout);
     responseFunc = (e) => {
       const data = e.data;
       if (
         data &&
-        data.type === 'rc-post-message-response' &&
+        data.type === `${prefix}-response` &&
         data.responseId === id
       ) {
         clearTimeout(catchTimeout);
         window.removeEventListener('message', responseFunc);
         resolve(data.response);
       }
     };
-    window.parent.postMessage({
-      type: 'rc-post-message-request',
+    target.postMessage({
+      type: `${prefix}-request`,
       requestId: id,
       path,
       body,

src/modules/Adapter/index.js

@@ -12,6 +12,7 @@ import debounce from 'ringcentral-integration/lib/debounce';
 
 import AdapterModuleCore from 'ringcentral-widgets/lib/AdapterModuleCore';
 
+import formatMeetingInfo from '../../lib/formatMeetingInfo';
 import messageTypes from '../../lib/Adapter/messageTypes';
 import actionTypes from './actionTypes';
 import getReducer from './getReducer';
@@ -25,6 +26,7 @@ const CALL_NOTIFY_DELAY = 1500;
     'ExtensionInfo',
     'AccountInfo',
     'RouterInteraction',
+    'RolesAndPermissions',
     'Presence',
     'ComposeText',
     'Call',
@@ -38,6 +40,8 @@ const CALL_NOTIFY_DELAY = 1500;
     'MessageStore',
     'TabManager',
     'CallLogger',
+    'Meeting',
+    'Brand',
     { dep: 'AdapterOptions', optional: true }
   ]
 })
@@ -61,6 +65,9 @@ export default class Adapter extends AdapterModuleCore {
     disableInactiveTabCallEvent,
     tabManager,
     callLogger,
+    meeting,
+    brand,
+    rolesAndPermissions,
     ...options
   }) {
     super({
@@ -87,6 +94,9 @@ export default class Adapter extends AdapterModuleCore {
     this._callLogger = callLogger;
     this._extensionInfo = extensionInfo;
     this._accountInfo = accountInfo;
+    this._meeting = meeting;
+    this._brand = brand;
+    this._rolesAndPermissions = rolesAndPermissions;
 
     this._reducer = getReducer(this.actionTypes);
     this._callSessions = new Map();
@@ -99,6 +109,8 @@ export default class Adapter extends AdapterModuleCore {
     this._lastActiveCallLogMap = {};
     this._callWith = null;
     this._callLoggerAutoLogEnabled = null;
+    this._dialerDisabled = null;
+    this._meetingReady = null;
 
     this._messageStore.onNewInboundMessage((message) => {
       this._postMessage({
@@ -176,6 +188,8 @@ export default class Adapter extends AdapterModuleCore {
     this._checkRouteChanged();
     this._checkCallingSettingsChanged();
     this._checkAutoCallLoggerChanged();
+    this._checkDialUIStatusChanged();
+    this._checkMeetingStatusChanged();
   }
 
   _onMessage(event) {
@@ -205,13 +219,49 @@ export default class Adapter extends AdapterModuleCore {
           if (this._callingSettings.ready) {
             this._updateCallingSettings(data);
           }
+          break;
+        case 'rc-adapter-message-request': {
+          this._handleRCAdapterMessageRequest(data);
+          break;
+        }
+        case 'rc-adapter-navigate-to': {
+          if (data.path && data.path.indexOf('/') === 0) {
+            this._router.push(data.path);
+          }
+          break;
+        }
         default:
           super._onMessage(data);
           break;
       }
     }
   }
 
+  async _handleRCAdapterMessageRequest(data) {
+    if (!data.path) {
+      return;
+    }
+    switch (data.path) {
+      case '/schedule-meeting': {
+        if (this._meeting.ready && this._rolesAndPermissions.organizeMeetingEnabled) {
+          const res = await this._scheduleMeeting(data.body);
+          this._postRCAdapterMessageResponse({
+            responseId: data.requestId,
+            response: res,
+          });
+        }
+        break;
+      }
+      default: {
+        this._postRCAdapterMessageResponse({
+          responseId: data.requestId,
+          response: { data: 'no matched path' }
+        });
+        break;
+      }
+    }
+  }
+
   _pushAdapterState() {
     this._postMessage({
       type: this._messageTypes.pushAdapterState,
@@ -417,6 +467,32 @@ export default class Adapter extends AdapterModuleCore {
     this._postMessage(message);
   }
 
+  _checkDialUIStatusChanged() {
+    if (this._dialerDisabled === this._dialerUI.isCallButtonDisabled) {
+      return;
+    }
+    this._dialerDisabled = this._dialerUI.isCallButtonDisabled;
+    this._postMessage({
+      type: 'rc-dialer-status-notify',
+      ready: !this._dialerUI.showSpinner && !this._dialerUI.isCallButtonDisabled,
+    });
+  }
+
+  _checkMeetingStatusChanged() {
+    if (this._meetingReady === this._meeting.ready) {
+      return;
+    }
+    this._meetingReady = this._meeting.ready;
+    this._postMessage({
+      type: 'rc-meeting-status-notify',
+      ready: this._meeting.ready,
+      permission: !!(
+        this._rolesAndPermissions.ready &&
+        this._rolesAndPermissions.organizeMeetingEnabled
+      ),
+    });
+  }
+
   _insertExtendStyle() {
     if (!this._stylesUri) {
       return;
@@ -618,13 +694,34 @@ export default class Adapter extends AdapterModuleCore {
     }
   }
 
+  async _scheduleMeeting(data) {
+    const resp = await phone.meeting.schedule(data);
+    if (!resp) {
+      return {
+        error: 'schedule failed'
+      };
+    }
+    const formatedMeetingInfo = formatMeetingInfo(resp, this._brand, this._locale.currentLocale);
+    return {
+      meeting: formatedMeetingInfo,
+    };
+  }
+
   // eslint-disable-next-line
   _postMessage(data) {
     if (window && window.parent) {
       window.parent.postMessage(data, '*');
     }
   }
 
+  _postRCAdapterMessageResponse({ responseId, response }) {
+    this._postMessage({
+      type: 'rc-adapter-message-response',
+      responseId,
+      response,
+    });
+  }
+
   get ready() {
     return this.state.status === moduleStatuses.ready;
   }