fix bug 【RC3766】The dropdown list should show all matching entities 【…

…RC3789】Tab name should be "Compose Text" instead of "SMS" (#149)

* adjust UI in dropdownlist

* rename tab name to compose text

* delete wrong translation

* add spaces

* codacy

* rename typeanytosend to typemessage

* add files

dev-server/containers/MainView/index.js

@@ -48,7 +48,7 @@ const tabs = [
   {
     icon: <span className={dynamicsFont.iconComposeText} />,
     activityIcon: <span className={dynamicsFont.iconComposeText} />,
-    label: 'SMS',
+    label: 'Compose Text',
     path: '/composeText',
     // noticeCounts: 2,
   },

src/components/ComposeTextPanel/i18n/de-DE.js

@@ -1,11 +1,7 @@
 export default {
-  sendMessageFrom: 'Nachricht senden von',
+  from: 'Von',
   to: 'An',
   enterNameOrNumber: 'Nummer oder Name eingeben',
-  typeAnyToSend: 'Geben Sie beliebigen Text zum Senden ein.',
-  send: 'Senden',
-  from: 'Von',
   typeMessage: 'Nachricht eingeben ...',
-  noSMSSenderNumber: `Sie haben keine gültige Telefonnummer, um SMS zu versenden. 
-    Wenden Sie sich an Ihren Kontoadministrator.`,
+  send: 'Senden',
 };

src/components/ComposeTextPanel/i18n/en-CA.js

@@ -4,6 +4,4 @@ export default {
   enterNameOrNumber: 'Enter Number or Name...',
   typeMessage: 'Type message...',
   send: 'Send',
-  noSMSSenderNumber: `You don't have valid phone number to send SMS from. 
-    Please contact your account administrator.`,
 };

src/components/ComposeTextPanel/i18n/en-GB.js

@@ -1,11 +1,7 @@
 export default {
-  sendMessageFrom: 'Send Message From',
+  from: 'From',
   to: 'To',
   enterNameOrNumber: 'Enter Number or Name',
-  typeAnyToSend: 'Type any text to send',
-  send: 'Send',
-  from: 'From',
   typeMessage: 'Type message...',
-  noSMSSenderNumber: `You don't have valid phone number to send SMS from. 
-    Please contact your account administrator.`,
+  send: 'Send',
 };

src/components/ComposeTextPanel/i18n/fr-CA.js

@@ -1,11 +1,7 @@
 export default {
-  sendMessageFrom: 'Envoyer un message de',
+  from: 'De',
   to: 'À',
   enterNameOrNumber: 'Saisir le numéro ou le nom',
-  typeAnyToSend: 'Entrer le texte à envoyer',
-  send: 'Envoyer',
-  from: 'De',
   typeMessage: 'Entrer le message...',
-  noSMSSenderNumber: `Vous ne possédez pas un numéro de téléphone valide à partir duquel envoyer des textos. 
-    Veuillez communiquer avec votre administrateur de compte.`,
+  send: 'Envoyer',
 };

src/components/ComposeTextPanel/i18n/fr-FR.js

@@ -1,11 +1,7 @@
 export default {
-  sendMessageFrom: 'Envoyer un message de',
+  from: 'De',
   to: 'À',
   enterNameOrNumber: 'Saisir le numéro ou le nom',
-  typeAnyToSend: 'Saisir un texte à envoyer',
-  send: 'Envoyer',
-  from: 'De',
   typeMessage: 'Saisie du message...',
-  noSMSSenderNumber: `Vous ne pouvez pas envoyer de SMS depuis votre numéro de téléphone. 
-    Veuillez contacter votre administrateur de compte.`,
+  send: 'Envoyer',
 };

src/components/ConversationPanel/i18n/de-DE.js

@@ -1,4 +1,3 @@
 export default {
-  typeAnyToSend: 'Geben Sie beliebigen Text zum Senden ein.',
   send: 'Senden',
 };

src/components/ConversationPanel/i18n/en-CA.js

@@ -1,4 +1,3 @@
 export default {
-  typeAnyToSend: 'Type any text to send',
   send: 'Send',
 };

src/components/ConversationPanel/i18n/en-GB.js

@@ -1,4 +1,3 @@
 export default {
-  typeAnyToSend: 'Type any text to send',
   send: 'Send',
 };

src/components/ConversationPanel/i18n/en-US.js

@@ -1,4 +1,4 @@
 export default {
-  typeAnyToSend: 'Type any text to send',
+  typeMessage: 'Type message...',
   send: 'Send',
 };

src/components/ConversationPanel/i18n/fr-CA.js

@@ -1,4 +1,3 @@
 export default {
-  typeAnyToSend: 'Entrer le texte à envoyer',
   send: 'Envoyer',
 };

src/components/ConversationPanel/i18n/fr-FR.js

@@ -1,4 +1,3 @@
 export default {
-  typeAnyToSend: 'Saisir un texte à envoyer',
   send: 'Envoyer',
 };

src/components/ConversationPanel/index.js

@@ -77,7 +77,7 @@ class ConversationPanel extends Component {
           <form onSubmit={this.handleSubmit}>
             <div className={styles.textField}>
               <textarea
-                placeholder={i18n.getString('typeAnyToSend', this.props.currentLocale)}
+                placeholder={i18n.getString('typeMessage', this.props.currentLocale)}
                 value={this.state.textValue}
                 maxLength="1000"
                 onChange={this.onTextChange}

src/components/RecipientHeader/i18n/en-US.js

@@ -1,3 +1,3 @@
 export default {
-  selectMatchedName: 'Select a record'
+  selectMatchedName: 'Select a Matching Record'
 };

src/components/RecipientHeader/index.js

@@ -29,17 +29,13 @@ function MatchedNameList(props) {
   const matchedNames = props.matchedNames;
   return (
     <div className={props.className}>
-      {
-        props.isSelected ?
-          <RecipientName
-            name={i18n.getString('selectMatchedName', props.currentLocale)}
-            className={styles.noClick}
-            onClick={
-              () => null
-            }
-          /> :
-          null
-      }
+      <RecipientName
+        name={i18n.getString('selectMatchedName', props.currentLocale)}
+        className={styles.noClick}
+        onClick={
+          () => null
+        }
+      />
       {
         matchedNames.map(matchedName => (
           <RecipientName
@@ -105,12 +101,15 @@ class RecipientHeader extends Component {
       );
     }
     let dropdownClass = this.props.dropdownClassName;
+    let dropdownArrowClass = classnames(dynamicsFont.arrow, styles.dropdownIcon);
     if (this.state.showDropdownList) {
       dropdownClass = classnames(dropdownClass, styles.active);
+      dropdownArrowClass = classnames(dynamicsFont.arrow, styles.dropdownActiveIcon);
     }
     const phoneNumber = recipient.phoneNumber || recipient.extensionNumber;
     let matchedNames = this.context.getMatcherContactList(phoneNumber);
-    let defaultRecipient = matchedNames.join('&');
+    const matchedNamesOnly = this.context.getMatcherContactNameList(phoneNumber);
+    let defaultRecipient = matchedNamesOnly.join('&');
     // if it has old data
     let isSelected = false;
     if (recipient.matchedNames && recipient.matchedNames[0]) {
@@ -133,7 +132,7 @@ class RecipientHeader extends Component {
           className={styles.dropdownButton}
         />
         <i
-          className={classnames(dynamicsFont.arrow, styles.dropdownIcon)}
+          className={dropdownArrowClass}
           onClick={this.toggleDropdown}
         />
         <MatchedNameList
@@ -162,6 +161,7 @@ RecipientHeader.propTypes = {
 RecipientHeader.contextTypes = {
   getRecipientName: PropTypes.func.isRequired,
   getMatcherContactList: PropTypes.func.isRequired,
+  getMatcherContactNameList: PropTypes.func.isRequired,
   changeMatchedNames: PropTypes.func.isRequired,
 };
 

src/components/RecipientHeader/styles.scss

@@ -21,6 +21,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: left;
   &:hover {
     background: #f3f3f3;
   }
@@ -51,4 +52,13 @@
   top: 12px;
   right: 0;
   cursor: pointer;
-}
+}
+
+.dropdownActiveIcon {
+  font-size: 12px;
+  position: absolute;
+  top: 12px;
+  right: 0;
+  cursor: pointer;
+  transform: rotate(180deg);
+}

src/components/RecipientsHeader/index.js

@@ -76,6 +76,7 @@ class RecipientsHeader extends Component {
       return null;
     }
     let dropdownClass = styles.dropdownList;
+    let dropdownArrowClass = classnames(dynamicsFont.arrow, styles.dropdownIcon);
     if (recipients.length === 1) {
       return (
         <h1 className={styles.container}>
@@ -90,6 +91,7 @@ class RecipientsHeader extends Component {
     const defaultRecipient = recipients[0];
     if (this.state.showDropdownList) {
       dropdownClass = classnames(dropdownClass, styles.active);
+      dropdownArrowClass = classnames(dynamicsFont.arrow, styles.dropdownActiveIcon);
     }
     return (
       <h1 className={styles.container}>
@@ -98,7 +100,7 @@ class RecipientsHeader extends Component {
           onClick={this.toggleDropdown}
         />
         <i
-          className={classnames(dynamicsFont.arrow, styles.dropdownIcon)}
+          className={dropdownArrowClass}
           onClick={this.toggleDropdown}
         />
         <RecipientList

src/components/RecipientsHeader/styles.scss

@@ -16,7 +16,7 @@
     color: inherit;
     text-decoration: none;
     display: block;
-    padding: 0 16px 0 12px;
+    padding: 0 16px 0 10px;
 
     &:focus {
       outline: none;
@@ -44,6 +44,8 @@
   z-index: 2;
   overflow: hidden;
   font-size: 13px;
+  padding-bottom: 5px;
+
   .recipient {
     display: block;
     width: 100%;
@@ -54,6 +56,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-align: left;
     &:hover {
       background: #f3f3f3;
     }
@@ -68,6 +71,15 @@
   cursor: pointer;
 }
 
+.dropdownActiveIcon {
+  font-size: 12px;
+  position: absolute;
+  top: 12px;
+  right: 0;
+  cursor: pointer;
+  transform: rotate(180deg);
+}
+
 .active {
   display: block;
 }

src/containers/ConversationPage/index.js

@@ -14,6 +14,7 @@ class ConversationPage extends Component {
       changeMatchedNames: this.props.changeMatchedNames,
       getRecipientName: recipient => (this.getRecipientName(recipient)),
       getMatcherContactList: this.props.getMatcherContactList,
+      getMatcherContactNameList: this.props.getMatcherContactNameList,
     };
   }
 
@@ -75,12 +76,14 @@ ConversationPage.propTypes = {
   formatDateTime: PropTypes.func.isRequired,
   getMatcherContactName: PropTypes.func,
   getMatcherContactList: PropTypes.func,
+  getMatcherContactNameList: PropTypes.func,
   changeMatchedNames: PropTypes.func.isRequired,
 };
 
 ConversationPage.defaultProps = {
   getMatcherContactName: null,
   getMatcherContactList: () => [],
+  getMatcherContactNameList: () => [],
 };
 
 ConversationPage.childContextTypes = {
@@ -90,6 +93,7 @@ ConversationPage.childContextTypes = {
   changeDefaultRecipient: PropTypes.func.isRequired,
   changeMatchedNames: PropTypes.func.isRequired,
   getMatcherContactList: PropTypes.func.isRequired,
+  getMatcherContactNameList: PropTypes.func.isRequired,
 };
 
 function mapStateToProps(state, props) {
@@ -111,19 +115,26 @@ function mapStateToProps(state, props) {
 function mapDispatchToProps(dispatch, props) {
   let getMatcherContactName;
   let getMatcherContactList;
+  let getMatcherContactNameList;
   if (props.contactMatcher && props.contactMatcher.ready) {
     getMatcherContactList = (phoneNumber) => {
       const matcherNames = props.contactMatcher.dataMapping[phoneNumber];
       if (matcherNames && matcherNames.length > 0) {
         return matcherNames.map(matcher =>
-          `${matcher.name}|${matcher.phoneNumbers[0].phoneType}`
+          `${matcher.name} | ${matcher.phoneNumbers[0].phoneType}`
         );
       }
       return [];
     };
-
+    getMatcherContactNameList = (phoneNumber) => {
+      const matcherNames = props.contactMatcher.dataMapping[phoneNumber];
+      if (matcherNames && matcherNames.length > 0) {
+        return matcherNames.map(matcher => matcher.name);
+      }
+      return [];
+    };
     getMatcherContactName = (phoneNumber) => {
-      const matcherNames = getMatcherContactList(phoneNumber);
+      const matcherNames = getMatcherContactNameList(phoneNumber);
       if (matcherNames && matcherNames.length > 0) {
         return matcherNames.join('&');
       }
@@ -148,6 +159,7 @@ function mapDispatchToProps(dispatch, props) {
     }),
     getMatcherContactName,
     getMatcherContactList,
+    getMatcherContactNameList,
   };
 }