@saasquatch/squatch-js 2.6.0-0 → 2.6.0-2

package/dist/squatch.js

@@ -41,7 +41,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 debug.debug("squatch-js:io");
 
-async function doQuery(url, query, variables, token) {
+async function doQuery(url, query, variables, jwt) {
+  var token = jwt || window.squatchToken;
+
   var headers = _extends({
     Accept: "application/json",
     "Content-Type": "application/json"
@@ -75,7 +77,8 @@ async function doGet(url, jwt) {
     Accept: "application/json",
     "Content-Type": "application/json"
   };
-  if (jwt) headers["X-SaaSquatch-User-Token"] = jwt;
+  var token = jwt || window.squatchToken;
+  if (token) headers["X-SaaSquatch-User-Token"] = token;
 
   try {
     var res = await fetch(url, {
@@ -95,7 +98,8 @@ async function doPost(url, data, jwt) {
     Accept: "application/json",
     "Content-Type": "application/json"
   };
-  if (jwt) headers["X-SaaSquatch-User-Token"] = jwt;
+  var token = jwt || window.squatchToken;
+  if (token) headers["X-SaaSquatch-User-Token"] = token;
 
   try {
     var res = await fetch(url, {
@@ -116,7 +120,8 @@ async function doPut(url, data, jwt) {
     "Content-Type": "application/json",
     "X-SaaSquatch-Referrer": window ? window.location.href : ""
   };
-  if (jwt) headers["X-SaaSquatch-User-Token"] = jwt;
+  var token = jwt || window.squatchToken;
+  if (token) headers["X-SaaSquatch-User-Token"] = token;
 
   try {
     var res = await fetch(url, {
@@ -184,8 +189,6 @@ var RENDER_WIDGET_QUERY = "\n  query renderWidget ($user: UserIdInput, $engageme
  */
 
 class WidgetApi {
-  // TODO: Support using new window variables for initialisation
-
   /**
    * Initialize a new {@link WidgetApi} instance.
    *
@@ -238,8 +241,8 @@ class WidgetApi {
       user
     } = clean;
     var tenantAlias = encodeURIComponent(this.tenantAlias);
-    var accountId = encodeURIComponent(user.accountId);
-    var userId = encodeURIComponent(user.id);
+    var accountId = user.accountId ? encodeURIComponent(user.accountId) : null;
+    var userId = user.id ? encodeURIComponent(user.id) : null;
 
     var optionalParams = _buildParams({
       widgetType,
@@ -279,8 +282,8 @@ class WidgetApi {
       user
     } = clean;
     var tenantAlias = encodeURIComponent(this.tenantAlias);
-    var accountId = user ? encodeURIComponent(user.accountId) : null;
-    var userId = user ? encodeURIComponent(user.id) : null;
+    var accountId = user != null && user.accountId ? encodeURIComponent(user.accountId) : null;
+    var userId = user != null && user.id ? encodeURIComponent(user.id) : null;
     var locale = (_clean$locale = clean.locale) != null ? _clean$locale : validateLocale(navigator.language.replace(/\-/g, "_"));
     var path = "/api/v1/" + tenantAlias + "/graphql";
     var url = this.domain + path;
@@ -463,6 +466,7 @@ class Widget {
   _createFrame() {
     var frame = document.createElement("iframe");
     frame["squatchJsApi"] = this;
+    frame.id = "squatchFrame";
     frame.width = "100%";
     frame.src = "about:blank";
     frame.scrolling = "no";
@@ -470,6 +474,13 @@ class Widget {
     return frame;
   }
 
+  _findFrame() {
+    var element = this._findElement();
+
+    var parent = element.shadowRoot || element;
+    return parent.querySelector("iframe#squatchFrame");
+  }
+
   _loadEvent(sqh) {
     var _this$analyticsApi$pu;
 
@@ -506,7 +517,7 @@ class Widget {
     (_this$analyticsApi$pu = this.analyticsApi.pushAnalyticsLoadEvent(params)) == null ? void 0 : _this$analyticsApi$pu.then(response => {
       _log$7(params.engagementMedium + " loaded event recorded.");
     }).catch(ex => {
-      _log$7(new Error("pushAnalyticsLoadEvent() " + ex));
+      _log$7("ERROR: pushAnalyticsLoadEvent() " + ex);
     });
   }
 
@@ -521,7 +532,7 @@ class Widget {
       }).then(response => {
         _log$7(sqh.mode.widgetMode + " share " + medium + " event recorded. " + response);
       }).catch(ex => {
-        _log$7(new Error("pushAnalyticsLoadEvent() " + ex));
+        _log$7("ERROR: pushAnalyticsShareClickedEvent() " + ex);
       });
     }
   } // TODO: CA: Refactor how error templates are shown
@@ -576,12 +587,16 @@ class Widget {
    */
 
 
-  reload(frame, _ref, jwt) {
+  reload(_ref, jwt) {
     var {
       email,
       firstName,
       lastName
     } = _ref;
+
+    var frame = this._findFrame();
+
+    if (!frame) throw new Error("Could not find widget iframe");
     var frameWindow = frame.contentWindow;
     var engagementMedium = this.context.engagementMedium || "POPUP";
 
@@ -592,6 +607,7 @@ class Widget {
     var response;
 
     if (this.context.type === "upsert") {
+      if (!this.context.user) throw new Error("Can't reload without user ids");
       var userObj = {
         email: email || null,
         firstName: firstName || null,
@@ -628,9 +644,9 @@ class Widget {
           email,
           engagementMedium
         }, () => {
-          this.load(frame); // @ts-ignore -- open exists in the PopupWidget, so this call will always exist when it's called.
+          this.load(); // @ts-ignore -- open exists in the PopupWidget, so this call will always exist when it's called.
 
-          engagementMedium === "POPUP" && this.open(frame);
+          engagementMedium === "POPUP" && this.open();
         });
       }
     }).catch(_ref3 => {
@@ -667,6 +683,7 @@ class Widget {
 function delay(duration) {
   return new Promise(function (resolve, reject) {
     setTimeout(function () {
+      /* istanbul ignore next */
       resolve(() => {});
     }, duration);
   });
@@ -713,12 +730,18 @@ class EmbedWidget extends Widget {
     this.hide = this.close;
   }
 
-  async load(frame) {
+  async load() {
+    var frame = this._createFrame();
+
     var element = this._findElement();
 
     if (this.container) {
       if (element.shadowRoot) {
-        element.shadowRoot.appendChild(frame);
+        var _element$shadowRoot$l;
+
+        if (((_element$shadowRoot$l = element.shadowRoot.lastChild) == null ? void 0 : _element$shadowRoot$l.nodeName) === "IFRAME") element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);else {
+          element.shadowRoot.appendChild(frame);
+        }
       } // Widget reloaded - replace existing element
       else if (element.firstChild) {
         element.replaceChild(frame, element.firstChild); // Add iframe for the first time
@@ -743,17 +766,7 @@ class EmbedWidget extends Widget {
     frameDoc.write("<script src=\"" + this.npmCdn + "/resize-observer-polyfill@1.5.x\"></script>");
     frameDoc.close();
     domready(frameDoc, async () => {
-      var _sqh = contentWindow.squatch || contentWindow.widgetIdent;
-
-      var ctaElement = frameDoc.getElementById("cta");
-
-      if (ctaElement) {
-        if (!ctaElement.parentNode) {
-          throw new Error("ctaElement needs a parentNode");
-        }
-
-        ctaElement.parentNode.removeChild(ctaElement);
-      } // @ts-ignore -- number will be cast to string by browsers
+      var _sqh = contentWindow.squatch || contentWindow.widgetIdent; // @ts-ignore -- number will be cast to string by browsers
 
 
       frame.height = frameDoc.body.scrollHeight; // Adjust frame height when size of body changes
@@ -778,9 +791,11 @@ class EmbedWidget extends Widget {
   } // Un-hide if element is available and refresh data
 
 
-  open(frame) {
+  open() {
     var _frame$contentDocumen, _frame$contentWindow, _frame$contentWindow2;
 
+    var frame = this._findFrame();
+
     if (!frame) return _log$6("no target element to open");
 
     var element = this._findElement();
@@ -797,7 +812,9 @@ class EmbedWidget extends Widget {
     _log$6("loaded");
   }
 
-  close(frame) {
+  close() {
+    var frame = this._findFrame();
+
     if (!frame) return _log$6("no target element to close");
 
     var element = this._findElement();
@@ -860,6 +877,7 @@ class PopupWidget extends Widget {
   }
 
   _initialiseCTA(frame) {
+    if (!this.trigger) return;
     var triggerElement;
 
     try {
@@ -874,21 +892,18 @@ class PopupWidget extends Widget {
 
     if (triggerElement) {
       triggerElement.onclick = () => {
-        this.open(frame);
+        this.open();
       };
-    }
-
-    var element = this._findElement(); // If widget is loaded with CTA, look for a 'squatchpop' element to use
+    } // const element = this._findElement();
+    // If widget is loaded with CTA, look for a 'squatchpop' element to use
     // that element as a trigger as well.
+    // const triggerWhenCTA = element.querySelector(".squatchpop") as HTMLElement;
+    // if (this.trigger === "#cta" && triggerWhenCTA) {
+    //   triggerWhenCTA.onclick = () => {
+    //     this.open(frame);
+    //   };
+    // }
 
-
-    var triggerWhenCTA = element.querySelector(".squatchpop");
-
-    if (this.trigger === "#cta" && triggerWhenCTA) {
-      triggerWhenCTA.onclick = () => {
-        this.open(frame);
-      };
-    }
   }
 
   _createPopupDialog() {
@@ -904,7 +919,11 @@ class PopupWidget extends Widget {
     return dialog;
   }
 
-  load(frame) {
+  load() {
+    var _dialogParent$lastChi;
+
+    var frame = this._createFrame();
+
     this._initialiseCTA(frame);
 
     var element = this._findElement();
@@ -914,7 +933,15 @@ class PopupWidget extends Widget {
     var dialog = this._createPopupDialog();
 
     dialog.appendChild(frame);
-    dialogParent.appendChild(dialog);
+
+    if (((_dialogParent$lastChi = dialogParent.lastChild) == null ? void 0 : _dialogParent$lastChi.nodeName) === "DIALOG") {
+      // Was reloaded
+      dialogParent.replaceChild(dialog, dialogParent.lastChild);
+    } else {
+      // First time rendering
+      dialogParent.appendChild(dialog);
+    }
+
     var {
       contentWindow
     } = frame;
@@ -965,13 +992,17 @@ class PopupWidget extends Widget {
     });
   }
 
-  open(frame) {
+  open() {
     var element = this._findElement();
 
     var parent = element.shadowRoot || element;
     var dialog = parent.querySelector("#" + this.id);
     if (!dialog) throw new Error("Could not determine container div");
     dialog.showModal();
+
+    var frame = this._findFrame();
+
+    if (!frame) throw new Error("Could not find iframe");
     var {
       contentWindow
     } = frame;
@@ -992,7 +1023,10 @@ class PopupWidget extends Widget {
   }
 
   close() {
-    var dialog = document.getElementById(this.id);
+    var element = this._findElement();
+
+    var parent = element.shadowRoot || element;
+    var dialog = parent.querySelector("#" + this.id);
     if (!dialog) throw new Error("Could not determine container div");
     dialog.close();
 
@@ -1095,7 +1129,7 @@ class Widgets {
         this._renderErrorWidget(err, config.engagementMedium);
       }
 
-      throw err;
+      throw new Error(err);
     }
   }
   /**
@@ -1133,7 +1167,7 @@ class Widgets {
         this._renderErrorWidget(err, clean.engagementMedium);
       }
 
-      throw err;
+      throw new Error(err);
     }
   }
   /**
@@ -1145,17 +1179,19 @@ class Widgets {
    */
 
 
-  autofill(selector) {
+  async autofill(selector) {
     var input = selector;
 
     if (typeof input === "function") {
-      this.api.squatchReferralCookie().then(function () {
-        return input(...arguments);
-      }).catch(ex => {
-        _log$4("Autofill error", ex);
+      try {
+        var response = await this.api.squatchReferralCookie();
+        input(response);
+      } catch (e) {
+        _log$4("Autofill error", e);
+
+        throw new Error(e);
+      }
 
-        throw ex;
-      });
       return;
     }
 
@@ -1172,14 +1208,13 @@ class Widgets {
       throw new Error("Element id/class or function missing");
     }
 
-    this.api.squatchReferralCookie().then(_ref => {
-      var {
-        codes
-      } = _ref;
-      elem.value = codes[0];
-    }).catch(ex => {
-      throw ex;
-    });
+    try {
+      var _response = await this.api.squatchReferralCookie();
+
+      elem.value = _response.codes[0];
+    } catch (e) {
+      throw new Error(e);
+    }
   }
   /**
    * @hidden
@@ -1192,15 +1227,17 @@ class Widgets {
 
 
   _renderWidget(response, config, context) {
+    var _opts$widget;
+
     _log$4("Rendering Widget...");
 
     if (!response) throw new Error("Unable to get a response");
     var widget;
     var displayOnLoad = !!config.displayOnLoad;
-    var opts = response.jsOptions || "";
+    var opts = response.jsOptions || {};
     var params = {
       content: response.template,
-      type: config.widgetType || opts.widget.defaultWidgetType,
+      type: config.widgetType || ((_opts$widget = opts.widget) == null ? void 0 : _opts$widget.defaultWidgetType),
       api: this.api,
       domain: this.domain,
       npmCdn: this.npmCdn,
@@ -1210,7 +1247,9 @@ class Widgets {
     if (opts.widgetUrlMappings) {
       opts.widgetUrlMappings.forEach(rule => {
         if (Widgets._matchesUrl(rule.url)) {
-          if (rule.widgetType !== "CONVERSION_WIDGET" || response.user.referredBy && response.user.referredBy.code) {
+          var _response$user, _response$user2, _response$user2$refer;
+
+          if (rule.widgetType !== "CONVERSION_WIDGET" || (_response$user = response.user) != null && _response$user.referredBy && (_response$user2 = response.user) != null && (_response$user2$refer = _response$user2.referredBy) != null && _response$user2$refer.code) {
             displayOnLoad = rule.displayOnLoad;
 
             _log$4("Display " + rule.widgetType + " on " + rule.url);
@@ -1224,16 +1263,18 @@ class Widgets {
     if (opts.fuelTankAutofillUrls) {
       _log$4("We found a fuel tank autofill!");
 
-      opts.fuelTankAutofillUrls.forEach(_ref2 => {
+      opts.fuelTankAutofillUrls.forEach(_ref => {
         var {
           url,
           formSelector
-        } = _ref2;
+        } = _ref;
 
         if (Widgets._matchesUrl(url)) {
+          var _response$user3, _response$user4, _response$user4$refer;
+
           _log$4("Fuel Tank URL matches");
 
-          if (response.user.referredBy && response.user.referredBy.code) {
+          if ((_response$user3 = response.user) != null && _response$user3.referredBy && (_response$user4 = response.user) != null && (_response$user4$refer = _response$user4.referredBy) != null && _response$user4$refer.code) {
             var formAutofill = document.querySelector(formSelector);
 
             if (formAutofill) {
@@ -1247,7 +1288,7 @@ class Widgets {
     }
 
     if (config.engagementMedium === "EMBED") {
-      this._renderEmbedWidget(params, params.context.container);
+      widget = this._renderEmbedWidget(params, params.context.container);
     } else if (config.engagementMedium === "POPUP") {
       widget = this._renderPopupWidget(params);
       if (displayOnLoad) widget.open();
@@ -1264,19 +1305,14 @@ class Widgets {
 
   _renderPopupWidget(params) {
     var widget = new PopupWidget(params, params.context.trigger);
-
-    var frame = widget._createFrame();
-
-    widget.load(frame);
+    widget.load();
     return widget;
   }
 
   _renderEmbedWidget(params, container) {
     var widget = new EmbedWidget(params);
-
-    var frame = widget._createFrame();
-
-    widget.load(frame);
+    widget.load();
+    return widget;
   }
   /**
    * @hidden
@@ -1314,16 +1350,10 @@ class Widgets {
 
     if (em === "EMBED") {
       widget = new EmbedWidget(params);
-
-      var frame = widget._createFrame();
-
-      widget.load(frame);
+      widget.load();
     } else if (em === "POPUP") {
       widget = new PopupWidget(params);
-
-      var _frame = widget._createFrame();
-
-      widget.load(_frame);
+      widget.load();
     }
   }
   /**
@@ -1337,30 +1367,6 @@ class Widgets {
     // If there were no matches, null is returned.
     return window.location.href.match(new RegExp(rule)) ? true : false;
   }
-  /**
-   * @hidden
-   * @param {Object} target Object containing the target DOM element
-   * @param {Widget} widget A widget (EmbedWidget, PopupWidget)
-   * @param {Object} params An object with valid parameters
-   *                        (e.g) {email:'email', firstName:'firstName'}
-   * @returns {void}
-   */
-
-
-  static _cb(target, widget, params) {
-    var paramsObj; // If params is a string, then it should be an email
-
-    if (typeof params === "string" || params instanceof String) {
-      paramsObj = {
-        email: params
-      };
-    } else {
-      paramsObj = params;
-    } // TODO: Reload doesn't exist on all widget types
-
-
-    widget.reload(paramsObj);
-  }
 
 }
 
@@ -1665,16 +1671,14 @@ class DeclarativeWidget extends HTMLElement {
     this.analyticsApi = void 0;
     this.type = void 0;
     this.widgetInstance = void 0;
-    this.frame = void 0;
     this.container = void 0;
     this.element = void 0;
+    this._hasChildren = void 0;
 
     this._setWidget = (template, config) => {
       var _this$config;
 
-      if (!this.widgetType) throw new Error("Widget was no specified");
-      var Widget = this.type === "EMBED" ? EmbedWidget : PopupWidget;
-      return new Widget({
+      var params = {
         api: this.widgetApi,
         content: template,
         context: {
@@ -1685,14 +1689,19 @@ class DeclarativeWidget extends HTMLElement {
         domain: ((_this$config = this.config) == null ? void 0 : _this$config.domain) || DEFAULT_DOMAIN,
         npmCdn: DEFAULT_NPM_CDN,
         container: this.container || this
-      });
+      };
+
+      if (this.type === "EMBED") {
+        return new EmbedWidget(params);
+      } else {
+        return new PopupWidget(params, this.firstChild ? null : undefined);
+      }
     };
 
     this.setErrorWidget = e => {
       var _this$config2;
 
-      var Widget = this.type === "EMBED" ? EmbedWidget : PopupWidget;
-      return new Widget({
+      var params = {
         api: this.widgetApi,
         content: "error",
         context: {
@@ -1702,7 +1711,13 @@ class DeclarativeWidget extends HTMLElement {
         domain: ((_this$config2 = this.config) == null ? void 0 : _this$config2.domain) || DEFAULT_DOMAIN,
         npmCdn: DEFAULT_NPM_CDN,
         container: this.container || this
-      });
+      };
+
+      if (this.type === "EMBED") {
+        return new EmbedWidget(params);
+      } else {
+        return new PopupWidget(params, this.firstChild ? null : undefined);
+      }
     };
 
     this.show = this.open;
@@ -1729,14 +1744,14 @@ class DeclarativeWidget extends HTMLElement {
     });
   }
 
-  renderPasswordlessVariant() {
+  async renderPasswordlessVariant() {
     var _configs$widgetConfig, _configs$widgetConfig2;
 
     var configs = _getAutoConfig();
 
     this._setupApis(configs == null ? void 0 : configs.squatchConfig);
 
-    return this.widgetApi.render({
+    return await this.widgetApi.render({
       engagementMedium: (configs == null ? void 0 : (_configs$widgetConfig = configs.widgetConfig) == null ? void 0 : _configs$widgetConfig.engagementMedium) || this.type,
       widgetType: (configs == null ? void 0 : (_configs$widgetConfig2 = configs.widgetConfig) == null ? void 0 : _configs$widgetConfig2.widgetType) || this.widgetType
     }).then(res => this._setWidget(res.template, {
@@ -1745,8 +1760,6 @@ class DeclarativeWidget extends HTMLElement {
   }
 
   async renderUserUpsertVariant() {
-    if (!this.widgetType) throw new Error("Widget must be specified");
-
     this._setupApis();
 
     var userObj = decodeUserJwt(this.token);
@@ -1780,17 +1793,15 @@ class DeclarativeWidget extends HTMLElement {
 
   async renderWidget() {
     await this.getWidgetInstance();
-    this.element = this.widgetInstance._findElement();
-    this.frame = this.widgetInstance._createFrame();
-    await this.widgetInstance.load(this.frame);
+    await this.widgetInstance.load();
   }
 
   open() {
-    this.widgetInstance.open(this.frame);
+    this.widgetInstance.open();
   }
 
   close() {
-    this.widgetInstance.close(this.frame);
+    this.widgetInstance.close();
   }
 
 }
@@ -1799,7 +1810,6 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
   constructor() {
     super();
     this.type = "EMBED";
-    this.container = this.getAttribute("container") || this;
   }
 
   static get observedAttributes() {
@@ -1816,7 +1826,7 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
       // Specific to embed widgets
 
       case "container":
-        if (this.element) this.close();
+        if (this.widgetInstance._findElement()) this.close();
         this.connectedCallback();
         break;
     }
@@ -1825,9 +1835,10 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
   async connectedCallback() {
     var _ref, _this$shadowRoot;
 
+    this.container = this.getAttribute("container") || this;
     await this.renderWidget();
     var slot = (_ref = this.shadowRoot && Array.from(this.shadowRoot.children)) == null ? void 0 : _ref.find(c => c.tagName === "SLOT");
-    (_this$shadowRoot = this.shadowRoot) == null ? void 0 : _this$shadowRoot.removeChild(slot);
+    if (slot) (_this$shadowRoot = this.shadowRoot) == null ? void 0 : _this$shadowRoot.removeChild(slot);
   }
 
 }
@@ -1895,7 +1906,7 @@ var _events = null;
  */
 
 function api() {
-  if (!_api) this.init({});
+  if (!_api) exports.init({});
   return _api;
 }
 /**
@@ -1907,7 +1918,7 @@ function api() {
  */
 
 function widgets() {
-  if (!_widgets) this.init({});
+  if (!_widgets) exports.init({});
   return _widgets;
 }
 /**
@@ -1919,7 +1930,7 @@ function widgets() {
  */
 
 function events() {
-  if (!_events) this.init({});
+  if (!_events) exports.init({});
   return _events;
 }
 /**
@@ -2010,25 +2021,6 @@ function autofill(selector) {
   // @ts-ignore -- will throw occasionally throw a null pointer exception at runtime
   widgets().autofill(selector);
 }
-/**
- * Overrides the default function that submits the user email. If you have
- * Security enabled, the email needs to be signed before it's submitted.
- *
- * @param {function} fn Callback function for the 'submit_email' event.
- * @returns {void}
- *
- * @example
- * squatch.submitEmail(function(target, widget, email) {
- *   // Sign email and generate jwt token
- *   var jwt = 'token';
- *   widget.reload(email, jwt);
- * });
- */
-
-function submitEmail(fn) {
-  // @ts-ignore -- will throw occasionally throw a null pointer exception at runtime
-  widgets().submitEmail(fn);
-}
 /**
  * Manually set the _saasquatch cookie as a 1st party cookie if available as a URL parameter on the current page.
  * This runs automatically immediately when squatch-js is loaded, except when window.SaaSquatchDoNotAutoDrop is true.
@@ -2067,7 +2059,6 @@ exports.help = help;
 exports.init = init;
 exports.pushCookie = pushCookie;
 exports.ready = ready;
-exports.submitEmail = submitEmail;
 exports.widget = widget;
 exports.widgets = widgets;
 //# sourceMappingURL=squatch.js.map