npm - @saasquatch/squatch-js - Versions diffs - 2.8.3-3 → 2.8.3-30 - Mend

@saasquatch/squatch-js 2.8.3-3 → 2.8.3-30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/CHANGELOG.md +1 -1
package/babelregister.js +0 -1
package/coverage/base.css +224 -0
package/coverage/block-navigation.js +87 -0
package/coverage/clover.xml +996 -0
package/coverage/coverage-final.json +26 -0
package/coverage/favicon.png +0 -0
package/coverage/prettify.css +1 -0
package/coverage/prettify.js +2 -0
package/coverage/sort-arrow-sprite.png +0 -0
package/coverage/sorter.js +210 -0
package/demo/perf-benchmark.ts +363 -0
package/demo/perf-compare.html +870 -0
package/demo/perf-deploy/vercel.json +17 -0
package/demo/perf-frame.html +417 -0
package/demo/perf-server.ts +131 -0
package/dist/ErrorTemplate-DUNm11h9.js +124 -0
package/dist/ErrorTemplate-DUNm11h9.js.map +1 -0
package/dist/ErrorTemplate-DumOlC5f.cjs +109 -0
package/dist/ErrorTemplate-DumOlC5f.cjs.map +1 -0
package/dist/SkeletonTemplate-B3Bk4NFu.cjs +243 -0
package/dist/SkeletonTemplate-B3Bk4NFu.cjs.map +1 -0
package/dist/SkeletonTemplate-Day_0iMM.js +246 -0
package/dist/SkeletonTemplate-Day_0iMM.js.map +1 -0
package/dist/squatch.cjs.js +33 -2523
package/dist/squatch.cjs.js.map +1 -1
package/dist/squatch.esm.js +928 -1956
package/dist/squatch.esm.js.map +1 -1
package/dist/squatch.js +227 -2373
package/dist/squatch.js.map +1 -1
package/dist/squatch.min.js +4 -5
package/dist/types.d.ts +134 -1
package/dist/utils/cookieUtils.d.ts +1 -0
package/dist/utils/logger.d.ts +23 -0
package/dist/widgets/EmbedWidget.d.ts +1 -1
package/dist/widgets/ErrorTemplate.d.ts +9 -0
package/dist/widgets/PopupWidget.d.ts +3 -5
package/dist/widgets/SkeletonTemplate.d.ts +1 -4
package/dist/widgets/Widget.d.ts +29 -2
package/dist/widgets/declarative/DeclarativeWidget.d.ts +9 -1
package/dist/widgets/declarative/DeclarativeWidgets.d.ts +0 -6
package/package.json +11 -15
package/vite-env.d.ts +2 -1
package/vite.config.ts +17 -0
package/babel.config.js +0 -8
package/jest.config.ts +0 -200

package/demo/perf-deploy/vercel.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "rewrites": [
+    { "source": "/api/:path*", "destination": "https://staging.referralsaasquatch.com/api/:path*" },
+    { "source": "/a/:path*", "destination": "https://staging.referralsaasquatch.com/a/:path*" }
+  ],
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        { "key": "Access-Control-Allow-Origin", "value": "*" },
+        { "key": "Access-Control-Allow-Methods", "value": "GET, POST, PUT, DELETE, OPTIONS" },
+        { "key": "Access-Control-Allow-Headers", "value": "Content-Type, Authorization, X-SaaSquatch-Referrer" }
+      ]
+    }
+  ],
+  "cleanUrls": true
+}

package/demo/perf-frame.html ADDED Viewed

@@ -0,0 +1,417 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Perf Frame</title>
+    <style>
+      body { margin: 0; padding: 0; font-family: system-ui, sans-serif; }
+      squatch-embed, impact-embed { display: block; width: 100%; }
+      #status { position: fixed; top: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: #0f0; font-size: 11px; padding: 4px 8px; z-index: 99999; font-family: monospace; white-space: pre; }
+    </style>
+    <script>
+      // ── Instrumentation globals (runs before loader) ─────────────────
+      window.__perfT0 = performance.now();
+      window.__perfMetrics = null;
+      window.__perfMarks = {};
+      window.__perfMark = function (name) {
+        window.__perfMarks[name] = performance.now();
+        window.__perfUpdateStatus();
+      };
+      window.__perfElapsed = function (name) {
+        var v = window.__perfMarks[name];
+        return v ? (v - window.__perfT0).toFixed(1) + "ms" : "…";
+      };
+      window.__perfUpdateStatus = function () {
+        var el = document.getElementById("status");
+        if (!el) return;
+        el.textContent =
+          "SDK load: " + window.__perfElapsed("sdk-script-loaded") +
+          "  ready: " + window.__perfElapsed("sdk-ready") +
+          "  frame: " + window.__perfElapsed("frame-created") +
+          "  paint: " + window.__perfElapsed("meaningful-paint") +
+          "  stable: " + window.__perfElapsed("stable") +
+          "  unstyled: " + window.__perfElapsed(window.__perfMarks["skeleton-start"] ? "skeleton-start" : "unstyled-end");
+      };
+      window.__perfReport = function () {
+        var t0 = window.__perfT0;
+        var marks = window.__perfMarks;
+        function delta(name) {
+          var v = marks[name];
+          return (v && v > t0) ? v - t0 : 0;
+        }
+        var sdkUrl = new URLSearchParams(window.location.search).get("sdk") || "";
+        var bundleSize = 0;
+        try {
+          var entries = performance.getEntriesByType("resource");
+          for (var i = 0; i < entries.length; i++) {
+            if (entries[i].name && entries[i].name.indexOf("squatch-js") > -1) {
+              bundleSize = entries[i].transferSize || entries[i].encodedBodySize || 0;
+              break;
+            }
+          }
+        } catch (e) {}
+        var networkTime = 0;
+        try {
+          var resEntries = performance.getEntriesByType("resource");
+          for (var j = 0; j < resEntries.length; j++) {
+            var e = resEntries[j];
+            if (e.responseEnd > 0 && e.startTime >= 0) {
+              networkTime += e.responseEnd - e.startTime;
+            }
+          }
+        } catch (e) {}
+        var out = {
+          sdkUrl: sdkUrl,
+          sdkScriptLoad: delta("sdk-script-loaded"),
+          sdkReady: delta("sdk-ready"),
+          frameCreated: delta("frame-created"),
+          meaningfulPaint: delta("meaningful-paint"),
+          stable: delta("stable"),
+          timeUnstyled: marks["skeleton-start"]
+            ? delta("skeleton-start")
+            : delta("unstyled-end"),
+          bundleSizeBytes: bundleSize,
+          networkTime: networkTime,
+          raw: marks
+        };
+        window.__perfMetrics = out;
+        try {
+          window.parent.postMessage({ type: "perf-metrics", metrics: out }, "*");
+        } catch (e) {}
+        console.log("[perf-frame] metrics:", JSON.stringify(out, null, 2));
+      };
+    </script>
+    <script>
+      // ── SDK Loader (exact production pattern, dynamic URL) ──────────
+      var __sdkUrl = new URLSearchParams(window.location.search).get("sdk");
+      if (__sdkUrl) {
+        !(function (a, b) {
+          a("squatch", __sdkUrl, b);
+        })(function (a, b, c) {
+          var d, e, f;
+          ((c["_" + a] = {}),
+            (c[a] = {}),
+            (c[a].ready = function (b) {
+              c["_" + a].ready = c["_" + a].ready || [];
+              c["_" + a].ready.push(b);
+            }),
+            (e = document.createElement("script")),
+            (e.async = 1),
+            (e.src = b),
+            (e.onload = function () {
+              window.__perfMark("sdk-script-loaded");
+            }),
+            (e.onerror = function () {
+              window.__perfMark("sdk-script-error");
+              window.__perfReport();
+            }),
+            (f = document.getElementsByTagName("script")[0]),
+            f.parentNode.insertBefore(e, f));
+        }, this);
+        window.__perfMark("sdk-load-start");
+        window.squatch.ready(function () {
+          window.__perfMark("sdk-ready");
+        });
+      }
+    </script>
+    <script>
+      // ── Widget configuration ────────────────────────────────────────
+      // Read config from URL params (set by perf-compare.html), with defaults
+      var __params = new URLSearchParams(window.location.search);
+      var __jwt = __params.get("jwt") || "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoiMGM2YmUwZTcxMGViMDk1OTU2ODMxYTkyOTUxODVlMmU5N2VmMTQzMDhjN2UzNjFmYjBlYzY0NTE0NjUwY2NhOCIsImFjY291bnRJZCI6IjBjNmJlMGU3MTBlYjA5NTk1NjgzMWE5Mjk1MTg1ZTJlOTdlZjE0MzA4YzdlMzYxZmIwZWM2NDUxNDY1MGNjYTgiLCJlbWFpbCI6ImRlcmVrLnNpZW1lbnMrbm93OTJAaW1wYWN0LmNvbSJ9fQ.KOORz1aOIVRPR6PdF3Ss0D1AW19EYTX97WnA6fOVXaI";
+      var __domain = __params.get("domain") || window.location.origin;
+      var __tenant = __params.get("tenant") || "ac52kfybp1tkr";
+      var __widget = __params.get("widget") || "p/47253/w/referrerWidget";
+      var __cfg = { domain: __domain };
+      window.squatchTenant = __tenant;
+      // v2 globals
+      window.squatchToken = __jwt;
+      window.squatchConfig = __cfg;
+      // @next globals (takes precedence when both are set)
+      window.impactToken = __jwt;
+      window.impactConfig = __cfg;
+    </script>
+    <script>
+      // ── Dynamic widget element ──────────────────────────────────────
+      // v2 only registers <squatch-embed>, @next registers both
+      // <squatch-embed> and <impact-embed>. Use <squatch-embed> for v2,
+      // <impact-embed> for @next.
+      (function () {
+        var sdk = new URLSearchParams(window.location.search).get("sdk") || "";
+        var isV2 = sdk.indexOf("@2") > -1;
+        var tag = isV2 ? "squatch-embed" : "impact-embed";
+        var el = document.createElement(tag);
+        el.setAttribute("widget", __widget);
+        document.addEventListener("DOMContentLoaded", function () {
+          document.body.appendChild(el);
+          // connectedCallback clears shadow root innerHTML (removing :host style)
+          // then asynchronously appends the skeleton. Watch for the skeleton and
+          // re-inject the :host style so it fills full width.
+          var injectStyle = setInterval(function () {
+            var sr = el.shadowRoot;
+            if (!sr) return;
+            // Wait until the skeleton is actually in the shadow root
+            var skel = sr.getElementById("loading-skeleton");
+            if (!skel) return;
+            if (!sr.querySelector("#perf-host-fix")) {
+              var s = document.createElement("style");
+              s.id = "perf-host-fix";
+              s.textContent = ":host { display: block; width: 100%; }";
+              sr.prepend(s);
+            }
+            clearInterval(injectStyle);
+          }, 5);
+          setTimeout(function () { clearInterval(injectStyle); }, 5000);
+        });
+      })();
+    </script>
+    <script>
+      // ── DOM observers for widget lifecycle metrics ───────────────────
+      (function () {
+        var stableTimer = null;
+        var STABLE_DELAY = 500;
+        function resetStableTimer() {
+          if (stableTimer) clearTimeout(stableTimer);
+          stableTimer = setTimeout(function () {
+            window.__perfMark("stable");
+            window.__perfReport();
+          }, STABLE_DELAY);
+        }
+        // Fallback: report after 15s even if nothing happens
+        setTimeout(function () {
+          if (!window.__perfMarks["stable"]) {
+            window.__perfMark("stable");
+          }
+          window.__perfReport();
+        }, 15000);
+        var frameDetected = false;
+        function observeWidgetIframe(iframe) {
+          // Track whether the iframe has been resized at least once
+          var hasResized = false;
+          // Watch height/style attribute changes for stable timer
+          var resizeObs = new MutationObserver(function (mutations) {
+            for (var i = 0; i < mutations.length; i++) {
+              var attr = mutations[i].attributeName;
+              if (attr === "height" || attr === "style") {
+                hasResized = true;
+                resetStableTimer();
+              }
+            }
+          });
+          resizeObs.observe(iframe, { attributes: true, attributeFilter: ["height", "style"] });
+          // Don't start stable timer here — wait for first actual mutation
+          // Helper: check if any real CSS rules have been applied in the iframe document
+          function hasStylesApplied(doc) {
+            try {
+              var sheets = doc.styleSheets;
+              if (!sheets || sheets.length === 0) return false;
+              for (var i = 0; i < sheets.length; i++) {
+                try {
+                  if (sheets[i].cssRules && sheets[i].cssRules.length > 0) return true;
+                } catch (e) { return true; }
+              }
+              return false;
+            } catch (e) { return false; }
+          }
+          // Detect "time unstyled" (FOUC): time between first visible content and styles applied.
+          // V2 doesn't use visibility:hidden, so content shows before CSS loads = FOUC.
+          // @next uses html{visibility:hidden} for mint-components, hiding until styled = no FOUC.
+          (function detectFOUC() {
+            // Helper: check if content is hidden (skeleton/visibility:hidden)
+            function isContentHidden(doc) {
+              try {
+                var vis = doc.documentElement ? getComputedStyle(doc.documentElement).visibility : "visible";
+                return vis === "hidden";
+              } catch (e) { return false; }
+            }
+            // Helper: check if a skeleton overlay is present
+            function hasSkeleton(doc) {
+              try { return !!doc.getElementById("sq-preload"); } catch (e) { return false; }
+            }
+            // Immediately mark unstyled-start as frame-created time
+            // (content is visible from the moment frame is created for V2)
+            // We'll adjust this if we discover content was actually hidden.
+            var started = false;
+            var adjustedStart = false;
+            var pollCount = 0;
+            function poll() {
+              if (window.__perfMarks["unstyled-end"]) return;
+              try {
+                var doc = iframe.contentDocument || (iframe.contentWindow && iframe.contentWindow.document);
+                if (!doc || !doc.body || doc.body.children.length === 0) { retryPoll(); return; }
+                var hidden = isContentHidden(doc);
+                var skeleton = hasSkeleton(doc);
+                var styled = hasStylesApplied(doc);
+                if (!started) {
+                  if (hidden || skeleton) {
+                    // Content is hidden or has skeleton — this is @next behavior
+                    // No visible FOUC is happening; wait for styles
+                    if (styled) {
+                      // Styles loaded while hidden — no FOUC at all
+                      window.__perfMark("unstyled-start");
+                      window.__perfMark("unstyled-end");
+                      return;
+                    }
+                    retryPoll();
+                    return;
+                  }
+                  // Content is visible and not behind a skeleton
+                  if (styled) {
+                    // Styles already applied — no FOUC
+                    window.__perfMark("unstyled-start");
+                    window.__perfMark("unstyled-end");
+                    return;
+                  }
+                  // FOUC: visible + no styles + no skeleton
+                  // Backdate unstyled-start to frame-created time (that's when
+                  // content first became visible)
+                  started = true;
+                  if (window.__perfMarks["frame-created"]) {
+                    window.__perfMarks["unstyled-start"] = window.__perfMarks["frame-created"];
+                  } else {
+                    window.__perfMark("unstyled-start");
+                  }
+                  retryPoll();
+                } else {
+                  // Waiting for styles to end the FOUC period
+                  if (styled) {
+                    window.__perfMark("unstyled-end");
+                    return;
+                  }
+                  retryPoll();
+                }
+              } catch (e) {
+                retryPoll();
+              }
+            }
+            function retryPoll() {
+              pollCount++;
+              if (pollCount < 400) setTimeout(poll, 25);
+            }
+            setTimeout(poll, 10);
+          })();
+          // Watch for skeleton removal or visibility change (meaningful paint)
+          var skeletonRetries = 0;
+          function watchSkeleton() {
+            if (window.__perfMarks["meaningful-paint"]) return;
+            try {
+              var doc = iframe.contentDocument || (iframe.contentWindow && iframe.contentWindow.document);
+              if (!doc) { retrySkeleton(); return; }
+              var skel = doc.getElementById("sq-preload");
+              if (!skel) {
+                var html = doc.documentElement;
+                if (html && doc.body && doc.body.children.length > 0) {
+                  var vis = getComputedStyle(html).visibility;
+                  // Wait until styled and either the iframe has been resized
+                  // (V2 starts at default small height) OR the iframe already
+                  // has a reasonable height (>300px — @next sets a near-final
+                  // default height so waiting for resize is unnecessary).
+                  var ready = doc.readyState === "complete";
+                  var tallEnough = iframe.offsetHeight > 300 || parseInt(iframe.style.height, 10) > 300;
+                  if (vis === "visible" && ready && hasStylesApplied(doc) && (hasResized || tallEnough)) {
+                    window.__perfMark("meaningful-paint");
+                    return;
+                  }
+                }
+                retrySkeleton();
+                return;
+              }
+              // Skeleton found — poll for its removal
+              var pollId = setInterval(function () {
+                if (!doc.getElementById("sq-preload")) {
+                  window.__perfMark("meaningful-paint");
+                  clearInterval(pollId);
+                }
+              }, 100);
+              setTimeout(function () { clearInterval(pollId); }, 10000);
+            } catch (e) {
+              retrySkeleton();
+            }
+          }
+          function retrySkeleton() {
+            skeletonRetries++;
+            if (skeletonRetries < 50) setTimeout(watchSkeleton, 200);
+          }
+          setTimeout(watchSkeleton, 100);
+        }
+        // Poll shadow roots of declarative widgets for iframe creation
+        var checkShadow = setInterval(function () {
+          if (frameDetected) { clearInterval(checkShadow); return; }
+          var embeds = document.querySelectorAll("impact-embed, squatch-embed");
+          for (var k = 0; k < embeds.length; k++) {
+            var sr = embeds[k].shadowRoot;
+            if (sr) {
+              // Detect outer skeleton (#loading-skeleton in shadow root)
+              // This is inserted by connectedCallback BEFORE the iframe exists
+              if (!window.__perfMarks["skeleton-start"] && sr.getElementById("loading-skeleton")) {
+                window.__perfMark("skeleton-start");
+              }
+              var iframe = sr.querySelector("iframe");
+              if (iframe) {
+                frameDetected = true;
+                clearInterval(checkShadow);
+                window.__perfMark("frame-created");
+                observeWidgetIframe(iframe);
+                return;
+              }
+            }
+          }
+        }, 50);
+        setTimeout(function () { clearInterval(checkShadow); }, 15000);
+        // Also watch body for directly-appended iframes (non-declarative path)
+        document.addEventListener("DOMContentLoaded", function () {
+          var bodyObs = new MutationObserver(function (mutations) {
+            if (frameDetected) return;
+            for (var i = 0; i < mutations.length; i++) {
+              var added = mutations[i].addedNodes;
+              for (var j = 0; j < added.length; j++) {
+                var node = added[j];
+                if (node.nodeName === "IFRAME" || (node.querySelector && node.querySelector("iframe"))) {
+                  frameDetected = true;
+                  window.__perfMark("frame-created");
+                  var iframe = node.nodeName === "IFRAME" ? node : node.querySelector("iframe");
+                  if (iframe) observeWidgetIframe(iframe);
+                  return;
+                }
+              }
+            }
+          });
+          bodyObs.observe(document.body, { childList: true, subtree: true });
+        });
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="status"></div>
+  </body>
+</html>

package/demo/perf-server.ts ADDED Viewed

@@ -0,0 +1,131 @@
+/**
+ * Dev server for perf comparison UI.
+ * Serves static files from demo/ and proxies /api/* to staging (bypasses CORS).
+ *
+ * Usage:
+ *   npx tsx demo/perf-server.ts
+ *   npx tsx demo/perf-server.ts --port 5000
+ */
+import { createServer, type IncomingMessage, type ServerResponse } from "http";
+import { request as httpsRequest } from "https";
+import { readFileSync, existsSync, statSync } from "fs";
+import { join, extname, dirname } from "path";
+const __scriptDir =
+  typeof __dirname !== "undefined"
+    ? __dirname
+    : dirname(new URL(import.meta.url).pathname);
+const STAGING_HOST = "staging.referralsaasquatch.com";
+const MIME: Record<string, string> = {
+  ".html": "text/html",
+  ".js": "application/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+};
+function parsePort(): number {
+  const i = process.argv.indexOf("--port");
+  if (i !== -1 && process.argv[i + 1]) {
+    const p = parseInt(process.argv[i + 1], 10);
+    if (!isNaN(p) && p > 0) return p;
+  }
+  return 4001;
+}
+function proxy(req: IncomingMessage, res: ServerResponse, path: string) {
+  const chunks: Buffer[] = [];
+  req.on("data", (c) => chunks.push(c));
+  req.on("end", () => {
+    const body = Buffer.concat(chunks);
+    const headers: Record<string, string> = {};
+    for (const [k, v] of Object.entries(req.headers)) {
+      if (["host", "origin", "referer", "connection"].includes(k)) continue;
+      if (typeof v === "string") headers[k] = v;
+    }
+    headers["host"] = STAGING_HOST;
+    const proxyReq = httpsRequest(
+      { hostname: STAGING_HOST, port: 443, path, method: req.method, headers },
+      (proxyRes) => {
+        const rh: Record<string, string | string[]> = {};
+        for (const [k, v] of Object.entries(proxyRes.headers)) {
+          if (v) rh[k] = v;
+        }
+        rh["access-control-allow-origin"] = "*";
+        rh["access-control-allow-methods"] = "GET, POST, PUT, DELETE, OPTIONS";
+        rh["access-control-allow-headers"] =
+          "Content-Type, Authorization, X-SaaSquatch-Referrer";
+        res.writeHead(proxyRes.statusCode || 502, rh);
+        proxyRes.pipe(res);
+      },
+    );
+    proxyReq.on("error", (err) => {
+      res.writeHead(502, { "Content-Type": "text/plain" });
+      res.end("Proxy error: " + err.message);
+    });
+    if (body.length > 0) proxyReq.write(body);
+    proxyReq.end();
+  });
+}
+function serveStatic(res: ServerResponse, urlPath: string) {
+  let fp = join(__scriptDir, urlPath);
+  // Clean URLs: try .html extension
+  if (!existsSync(fp) || statSync(fp).isDirectory()) {
+    const withHtml = fp + ".html";
+    if (existsSync(withHtml)) fp = withHtml;
+  }
+  if (!existsSync(fp) || statSync(fp).isDirectory()) {
+    res.writeHead(404);
+    res.end("Not found");
+    return;
+  }
+  const ext = extname(fp);
+  res.writeHead(200, {
+    "Content-Type": MIME[ext] || "application/octet-stream",
+  });
+  res.end(readFileSync(fp));
+}
+const port = parsePort();
+createServer((req, res) => {
+  const url = new URL(req.url || "/", `http://localhost:${port}`);
+  const path = url.pathname + url.search;
+  // CORS preflight
+  if (
+    req.method === "OPTIONS" &&
+    (url.pathname.startsWith("/api/") || url.pathname.startsWith("/a/"))
+  ) {
+    res.writeHead(204, {
+      "access-control-allow-origin": "*",
+      "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS",
+      "access-control-allow-headers":
+        "Content-Type, Authorization, X-SaaSquatch-Referrer",
+      "access-control-max-age": "86400",
+    });
+    res.end();
+    return;
+  }
+  // Proxy API and cookie requests
+  if (url.pathname.startsWith("/api/") || url.pathname.startsWith("/a/")) {
+    proxy(req, res, path);
+    return;
+  }
+  serveStatic(
+    res,
+    url.pathname === "/" ? "/perf-compare.html" : url.pathname,
+  );
+}).listen(port, () => {
+  console.log(`\n  Perf server: http://localhost:${port}/perf-compare`);
+  console.log(
+    `  API proxy:   /api/* → https://${STAGING_HOST}/api/*\n`,
+  );
+});

package/dist/ErrorTemplate-DUNm11h9.js ADDED Viewed

@@ -0,0 +1,124 @@
+function c(s = {}) {
+  const {
+    rsCode: r,
+    apiErrorCode: i,
+    statusCode: a,
+    message: d,
+    mode: l = "modal",
+    style: n = ""
+  } = s, o = document.createElement("span"), t = (g) => (o.textContent = g, o.innerHTML), e = [];
+  a !== void 0 && e.push(`<dt>Status Code</dt><dd>${t(String(a))}</dd>`), i && e.push(`<dt>API Error Code</dt><dd>${t(i)}</dd>`), r && e.push(`<dt>RS Code</dt><dd>${t(r)}</dd>`), d && e.push(`<dt>Message</dt><dd>${t(d)}</dd>`);
+  const p = e.length > 0 ? `<dl class="error-details">${e.join(`
+            `)}</dl>` : "";
+  return `<!DOCTYPE html>
+    <!--[if IE 7]><html class="ie7 oldie" lang="en"><![endif]-->
+    <!--[if IE 8]><html class="ie8 oldie" lang="en"><![endif]-->
+    <!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
+    <head>
+      <style>
+        ${n}
+        body {
+          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+          line-height: 20px;
+        }
+        h3 {
+          text-align: center;
+        }
+        .errortitle {
+          margin: 0;
+          font-size: 14px;
+        }
+        .errorbody p {
+          text-align: center;
+          font-size: 12px;
+          margin: 0 0 10px;
+        }
+        h4 {
+          font-size: 17.5px;
+          text-align: center;
+          margin: 10px 0;
+        }
+        .embed {
+          width: 100%;
+          max-width: 500px;
+          margin-left: auto;
+          margin-right: auto;
+        }
+        .errorbody {
+          padding: 15px;
+          position: relative;
+          height: auto;
+        }
+        p {
+          text-align: center;
+          font-size: 12px;
+        }
+        .sadface {
+          padding: 10px;
+        }
+        .sadface img {
+          display: block;
+          margin: auto;
+          height: 100px;
+        }
+        .modal-disable-overlay {
+          display: none;
+          position: absolute;
+          top: 50px;
+          width: 100%;
+          height: 85%;
+          background: rgba(255, 255, 255, 0.4);
+        }
+        .right-align {
+          text-align: right;
+        }
+        .errtxt {
+          color: #CCC9C9;
+        }
+        .error-details {
+          margin-top: 16px;
+          padding: 12px;
+          background: #f8f8f8;
+          border-radius: 4px;
+          text-align: left;
+          font-size: 13px;
+          color: #666;
+          display: block;
+          overflow: visible;
+        }
+        .error-details dt {
+          display: block;
+          font-weight: 600;
+          color: #333;
+          margin-top: 8px;
+        }
+        .error-details dt:first-child {
+          margin-top: 0;
+        }
+        .error-details dd {
+          display: block;
+          margin: 4px 0 0 0;
+          word-break: break-word;
+        }
+      </style>
+    </head>
+    <body>
+      <div class="squatch-container ${l}" style="width:100%;background:#FFF;">
+        <div class="errorbody">
+          <div class="sadface"><img src="https://fast.ssqt.io/assets/images/whoops-error-image.png"></div>
+          <h4>Our referral program is temporarily unavailable.</h4>
+          <p>Please reload the page or check back later.</p>
+          <p>If the problem persists please contact our support team.</p>
+          ${p}
+        </div>
+      </div>
+    </body>
+    </html>`;
+}
+export {
+  c as getErrorTemplate
+};
+//# sourceMappingURL=ErrorTemplate-DUNm11h9.js.map