Send SDK message to HubSpot if usesCallingWindow=false (#266)

* Send SDK message to HubSpot if usesCallingWindow=false

Author: esme

demos/demo-minimal-js/index.js

@@ -145,7 +145,6 @@ const cti = new CallingExtensions({
       if (hostUrl && usesCallingWindow === false) {
         state.usesCallingWindow = false;
 
-        const hostUrl = "https://app.hubspotqa.com/";
         const url = `${hostUrl}/calling-integration-popup-ui/${portalId}?usesCallingWindow=false`;
 
         document

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

@@ -163,8 +163,10 @@ function App() {
   cti.broadcastChannel.onmessage = ({
     data,
   }: MessageEvent<{ type: string; payload?: any }>) => {
-    // Send SDK message to HubSpot in the calling window
-    if (cti.isFromWindow) {
+    // Send SDK message to HubSpot in the calling window or if usesCallingWindow is false
+    if (
+      cti.usesCallingWindow ? cti.isFromWindow : cti.isFromRemoteWithoutWindow
+    ) {
       // TODO: Refactor to use eventHandler to invoke the appropriate function
       // const eventHandler = broadcastEventHandlers[data.type];
       // cti.contract[eventHandler](data.payload);

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

@@ -28,6 +28,11 @@ function LoginScreen({ cti, handleNextScreen }: ScreenProps) {
     target: { value },
   }: ChangeEvent<HTMLInputElement>) => setPassword(value);
 
+  const handleOpenWindow = () => {
+    const url = `${cti.hostUrl}/calling-integration-popup-ui/${cti.portalId}?usesCallingWindow=false`;
+    window.open(url, "_blank");
+  };
+
   return (
     <Wrapper style={{ color: PANTERA }}>
       <form>
@@ -67,6 +72,18 @@ function LoginScreen({ cti, handleNextScreen }: ScreenProps) {
             Sign in with SSO
           </LinkButton>
         </Row>
+        <br />
+        {!cti.usesCallingWindow && (
+          <Row>
+            <LinkButton
+              use="transparent-on-primary"
+              onClick={handleOpenWindow}
+              type="button"
+            >
+              Open calling window
+            </LinkButton>
+          </Row>
+        )}
       </form>
     </Wrapper>
   );

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

@@ -55,6 +55,10 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
 
   private _usesCallingWindow = true;
 
+  portalId = 0;
+
+  hostUrl = "";
+
   broadcastChannel: BroadcastChannel = new BroadcastChannel(
     "calling-extensions-demo-react-ts"
   );
@@ -100,14 +104,18 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
     this._usesCallingWindow = usesCallingWindow;
   }
 
+  get isFromRemoteWithoutWindow() {
+    return !this._usesCallingWindow && this._iframeLocation === "remote";
+  }
+
   /** Do not send messages to HubSpot in the remote */
   get isFromRemote() {
     return this._usesCallingWindow && this._iframeLocation === "remote";
   }
 
   /** Send messages to HubSpot in the calling window */
   get isFromWindow() {
-    return this._usesCallingWindow && this._iframeLocation === "window";
+    return this._iframeLocation === "window";
   }
 
   /** Broadcast message from remote or window */
@@ -135,6 +143,14 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
       this._usesCallingWindow = userData.usesCallingWindow;
     }
 
+    if (userData.portalId) {
+      this.portalId = userData.portalId;
+    }
+
+    if (userData.hostUrl) {
+      this.hostUrl = userData.hostUrl;
+    }
+
     return this._cti.initialized(userData);
   }
 
@@ -328,14 +344,7 @@ export const useCti = (setDialNumber: (phoneNumber: string) => void) => {
     return new CallingExtensionsWrapper({
       debugMode: true,
       eventHandlers: {
-        onReady: (data: {
-          engagementId?: number;
-          portalId?: number;
-          userId?: number;
-          ownerId?: number;
-          iframeLocation?: string;
-          usesCallingWindow?: boolean;
-        }) => {
+        onReady: (data: OnInitialized) => {
           const engagementId = (data && data.engagementId) || 0;
 
           cti.initialized({
@@ -348,6 +357,8 @@ export const useCti = (setDialNumber: (phoneNumber: string) => void) => {
             },
             iframeLocation: data.iframeLocation,
             usesCallingWindow: data.usesCallingWindow,
+            portalId: data.portalId,
+            hostUrl: data.hostUrl,
           } as OnInitialized);
         },
         onDialNumber: (data: any, _rawEvent: any) => {