show contact name in active call page

dev-server/Phone.js

@@ -6,11 +6,14 @@ import RcModule from 'ringcentral-integration/lib/RcModule';
 
 import AccountExtension from 'ringcentral-integration/modules/AccountExtension';
 import AccountInfo from 'ringcentral-integration/modules/AccountInfo';
+import AccountPhoneNumber from 'ringcentral-integration/modules/AccountPhoneNumber';
+import AddressBook from 'ringcentral-integration/modules/AddressBook';
 import Alert from 'ringcentral-integration/modules/Alert';
 import Auth from 'ringcentral-integration/modules/Auth';
 import Brand from 'ringcentral-integration/modules/Brand';
 import Call from 'ringcentral-integration/modules/Call';
 import CallingSettings from 'ringcentral-integration/modules/CallingSettings';
+import Contacts from 'ringcentral-integration/modules/Contacts';
 import ConnectivityMonitor from 'ringcentral-integration/modules/ConnectivityMonitor';
 import DialingPlan from 'ringcentral-integration/modules/DialingPlan';
 import ExtensionDevice from 'ringcentral-integration/modules/ExtensionDevice';
@@ -239,6 +242,12 @@ export default class Phone extends RcModule {
       tabManager: this.tabManager,
       getState: () => this.state.forwardingNumber,
     }));
+    this.addModule('contactMatcher', new ContactMatcher({
+      ...options,
+      storage: this.storage,
+      getState: () => this.state.contactMatcher,
+    }));
+    reducers.contactMatcher = this.contactMatcher.reducer;
     this.addModule('webphone', new Webphone({
       appKey: apiConfig.appKey,
       appName: 'RingCentral Widget',
@@ -248,6 +257,7 @@ export default class Phone extends RcModule {
       client: this.client,
       storage: this.storage,
       rolesAndPermissions: this.rolesAndPermissions,
+      contactMatcher: this.contactMatcher,
       webphoneLogLevel: 3,
       extensionDevice: this.extensionDevice,
       getState: () => this.state.webphone,
@@ -438,6 +448,9 @@ export default class Phone extends RcModule {
       contactMatcher: this.contactMatcher,
       webphone: this.webphone,
       onRinging: async () => {
+        if (this.webphone._webphone) {
+          return;
+        }
         // TODO refactor some of these logic into appropriate modules
         this.router.push('/calls');
       },
@@ -454,12 +467,6 @@ export default class Phone extends RcModule {
       getState: () => this.state.callHistory,
     }));
     reducers.callHistory = this.callHistory.reducer;
-    this.addModule('contactMatcher', new ContactMatcher({
-      ...options,
-      storage: this.storage,
-      getState: () => this.state.contactMatcher,
-    }));
-    reducers.contactMatcher = this.contactMatcher.reducer;
     this.addModule('activityMatcher', new ActivityMatcher({
       ...options,
       storage: this.storage,
@@ -477,6 +484,34 @@ export default class Phone extends RcModule {
       getState: () => this.state.callLogger,
     }));
     reducers.callLogger = this.callLogger.reducer;
+    this.addModule('accountPhoneNumber', new AccountPhoneNumber({
+      auth: this.auth,
+      client: this.client,
+      storage: this.storage,
+      tabManager: this.tabManager,
+      getState: () => this.state.accountPhoneNumber,
+    }));
+    reducers.accountPhoneNumber = this.accountPhoneNumber.reducer;
+    this.addModule('addressBook', new AddressBook({
+      client: this.client,
+      auth: this.auth,
+      storage: this.storage,
+      getState: () => this.state.addressBook,
+    }));
+    reducers.addressBook = this.addressBook.reducer;
+    this.addModule('contacts', new Contacts({
+      client: this.client,
+      addressBook: this.addressBook,
+      accountPhoneNumber: this.accountPhoneNumber,
+      accountExtension: this.accountExtension,
+      getState: () => this.state.contacts,
+    }));
+    reducers.contacts = this.contacts.reducer;
+    this.contactMatcher.addSearchProvider({
+      name: 'contacts',
+      searchFn: async ({ queries }) => this.contacts.matchContacts({ phoneNumbers: queries }),
+      readyCheckFn: () => this.contacts.ready,
+    });
     this.addModule('conversationMatcher', new ConversationMatcher({
       storage: this.storage,
       getState: () => this.state.conversationMatcher,

dev-server/containers/App/index.js

@@ -45,6 +45,13 @@ export default function App({
                 webphone={phone.webphone}
                 regionSettings={phone.regionSettings}
                 router={phone.router}
+                contactMatcher={phone.contactMatcher}
+                getAvatarUrl={
+                  async (contact) => {
+                    const avatarUrl = await phone.contacts.getImageProfile(contact);
+                    return avatarUrl;
+                  }
+                }
               >
                 <AlertContainer
                   locale={phone.locale}

src/components/ActiveCallPanel/index.js

@@ -7,7 +7,7 @@ import Panel from '../Panel';
 import DurationCounter from '../DurationCounter';
 import ActiveCallPad from '../ActiveCallPad';
 import ActiveCallDialPad from '../ActiveCallDialPad';
-
+import ContactDisplay from '../ContactDisplay';
 import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
 import styles from './styles.scss';
 
@@ -19,17 +19,38 @@ function CallInfo(props) {
         <DurationCounter startTime={props.startTime} />
       </span>
     ) : null;
+  let avatar;
+  if (props.avatarUrl) {
+    avatar = (<img src={props.avatarUrl} alt="avatar" />);
+  } else {
+    avatar = (<i className={classnames(dynamicsFont.portrait, styles.icon)} />);
+  }
   return (
     <div className={styles.userInfo}>
       <div className={styles.avatarContainer}>
         <div className={styles.avatar}>
-          <i className={classnames(dynamicsFont.portrait, styles.icon)} />
+          {avatar}
         </div>
       </div>
       <div className={styles.infoContent}>
         <div className={styles.userName}>
-          {props.name}
-          { timeCounter }
+          <ContactDisplay
+            className={styles.contactDisplay}
+            contactMatches={props.nameMatches}
+            phoneNumber={props.phoneNumber}
+            fallBackName={props.fallBackName}
+            currentLocale={props.currentLocale}
+            areaCode={props.areaCode}
+            countryCode={props.countryCode}
+            selectClassName={styles.contactNameSelect}
+            showType={false}
+            disabled={false}
+            selected={props.selectedMatcherIndex}
+            onSelectContact={props.onSelectMatcherName}
+            isLogging={false}
+            enableContactFallback
+          />
+          {timeCounter}
         </div>
         <div className={styles.userPhoneNumber}>
           {props.formatPhone(props.phoneNumber)}
@@ -40,15 +61,23 @@ function CallInfo(props) {
 }
 
 CallInfo.propTypes = {
-  name: PropTypes.string.isRequired,
   phoneNumber: PropTypes.string,
   formatPhone: PropTypes.func.isRequired,
   startTime: PropTypes.number,
+  nameMatches: PropTypes.array.isRequired,
+  fallBackName: PropTypes.string.isRequired,
+  areaCode: PropTypes.string.isRequired,
+  countryCode: PropTypes.string.isRequired,
+  currentLocale: PropTypes.string.isRequired,
+  selectedMatcherIndex: PropTypes.number.isRequired,
+  onSelectMatcherName: PropTypes.func.isRequired,
+  avatarUrl: PropTypes.string,
 };
 
 CallInfo.defaultProps = {
   phoneNumber: null,
   startTime: null,
+  avatarUrl: null,
 };
 
 class ActiveCallPanel extends Component {
@@ -74,10 +103,17 @@ class ActiveCallPanel extends Component {
   render() {
     const userInfo = this.state.isShowKeyPad ? null : (
       <CallInfo
-        name={this.props.userName}
+        currentLocale={this.props.currentLocale}
+        nameMatches={this.props.nameMatches}
+        fallBackName={this.props.fallBackName}
         phoneNumber={this.props.phoneNumber}
         formatPhone={this.props.formatPhone}
         startTime={this.props.startTime}
+        areaCode={this.props.areaCode}
+        countryCode={this.props.countryCode}
+        selectedMatcherIndex={this.props.selectedMatcherIndex}
+        onSelectMatcherName={this.props.onSelectMatcherName}
+        avatarUrl={this.props.avatarUrl}
       />
     );
     const buttonsPad = this.state.isShowKeyPad ? null : (
@@ -130,7 +166,8 @@ class ActiveCallPanel extends Component {
 
 ActiveCallPanel.propTypes = {
   phoneNumber: PropTypes.string,
-  userName: PropTypes.string,
+  nameMatches: PropTypes.array.isRequired,
+  fallBackName: PropTypes.string.isRequired,
   currentLocale: PropTypes.string.isRequired,
   startTime: PropTypes.number,
   isOnMute: PropTypes.bool,
@@ -148,6 +185,11 @@ ActiveCallPanel.propTypes = {
   onKeyPadChange: PropTypes.func.isRequired,
   formatPhone: PropTypes.func.isRequired,
   children: PropTypes.node,
+  areaCode: PropTypes.string.isRequired,
+  countryCode: PropTypes.string.isRequired,
+  selectedMatcherIndex: PropTypes.number.isRequired,
+  onSelectMatcherName: PropTypes.func.isRequired,
+  avatarUrl: PropTypes.string,
 };
 
 ActiveCallPanel.defaultProps = {
@@ -158,6 +200,7 @@ ActiveCallPanel.defaultProps = {
   isOnRecord: false,
   phoneNumber: null,
   children: undefined,
+  avatarUrl: null,
 };
 
 export default ActiveCallPanel;

src/components/ActiveCallPanel/styles.scss

@@ -11,6 +11,7 @@ $avatar-width: 60px;
   left: 0;
   z-index: 10;
   background: #ffffff;
+  text-align: center;
 }
 
 .backButton {
@@ -34,12 +35,13 @@ $avatar-width: 60px;
 }
 
 .userInfo {
+  display: inline-block;
   text-align: left;
   color: $lightblack;
   margin-bottom: 8px;
   margin-top: 15px;
-  margin-left: 18%;
-  margin-right: 8%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .avatarContainer {
@@ -54,13 +56,18 @@ $avatar-width: 60px;
   border-radius: 50px;
   margin-left: auto;
   margin-right: auto;
-  opacity: 0.3;
   color: $primary-color;
   margin-bottom: 5px;
+  overflow: hidden;
 
   .icon {
     display: block;
     font-size: 38px;
+    opacity: 0.3;
+  }
+
+  img {
+    width: 100%;
   }
 }
 
@@ -79,6 +86,15 @@ $avatar-width: 60px;
   }
 }
 
+.contactDisplay {
+  display: inline-block;
+  line-height: 16px;
+}
+
+.contactNameSelect {
+  width: 100%;
+}
+
 .userPhoneNumber {
   font-size: 12px;
   color: $grey-light;

src/components/ContactDisplay/index.js

@@ -12,6 +12,8 @@ const displayFomatter = ({ entityName, entityType, phoneNumber }) => {
     return `${entityName} | ${phoneSourceNames.getString(entityType)} ${phoneNumber}`;
   } else if (entityName && entityType) {
     return `${entityName} | ${phoneSourceNames.getString(entityType)}`;
+  } else if (entityName) {
+    return entityName;
   } else if (phoneNumber) {
     return `${phoneNumber}`;
   }
@@ -32,6 +34,8 @@ export default function ContactDisplay({
   phoneNumber,
   currentLocale,
   groupNumbers,
+  showType,
+  selectClassName,
 }) {
   let contentEl;
   if (groupNumbers) {
@@ -74,7 +78,7 @@ export default function ContactDisplay({
     ];
     contentEl = (
       <DropdownSelect
-        className={styles.select}
+        className={classnames(styles.select, selectClassName)}
         value={`${selected}`}
         onChange={onSelectContact}
         disabled={disabled || isLogging}
@@ -89,7 +93,7 @@ export default function ContactDisplay({
         renderValue={value => (
           displayFomatter({
             entityName: options[value].name,
-            entityType: options[value].entityType,
+            entityType: showType && options[value].entityType,
           })
         )}
         renderTitle={entity => (
@@ -130,6 +134,8 @@ ContactDisplay.propTypes = {
   phoneNumber: PropTypes.string,
   currentLocale: PropTypes.string.isRequired,
   groupNumbers: PropTypes.arrayOf(PropTypes.string),
+  showType: PropTypes.bool,
+  selectClassName: PropTypes.string,
 };
 ContactDisplay.defaultProps = {
   className: undefined,
@@ -138,4 +144,6 @@ ContactDisplay.defaultProps = {
   phoneNumber: undefined,
   groupNumbers: undefined,
   enableContactFallback: undefined,
+  showType: true,
+  selectClassName: undefined,
 };