@saasquatch/squatch-js 2.3.2-18 → 2.3.2-21

package/demo/toolbar.tsx

@@ -298,7 +298,12 @@ function VersionList(props) {
   );
 }
 
-async function getMockWidget(widget, engagementMedium, element?: HTMLElement) {
+async function getMockWidget(
+  widget,
+  engagementMedium,
+  element?: HTMLElement,
+  showWidget?: boolean
+) {
   window["mockWidget"] = widget;
   window["sandbox"].initObj = {
     ...window["sandbox"].initObj,
@@ -318,10 +323,13 @@ async function getMockWidget(widget, engagementMedium, element?: HTMLElement) {
     )
   );
   document.getElementById("squatchembed").innerHTML = "";
-  window["squatch"].widgets().upsertUser({
+
+  await window["squatch"].widgets().upsertUser({
     ...window["sandbox"].initObj,
     element,
   });
+
+  if (showWidget) element.open();
 }
 
 async function getCustomWidget(engagementMedium) {
@@ -346,7 +354,6 @@ async function getCustomWidget(engagementMedium) {
   document.getElementById("squatchembed").innerHTML = "";
   window["squatch"].widgets().upsertUser({
     ...window["sandbox"].initObj,
-    element: <div className="sam"></div>,
   });
 }
 
@@ -358,7 +365,6 @@ function MockedWidgets(props) {
   // const [element, setElement] = useState(false);
   const element = usePreload && document.getElementById("squatchembed");
 
-  console.log("engagement medium?", engagementMedium);
   return (
     <details
       title={"Version: " + window["sandbox"].version || "Head"}
@@ -367,38 +373,41 @@ function MockedWidgets(props) {
     >
       <summary>Mocked Widgets</summary>
       <h4>Engagement Medium</h4>
-      <label>Embed</label>
-      <input
-        type="radio"
-        name="embed"
-        checked={engagementMedium === "EMBED"}
-        onClick={() => setEngagementMedium("EMBED")}
-      ></input>
+      <form onSubmit={(e) => e.preventDefault()}>
+        <label>Embed</label>
 
-      <label>Popup</label>
-      <input
-        type="radio"
-        name="popup"
-        checked={engagementMedium === "POPUP"}
-        onClick={() => setEngagementMedium("POPUP")}
-      ></input>
-      <br />
-      <h4>Preload</h4>
-      <label>true</label>
-      <input
-        type="radio"
-        name="preload"
-        checked={usePreload === true}
-        onClick={() => setUsePreload(true)}
-      ></input>
+        <input
+          type="radio"
+          name="embed"
+          checked={engagementMedium === "EMBED"}
+          onClick={() => setEngagementMedium("EMBED")}
+        ></input>
 
-      <label>false</label>
-      <input
-        type="radio"
-        name="noPreload"
-        checked={usePreload === false}
-        onClick={() => setUsePreload(false)}
-      ></input>
+        <label>Popup</label>
+        <input
+          type="radio"
+          name="popup"
+          checked={engagementMedium === "POPUP"}
+          onClick={() => setEngagementMedium("POPUP")}
+        ></input>
+        <br />
+        <h4>Preload</h4>
+        <label>true</label>
+        <input
+          type="radio"
+          name="preload"
+          checked={usePreload === true}
+          onClick={() => setUsePreload(true)}
+        ></input>
+
+        <label>false</label>
+        <input
+          type="radio"
+          name="noPreload"
+          checked={usePreload === false}
+          onClick={() => setUsePreload(false)}
+        ></input>
+      </form>
       <br />
       <button
         onClick={() => {
@@ -406,7 +415,6 @@ function MockedWidgets(props) {
             setShowWidget(false);
             element?.close();
           } else {
-            console.log("element?", element);
             setShowWidget(true);
             element?.open();
           }
@@ -417,41 +425,64 @@ function MockedWidgets(props) {
       <br />
       <button
         onClick={() =>
-          getMockWidget("QuirksVanillaGA", engagementMedium, element)
+          getMockWidget(
+            "QuirksVanillaGA",
+            engagementMedium,
+            element,
+            showWidget
+          )
         }
       >
         Quirks mode - Vanilla
       </button>
       <button
-        onClick={() => getMockWidget("QuirksMintGA", engagementMedium, element)}
+        onClick={() =>
+          getMockWidget("QuirksMintGA", engagementMedium, element, showWidget)
+        }
       >
         Quirks mode - Mint
       </button>
       <button
-        onClick={() => getMockWidget("classic", engagementMedium, element)}
+        onClick={() =>
+          getMockWidget("classic", engagementMedium, element, showWidget)
+        }
       >
         Classic
       </button>
       <button
-        onClick={() => getMockWidget("MintGA", engagementMedium, element)}
+        onClick={() =>
+          getMockWidget("MintGA", engagementMedium, element, showWidget)
+        }
       >
         GA - Mint
       </button>
       <button
-        onClick={() => getMockWidget("VanillaGA", engagementMedium, element)}
+        onClick={() =>
+          getMockWidget("VanillaGA", engagementMedium, element, showWidget)
+        }
       >
         GA - Vanilla
       </button>
       <button
         onClick={() =>
-          getMockWidget("MintGAContainer", engagementMedium, element)
+          getMockWidget(
+            "MintGAContainer",
+            engagementMedium,
+            element,
+            showWidget
+          )
         }
       >
         Mint - With Container
       </button>
       <button
         onClick={() =>
-          getMockWidget("QuirksMintGAContainer", engagementMedium, element)
+          getMockWidget(
+            "QuirksMintGAContainer",
+            engagementMedium,
+            element,
+            showWidget
+          )
         }
       >
         Quirks mode - Mint - With Container
@@ -461,7 +492,8 @@ function MockedWidgets(props) {
           getMockWidget(
             "MintGAContainerDisplayBlock",
             engagementMedium,
-            element
+            element,
+            showWidget
           )
         }
       >
@@ -472,7 +504,8 @@ function MockedWidgets(props) {
           getMockWidget(
             "QuirksMintGAContainerDisplayBlock",
             engagementMedium,
-            element
+            element,
+            showWidget
           )
         }
       >
@@ -480,7 +513,12 @@ function MockedWidgets(props) {
       </button>
       <button
         onClick={() =>
-          getMockWidget("VanillaGANoContainer", engagementMedium, element)
+          getMockWidget(
+            "VanillaGANoContainer",
+            engagementMedium,
+            element,
+            showWidget
+          )
         }
       >
         Vanilla - No Container