@saasquatch/squatch-js 2.8.2-34 → 2.8.2-36

package/dist/squatch.cjs.js

@@ -1166,6 +1166,8 @@ class EmbedWidget extends Widget {
         <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;}
@@ -1273,11 +1275,10 @@ class PopupWidget extends Widget {
       };
     }
   }
-  _createPopupDialog() {
-    var _a2, _b, _c;
+  _createPopupDialog(brandingConfig) {
+    var _a2;
     const dialog = document.createElement("dialog");
-    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 sizes = (_a2 = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _a2.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;
@@ -1293,14 +1294,18 @@ class PopupWidget extends Widget {
     return dialog;
   }
   async load() {
-    var _a2;
-    const frame = this._createFrame();
+    var _a2, _b, _c, _d, _e;
+    console.log("TESTING!");
+    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;
+    console.log({ initialHeight, brandingConfig });
+    const frame = this._createFrame({ initialHeight });
     this._initialiseCTA();
     const element = this.container ? this._findElement() : document.body;
     const dialogParent = element.shadowRoot || element;
-    const dialog = this._createPopupDialog();
+    const dialog = this._createPopupDialog(brandingConfig);
     dialog.appendChild(frame);
-    if (((_a2 = dialogParent.lastChild) == null ? void 0 : _a2.nodeName) === "DIALOG") {
+    if (((_c = dialogParent.lastChild) == null ? void 0 : _c.nodeName) === "DIALOG") {
       dialogParent.replaceChild(dialog, dialogParent.lastChild);
     } else {
       dialogParent.appendChild(dialog);
@@ -1311,27 +1316,29 @@ class PopupWidget extends Widget {
     }
     const frameDoc = contentWindow.document;
     frameDoc.open();
-    frameDoc.write(this.content);
-    frameDoc.write(
-      `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
-    );
+    const domain = this.widgetApi.domain;
     frameDoc.write(`
-    <style>
-      body {
-        height: 600px; 
-        border: 2px solid #ccc;
-        background-color: red;
-        margin: 0; 
-        padding: 0; 
-        box-sizing: border-box; 
-      }
-    </style>
-  `);
+      ${((_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.close();
     _log$6("Popup template loaded into iframe");
-    await this._setupResizeHandler(frame);
+    await this._setupResizeHandler(frame, initialHeight);
   }
-  async _setupResizeHandler(frame) {
+  async _setupResizeHandler(frame, initialHeight) {
     const { contentWindow } = frame;
     if (!contentWindow) {
       throw new Error("Frame needs a content window");
@@ -1339,7 +1346,7 @@ class PopupWidget extends Widget {
     const frameDoc = contentWindow.document;
     domready(frameDoc, async () => {
       frameDoc.body.style.overflowY = "hidden";
-      frame.height = `${frameDoc.body.offsetHeight}px`;
+      frame.height = initialHeight || frameDoc.body.offsetHeight;
       const ro = new contentWindow["ResizeObserver"]((entries) => {
         for (const entry of entries) {
           const { top, bottom } = entry.contentRect;
@@ -1505,11 +1512,7 @@ class Widgets {
           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
       };