Add toggle to enforce order of events in the demo minimal js (#203)

HubSpot · Aug 5, 2024 · ccc3b25 · ccc3b25
1 parent f0291ad
commit ccc3b25
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/demos/demo-minimal-js/index.html b/demos/demo-minimal-js/index.html
@@ -158,78 +158,67 @@
         />
         <p>2. Log in to the app</p>
         <input
-          disabled
           id="login"
           onclick="logIn()"
           type="button"
           value="log in"
         />
         <input
-          disabled
           id="logout"
           onclick="logOut()"
           type="button"
           value="log out"
         />
         <p>3. Set inbound calling availability</p>
         <button
-          disabled
           id="useravailable"
           onclick="userAvailable()"
           type="button"
         ><span>available</span><span class="beta-badge">BETA</span></button>
         <button
-          disabled
           id="userunavailable"
           onclick="userUnavailable()"
           type="button"
         ><span>unavailable</span><span class="beta-badge">BETA</span></button>
         <p>4. Start a call</p>
         <button
-          disabled
           id="incomingcall"
           onclick="incomingCall()"
           type="button"
         ><span>incoming call started</span><span class="beta-badge">BETA</span></button>
         <input
-          disabled
           id="outgoingcall"
           onclick="outgoingCall()"
           type="button"
           value="outgoing call started"
         />
         <input
-          disabled
           id="answercall"
           onclick="answerCall()"
           type="button"
           value="call answered"
         />
         <p>5. End a call</p>
         <input
-          disabled
           id="endcall"
           onclick="endCall()"
           type="button"
           value="call ended"
         />
         <input
-          disabled
           id="completecall"
           onclick="completeCall()"
           type="button"
           value="call completed"
         />
         <p class="other-events">Other events</p>
         <input
-          disabled
           id="senderror"
           onclick="sendError()"
           type="button"
           value="send error"
         />
         <input
-          disabled
           id="resizewidget"
           onclick="resizeWidget()"
           type="button"

diff --git a/demos/demo-minimal-js/index.js b/demos/demo-minimal-js/index.js
@@ -11,6 +11,7 @@ export const state = {
   toNumber: "+1234",
   userAvailable: false,
   userId: 0,
+  enforceButtonsOrder: false,
   ownerId: 0,
 };
 
@@ -34,12 +35,18 @@ const USER_AVAILABLE = "useravailable";
 const USER_UNAVAILABLE = "userunavailable";
 
 function disableButtons(ids) {
+  if (!state.enforceButtonsOrder) {
+    return;
+  }
   ids.forEach(id => {
     document.querySelector(`#${id}`).setAttribute("disabled", true);
   });
 }
 
 function enableButtons(ids) {
+  if (!state.enforceButtonsOrder) {
+    return;
+  }
   ids.forEach(id => {
     document.querySelector(`#${id}`).removeAttribute("disabled");
   });
@@ -49,13 +56,22 @@ const cti = new CallingExtensions({
   debugMode: true,
   eventHandlers: {
     onReady: ({ engagementId, portalId, userId, ownerId } = {}) => {
-      debugger;
       cti.initialized({
         engagementId,
         isLoggedIn: false,
         sizeInfo,
       });
-      disableButtons([INITIALIZE]);
+      disableButtons([
+        INITIALIZE,
+        USER_AVAILABLE,
+        USER_UNAVAILABLE,
+        OUTGOING_CALL,
+        INCOMING_CALL,
+        ANSWER_CALL,
+        END_CALL,
+        COMPLETE_CALL,
+        LOG_OUT,
+      ]);
       if (engagementId) {
         enableButtons([ANSWER_CALL, END_CALL]);
         state.engagementId = engagementId;
@@ -147,7 +163,17 @@ export function initialize() {
   cti.initialized({
     isLoggedIn: false,
   });
-  disableButtons([INITIALIZE]);
+  disableButtons([
+    INITIALIZE,
+    USER_AVAILABLE,
+    USER_UNAVAILABLE,
+    OUTGOING_CALL,
+    INCOMING_CALL,
+    ANSWER_CALL,
+    END_CALL,
+    COMPLETE_CALL,
+    LOG_OUT,
+  ]);
   enableButtons([LOG_IN, SEND_ERROR, RESIZE_WIDGET]);
 }
 

diff --git a/src/IFrameManager.js b/src/IFrameManager.js
@@ -77,9 +77,7 @@ class IFrameManager {
   }
 
   static createIFrame(iFrameOptions, onLoadCallback) {
-    const {
-      src, width, height, hostElementSelector,
-    } = iFrameOptions;
+    const { src, width, height, hostElementSelector } = iFrameOptions;
 
     if (!src || !width || !height || !hostElementSelector) {
       throw new Error(