Include portalId and userId in the onReady payload (#193)

* Send portalId in onReady event

* Use portalId in demo-minimal-js

* Add engagementId to state

* 0.5.0-alpha.0

* Add return back in

* fix eslint command

* Add userId

* 0.5.0-alpha.1

* 0.5.0-beta.0

* 0.5.0-rc.0

* 0.5.0

demos/demo-minimal-js/index.js

@@ -6,10 +6,11 @@ import { messageType, callEndStatus } from "../../src/Constants";
 
 export const state = {
   engagementId: 0,
-  toNumber: "+1234",
   fromNumber: "+123456",
-  userAvailable: false,
   incomingContactName: "",
+  toNumber: "+1234",
+  userAvailable: false,
+  userId: 0,
 };
 
 const sizeInfo = {
@@ -46,18 +47,25 @@ function enableButtons(ids) {
 const cti = new CallingExtensions({
   debugMode: true,
   eventHandlers: {
-    onReady: data => {
+    onReady: ({ engagementId, portalId, userId } = {}) => {
       cti.initialized({
+        engagementId,
         isLoggedIn: false,
         sizeInfo,
-        engagementId: data.engagementId,
       });
       disableButtons([INITIALIZE]);
-      if (data.engagementId) {
+      if (engagementId) {
         enableButtons([ANSWER_CALL, END_CALL]);
+        state.engagementId = engagementId;
         return;
       }
       enableButtons([LOG_IN, SEND_ERROR, RESIZE_WIDGET]);
+      if (portalId) {
+        state.portalId = portalId;
+      }
+      if (userId) {
+        state.userId = userId;
+      }
     },
     onDialNumber: (data, rawEvent) => {
       const { phoneNumber } = data;

demos/demo-react-ts/src/hooks/useCti.ts

@@ -154,17 +154,19 @@ export const useCti = (
       debugMode: true,
       eventHandlers: {
         onReady: (data: { engagementId: number | undefined }) => {
+          const { engagementId } = data || {};
           cti.initialized({
             isLoggedIn: true,
             sizeInfo: defaultSize,
-            engagementId: data.engagementId,
+            engagementId,
           });
           const incomingNumber =
             window.localStorage.getItem(INCOMING_NUMBER_KEY);
           const incomingContactName = window.localStorage.getItem(
             INCOMING_CONTACT_NAME_KEY
           );
-          if (data.engagementId && incomingNumber && incomingContactName) {
+          if (engagementId && incomingNumber && incomingContactName) {
+            setEngagementId(engagementId);
             cti.incomingNumber = incomingNumber;
             setIncomingContactName(incomingContactName);
             initializeCallingStateForExistingCall(incomingNumber);
@@ -248,7 +250,7 @@ export const useCti = (
         },
       },
     });
-  }, []);
+  }, [initializeCallingStateForExistingCall]);
   return {
     phoneNumber,
     engagementId,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/calling-extensions-sdk",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A JavaScript SDK for integrating calling apps into HubSpot.",
   "publishConfig": {
     "access": "public"
@@ -10,7 +10,7 @@
     "build:test": "npm run build && npm run test",
     "cover": "open coverage/lcov-report/index.html",
     "eslint": "eslint src --ext .js",
-    "eslint:fix": "eslint src .js --fix",
+    "eslint:fix": "eslint src --ext .js --fix",
     "preversion": "npm run build:test",
     "postversion": "git push --follow-tags",
     "publish:alpha:current": "npm publish --access public --tag alpha",

src/IFrameManager.js

@@ -77,7 +77,9 @@ class IFrameManager {
   }
 
   static createIFrame(iFrameOptions, onLoadCallback) {
-    const { src, width, height, hostElementSelector } = iFrameOptions;
+    const {
+      src, width, height, hostElementSelector,
+    } = iFrameOptions;
 
     if (!src || !width || !height || !hostElementSelector) {
       throw new Error(
@@ -118,11 +120,11 @@ class IFrameManager {
     }
   }
 
-  onReady(engagementId) {
+  onReady(data = {}) {
     this.isReady = true;
     this.onMessageHandler({
       type: messageType.READY,
-      data: { engagementId },
+      data,
     });
   }
 
@@ -179,7 +181,9 @@ class IFrameManager {
 
   onMessage(event) {
     const { data, origin } = event;
-    const { type, engagementId } = event.data;
+    const {
+      type, engagementId, portalId, userId,
+    } = event.data;
     if (type === messageType.SYNC) {
       // The iFrame host can send this message multiple times, don't respond more than once
       if (!this.isReady) {
@@ -196,7 +200,7 @@ class IFrameManager {
         this.destinationHost = hostUrl || this.destinationHost;
         this.logDebugMessage(prefix, debugMessageType.FROM_HUBSPOT, type, data);
         this.sendMessage(message);
-        this.onReady(engagementId);
+        this.onReady({ engagementId, portalId, userId });
       }
       return;
     }