Merge pull request #859 from ringcentral/2.x

Merge 2.x version into main
ringcentral · Aug 20, 2024 · 04298f2 · 04298f2
2 parents e9dce71 + 131d65c
commit 04298f2
Show file tree

Hide file tree

Showing 267 changed files with 19,415 additions and 3,656 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,5 @@ build
 extension
 src/noise-reduction
 site
+src/plugins.json
+
diff --git a/docs/integration/api.md b/docs/integration/api.md
@@ -169,6 +169,20 @@ document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
 
 Note: `alertLevel` can be `info`, `warning` or `danger`.
 
+<!-- md:version 2.0.0 -->
+
+```js
+const alertId = await RCAdapter.alertMessage({
+  message: 'Test info message',
+  level: 'info',
+  ttl: 5000 //5000ms => 5s, 0 for infinite
+});
+// Dismiss the alert message
+RCAdapter.dismissMessage(alertId); // dismiss the alert message
+// Dismiss all alert messages
+RCAdapter.dismissMessage();
+```
+
 ### Minimize/Hide/Remove the widget
 
 Only for Adapter JS way:

diff --git a/docs/integration/custom-settings.md b/docs/integration/custom-settings.md
@@ -26,7 +26,7 @@ document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
 }, '*');
 ```
 
-### Register button and section
+### Register button, section and group
 
 <!-- md:version 2.0.0 -->
 
@@ -37,6 +37,13 @@ document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
     name: 'TestService',
     settingsPath: '/settings',
     settings: [
+      {
+        "id": 'openLoggingPageAfterCall',
+        "type": 'boolean',
+        "name": 'Open call logging page after call',
+        "value": true,
+        "groupId": 'logging', // optional, group settings into call and sms logging settings
+      },
       {
         "id": "goToAppSettings",
         "type": "button",
@@ -48,6 +55,26 @@ document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
         "type": "section",
         "name": "CRM settings",
         "items": [
+          {
+            "id": "info",
+            "name": "info",
+            "type": "admonition",
+            "severity": "info",
+            "value": "Please authorize ThirdPartyService firstly",
+          },
+          {
+            "id": "introduction",
+            "name": "Introduction",
+            "type": "typography",
+            "variant": "body2", // optional, default is body1
+            "value": "Update ThirdPartyService contact settings",
+          },
+          {
+            "id": 'openContactPageAtCall',
+            "type": 'boolean',
+            "name": 'Open contact for incoming calls',
+            "value": true,
+          },
           {
             "id": "defaultRecordType",
             "type": "option",
@@ -78,27 +105,45 @@ document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
             "value": "",
             "placeholder": "Input default note"
           },
-          {
-            "id": "noLogWhenCallIsMissed",
-            "type": "boolean",
-            "name": "Don't log when call is missed",
-            "value": true
-          },
         ]
-      }
+      },
+      {
+        "id": "support",
+        "type": "group",
+        "name": "Support",
+        "items": [{
+          "id": "document",
+          "type": "externalLink",
+          "name": "Document",
+          "uri": "https://www.google.com",
+        }, {
+          "id": "feedback",
+          "type": "button",
+          "name": "Feedback",
+          "buttonLabel": "Open",
+          "buttonType": "link",
+        }, {
+          "id": "devSupport",
+          "type": "button",
+          "name": "Developer support",
+          "buttonLabel": "Open",
+        }]
+      },
     ],
     buttonEventPath: '/button-click', // required if you have button type in settings
   }
 }, '*');
 ```
 
-!!! info "In settings root items, it only supports `boolean`, `button` and `section` type. In section's items, it supports `boolean`, `string`, `option` and `text` type."
+!!! info "In settings root items, it only supports `boolean`, `button`, `section` and `group` type. In section's items, it supports `boolean`, `string`, `option`, `text`, `typography` and `admonition` type."
 
 After registering, you can get your setting in settings page:
 
-![customize-settings](https://github.com/ringcentral/ringcentral-embeddable/assets/7036536/af76ff7a-7d3a-4e6a-a26b-41c8f79ad241)
+![customize-settings](https://github.com/user-attachments/assets/561e51b5-83fb-419f-aa01-e80c63f9d081)
 
-![customize-setting-section](https://github.com/ringcentral/ringcentral-embeddable/assets/7036536/a7a1f33b-efc3-494d-a2ca-483b48dbbfe2)
+![customize-setting-section](https://github.com/user-attachments/assets/7c0d1253-bf0c-4861-a817-d8ca3242e7a9)
+
+![group-setting](https://github.com/user-attachments/assets/9879a084-1507-4b6e-aea4-8fc5a8540b8b)
 
 Add a message event to listen settings updated event:
 
@@ -116,6 +161,16 @@ window.addEventListener('message', function (e) {
         response: { data: 'ok' },
       }, '*');
     }
+    if (data.path === '/button-click') {
+      // add your codes here to handle button click event
+      console.log(data);
+      // response to widget
+      document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
+        type: 'rc-post-message-response',
+        responseId: data.requestId,
+        response: { data: 'ok' },
+      }, '*');
+    }
   }
 });
 ```
@@ -156,25 +211,16 @@ document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
     settingsPath: '/settings',
     settings: [
       {
-        "id": "goToAppSettings",
-        "type": "button",
-        "name": "Before noise reduction",
-        "buttonLabel": "Open",
-        "order": 999, // before noise reduction setting (order: 1000)
-      },
-      {
-        "id": "beforeAutoLog",
+        "id": "settingItem1",
         "type": "button",
-        "name": "Before auto log",
+        "name": "Setting Item 1",
         "buttonLabel": "Open",
-        "order": 2999 // before auto log setting (order: 3000)
-      },
-      {
-        "id": "afterAuth",
-        "type": "boolean",
-        "name": "After auth setting",
-        "value": true,
-        "order": 10000 // after auth setting (order: 9000)
+        "order": 250 // the smaller the number, the higher the priority. 
+        // Calling setting order value: 100,
+        // Audio setting order value: 200,
+        // Region setting order value: 300,
+        // Status setting order value: 400,
+        // Call and SMS logging setting order value: 500,
       },
     ],
     buttonEventPath: '/button-click', // required if you have button type in settings
@@ -183,10 +229,6 @@ document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
 }, '*');
 ```
 
-Order value is a number, the smaller the number, the higher the priority.
-
-![order-value](https://github.com/ringcentral/ringcentral-embeddable/assets/7036536/91e7d9ed-3949-4bfe-9f21-56089de09ffb)
-
 ## Update settings
 
 <!-- md:version 2.0.0 -->

diff --git a/docs/integration/do-not-contact.md b/docs/integration/do-not-contact.md
@@ -0,0 +1,90 @@
+# Do Not Contact
+
+This is feature to prevent the user to call/message someone who is in the DoNotContact list in your service.
+
+To enable the feature, please pass `doNotContactPath` when you register service.
+
+```js
+document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
+  type: 'rc-adapter-register-third-party-service',
+  service: {
+    name: 'TestService',
+    doNotContactPath: '/doNotContact',
+  }
+}, '*');
+```
+
+Add a message event to response DoNotContact checking event:
+
+```js
+// Function to response message to widget
+function responseMessage(request, response) {
+  console.log(request);
+  document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
+    type: 'rc-post-message-response',
+    responseId: request.requestId,
+    response,
+  }, '*');
+}
+
+const DO_NOT_CONTACTS_LIST = []; // Your DoNotContact list
+window.addEventListener('message', function (e) {
+  var data = e.data;
+  if (data && data.type === 'rc-post-message-request') {
+    const request = data;
+    if (request.path === '/doNotContact') {
+      // For DoNotContact checking for call
+      if (request.body.actionType === 'call') {
+        // Check if the phone number is in the DoNotContact list, you can check with your own API/logic
+        if (DO_NOT_CONTACTS_LIST.includes(request.body.phoneNumber)) {
+          responseMessage(request, {
+            data: {
+              result: true, // true: do not contact, false: can contact,
+              message: 'This is a do not contact message.', // optional, message to show in widget
+              mode: 'restrict', // optional, restrict mode to prevent user from calling. Or allow user to force call after warning.
+            },
+          });
+          return;
+        }
+        // If the phone number is not in the DoNotContact list, you can allow the user to call
+        responseMessage(request, {
+          data: {
+            result: false,
+          },
+        });
+        return;
+      }
+    }
+    // For DoNotContact checking for sms
+    if (request.body.actionType === 'sms') {
+      // Check if the phone number is in the DoNotContact list, you can check with your own API/logic
+      if (request.body.recipients.find((item) => DO_NOT_CONTACTS_LIST.includes(item.phoneNumber))) {
+        responseMessage(request, {
+          data: {
+            result: true, // true: do not contact, false: can contact,
+            message: 'This is a do not contact message',
+            mode: 'restrict' // optional, restrict mode to prevent user from messaging. Or allow user to force sending after warning.
+          },
+        });
+        return;
+      }
+      responseMessage(request, {
+        data: {
+          result: false,
+        },
+      });
+      return;
+    }
+  }
+});
+```
+
+When user make a call or send a message, the widget will send request to check if the phone number is in the DoNotContact list. If the phone number is in the DoNotContact list, the widget will show a warning message to the user and prevent the user from calling/messaging. If the phone number is not in the DoNotContact list, the widget will allow the user to call/message.
+
+Restrict mode:
+
+![DoNotContactRestrict](https://github.com/user-attachments/assets/6942acb3-d304-437b-9184-14c178a09889)
+
+No restrict mode:
+
+![DoNotContact](https://github.com/user-attachments/assets/9ccebd5d-5f95-4931-8680-a635e4774cf7)
diff --git a/getBrandConfig/atos/index.js b/getBrandConfig/atos/index.js
@@ -53,6 +53,7 @@ module.exports = {
       icon: '/assets/atos/icon.png',
     },
     showFeedback: false,
+    enableEDP: true,
   },
   brandFolder: __dirname,
   assetsFolder: path.resolve(__dirname, '../../src/assets/atos'),

diff --git a/getBrandConfig/att/index.js b/getBrandConfig/att/index.js
@@ -60,6 +60,7 @@ module.exports = {
     },
     showFeedback: false,
     subBrands: [{ id: '3460', code: 'attub' }],
+    enableEDP: true,
   },
   brandFolder: __dirname,
   assetsFolder: path.resolve(__dirname, '../../src/assets/att'),

diff --git a/getBrandConfig/avaya/index.js b/getBrandConfig/avaya/index.js
@@ -54,6 +54,7 @@ module.exports = {
       icon: '/assets/avaya/icon.svg',
     },
     showFeedback: false,
+    enableEDP: true,
   },
   brandFolder: __dirname,
   assetsFolder: path.resolve(__dirname, '../../src/assets/avaya'),

diff --git a/getBrandConfig/bt/index.js b/getBrandConfig/bt/index.js
@@ -55,6 +55,7 @@ module.exports = {
       icon: '/assets/bt/icon.svg',
     },
     showFeedback: false,
+    enableEDP: true,
   },
   brandFolder: __dirname,
   assetsFolder: path.resolve(__dirname, '../../src/assets/bt'),

diff --git a/getBrandConfig/rainbow/index.js b/getBrandConfig/rainbow/index.js
@@ -53,6 +53,7 @@ module.exports = {
       icon: '/assets/rainbow/icon.png',
     },
     showFeedback: false,
+    enableEDP: true,
   },
   brandFolder: __dirname,
   assetsFolder: path.resolve(__dirname, '../../src/assets/rainbow'),

diff --git a/getBrandConfig/rc/index.js b/getBrandConfig/rc/index.js
@@ -61,6 +61,7 @@ module.exports = {
       { id: '3710', code: 'rcuk' },
     ],
     showFeedback: false,
+    enableEDP: true,
   },
   brandFolder: __dirname,
   assetsFolder: path.resolve(__dirname, '../../src/assets/rc'),

diff --git a/getBrandConfig/telus/index.js b/getBrandConfig/telus/index.js
@@ -55,6 +55,7 @@ module.exports = {
       icon: '/assets/telus/icon.svg',
     },
     showFeedback: false,
+    enableEDP: true,
   },
   brandFolder: __dirname,
   assetsFolder: path.resolve(__dirname, '../../src/assets/telus'),

diff --git a/getWebpackBaseConfig.js b/getWebpackBaseConfig.js
@@ -49,10 +49,15 @@ module.exports = function getBaseConfig({ themeFolder = null, styleLoader = 'sty
         process: 'process/browser.js',
         Buffer: ['buffer', 'Buffer'],
       }),
-      // new webpack.NormalModuleReplacementPlugin(
-      //   /@ringcentral-integration\/commons\/lib\/Tabbie.js/,
-      //   path.resolve(__dirname, './vendors/commons/lib/Tabbie.js'),
-      // ),
+      // override LogButton
+      new webpack.NormalModuleReplacementPlugin(
+        /@ringcentral-integration\/widgets\/components\/LogButton\/index.js/,
+        path.resolve(__dirname, './vendor/LogButton/index.js'),
+      ),
+      new webpack.NormalModuleReplacementPlugin(
+        /@ringcentral-integration\/widgets\/components\/LogButton\/index.js.map/,
+        path.resolve(__dirname, './vendor/LogButton/index.js.map'),
+      ),
     ],
     module: {
       rules: [

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -124,6 +124,7 @@ nav:
     - 'View upcoming meetings': integration/upcoming-meetings.md
     - 'VCard click handling': integration/vcard-clicks.md
     - 'SMS toolbar button': 'integration/sms-toolbar-button.md'
+    - 'Do not contact': integration/do-not-contact.md
   - 'User interface customization':
     - 'Call logging form': integration/custom-call-log-page.md
     - 'Pages': integration/custom-page.md

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ringcentral-embeddable",
-  "version": "1.10.2",
+  "version": "2.0.0",
   "description": "A RingCentral Embeddable Widget Application",
   "main": "index.js",
   "license": "MIT",
@@ -86,10 +86,14 @@
     "@ringcentral-integration/phone-number": "^1.1.0",
     "@ringcentral-integration/utils": "^0.14.0",
     "@ringcentral-integration/widgets": "^0.14.0",
-    "@ringcentral/juno": "^2.35.2",
-    "@ringcentral/juno-icon": "^1.43.0",
+    "@ringcentral/juno": "^2.41.0",
+    "@ringcentral/juno-icon": "^1.74.0",
+    "@ringcentral/mfe-react": "^0.3.7",
     "@ringcentral/sdk": "^4.7.2",
     "@ringcentral/subscriptions": "^4.7.2",
+    "@rjsf/core": "^5.17.1",
+    "@rjsf/utils": "^5.17.1",
+    "@rjsf/validator-ajv8": "^5.17.1",
     "classnames": "^2.2.5",
     "core-js": "^3.9.1",
     "dayjs": "^1.11.7",