sync features and bugfixs from b33ddb14 (#1660)

Author: embbnux

.sync

@@ -1 +1 @@
-94b20ac373f4b4b2b76a4023a3f2e369eb193d91
+b33ddb1410019452acbe86c80a5efa52d1331701

packages/babel-settings/babel.config.js

@@ -16,6 +16,7 @@ const plugins = [
   '@babel/plugin-proposal-object-rest-spread',
   '@babel/plugin-proposal-optional-chaining',
   '@babel/plugin-proposal-nullish-coalescing-operator',
+  'const-enum',
 ];
 
 module.exports = function baseBabelConfig(api) {

packages/babel-settings/package.json

@@ -25,6 +25,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@babel/register": "^7.10.5",
+    "babel-plugin-const-enum": "^1.0.1",
     "core-js": "^2.6.11",
     "typescript": "^4.0.2"
   },

packages/core/README.md

@@ -17,7 +17,6 @@ yarn add @ringcentral-integration/core
       - [state API](#state-api)
       - [action API](#action-api)
       - [computed API](#computed-api)
-      - [proxyState API](#proxystate-api)
     - [RcUIModule APIs](#rcuimodule-apis)
     - [Dependency Injection](#dependency-injection)
     - [Storage and GlobalStorage APIs](#storage-and-globalstorage-apis)
@@ -26,7 +25,7 @@ yarn add @ringcentral-integration/core
 
 ### RcModule APIs
 
-`@ringcentral-integration/core` provides `RcModuleV2` base module, decorators `state`, `action`, `computed`, `storage` and `globalStorage`, `proxyState`.
+`@ringcentral-integration/core` provides `RcModuleV2` base module, decorators `state`, `action`, `computed`, `storage` and `globalStorage`.
 
 The decorator `storage` depends on `Storage` Module, And  The decorator `globalStorage` depends on `GlobalStorage` Module.
 
@@ -122,10 +121,6 @@ class Auth extends RcModuleV2<Deps> {
 }
 ```
 
-#### proxyState API
-
-`@proxyState` is used for asynchronous state changes of the browser client, and its parameter must be an asynchronous function and cannot be used with `@storage`/`@globalStorage`.
-
 ### RcUIModule APIs
 
 `@ringcentral-integration/core` provides `RcUIModuleV2` base module and all decorators in `RcModuleV2`.
@@ -253,18 +248,30 @@ class Call extends RcModuleV2<Deps> {
     });
   }
 
+  // Pass a tracking event type
   @track(trackEvents.inbound)
   inboundCall() {
     //
   }
 
+  // Pass a function that returns an array `[customTrackEvent, trackProps]`
   @track((that: Call, phoneNumber: string) => [
     trackEvents.outbound,
     { loginType: that.callType, phoneNumber },
   ])
   async dialout(phoneNumber: string) {
     //
   }
+
+  // Pass a higher-order function and the sub-function has access to the `analytics` module
+  @track(() => (analytics) => {
+    analytics.setUserId();
+    return [trackEvents.authentication];
+  })
+  @action
+  setLoginSuccess(token: TokenInfo) {
+    //
+  }
 }
 ```
 

packages/core/lib/RcModule/RcModule.ts

@@ -5,7 +5,7 @@ import { Storage as StorageV2 } from 'ringcentral-integration/modules/StorageV2'
 import { GlobalStorage as GlobalStorageV2 } from 'ringcentral-integration/modules/GlobalStorageV2';
 import Storage from 'ringcentral-integration/modules/Storage';
 import GlobalStorage from 'ringcentral-integration/modules/GlobalStorage';
-import { Analytics } from 'ringcentral-integration/modules/Analytics';
+import { Analytics } from 'ringcentral-integration/modules/AnalyticsV2';
 import BaseModule, { state, action } from '../usm-redux';
 import { moduleStatuses } from '../../enums/moduleStatuses';
 import { Params } from '../usm/core/module';
@@ -42,7 +42,11 @@ function storage(
   return descriptor;
 }
 
-type TrackEvent = string | ((...args: any) => [string, object?]);
+type TrackEvent =
+  | string
+  | ((
+      ...args: any
+    ) => [string, object?] | ((analytics: Analytics) => [string, object?]));
 
 /**
  * decorate a method with `Analytics` Module
@@ -75,7 +79,11 @@ function track(trackEvent: TrackEvent) {
           if (typeof trackEvent === 'string') {
             analytics.track(trackEvent);
           } else {
-            const [event, trackProps] = trackEvent(this, ...args) ?? [];
+            let trackReturn = trackEvent(this, ...args);
+            if (typeof trackReturn === 'function') {
+              trackReturn = trackReturn(analytics);
+            }
+            const [event, trackProps] = trackReturn ?? [];
             if (event) {
               analytics.track(event, trackProps);
             }
@@ -123,6 +131,7 @@ class RcModuleV2<
   S extends Record<string, any> = {}
 > extends BaseModule<T> {
   __$$state$$__: any;
+  protected initializeProxy?(): Promise<void> | void;
   /**
    * `onInit` life cycle for current initialization before all deps modules are all ready.
    */

packages/core/lib/usm-redux/core/module.ts

@@ -30,29 +30,8 @@ class Module<T extends Record<string, any> = {}> extends BaseModule<T> {
       this._actionTypes.forEach((name) => {
         this._reducersMaps[name] = (types) => (
           _state = this._initialValue[name],
-          { type, states, __proxyState__ },
-        ) => {
-          if (type.indexOf(types[name]) > -1 && __proxyState__) {
-            return __proxyState__[name];
-          } else if (type.indexOf(types[name]) > -1 && states) {
-            if (this._transport && this.__proxyState__?.[name]) {
-              // sync up state with async proxy callback
-              (async () => {
-                await this.__proxyState__[name](this, states[name]);
-                this._dispatch({
-                  type: this.parentModule.__proxyAction__,
-                  action: {
-                    type: [types[name]],
-                    __proxyState__: { [name]: states[name] },
-                  },
-                });
-              })();
-              return _state;
-            }
-            return states[name];
-          }
-          return _state;
-        };
+          { type, states },
+        ) => (type.indexOf(types[name]) > -1 && states ? states[name] : _state);
       });
     }
     super._makeInstance(params);

packages/core/lib/usm/core/module.ts

@@ -18,7 +18,6 @@ export interface Params<T = {}> {
 export interface Action {
   type: string[] | string;
   states?: Properties;
-  __proxyState__?: Record<string, any>;
   [K: string]: any;
 }
 
@@ -39,10 +38,6 @@ interface Module {
    * Used by browser client to transport data.
    */
   _transport?: any;
-  /**
-   * browser client's proxy state.
-   */
-  __proxyState__: Record<string, (...args: any) => any>;
   /**
    * Used by browser client to dispatch.
    */

packages/engage-voice-widget/assets/icons/icon-pvc-connecting.svg

@@ -33,15 +33,14 @@ export const UTActivityCallLogPanel: StepFunction<any, any> = async (
 
   openField.simulate('click');
 
-  const addMenuIcon = getSelectList().find(
-    'RcIconButton[data-sign="addEntityMenu"]',
-  );
+  const addMenuIcon = getSelectList()
+    .find('RcIconButton[data-sign="addEntityMenu"]')
+    .find('button');
 
   addMenuIcon.simulate('click');
 
   const menuItems = getSelectList().find('RcMenuItem');
 
-  const entityName = props.entityName.toLowerCase();
-  menuItems.find(`[title="Create ${entityName}"]`).simulate('click');
+  menuItems.find(`[title="New ${props.entityName}"]`).simulate('click');
   wrapper.unmount();
 };

packages/engage-voice-widget/assets/icons/icon-pvc-disabled.svg

@@ -70,7 +70,7 @@ export const IvrInfo: FunctionComponent<IvrInfoProps> = ({
               const bodyRender = () => {
                 if (body.length > 0) {
                   if (onClick) {
-                    return <RcLink handleOnClick={onClick}>{body}</RcLink>;
+                    return <RcLink onClick={onClick}>{body}</RcLink>;
                   }
                   return <div className={styles.body}>{body}</div>;
                 }

packages/engage-voice-widget/assets/icons/icon-pvc-disconnecting.svg

@@ -1,5 +1,7 @@
 export default {
   submit: 'Submit',
+  create: 'Create',
+  update: 'Update',
   disposition: 'Disposition',
   internalTransfer: 'Internal transfer',
   phoneBookTransfer: 'Phone book transfer',

packages/engage-voice-widget/assets/icons/icon-pvc-off.svg

@@ -14,6 +14,10 @@ export function getButtonText(
       return <RcIcon symbol={checkSvg} />;
     case 'saving':
       return null;
+    case 'create':
+      return i18n.getString('create', currentLocale);
+    case 'update':
+      return i18n.getString('update', currentLocale);
     case 'submit':
     default:
       return i18n.getString('submit', currentLocale);

packages/engage-voice-widget/assets/icons/icon-pvc-on.svg

@@ -26,4 +26,5 @@ EvIntegratedSoftphoneAlert.handleMessage = ({ message }: { message: string }) =>
     tabManagerEvents.SIP_CONNECTING,
     tabManagerEvents.SIP_RECONNECTING_WHEN_CALL_CONNECTED,
     tabManagerEvents.ASK_AUDIO_PERMISSION,
+    tabManagerEvents.NOTIFY_ACTIVE_TAB_CALL_ACTIVE,
   ]);

packages/engage-voice-widget/components/ActivityCallLogPanel/ActivityCallLogPanel.ut.tsx

@@ -12,6 +12,8 @@ export default {
   [tabManagerEvents.SIP_RECONNECTING_WHEN_CALL_CONNECTED]:
     'Try to reconnect Integrated Softphone...',
   [tabManagerEvents.ASK_AUDIO_PERMISSION]: 'Wait for accept audio permission.',
+  [tabManagerEvents.NOTIFY_ACTIVE_TAB_CALL_ACTIVE]:
+    'You have an incoming call. Switch to the browser tab with the blue flashing dot to answer the call',
 
   // Attempt to dequeue call to agent failed! Outdial to destination [16503990023*106] failed after [2] seconds with disposition [INTERCEPT]
 };

packages/engage-voice-widget/components/ActivityCallLogPanel/IvrInfo/IvrInfo.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { BasicSessionPanel, BasicSessionPanelProps } from './BasicSessionPanel';
 
-let wrapper;
+let wrapper: ReturnType<typeof mount>;
 const currentLocale = 'en-US';
 const defaultSkillProfileList = [
   {
@@ -203,7 +203,12 @@ describe('<BasicSessionPanel />', async () => {
     );
 
     expect(skillProfilePickList.prop('value')).toBe(selectedSkillProfileId);
-    expect(skillProfilePickList.find('.RcLineSelect-select').text()).toBe(
+    expect(
+      skillProfilePickList
+        .find('RcSelect')
+        .find('[aria-haspopup="listbox"]')
+        .text(),
+    ).toBe(
       defaultSkillProfileList.find(
         (x) => x.profileId === selectedSkillProfileId,
       ).profileName,

packages/engage-voice-widget/components/ActivityCallLogPanel/i18n/en-US.ts

@@ -70,6 +70,7 @@ export const BasicSessionPanel: FunctionComponent<BasicSessionPanelProps> = ({
         {showInboundQueues && (
           <RcTextField
             label={i18n.getString('inboundQueues', currentLocale)}
+            gutterBottom
             title={inboundQueuesFieldText}
             value={inboundQueuesFieldText}
             fullWidth
@@ -107,6 +108,7 @@ export const BasicSessionPanel: FunctionComponent<BasicSessionPanelProps> = ({
         />
         {isExtensionNumber && (
           <RcTextField
+            gutterBottom
             label={i18n.getString('extensionNumber', currentLocale)}
             fullWidth
             value={extensionNumber}
@@ -142,6 +144,7 @@ export const BasicSessionPanel: FunctionComponent<BasicSessionPanelProps> = ({
         {showAutoAnswer && (
           <RcSwitch
             data-sign="autoAnswer"
+            className={styles.switchRoot}
             formControlLabelProps={{
               labelPlacement: 'start',
               classes: {

packages/engage-voice-widget/components/ActivityCallLogPanel/utils/getButtonText.tsx

@@ -22,6 +22,10 @@ p.warning {
   display: flex;
   margin-left: 0;
   margin-bottom: 16px;
+
+  .switchRoot.switchRoot {
+    margin: 0;
+  }
 }
 
 .label {