diff --git a/src/components/CallingSettingsPanel/i18n/en-US.js b/src/components/CallingSettingsPanel/i18n/en-US.js index 895f3b6085..d1b7ebc7ab 100644 --- a/src/components/CallingSettingsPanel/i18n/en-US.js +++ b/src/components/CallingSettingsPanel/i18n/en-US.js @@ -11,15 +11,12 @@ export default { ringoutHint: 'Ring me at my location first, then connect the called party', myLocationLabel: 'My Location', press1ToStartCallLabel: 'Prompt me to dial 1 before connecting the call', - [`${callingOptions.browser}Tooltip`]: `Use this option to make and receive calls - using your computer’s microphone and speaker.`, - [`${callingOptions.softphone}Tooltip`]: `Use this option to make and receive calls - using your {brand} for Desktop app.`, + [`${callingOptions.browser}Tooltip`]: 'Use this option to make and receive calls using your computer’s microphone and speaker.', + [`${callingOptions.softphone}Tooltip`]: 'Use this option to make and receive calls using your {brand} for Desktop app.', [`${callingOptions.myphone}Tooltip`]: 'Use this option to make calls using your {brand} phone.', - [`${callingOptions.otherphone}Tooltip`]: `Use this option to make calls using your other phones - such as home or cell phones that you have added in your {brand} Extension. - For the call you make, this phone will ring first then the party you called.`, - [`${callingOptions.customphone}Tooltip`]: `Use this option to make calls using any phone of - your choice by entering a valid phone number in the field below. - For the call you make, this phone will ring first then the party you called.`, + [`${callingOptions.myphone}Tooltip1`]: 'For the call you make, your {brand} phone will ring first then the party you called.', + [`${callingOptions.otherphone}Tooltip`]: 'Use this option to make calls using your other phones such as home or cell phones that you have added in your {brand} Extension.', + [`${callingOptions.otherphone}Tooltip1`]: 'For the call you make, this phone will ring first then the party you called.', + [`${callingOptions.customphone}Tooltip`]: 'Use this option to make calls using any phone of your choice by entering a valid phone number in the field below.', + [`${callingOptions.customphone}Tooltip1`]: 'For the call you make, this phone will ring first then the party you called.', }; diff --git a/src/components/CallingSettingsPanel/index.js b/src/components/CallingSettingsPanel/index.js index 2afdc538f2..546e9c60a9 100644 --- a/src/components/CallingSettingsPanel/index.js +++ b/src/components/CallingSettingsPanel/index.js @@ -95,10 +95,37 @@ export default class CallingSettingsPanel extends Component { ringoutPrompt: checked, }); } + + getTooltipContent() { + let contentKeys; + if (this.state.callWith === callingOptions.browser + || this.state.callWith === callingOptions.softphone + ) { + contentKeys = [`${this.state.callWith}Tooltip`]; + } else { + contentKeys = [`${this.state.callWith}Tooltip`, `${this.state.callWith}Tooltip1`]; + } + return ( +
+ { + contentKeys.map(contentKey => ( +
+ {formatMessage( + i18n.getString(contentKey, this.props.currentLocale), + { brand: this.props.brand } + )} +
+ )) + } +
+ ); + } + renderHandler = (option) => { const brand = this.props.brand; return formatMessage(i18n.getString(option, this.props.currentLocale), { brand }); } + render() { const { currentLocale, @@ -173,16 +200,7 @@ export default class CallingSettingsPanel extends Component { ) : null; - const toolTip = ( -
- { - formatMessage( - i18n.getString(`${this.state.callWith}Tooltip`, currentLocale), - { brand: this.props.brand } - ) - } -
- ); + const toolTip = this.getTooltipContent(); return (
} + getTooltipContainer={() => this.tooltipContainner} > @@ -220,6 +242,12 @@ export default class CallingSettingsPanel extends Component { disabled={disabled} titleEnabled /> +
{ + this.tooltipContainner = tooltipContainner; + }} + /> {ringout} diff --git a/src/components/CallingSettingsPanel/styles.scss b/src/components/CallingSettingsPanel/styles.scss index b4ba747602..aef3114e16 100644 --- a/src/components/CallingSettingsPanel/styles.scss +++ b/src/components/CallingSettingsPanel/styles.scss @@ -30,6 +30,15 @@ color: #848484; } +.tooltipContainner { + width: 100%; + height: 1px; + :global .rc-tooltip { + opacity: 1; + left: 0!important; + } +} + .ringoutHint { padding: 15px 0px; @include primary-font;