fix bug(RCINT3766) -- The dropdown list should show all matching entities (#145)

* fix bug -- recipientheader is null

* fix bug -- recipientheader is null

* add type to recipientHeader

* change name

* change name

* add spaces

* add spaces

Author: sophiewu2333

dev-server/Phone.js

@@ -43,6 +43,8 @@ import CallLog from 'ringcentral-integration/modules/CallLog';
 import CallMonitor from 'ringcentral-integration/modules/CallMonitor';
 import CallHistory from 'ringcentral-integration/modules/CallHistory';
 
+import ContactMatcher from 'ringcentral-integration/modules/ContactMatcher';
+
 import RouterInteraction from '../src/modules/RouterInteraction';
 
 export default class Phone extends RcModule {
@@ -366,7 +368,11 @@ export default class Phone extends RcModule {
       contactMatcher: this.contactMatcher,
       getState: () => this.state.callHistory,
     }));
-
+    this.addModule('contactMatcher', new ContactMatcher({
+      ...options,
+      storage: this.storage,
+      getState: () => this.state.contactMatcher,
+    }));
     this._reducer = combineReducers({
       accountExtension: this.accountExtension.reducer,
       accountInfo: this.accountInfo.reducer,
@@ -409,6 +415,7 @@ export default class Phone extends RcModule {
       callLog: this.callLog.reducer,
       callMonitor: this.callMonitor.reducer,
       callHistory: this.callHistory.reducer,
+      contactMatcher: this.contactMatcher.reducer,
       lastAction: (state = null, action) => {
         console.log(action);
         return action;

dev-server/containers/App/index.js

@@ -195,7 +195,7 @@ export default function App({
                   conversation={phone.conversation}
                   messageStore={phone.messageStore}
                   dateTimeFormat={phone.dateTimeFormat}
-                // contactMatcher={phone.contactMatcher}
+                  contactMatcher={phone.contactMatcher}
                 />
               )} />
             <Route
@@ -211,7 +211,6 @@ export default function App({
                   regionSettings={phone.regionSettings}
                   contactMatcher={phone.contactMatcher}
                   dateTimeFormat={phone.dateTimeFormat}
-                // contactMatcher={phone.contactMatcher}
                 />
               )} />
           </Route>

src/components/RecipientHeader/index.js

@@ -30,9 +30,9 @@ function MatchedNameList(props) {
   return (
     <div className={props.className}>
       {
-        this.props.isSelected ?
+        props.isSelected ?
           <RecipientName
-            name={i18n.getString('selectMatchedName', this.props.currentLocale)}
+            name={i18n.getString('selectMatchedName', props.currentLocale)}
             className={styles.noClick}
             onClick={
               () => null
@@ -111,7 +111,7 @@ class RecipientHeader extends Component {
     const phoneNumber = recipient.phoneNumber || recipient.extensionNumber;
     let matchedNames = this.context.getMatcherContactList(phoneNumber);
     let defaultRecipient = matchedNames.join('&');
-    // if it have old data
+    // if it has old data
     let isSelected = false;
     if (recipient.matchedNames && recipient.matchedNames[0]) {
       const firstMatchedName = recipient.matchedNames[0];

src/components/RecipientHeader/styles.scss

@@ -12,7 +12,7 @@
 
 .recipient {
   display: block;
-  width: 100%;
+  max-width: 100%;
   padding: 0 2px;
   line-height: 25px;
   height: 25px;

src/components/RecipientsHeader/styles.scss

@@ -1,9 +1,9 @@
 .container {
+  position: relative;
   display: inline-block;
   text-align: center;
   max-width: 250px;
   min-width: 100px;
-  position: relative;
   margin: 0 auto;
   font-family: Helvetica;
   font-size: 14px;

src/containers/ConversationPage/index.js

@@ -115,7 +115,9 @@ function mapDispatchToProps(dispatch, props) {
     getMatcherContactList = (phoneNumber) => {
       const matcherNames = props.contactMatcher.dataMapping[phoneNumber];
       if (matcherNames && matcherNames.length > 0) {
-        return matcherNames.map(matcher => matcher.name);
+        return matcherNames.map(matcher =>
+          `${matcher.name}|${matcher.phoneNumbers[0].phoneType}`
+        );
       }
       return [];
     };