Introduce onSetWidgetUrlFailed SDK event (#238)

* Introduce onSetWidgetUrlFailed SDK event

* Lint

* Install @types/uuid

* 0.8.0-alpha.0

* 0.8.0-beta.0

* Use latest beta version

demos/demo-minimal-js/index.js

@@ -157,6 +157,9 @@ const cti = new CallingExtensions({
     onPublishToChannelSucceeded: (data, rawEvent) => {
       /** HubSpot successfully published the call to the connected channel. */
     },
+    onSetWidgetUrlFailed: (data, rawEvent) => {
+      /** HubSpot was unable to change the widget iframe src URL. */
+    },
   },
 });
 

demos/demo-minimal-js/package.json

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

demos/demo-react-ts/package.json

@@ -18,7 +18,7 @@
     "node": ">=14"
   },
   "dependencies": {
-    "@hubspot/calling-extensions-sdk": "^0.7.0",
+    "@hubspot/calling-extensions-sdk": "^0.8.0-beta.0",
     "react": "^18.2.0",
     "react-aria": "^3.22.0",
     "react-dom": "^18.2.0",
@@ -38,6 +38,7 @@
     "@types/react-dom": "^18.0.10",
     "@types/styled-components": "^5.1.26",
     "@types/testing-library__jasmine-dom": "^1.3.0",
+    "@types/uuid": "^10.0.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.0.7",
     "babel-preset-react-app": "^10.0.1",

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

@@ -1,6 +1,3 @@
-/* eslint-disable import/no-relative-packages */
-import { useMemo, useState } from "react";
-import { v4 as uuidv4 } from "uuid";
 import CallingExtensions, {
   CompanyIdMatch,
   ContactIdMatch,
@@ -17,6 +14,8 @@ import CallingExtensions, {
   OnResize,
   Options,
 } from "@hubspot/calling-extensions-sdk";
+import { useMemo, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
 
 const INCOMING_NUMBER_KEY = "LocalSettings:Calling:DemoReact:incomingNumber";
 const INCOMING_CONTACT_NAME_KEY =
@@ -159,7 +158,7 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
 }
 
 export const useCti = (
-  initializeCallingStateForExistingCall: (incomingNumber: string) => void
+  initializeCallingStateForExistingCall: (incomingNumber: string) => void,
 ) => {
   const [phoneNumber, setPhoneNumber] = useState("");
   const [engagementId, setEngagementId] = useState<number | null>(null);
@@ -188,7 +187,7 @@ export const useCti = (
           const incomingNumber =
             window.localStorage.getItem(INCOMING_NUMBER_KEY);
           const incomingContactName = window.localStorage.getItem(
-            INCOMING_CONTACT_NAME_KEY
+            INCOMING_CONTACT_NAME_KEY,
           );
           if (engagementId && incomingNumber && incomingContactName) {
             setEngagementId(engagementId);
@@ -245,7 +244,7 @@ export const useCti = (
             // save info in localstorage so that it can retrieved on redirect
             window.localStorage.setItem(
               INCOMING_NUMBER_KEY,
-              cti.incomingNumber
+              cti.incomingNumber,
             );
             window.localStorage.setItem(INCOMING_CONTACT_NAME_KEY, name);
             cti.navigateToRecord({
@@ -285,6 +284,9 @@ export const useCti = (
         onInitiateCallIdFailed: (data: any, _rawEvent: any) => {
           /** HubSpot was unable to initiate call. */
         },
+        onSetWidgetUrlFailed: (data: any, _rawEvent: any) => {
+          /** HubSpot was unable to change the widget iframe src URL. */
+        },
       },
     });
   }, []);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/calling-extensions-sdk",
-  "version": "0.7.1-alpha.0",
+  "version": "0.8.0-beta.0",
   "description": "A JavaScript SDK for integrating calling apps into HubSpot.",
   "publishConfig": {
     "access": "public"

src/Constants.js

@@ -35,14 +35,15 @@ const hostToThirdPartyEvents = {
   DIAL_NUMBER: "DIAL_NUMBER",
   /** @deprecated use CREATE_ENGAGEMENT_SUCCEEDED instead */
   ENGAGEMENT_CREATED: "ENGAGEMENT_CREATED",
+  INITIATE_CALL_ID_FAILED: "INITIATE_CALL_ID_FAILED",
+  INITIATE_CALL_ID_SUCCEEDED: "INITIATE_CALL_ID_SUCCEEDED",
   NAVIGATE_TO_RECORD_FAILED: "NAVIGATE_TO_RECORD_FAILED",
   PUBLISH_TO_CHANNEL_FAILED: "PUBLISH_TO_CHANNEL_FAILED",
   PUBLISH_TO_CHANNEL_SUCCEEDED: "PUBLISH_TO_CHANNEL_SUCCEEDED",
+  SET_WIDGET_URL_FAILED: "SET_WIDGET_URL_FAILED",
   UPDATE_ENGAGEMENT_FAILED: "UPDATE_ENGAGEMENT_FAILED",
   UPDATE_ENGAGEMENT_SUCCEEDED: "UPDATE_ENGAGEMENT_SUCCEEDED",
   VISIBILITY_CHANGED: "VISIBILITY_CHANGED",
-  INITIATE_CALL_ID_SUCCEEDED: "INITIATE_CALL_ID_SUCCEEDED",
-  INITIATE_CALL_ID_FAILED: "INITIATE_CALL_ID_FAILED",
 };
 
 export const messageType = {
@@ -70,16 +71,17 @@ export const messageHandlerNames = {
   [messageType.DIAL_NUMBER]: "onDialNumber",
   [messageType.END_CALL]: "onEndCall",
   [messageType.ENGAGEMENT_CREATED]: "onEngagementCreated",
+  [messageType.INITIATE_CALL_ID_FAILED]: "onInitiateCallIdFailed",
+  [messageType.INITIATE_CALL_ID_SUCCEEDED]: "onInitiateCallIdSucceeded",
   [messageType.NAVIGATE_TO_RECORD_FAILED]: "onNavigateToRecordFailed",
   [messageType.PUBLISH_TO_CHANNEL_FAILED]: "onPublishToChannelFailed",
   [messageType.PUBLISH_TO_CHANNEL_SUCCEEDED]: "onPublishToChannelSucceeded",
   [messageType.READY]: "onReady",
   [messageType.SET_CALL_STATE]: "onSetCallState",
+  [messageType.SET_WIDGET_URL_FAILED]: "onSetWidgetUrlFailed",
   [messageType.UPDATE_ENGAGEMENT_FAILED]: "onUpdateEngagementFailed",
   [messageType.UPDATE_ENGAGEMENT_SUCCEEDED]: "onUpdateEngagementSucceeded",
   [messageType.VISIBILITY_CHANGED]: "onVisibilityChanged",
-  [messageType.INITIATE_CALL_ID_SUCCEEDED]: "onInitiateCallIdSucceeded",
-  [messageType.INITIATE_CALL_ID_FAILED]: "onInitiateCallIdFailed",
 };
 
 export const errorType = {

src/typedefs.js

@@ -6,23 +6,24 @@
 
 /**
  * @typedef {Object.<string, function>} EventHandlers
- * @property {function} onReady - Called when HubSpot is ready to receive messages.
- * @property {function} onDialNumber - Called when the HubSpot sends a dial number from the contact.
- * @property {function} onEngagementCreated - Called when HubSpot creates an engagement for the call.
- * @property {function} onVisibilityChanged - Called when the call widget's visibility changes.
  * @property {function} onCallerIdMatchFailed - Called when the caller ID match fails.
  * @property {function} onCallerIdMatchSucceeded - Called when the caller ID match succeeds.
  * @property {function} onCreateEngagementFailed - Called when creating an engagement fails.
  * @property {function} onCreateEngagementSucceeded - Called when creating an engagement succeeds.
+ * @property {function} onDialNumber - Called when the HubSpot sends a dial number from the contact.
+ * @property {function} onEndCall - Called when the call ends.
+ * @property {function} onEngagementCreated - Called when HubSpot creates an engagement for the call.
+ * @property {function} onInitiateCallIdFailed - Called when initiating a call ID fails.
+ * @property {function} onInitiateCallIdSucceeded - Called when initiating a call ID succeeds.
  * @property {function} onNavigateToRecordFailed - Called when navigating to a record fails.
  * @property {function} onPublishToChannelFailed - Called when publishing to a channel fails.
  * @property {function} onPublishToChannelSucceeded - Called when publishing to a channel succeeds.
+ * @property {function} onReady - Called when HubSpot is ready to receive messages.
  * @property {function} onSetCallState - Called when the call state changes.
+ * @property {function} onSetWidgetUrlFailed - Called when HubSpot was unable to change the widget iframe src URL.
  * @property {function} onUpdateEngagementFailed - Called when updating an engagement fails.
  * @property {function} onUpdateEngagementSucceeded - Called when updating an engagement succeeds.
- * @property {function} onEndCall - Called when the call ends.
- * @property {function} onInitiateCallIdSucceeded - Called when initiating a call ID succeeds.
- * @property {function} onInitiateCallIdFailed - Called when initiating a call ID fails.
+ * @property {function} onVisibilityChanged - Called when the call widget's visibility changes.
  * @property {function} [defaultEventHandler] - Default event handler to handle unhandled events.
  */