@saasquatch/squatch-js 2.3.1-4 → 2.3.1

package/demo/toolbar.tsx

@@ -1,5 +1,6 @@
-import React, { Component, version } from "react";
+import React, { Component, useState, version } from "react";
 import { render } from "react-dom";
+import squatch from "../dist/squatch";
 
 import {
   popup,
@@ -17,13 +18,6 @@ import { getVersions } from "./versions";
 import { delay } from "./util";
 import { widgets, worker } from "./generate";
 import { rest } from "msw";
-import classic from "./templates/classic";
-import MintGA from "./templates/MintGA";
-import VanillaGA from "./templates/VanillaGA";
-
-console.log("me old sandbox", window["sandbox"]);
-
-console.log("my worker", { worker });
 
 // 2. Define request handlers and response resolvers.
 
@@ -33,7 +27,7 @@ const widgetTypes = [
   "CONVERSION_WIDGET",
   "p/tuesday-test/w/referrerWidget",
 ];
-const staticVersions = ["HEAD", "latest", "alpha", "next"];
+const staticVersions = ["HEAD", "latest", "alpha", "next", "local"];
 
 /**
  * Use the addUrlProps higher-order component to hook-in react-url-query.
@@ -111,6 +105,7 @@ class App extends Component {
             <UserList />
             <VersionList {...this.state} />
             <MockedWidgets />
+            <CustomMockedWidget />
           </div>
           <hr />
 
@@ -274,6 +269,7 @@ function UserList(props) {
 }
 function VersionList(props) {
   const { versions } = props;
+
   return (
     <details
       title={"Version: " + window["sandbox"].version || "Head"}
@@ -290,44 +286,68 @@ function VersionList(props) {
             script:
               v.toLocaleLowerCase() == "head"
                 ? script
+                : v == "local"
+                ? `./squatchjs.min.js`
                 : `https://unpkg.com/@saasquatch/squatch-js@${v}`,
           })}
         >
-          {v}
+          <button>{v}</button>
         </a>
       ))}
     </details>
   );
 }
 
+async function getMockWidget(widget, engagementMedium) {
+  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"]])
+        );
+      }
+    )
+  );
+  document.getElementById("squatchembed").innerHTML = "";
+  window["squatch"].widgets().upsertUser(window["sandbox"].initObj);
+}
+
+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;
 
-  async function getMockWidget(widget) {
-    console.log("fetch");
-    // window["squatch"].render()
-    window["mockWidget"] = widget;
-    window["sandbox"].initObj = {
-      ...window["sandbox"].initObj,
-      engagementMedium: "EMBED",
-    };
-
-    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"]])
-          );
-        }
-      )
-    );
-    document.getElementById("squatchembed").innerHTML = "";
-    window["squatch"].widgets().upsertUser(window["sandbox"].initObj);
-    // window.location.href = `/?widgetType=${widget}`;
-  }
+  const [engagementMedium, setEngagementMedium] = useState("EMBED");
   return (
     <details
       title={"Version: " + window["sandbox"].version || "Head"}
@@ -335,24 +355,112 @@ 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("VanillaGANoContainer")}>
+      <button
+        onClick={() => getMockWidget("QuirksMintGAContainer", engagementMedium)}
+      >
+        Quirks mode - Mint - With Container
+      </button>
+      <button
+        onClick={() =>
+          getMockWidget("MintGAContainerDisplayBlock", engagementMedium)
+        }
+      >
+        Mint - With Container + Display Block
+      </button>
+      <button
+        onClick={() =>
+          getMockWidget("QuirksMintGAContainerDisplayBlock", engagementMedium)
+        }
+      >
+        Quirks mode - Mint - With Container + Display Block
+      </button>
+      <button
+        onClick={() => getMockWidget("VanillaGANoContainer", engagementMedium)}
+      >
         Vanilla - No Container
       </button>
     </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);