@saasquatch/squatch-js 2.3.1-5 → 2.3.2-0

package/demo/toolbar.tsx

@@ -298,11 +298,11 @@ function VersionList(props) {
   );
 }
 
-async function getMockWidget(widget) {
+async function getMockWidget(widget, engagementMedium) {
   window["mockWidget"] = widget;
   window["sandbox"].initObj = {
     ...window["sandbox"].initObj,
-    engagementMedium: "EMBED",
+    engagementMedium,
   };
 
   worker.use(
@@ -318,14 +318,13 @@ async function getMockWidget(widget) {
     )
   );
   document.getElementById("squatchembed").innerHTML = "";
-  window["squatch"].widgets().upsertUser(window["sandbox"].initObj);
-  // window.location.href = `/?widgetType=${widget}`;
+  window["squatch"].widgets().renderGA(window["sandbox"].initObj);
 }
 
-async function getCustomWidget() {
+async function getCustomWidget(engagementMedium) {
   window["sandbox"].initObj = {
     ...window["sandbox"].initObj,
-    engagementMedium: "EMBED",
+    engagementMedium,
   };
 
   const value = document.getElementById("custom-widget")?.value;
@@ -342,13 +341,13 @@ async function getCustomWidget() {
     )
   );
   document.getElementById("squatchembed").innerHTML = "";
-  window["squatch"].widgets().upsertUser(window["sandbox"].initObj);
-  // window.location.href = `/?widgetType=${widget}`;
+  window["squatch"].widgets().renderGA(window["sandbox"].initObj);
 }
 
 function MockedWidgets(props) {
   const { versions } = props;
 
+  const [engagementMedium, setEngagementMedium] = useState("EMBED");
   return (
     <details
       title={"Version: " + window["sandbox"].version || "Head"}
@@ -356,28 +355,66 @@ function MockedWidgets(props) {
       id={`dropdown-basic-1`}
     >
       <summary>Mocked Widgets</summary>
-      <button onClick={() => getMockWidget("QuirksVanillaGA")}>
+      <label>Embed</label>
+      <input
+        type="radio"
+        name="embed"
+        checked={engagementMedium === "EMBED"}
+        onClick={() => setEngagementMedium("EMBED")}
+      ></input>
+
+      <label>Popup</label>
+      <input
+        type="radio"
+        name="popup"
+        checked={engagementMedium === "POPUP"}
+        onClick={() => setEngagementMedium("POPUP")}
+      ></input>
+      <br />
+      <button
+        onClick={() => getMockWidget("QuirksVanillaGA", engagementMedium)}
+      >
         Quirks mode - Vanilla
       </button>
-      <button onClick={() => getMockWidget("QuirksMintGA")}>
+      <button onClick={() => getMockWidget("QuirksMintGA", engagementMedium)}>
         Quirks mode - Mint
       </button>
-      <button onClick={() => getMockWidget("classic")}>Classic</button>
-      <button onClick={() => getMockWidget("MintGA")}>GA - Mint</button>
-      <button onClick={() => getMockWidget("VanillaGA")}>GA - Vanilla</button>
-      <button onClick={() => getMockWidget("MintGAContainer")}>
+      <button onClick={() => getMockWidget("classic", engagementMedium)}>
+        Classic
+      </button>
+      <button onClick={() => getMockWidget("MintGA", engagementMedium)}>
+        GA - Mint
+      </button>
+      <button onClick={() => getMockWidget("VanillaGA", engagementMedium)}>
+        GA - Vanilla
+      </button>
+      <button
+        onClick={() => getMockWidget("MintGAContainer", engagementMedium)}
+      >
         Mint - With Container
       </button>
-      <button onClick={() => getMockWidget("QuirksMintGAContainer")}>
+      <button
+        onClick={() => getMockWidget("QuirksMintGAContainer", engagementMedium)}
+      >
         Quirks mode - Mint - With Container
       </button>
-      <button onClick={() => getMockWidget("MintGAContainerDisplayBlock")}>
+      <button
+        onClick={() =>
+          getMockWidget("MintGAContainerDisplayBlock", engagementMedium)
+        }
+      >
         Mint - With Container + Display Block
       </button>
-      <button onClick={() => getMockWidget("QuirksMintGAContainerDisplayBlock")}>
+      <button
+        onClick={() =>
+          getMockWidget("QuirksMintGAContainerDisplayBlock", engagementMedium)
+        }
+      >
         Quirks mode - Mint - With Container + Display Block
       </button>
-      <button onClick={() => getMockWidget("VanillaGANoContainer")}>
+      <button
+        onClick={() => getMockWidget("VanillaGANoContainer", engagementMedium)}
+      >
         Vanilla - No Container
       </button>
     </details>
@@ -386,7 +423,7 @@ function MockedWidgets(props) {
 
 function CustomMockedWidget(props) {
   const { versions } = props;
-
+  const [engagementMedium, setEngagementMedium] = useState("EMBED");
   return (
     <details
       title={"Version: " + window["sandbox"].version || "Head"}
@@ -394,6 +431,22 @@ function CustomMockedWidget(props) {
       id={`dropdown-basic-1`}
     >
       <summary>Custom Mocked Widget</summary>
+      <label>Embed</label>
+      <input
+        type="radio"
+        name="embed"
+        checked={engagementMedium === "EMBED"}
+        onClick={() => setEngagementMedium("EMBED")}
+      ></input>
+
+      <label>Popup</label>
+      <input
+        type="radio"
+        name="popup"
+        checked={engagementMedium === "POPUP"}
+        onClick={() => setEngagementMedium("POPUP")}
+      ></input>
+      <br />
       <textarea
         id="custom-widget"
         rows={15}
@@ -401,7 +454,9 @@ function CustomMockedWidget(props) {
         style={{ maxWidth: "100%" }}
       ></textarea>
       <div>
-        <button onClick={() => getCustomWidget()}>Load Widget</button>
+        <button onClick={() => getCustomWidget(engagementMedium)}>
+          Load Widget
+        </button>
       </div>
     </details>
   );