Create a broadcast channel in the demo widget (#241)

* Create a broadcast channel in the demo widget

demos/demo-minimal-js/package.json

@@ -21,7 +21,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@hubspot/calling-extensions-sdk": "^0.8.0",
+    "@hubspot/calling-extensions-sdk": "^0.8.1-alpha.1",
     "uuid": "^10.0.0"
   }
 }

demos/demo-react-ts/package.json

@@ -18,7 +18,7 @@
     "node": ">=14"
   },
   "dependencies": {
-    "@hubspot/calling-extensions-sdk": "^0.8.0",
+    "@hubspot/calling-extensions-sdk": "^0.8.1-alpha.1",
     "react": "^18.2.0",
     "react-aria": "^3.22.0",
     "react-dom": "^18.2.0",

demos/demo-react-ts/src/components/App.tsx

@@ -1,5 +1,6 @@
 import { useState, useMemo, useCallback } from "react";
 import { ThemeProvider } from "styled-components";
+import { Constants } from "@hubspot/calling-extensions-sdk";
 import { createTheme } from "../visitor-ui-component-library/theme/createTheme";
 import {
   setDisabledBackgroundColor,
@@ -25,6 +26,9 @@ import Alert from "./Alert";
 import { CALYPSO, GYPSUM, KOALA, OLAF, SLINKY } from "../utils/colors";
 import { FROM_NUMBER_ONE } from "../utils/phoneNumberUtils";
 
+// import { thirdPartyToHostEvents } from "../../../../src/Constants";
+const { thirdPartyToHostEvents } = Constants;
+
 export const OUTBOUND_SCREENS = [
   LoginScreen,
   KeypadScreen,
@@ -41,6 +45,19 @@ export const INBOUND_SCREENS = [
   CallEndedScreen,
 ];
 
+export const broadcastEventHandlers = {
+  [thirdPartyToHostEvents.LOGGED_IN]: "userLoggedIn",
+  [thirdPartyToHostEvents.LOGGED_OUT]: "userLoggedOut",
+  [thirdPartyToHostEvents.INITIALIZE]: "initialize",
+  [thirdPartyToHostEvents.OUTGOING_CALL_STARTED]: "outgoingCall",
+  [thirdPartyToHostEvents.USER_AVAILABLE]: "userAvailable",
+  [thirdPartyToHostEvents.USER_UNAVAILABLE]: "userUnavailable",
+  [thirdPartyToHostEvents.INCOMING_CALL]: "incomingCall",
+  [thirdPartyToHostEvents.CALL_ANSWERED]: "callAnswered",
+  [thirdPartyToHostEvents.CALL_ENDED]: "callEnded",
+  [thirdPartyToHostEvents.CALL_COMPLETED]: "callCompleted",
+};
+
 const ALERT_CONTENT = (
   <span>
     Open your console to see the{" "}
@@ -93,9 +110,13 @@ function App() {
     setIncomingNumber(incomingNumber);
   };
 
-  const { cti, phoneNumber, engagementId, incomingContactName } = useCti(
-    initializeCallingStateForExistingCall
-  );
+  const {
+    cti,
+    phoneNumber,
+    engagementId,
+    incomingContactName,
+    iframeLocation,
+  } = useCti(initializeCallingStateForExistingCall);
 
   const screens = direction === "OUTBOUND" ? OUTBOUND_SCREENS : INBOUND_SCREENS;
 
@@ -129,17 +150,85 @@ function App() {
     }
   }, [screenIndex]);
 
-  const screenComponent = useMemo(() => {
-    const handleEndCall = () => {
-      stopTimer();
-      handleNavigateToScreen(ScreenNames.CallEnded);
-    };
+  const handleOutgoingCallStarted = useCallback(() => {
+    const callStartTime = Date.now();
+    startTimer(callStartTime);
+    setDirection("OUTBOUND");
+    handleNavigateToScreen(ScreenNames.Dialing);
+  }, []);
+
+  const handleIncomingCall = useCallback(() => {
+    setDirection("INBOUND");
+    handleNavigateToScreen(ScreenNames.Incoming);
+  }, []);
+
+  const handleCallEnded = useCallback(() => {
+    stopTimer();
+    handleNavigateToScreen(ScreenNames.CallEnded);
+  }, [stopTimer]);
+
+  const handleCallCompleted = useCallback(() => {
+    resetInputs();
+    handleNavigateToScreen(ScreenNames.Keypad);
+  }, [resetInputs]);
+
+  cti.broadcastChannel.onmessage = ({
+    data,
+  }: MessageEvent<{ type: string }>) => {
+    // Send SDK message to HubSpot
+    if (iframeLocation === "window") {
+      const eventHandler = broadcastEventHandlers[data.type];
+      if (eventHandler) {
+        cti[eventHandler](data.payload);
+      }
+    }
+
+    // Handle SDK message in iframe
+    switch (data.type) {
+      case thirdPartyToHostEvents.LOGGED_IN:
+        handleNavigateToScreen(ScreenNames.Keypad);
+        break;
+
+      case thirdPartyToHostEvents.LOGGED_OUT:
+        handleNavigateToScreen(ScreenNames.Login);
+        break;
+
+      case thirdPartyToHostEvents.USER_AVAILABLE:
+        setAvailability("AVAILABLE");
+        break;
+
+      case thirdPartyToHostEvents.USER_UNAVAILABLE:
+        setAvailability("UNAVAILABLE");
+        break;
+
+      case thirdPartyToHostEvents.OUTGOING_CALL_STARTED:
+        handleOutgoingCallStarted();
+        break;
+
+      case thirdPartyToHostEvents.INCOMING_CALL:
+        setIncomingNumber(data.payload.fromNumber);
+        handleIncomingCall();
+        break;
+
+      case thirdPartyToHostEvents.CALL_ANSWERED: {
+        handleNavigateToScreen(ScreenNames.Calling);
+        break;
+      }
 
-    const handleSaveCall = () => {
-      resetInputs();
-      handleNavigateToScreen(ScreenNames.Keypad);
-    };
+      case thirdPartyToHostEvents.CALL_ENDED:
+        handleCallEnded();
+        break;
 
+      case thirdPartyToHostEvents.CALL_COMPLETED:
+        handleCallCompleted();
+        break;
+
+      default:
+      // Do nothing
+    }
+  };
+
+  const screenComponent = useMemo(() => {
     const Component = screens[screenIndex];
     if (!Component) {
       return null;
@@ -162,8 +251,10 @@ function App() {
         callDurationString={callDurationString}
         startTimer={startTimer}
         stopTimer={stopTimer}
-        handleEndCall={handleEndCall}
-        handleSaveCall={handleSaveCall}
+        handleOutgoingCallStarted={handleOutgoingCallStarted}
+        handleIncomingCall={handleIncomingCall}
+        handleCallEnded={handleCallEnded}
+        handleCallCompleted={handleCallCompleted}
         fromNumber={fromNumber}
         setFromNumber={setFromNumber}
         incomingNumber={incomingNumber}
@@ -187,17 +278,21 @@ function App() {
     engagementId,
     dialNumber,
     notes,
+    isCallRecorded,
     callDuration,
     callDurationString,
     startTimer,
     stopTimer,
+    handleCallEnded,
+    handleCallCompleted,
     fromNumber,
     incomingNumber,
-    callStatus,
     availability,
     direction,
     incomingContactName,
-    resetInputs,
+    callStatus,
+    handleIncomingCall,
+    handleOutgoingCallStarted,
   ]);
 
   return (

demos/demo-react-ts/src/components/screens/CallingScreen.tsx

@@ -57,6 +57,7 @@ function CallingScreen({
     cti.callEnded({
       callEndStatus: "COMPLETED",
     });
+
     handleEndCall();
   };
 

demos/demo-react-ts/src/components/screens/DialingScreen.tsx

@@ -9,7 +9,7 @@ function DialingScreen({
   handleNextScreen,
   dialNumber,
   callDurationString,
-  handleEndCall,
+  handleCallEnded,
   cti,
 }: ScreenProps) {
   useEffect(() => {
@@ -24,7 +24,7 @@ function DialingScreen({
     cti.callEnded({
       callEndStatus: "COMPLETED",
     });
-    handleEndCall();
+    handleCallEnded();
   };
 
   return (

demos/demo-react-ts/src/components/screens/IncomingScreen.tsx

@@ -16,7 +16,7 @@ import { ANSWER_CALL, END_CALL } from "../../constants/buttonIds";
 function IncomingScreen({
   handleNextScreen,
   incomingNumber,
-  handleEndCall,
+  handleCallEnded,
   cti,
   startTimer,
   incomingContactName,
@@ -32,7 +32,7 @@ function IncomingScreen({
   const onEndIncomingCall = () => {
     setCallStatus("CANCELED");
     cti.callEnded({ callEndStatus: "CANCELED" });
-    handleEndCall();
+    handleCallEnded();
   };
 
   return (

demos/demo-react-ts/src/components/screens/KeypadScreen.tsx

@@ -52,6 +52,8 @@ function KeypadScreen({
   setDirection,
   incomingNumber,
   setIncomingNumber,
+  handleIncomingCall,
+  handleOutgoingCallStarted,
 }: ScreenProps) {
   const dialNumberInput = useAutoFocus();
   const [cursorStart, setCursorStart] = useState(dialNumber.length || 0);
@@ -109,10 +111,8 @@ function KeypadScreen({
       fromNumber,
       callStartTime,
     });
-    startTimer(callStartTime);
-    setDirection("OUTBOUND");
-    handleNextScreen();
-  }, [cti, dialNumber, handleNextScreen, startTimer, setDirection, fromNumber]);
+    handleOutgoingCallStarted();
+  }, [cti, dialNumber, fromNumber, handleOutgoingCallStarted]);
 
   const handleTriggerIncomingCall = useCallback(
     (incomingCallNumber: string) => {
@@ -121,10 +121,9 @@ function KeypadScreen({
         fromNumber: incomingCallNumber,
         toNumber: fromNumber,
       });
-      setDirection("INBOUND");
-      handleNextScreen();
+      handleIncomingCall();
     },
-    [handleNextScreen, setDirection, cti, fromNumber]
+    [cti, fromNumber, handleIncomingCall]
   );
 
   const handleBackspace = useCallback(() => {