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

package/dist/async.d.ts

@@ -5,13 +5,15 @@ declare global {
         _squatch?: {
             ready: any[];
         };
+        impactOnReady?: () => {};
+        squatchOnReady?: () => {};
         squatch: any;
         widgetIdent: any;
         squatchTenant: string;
         squatchToken: string;
         squatchConfig: Omit<ConfigOptions, "tenantAlias">;
-        impactTBDToken: string;
-        impactTBDConfig: Omit<ConfigOptions, "tenantAlias">;
+        impactToken: string;
+        impactConfig: Omit<ConfigOptions, "tenantAlias">;
     }
 }
 /** @hidden */

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;
@@ -76,10 +79,10 @@ function validatePasswordlessConfig(raw) {
   return raw;
 }
 function getToken() {
-  return window.impactTBDToken || window.squatchToken;
+  return window.impactToken || window.squatchToken;
 }
 function getConfig() {
-  return window.impactTBDConfig || window.squatchConfig;
+  return window.impactConfig || window.squatchConfig;
 }
 
 debug("squatch-js:io");
@@ -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;
   }
 
@@ -540,8 +542,7 @@ class Widget {
         _log$8("ERROR: pushAnalyticsShareClickedEvent() " + ex);
       });
     }
-  } // TODO: CA: Refactor how error templates are shown
-
+  }
 
   _error(rs, mode, style) {
     if (mode === void 0) {
@@ -808,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);
@@ -858,7 +858,7 @@ class EmbedWidget extends Widget {
 
   _shouldFireLoadEvent() {
     var noContainer = !this.container;
-    var isComponent = this.container instanceof HTMLElement && this.container.tagName.startsWith("SQUATCH-");
+    var isComponent = this.container instanceof HTMLElement && (this.container.tagName.startsWith("SQUATCH-") || this.container.tagName.startsWith("IMPACT-"));
     var isVerified = !!this.context.user;
     return isVerified && (noContainer || isComponent);
   }
@@ -913,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);
@@ -941,7 +941,7 @@ class PopupWidget extends Widget {
     return dialog;
   }
 
-  load() {
+  async load() {
     var _dialogParent$lastChi;
 
     var frame = this._createFrame();
@@ -979,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;
@@ -1086,11 +1086,11 @@ class Widgets {
    */
 
   /**
-   * Tenant alias of SaaSquatch tenant.
+   * Tenant alias of SaaSquatch tenant
    */
 
   /**
-   * SaaSquatch domain for API requests.
+   * SaaSquatch domain for API requests
    * @default "https://app.referralsaasquatch.com"
    */
 
@@ -1134,13 +1134,13 @@ class Widgets {
    * @param {Object} config.user The user details
    * @param {string} config.user.id The user id
    * @param {string} config.user.accountId The user account id
-   * @param {WidgetType} config.widgetType The content of the widget.
-   * @param {EngagementMedium} config.engagementMedium How to display the widget.
+   * @param {WidgetType} config.widgetType The content of the widget
+   * @param {EngagementMedium} config.engagementMedium How to display the widget
    * @param {string} config.jwt the JSON Web Token (JWT) that is used to validate the data (can be disabled)
    * @param {HTMLElement | string | undefined} config.container Element to load the widget into
    * @param {string | undefined} config.trigger Trigger element for opening the popup widget
    *
-   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
+   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details
    */
 
 
@@ -1178,12 +1178,12 @@ class Widgets {
    * @param {Object} config.user The user details
    * @param {string} config.user.id The user id
    * @param {string} config.user.accountId The user account id
-   * @param {WidgetType} config.widgetType The content of the widget.
-   * @param {EngagementMedium} config.engagementMedium How to display the widget.
+   * @param {WidgetType} config.widgetType The content of the widget
+   * @param {EngagementMedium} config.engagementMedium How to display the widget
    * @param {string} config.jwt the JSON Web Token (JWT) that is used
    *                            to validate the data (can be disabled)
    *
-   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
+   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details
    */
 
 
@@ -1484,19 +1484,17 @@ function _validateTrackOptions(raw) {
 }
 
 /** @hidden */
+
 function asyncLoad() {
-  var impactNamespace = "impactTBD";
-  var namespace = window[impactNamespace] ? impactNamespace : "squatch";
-  console.log({
-    namespace
-  });
+  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
@@ -1685,7 +1683,7 @@ function convertExtraToConfig(obj) {
   };
 }
 
-var _log$2 = debug("squatch-js:decodeJwt");
+var _log$2 = debug("squatch-js:decodeUserJwt");
 
 function decodeUserJwt(tokenStr) {
   try {
@@ -1704,7 +1702,7 @@ function decodeUserJwt(tokenStr) {
 
 var _log$1 = debug$1("squatch-js:DeclarativeWidget");
 /**
- * Abstract class for building web-components that render SaaSquatch widgets to the DOM.
+ * Abstract class for building web-components that render SaaSquatch widgets to the DOM
  * @abstract
  * @example
  * class TestWidgetElement extends DeclarativeWidget {}
@@ -1752,13 +1750,18 @@ class DeclarativeWidget extends HTMLElement {
    */
 
   /**
-   * Determines whether to render the widget as an embedding widget or popup widget.
+   * Determines whether to render the widget as an embedding widget or popup widget
    */
 
   /**
    * 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;
@@ -1772,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;
@@ -1793,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);
       }
     };
 
@@ -1815,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);
       }
     };
 
@@ -1883,7 +1889,7 @@ class DeclarativeWidget extends HTMLElement {
   }
 
   /**
-   * Fetches widget content from SaaSquatch and builds a Widget instance to support rendering the widget in the DOM.
+   * Fetches widget content from SaaSquatch and builds a Widget instance to support rendering the widget in the DOM
    * @returns Instance of either {@link EmbedWidget} or {@link PopupWidget} depending on `this.type`
    * @throws Throws an Error if `widgetType` is undefined
    */
@@ -1903,7 +1909,7 @@ class DeclarativeWidget extends HTMLElement {
     return widgetInstance;
   }
   /**
-   * Calls {@link getWidgetInstance} to build the Widget instance and loads the widget iframe into the DOM.
+   * Calls {@link getWidgetInstance} to build the Widget instance and loads the widget iframe into the DOM
    */
 
 
@@ -1912,7 +1918,7 @@ class DeclarativeWidget extends HTMLElement {
     await this.widgetInstance.load();
   }
   /**
-   * Builds a Widget instance for the default error widget.
+   * Builds a Widget instance for the default error widget
    * @returns Instance of either {@link EmbedWidget} or {@link PopupWidget} depending on `this.type`
    */
 
@@ -1958,6 +1964,7 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
      */
 
     this.type = "EMBED";
+    this.loaded = false;
   }
 
   static get observedAttributes() {
@@ -1965,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":
@@ -1982,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;
   }
 
 }
@@ -2005,6 +2013,7 @@ class DeclarativePopupWidget extends DeclarativeWidget {
      */
 
     this.type = "POPUP";
+    this.loaded = false;
     this.addEventListener("click", e => {
       e.stopPropagation();
       this.open();
@@ -2016,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":
@@ -2030,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;
   }
 
 }