@saasquatch/squatch-js 2.8.2-35 → 2.8.2-37

package/dist/squatch.js

@@ -704,7 +704,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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;
@@ -893,9 +892,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if ((options == null ? void 0 : options.maxWidth) || (options == null ? void 0 : options.minWidth)) {
         frame.style.width = "100%";
       }
-      if (options == null ? void 0 : options.initialHeight) {
-        frame.height = options.initialHeight;
-      }
       return frame;
     }
     _findFrame() {
@@ -1116,22 +1112,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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;
+      var _a2, _b, _c, _d, _e;
       const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
-      const initialHeight = brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
       const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.embeddedWidgets;
       const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
       const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
-      const frame = this._createFrame({
-        minWidth,
-        maxWidth,
-        initialHeight
-      });
+      const frame = this._createFrame({ minWidth, maxWidth });
       const element = this._findElement();
       if ((_d = this.context) == null ? void 0 : _d.container) {
         element.style.visibility = "hidden";
@@ -1159,29 +1148,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       const frameDoc = contentWindow.document;
       frameDoc.open();
-      const domain = this.widgetApi.domain;
-      frameDoc.write(`
-      ${((_f = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _f.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(
-        (_g = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _g.brandFont
-      )}" as="style">` : ""}
-      <link rel="dns-prefetch" href="https://res.cloudinary.com">
-      <link rel="preconnect" href="https://res.cloudinary.com" crossorigin>
-      <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
-      <style data-styles>
-        html { visibility:hidden;}
-      </style>
-      ${this.content}
-
-      `);
+      frameDoc.write(this.content);
+      frameDoc.write(
+        `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
+      );
       frameDoc.close();
       domready(frameDoc, async () => {
         const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
-        frame.height = initialHeight || frameDoc.body.scrollHeight;
-        console.log({ height: frameDoc.body.scrollHeight });
+        frame.height = frameDoc.body.scrollHeight;
         const ro = new contentWindow["ResizeObserver"]((entries) => {
           for (const entry of entries) {
             const { height } = entry.contentRect;
@@ -1277,10 +1251,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         };
       }
     }
-    _createPopupDialog(brandingConfig) {
-      var _a2;
+    _createPopupDialog() {
+      var _a2, _b, _c;
       const dialog = document.createElement("dialog");
-      const sizes = (_a2 = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _a2.popupWidgets;
+      const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
+      const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.popupWidgets;
       const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "auto";
       const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "500px";
       dialog.id = this.id;
@@ -1296,16 +1271,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return dialog;
     }
     async load() {
-      var _a2, _b, _c, _d, _e;
-      const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
-      const initialHeight = brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
-      const frame = this._createFrame({ initialHeight });
+      var _a2;
+      const frame = this._createFrame();
       this._initialiseCTA();
       const element = this.container ? this._findElement() : document.body;
       const dialogParent = element.shadowRoot || element;
-      const dialog = this._createPopupDialog(brandingConfig);
+      const dialog = this._createPopupDialog();
       dialog.appendChild(frame);
-      if (((_c = dialogParent.lastChild) == null ? void 0 : _c.nodeName) === "DIALOG") {
+      if (((_a2 = dialogParent.lastChild) == null ? void 0 : _a2.nodeName) === "DIALOG") {
         dialogParent.replaceChild(dialog, dialogParent.lastChild);
       } else {
         dialogParent.appendChild(dialog);
@@ -1316,29 +1289,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       const frameDoc = contentWindow.document;
       frameDoc.open();
-      const domain = this.widgetApi.domain;
-      frameDoc.write(`
-      ${((_d = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _d.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(
-        (_e = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _e.brandFont
-      )}" as="style">` : ""}
-      <link rel="dns-prefetch" href="https://res.cloudinary.com">
-      <link rel="preconnect" href="https://res.cloudinary.com" crossorigin>
-      <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
-      <style data-styles>
-        html { visibility:hidden;}
-      </style>
-      ${this.content}
-
-      `);
+      frameDoc.write(this.content);
+      frameDoc.write(
+        `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
+      );
       frameDoc.close();
       _log$6("Popup template loaded into iframe");
-      await this._setupResizeHandler(frame, initialHeight);
+      await this._setupResizeHandler(frame);
     }
-    async _setupResizeHandler(frame, initialHeight) {
+    async _setupResizeHandler(frame) {
       const { contentWindow } = frame;
       if (!contentWindow) {
         throw new Error("Frame needs a content window");
@@ -1346,7 +1305,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const frameDoc = contentWindow.document;
       domready(frameDoc, async () => {
         frameDoc.body.style.overflowY = "hidden";
-        frame.height = initialHeight || frameDoc.body.offsetHeight;
+        frame.height = `${frameDoc.body.offsetHeight}px`;
         const ro = new contentWindow["ResizeObserver"]((entries) => {
           for (const entry of entries) {
             const { top, bottom } = entry.contentRect;
@@ -1512,11 +1471,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             engagementMedium: clean.engagementMedium,
             container: clean.container,
             trigger: clean.trigger,
-            widgetConfig: {
-              values: {
-                brandingConfig: response == null ? void 0 : response.brandingConfig
-              }
-            }
+            widgetConfig: response == null ? void 0 : response.widgetConfig
           }),
           user: response.user
         };
@@ -1878,264 +1833,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
   }
-  const getSkeleton = ({
-    type = "verified-access",
-    height = "500px",
-    skeletonBackgroundColor = "#e0e0e0",
-    skeletonShimmerColor = "#f5f5f5"
-  }) => {
-    const referrerHTML = `
-    <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>
-  `;
-    const instantAccessHTML = `
-    <div class="hero-section instant-access-layout">
-        <div class="skeleton hero-image ia-image"></div>
-        
-        <div class="hero-content ia-content">
-          <div class="skeleton sk-title-lg ia-center"></div>
-          <div class="skeleton sk-text ia-center"></div>
-          
-          <div class="skeleton sk-btn-action"></div>
-
-           <div class="skeleton sk-label"></div>
-           <div class="input-group">
-             <div class="skeleton sk-input"></div>
-             <div class="skeleton sk-btn-copy"></div>
-           </div>
-
-           <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
-           <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
-        </div>
-    </div>
-  `;
-    return `
-    <style>
-        * {
-          box-sizing: border-box;
-          padding: 0;
-          margin: 0;
-        }
-
-      .widget-container {
-        background: white;
-        width: 100%;
-        padding: 40px;
-        box-sizing: border-box;
-        overflow: hidden; 
-      }
-
-      @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;
-      }
-
-      /* Typography Skeletons */
-      .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
-      .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
-      .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
-      .sk-text-short { width: 40%; }
-      .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
-
-      /* Layouts */
-      .hero-section {
-        display: flex;
-        gap: 40px;
-        margin-bottom: 40px;
-        padding-bottom: 40px;
-        flex-direction: row;
-        height: 100%;
-        /* Removed border-bottom */
-      }
-      
-      .hero-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      
-      .hero-image {
-        flex: 1;
-        height: 300px;
-        border-radius: 12px;
-      }
-
-      /* -- Specific Instant Access Overrides -- */
-      .instant-access-layout {
-         margin-bottom: 0;
-         padding-bottom: 0;
-         align-items: center; 
-      }
-      .ia-image {
-         height: 400px; 
-      }
-      .ia-center {
-         margin-left: auto;
-         margin-right: auto;
-      }
-      .ia-content {
-         align-items: center; 
-         text-align: center;
-      }
-      .sk-btn-action {
-         height: 45px;
-         width: 140px;
-         border-radius: 6px;
-         margin: 24px auto;
-      }
-      .input-group {
-         display: flex;
-         gap: 10px;
-         width: 100%;
-         max-width: 400px;
-      }
-      .sk-btn-copy {
-         height: 50px;
-         width: 120px;
-         border-radius: 8px;
-      }
-      /* ------------------------------------- */
-
-      .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;
-        /* Removed border-top and border-bottom */
-      }
-      .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 Styles */
-      .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; 
-        /* Removed border-bottom */
-      }
-      
-      .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; }
-        .instant-access-layout { flex-direction: column; }
-        
-        .hero-image { height: 220px; width: 100%; }
-        .sk-title-lg { width: 100%; }
-
-        .col-date { display: none; }
-      }
-    </style>
-
-    <div class="widget-container">
-      ${type === "verified-access" ? referrerHTML : instantAccessHTML}
-    </div>
-  `;
-  };
   const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
   function decodeUserJwt(tokenStr) {
     var _a2;
@@ -2274,12 +1971,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         domain: (config == null ? void 0 : config.domain) || ((_b = this.config) == null ? void 0 : _b.domain) || DEFAULT_DOMAIN
       });
     }
-    getWidgetType(widgetType) {
-      if (widgetType && (widgetType.includes("websiteReferralWidget") || widgetType.includes("friendWidget"))) {
-        return "instant-access";
-      }
-      return "verified-access";
-    }
     async renderPasswordlessVariant() {
       this._setupApis();
       _log$1("Rendering as an Instant Access widget");
@@ -2375,26 +2066,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
     async connectedCallback() {
+      var _a2, _b;
       this.loaded = true;
       this.container = this.getAttribute("container");
-      this.widgetType = this.getAttribute("widget") || void 0;
-      console.log("widget type", this.widgetType);
-      const skeletonWidgetType = this.getWidgetType(this.widgetType);
-      const skeletonHTML = getSkeleton({
-        height: "100%",
-        type: skeletonWidgetType
-      });
-      const skeletonContainer = document.createElement("div");
-      skeletonContainer.id = "loading-skeleton";
-      skeletonContainer.innerHTML = skeletonHTML;
-      const root = this.shadowRoot || this.attachShadow({ mode: "open" });
-      root.innerHTML = "";
-      root.appendChild(skeletonContainer);
       await this.renderWidget();
-      const loadingElement = root.getElementById("loading-skeleton");
-      if (loadingElement) {
-        loadingElement.remove();
-      }
+      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);
       if (this.getAttribute("open") !== null) this.open();
     }
   }
@@ -2423,27 +2100,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     async connectedCallback() {
       this.loaded = true;
       this.container = this.getAttribute("container");
-      this.widgetType = this.getAttribute("widget") || void 0;
-      const skeletonWidgetType = this.getWidgetType(this.widgetType);
-      const skeletonHTML = getSkeleton({
-        height: "100%",
-        type: skeletonWidgetType
-      });
-      const skeletonContainer = document.createElement("div");
-      skeletonContainer.id = "loading-skeleton";
-      skeletonContainer.innerHTML = skeletonHTML;
-      const root = this.shadowRoot || this.attachShadow({ mode: "open" });
-      const container = root.getElementById("#squatchModal");
-      console.log("Container is ", container);
-      if (container) {
-        container.innerHTML = "";
-        container.appendChild(skeletonContainer);
-      }
       await this.renderWidget();
-      const loadingElement = root.getElementById("loading-skeleton");
-      if (loadingElement) {
-        loadingElement.remove();
-      }
       if (this.getAttribute("open") !== null) this.open();
     }
   }