enhancement active call contact display (#309)

* enhancement active call contact display

* fix typo

* upgrade commons

Author: embbnux

dev-server/containers/App/index.js

@@ -51,11 +51,13 @@ export default function App({
               />
               <IncomingCallPage
                 locale={phone.locale}
+                brand={phone.brand}
                 webphone={phone.webphone}
                 forwardingNumber={phone.forwardingNumber}
                 regionSettings={phone.regionSettings}
                 router={phone.router}
                 contactMatcher={phone.contactMatcher}
+                showContactDisplayPlaceholder={false}
                 getAvatarUrl={
                   async (contact) => {
                     const avatarUrl = await phone.contacts.getImageProfile(contact);
@@ -180,10 +182,12 @@ export default function App({
               path="/calls/active"
               component={() => (
                 <CallCtrlPage
+                  brand={phone.brand}
                   locale={phone.locale}
                   contactMatcher={phone.contactMatcher}
                   webphone={phone.webphone}
                   regionSettings={phone.regionSettings}
+                  showContactDisplayPlaceholder={false}
                   onAdd={() => {
                     phone.router.push('/');
                   }}

package.json

@@ -84,7 +84,7 @@
     "redux-thunk": "^2.1.0",
     "ringcentral": "^3.1.1",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.0-rc16",
+    "ringcentral-integration": "^0.7.0-rc17",
     "sass-loader": "^6.0.5",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",

src/components/ActiveCallPanel/index.js

@@ -41,13 +41,14 @@ function CallInfo(props) {
             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
+            brand={props.brand}
+            showPlaceholder={props.showContactDisplayPlaceholder}
           />
           {timeCounter}
         </div>
@@ -71,12 +72,16 @@ CallInfo.propTypes = {
   selectedMatcherIndex: PropTypes.number.isRequired,
   onSelectMatcherName: PropTypes.func.isRequired,
   avatarUrl: PropTypes.string,
+  brand: PropTypes.string,
+  showContactDisplayPlaceholder: PropTypes.bool,
 };
 
 CallInfo.defaultProps = {
   phoneNumber: null,
   startTime: null,
   avatarUrl: null,
+  brand: 'RingCentral',
+  showContactDisplayPlaceholder: true,
 };
 
 function ActiveCallPanel({
@@ -106,6 +111,8 @@ function ActiveCallPanel({
   hangup,
   onAdd,
   children,
+  showContactDisplayPlaceholder,
+  brand,
 }) {
   return (
     <div className={styles.root}>
@@ -132,6 +139,8 @@ function ActiveCallPanel({
           selectedMatcherIndex={selectedMatcherIndex}
           onSelectMatcherName={onSelectMatcherName}
           avatarUrl={avatarUrl}
+          brand={brand}
+          showContactDisplayPlaceholder={showContactDisplayPlaceholder}
         />
         <ActiveCallPad
           className={styles.callPad}
@@ -182,6 +191,8 @@ ActiveCallPanel.propTypes = {
   onSelectMatcherName: PropTypes.func.isRequired,
   avatarUrl: PropTypes.string,
   backButtonLabel: PropTypes.string,
+  brand: PropTypes.string,
+  showContactDisplayPlaceholder: PropTypes.bool,
 };
 
 ActiveCallPanel.defaultProps = {
@@ -193,6 +204,8 @@ ActiveCallPanel.defaultProps = {
   children: undefined,
   avatarUrl: null,
   backButtonLabel: 'Active Calls',
+  brand: 'RingCentral',
+  showContactDisplayPlaceholder: true,
 };
 
 export default ActiveCallPanel;

src/components/ActiveCallPanel/styles.scss

@@ -91,10 +91,6 @@ $avatar-width: 60px;
   line-height: 16px;
 }
 
-.contactNameSelect {
-  width: 100%;
-}
-
 .userPhoneNumber {
   font-size: 12px;
   color: $grey-light;

src/components/CallCtrlPanel/index.js

@@ -64,6 +64,8 @@ class CallCtrlPanel extends Component {
         selectedMatcherIndex={this.props.selectedMatcherIndex}
         onSelectMatcherName={this.props.onSelectMatcherName}
         avatarUrl={this.props.avatarUrl}
+        brand={this.props.brand}
+        showContactDisplayPlaceholder={this.props.showContactDisplayPlaceholder}
       >
         {this.props.children}
       </ActiveCallPanel>
@@ -100,6 +102,8 @@ CallCtrlPanel.propTypes = {
   onSelectMatcherName: PropTypes.func.isRequired,
   avatarUrl: PropTypes.string,
   backButtonLabel: PropTypes.string,
+  brand: PropTypes.string,
+  showContactDisplayPlaceholder: PropTypes.bool,
 };
 
 CallCtrlPanel.defaultProps = {
@@ -113,6 +117,8 @@ CallCtrlPanel.defaultProps = {
   backButtonLabel: 'Active Calls',
   sessionId: undefined,
   callStatus: null,
+  brand: 'RingCentral',
+  showContactDisplayPlaceholder: true,
 };
 
 export default CallCtrlPanel;

src/components/ContactDisplay/index.js

@@ -2,16 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import formatNumber from 'ringcentral-integration/lib/formatNumber';
+import formatMessage from 'format-message';
 import DropdownSelect from '../DropdownSelect';
 import i18n from './i18n';
 import styles from './styles.scss';
 import phoneSourceNames from '../../lib/phoneSourceNames';
 
-const displayFomatter = ({ entityName, entityType, phoneNumber }) => {
+const displayFomatter = ({
+  entityName,
+  entityType,
+  phoneNumber,
+  currentLocale,
+  brand,
+}) => {
+  let typeName;
+  if (entityType) {
+    typeName = formatMessage(
+      phoneSourceNames.getString(entityType, currentLocale),
+      { brand }
+    );
+  }
   if (phoneNumber && entityName && entityType) {
-    return `${entityName} | ${phoneSourceNames.getString(entityType)} ${phoneNumber}`;
+    return `${entityName} | ${typeName} ${phoneNumber}`;
   } else if (entityName && entityType) {
-    return `${entityName} | ${phoneSourceNames.getString(entityType)}`;
+    return `${entityName} | ${typeName}`;
   } else if (entityName) {
     return entityName;
   } else if (phoneNumber) {
@@ -36,6 +50,8 @@ export default function ContactDisplay({
   groupNumbers,
   showType,
   selectClassName,
+  showPlaceholder,
+  brand,
 }) {
   let contentEl;
   if (groupNumbers) {
@@ -76,31 +92,41 @@ export default function ContactDisplay({
     const options = [
       ...contactMatches,
     ];
+    let placeholder;
+    if (showPlaceholder) {
+      placeholder = i18n.getString('select', currentLocale);
+    }
     contentEl = (
       <DropdownSelect
         className={classnames(styles.select, selectClassName)}
         value={`${selected}`}
         onChange={onSelectContact}
         disabled={disabled || isLogging}
         options={options}
-        placeholder={i18n.getString('select', currentLocale)}
+        placeholder={placeholder}
         renderFunction={entity => (
           displayFomatter({
             entityName: entity.name,
             entityType: entity.entityType,
+            brand,
+            currentLocale,
           })
         )}
         renderValue={value => (
           displayFomatter({
             entityName: options[value].name,
             entityType: showType && options[value].entityType,
+            brand,
+            currentLocale,
           })
         )}
         renderTitle={entity => (
           entity ? displayFomatter({
             entityName: entity.name,
             entityType: entity.entityType,
             phoneNumber,
+            brand,
+            currentLocale,
           }) : phoneNumber)
         }
         dropdownAlign="left"
@@ -136,6 +162,8 @@ ContactDisplay.propTypes = {
   groupNumbers: PropTypes.arrayOf(PropTypes.string),
   showType: PropTypes.bool,
   selectClassName: PropTypes.string,
+  showPlaceholder: PropTypes.bool,
+  brand: PropTypes.string,
 };
 ContactDisplay.defaultProps = {
   className: undefined,
@@ -146,4 +174,6 @@ ContactDisplay.defaultProps = {
   enableContactFallback: undefined,
   showType: true,
   selectClassName: undefined,
+  showPlaceholder: true,
+  brand: undefined,
 };

src/components/ContactDisplay/styles.scss

@@ -12,13 +12,18 @@
 
 .select {
   display: inline-block;
-  width: 180px;
+  width: 100%;
   height: 25px;
   border: 0px;
   button {
     margin: 0px;
     font-size: 14px;
   }
+  ul {
+    width: 200px;
+    left: 50%;
+    margin-left: -100px;
+  }
 }
 
 .select:after {

src/components/IncomingCallPanel/index.js

@@ -26,7 +26,6 @@ function UserInfo(props) {
       </div>
       <ContactDisplay
         className={styles.userName}
-        selectClassName={styles.contactNameSelect}
         contactMatches={props.nameMatches}
         phoneNumber={props.phoneNumber}
         fallBackName={props.fallBackName}
@@ -39,6 +38,8 @@ function UserInfo(props) {
         onSelectContact={props.onSelectMatcherName}
         isLogging={false}
         enableContactFallback
+        brand={props.brand}
+        showPlaceholder={props.showContactDisplayPlaceholder}
       />
       <div className={styles.userPhoneNumber}>
         {props.formatPhone(props.phoneNumber)}
@@ -58,12 +59,16 @@ UserInfo.propTypes = {
   selectedMatcherIndex: PropTypes.number.isRequired,
   onSelectMatcherName: PropTypes.func.isRequired,
   avatarUrl: PropTypes.string,
+  brand: PropTypes.string,
+  showContactDisplayPlaceholder: PropTypes.bool,
 };
 
 UserInfo.defaultProps = {
   className: null,
   phoneNumber: null,
   avatarUrl: null,
+  brand: 'RingCentral',
+  showContactDisplayPlaceholder: true,
 };
 
 export default function IncomingCallPanel(props) {
@@ -84,6 +89,8 @@ export default function IncomingCallPanel(props) {
         selectedMatcherIndex={props.selectedMatcherIndex}
         onSelectMatcherName={props.onSelectMatcherName}
         avatarUrl={props.avatarUrl}
+        brand={props.brand}
+        showContactDisplayPlaceholder={props.showContactDisplayPlaceholder}
       />
       <IncomingCallPad
         forwardingNumbers={props.forwardingNumbers}
@@ -120,11 +127,15 @@ IncomingCallPanel.propTypes = {
   onBackButtonClick: PropTypes.func.isRequired,
   forwardingNumbers: PropTypes.array.isRequired,
   onForward: PropTypes.func.isRequired,
+  brand: PropTypes.string,
+  showContactDisplayPlaceholder: PropTypes.bool,
 };
 
 IncomingCallPanel.defaultProps = {
   className: null,
   phoneNumber: null,
   children: undefined,
   avatarUrl: null,
+  brand: 'RingCentral',
+  showContactDisplayPlaceholder: true,
 };

src/components/IncomingCallPanel/styles.scss

@@ -43,10 +43,6 @@
   line-height: 25px;
 }
 
-.contactNameSelect {
-  width: 100%;
-}
-
 .userPhoneNumber {
   font-size: 12px;
   color: $grey-light;