@saasquatch/squatch-js 2.5.0 → 2.5.1-0

package/demo/toolbar.tsx

@@ -1,526 +1,526 @@
-import React, { Component, useRef, useState, version } from "react";
-import { render } from "react-dom";
-import squatch from "../dist/squatch";
-
-import {
-  popup,
-  embed,
-  embedNew,
-  embedReferred,
-  popupNew,
-  popupReferred,
-  script,
-  toURL,
-  users,
-  href,
-} from "./sandbox";
-import { getVersions } from "./versions";
-import { delay } from "./util";
-import { widgets, worker } from "./generate";
-import { rest } from "msw";
-
-// 2. Define request handlers and response resolvers.
-
-const modes = ["POPUP", "EMBED"];
-const widgetTypes = [
-  "REFERRER_WIDGET",
-  "CONVERSION_WIDGET",
-  "p/tuesday-test/w/referrerWidget",
-];
-const staticVersions = ["HEAD", "latest", "alpha", "next", "local"];
-
-/**
- * Use the addUrlProps higher-order component to hook-in react-url-query.
- */
-class App extends Component {
-  constructor(props) {
-    super(props);
-    worker.start({
-      findWorker: (scriptURL, _mockServiceWorkerUrl) =>
-        scriptURL.includes("mockServiceWorker"),
-      onUnhandledRequest(req) {
-        console.error(
-          "Found an unhandled %s request to %s",
-          req.method,
-          req.url.href
-        );
-      },
-    });
-  }
-  state = {
-    versions: staticVersions,
-    toolbarOpen: true,
-  };
-  async componentWillMount() {
-    const apiVersions = await getVersions();
-    const versions = [...staticVersions, ...apiVersions];
-    this.setState({ versions });
-  }
-  render() {
-    return (
-      <div>
-        <button
-          onClick={() =>
-            this.setState({ toolbarOpen: !this.state.toolbarOpen })
-          }
-          style={{ float: "right" }}
-        >
-          {this.state.toolbarOpen ? `<` : `>`}
-        </button>
-        <div style={{ display: this.state.toolbarOpen ? "block" : "none" }}>
-          <hr />
-          <div>
-            <ParamArea />
-            <hr />
-            <h2>Quick pick variables</h2>
-            <details>
-              <summary>Tenant / Program</summary>
-              <ul>
-                <li>
-                  <a href={href(popup)}>Popup (classic)</a>
-                </li>
-                <li>
-                  <a href={href(embed)}>Embed (classic)</a>
-                </li>
-                <li>
-                  <a href={href(popupNew)}>Popup (new program)</a>
-                </li>
-                <li>
-                  <a href={href(embedNew)}>Embed (new program)</a>
-                </li>
-                <li>
-                  <a href={href(popupReferred)}>
-                    Popup (classic referred widget)
-                  </a>
-                </li>
-                <li>
-                  <a href={href(embedReferred)}>
-                    Embed (classic referred widget)
-                  </a>
-                </li>
-              </ul>
-            </details>
-            <WidgetType />
-            <ModeList />
-            <UserList />
-            <VersionList {...this.state} />
-            <MockedWidgets />
-            <CustomMockedWidget />
-          </div>
-          <hr />
-
-          <button onClick={() => recordPurchase()}>Record Purchase</button>
-          <hr />
-
-          <button onClick={() => runEventBomb()}>Event Bomb</button>
-        </div>
-      </div>
-    );
-  }
-}
-
-function ParamArea() {
-  return (
-    <div>
-      <h2>Squatch.js Config</h2>
-      <div>
-        <textarea id="area1" rows={15} cols={70} style={{ maxWidth: "100%" }}>
-          {JSON.stringify(window["sandbox"], null, 2)}
-        </textarea>
-      </div>
-      <div>
-        <button
-          onClick={() => {
-            let json: Sandbox = JSON.parse(
-              // @ts-ignore
-              document.getElementById("area1").value
-            );
-            toURL(json);
-          }}
-        >
-          Reload Config
-        </button>
-        <button
-          onClick={() => {
-            navigator.clipboard.writeText(window.location.toString());
-          }}
-        >
-          Share Current Config
-        </button>
-      </div>
-    </div>
-  );
-}
-
-async function recordPurchase() {
-  //@ts-ignore
-  const { squatch, sandbox } = window;
-  const {
-    jwt,
-    user: { id, accountId },
-  } = sandbox.initObj;
-  const fields = {
-    // Optional
-    total: 10.0,
-    revenue: 10.0,
-    tax: 5.0,
-    currency: "USD",
-  };
-
-  await squatch.events().track(
-    {
-      userId: id,
-      accountId: accountId,
-      events: [
-        {
-          key: "purchase",
-          fields: fields, // Optional
-          // id: "kjv12kbwktb13t3", // Optional id
-          // dateTriggered: 1535136384753  // Optional date
-        },
-      ],
-    },
-    {
-      jwt,
-    }
-  );
-  // TODO: Eventually we'd like an API like this:
-  // squatch.events().track("purchase", { ...fields });
-}
-async function runEventBomb() {
-  while (true) {
-    await recordPurchase();
-    await delay(100);
-  }
-}
-function WidgetType(props) {
-  return (
-    <details
-      title={window["sandbox"].initObj.widgetType}
-      key={0}
-      id={`dropdown-basic-1`}
-    >
-      {widgetTypes.map((widgetType, i) => (
-        <a
-          key={i}
-          href={href({
-            ...window["sandbox"],
-            initObj: {
-              ...window["sandbox"].initObj,
-              widgetType: widgetType,
-            },
-          })}
-        >
-          {widgetType}
-        </a>
-      ))}
-    </details>
-  );
-}
-function ModeList(props) {
-  return (
-    <details
-      title={window["sandbox"].initObj.engagementMedium}
-      key={0}
-      id={`dropdown-basic-1`}
-    >
-      <summary>Engagement Medium</summary>
-      {modes.map((mode, i) => (
-        <a
-          key={i}
-          href={href({
-            ...window["sandbox"],
-            initObj: {
-              ...window["sandbox"].initObj,
-              engagementMedium: mode,
-            },
-          })}
-        >
-          {mode}
-        </a>
-      ))}
-    </details>
-  );
-}
-function UserList(props) {
-  return (
-    <details
-      title={"User: " + window["sandbox"].initObj.user?.firstName}
-      key={0}
-      id={`dropdown-basic-1`}
-    >
-      <summary>User</summary>
-      {users.map((user, i) => (
-        <a
-          key={i}
-          href={href({
-            ...window["sandbox"],
-            initObj: {
-              ...window["sandbox"].initObj,
-              user: user,
-            },
-          })}
-        >
-          {user["firstName"] || "Empty"}
-        </a>
-      ))}
-    </details>
-  );
-}
-function VersionList(props) {
-  const { versions } = props;
-
-  return (
-    <details
-      title={"Version: " + window["sandbox"].version || "Head"}
-      key={0}
-      id={`dropdown-basic-1`}
-    >
-      <summary>Version</summary>
-      {versions.map((v, i) => (
-        <a
-          key={i}
-          href={href({
-            ...window["sandbox"],
-            version: v,
-            script:
-              v.toLocaleLowerCase() == "head"
-                ? script
-                : v == "local"
-                ? `./squatchjs.min.js`
-                : `https://unpkg.com/@saasquatch/squatch-js@${v}`,
-          })}
-        >
-          <button>{v}</button>
-        </a>
-      ))}
-    </details>
-  );
-}
-
-async function getCustomWidget(engagementMedium) {
-  window["sandbox"].initObj = {
-    ...window["sandbox"].initObj,
-    engagementMedium,
-  };
-
-  const value = document.getElementById("custom-widget")?.value;
-  worker.use(
-    rest.put(
-      "https://staging.referralsaasquatch.com/api/*",
-      (req, res, ctx) => {
-        return res(
-          ctx.delay(500),
-          ctx.status(202, "Mocked status"),
-          ctx.json({ jsOptions: {}, user: {}, template: value })
-        );
-      }
-    )
-  );
-  document.getElementById("squatchembed").innerHTML = "";
-  window["squatch"].widgets().upsertUser({
-    ...window["sandbox"].initObj,
-  });
-}
-
-function MockedWidgets(props) {
-  const { versions } = props;
-  const [engagementMedium, setEngagementMedium] = useState("EMBED");
-  const [usePreload, setUsePreload] = useState(false);
-  const [showWidget, setShowWidget] = useState(false);
-  const [widget, setWidget] = useState(undefined);
-  const container = usePreload && document.getElementById("squatchembed");
-  const [popupTrigger, setPopupTrigger] = useState(".squatchpop");
-
-  async function getMockWidget(
-    widget,
-    containerOverride: string | undefined = undefined
-  ) {
-    window["mockWidget"] = widget;
-    window["sandbox"].initObj = {
-      ...window["sandbox"].initObj,
-      engagementMedium,
-    };
-
-    worker.use(
-      rest.put(
-        "https://staging.referralsaasquatch.com/api/*",
-        (req, res, ctx) => {
-          return res(
-            ctx.delay(500),
-            ctx.status(202, "Mocked status"),
-            ctx.json(widgets[window["mockWidget"]])
-          );
-        }
-      )
-    );
-    const defaultElement = document.getElementById(
-      "squatchembed"
-    ) as HTMLElement;
-    defaultElement.innerHTML = "";
-    document.getElementById("test-selector").innerHTML = "";
-
-    if (!usePreload) defaultElement.setAttribute("style", "");
-    const { widget: embedWidget } = await window["squatch"]
-      .widgets()
-      .upsertUser({
-        ...window["sandbox"].initObj,
-        container: (usePreload && containerOverride) || container,
-        trigger: popupTrigger,
-      });
-
-    if (showWidget) embedWidget.open();
-    setWidget(embedWidget);
-  }
-
-  return (
-    <details
-      title={"Version: " + window["sandbox"].version || "Head"}
-      key={0}
-      id={`dropdown-basic-1`}
-    >
-      <summary>Mocked Widgets</summary>
-      <h4>Engagement Medium</h4>
-      <form onSubmit={(e) => e.preventDefault()}>
-        <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 />
-        <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>
-        <br />
-        <label>squatch popup trigger</label>
-        <input
-          value={popupTrigger}
-          onChange={(e) => setPopupTrigger(e.target.value)}
-        ></input>
-      </form>
-      <br />
-      <button
-        onClick={() => {
-          if (showWidget) {
-            setShowWidget(false);
-            widget?.close();
-          } else {
-            setShowWidget(true);
-            widget?.open();
-          }
-        }}
-      >
-        {showWidget ? "hide widget" : "show widget"}
-      </button>
-      {engagementMedium === "POPUP" ? (
-        <button
-          id={popupTrigger.substring(1)}
-          className={popupTrigger.substring(1)}
-        >
-          Open popup
-        </button>
-      ) : (
-        ""
-      )}
-      <hr />
-      <button onClick={() => getMockWidget("QuirksVanillaGA")}>
-        Quirks mode - Vanilla
-      </button>
-      <button onClick={() => getMockWidget("QuirksMintGA")}>
-        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")}>
-        Mint - With Container
-      </button>
-      <button onClick={() => getMockWidget("QuirksMintGAContainer")}>
-        Quirks mode - Mint - With Container
-      </button>
-      <button onClick={() => getMockWidget("MintGAContainerDisplayBlock")}>
-        Mint - With Container + Display Block
-      </button>
-      <button
-        onClick={() => getMockWidget("QuirksMintGAContainerDisplayBlock")}
-      >
-        Quirks mode - Mint - With Container + Display Block
-      </button>
-      <button onClick={() => getMockWidget("VanillaGANoContainer")}>
-        Vanilla - No Container
-      </button>
-      <button onClick={() => getMockWidget("MintGA", "#test-selector")}>
-        Mint - Selector
-      </button>
-      <hr />
-    </details>
-  );
-}
-
-function CustomMockedWidget(props) {
-  const { versions } = props;
-  const [engagementMedium, setEngagementMedium] = useState("EMBED");
-  return (
-    <details
-      title={"Version: " + window["sandbox"].version || "Head"}
-      key={0}
-      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}
-        cols={70}
-        style={{ maxWidth: "100%" }}
-      ></textarea>
-      <div>
-        <button onClick={() => getCustomWidget(engagementMedium)}>
-          Load Widget
-        </button>
-      </div>
-    </details>
-  );
-}
-const root = document.getElementById("app");
-
-render(<App />, root);
+import React, { Component, useRef, useState, version } from "react";
+import { render } from "react-dom";
+import squatch from "../dist/squatch";
+
+import {
+  popup,
+  embed,
+  embedNew,
+  embedReferred,
+  popupNew,
+  popupReferred,
+  script,
+  toURL,
+  users,
+  href,
+} from "./sandbox";
+import { getVersions } from "./versions";
+import { delay } from "./util";
+import { widgets, worker } from "./generate";
+import { rest } from "msw";
+
+// 2. Define request handlers and response resolvers.
+
+const modes = ["POPUP", "EMBED"];
+const widgetTypes = [
+  "REFERRER_WIDGET",
+  "CONVERSION_WIDGET",
+  "p/tuesday-test/w/referrerWidget",
+];
+const staticVersions = ["HEAD", "latest", "alpha", "next", "local"];
+
+/**
+ * Use the addUrlProps higher-order component to hook-in react-url-query.
+ */
+class App extends Component {
+  constructor(props) {
+    super(props);
+    worker.start({
+      findWorker: (scriptURL, _mockServiceWorkerUrl) =>
+        scriptURL.includes("mockServiceWorker"),
+      onUnhandledRequest(req) {
+        console.error(
+          "Found an unhandled %s request to %s",
+          req.method,
+          req.url.href
+        );
+      },
+    });
+  }
+  state = {
+    versions: staticVersions,
+    toolbarOpen: true,
+  };
+  async componentWillMount() {
+    const apiVersions = await getVersions();
+    const versions = [...staticVersions, ...apiVersions];
+    this.setState({ versions });
+  }
+  render() {
+    return (
+      <div>
+        <button
+          onClick={() =>
+            this.setState({ toolbarOpen: !this.state.toolbarOpen })
+          }
+          style={{ float: "right" }}
+        >
+          {this.state.toolbarOpen ? `<` : `>`}
+        </button>
+        <div style={{ display: this.state.toolbarOpen ? "block" : "none" }}>
+          <hr />
+          <div>
+            <ParamArea />
+            <hr />
+            <h2>Quick pick variables</h2>
+            <details>
+              <summary>Tenant / Program</summary>
+              <ul>
+                <li>
+                  <a href={href(popup)}>Popup (classic)</a>
+                </li>
+                <li>
+                  <a href={href(embed)}>Embed (classic)</a>
+                </li>
+                <li>
+                  <a href={href(popupNew)}>Popup (new program)</a>
+                </li>
+                <li>
+                  <a href={href(embedNew)}>Embed (new program)</a>
+                </li>
+                <li>
+                  <a href={href(popupReferred)}>
+                    Popup (classic referred widget)
+                  </a>
+                </li>
+                <li>
+                  <a href={href(embedReferred)}>
+                    Embed (classic referred widget)
+                  </a>
+                </li>
+              </ul>
+            </details>
+            <WidgetType />
+            <ModeList />
+            <UserList />
+            <VersionList {...this.state} />
+            <MockedWidgets />
+            <CustomMockedWidget />
+          </div>
+          <hr />
+
+          <button onClick={() => recordPurchase()}>Record Purchase</button>
+          <hr />
+
+          <button onClick={() => runEventBomb()}>Event Bomb</button>
+        </div>
+      </div>
+    );
+  }
+}
+
+function ParamArea() {
+  return (
+    <div>
+      <h2>Squatch.js Config</h2>
+      <div>
+        <textarea id="area1" rows={15} cols={70} style={{ maxWidth: "100%" }}>
+          {JSON.stringify(window["sandbox"], null, 2)}
+        </textarea>
+      </div>
+      <div>
+        <button
+          onClick={() => {
+            let json: Sandbox = JSON.parse(
+              // @ts-ignore
+              document.getElementById("area1").value
+            );
+            toURL(json);
+          }}
+        >
+          Reload Config
+        </button>
+        <button
+          onClick={() => {
+            navigator.clipboard.writeText(window.location.toString());
+          }}
+        >
+          Share Current Config
+        </button>
+      </div>
+    </div>
+  );
+}
+
+async function recordPurchase() {
+  //@ts-ignore
+  const { squatch, sandbox } = window;
+  const {
+    jwt,
+    user: { id, accountId },
+  } = sandbox.initObj;
+  const fields = {
+    // Optional
+    total: 10.0,
+    revenue: 10.0,
+    tax: 5.0,
+    currency: "USD",
+  };
+
+  await squatch.events().track(
+    {
+      userId: id,
+      accountId: accountId,
+      events: [
+        {
+          key: "purchase",
+          fields: fields, // Optional
+          // id: "kjv12kbwktb13t3", // Optional id
+          // dateTriggered: 1535136384753  // Optional date
+        },
+      ],
+    },
+    {
+      jwt,
+    }
+  );
+  // TODO: Eventually we'd like an API like this:
+  // squatch.events().track("purchase", { ...fields });
+}
+async function runEventBomb() {
+  while (true) {
+    await recordPurchase();
+    await delay(100);
+  }
+}
+function WidgetType(props) {
+  return (
+    <details
+      title={window["sandbox"].initObj.widgetType}
+      key={0}
+      id={`dropdown-basic-1`}
+    >
+      {widgetTypes.map((widgetType, i) => (
+        <a
+          key={i}
+          href={href({
+            ...window["sandbox"],
+            initObj: {
+              ...window["sandbox"].initObj,
+              widgetType: widgetType,
+            },
+          })}
+        >
+          {widgetType}
+        </a>
+      ))}
+    </details>
+  );
+}
+function ModeList(props) {
+  return (
+    <details
+      title={window["sandbox"].initObj.engagementMedium}
+      key={0}
+      id={`dropdown-basic-1`}
+    >
+      <summary>Engagement Medium</summary>
+      {modes.map((mode, i) => (
+        <a
+          key={i}
+          href={href({
+            ...window["sandbox"],
+            initObj: {
+              ...window["sandbox"].initObj,
+              engagementMedium: mode,
+            },
+          })}
+        >
+          {mode}
+        </a>
+      ))}
+    </details>
+  );
+}
+function UserList(props) {
+  return (
+    <details
+      title={"User: " + window["sandbox"].initObj.user?.firstName}
+      key={0}
+      id={`dropdown-basic-1`}
+    >
+      <summary>User</summary>
+      {users.map((user, i) => (
+        <a
+          key={i}
+          href={href({
+            ...window["sandbox"],
+            initObj: {
+              ...window["sandbox"].initObj,
+              user: user,
+            },
+          })}
+        >
+          {user["firstName"] || "Empty"}
+        </a>
+      ))}
+    </details>
+  );
+}
+function VersionList(props) {
+  const { versions } = props;
+
+  return (
+    <details
+      title={"Version: " + window["sandbox"].version || "Head"}
+      key={0}
+      id={`dropdown-basic-1`}
+    >
+      <summary>Version</summary>
+      {versions.map((v, i) => (
+        <a
+          key={i}
+          href={href({
+            ...window["sandbox"],
+            version: v,
+            script:
+              v.toLocaleLowerCase() == "head"
+                ? script
+                : v == "local"
+                ? `./squatchjs.min.js`
+                : `https://unpkg.com/@saasquatch/squatch-js@${v}`,
+          })}
+        >
+          <button>{v}</button>
+        </a>
+      ))}
+    </details>
+  );
+}
+
+async function getCustomWidget(engagementMedium) {
+  window["sandbox"].initObj = {
+    ...window["sandbox"].initObj,
+    engagementMedium,
+  };
+
+  const value = document.getElementById("custom-widget")?.value;
+  worker.use(
+    rest.put(
+      "https://staging.referralsaasquatch.com/api/*",
+      (req, res, ctx) => {
+        return res(
+          ctx.delay(500),
+          ctx.status(202, "Mocked status"),
+          ctx.json({ jsOptions: {}, user: {}, template: value })
+        );
+      }
+    )
+  );
+  document.getElementById("squatchembed").innerHTML = "";
+  window["squatch"].widgets().upsertUser({
+    ...window["sandbox"].initObj,
+  });
+}
+
+function MockedWidgets(props) {
+  const { versions } = props;
+  const [engagementMedium, setEngagementMedium] = useState("EMBED");
+  const [usePreload, setUsePreload] = useState(false);
+  const [showWidget, setShowWidget] = useState(false);
+  const [widget, setWidget] = useState(undefined);
+  const container = usePreload && document.getElementById("squatchembed");
+  const [popupTrigger, setPopupTrigger] = useState(".squatchpop");
+
+  async function getMockWidget(
+    widget,
+    containerOverride: string | undefined = undefined
+  ) {
+    window["mockWidget"] = widget;
+    window["sandbox"].initObj = {
+      ...window["sandbox"].initObj,
+      engagementMedium,
+    };
+
+    worker.use(
+      rest.put(
+        "https://staging.referralsaasquatch.com/api/*",
+        (req, res, ctx) => {
+          return res(
+            ctx.delay(500),
+            ctx.status(202, "Mocked status"),
+            ctx.json(widgets[window["mockWidget"]])
+          );
+        }
+      )
+    );
+    const defaultElement = document.getElementById(
+      "squatchembed"
+    ) as HTMLElement;
+    defaultElement.innerHTML = "";
+    document.getElementById("test-selector").innerHTML = "";
+
+    if (!usePreload) defaultElement.setAttribute("style", "");
+    const { widget: embedWidget } = await window["squatch"]
+      .widgets()
+      .upsertUser({
+        ...window["sandbox"].initObj,
+        container: (usePreload && containerOverride) || container,
+        trigger: popupTrigger,
+      });
+
+    if (showWidget) embedWidget.open();
+    setWidget(embedWidget);
+  }
+
+  return (
+    <details
+      title={"Version: " + window["sandbox"].version || "Head"}
+      key={0}
+      id={`dropdown-basic-1`}
+    >
+      <summary>Mocked Widgets</summary>
+      <h4>Engagement Medium</h4>
+      <form onSubmit={(e) => e.preventDefault()}>
+        <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 />
+        <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>
+        <br />
+        <label>squatch popup trigger</label>
+        <input
+          value={popupTrigger}
+          onChange={(e) => setPopupTrigger(e.target.value)}
+        ></input>
+      </form>
+      <br />
+      <button
+        onClick={() => {
+          if (showWidget) {
+            setShowWidget(false);
+            widget?.close();
+          } else {
+            setShowWidget(true);
+            widget?.open();
+          }
+        }}
+      >
+        {showWidget ? "hide widget" : "show widget"}
+      </button>
+      {engagementMedium === "POPUP" ? (
+        <button
+          id={popupTrigger.substring(1)}
+          className={popupTrigger.substring(1)}
+        >
+          Open popup
+        </button>
+      ) : (
+        ""
+      )}
+      <hr />
+      <button onClick={() => getMockWidget("QuirksVanillaGA")}>
+        Quirks mode - Vanilla
+      </button>
+      <button onClick={() => getMockWidget("QuirksMintGA")}>
+        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")}>
+        Mint - With Container
+      </button>
+      <button onClick={() => getMockWidget("QuirksMintGAContainer")}>
+        Quirks mode - Mint - With Container
+      </button>
+      <button onClick={() => getMockWidget("MintGAContainerDisplayBlock")}>
+        Mint - With Container + Display Block
+      </button>
+      <button
+        onClick={() => getMockWidget("QuirksMintGAContainerDisplayBlock")}
+      >
+        Quirks mode - Mint - With Container + Display Block
+      </button>
+      <button onClick={() => getMockWidget("VanillaGANoContainer")}>
+        Vanilla - No Container
+      </button>
+      <button onClick={() => getMockWidget("MintGA", "#test-selector")}>
+        Mint - Selector
+      </button>
+      <hr />
+    </details>
+  );
+}
+
+function CustomMockedWidget(props) {
+  const { versions } = props;
+  const [engagementMedium, setEngagementMedium] = useState("EMBED");
+  return (
+    <details
+      title={"Version: " + window["sandbox"].version || "Head"}
+      key={0}
+      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}
+        cols={70}
+        style={{ maxWidth: "100%" }}
+      ></textarea>
+      <div>
+        <button onClick={() => getCustomWidget(engagementMedium)}>
+          Load Widget
+        </button>
+      </div>
+    </details>
+  );
+}
+const root = document.getElementById("app");
+
+render(<App />, root);