Skip to content

Commit 9521f4e

Browse files
embbnuxembbnux
authored
show contact name in active call page (#262)
* match contact name * adjust user name style * show avatar
1 parent 39f2f0b commit 9521f4e

File tree

8 files changed

+259
-48
lines changed

8 files changed

+259
-48
lines changed

‎dev-server/Phone.js‎

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@ import RcModule from 'ringcentral-integration/lib/RcModule';
66

77
import AccountExtension from 'ringcentral-integration/modules/AccountExtension';
88
import AccountInfo from 'ringcentral-integration/modules/AccountInfo';
9+
import AccountPhoneNumber from 'ringcentral-integration/modules/AccountPhoneNumber';
10+
import AddressBook from 'ringcentral-integration/modules/AddressBook';
911
import Alert from 'ringcentral-integration/modules/Alert';
1012
import Auth from 'ringcentral-integration/modules/Auth';
1113
import Brand from 'ringcentral-integration/modules/Brand';
1214
import Call from 'ringcentral-integration/modules/Call';
1315
import CallingSettings from 'ringcentral-integration/modules/CallingSettings';
16+
import Contacts from 'ringcentral-integration/modules/Contacts';
1417
import ConnectivityMonitor from 'ringcentral-integration/modules/ConnectivityMonitor';
1518
import DialingPlan from 'ringcentral-integration/modules/DialingPlan';
1619
import ExtensionDevice from 'ringcentral-integration/modules/ExtensionDevice';
@@ -239,6 +242,12 @@ export default class Phone extends RcModule {
239242
tabManager: this.tabManager,
240243
getState: () => this.state.forwardingNumber,
241244
}));
245+
this.addModule('contactMatcher', new ContactMatcher({
246+
...options,
247+
storage: this.storage,
248+
getState: () => this.state.contactMatcher,
249+
}));
250+
reducers.contactMatcher = this.contactMatcher.reducer;
242251
this.addModule('webphone', new Webphone({
243252
appKey: apiConfig.appKey,
244253
appName: 'RingCentral Widget',
@@ -248,6 +257,7 @@ export default class Phone extends RcModule {
248257
client: this.client,
249258
storage: this.storage,
250259
rolesAndPermissions: this.rolesAndPermissions,
260+
contactMatcher: this.contactMatcher,
251261
webphoneLogLevel: 3,
252262
extensionDevice: this.extensionDevice,
253263
getState: () => this.state.webphone,
@@ -438,6 +448,9 @@ export default class Phone extends RcModule {
438448
contactMatcher: this.contactMatcher,
439449
webphone: this.webphone,
440450
onRinging: async () => {
451+
if (this.webphone._webphone) {
452+
return;
453+
}
441454
// TODO refactor some of these logic into appropriate modules
442455
this.router.push('/calls');
443456
},
@@ -454,12 +467,6 @@ export default class Phone extends RcModule {
454467
getState: () => this.state.callHistory,
455468
}));
456469
reducers.callHistory = this.callHistory.reducer;
457-
this.addModule('contactMatcher', new ContactMatcher({
458-
...options,
459-
storage: this.storage,
460-
getState: () => this.state.contactMatcher,
461-
}));
462-
reducers.contactMatcher = this.contactMatcher.reducer;
463470
this.addModule('activityMatcher', new ActivityMatcher({
464471
...options,
465472
storage: this.storage,
@@ -477,6 +484,34 @@ export default class Phone extends RcModule {
477484
getState: () => this.state.callLogger,
478485
}));
479486
reducers.callLogger = this.callLogger.reducer;
487+
this.addModule('accountPhoneNumber', new AccountPhoneNumber({
488+
auth: this.auth,
489+
client: this.client,
490+
storage: this.storage,
491+
tabManager: this.tabManager,
492+
getState: () => this.state.accountPhoneNumber,
493+
}));
494+
reducers.accountPhoneNumber = this.accountPhoneNumber.reducer;
495+
this.addModule('addressBook', new AddressBook({
496+
client: this.client,
497+
auth: this.auth,
498+
storage: this.storage,
499+
getState: () => this.state.addressBook,
500+
}));
501+
reducers.addressBook = this.addressBook.reducer;
502+
this.addModule('contacts', new Contacts({
503+
client: this.client,
504+
addressBook: this.addressBook,
505+
accountPhoneNumber: this.accountPhoneNumber,
506+
accountExtension: this.accountExtension,
507+
getState: () => this.state.contacts,
508+
}));
509+
reducers.contacts = this.contacts.reducer;
510+
this.contactMatcher.addSearchProvider({
511+
name: 'contacts',
512+
searchFn: async ({ queries }) => this.contacts.matchContacts({ phoneNumbers: queries }),
513+
readyCheckFn: () => this.contacts.ready,
514+
});
480515
this.addModule('conversationMatcher', new ConversationMatcher({
481516
storage: this.storage,
482517
getState: () => this.state.conversationMatcher,

‎dev-server/containers/App/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,13 @@ export default function App({
4545
webphone={phone.webphone}
4646
regionSettings={phone.regionSettings}
4747
router={phone.router}
48+
contactMatcher={phone.contactMatcher}
49+
getAvatarUrl={
50+
async (contact) => {
51+
const avatarUrl = await phone.contacts.getImageProfile(contact);
52+
return avatarUrl;
53+
}
54+
}
4855
>
4956
<AlertContainer
5057
locale={phone.locale}

‎src/components/ActiveCallPanel/index.js‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Panel from '../Panel';
77
import DurationCounter from '../DurationCounter';
88
import ActiveCallPad from '../ActiveCallPad';
99
import ActiveCallDialPad from '../ActiveCallDialPad';
10-
10+
import ContactDisplay from '../ContactDisplay';
1111
import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
1212
import styles from './styles.scss';
1313

@@ -19,17 +19,38 @@ function CallInfo(props) {
1919
<DurationCounter startTime={props.startTime} />
2020
</span>
2121
) : null;
22+
let avatar;
23+
if (props.avatarUrl) {
24+
avatar = (<img src={props.avatarUrl} alt="avatar" />);
25+
} else {
26+
avatar = (<i className={classnames(dynamicsFont.portrait, styles.icon)} />);
27+
}
2228
return (
2329
<div className={styles.userInfo}>
2430
<div className={styles.avatarContainer}>
2531
<div className={styles.avatar}>
26-
<i className={classnames(dynamicsFont.portrait, styles.icon)} />
32+
{avatar}
2733
</div>
2834
</div>
2935
<div className={styles.infoContent}>
3036
<div className={styles.userName}>
31-
{props.name}
32-
{ timeCounter }
37+
<ContactDisplay
38+
className={styles.contactDisplay}
39+
contactMatches={props.nameMatches}
40+
phoneNumber={props.phoneNumber}
41+
fallBackName={props.fallBackName}
42+
currentLocale={props.currentLocale}
43+
areaCode={props.areaCode}
44+
countryCode={props.countryCode}
45+
selectClassName={styles.contactNameSelect}
46+
showType={false}
47+
disabled={false}
48+
selected={props.selectedMatcherIndex}
49+
onSelectContact={props.onSelectMatcherName}
50+
isLogging={false}
51+
enableContactFallback
52+
/>
53+
{timeCounter}
3354
</div>
3455
<div className={styles.userPhoneNumber}>
3556
{props.formatPhone(props.phoneNumber)}
@@ -40,15 +61,23 @@ function CallInfo(props) {
4061
}
4162

4263
CallInfo.propTypes = {
43-
name: PropTypes.string.isRequired,
4464
phoneNumber: PropTypes.string,
4565
formatPhone: PropTypes.func.isRequired,
4666
startTime: PropTypes.number,
67+
nameMatches: PropTypes.array.isRequired,
68+
fallBackName: PropTypes.string.isRequired,
69+
areaCode: PropTypes.string.isRequired,
70+
countryCode: PropTypes.string.isRequired,
71+
currentLocale: PropTypes.string.isRequired,
72+
selectedMatcherIndex: PropTypes.number.isRequired,
73+
onSelectMatcherName: PropTypes.func.isRequired,
74+
avatarUrl: PropTypes.string,
4775
};
4876

4977
CallInfo.defaultProps = {
5078
phoneNumber: null,
5179
startTime: null,
80+
avatarUrl: null,
5281
};
5382

5483
class ActiveCallPanel extends Component {
@@ -74,10 +103,17 @@ class ActiveCallPanel extends Component {
74103
render() {
75104
const userInfo = this.state.isShowKeyPad ? null : (
76105
<CallInfo
77-
name={this.props.userName}
106+
currentLocale={this.props.currentLocale}
107+
nameMatches={this.props.nameMatches}
108+
fallBackName={this.props.fallBackName}
78109
phoneNumber={this.props.phoneNumber}
79110
formatPhone={this.props.formatPhone}
80111
startTime={this.props.startTime}
112+
areaCode={this.props.areaCode}
113+
countryCode={this.props.countryCode}
114+
selectedMatcherIndex={this.props.selectedMatcherIndex}
115+
onSelectMatcherName={this.props.onSelectMatcherName}
116+
avatarUrl={this.props.avatarUrl}
81117
/>
82118
);
83119
const buttonsPad = this.state.isShowKeyPad ? null : (
@@ -130,7 +166,8 @@ class ActiveCallPanel extends Component {
130166

131167
ActiveCallPanel.propTypes = {
132168
phoneNumber: PropTypes.string,
133-
userName: PropTypes.string,
169+
nameMatches: PropTypes.array.isRequired,
170+
fallBackName: PropTypes.string.isRequired,
134171
currentLocale: PropTypes.string.isRequired,
135172
startTime: PropTypes.number,
136173
isOnMute: PropTypes.bool,
@@ -148,6 +185,11 @@ ActiveCallPanel.propTypes = {
148185
onKeyPadChange: PropTypes.func.isRequired,
149186
formatPhone: PropTypes.func.isRequired,
150187
children: PropTypes.node,
188+
areaCode: PropTypes.string.isRequired,
189+
countryCode: PropTypes.string.isRequired,
190+
selectedMatcherIndex: PropTypes.number.isRequired,
191+
onSelectMatcherName: PropTypes.func.isRequired,
192+
avatarUrl: PropTypes.string,
151193
};
152194

153195
ActiveCallPanel.defaultProps = {
@@ -158,6 +200,7 @@ ActiveCallPanel.defaultProps = {
158200
isOnRecord: false,
159201
phoneNumber: null,
160202
children: undefined,
203+
avatarUrl: null,
161204
};
162205

163206
export default ActiveCallPanel;

‎src/components/ActiveCallPanel/styles.scss‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ $avatar-width: 60px;
1111
left: 0;
1212
z-index: 10;
1313
background: #ffffff;
14+
text-align: center;
1415
}
1516

1617
.backButton {
@@ -34,12 +35,13 @@ $avatar-width: 60px;
3435
}
3536

3637
.userInfo {
38+
display: inline-block;
3739
text-align: left;
3840
color: $lightblack;
3941
margin-bottom: 8px;
4042
margin-top: 15px;
41-
margin-left: 18%;
42-
margin-right: 8%;
43+
margin-left: auto;
44+
margin-right: auto;
4345
}
4446

4547
.avatarContainer {
@@ -54,13 +56,18 @@ $avatar-width: 60px;
5456
border-radius: 50px;
5557
margin-left: auto;
5658
margin-right: auto;
57-
opacity: 0.3;
5859
color: $primary-color;
5960
margin-bottom: 5px;
61+
overflow: hidden;
6062

6163
.icon {
6264
display: block;
6365
font-size: 38px;
66+
opacity: 0.3;
67+
}
68+
69+
img {
70+
width: 100%;
6471
}
6572
}
6673

@@ -79,6 +86,15 @@ $avatar-width: 60px;
7986
}
8087
}
8188

89+
.contactDisplay {
90+
display: inline-block;
91+
line-height: 16px;
92+
}
93+
94+
.contactNameSelect {
95+
width: 100%;
96+
}
97+
8298
.userPhoneNumber {
8399
font-size: 12px;
84100
color: $grey-light;

‎src/components/ContactDisplay/index.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ const displayFomatter = ({ entityName, entityType, phoneNumber }) => {
1212
return `${entityName} | ${phoneSourceNames.getString(entityType)} ${phoneNumber}`;
1313
} else if (entityName && entityType) {
1414
return `${entityName} | ${phoneSourceNames.getString(entityType)}`;
15+
} else if (entityName) {
16+
return entityName;
1517
} else if (phoneNumber) {
1618
return `${phoneNumber}`;
1719
}
@@ -32,6 +34,8 @@ export default function ContactDisplay({
3234
phoneNumber,
3335
currentLocale,
3436
groupNumbers,
37+
showType,
38+
selectClassName,
3539
}) {
3640
let contentEl;
3741
if (groupNumbers) {
@@ -74,7 +78,7 @@ export default function ContactDisplay({
7478
];
7579
contentEl = (
7680
<DropdownSelect
77-
className={styles.select}
81+
className={classnames(styles.select, selectClassName)}
7882
value={`${selected}`}
7983
onChange={onSelectContact}
8084
disabled={disabled || isLogging}
@@ -89,7 +93,7 @@ export default function ContactDisplay({
8993
renderValue={value => (
9094
displayFomatter({
9195
entityName: options[value].name,
92-
entityType: options[value].entityType,
96+
entityType: showType && options[value].entityType,
9397
})
9498
)}
9599
renderTitle={entity => (
@@ -130,6 +134,8 @@ ContactDisplay.propTypes = {
130134
phoneNumber: PropTypes.string,
131135
currentLocale: PropTypes.string.isRequired,
132136
groupNumbers: PropTypes.arrayOf(PropTypes.string),
137+
showType: PropTypes.bool,
138+
selectClassName: PropTypes.string,
133139
};
134140
ContactDisplay.defaultProps = {
135141
className: undefined,
@@ -138,4 +144,6 @@ ContactDisplay.defaultProps = {
138144
phoneNumber: undefined,
139145
groupNumbers: undefined,
140146
enableContactFallback: undefined,
147+
showType: true,
148+
selectClassName: undefined,
141149
};

0 commit comments

Comments
 (0)