show tooltip on calling setting page (#266)

* show tooltip on calling setting page

* remove unused style

Author: embbnux

dev-server/Phone.js

@@ -13,6 +13,7 @@ import Call from 'ringcentral-integration/modules/Call';
 import CallingSettings from 'ringcentral-integration/modules/CallingSettings';
 import ConnectivityMonitor from 'ringcentral-integration/modules/ConnectivityMonitor';
 import DialingPlan from 'ringcentral-integration/modules/DialingPlan';
+import ExtensionDevice from 'ringcentral-integration/modules/ExtensionDevice';
 import Environment from 'ringcentral-integration/modules/Environment';
 import ExtensionInfo from 'ringcentral-integration/modules/ExtensionInfo';
 import ExtensionPhoneNumber from 'ringcentral-integration/modules/ExtensionPhoneNumber';
@@ -185,6 +186,14 @@ export default class Phone extends RcModule {
       getState: () => this.state.accountInfo,
     }));
     reducers.accountInfo = this.accountInfo.reducer;
+    this.addModule('extensionDevice', new ExtensionDevice({
+      auth: this.auth,
+      client: this.client,
+      storage: this.storage,
+      tabManager: this.tabManager,
+      getState: () => this.state.extensionDevice,
+    }));
+    reducers.extensionDevice = this.extensionDevice.reducer;
     this.addModule('extensionInfo', new ExtensionInfo({
       ...options,
       auth: this.auth,
@@ -239,6 +248,8 @@ export default class Phone extends RcModule {
       client: this.client,
       storage: this.storage,
       rolesAndPermissions: this.rolesAndPermissions,
+      webphoneLogLevel: 3,
+      extensionDevice: this.extensionDevice,
       getState: () => this.state.webphone,
     }));
     reducers.webphone = this.webphone.reducer;

dev-server/webpack.config.js

@@ -66,7 +66,7 @@ const base = {
       },
       {
         test: /\.ogg$/,
-        use: 'url-loader?publicPath=./&name=audio/[name]_[hash].[ext]',
+        use: 'file-loader?publicPath=./&name=audio/[name]_[hash].[ext]',
       },
     ],
   },

package.json

@@ -83,7 +83,7 @@
     "redux-thunk": "^2.1.0",
     "ringcentral": "^3.1.1",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.0-rc1",
+    "ringcentral-integration": "^0.7.0-rc3",
     "sass-loader": "^6.0.5",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",
@@ -100,6 +100,7 @@
     "font-awesome": "^4.7.0",
     "normalize-css": "^2.3.1",
     "prop-types": "^15.5.10",
+    "rc-tooltip": "^3.4.6",
     "react-svg-loader": "^1.1.1",
     "through2": "^2.0.3"
   }

src/components/ActiveCallButton/styles.scss

@@ -1,4 +1,5 @@
 @import '../../lib/commonStyles/colors.scss';
+@import '../../lib/commonStyles/fonts.scss';
 
 .root {
   text-align: center;
@@ -20,8 +21,7 @@
 }
 
 .buttonTitle {
+  @include secondary-font;
   font-size: 12px;
   padding: 5px 0;
-  color: #797979;
-  font-family: HelveticaNeue;
 }

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

@@ -11,4 +11,15 @@ 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.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.`,
 };

src/components/CallingSettingsPanel/index.js

@@ -5,6 +5,9 @@ import formatMessage from 'format-message';
 
 import callingOptions from 'ringcentral-integration/modules/CallingSettings/callingOptions';
 import 'font-awesome/css/font-awesome.css';
+import Tooltip from 'rc-tooltip';
+import 'rc-tooltip/assets/bootstrap_white.css';
+import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
 import styles from './styles.scss';
 import i18n from './i18n';
 
@@ -170,6 +173,16 @@ export default class CallingSettingsPanel extends Component {
         </div>
       ) : null;
 
+    const toolTip = (
+      <div style={{ width: 150 }}>
+        {
+          formatMessage(
+            i18n.getString(`${this.state.callWith}Tooltip`, currentLocale),
+            { brand: this.props.brand }
+          )
+        }
+      </div>
+    );
     return (
       <div className={classnames(styles.root, className)}>
         <BackHeader
@@ -181,7 +194,21 @@ export default class CallingSettingsPanel extends Component {
         <Panel className={styles.content}>
           <InputField
             className={styles.inputField}
-            label={i18n.getString('makeCallsWith', currentLocale)} noBorder>
+            label={
+              <span>
+                {i18n.getString('makeCallsWith', currentLocale)}
+                <Tooltip
+                  placement="bottom"
+                  trigger="click"
+                  overlay={toolTip}
+                  arrowContent={<div className="rc-tooltip-arrow-inner" />}
+                >
+                  <i className={classnames(dynamicsFont.information, styles.infoIcon)} />
+                </Tooltip>
+              </span>
+            }
+            noBorder
+          >
             <Select
               className={styles.select}
               value={this.state.callWith}

src/components/CallingSettingsPanel/styles.scss

@@ -24,10 +24,17 @@
   @include primary-font;
 }
 
+.infoIcon {
+  margin-left: 6px;
+  font-size: 14px;
+  color: #848484;
+}
+
 .ringoutHint {
   padding: 15px 0px;
   @include primary-font;
 }
+
 .select {
   border: 1px solid #a6a6a6;
   border-radius: 2px;

yarn.lock

@@ -54,6 +54,12 @@ acorn@^5.0.0, acorn@^5.0.1, acorn@^5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"
 
+[email protected]:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/add-dom-event-listener/-/add-dom-event-listener-1.0.2.tgz#8faed2c41008721cf111da1d30d995b85be42bed"
+  dependencies:
+    object-assign "4.x"
+
 agent-base@2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-2.1.1.tgz#d6de10d5af6132d5bd692427d46fc538539094c7"
@@ -1095,7 +1101,7 @@ babel-register@^6.24.1, babel-register@^6.9.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2:
+babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
@@ -1580,10 +1586,20 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
+component-classes@^1.2.5:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/component-classes/-/component-classes-1.2.6.tgz#c642394c3618a4d8b0b8919efccbbd930e5cd691"
+  dependencies:
+    component-indexof "0.0.3"
+
 component-emitter@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
 
+[email protected]:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-indexof/-/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24"
+
 compressible@~2.0.8:
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.10.tgz#feda1c7f7617912732b29bf8cf26252a20b9eecd"
@@ -1720,7 +1736,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.5.1, create-react-class@^15.5.3:
+create-react-class@15.x, create-react-class@^15.5.1, create-react-class@^15.5.3:
   version "15.5.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.3.tgz#fb0f7cae79339e9a179e194ef466efa3923820fe"
   dependencies:
@@ -1763,6 +1779,12 @@ crypto-browserify@^3.11.0:
     public-encrypt "^4.0.0"
     randombytes "^2.0.0"
 
+[email protected]:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/css-animation/-/css-animation-1.3.2.tgz#df515820ef5903733ad2db0999403b3037b8b880"
+  dependencies:
+    component-classes "^1.2.5"
+
 [email protected]:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -2082,6 +2104,10 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
+[email protected]:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.6.2.tgz#b14e64917c25de6b4055227339b4d64f4b7db885"
+
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -2630,12 +2656,6 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
-file-loader@^0.10.1:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.10.1.tgz#815034119891fc6441fb5a64c11bc93c22ddd842"
-  dependencies:
-    loader-utils "^1.0.2"
-
 file-loader@^0.11.2:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.11.2.tgz#4ff1df28af38719a6098093b88c82c71d1794a34"
@@ -4204,7 +4224,7 @@ lodash.isstring@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
 
-lodash.keys@^3.0.0:
+lodash.keys@^3.0.0, lodash.keys@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
   dependencies:
@@ -4748,14 +4768,14 @@ [email protected]:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
 
+[email protected], object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
 object-assign@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
 
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-
 object-is@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
@@ -5446,7 +5466,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@~15.5.7:
+prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -5568,6 +5588,49 @@ raw-body@2:
     iconv-lite "0.4.15"
     unpipe "1.0.0"
 
+[email protected]:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-2.3.4.tgz#d83bdab7560f0142e72a3de1d495dab6ba225249"
+  dependencies:
+    dom-align "1.x"
+    prop-types "^15.5.8"
+    rc-util "4.x"
+
+[email protected]:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/rc-animate/-/rc-animate-2.4.0.tgz#a51b47dadf8ad9af08cddfb5b0217bfa81aee803"
+  dependencies:
+    babel-runtime "6.x"
+    css-animation "1.x"
+    prop-types "15.x"
+
+rc-tooltip@^3.4.6:
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-3.4.6.tgz#ed98de2a7b412e527c6bd8a2a97dddf0babd2f21"
+  dependencies:
+    babel-runtime "^6.23.0"
+    prop-types "^15.5.8"
+    rc-trigger "1.x"
+
+[email protected]:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-1.11.2.tgz#5c75a1928814a0595e3d912e0a15ca853df5464d"
+  dependencies:
+    babel-runtime "6.x"
+    create-react-class "15.x"
+    prop-types "15.x"
+    rc-align "2.x"
+    rc-animate "2.x"
+    rc-util "4.x"
+
+[email protected]:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.0.4.tgz#99813dd90aee7e29b64939a70ac176ead3f4ff39"
+  dependencies:
+    add-dom-event-listener "1.x"
+    babel-runtime "6.x"
+    shallowequal "^0.2.2"
+
 rc@^1.1.7:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
@@ -5941,7 +6004,7 @@ [email protected], [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
-reselect@^2.5.4:
+[email protected]:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-2.5.4.tgz#b7d23fdf00b83fa7ad0279546f8dbbbd765c7047"
 
@@ -6004,16 +6067,16 @@ ringcentral-client@^1.0.0-rc1:
     form-data "^2.1.2"
     isomorphic-fetch "^2.2.1"
 
-ringcentral-integration@^0.7.0-rc1:
-  version "0.7.0-rc1"
-  resolved "https://registry.yarnpkg.com/ringcentral-integration/-/ringcentral-integration-0.7.0-rc1.tgz#c37b38d3afee18866a06b4467afa233d3c4d8cc4"
+ringcentral-integration@^0.7.0-rc3:
+  version "0.7.0-rc3"
+  resolved "https://registry.yarnpkg.com/ringcentral-integration/-/ringcentral-integration-0.7.0-rc3.tgz#34d74eef92187b8f381d1bd58db9d0ad235e9f5c"
   dependencies:
-    file-loader "^0.10.1"
+    file-loader "^0.11.2"
     json-mask "^0.3.8"
     loganberry "^0.9.1"
     phoneformat.js "^1.0.3"
     redux "^3.5.2"
-    reselect "^2.5.4"
+    reselect "2.5.4"
     ringcentral-web-phone "^0.4.1"
     url-loader "^0.5.8"
     uuid "^3.0.1"
@@ -6186,6 +6249,12 @@ shallow-clone@^0.1.2:
     lazy-cache "^0.2.3"
     mixin-object "^2.0.1"
 
+shallowequal@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
+  dependencies:
+    lodash.keys "^3.1.2"
+
 shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"