@saasquatch/squatch-js 2.4.2 → 2.4.3-0

package/dist/squatch.esm.js

@@ -22,6 +22,45 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function doQuery(url, query, variables, token) {
+  const headers = _extends({
+    Accept: "application/json"
+  }, token ? {
+    Authorization: `Bearer ${token}`
+  } : {}, {
+    "X-SaaSquatch-Referrer": window ? window.location.href : ""
+  });
+
+  const request = superagent.post(url).send({
+    query,
+    variables
+  }).set(headers);
+  return thenableSuperagent(request).then(response => response, error => {
+    let json;
+
+    try {
+      json = JSON.parse(error.response.text);
+    } catch (e) {
+    }
+
+    throw json;
+  });
+}
 function doGet(url, jwt = "") {
   const headers = {
     Accept: "application/json",
@@ -164,6 +203,10 @@ function validateWidgetConfig(raw) {
 
   return raw;
 }
+function validatePasswordlessConfig(raw) {
+  if (!isObject$1(raw)) throw new Error("Widget properties must be an object");
+  return raw;
+}
 
 /**
  *
@@ -286,7 +329,7 @@ class WidgetApi {
 
   render(params) {
     const raw = params;
-    const clean = validateWidgetConfig(raw);
+    const clean = validatePasswordlessConfig(raw);
     const {
       widgetType,
       engagementMedium = "POPUP",
@@ -294,17 +337,42 @@ class WidgetApi {
       user
     } = clean;
     const tenantAlias = encodeURIComponent(this.tenantAlias);
-    const accountId = encodeURIComponent(user.accountId);
-    const userId = encodeURIComponent(user.id);
-
-    const optionalParams = _buildParams({
-      widgetType,
-      engagementMedium
-    });
-
-    const path = `/api/v1/${tenantAlias}/widget/account/${accountId}/user/${userId}/render${optionalParams}`;
+    const accountId = user ? encodeURIComponent(user.accountId) : null;
+    const userId = user ? encodeURIComponent(user.id) : null;
+    const query = `
+      query renderWidget ($user: UserIdInput, $engagementMedium: UserEngagementMedium, $widgetType: WidgetType) {
+        renderWidget(user: $user, engagementMedium: $engagementMedium, widgetType: $widgetType) {
+          template
+          user {
+            id
+            accountId
+          }
+          jsOptions
+          widgetConfig {
+            values
+          }
+        }
+      }
+    `;
+    const path = `/api/v1/${tenantAlias}/graphql`;
     const url = this.domain + path;
-    return doGet(url, jwt);
+    return new Promise(async (resolve, reject) => {
+      try {
+        var _res$body, _res$body$data;
+
+        const res = await doQuery(url, query, {
+          user: userId && accountId ? {
+            id: userId,
+            accountId
+          } : null,
+          engagementMedium,
+          widgetType
+        }, jwt);
+        resolve(res == null ? void 0 : (_res$body = res.body) == null ? void 0 : (_res$body$data = _res$body.data) == null ? void 0 : _res$body$data.renderWidget);
+      } catch (e) {
+        reject(e);
+      }
+    });
   }
   /**
    * An API call to send out referral invites to contacts
@@ -338,21 +406,18 @@ class WidgetApi {
   /**
    * Looks up the referral code of the current user, if there is any.
    *
-   * @return {Promise<ReferralCookie>} code referral code if true.
+   * @return {Promise<Object>} code referral code if true.
    */
 
 
-  async squatchReferralCookie() {
+  squatchReferralCookie() {
     const tenantAlias = encodeURIComponent(this.tenantAlias);
 
-    const _saasquatch = Cookies.get("_saasquatch") || "";
+    const _saasquatch = Cookies.get("_saasquatch");
 
     const cookie = _saasquatch ? `?cookies=${encodeURIComponent(_saasquatch)}` : ``;
     const url = `${this.domain}/a/${tenantAlias}/widgets/squatchcookiejson${cookie}`;
-    const response = await doGet(url);
-    return Promise.resolve(_extends({}, response, {
-      encodedCookie: _saasquatch
-    }));
+    return doGet(url);
   }
 
 } // builds a param string for widgets
@@ -421,7 +486,7 @@ class AnalyticsApi {
 // @ts-check
 /** @hidden */
 
-const _log$6 = debug__default("squatch-js:widget");
+const _log$7 = debug__default("squatch-js:widget");
 /*
  * The Widget class is the base class for the different widget types available
  *
@@ -434,7 +499,7 @@ const _log$6 = debug__default("squatch-js:widget");
 
 class Widget {
   constructor(params) {
-    _log$6("widget initializing ...");
+    _log$7("widget initializing ...");
 
     this.content = params.content === "error" ? this._error(params.rsCode) : params.content;
     this.type = params.type;
@@ -486,9 +551,9 @@ class Widget {
     }
 
     this.analyticsApi.pushAnalyticsLoadEvent(params).then(response => {
-      _log$6(`${params.engagementMedium} loaded event recorded.`);
+      _log$7(`${params.engagementMedium} loaded event recorded.`);
     }).catch(ex => {
-      _log$6(new Error(`pushAnalyticsLoadEvent() ${ex}`));
+      _log$7(new Error(`pushAnalyticsLoadEvent() ${ex}`));
     });
   }
 
@@ -501,9 +566,9 @@ class Widget {
         engagementMedium: sqh.mode.widgetMode,
         shareMedium: medium
       }).then(response => {
-        _log$6(`${sqh.mode.widgetMode} share ${medium} event recorded. ${response}`);
+        _log$7(`${sqh.mode.widgetMode} share ${medium} event recorded. ${response}`);
       }).catch(ex => {
-        _log$6(new Error(`pushAnalyticsLoadEvent() ${ex}`));
+        _log$7(new Error(`pushAnalyticsLoadEvent() ${ex}`));
       });
     }
   }
@@ -516,9 +581,9 @@ class Widget {
         userId: sqh.analytics.attributes.userId,
         emailList
       }).then(response => {
-        _log$6(`Sent email invites to share ${emailList}. ${response}`);
+        _log$7(`Sent email invites to share ${emailList}. ${response}`);
       }).catch(ex => {
-        _log$6(new Error(`invite() ${ex}`));
+        _log$7(new Error(`invite() ${ex}`));
       });
     }
   }
@@ -607,6 +672,7 @@ class Widget {
         email: email || null,
         firstName: firstName || null,
         lastName: lastName || null,
+        // FIXME: Double check this
         id: this.context.user.id,
         accountId: this.context.user.accountId
       };
@@ -628,6 +694,13 @@ class Widget {
         widgetType: this.type,
         jwt
       });
+    } else if (this.context.type === "passwordless") {
+      response = this.widgetApi.render({
+        user: undefined,
+        engagementMedium,
+        widgetType: this.type,
+        jwt: undefined
+      });
     } else {
       throw new Error("can't reload an error widget");
     }
@@ -662,7 +735,7 @@ class Widget {
     }).catch(({
       message
     }) => {
-      _log$6(`${message}`);
+      _log$7(`${message}`);
     });
   }
 
@@ -699,7 +772,7 @@ function domready(targetDoc, fn) {
 
 // @ts-check
 
-const _log$5 = debug__default("squatch-js:EMBEDwidget");
+const _log$6 = debug__default("squatch-js:EMBEDwidget");
 /**
  * An EmbedWidget is displayed inline in part of your page.
  *
@@ -717,22 +790,22 @@ class EmbedWidget extends Widget {
       // selector is a string
       element = document.querySelector(container);
 
-      _log$5("loading widget with selector", element); // selector is an HTML element
+      _log$6("loading widget with selector", element); // selector is an HTML element
 
     } else if (container instanceof HTMLElement) {
       element = container;
 
-      _log$5("loading widget with container", element); // garbage container found
+      _log$6("loading widget with container", element); // garbage container found
 
     } else if (container) {
       element = null;
 
-      _log$5("container must be an HTMLElement or string", container); // find element on page
+      _log$6("container must be an HTMLElement or string", container); // find element on page
 
     } else {
       element = document.querySelector("#squatchembed") || document.querySelector(".squatchembed");
 
-      _log$5("loading widget with default selector", element);
+      _log$6("loading widget with default selector", element);
     }
 
     if (!(element instanceof HTMLElement)) throw new Error(`element with selector '${container}' not found.'`);
@@ -798,7 +871,7 @@ class EmbedWidget extends Widget {
       if (!this.context.container) {
         this._loadEvent(_sqh);
 
-        _log$5("loaded");
+        _log$6("loaded");
       }
     });
   } // Un-hide if element is available and refresh data
@@ -807,7 +880,7 @@ class EmbedWidget extends Widget {
   open() {
     var _this$frame, _this$frame$contentDo, _this$frame2, _this$frame2$contentW, _this$frame3, _this$frame3$contentW;
 
-    if (!this.frame) return _log$5("no target element to open");
+    if (!this.frame) return _log$6("no target element to open");
     this.element.style.visibility = "unset";
     this.element.style.height = "auto";
     this.element.style["overflow-y"] = "auto";
@@ -817,16 +890,16 @@ class EmbedWidget extends Widget {
 
     this._loadEvent(_sqh);
 
-    _log$5("loaded");
+    _log$6("loaded");
   }
 
   close() {
-    if (!this.frame) return _log$5("no target element to close");
+    if (!this.frame) return _log$6("no target element to close");
     this.element.style.visibility = "hidden";
     this.element.style.height = "0";
     this.element.style["overflow-y"] = "hidden";
 
-    _log$5("Embed widget closed");
+    _log$6("Embed widget closed");
   }
 
   _error(rs, mode = "embed", style = "") {
@@ -837,7 +910,7 @@ class EmbedWidget extends Widget {
 
 // @ts-check
 
-const _log$4 = debug__default("squatch-js:POPUPwidget");
+const _log$5 = debug__default("squatch-js:POPUPwidget");
 /**
  * The PopupWidget is used to display popups (also known as "Modals").
  * Popups widgets are rendered on top of other elements in a page.
@@ -855,9 +928,9 @@ class PopupWidget extends Widget {
       this.triggerElement
       /* HTMLButton */
       = document.querySelector(trigger);
-      if (trigger && !this.triggerElement) _log$4("No element found with trigger selector", trigger);
+      if (trigger && !this.triggerElement) _log$5("No element found with trigger selector", trigger);
     } catch (_unused) {
-      _log$4("Not a valid selector", trigger);
+      _log$5("Not a valid selector", trigger);
     } // Trigger is optional
 
 
@@ -899,7 +972,7 @@ class PopupWidget extends Widget {
     frameDoc.write(`<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"></script>`);
     frameDoc.close();
 
-    _log$4("Popup template loaded into iframe");
+    _log$5("Popup template loaded into iframe");
 
     this._setupResizeHandler();
   }
@@ -972,7 +1045,7 @@ class PopupWidget extends Widget {
 
       this._loadEvent(_sqh);
 
-      _log$4("Popup opened");
+      _log$5("Popup opened");
     });
   }
 
@@ -980,7 +1053,7 @@ class PopupWidget extends Widget {
     this.popupdiv.style.visibility = "hidden";
     this.popupdiv.style.top = "-2000px";
 
-    _log$4("Popup closed");
+    _log$5("Popup closed");
   }
 
   _clickedOutside({
@@ -998,7 +1071,7 @@ class PopupWidget extends Widget {
 
 }
 
-const _log$3 = debug("squatch-js:CTAwidget");
+const _log$4 = debug("squatch-js:CTAwidget");
 /**
  * A CtaWidget is displayed on top of your page
  *
@@ -1009,7 +1082,7 @@ const _log$3 = debug("squatch-js:CTAwidget");
 
 class CtaWidget extends PopupWidget {
   constructor(params, opts) {
-    _log$3("CTA constructor");
+    _log$4("CTA constructor");
 
     const ctaElement = document.createElement("div");
     ctaElement.id = "cta";
@@ -1037,7 +1110,7 @@ class CtaWidget extends PopupWidget {
     this.ctaFrame.setAttribute("style", `border:0; background-color:transparent; position:fixed; display:none;${this.side}${this.position}`);
     document.body.appendChild(this.ctaFrame);
 
-    _log$3("ctaframe appended to body");
+    _log$4("ctaframe appended to body");
   }
 
   load() {
@@ -1101,10 +1174,10 @@ class CtaWidget extends PopupWidget {
           });
           ro.observe(ctaContainer);
 
-          _log$3("CTA template loaded into iframe");
+          _log$4("CTA template loaded into iframe");
         });
       } else {
-        _log$3(new Error("CTA element not found in theme"));
+        _log$4(new Error("CTA element not found in theme"));
       }
     });
   }
@@ -1127,7 +1200,7 @@ class CtaWidget extends PopupWidget {
 
 }
 
-const _log$2 = debug__default("squatch-js:widgets");
+const _log$3 = debug__default("squatch-js:widgets");
 /**
  *
  * `Widgets` is a factory for creating widgets. It's possible to build your own widgets using the
@@ -1191,7 +1264,7 @@ class Widgets {
         user: response.user
       };
     } catch (err) {
-      _log$2(err);
+      _log$3(err);
 
       if (err.apiErrorCode) {
         this._renderErrorWidget(err, config.engagementMedium);
@@ -1227,7 +1300,7 @@ class Widgets {
       return {
         widget: this._renderWidget(response, clean, {
           type: "upsert",
-          user: clean.user,
+          user: clean.user || null,
           engagementMedium: config.engagementMedium,
           container: config.container,
           trigger: config.trigger
@@ -1235,7 +1308,7 @@ class Widgets {
         user: response.user
       };
     } catch (err) {
-      _log$2(err);
+      _log$3(err);
 
       if (err.apiErrorCode) {
         this._renderErrorWidget(err, config.engagementMedium);
@@ -1263,19 +1336,26 @@ class Widgets {
 
   async render(config) {
     const raw = config;
-    const clean = validateWidgetConfig(raw);
+    const clean = validatePasswordlessConfig(raw);
 
     try {
-      const response = await this.api.cookieUser(clean);
-      return {
-        widget: this._renderWidget({
-          template: response
-        }, clean, {
-          type: "cookie",
-          engagementMedium: clean.engagementMedium
-        }),
-        user: response.user
-      };
+      // TODO: Flagging default behaviour change
+      // cookieUser returns a deprecated error from the API on the latest squatchJs version
+      // More suitable for no auth render?
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      const refParam = urlParams.get("_saasquatch") || "";
+
+      if (!config.showOnReferral || refParam) {
+        const response = await this.api.render(clean);
+        return {
+          widget: this._renderWidget(response, clean, {
+            type: "passwordless",
+            engagementMedium: clean.engagementMedium
+          }),
+          user: response.user
+        };
+      }
     } catch (err) {
       if (err.apiErrorCode) {
         this._renderErrorWidget(err, clean.engagementMedium);
@@ -1298,7 +1378,7 @@ class Widgets {
 
     if (typeof input === "function") {
       this.api.squatchReferralCookie().then((...args) => input(...args)).catch(ex => {
-        _log$2("Autofill error", ex);
+        _log$3("Autofill error", ex);
 
         throw ex;
       });
@@ -1313,7 +1393,7 @@ class Widgets {
       // Only use the first element found
       elem = elems[0];
     } else {
-      _log$2("Element id/class or function missing");
+      _log$3("Element id/class or function missing");
 
       throw new Error("Element id/class or function missing");
     }
@@ -1351,7 +1431,7 @@ class Widgets {
 
 
   _renderWidget(response, config, context) {
-    _log$2("Rendering Widget...");
+    _log$3("Rendering Widget...");
 
     if (!response) throw new Error("Unable to get a response");
     let widget;
@@ -1374,9 +1454,9 @@ class Widgets {
             displayOnLoad = rule.displayOnLoad;
             displayCTA = rule.showAsCTA;
 
-            _log$2(`Display ${rule.widgetType} on ${rule.url}`);
+            _log$3(`Display ${rule.widgetType} on ${rule.url}`);
           } else {
-            _log$2(`Don't display ${rule.widgetType} when no referral on widget rule match ${rule.url}`);
+            _log$3(`Don't display ${rule.widgetType} when no referral on widget rule match ${rule.url}`);
           }
         }
       });
@@ -1385,20 +1465,20 @@ class Widgets {
     if (opts.conversionUrls) {
       opts.conversionUrls.forEach(rule => {
         if (response.user.referredBy && Widgets._matchesUrl(rule)) {
-          _log$2("This is a conversion URL", rule);
+          _log$3("This is a conversion URL", rule);
         }
       });
     }
 
     if (opts.fuelTankAutofillUrls) {
-      _log$2("We found a fuel tank autofill!");
+      _log$3("We found a fuel tank autofill!");
 
       opts.fuelTankAutofillUrls.forEach(({
         url,
         formSelector
       }) => {
         if (Widgets._matchesUrl(url)) {
-          _log$2("Fuel Tank URL matches");
+          _log$3("Fuel Tank URL matches");
 
           if (response.user.referredBy && response.user.referredBy.code) {
             const formAutofill = document.querySelector(formSelector);
@@ -1406,7 +1486,7 @@ class Widgets {
             if (formAutofill) {
               formAutofill.value = response.user.referredBy.referredReward.fuelTankCode || "";
             } else {
-              _log$2(new Error(`Element with id/class ${formSelector} was not found.`));
+              _log$3(new Error(`Element with id/class ${formSelector} was not found.`));
             }
           }
         }
@@ -1421,7 +1501,7 @@ class Widgets {
       widget.load();
       if (displayOnLoad) widget.open();
     } else if (displayCTA) {
-      _log$2("display CTA");
+      _log$3("display CTA");
 
       const side = opts.cta.content.buttonSide;
       const position = opts.cta.content.buttonPosition;
@@ -1432,7 +1512,7 @@ class Widgets {
       widget.load();
       if (displayOnLoad) widget.open();
     } else {
-      _log$2("display popup on load");
+      _log$3("display popup on load");
 
       widget = new PopupWidget(params);
       widget.load();
@@ -1456,7 +1536,7 @@ class Widgets {
       message
     } = props;
 
-    _log$2(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
+    _log$3(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
 
     const params = {
       content: "error",
@@ -1986,7 +2066,7 @@ var URLSearchParams$1 = self.URLSearchParams;
 
 /** @hidden */
 
-const _log$1 = debug__default("squatch-js");
+const _log$2 = debug__default("squatch-js");
 
 const isObject = item => typeof item === "object" && !Array.isArray(item);
 
@@ -2039,7 +2119,7 @@ function _pushCookie() {
     try {
       paramsJSON = JSON.parse(b64decode(refParam));
     } catch (error) {
-      _log$1("Unable to decode params", error); // don't merge invalid params
+      _log$2("Unable to decode params", error); // don't merge invalid params
 
 
       return;
@@ -2048,26 +2128,26 @@ function _pushCookie() {
     try {
       existingCookie = JSON.parse(b64decode(Cookies.get("_saasquatch")));
 
-      _log$1("existing cookie", existingCookie);
+      _log$2("existing cookie", existingCookie);
     } catch (error) {
-      _log$1("Unable to retrieve cookie", error);
+      _log$2("Unable to retrieve cookie", error);
     } // don't merge if there's no existing object
 
 
     try {
       const domain = getTopDomain();
 
-      _log$1("domain retrieved:", domain);
+      _log$2("domain retrieved:", domain);
 
       if (existingCookie) {
         const newCookie = deepMerge(existingCookie, paramsJSON);
         reEncodedCookie = b64encode(JSON.stringify(newCookie));
 
-        _log$1("cookie to store:", newCookie);
+        _log$2("cookie to store:", newCookie);
       } else {
         reEncodedCookie = b64encode(JSON.stringify(paramsJSON));
 
-        _log$1("cookie to store:", paramsJSON);
+        _log$2("cookie to store:", paramsJSON);
       }
 
       Cookies.set("_saasquatch", reEncodedCookie, {
@@ -2078,11 +2158,83 @@ function _pushCookie() {
         path: "/"
       });
     } catch (error) {
-      _log$1("Unable to set cookie", error);
+      _log$2("Unable to set cookie", error);
     }
   }
 }
 
+/** @hidden */
+
+const _log$1 = debug__default("squatch-js");
+
+function _getConfig(configIn) {
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  const refParam = urlParams.get("_saasquatchExtra") || "";
+
+  if (!refParam) {
+    _log$1("No _saasquatchExtra param");
+
+    return;
+  }
+
+  let raw;
+
+  try {
+    raw = JSON.parse(b64decode(refParam));
+  } catch (e) {
+    _log$1("Unable to decode _saasquatchExtra config");
+
+    return;
+  }
+
+  const {
+    domain,
+    tenantAlias,
+    widgetConfig
+  } = convertExtraToConfig(raw);
+
+  if (!domain || !tenantAlias || !widgetConfig) {
+    _log$1("_saasquatchExtra did not have an expected structure");
+
+    return undefined;
+  }
+
+  const {
+    autoPopupWidgetType
+  } = widgetConfig,
+        rest = _objectWithoutPropertiesLoose(widgetConfig, ["autoPopupWidgetType"]);
+
+  return {
+    widgetConfig: _extends({
+      widgetType: autoPopupWidgetType
+    }, rest),
+    squatchConfig: _extends({}, configIn ? {
+      configIn
+    } : {}, {
+      domain,
+      tenantAlias
+    })
+  };
+}
+/**
+ * Converts _saasquatchExtra into
+ * @param obj
+ */
+
+function convertExtraToConfig(obj) {
+  var _obj$domain;
+
+  const domain = Object.keys(obj || {})[0];
+  const tenantAlias = Object.keys((obj == null ? void 0 : obj[domain]) || {})[0];
+  const widgetConfig = obj == null ? void 0 : (_obj$domain = obj[domain]) == null ? void 0 : _obj$domain[tenantAlias];
+  return {
+    domain,
+    tenantAlias,
+    widgetConfig
+  };
+}
+
 // @ts-check
 function help() {
   console.log(`Having trouble using Squatch.js? Go to https://docs.referralsaasquatch.com/developer/ for tutorials, references and error codes.`);
@@ -2136,6 +2288,35 @@ function widgets() {
 function events() {
   return _events;
 }
+/**
+ * Entry-point for high level API to render a widget using the instance of {@link Widgets} created when you call {@link #init init}.
+ */
+
+function widget(widgetConfig) {
+  var _widgets2;
+
+  return (_widgets2 = widgets()) == null ? void 0 : _widgets2.render(widgetConfig);
+}
+/**
+ * Initial concept for automatic widget rendering
+ *
+ * - `saasquatchExtra` utm param carries widgetIdent
+ */
+
+function auto(configIn) {
+  const configs = _getConfig(configIn);
+
+  if (configs) {
+    var _widgets3;
+
+    const {
+      squatchConfig,
+      widgetConfig
+    } = configs;
+    init(squatchConfig);
+    return widgetConfig && ((_widgets3 = widgets()) == null ? void 0 : _widgets3.render(widgetConfig));
+  }
+}
 /**
  * Initializes the static `squatch` global. This sets up:
  *
@@ -2240,5 +2421,5 @@ if (typeof document !== "undefined" && !window.SaaSquatchDoNotAutoDrop) {
 
 if (typeof document !== "undefined") asyncLoad();
 
-export { CtaWidget, EmbedWidget, PopupWidget, WidgetApi, Widgets, api, autofill, events, help, init, pushCookie, ready, submitEmail, widgets };
+export { CtaWidget, EmbedWidget, PopupWidget, WidgetApi, Widgets, api, auto, autofill, events, help, init, pushCookie, ready, submitEmail, widget, widgets };
 //# sourceMappingURL=squatch.esm.js.map