misc: support to show third party displayName (#862)

* misc: support to third party displayName

* misc: version 2.0.1

docs/integration/third-party-auth.md

@@ -9,12 +9,14 @@ document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
   type: 'rc-adapter-register-third-party-service',
   service: {
     name: 'TestService',
+    displayName: 'TestServiceDisplayName', // Optional, supported from 2.0.1
+    info: 'Some description about this service', // Optional, supported from 2.0.0
     authorizationPath: '/authorize',
     authorizedTitle: 'Unauthorize',
     unauthorizedTitle: 'Authorize',
     authorized: false,
     authorizedAccount: '[email protected]', // optional, authorized account email or id
-    authorizationLogo: 'https://your_brand_picture/logo.png', // optional, show your brand logo in authorization section, recommended: height 20px, width < 85px.
+    authorizationLogo: 'https://your_brand_picture/logo.png', // optional, show your brand logo in authorization section, recommended: height 30px, width < 85px.
     // showAuthRedDot: true, // optional, this will show red dot at settings page when need to auth
   }
 }, '*');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ringcentral-embeddable",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A RingCentral Embeddable Widget Application",
   "main": "index.js",
   "license": "MIT",

src/modules/SettingsUI/index.js

@@ -45,7 +45,7 @@ export class SettingsUI extends BaseSettingsUI {
       showFeedback: thirdPartyService.showFeedback,
       thirdPartySettings: thirdPartyService.settings,
       thirdPartyAuth: thirdPartyService.authorizationRegistered ? {
-        serviceName: thirdPartyService.serviceName,
+        serviceName: thirdPartyService.displayName || thirdPartyService.serviceName,
         serviceInfo: thirdPartyService.serviceInfo,
         authorized: thirdPartyService.authorized,
         contactSyncing: thirdPartyService.contactSyncing,

src/modules/ThirdPartyService/index.ts

@@ -104,6 +104,7 @@ export default class ThirdPartyService extends RcModuleV2 {
         }
         this._registerService({
           serviceName: service.name,
+          serviceDisplayName: service.displayName,
           serviceInfo: service.info || '',
         });
         if (service.authorizationPath) {
@@ -982,6 +983,9 @@ export default class ThirdPartyService extends RcModuleV2 {
   @state
   serviceName = null;
 
+  @state
+  displayName = null;
+
   @state
   serviceInfo = null;
 
@@ -991,9 +995,13 @@ export default class ThirdPartyService extends RcModuleV2 {
   @action
   _registerService({
     serviceName,
+    serviceDisplayName,
     serviceInfo,
   }) {
     this.serviceName = serviceName;
+    if (serviceDisplayName) {
+      this.displayName = serviceDisplayName;
+    }
     this._sourceReady = true;
     this.serviceInfo = serviceInfo;
   }