Include portalId and userId in the onReady payload

demos/demo-minimal-js/index.js

@@ -46,18 +46,21 @@ function enableButtons(ids) {
 const cti = new CallingExtensions({
   debugMode: true,
   eventHandlers: {
-    onReady: data => {
+    onReady: ({ engagementId, portalId } = {}) => {
       cti.initialized({
+        engagementId,
         isLoggedIn: false,
         sizeInfo,
-        engagementId: data.engagementId,
       });
       disableButtons([INITIALIZE]);
-      if (data.engagementId) {
+      if (engagementId) {
         enableButtons([ANSWER_CALL, END_CALL]);
-        return;
+        state.engagementId = engagementId;
       }
       enableButtons([LOG_IN, SEND_ERROR, RESIZE_WIDGET]);
+      if (portalId) {
+        state.portalId = portalId;
+      }
     },
     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-alpha.0",
   "description": "A JavaScript SDK for integrating calling apps into HubSpot.",
   "publishConfig": {
     "access": "public"

src/IFrameManager.js

@@ -118,11 +118,11 @@ class IFrameManager {
     }
   }
 
-  onReady(engagementId) {
+  onReady(data = {}) {
     this.isReady = true;
     this.onMessageHandler({
       type: messageType.READY,
-      data: { engagementId },
+      data,
     });
   }
 
@@ -179,7 +179,7 @@ class IFrameManager {
 
   onMessage(event) {
     const { data, origin } = event;
-    const { type, engagementId } = event.data;
+    const { type, engagementId, portalId } = 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 +196,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 });
       }
       return;
     }