From ccc3b25ff2a33692f9f7b322e51cda1e43e511e2 Mon Sep 17 00:00:00 2001
From: Esme <23175119+esme@users.noreply.github.com>
Date: Mon, 5 Aug 2024 15:30:53 -0700
Subject: [PATCH] Add toggle to enforce order of events in the demo minimal js
 (#203)

---
 demos/demo-minimal-js/index.html | 11 -----------
 demos/demo-minimal-js/index.js   | 32 +++++++++++++++++++++++++++++---
 src/IFrameManager.js             |  4 +---
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/demos/demo-minimal-js/index.html b/demos/demo-minimal-js/index.html
index 95d344a..78005b7 100644
--- a/demos/demo-minimal-js/index.html
+++ b/demos/demo-minimal-js/index.html
@@ -158,14 +158,12 @@
         />
         <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"
@@ -173,33 +171,28 @@
         />
         <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"
@@ -207,14 +200,12 @@
         />
         <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"
@@ -222,14 +213,12 @@
         />
         <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
index 5daa39d..63255a6 100644
--- 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
index 7518088..fc63be7 100644
--- 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(