Fix event handlers in broadcast message (#245)

* Fix event handlers in broadcast message
HubSpot · Nov 21, 2024 · 05bfdaa · 05bfdaa
1 parent c5baa71
commit 05bfdaa
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 21 deletions.
diff --git a/demos/demo-react-ts/src/components/App.tsx b/demos/demo-react-ts/src/components/App.tsx
@@ -1,4 +1,5 @@
 import { useState, useMemo, useCallback } from "react";
+import { v4 as uuidv4 } from "uuid";
 import { ThemeProvider } from "styled-components";
 import { Constants } from "@hubspot/calling-extensions-sdk";
 import { createTheme } from "../visitor-ui-component-library/theme/createTheme";
@@ -48,7 +49,7 @@ export const INBOUND_SCREENS = [
 export const broadcastEventHandlers = {
   [thirdPartyToHostEvents.LOGGED_IN]: "userLoggedIn",
   [thirdPartyToHostEvents.LOGGED_OUT]: "userLoggedOut",
-  [thirdPartyToHostEvents.INITIALIZE]: "initialize",
+  [thirdPartyToHostEvents.INITIALIZED]: "initialized",
   [thirdPartyToHostEvents.OUTGOING_CALL_STARTED]: "outgoingCall",
   [thirdPartyToHostEvents.USER_AVAILABLE]: "userAvailable",
   [thirdPartyToHostEvents.USER_UNAVAILABLE]: "userUnavailable",
@@ -110,13 +111,9 @@ function App() {
     setIncomingNumber(incomingNumber);
   };
 
-  const {
-    cti,
-    phoneNumber,
-    engagementId,
-    incomingContactName,
-    iframeLocation,
-  } = useCti(initializeCallingStateForExistingCall);
+  const { cti, phoneNumber, engagementId, incomingContactName } = useCti(
+    initializeCallingStateForExistingCall
+  );
 
   const screens = direction === "OUTBOUND" ? OUTBOUND_SCREENS : INBOUND_SCREENS;
 
@@ -175,11 +172,44 @@ function App() {
   cti.broadcastChannel.onmessage = ({
     data,
   }: MessageEvent<{ type: string; payload?: any }>) => {
-    // Send SDK message to HubSpot
-    if (iframeLocation === "window") {
-      const eventHandler = broadcastEventHandlers[data.type];
-      if (eventHandler && cti[eventHandler] && data.payload) {
-        cti[eventHandler](data.payload);
+    // Send SDK message to HubSpot in the calling window
+    if (cti.isFromWindow) {
+      // TODO: Refactor to use eventHandler to invoke the appropriate function
+      // const eventHandler = broadcastEventHandlers[data.type];
+      // cti.contract[eventHandler](data.payload);
+
+      if (data.type === thirdPartyToHostEvents.INITIALIZED) {
+        cti.contract.initialized(data.payload);
+      } else if (data.type === thirdPartyToHostEvents.LOGGED_IN) {
+        cti.contract.userLoggedIn();
+      } else if (data.type === thirdPartyToHostEvents.LOGGED_OUT) {
+        cti.contract.userLoggedOut();
+      } else if (data.type === thirdPartyToHostEvents.USER_AVAILABLE) {
+        cti.contract.userAvailable();
+      } else if (data.type === thirdPartyToHostEvents.USER_UNAVAILABLE) {
+        cti.contract.userUnavailable();
+      } else if (data.type === thirdPartyToHostEvents.INCOMING_CALL) {
+        cti.externalCallId = uuidv4();
+        cti.contract.incomingCall({
+          ...data.payload,
+          externalCallId: cti.externalCallId,
+        });
+      } else if (data.type === thirdPartyToHostEvents.OUTGOING_CALL_STARTED) {
+        cti.externalCallId = uuidv4();
+        cti.contract.outgoingCall({
+          ...data.payload,
+          externalCallId: cti.externalCallId,
+        });
+      } else if (data.type === thirdPartyToHostEvents.CALL_ENDED) {
+        cti.contract.callEnded({
+          ...data.payload,
+          externalCallId: cti.externalCallId,
+        });
+      } else if (data.type === thirdPartyToHostEvents.CALL_COMPLETED) {
+        cti.contract.callCompleted({
+          ...data.payload,
+          externalCallId: cti.externalCallId,
+        });
       }
     }
 

diff --git a/demos/demo-react-ts/src/hooks/useCti.ts b/demos/demo-react-ts/src/hooks/useCti.ts
@@ -66,6 +66,10 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
     window.broadcastChannel = this.broadcastChannel;
   }
 
+  get contract() {
+    return this._cti;
+  }
+
   get externalCallId() {
     return this._externalCallId;
   }
@@ -189,6 +193,7 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
     // Send message to HubSpot
     this.incomingNumber = callDetails.fromNumber;
     this.externalCallId = uuidv4();
+
     this._cti.incomingCall({
       ...callDetails,
       externalCallId: this.externalCallId,
@@ -300,7 +305,7 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
   broadcastMessage({ type, payload }: { type: string; payload?: any }) {
     this.broadcastChannel.postMessage({
       type,
-      payload: { ...payload, externalCallId: this.externalCallId },
+      payload,
     });
   }
 }
@@ -311,7 +316,6 @@ export const useCti = (
   const [phoneNumber, setPhoneNumber] = useState("");
   const [engagementId, setEngagementId] = useState<number | null>(null);
   const [incomingContactName, setIncomingContactName] = useState<string>("");
-  const [iframeLocation, setIframeLocation] = useState("");
 
   const cti = useMemo(() => {
     return new CallingExtensionsWrapper({
@@ -350,9 +354,6 @@ export const useCti = (
             window.localStorage.removeItem(INCOMING_NUMBER_KEY);
             window.localStorage.removeItem(INCOMING_CONTACT_NAME_KEY);
           }
-          if (data.iframeLocation) {
-            setIframeLocation(data.iframeLocation);
-          }
         },
         onDialNumber: (data: any, _rawEvent: any) => {
           const { phoneNumber } = data;
@@ -456,6 +457,5 @@ export const useCti = (
     engagementId,
     cti,
     incomingContactName,
-    iframeLocation,
   };
 };
diff --git a/demos/demo-react-ts/test/spec/components/screens/LoginScreen-test.tsx b/demos/demo-react-ts/test/spec/components/screens/LoginScreen-test.tsx
@@ -24,8 +24,8 @@ const props: Partial<ScreenProps> = {
   callDurationString: "",
   startTimer: noop,
   stopTimer: noop,
-  handleEndCall: noop,
-  handleSaveCall: noop,
+  handleCallEnded: noop,
+  handleCallCompleted: noop,
   fromNumber: "",
   setFromNumber: noop,
 };