@saasquatch/squatch-js 2.6.0-5 → 2.6.0-6

package/dist/squatch.js

@@ -405,7 +405,7 @@ function _validateAnalyticsConfig(raw) {
 // @ts-check
 /** @hidden */
 
-var _log$7 = debug.debug("squatch-js:widget");
+var _log$8 = debug.debug("squatch-js:widget");
 /*
  * The Widget class is the base class for the different widget types available
  *
@@ -426,7 +426,7 @@ class Widget {
     this.npmCdn = void 0;
     this.container = void 0;
 
-    _log$7("widget initializing ...");
+    _log$8("widget initializing ...");
 
     this.content = params.content === "error" ? this._error(params.rsCode) : params.content;
     this.type = params.type;
@@ -436,7 +436,7 @@ class Widget {
       domain: params.domain
     });
     this.context = params.context;
-    this.container = params.container;
+    this.container = params.context.container;
   }
 
   _findElement() {
@@ -446,22 +446,22 @@ class Widget {
       // selector is a string
       element = document.querySelector(this.container);
 
-      _log$7("loading widget with selector", element); // selector is an HTML element
+      _log$8("loading widget with selector", element); // selector is an HTML element
 
     } else if (this.container instanceof HTMLElement) {
       element = this.container;
 
-      _log$7("loading widget with container", element); // garbage container found
+      _log$8("loading widget with container", element); // garbage container found
 
     } else if (this.container) {
       element = null;
 
-      _log$7("container must be an HTMLElement or string", this.container); // find element on page
+      _log$8("container must be an HTMLElement or string", this.container); // find element on page
 
     } else {
       element = document.querySelector("#squatchembed") || document.querySelector(".squatchembed");
 
-      _log$7("loading widget with default selector", element);
+      _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.'");
@@ -519,9 +519,9 @@ class Widget {
     }
 
     (_this$analyticsApi$pu = this.analyticsApi.pushAnalyticsLoadEvent(params)) == null ? void 0 : _this$analyticsApi$pu.then(response => {
-      _log$7(params.engagementMedium + " loaded event recorded.");
+      _log$8(params.engagementMedium + " loaded event recorded.");
     }).catch(ex => {
-      _log$7("ERROR: pushAnalyticsLoadEvent() " + ex);
+      _log$8("ERROR: pushAnalyticsLoadEvent() " + ex);
     });
   }
 
@@ -534,9 +534,9 @@ class Widget {
         engagementMedium: sqh.mode.widgetMode,
         shareMedium: medium
       }).then(response => {
-        _log$7(sqh.mode.widgetMode + " share " + medium + " event recorded. " + response);
+        _log$8(sqh.mode.widgetMode + " share " + medium + " event recorded. " + response);
       }).catch(ex => {
-        _log$7("ERROR: pushAnalyticsShareClickedEvent() " + ex);
+        _log$8("ERROR: pushAnalyticsShareClickedEvent() " + ex);
       });
     }
   } // TODO: CA: Refactor how error templates are shown
@@ -658,7 +658,7 @@ class Widget {
         message
       } = _ref3;
 
-      _log$7("" + message);
+      _log$8("" + message);
     });
   }
 
@@ -715,7 +715,7 @@ function domready(targetDoc, fn) {
 
 // @ts-check
 
-var _log$6 = debug.debug("squatch-js:EMBEDwidget");
+var _log$7 = debug.debug("squatch-js:EMBEDwidget");
 /**
  * An EmbedWidget is displayed inline in part of your page.
  *
@@ -734,6 +734,7 @@ class EmbedWidget extends Widget {
     super(params);
     this.show = this.open;
     this.hide = this.close;
+    if (container) this.container = container;
   }
 
   async load() {
@@ -789,12 +790,12 @@ class EmbedWidget extends Widget {
         }
       });
       var container = await this._findInnerContainer(frame);
-      ro.observe(container); // Regular load - trigger event
+      ro.observe(container);
 
-      if (!this.container || this.container instanceof HTMLElement && this.container.tagName.startsWith("SQUATCH-")) {
+      if (this._shouldFireLoadEvent()) {
         this._loadEvent(_sqh);
 
-        _log$6("loaded");
+        _log$7("loaded");
       }
     });
   }
@@ -808,7 +809,7 @@ class EmbedWidget extends Widget {
 
     var frame = this._findFrame();
 
-    if (!frame) return _log$6("no target element to open");
+    if (!frame) return _log$7("no target element to open");
 
     var element = this._findElement();
 
@@ -819,15 +820,17 @@ class EmbedWidget extends Widget {
 
     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);
 
-    this._loadEvent(_sqh);
+    if (this.context.user) {
+      this._loadEvent(_sqh);
 
-    _log$6("loaded");
+      _log$7("loaded");
+    }
   }
 
   close() {
     var frame = this._findFrame();
 
-    if (!frame) return _log$6("no target element to close");
+    if (!frame) return _log$7("no target element to close");
 
     var element = this._findElement();
 
@@ -835,7 +838,7 @@ class EmbedWidget extends Widget {
     element.style.height = "0";
     element.style["overflow-y"] = "hidden";
 
-    _log$6("Embed widget closed");
+    _log$7("Embed widget closed");
   }
 
   _error(rs, mode, style) {
@@ -850,11 +853,18 @@ class EmbedWidget extends Widget {
     return super._error(rs, mode, style);
   }
 
+  _shouldFireLoadEvent() {
+    var noContainer = !this.container;
+    var isComponent = this.container instanceof HTMLElement && this.container.tagName.startsWith("SQUATCH-");
+    var isVerified = !!this.context.user;
+    return isVerified && (noContainer || isComponent);
+  }
+
 }
 
 // @ts-check
 
-var _log$5 = debug.debug("squatch-js:POPUPwidget");
+var _log$6 = debug.debug("squatch-js:POPUPwidget");
 
 var popupId = 0;
 /**
@@ -901,9 +911,9 @@ class PopupWidget extends Widget {
       triggerElement
       /* HTMLButton */
       = document.querySelector(this.trigger);
-      if (this.trigger && !triggerElement) _log$5("No element found with trigger selector", this.trigger);
+      if (this.trigger && !triggerElement) _log$6("No element found with trigger selector", this.trigger);
     } catch (_unused) {
-      _log$5("Not a valid selector", this.trigger);
+      _log$6("Not a valid selector", this.trigger);
     } // Trigger is optional
 
 
@@ -911,16 +921,7 @@ class PopupWidget extends Widget {
       triggerElement.onclick = () => {
         this.open();
       };
-    } // 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);
-    //   };
-    // }
-
+    }
   }
 
   _createPopupDialog() {
@@ -929,6 +930,7 @@ class PopupWidget extends Widget {
     dialog.setAttribute("style", "width: 100%; max-width: 500px; border: none; padding: 0;");
 
     var onClick = e => {
+      e.stopPropagation();
       if (e.target === dialog) dialog.close();
     };
 
@@ -972,7 +974,7 @@ class PopupWidget extends Widget {
     frameDoc.write("<script src=\"" + this.npmCdn + "/resize-observer-polyfill@1.5.x\"></script>");
     frameDoc.close();
 
-    _log$5("Popup template loaded into iframe");
+    _log$6("Popup template loaded into iframe");
 
     this._setupResizeHandler(frame);
   }
@@ -1031,9 +1033,11 @@ class PopupWidget extends Widget {
 
       (_frame$contentDocumen = frame.contentDocument) == null ? void 0 : _frame$contentDocumen.dispatchEvent(new CustomEvent("sq:refresh"));
 
-      this._loadEvent(_sqh);
+      if (this.context.user) {
+        this._loadEvent(_sqh);
 
-      _log$5("Popup opened");
+        _log$6("Popup opened");
+      }
     });
   }
 
@@ -1044,7 +1048,7 @@ class PopupWidget extends Widget {
     if (!dialog) throw new Error("Could not determine container div");
     dialog.close();
 
-    _log$5("Popup closed");
+    _log$6("Popup closed");
   }
 
   _clickedOutside(_ref) {
@@ -1065,7 +1069,7 @@ class PopupWidget extends Widget {
 
 }
 
-var _log$4 = debug.debug("squatch-js:widgets");
+var _log$5 = debug.debug("squatch-js:widgets");
 /**
  * `Widgets` is a factory for creating widgets. It's possible to build your own widgets using the
  * {@link WidgetApi} but most people will prefer to use these easy methods.
@@ -1154,7 +1158,7 @@ class Widgets {
         user: response.user
       };
     } catch (err) {
-      _log$4(err);
+      _log$5(err);
 
       if (err.apiErrorCode) {
         this._renderErrorWidget(err, config.engagementMedium);
@@ -1220,7 +1224,7 @@ class Widgets {
         var response = await this.api.squatchReferralCookie();
         input(response);
       } catch (e) {
-        _log$4("Autofill error", e);
+        _log$5("Autofill error", e);
 
         throw new Error(e);
       }
@@ -1236,7 +1240,7 @@ class Widgets {
       // Only use the first element found
       elem = elems[0];
     } else {
-      _log$4("Element id/class or function missing");
+      _log$5("Element id/class or function missing");
 
       throw new Error("Element id/class or function missing");
     }
@@ -1262,7 +1266,7 @@ class Widgets {
   _renderWidget(response, config, context) {
     var _opts$widget;
 
-    _log$4("Rendering Widget...");
+    _log$5("Rendering Widget...");
 
     if (!response) throw new Error("Unable to get a response");
     var widget;
@@ -1285,16 +1289,16 @@ class Widgets {
           if (rule.widgetType !== "CONVERSION_WIDGET" || (_response$user = response.user) != null && (_response$user$referr = _response$user.referredBy) != null && _response$user$referr.code) {
             displayOnLoad = rule.displayOnLoad;
 
-            _log$4("Display " + rule.widgetType + " on " + rule.url);
+            _log$5("Display " + rule.widgetType + " on " + rule.url);
           } else {
-            _log$4("Don't display " + rule.widgetType + " when no referral on widget rule match " + rule.url);
+            _log$5("Don't display " + rule.widgetType + " when no referral on widget rule match " + rule.url);
           }
         }
       });
     }
 
     if (opts.fuelTankAutofillUrls) {
-      _log$4("We found a fuel tank autofill!");
+      _log$5("We found a fuel tank autofill!");
 
       opts.fuelTankAutofillUrls.forEach(_ref => {
         var {
@@ -1305,7 +1309,7 @@ class Widgets {
         if (Widgets._matchesUrl(url)) {
           var _response$user2, _response$user2$refer;
 
-          _log$4("Fuel Tank URL matches");
+          _log$5("Fuel Tank URL matches");
 
           if ((_response$user2 = response.user) != null && (_response$user2$refer = _response$user2.referredBy) != null && _response$user2$refer.code) {
             var formAutofill = document.querySelector(formSelector);
@@ -1315,7 +1319,7 @@ class Widgets {
 
               formAutofill.value = ((_response$user$referr2 = response.user.referredBy.referredReward) == null ? void 0 : _response$user$referr2.fuelTankCode) || "";
             } else {
-              _log$4(new Error("Element with id/class " + formSelector + " was not found."));
+              _log$5(new Error("Element with id/class " + formSelector + " was not found."));
             }
           }
         }
@@ -1323,15 +1327,9 @@ class Widgets {
     }
 
     if (config.engagementMedium === "EMBED") {
-      widget = this._renderEmbedWidget(params, params.context.container);
-    } else if (config.engagementMedium === "POPUP") {
-      widget = this._renderPopupWidget(params);
-      if (displayOnLoad) widget.open();
+      widget = this._renderEmbedWidget(params);
     } else {
-      _log$4("display popup on load");
-
-      widget = new PopupWidget(params);
-      widget.load();
+      widget = this._renderPopupWidget(params);
       if (displayOnLoad) widget.open();
     }
 
@@ -1344,8 +1342,8 @@ class Widgets {
     return widget;
   }
 
-  _renderEmbedWidget(params, container) {
-    var widget = new EmbedWidget(params, container);
+  _renderEmbedWidget(params) {
+    var widget = new EmbedWidget(params, params.context.container);
     widget.load();
     return widget;
   }
@@ -1368,7 +1366,7 @@ class Widgets {
       message
     } = props;
 
-    _log$4(new Error(apiErrorCode + " (" + rsCode + ") " + message));
+    _log$5(new Error(apiErrorCode + " (" + rsCode + ") " + message));
 
     var params = {
       content: "error",
@@ -1504,7 +1502,7 @@ function asyncLoad() {
 
 /** @hidden */
 
-var _log$3 = debug.debug("squatch-js");
+var _log$4 = debug.debug("squatch-js");
 
 var isObject = item => typeof item === "object" && !Array.isArray(item);
 
@@ -1557,7 +1555,7 @@ function _pushCookie() {
     try {
       paramsJSON = JSON.parse(b64decode(refParam));
     } catch (error) {
-      _log$3("Unable to decode params", error); // don't merge invalid params
+      _log$4("Unable to decode params", error); // don't merge invalid params
 
 
       return;
@@ -1566,26 +1564,26 @@ function _pushCookie() {
     try {
       existingCookie = JSON.parse(b64decode(Cookies__default['default'].get("_saasquatch")));
 
-      _log$3("existing cookie", existingCookie);
+      _log$4("existing cookie", existingCookie);
     } catch (error) {
-      _log$3("Unable to retrieve cookie", error);
+      _log$4("Unable to retrieve cookie", error);
     } // don't merge if there's no existing object
 
 
     try {
       var domain = getTopDomain();
 
-      _log$3("domain retrieved:", domain);
+      _log$4("domain retrieved:", domain);
 
       if (existingCookie) {
         var newCookie = deepMerge(existingCookie, paramsJSON);
         reEncodedCookie = b64encode(JSON.stringify(newCookie));
 
-        _log$3("cookie to store:", newCookie);
+        _log$4("cookie to store:", newCookie);
       } else {
         reEncodedCookie = b64encode(JSON.stringify(paramsJSON));
 
-        _log$3("cookie to store:", paramsJSON);
+        _log$4("cookie to store:", paramsJSON);
       }
 
       Cookies__default['default'].set("_saasquatch", reEncodedCookie, {
@@ -1596,14 +1594,14 @@ function _pushCookie() {
         path: "/"
       });
     } catch (error) {
-      _log$3("Unable to set cookie", error);
+      _log$4("Unable to set cookie", error);
     }
   }
 }
 
 /** @hidden */
 
-var _log$2 = debug.debug("squatch-js");
+var _log$3 = debug.debug("squatch-js");
 
 function _getAutoConfig(configIn) {
   var queryString = window.location.search;
@@ -1611,7 +1609,7 @@ function _getAutoConfig(configIn) {
   var refParam = urlParams.get("_saasquatchExtra") || "";
 
   if (!refParam) {
-    _log$2("No _saasquatchExtra param");
+    _log$3("No _saasquatchExtra param");
 
     return;
   }
@@ -1621,7 +1619,7 @@ function _getAutoConfig(configIn) {
   try {
     raw = JSON.parse(b64decode(refParam));
   } catch (e) {
-    _log$2("Unable to decode _saasquatchExtra config");
+    _log$3("Unable to decode _saasquatchExtra config");
 
     return;
   }
@@ -1633,7 +1631,7 @@ function _getAutoConfig(configIn) {
   } = convertExtraToConfig(raw);
 
   if (!domain || !tenantAlias || !widgetConfig) {
-    _log$2("_saasquatchExtra did not have an expected structure");
+    _log$3("_saasquatchExtra did not have an expected structure");
 
     return undefined;
   }
@@ -1676,7 +1674,7 @@ function convertExtraToConfig(obj) {
   };
 }
 
-var _log$1 = debug.debug("squatch-js:decodeJwt");
+var _log$2 = debug.debug("squatch-js:decodeJwt");
 
 function decodeUserJwt(tokenStr) {
   try {
@@ -1687,13 +1685,13 @@ function decodeUserJwt(tokenStr) {
     var jsonStr = b64decode(base64Url);
     return (_JSON$parse = JSON.parse(jsonStr)) == null ? void 0 : _JSON$parse.user;
   } catch (e) {
-    _log$1(e);
+    _log$2(e);
 
     return null;
   }
 }
 
-debug__default['default']("sqh:DeclarativeWidget");
+var _log$1 = debug__default['default']("squatch-js:DeclarativeWidget");
 /**
  * Abstract class for building web-components that render SaaSquatch widgets to the DOM.
  * @abstract
@@ -1772,16 +1770,17 @@ class DeclarativeWidget extends HTMLElement {
         content: template,
         context: {
           type: config.type,
+          user: config.user,
+          container: this.container || this,
           engagementMedium: this.type
         },
         type: this.widgetType,
         domain: ((_this$config = this.config) == null ? void 0 : _this$config.domain) || DEFAULT_DOMAIN,
-        npmCdn: DEFAULT_NPM_CDN,
-        container: this.container || this
+        npmCdn: DEFAULT_NPM_CDN
       };
 
       if (this.type === "EMBED") {
-        return new EmbedWidget(params);
+        return new EmbedWidget(params, params.context.container);
       } else {
         return new PopupWidget(params, this.firstChild ? null : undefined);
       }
@@ -1794,16 +1793,16 @@ class DeclarativeWidget extends HTMLElement {
         api: this.widgetApi,
         content: "error",
         context: {
-          type: "error"
+          type: "error",
+          container: this.container || this
         },
         type: "ERROR_WIDGET",
         domain: ((_this$config2 = this.config) == null ? void 0 : _this$config2.domain) || DEFAULT_DOMAIN,
-        npmCdn: DEFAULT_NPM_CDN,
-        container: this.container || this
+        npmCdn: DEFAULT_NPM_CDN
       };
 
       if (this.type === "EMBED") {
-        return new EmbedWidget(params);
+        return new EmbedWidget(params, params.context.container);
       } else {
         return new PopupWidget(params, this.firstChild ? null : undefined);
       }
@@ -1824,7 +1823,7 @@ class DeclarativeWidget extends HTMLElement {
   _setupApis(config) {
     var _this$config3, _this$config4;
 
-    if (!this.tenant) throw new Error("Requires tenantAlias");
+    if (!this.tenant) throw new Error("tenantAlias not provided");
     this.widgetApi = new WidgetApi({
       tenantAlias: (config == null ? void 0 : config.tenantAlias) || this.tenant,
       domain: (config == null ? void 0 : config.domain) || ((_this$config3 = this.config) == null ? void 0 : _this$config3.domain) || DEFAULT_DOMAIN
@@ -1835,16 +1834,14 @@ class DeclarativeWidget extends HTMLElement {
   }
 
   async renderPasswordlessVariant() {
-    var _configs$widgetConfig, _configs$widgetConfig2, _configs$widgetConfig3;
-
-    var configs = _getAutoConfig();
+    this._setupApis();
 
-    this._setupApis(configs == null ? void 0 : configs.squatchConfig);
+    _log$1("Rendering as an Instant Access widget");
 
     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,
-      locale: (configs == null ? void 0 : (_configs$widgetConfig3 = configs.widgetConfig) == null ? void 0 : _configs$widgetConfig3.locale) || this.locale
+      engagementMedium: this.type,
+      widgetType: this.widgetType,
+      locale: this.locale
     }).then(res => this._setWidget(res.template, {
       type: "passwordless"
     })).catch(this.setErrorWidget);
@@ -1854,7 +1851,13 @@ class DeclarativeWidget extends HTMLElement {
     this._setupApis();
 
     var userObj = decodeUserJwt(this.token);
-    if (!userObj) throw new Error("Could not load user information from jwt");
+
+    if (!userObj) {
+      return this.setErrorWidget(Error("No user object in token."));
+    }
+
+    _log$1("Rendering as a Verified widget");
+
     var widgetInstance = await this.widgetApi.upsertUser({
       user: userObj,
       locale: this.locale,
@@ -1862,7 +1865,8 @@ class DeclarativeWidget extends HTMLElement {
       widgetType: this.widgetType,
       jwt: this.token
     }).then(res => this._setWidget(res.template, {
-      type: "upsert"
+      type: "upsert",
+      user: userObj
     })).catch(this.setErrorWidget);
     return widgetInstance;
   }
@@ -1991,9 +1995,8 @@ class DeclarativePopupWidget extends DeclarativeWidget {
 
     this.type = "POPUP";
     this.addEventListener("click", e => {
-      e.stopPropagation(); // SQUATCH-POPUP target means something in the shadowDOM was clicked (i.e. the dialog element)
-
-      if (e.target.tagName !== "SQUATCH-POPUP") this.open();
+      e.stopPropagation();
+      this.open();
     });
   }
 
@@ -2013,6 +2016,7 @@ class DeclarativePopupWidget extends DeclarativeWidget {
   }
 
   async connectedCallback() {
+    this.container = this.getAttribute("container") || this;
     await this.renderWidget();
     if (this.getAttribute("open") !== null) this.open();
   }
@@ -2146,6 +2150,8 @@ function init(configIn) {
 
   if (config.tenantAlias.match("^test") || config.debug) {
     debug.debug.enable("squatch-js*");
+  } else {
+    debug.debug.disable();
   }
 
   _log("initializing ...");