@saasquatch/squatch-js 2.8.2-1 → 2.8.2-11

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.8.1] - 2025-11-17
+
+### Fixed
+
+- Prevent overriding of API domain with auto popups
+
 ## [2.8.0] - 2025-10-22
 
 ### Added
@@ -387,7 +393,8 @@ No release notes.
 
 No release notes.
 
-[unreleased]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.8.0...HEAD
+[unreleased]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.8.1...HEAD
+[2.8.1]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.7.0...@saasquatch%2Fsquatch-js@2.8.1
 [2.8.0]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.7.0...@saasquatch%2Fsquatch-js@2.8.0
 [2.7.0]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.6.3...@saasquatch%2Fsquatch-js@2.7.0
 [2.6.3]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.6.2...@saasquatch%2Fsquatch-js@2.6.3

package/README.md

@@ -197,19 +197,11 @@ squatch.api().upsertUser({...});
 ### `squatch-popup`
 
 ```html
-<squatch-embed
-  widget="WIDGET_TYPE"
-  [
-  open
-  |
-  container="#selector"
-  |
-  locale="en_US"
-  ]
->
+<squatch-popup
+  widget="WIDGET_TYPE" [ open | container="#selector" | locale="en_US" ]>
   <!-- Clicking a child of squatch-popup opens the popup -->
   <button>Click me to open</button>
-</squatch-embed>
+</squatch-popup>
 ```
 
 - `widget: string`: Specifies the SaaSquatch `widgetType` identifier of the desired widget

package/dist/squatch.cjs.js

@@ -702,6 +702,7 @@ class WidgetApi {
     const raw = params;
     const clean = validatePasswordlessConfig(raw);
     const { widgetType, engagementMedium = "POPUP", jwt, user } = clean;
+    console.log({ params });
     const tenantAlias = encodeURIComponent(this.tenantAlias);
     const accountId = (user == null ? void 0 : user.accountId) ? encodeURIComponent(user.accountId) : null;
     const userId = (user == null ? void 0 : user.id) ? encodeURIComponent(user.id) : null;
@@ -1107,19 +1108,369 @@ function delay(duration) {
     setTimeout(resolve, duration);
   });
 }
+const getSkeleton = ({
+  height = "500px",
+  skeletonBackgroundColor = "#e0e0e0",
+  skeletonShimmerColor = "#f5f5f5",
+  borderColor = "#ccc"
+}) => {
+  return `
+    <style>
+        * {
+          box-sizing: border-box;
+          padding: 0;
+          margin: 0;
+        }
+
+			.widget-container {
+				background: white;
+				width: 100%;
+				max-width: 900px;
+				padding: 40px;
+				border-radius: 12px;
+				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+				box-sizing: border-box;
+			}
+
+			@keyframes shimmer {
+				0% {
+					background-position: -100% 0;
+				}
+				100% {
+					background-position: 100% 0;
+				}
+			}
+
+			.skeleton {
+				background: ${skeletonBackgroundColor};
+				background: linear-gradient(
+					90deg,
+					${skeletonBackgroundColor} 25%,
+					${skeletonShimmerColor} 50%,
+					${skeletonBackgroundColor} 75%
+				);
+				background-size: 200% 100%;
+				animation: shimmer 1.5s infinite linear;
+				border-radius: 6px;
+				margin-bottom: 12px;
+			}
+
+			.sk-title-lg {
+				height: 36px;
+				width: 50%;
+				margin-bottom: 16px;
+			}
+			.sk-title-md {
+				height: 28px;
+				width: 30%;
+				margin-bottom: 20px;
+				margin-top: 40px;
+			}
+			.sk-text {
+				height: 16px;
+				width: 80%;
+				margin-bottom: 8px;
+			}
+			.sk-text-short {
+				width: 40%;
+			}
+			.sk-label {
+				height: 14px;
+				width: 25%;
+				margin-bottom: 10px;
+			}
+
+			.hero-section {
+				display: flex;
+				gap: 40px;
+				margin-bottom: 40px;
+				border-bottom: 1px solid ${borderColor};
+				padding-bottom: 40px;
+				flex-direction: row;
+			}
+			.hero-content {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+			.hero-image {
+				flex: 1;
+				height: 300px;
+				border-radius: 12px;
+			}
+
+			.share-section {
+				margin-bottom: 40px;
+			}
+			.sk-input {
+				height: 50px;
+				width: 100%;
+				border-radius: 8px;
+				margin-bottom: 16px;
+			}
+			.social-buttons {
+				display: flex;
+				gap: 12px;
+			}
+			.sk-btn-social {
+				flex: 1;
+				height: 50px;
+				border-radius: 8px;
+			}
+
+			.stats-section {
+				display: flex;
+				gap: 24px;
+				margin-bottom: 40px;
+				padding: 30px 0;
+				border-top: 1px solid ${borderColor};
+				border-bottom: 1px solid ${borderColor};
+			}
+			.stat-card {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+			}
+			.stat-divider {
+				padding-left: 24px;
+			}
+
+			.sk-stat-num {
+				height: 48px;
+				width: 120px;
+				margin-bottom: 8px;
+			}
+			.sk-stat-label {
+				height: 18px;
+				width: 80px;
+			}
+
+			.table-header {
+				display: flex;
+				gap: 16px;
+				margin-bottom: 16px;
+			}
+			.sk-th {
+				height: 16px;
+			}
+			.table-row {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				padding: 16px 0;
+				border-bottom: 1px solid ${borderColor};
+			}
+
+			.col-user {
+				flex: 2;
+			}
+			.col-status {
+				flex: 1;
+			}
+			.col-reward {
+				flex: 2;
+			}
+			.col-date {
+				flex: 1;
+			}
+
+			.sk-badge {
+				height: 28px;
+				width: 90px;
+				border-radius: 14px;
+			}
+			.sk-reward-block {
+				height: 36px;
+				width: 100%;
+				border-radius: 6px;
+			}
+
+			.pagination {
+				display: flex;
+				justify-content: flex-end;
+				gap: 8px;
+				margin-top: 24px;
+			}
+			.sk-btn-page {
+				height: 36px;
+				width: 64px;
+				border-radius: 6px;
+				margin-bottom: 0;
+			}
+
+			@media (max-width: 768px) {
+				body {
+					padding: 20px;
+				}
+				.widget-container {
+					padding: 24px;
+				}
+
+				.hero-section {
+					flex-direction: column-reverse;
+					gap: 24px;
+				}
+				.hero-image {
+					height: 220px;
+					width: 100%;
+				}
+				.sk-title-lg {
+					width: 80%;
+				}
+
+				.col-date {
+					display: none;
+				}
+			}
+
+			@media (max-width: 480px) {
+				body {
+					padding: 10px;
+				}
+				.widget-container {
+					padding: 16px;
+				}
+
+				.sk-stat-num {
+					width: 80px;
+					height: 40px;
+				}
+
+				.col-reward {
+					display: none;
+				}
+
+				.col-user {
+					flex: 3;
+				}
+				.col-status {
+					flex: 2;
+					display: flex;
+					justify-content: flex-end;
+				}
+			}
+    </style>
+
+    <div class="widget-container">
+			<div class="hero-section">
+				<div class="hero-content">
+					<div class="skeleton sk-title-lg"></div>
+					<div class="skeleton sk-text"></div>
+					<div class="skeleton sk-text sk-text-short"></div>
+				</div>
+				<div class="skeleton hero-image"></div>
+			</div>
+
+			<div class="share-section">
+				<div class="skeleton sk-label"></div>
+				<div class="skeleton sk-input"></div>
+				<div class="social-buttons">
+					<div class="skeleton sk-btn-social"></div>
+					<div class="skeleton sk-btn-social"></div>
+					<div class="skeleton sk-btn-social"></div>
+					<div class="skeleton sk-btn-social"></div>
+				</div>
+			</div>
+
+			<div
+				class="skeleton sk-title-md"
+				style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"
+			></div>
+			<div
+				class="skeleton sk-text"
+				style="width: 60%; margin-left: auto; margin-right: auto"
+			></div>
+
+			<div class="stats-section">
+				<div class="stat-card">
+					<div class="skeleton sk-stat-num"></div>
+					<div class="skeleton sk-stat-label"></div>
+				</div>
+				<div class="stat-card stat-divider">
+					<div class="skeleton sk-stat-num"></div>
+					<div class="skeleton sk-stat-label"></div>
+				</div>
+			</div>
+
+			<div class="skeleton sk-title-md"></div>
+
+			<div class="table-header">
+				<div class="skeleton sk-th col-user"></div>
+				<div class="skeleton sk-th col-status"></div>
+				<div class="skeleton sk-th col-reward"></div>
+				<div class="skeleton sk-th col-date"></div>
+			</div>
+
+			<div class="table-row">
+				<div class="col-user">
+					<div class="skeleton sk-text" style="width: 70%; margin: 0"></div>
+				</div>
+				<div class="col-status">
+					<div class="skeleton sk-badge" style="margin: 0"></div>
+				</div>
+				<div class="col-reward">
+					<div class="skeleton sk-reward-block" style="margin: 0"></div>
+				</div>
+				<div class="col-date">
+					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
+				</div>
+			</div>
+			<div class="table-row">
+				<div class="col-user">
+					<div class="skeleton sk-text" style="width: 60%; margin: 0"></div>
+				</div>
+				<div class="col-status">
+					<div class="skeleton sk-badge" style="margin: 0"></div>
+				</div>
+				<div class="col-reward">
+					<div class="skeleton sk-reward-block" style="margin: 0"></div>
+				</div>
+				<div class="col-date">
+					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
+				</div>
+			</div>
+			<div class="table-row">
+				<div class="col-user">
+					<div class="skeleton sk-text" style="width: 75%; margin: 0"></div>
+				</div>
+				<div class="col-status">
+					<div class="skeleton sk-badge" style="margin: 0"></div>
+				</div>
+				<div class="col-reward">
+					<div class="skeleton sk-reward-block" style="margin: 0"></div>
+				</div>
+				<div class="col-date">
+					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
+				</div>
+			</div>
+
+			<div class="pagination">
+				<div class="skeleton sk-btn-page"></div>
+				<div class="skeleton sk-btn-page"></div>
+			</div>
+		</div>
+  `;
+};
 const _log$7 = browserExports.debug("squatch-js:EMBEDwidget");
 class EmbedWidget extends Widget {
   constructor(params, container) {
     super(params);
     __publicField(this, "show", this.open);
     __publicField(this, "hide", this.close);
-    if (container) this.container = container;
+    if (container) {
+      this.container = container;
+    }
   }
   async load() {
-    var _a2, _b, _c, _d, _e, _f, _g, _h;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
-    const initialHeight = (_e = (_d = (_c = this.context.widgetConfig) == null ? void 0 : _c.values) == null ? void 0 : _d.brandingConfig) == null ? void 0 : _e.loadingHeight;
-    const sizes = (_f = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _f.embeddedWidgets;
+    const initialHeight = brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
+    const skeletonBackgroundColor = (_d = (_c = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
+    const skeletonShimmerColor = (_f = (_e = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
+    const borderColor = (_g = brandingConfig == null ? void 0 : brandingConfig.border) == null ? void 0 : _g.borderColor;
+    const sizes = (_h = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _h.embeddedWidgets;
     const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
     const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
     console.log({
@@ -1127,31 +1478,46 @@ class EmbedWidget extends Widget {
       initialHeight,
       widgetConfig: this.context.widgetConfig
     });
+    const skeletonHTML = getSkeleton({
+      height: initialHeight,
+      skeletonBackgroundColor,
+      skeletonShimmerColor,
+      borderColor
+    });
+    const skeletonContainer = document.createElement("div");
+    skeletonContainer.innerHTML = skeletonHTML;
     const frame = this._createFrame({
       minWidth,
       maxWidth,
       initialHeight
     });
     const element = this._findElement();
-    if ((_g = this.context) == null ? void 0 : _g.container) {
+    element.innerHTML = skeletonHTML;
+    frame.style.display = "none";
+    const injectContents = (target) => {
+      target.appendChild(skeletonContainer);
+      target.appendChild(frame);
+    };
+    if ((_i = this.context) == null ? void 0 : _i.container) {
       element.style.visibility = "hidden";
       element.style.height = "0";
       element.style["overflow-y"] = "hidden";
     }
     if (this.container) {
       if (element.shadowRoot) {
-        if (((_h = element.shadowRoot.lastChild) == null ? void 0 : _h.nodeName) === "IFRAME") {
+        if (((_j = element.shadowRoot.lastChild) == null ? void 0 : _j.nodeName) === "IFRAME") {
           element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
         } else {
-          element.shadowRoot.appendChild(frame);
+          injectContents(element.shadowRoot);
         }
       } else if (element.firstChild) {
-        element.replaceChild(frame, element.firstChild);
+        element.innerHTML = "";
+        injectContents(element);
       } else {
-        element.appendChild(frame);
+        injectContents(element);
       }
     } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
-      element.appendChild(frame);
+      injectContents(element);
     }
     const { contentWindow } = frame;
     if (!contentWindow) {
@@ -1159,16 +1525,29 @@ class EmbedWidget extends Widget {
     }
     const frameDoc = contentWindow.document;
     frameDoc.open();
-    console.log({ content: this.content });
+    console.log({ content: this.content, context: this.context, this: this });
+    const domain = this.widgetApi.domain;
     frameDoc.write(`
+      ${((_k = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _k.brandFont) && `
+        <link rel="preconnect" href="https://fast${domain === "https://staging.referralsaasquatch.com" && "-staging"}.ssqt.io">
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(
+      (_l = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _l.brandFont
+    )}" as="style">`}
       <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
-      ${this.content}
-            <style data-styles>
-      html:not(.hydrated) { visibility:hidden; }
+      <style data-styles>
+        html { visibility:hidden;}
       </style>
+      ${this.content}
+
       `);
     frameDoc.close();
     domready(frameDoc, async () => {
+      if (skeletonContainer && skeletonContainer.parentNode) {
+        skeletonContainer.parentNode.removeChild(skeletonContainer);
+      }
+      frame.style.display = "block";
       const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
       frame.height = initialHeight || frameDoc.body.scrollHeight;
       console.log({ height: frameDoc.body.scrollHeight });
@@ -1807,7 +2186,8 @@ function _pushCookie() {
   }
 }
 const _log$3 = browserExports.debug("squatch-js");
-function _getAutoConfig(configIn) {
+function _getAutoConfig() {
+  var _a2;
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
   const refParam = urlParams.get("_saasquatchExtra") || "";
@@ -1815,6 +2195,13 @@ function _getAutoConfig(configIn) {
     _log$3("No _saasquatchExtra param");
     return;
   }
+  const config = validateConfig({
+    tenantAlias: "UNKNOWN"
+  });
+  if (!config.domain) {
+    _log$3("domain must be provided in config to use _saasquatchExtra");
+    return;
+  }
   let raw;
   try {
     raw = JSON.parse(b64decode(refParam));
@@ -1822,8 +2209,13 @@ function _getAutoConfig(configIn) {
     _log$3("Unable to decode _saasquatchExtra config");
     return;
   }
-  const { domain, tenantAlias, widgetConfig } = convertExtraToConfig(raw);
-  if (!domain || !tenantAlias || !widgetConfig) {
+  function normalizeDomain(domain) {
+    return domain.replace(/^https?:\/\//, "");
+  }
+  const normalizedDomain = normalizeDomain(config.domain);
+  const tenantAlias = Object.keys((raw == null ? void 0 : raw[normalizedDomain]) || {})[0];
+  const widgetConfig = (_a2 = raw == null ? void 0 : raw[normalizedDomain]) == null ? void 0 : _a2[tenantAlias];
+  if (!widgetConfig) {
     _log$3("_saasquatchExtra did not have an expected structure");
     return void 0;
   }
@@ -1835,20 +2227,11 @@ function _getAutoConfig(configIn) {
       ...rest
     },
     squatchConfig: {
-      ...configIn ? { configIn } : {},
-      domain,
+      ...config,
       tenantAlias
     }
   };
 }
-function convertExtraToConfig(obj) {
-  var _a2;
-  const _domain = Object.keys(obj || {})[0];
-  const tenantAlias = Object.keys((obj == null ? void 0 : obj[_domain]) || {})[0];
-  const widgetConfig = (_a2 = obj == null ? void 0 : obj[_domain]) == null ? void 0 : _a2[tenantAlias];
-  const domain = _domain ? `https://${_domain}` : void 0;
-  return { domain, tenantAlias, widgetConfig };
-}
 const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
 function decodeUserJwt(tokenStr) {
   var _a2;
@@ -2082,12 +2465,30 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
     }
   }
   async connectedCallback() {
-    var _a2, _b;
+    var _a2;
     this.loaded = true;
     this.container = this.getAttribute("container");
+    const skeletonHTML = `
+    <div>
+      <h1>Dynamic Content</h1>
+      <p>This content was dynamically added to the widget before it loaded.</p>
+      <p>This content comes from the embeded widget class</p>
+    </div>
+  `;
+    const skeletonContainer = document.createElement("div");
+    skeletonContainer.id = "loading-skeleton";
+    skeletonContainer.innerHTML = skeletonHTML;
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = skeletonHTML;
+    }
     await this.renderWidget();
-    const slot = (_a2 = this.shadowRoot && Array.from(this.shadowRoot.children)) == null ? void 0 : _a2.find((c) => c.tagName === "SLOT");
-    if (slot) (_b = this.shadowRoot) == null ? void 0 : _b.removeChild(slot);
+    const loadingElement = (_a2 = this.shadowRoot) == null ? void 0 : _a2.getElementById("loading-skeleton");
+    if (loadingElement) {
+      loadingElement.remove();
+    }
     if (this.getAttribute("open") !== null) this.open();
   }
 }
@@ -2116,8 +2517,52 @@ class DeclarativePopupWidget extends DeclarativeWidget {
   async connectedCallback() {
     this.loaded = true;
     this.container = this.getAttribute("container");
-    await this.renderWidget();
+    const skeletonHTML = `
+      <div id="loading-skeleton-content">
+        <h1>Dynamic Content</h1>
+        <p>This content was dynamically added to the widget before it loaded.</p>
+        <p>This content comes from the embedded widget class</p>
+      </div>
+    `;
+    console.log(
+      "/////////////////////////////////TESTING//////////////////////////////"
+    );
+    const skeletonContainer = document.createElement("div");
+    skeletonContainer.id = "loading-skeleton";
+    skeletonContainer.innerHTML = skeletonHTML;
+    skeletonContainer.style.width = "100%";
+    const root = this.shadowRoot || this.attachShadow({ mode: "open" });
+    if (root.firstChild) {
+      root.insertBefore(skeletonContainer, root.firstChild);
+    } else {
+      root.appendChild(skeletonContainer);
+    }
+    const removeSkeleton = () => {
+      const el = root.getElementById("loading-skeleton");
+      if (el) {
+        el.remove();
+        console.log("Skeleton removed successfully via event");
+      }
+    };
+    this.addEventListener("sq:load", removeSkeleton);
+    try {
+      await this.renderWidget();
+      console.log("Widget rendered (initialization complete)");
+      setTimeout(() => {
+        const el = root.getElementById("loading-skeleton");
+        if (el) {
+          console.warn("Removing skeleton via timeout (load event missing)");
+          el.remove();
+        }
+      }, 5e3);
+    } catch (err) {
+      console.error("Critical Error in renderWidget:", err);
+      removeSkeleton();
+    }
     if (this.getAttribute("open") !== null) this.open();
+    console.log(
+      "/////////////////////////////////DO YOU SEE THIS CONSOLE LOG????//////////////////////////////"
+    );
   }
 }
 class SquatchEmbed extends DeclarativeEmbedWidget {
@@ -2161,9 +2606,9 @@ function widget(widgetConfig) {
   var _a2;
   return (_a2 = widgets()) == null ? void 0 : _a2.render(widgetConfig);
 }
-function _auto(configIn) {
+function _auto() {
   var _a2;
-  const configs = _getAutoConfig(configIn);
+  const configs = _getAutoConfig();
   if (configs) {
     const { squatchConfig, widgetConfig } = configs;
     init(squatchConfig);