diff --git a/demos/demo-minimal-js/index.js b/demos/demo-minimal-js/index.js index 0c74542..76c3f9d 100644 --- a/demos/demo-minimal-js/index.js +++ b/demos/demo-minimal-js/index.js @@ -9,7 +9,8 @@ function getQueryParam(param) { return urlParams.get(param); } -const bc = new BroadcastChannel("calling-extensions-demo-minimal-js"); +const broadcastChannelName = "calling-extensions-demo"; +const bc = new BroadcastChannel(broadcastChannelName); export const state = { externalCallId: "", @@ -23,6 +24,7 @@ export const state = { ownerId: 0, usesCallingWindow: getQueryParam("usesCallingWindow") !== "false", iframeLocation: getQueryParam("iframeLocation") || "widget", + broadcastChannelName, }; const sizeInfo = { @@ -44,6 +46,13 @@ const SEND_ERROR = "senderror"; const USER_AVAILABLE = "useravailable"; const USER_UNAVAILABLE = "userunavailable"; +const eventHandlers = { + [INCOMING_CALL]: "incomingCall", + [ANSWER_CALL]: "answerCall", + [END_CALL]: "endCall", + [COMPLETE_CALL]: "completeCall", +}; + function disableButtons(ids) { if (!state.enforceButtonsOrder) { return; @@ -62,6 +71,33 @@ function enableButtons(ids) { }); } +const getUsesCallingWindowFalseInPopup = () => { + return !state.usesCallingWindow && state.iframeLocation === "window"; +}; + +const getUsesCallingWindowFalseInRemote = () => { + return !state.usesCallingWindow && state.iframeLocation === "remote"; +}; + +const sendBroadcastMessage = (type, payload = {}) => { + console.log("Sent broadcast message to remote:", type, payload); + bc.postMessage({ type, payload }); +}; + +function listenToBroadcastMessage() { + bc.onmessage = ({ data }) => { + console.log( + "Received broadcast message from window:", + data.type, + data.payload, + ); + + if (eventHandlers[data.type]) { + eventHandlers[data.type](data.payload); + } + }; +} + const cti = new CallingExtensions({ debugMode: true, eventHandlers: { @@ -72,6 +108,7 @@ const cti = new CallingExtensions({ ownerId, usesCallingWindow, iframeLocation, + hostUrl, } = {}) => { cti.initialized({ isLoggedIn: false, @@ -104,12 +141,21 @@ const cti = new CallingExtensions({ state.iframeLocation = iframeLocation; } - if (usesCallingWindow === false) { + if (hostUrl && usesCallingWindow === false) { state.usesCallingWindow = false; + const hostUrl = "https://app.hubspotqa.com/"; + const url = `${hostUrl}/calling-integration-popup-ui/${portalId}?usesCallingWindow=false`; + document .querySelector(".openwindow") - .setAttribute("style", JSON.stringify({ display: "block" })); + .children[0].setAttribute("href", url); + + document.querySelector(".openwindow").setAttribute("display", "block"); + } + + if (getUsesCallingWindowFalseInRemote()) { + listenToBroadcastMessage(); } }, onDialNumber: (data, rawEvent) => { @@ -261,31 +307,18 @@ export function incomingCall(optionalPayload) { toNumber: state.toNumber, externalCallId: state.externalCallId, }; + + if (getUsesCallingWindowFalseInPopup()) { + sendBroadcastMessage(INCOMING_CALL, payload); + return; + } + + // Send message to HubSpot window.setTimeout(() => { cti.incomingCall(optionalPayload || payload); }, 500); disableButtons([OUTGOING_CALL, INCOMING_CALL, USER_UNAVAILABLE]); enableButtons([ANSWER_CALL, END_CALL]); - - // Trigger incoming call from window - // Send message to all open remote tabs - if (!state.usesCallingWindow && state.iframeLocation === "window") { - bc.postMessage({ type: INCOMING_CALL, payload }); - } -} - -if (!state.usesCallingWindow && state.iframeLocation === "remote") { - bc.onmessage = ({ data }) => { - console.log( - "Received broadcast message from window:", - data.type, - data.payload, - ); - - if (data.type === INCOMING_CALL) { - incomingCall(data.payload); - } - }; } export function outgoingCall() { @@ -303,11 +336,21 @@ export function outgoingCall() { } export function answerCall() { + if (getUsesCallingWindowFalseInPopup()) { + sendBroadcastMessage(ANSWER_CALL); + return; + } + cti.callAnswered({ externalCallId: state.externalCallId }); disableButtons([ANSWER_CALL]); } export function endCall() { + if (getUsesCallingWindowFalseInPopup()) { + sendBroadcastMessage(END_CALL); + return; + } + cti.callEnded({ callEndStatus: callEndStatus.INTERNAL_COMPLETED, externalCallId: state.externalCallId, @@ -317,6 +360,11 @@ export function endCall() { } export function completeCall() { + if (getUsesCallingWindowFalseInPopup()) { + sendBroadcastMessage(COMPLETE_CALL); + return; + } + cti.callCompleted({ engagementId: state.engagementId, externalCallId: state.externalCallId, diff --git a/demos/demo-minimal-js/package-lock.json b/demos/demo-minimal-js/package-lock.json index 82cefff..0dc10a9 100644 --- a/demos/demo-minimal-js/package-lock.json +++ b/demos/demo-minimal-js/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@hubspot/calling-extensions-sdk": "^0.9.1-alpha.0", + "@hubspot/calling-extensions-sdk": "^0.9.2", "uuid": "^10.0.0" }, "devDependencies": { @@ -33,9 +33,9 @@ } }, "node_modules/@hubspot/calling-extensions-sdk": { - "version": "0.9.1-alpha.0", - "resolved": "https://registry.npmjs.org/@hubspot/calling-extensions-sdk/-/calling-extensions-sdk-0.9.1-alpha.0.tgz", - "integrity": "sha512-8QJhPWrWPMQD339lSwQjdPmt6YRXNBeIpau8yq28u5PXtXaUMdCjzAyZAIj03xfVBK4gRvsfpRwjFfuaherqVg==", + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@hubspot/calling-extensions-sdk/-/calling-extensions-sdk-0.9.2.tgz", + "integrity": "sha512-cjo9Z86CILC4u3ETyiPH7A0I3jBWcXTjohSdP1afCmxZNpqQc5nep8xRxkjGXGIJGHblBldv1XAOdtAKURZNzg==", "license": "MIT", "engines": { "node": ">=14" diff --git a/demos/demo-minimal-js/package.json b/demos/demo-minimal-js/package.json index 7e215ea..646a277 100644 --- a/demos/demo-minimal-js/package.json +++ b/demos/demo-minimal-js/package.json @@ -21,7 +21,7 @@ "webpack-dev-server": "^4.11.1" }, "dependencies": { - "@hubspot/calling-extensions-sdk": "^0.9.1-alpha.0", + "@hubspot/calling-extensions-sdk": "^0.9.2", "uuid": "^10.0.0" } } diff --git a/demos/package-lock.json b/demos/package-lock.json new file mode 100644 index 0000000..857a1c3 --- /dev/null +++ b/demos/package-lock.json @@ -0,0 +1,22 @@ +{ + "name": "calling-extensions-sdk-demos", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "calling-extensions-sdk-demos", + "dependencies": { + "@hubspot/calling-extensions-sdk": "^0.9.1-alpha.1" + } + }, + "node_modules/@hubspot/calling-extensions-sdk": { + "version": "0.9.1-alpha.1", + "resolved": "https://registry.npmjs.org/@hubspot/calling-extensions-sdk/-/calling-extensions-sdk-0.9.1-alpha.1.tgz", + "integrity": "sha512-N+39rKC+kEhoWnIZTg1WDchNcr4E0IhG0MVU3Mi184+L48ZBiC79VRRF/FvQf6GWwurfdczgwVHo4ixQdkAK5Q==", + "license": "MIT", + "engines": { + "node": ">=14" + } + } + } +} diff --git a/demos/package.json b/demos/package.json index 3c4e2b3..d7891bd 100644 --- a/demos/package.json +++ b/demos/package.json @@ -10,5 +10,8 @@ "build:gh": "npm run build:js && npm run build:react && cp ./src/index.html build/index.html && cp -a demo-minimal-js/bin/. build && cp -a demo-react-ts/dist/. build", "test:react": "cd demo-react-ts && npm run test", "test": "npm run test:react" + }, + "dependencies": { + "@hubspot/calling-extensions-sdk": "^0.9.1-alpha.1" } } diff --git a/package-lock.json b/package-lock.json index 9e13372..0f5d389 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@hubspot/calling-extensions-sdk", - "version": "0.9.1-alpha.0", + "version": "0.9.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@hubspot/calling-extensions-sdk", - "version": "0.9.1-alpha.0", + "version": "0.9.2", "license": "MIT", "devDependencies": { "@babel/cli": "^7.21.0", diff --git a/package.json b/package.json index ded7bfa..469a20c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hubspot/calling-extensions-sdk", - "version": "0.9.1-alpha.0", + "version": "0.9.2", "description": "A JavaScript SDK for integrating calling apps into HubSpot.", "publishConfig": { "access": "public" diff --git a/src/IFrameManager.ts b/src/IFrameManager.ts index 501202d..f199b7c 100644 --- a/src/IFrameManager.ts +++ b/src/IFrameManager.ts @@ -276,6 +276,7 @@ class IFrameManager { ownerId, iframeLocation, usesCallingWindow, + hostUrl, }); }