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

package/cucumber.js

@@ -24,7 +24,7 @@ exports.default = [
   `--parallel ${CPU_COUNT}`,
 
   // "test/**/*.feature",
-  "../blackbox-testing/features/**/*.feature",
+  "test/specs/**/*.feature",
 
   `--tags "@testsuite:squatch-js and not @skip"`,
 
@@ -38,8 +38,8 @@ exports.default = [
   //   "--require tests/cucumber-setup/loaders.ts",
 
   // Step definitions go last
-  "--require test/step_definitions/**/*.ts",
-  "--require test/step_definitions/**/*.tsx",
+  "--require test/step_definitions/**/steps.ts",
+  // "--require test/step_definitions/**/*.tsx",
 
   // '--format usage',
 ].join(" ");

package/dist/squatch.esm.js

@@ -36,7 +36,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 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"
@@ -70,7 +72,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, {
@@ -90,7 +93,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, {
@@ -111,7 +115,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, {
@@ -179,8 +184,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.
    *
@@ -233,8 +236,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,
@@ -274,8 +277,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;
@@ -458,6 +461,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";
@@ -465,6 +469,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;
 
@@ -501,7 +512,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);
     });
   }
 
@@ -516,7 +527,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
@@ -571,12 +582,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";
 
@@ -587,6 +602,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,
@@ -623,9 +639,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 => {
@@ -708,12 +724,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
@@ -738,17 +760,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
@@ -773,9 +785,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();
@@ -792,7 +806,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();
@@ -855,6 +871,7 @@ class PopupWidget extends Widget {
   }
 
   _initialiseCTA(frame) {
+    if (!this.trigger) return;
     var triggerElement;
 
     try {
@@ -869,21 +886,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() {
@@ -899,7 +913,11 @@ class PopupWidget extends Widget {
     return dialog;
   }
 
-  load(frame) {
+  load() {
+    var _dialogParent$lastChi;
+
+    var frame = this._createFrame();
+
     this._initialiseCTA(frame);
 
     var element = this._findElement();
@@ -909,7 +927,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;
@@ -960,13 +986,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;
@@ -987,7 +1017,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();
 
@@ -1090,7 +1123,7 @@ class Widgets {
         this._renderErrorWidget(err, config.engagementMedium);
       }
 
-      throw err;
+      throw new Error(err);
     }
   }
   /**
@@ -1128,7 +1161,7 @@ class Widgets {
         this._renderErrorWidget(err, clean.engagementMedium);
       }
 
-      throw err;
+      throw new Error(err);
     }
   }
   /**
@@ -1140,17 +1173,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;
     }
 
@@ -1167,14 +1202,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
@@ -1219,11 +1253,11 @@ 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)) {
           _log$4("Fuel Tank URL matches");
@@ -1259,19 +1293,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
@@ -1309,16 +1338,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();
     }
   }
   /**
@@ -1332,30 +1355,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);
-  }
 
 }
 
@@ -1660,16 +1659,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: {
@@ -1680,14 +1677,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: {
@@ -1697,7 +1699,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;
@@ -1724,14 +1732,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, {
@@ -1740,8 +1748,6 @@ class DeclarativeWidget extends HTMLElement {
   }
 
   async renderUserUpsertVariant() {
-    if (!this.widgetType) throw new Error("Widget must be specified");
-
     this._setupApis();
 
     var userObj = decodeUserJwt(this.token);
@@ -1775,17 +1781,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();
   }
 
 }
@@ -1794,7 +1798,6 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
   constructor() {
     super();
     this.type = "EMBED";
-    this.container = this.getAttribute("container") || this;
   }
 
   static get observedAttributes() {
@@ -1811,7 +1814,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;
     }
@@ -1820,9 +1823,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);
   }
 
 }
@@ -1890,7 +1894,7 @@ var _events = null;
  */
 
 function api() {
-  if (!_api) this.init({});
+  if (!_api) exports.init({});
   return _api;
 }
 /**
@@ -1902,7 +1906,7 @@ function api() {
  */
 
 function widgets() {
-  if (!_widgets) this.init({});
+  if (!_widgets) exports.init({});
   return _widgets;
 }
 /**
@@ -1914,7 +1918,7 @@ function widgets() {
  */
 
 function events() {
-  if (!_events) this.init({});
+  if (!_events) exports.init({});
   return _events;
 }
 /**