@saasquatch/squatch-js 2.6.0-8 → 2.6.0-9

package/dist/async.d.ts

@@ -5,6 +5,8 @@ declare global {
         _squatch?: {
             ready: any[];
         };
+        impactOnReady?: () => {};
+        squatchOnReady?: () => {};
         squatch: any;
         widgetIdent: any;
         squatchTenant: string;

package/dist/globals.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_DOMAIN = "https://app.referralsaasquatch.com";
+export declare const DEFAULT_NPM_CDN = "https://fast.ssqt.io/npm";
+export declare const DEFAULT_NAMESPACE = "squatch";
+export declare const IMPACT_NAMESPACE = "impact";

package/dist/squatch.esm.js

@@ -36,6 +36,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;
@@ -337,12 +340,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
@@ -437,7 +439,7 @@ class Widget {
       domain: params.domain
     });
     this.context = params.context;
-    this.container = params.context.container;
+    this.container = params.container || params.context.container;
   }
 
   _findElement() {
@@ -460,12 +462,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;
   }
 
@@ -807,20 +809,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);
@@ -912,7 +913,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);
@@ -940,7 +941,7 @@ class PopupWidget extends Widget {
     return dialog;
   }
 
-  load() {
+  async load() {
     var _dialogParent$lastChi;
 
     var frame = this._createFrame();
@@ -978,10 +979,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;
@@ -1483,16 +1484,17 @@ function _validateTrackOptions(raw) {
 }
 
 /** @hidden */
+
 function asyncLoad() {
-  var impactNamespace = "impactTBD";
-  var namespace = window[impactNamespace] ? impactNamespace : "squatch";
+  var namespace = window[IMPACT_NAMESPACE] ? IMPACT_NAMESPACE : DEFAULT_NAMESPACE;
   var loaded = window[namespace] || null;
   var cached = window["_" + namespace] || null;
+  var declarativeCache = window.impactOnReady || window.squatchOnReady;
+  setTimeout(() => window[IMPACT_NAMESPACE] = window[DEFAULT_NAMESPACE], 0);
+  if (declarativeCache) setTimeout(() => declarativeCache(), 0);
 
-  if (loaded && cached) {
-    var ready = cached.ready || [];
-    setTimeout(() => window["impactTBD"] = window.squatch, 0);
-    ready.forEach(cb => setTimeout(() => cb(), 0));
+  if (loaded) {
+    if (cached) (cached.ready || []).forEach(cb => setTimeout(() => cb(), 0));
     setTimeout(() => {
       window.squatch._auto();
     }, 0); // @ts-ignore -- intentionally deletes `_squatch` to cleanup initialization
@@ -1755,6 +1757,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;
@@ -1768,6 +1775,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;
@@ -1789,7 +1797,8 @@ class DeclarativeWidget extends HTMLElement {
       if (this.type === "EMBED") {
         return new EmbedWidget(params, params.context.container);
       } else {
-        return new PopupWidget(params, this.firstChild ? null : undefined);
+        var useFirstChildTrigger = this.firstChild ? null : undefined;
+        return new PopupWidget(params, useFirstChildTrigger);
       }
     };
 
@@ -1811,7 +1820,8 @@ class DeclarativeWidget extends HTMLElement {
       if (this.type === "EMBED") {
         return new EmbedWidget(params, params.context.container);
       } else {
-        return new PopupWidget(params, this.firstChild ? null : undefined);
+        var useFirstChildTrigger = this.firstChild ? null : undefined;
+        return new PopupWidget(params, useFirstChildTrigger);
       }
     };
 
@@ -1954,6 +1964,7 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
      */
 
     this.type = "EMBED";
+    this.loaded = false;
   }
 
   static get observedAttributes() {
@@ -1961,7 +1972,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":
@@ -1978,6 +1989,7 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
     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);
+    this.loaded = true;
   }
 
 }
@@ -2001,6 +2013,7 @@ class DeclarativePopupWidget extends DeclarativeWidget {
      */
 
     this.type = "POPUP";
+    this.loaded = false;
     this.addEventListener("click", e => {
       e.stopPropagation();
       this.open();
@@ -2012,7 +2025,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":
@@ -2026,6 +2039,7 @@ class DeclarativePopupWidget extends DeclarativeWidget {
     this.container = this.getAttribute("container") || this;
     await this.renderWidget();
     if (this.getAttribute("open") !== null) this.open();
+    this.loaded = true;
   }
 
 }