@saasquatch/squatch-js 2.6.0-8 → 2.6.0

package/dist/squatch.js

@@ -41,6 +41,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 var DEFAULT_DOMAIN = "https://app.referralsaasquatch.com";
 var DEFAULT_NPM_CDN = "https://fast.ssqt.io/npm";
+var DEFAULT_NAMESPACE = "squatch";
+var IMPACT_NAMESPACE = "impact";
+
 function validateConfig(_raw) {
   if (typeof _raw !== "object") throw new Error("config must be an object");
   var tenant = window.squatchTenant;
@@ -215,6 +218,7 @@ class WidgetApi {
     this.tenantAlias = void 0;
     this.domain = void 0;
     this.npmCdn = void 0;
+    this.referralCookie = this.squatchReferralCookie;
     var raw = config;
     var clean = validateConfig(raw);
     this.tenantAlias = clean.tenantAlias;
@@ -342,12 +346,11 @@ function _buildParams(_ref) {
     engagementMedium,
     locale
   } = _ref;
-  var engagementMediumP = "engagementMedium=" + encodeURIComponent(engagementMedium);
-  var widgetTypeP = widgetType && "widgetType=" + encodeURIComponent(widgetType);
-  var localeP = locale && "locale=" + encodeURIComponent(locale);
-  var params = [engagementMediumP, widgetTypeP, localeP].filter(x => !!x);
-  var queryString = "?" + params.join("&");
-  return queryString;
+  var queryParams = new URLSearchParams();
+  queryParams.append("engagementMedium", engagementMedium);
+  if (widgetType) queryParams.append("widgetType", widgetType);
+  if (locale) queryParams.append("locale", locale);
+  return "?" + queryParams.toString();
 }
 
 // @ts-check
@@ -424,6 +427,8 @@ var _log$8 = debug.debug("squatch-js:widget");
 
 class Widget {
   constructor(params) {
+    var _params$context;
+
     this.type = void 0;
     this.content = void 0;
     this.analyticsApi = void 0;
@@ -442,7 +447,7 @@ class Widget {
       domain: params.domain
     });
     this.context = params.context;
-    this.container = params.context.container;
+    this.container = ((_params$context = params.context) == null ? void 0 : _params$context.container) || params.container;
   }
 
   _findElement() {
@@ -465,12 +470,12 @@ class Widget {
       _log$8("container must be an HTMLElement or string", this.container); // find element on page
 
     } else {
-      element = document.querySelector("#squatchembed") || document.querySelector(".squatchembed");
+      element = document.querySelector("#squatchembed") || document.querySelector(".squatchembed") || document.querySelector("#impactembed") || document.querySelector(".impactembed");
 
       _log$8("loading widget with default selector", element);
     }
 
-    if (!(element instanceof HTMLElement)) throw new Error("element with selector '" + (this.container || "#squatchembed or .squatchembed") + "' not found.'");
+    if (!(element instanceof HTMLElement)) throw new Error("element with selector '" + (this.container || "#squatchembed, .squatchembed, #impactembed, or .impactembed") + "' not found.'");
     return element;
   }
 
@@ -743,10 +748,19 @@ class EmbedWidget extends Widget {
   }
 
   async load() {
+    var _this$context;
+
     var frame = this._createFrame();
 
     var element = this._findElement();
 
+    if ((_this$context = this.context) != null && _this$context.container) {
+      // Custom container is used
+      element.style.visibility = "hidden";
+      element.style.height = "0";
+      element.style["overflow-y"] = "hidden";
+    }
+
     if (this.container) {
       if (element.shadowRoot) {
         var _element$shadowRoot$l;
@@ -794,6 +808,7 @@ class EmbedWidget extends Widget {
           } = entry.contentRect; // @ts-ignore -- number will be cast to string by browsers
 
           frame.height = height;
+          console.log("RESIZE");
         }
       });
       var container = await this._findInnerContainer(frame);
@@ -812,20 +827,19 @@ class EmbedWidget extends Widget {
 
 
   open() {
-    var _frame$contentDocumen, _frame$contentWindow, _frame$contentWindow2;
-
     var frame = this._findFrame();
 
     if (!frame) return _log$7("no target element to open");
+    if (!frame.contentWindow) return _log$7("Frame needs a content window");
 
     var element = this._findElement();
 
     element.style.visibility = "unset";
     element.style.height = "auto";
     element.style["overflow-y"] = "auto";
-    frame == null ? void 0 : (_frame$contentDocumen = frame.contentDocument) == null ? void 0 : _frame$contentDocumen.dispatchEvent(new CustomEvent("sq:refresh"));
+    frame.contentWindow.document.dispatchEvent(new CustomEvent("sq:refresh"));
 
-    var _sqh = (frame == null ? void 0 : (_frame$contentWindow = frame.contentWindow) == null ? void 0 : _frame$contentWindow.squatch) || (frame == null ? void 0 : (_frame$contentWindow2 = frame.contentWindow) == null ? void 0 : _frame$contentWindow2.widgetIdent);
+    var _sqh = frame.contentWindow.squatch || frame.contentWindow.widgetIdent;
 
     if (this.context.user) {
       this._loadEvent(_sqh);
@@ -917,7 +931,7 @@ class PopupWidget extends Widget {
     try {
       triggerElement
       /* HTMLButton */
-      = document.querySelector(this.trigger);
+      = document.querySelector(this.trigger) || document.querySelector(".impactpop");
       if (this.trigger && !triggerElement) _log$6("No element found with trigger selector", this.trigger);
     } catch (_unused) {
       _log$6("Not a valid selector", this.trigger);
@@ -945,7 +959,7 @@ class PopupWidget extends Widget {
     return dialog;
   }
 
-  load() {
+  async load() {
     var _dialogParent$lastChi;
 
     var frame = this._createFrame();
@@ -983,10 +997,10 @@ class PopupWidget extends Widget {
 
     _log$6("Popup template loaded into iframe");
 
-    this._setupResizeHandler(frame);
+    await this._setupResizeHandler(frame);
   }
 
-  _setupResizeHandler(frame) {
+  async _setupResizeHandler(frame) {
     var {
       contentWindow
     } = frame;
@@ -1488,28 +1502,29 @@ function _validateTrackOptions(raw) {
 }
 
 /** @hidden */
+
 function asyncLoad() {
-  var impactNamespace = "impactTBD";
-  var namespace = window[impactNamespace] ? impactNamespace : "squatch";
-  var loaded = window[namespace] || null;
-  var cached = window["_" + namespace] || null;
-
-  if (loaded && cached) {
-    var ready = cached.ready || [];
-    setTimeout(() => window["impactTBD"] = window.squatch, 0);
-    ready.forEach(cb => setTimeout(() => cb(), 0));
-    setTimeout(() => {
-      window.squatch._auto();
-    }, 0); // @ts-ignore -- intentionally deletes `_squatch` to cleanup initialization
+  var _window;
 
-    window["_" + namespace] = undefined;
+  var namespace = window[IMPACT_NAMESPACE] ? IMPACT_NAMESPACE : DEFAULT_NAMESPACE;
+  var cached = ((_window = window["_" + namespace]) == null ? void 0 : _window.ready) || [];
+  var declarativeCache = window.impactOnReady || window.squatchOnReady;
+  var readyFns = [...cached, declarativeCache].filter(a => !!a); // Run all of this in a setTimeout because we need to wait for the squatch module to finish loading
 
-    try {
-      delete window["_" + namespace];
-    } catch (e) {
-      throw e;
-    }
-  }
+  setTimeout(() => {
+    // Exit early if module wasn't loaded onto window
+    if (!window[DEFAULT_NAMESPACE]) return; // Set window.impact as an alias for window.squatch.
+
+    window[IMPACT_NAMESPACE] = window[DEFAULT_NAMESPACE]; // Run all the ready functions in a set timeout to they happen after namespace aliasing.
+
+    readyFns.forEach(cb => cb()); // Perform auto popup
+
+    window[DEFAULT_NAMESPACE]._auto(); // @ts-ignore -- intentionally deletes `_squatch` to cleanup initialization
+
+
+    window["_" + namespace] = undefined;
+    delete window["_" + namespace];
+  }, 0);
 }
 
 /** @hidden */
@@ -1760,6 +1775,11 @@ class DeclarativeWidget extends HTMLElement {
    * Container element to contain the widget iframe
    * @default this
    */
+
+  /**
+   * Flag for if the component has been loaded or not
+   * @hidden
+   */
   constructor() {
     super();
     this.config = void 0;
@@ -1773,6 +1793,7 @@ class DeclarativeWidget extends HTMLElement {
     this.type = void 0;
     this.container = void 0;
     this.element = void 0;
+    this.loaded = void 0;
 
     this._setWidget = (template, config) => {
       var _this$config;
@@ -1783,18 +1804,20 @@ class DeclarativeWidget extends HTMLElement {
         context: {
           type: config.type,
           user: config.user,
-          container: this.container || this,
+          container: this.container || undefined,
           engagementMedium: this.type
         },
         type: this.widgetType,
         domain: ((_this$config = this.config) == null ? void 0 : _this$config.domain) || DEFAULT_DOMAIN,
-        npmCdn: DEFAULT_NPM_CDN
+        npmCdn: DEFAULT_NPM_CDN,
+        container: this
       };
 
       if (this.type === "EMBED") {
-        return new EmbedWidget(params, params.context.container);
+        return new EmbedWidget(params);
       } else {
-        return new PopupWidget(params, this.firstChild ? null : undefined);
+        var useFirstChildTrigger = this.firstChild ? null : undefined;
+        return new PopupWidget(params, useFirstChildTrigger);
       }
     };
 
@@ -1806,17 +1829,19 @@ class DeclarativeWidget extends HTMLElement {
         content: "error",
         context: {
           type: "error",
-          container: this.container || this
+          container: this.container || undefined
         },
         type: "ERROR_WIDGET",
         domain: ((_this$config2 = this.config) == null ? void 0 : _this$config2.domain) || DEFAULT_DOMAIN,
-        npmCdn: DEFAULT_NPM_CDN
+        npmCdn: DEFAULT_NPM_CDN,
+        container: this
       };
 
       if (this.type === "EMBED") {
-        return new EmbedWidget(params, params.context.container);
+        return new EmbedWidget(params);
       } else {
-        return new PopupWidget(params, this.firstChild ? null : undefined);
+        var useFirstChildTrigger = this.firstChild ? null : undefined;
+        return new PopupWidget(params, useFirstChildTrigger);
       }
     };
 
@@ -1825,7 +1850,7 @@ class DeclarativeWidget extends HTMLElement {
     this.hide = this.close;
     this.attachShadow({
       mode: "open"
-    }).innerHTML = "<style>:host { display: contents; }</style><slot></slot>";
+    }).innerHTML = "<style>:host { display: block; }</style><slot></slot>";
     this.config = getConfig();
     this.token = getToken();
     this.tenant = window.squatchTenant;
@@ -1901,6 +1926,7 @@ class DeclarativeWidget extends HTMLElement {
     }
 
     this.widgetInstance = widgetInstance;
+    if (this.widgetInstance) this.dispatchEvent(new CustomEvent("sq:widget-loaded"));
     return widgetInstance;
   }
   /**
@@ -1959,6 +1985,7 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
      */
 
     this.type = "EMBED";
+    this.loaded = false;
   }
 
   static get observedAttributes() {
@@ -1966,7 +1993,7 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
   }
 
   attributeChangedCallback(attr, oldVal, newVal) {
-    if (oldVal === newVal || !oldVal) return; // nothing to do
+    if (oldVal === newVal || !this.loaded) return; // nothing to do
 
     switch (attr) {
       case "locale":
@@ -1979,10 +2006,12 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
   async connectedCallback() {
     var _ref, _this$shadowRoot;
 
-    this.container = this.getAttribute("container") || this;
+    this.loaded = true;
+    this.container = this.getAttribute("container");
     await this.renderWidget();
     var slot = (_ref = this.shadowRoot && Array.from(this.shadowRoot.children)) == null ? void 0 : _ref.find(c => c.tagName === "SLOT");
     if (slot) (_this$shadowRoot = this.shadowRoot) == null ? void 0 : _this$shadowRoot.removeChild(slot);
+    if (this.getAttribute("open") !== null) this.open();
   }
 
 }
@@ -2006,6 +2035,7 @@ class DeclarativePopupWidget extends DeclarativeWidget {
      */
 
     this.type = "POPUP";
+    this.loaded = false;
     this.addEventListener("click", e => {
       e.stopPropagation();
       this.open();
@@ -2017,7 +2047,7 @@ class DeclarativePopupWidget extends DeclarativeWidget {
   }
 
   attributeChangedCallback(attr, oldVal, newVal) {
-    if (oldVal === newVal || !oldVal) return; // nothing to do
+    if (oldVal === newVal || !this.loaded) return; // nothing to do
 
     switch (attr) {
       case "locale":
@@ -2028,7 +2058,8 @@ class DeclarativePopupWidget extends DeclarativeWidget {
   }
 
   async connectedCallback() {
-    this.container = this.getAttribute("container") || this;
+    this.loaded = true;
+    this.container = this.getAttribute("container");
     await this.renderWidget();
     if (this.getAttribute("open") !== null) this.open();
   }