Sync the remote with calling window changes (#244)

* Sync changes in the remote with calling window
HubSpot · Nov 20, 2024 · c5baa71 · c5baa71
1 parent 6db0517
commit c5baa71
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 22 deletions.
diff --git a/demos/demo-react-ts/src/components/App.tsx b/demos/demo-react-ts/src/components/App.tsx
@@ -174,11 +174,11 @@ function App() {
 
   cti.broadcastChannel.onmessage = ({
     data,
-  }: MessageEvent<{ type: string }>) => {
+  }: MessageEvent<{ type: string; payload?: any }>) => {
     // Send SDK message to HubSpot
     if (iframeLocation === "window") {
       const eventHandler = broadcastEventHandlers[data.type];
-      if (eventHandler) {
+      if (eventHandler && cti[eventHandler] && data.payload) {
         cti[eventHandler](data.payload);
       }
     }

diff --git a/demos/demo-react-ts/src/hooks/useCti.ts b/demos/demo-react-ts/src/hooks/useCti.ts
@@ -90,9 +90,32 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
     this._iframeLocation = location;
   }
 
+  /** Do not send messages to HubSpot in the remote */
+  get isFromRemote() {
+    return this._iframeLocation === "remote";
+  }
+
+  /** Send messages to HubSpot in the calling window */
+  get isFromWindow() {
+    return this._iframeLocation === "window";
+  }
+
+  /** Broadcast message from remote or window */
+  get shouldBroadcastMessage() {
+    return (
+      this._iframeLocation === "remote" || this._iframeLocation === "window"
+    );
+  }
+
   initialized(userData: OnInitialized) {
-    if (this._iframeLocation === "remote") {
-      this.broadcastMessage({ type: thirdPartyToHostEvents.INITIALIZED });
+    if (this.shouldBroadcastMessage) {
+      this.broadcastMessage({
+        type: thirdPartyToHostEvents.INITIALIZED,
+        payload: userData,
+      });
+    }
+
+    if (this.isFromRemote) {
       return;
     }
 
@@ -104,57 +127,63 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
   }
 
   userAvailable() {
-    if (this._iframeLocation === "remote") {
+    if (this.shouldBroadcastMessage) {
       this.broadcastMessage({ type: thirdPartyToHostEvents.USER_AVAILABLE });
+    }
+
+    if (this.isFromRemote) {
       return;
     }
 
     return this._cti.userAvailable();
   }
 
   userUnavailable() {
-    if (this._iframeLocation === "remote") {
+    if (this.shouldBroadcastMessage) {
       this.broadcastMessage({ type: thirdPartyToHostEvents.USER_UNAVAILABLE });
+    }
+
+    if (this.isFromRemote) {
       return;
     }
 
     return this._cti.userUnavailable();
   }
 
   userLoggedIn() {
-    if (this._iframeLocation === "remote") {
+    if (this.shouldBroadcastMessage) {
       this.broadcastMessage({ type: thirdPartyToHostEvents.LOGGED_IN });
+    }
+
+    if (this.isFromRemote) {
       return;
     }
 
     return this._cti.userLoggedIn();
   }
 
   userLoggedOut() {
-    if (this._iframeLocation === "remote") {
+    if (this.shouldBroadcastMessage) {
       this.broadcastMessage({ type: thirdPartyToHostEvents.LOGGED_OUT });
+    }
+
+    if (this.isFromRemote) {
       return;
     }
 
     return this._cti.userLoggedOut();
   }
 
   incomingCall(callDetails: OnIncomingCall) {
-    // Triggered from remote
-    if (this._iframeLocation === "remote") {
+    if (this.shouldBroadcastMessage) {
       this.broadcastMessage({
         type: thirdPartyToHostEvents.INCOMING_CALL,
         payload: callDetails,
       });
-      return;
     }
 
-    // Triggered from popup
-    if (this._iframeLocation === "window") {
-      this.broadcastMessage({
-        type: thirdPartyToHostEvents.INCOMING_CALL,
-        payload: callDetails,
-      });
+    if (this.isFromRemote) {
+      return;
     }
 
     // Send message to HubSpot
@@ -167,11 +196,14 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
   }
 
   outgoingCall(callDetails: OnOutgoingCall) {
-    if (this._iframeLocation === "remote") {
+    if (this.shouldBroadcastMessage) {
       this.broadcastMessage({
         type: thirdPartyToHostEvents.OUTGOING_CALL_STARTED,
         payload: callDetails,
       });
+    }
+
+    if (this.isFromRemote) {
       return;
     }
 
@@ -187,11 +219,14 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
   }
 
   callAnswered(data: OnCallAnswered) {
-    if (this._iframeLocation === "remote") {
+    if (this.shouldBroadcastMessage) {
       this.broadcastMessage({
         type: thirdPartyToHostEvents.CALL_ANSWERED,
         payload: data,
       });
+    }
+
+    if (this.isFromRemote) {
       return;
     }
 
@@ -206,11 +241,14 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
   }
 
   callEnded(engagementData: OnCallEnded) {
-    if (this._iframeLocation === "remote") {
+    if (this.shouldBroadcastMessage) {
       this.broadcastMessage({
         type: thirdPartyToHostEvents.CALL_ENDED,
         payload: engagementData,
       });
+    }
+
+    if (this.isFromRemote) {
       return;
     }
 
@@ -221,11 +259,14 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
   }
 
   callCompleted(callCompletedData: OnCallCompleted) {
-    if (this._iframeLocation === "remote") {
+    if (this.shouldBroadcastMessage) {
       this.broadcastMessage({
         type: thirdPartyToHostEvents.CALL_COMPLETED,
         payload: callCompletedData,
       });
+    }
+
+    if (this.isFromRemote) {
       return;
     }
 
@@ -256,7 +297,7 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
     return this._cti.logDebugMessage(messageData);
   }
 
-  broadcastMessage({ type, payload }: { type: string; payload: any }) {
+  broadcastMessage({ type, payload }: { type: string; payload?: any }) {
     this.broadcastChannel.postMessage({
       type,
       payload: { ...payload, externalCallId: this.externalCallId },

diff --git a/demos/demo-react-ts/src/types/ScreenTypes.ts b/demos/demo-react-ts/src/types/ScreenTypes.ts
@@ -28,6 +28,8 @@ export interface ScreenProps {
   callDurationString: string;
   startTimer: Function;
   stopTimer: Function;
+  handleOutgoingCallStarted: Function;
+  handleIncomingCall: Function;
   handleCallEnded: Function;
   handleCallCompleted: Function;
   fromNumber: string;