@saasquatch/squatch-js 2.3.2-2 → 2.3.2-3

package/demo/toolbar.tsx

@@ -1,4 +1,4 @@
-import React, { Component, useState, version } from "react";
+import React, { Component, useRef, useState, version } from "react";
 import { render } from "react-dom";
 import squatch from "../dist/squatch";
 
@@ -298,7 +298,7 @@ function VersionList(props) {
   );
 }
 
-async function getMockWidget(widget, engagementMedium) {
+async function getMockWidget(widget, engagementMedium, element?: HTMLElement) {
   window["mockWidget"] = widget;
   window["sandbox"].initObj = {
     ...window["sandbox"].initObj,
@@ -318,7 +318,10 @@ async function getMockWidget(widget, engagementMedium) {
     )
   );
   document.getElementById("squatchembed").innerHTML = "";
-  window["squatch"].widgets().upsertUser(window["sandbox"].initObj);
+  window["squatch"].widgets().upsertUser({
+    ...window["sandbox"].initObj,
+    element,
+  });
 }
 
 async function getCustomWidget(engagementMedium) {
@@ -341,13 +344,17 @@ async function getCustomWidget(engagementMedium) {
     )
   );
   document.getElementById("squatchembed").innerHTML = "";
-  window["squatch"].widgets().upsertUser(window["sandbox"].initObj);
+  window["squatch"].widgets().upsertUser({
+    ...window["sandbox"].initObj,
+    element: <div className="sam"></div>,
+  });
 }
 
 function MockedWidgets(props) {
   const { versions } = props;
-
   const [engagementMedium, setEngagementMedium] = useState("EMBED");
+  const [showWidget, setShowWidget] = useState(false);
+  const [element, setElement] = useState(false);
   return (
     <details
       title={"Version: " + window["sandbox"].version || "Head"}
@@ -371,6 +378,24 @@ function MockedWidgets(props) {
         onClick={() => setEngagementMedium("POPUP")}
       ></input>
       <br />
+      <button
+        onClick={() => {
+          if (showWidget) {
+            setShowWidget(false);
+          } else {
+            setShowWidget(true);
+          }
+        }}
+      >
+        {showWidget ? "hide widget" : "show widget"}
+      </button>
+      <div
+        style={{ display: showWidget ? "block" : "none" }}
+        ref={(el) => {
+          setElement(el);
+        }}
+      ></div>
+      <br />
       <button
         onClick={() => getMockWidget("QuirksVanillaGA", engagementMedium)}
       >
@@ -382,7 +407,9 @@ function MockedWidgets(props) {
       <button onClick={() => getMockWidget("classic", engagementMedium)}>
         Classic
       </button>
-      <button onClick={() => getMockWidget("MintGA", engagementMedium)}>
+      <button
+        onClick={() => getMockWidget("MintGA", engagementMedium, element)}
+      >
         GA - Mint
       </button>
       <button onClick={() => getMockWidget("VanillaGA", engagementMedium)}>