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

package/dist/squatch.esm.js

@@ -20,7 +20,7 @@ function k(o) {
   }), t;
 }
 /*! js-cookie v3.0.5 | MIT */
-function q(o) {
+function S(o) {
   for (var t = 1; t < arguments.length; t++) {
     var e = arguments[t];
     for (var n in e)
@@ -28,7 +28,7 @@ function q(o) {
   }
   return o;
 }
-var Te = {
+var $e = {
   read: function(o) {
     return o[0] === '"' && (o = o.slice(1, -1)), o.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent);
   },
@@ -42,7 +42,7 @@ var Te = {
 function V(o, t) {
   function e(i, s, r) {
     if (!(typeof document > "u")) {
-      r = q({}, t, r), typeof r.expires == "number" && (r.expires = new Date(Date.now() + r.expires * 864e5)), r.expires && (r.expires = r.expires.toUTCString()), i = encodeURIComponent(i).replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent).replace(/[()]/g, escape);
+      r = S({}, t, r), typeof r.expires == "number" && (r.expires = new Date(Date.now() + r.expires * 864e5)), r.expires && (r.expires = r.expires.toUTCString()), i = encodeURIComponent(i).replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent).replace(/[()]/g, escape);
       var a = "";
       for (var d in r)
         r[d] && (a += "; " + d, r[d] !== !0 && (a += "=" + r[d].split(";")[0]));
@@ -71,16 +71,16 @@ function V(o, t) {
         e(
           i,
           "",
-          q({}, s, {
+          S({}, s, {
             expires: -1
           })
         );
       },
       withAttributes: function(i) {
-        return V(this.converter, q({}, this.attributes, i));
+        return V(this.converter, S({}, this.attributes, i));
       },
       withConverter: function(i) {
-        return V(q({}, this.converter, i), this.attributes);
+        return V(S({}, this.converter, i), this.attributes);
       }
     },
     {
@@ -89,9 +89,9 @@ function V(o, t) {
     }
   );
 }
-var M = V(Te, { path: "/" });
-const A = "https://app.referralsaasquatch.com", X = "https://fast.ssqt.io/npm", S = "squatch", z = "impact";
-function W(o) {
+var P = V($e, { path: "/" });
+const A = "https://app.referralsaasquatch.com", X = "https://fast.ssqt.io/npm", q = "squatch", z = "impact";
+function U(o) {
   if (typeof o != "object") throw new Error("config must be an object");
   const t = window.squatchTenant, e = K(), n = {
     tenantAlias: (o == null ? void 0 : o.tenantAlias) || t,
@@ -112,7 +112,7 @@ function W(o) {
 function I(o) {
   return typeof o == "object" && !Array.isArray(o) && o !== null;
 }
-function Ue(o) {
+function Te(o) {
   if (o && /^[a-z]{2}_(?:[A-Z]{2}|[0-9]{3})$/.test(o))
     return o;
 }
@@ -125,7 +125,7 @@ function he(o) {
   if (!I(o)) throw new Error("Widget properties must be an object");
   return o;
 }
-function $() {
+function W() {
   return window.impactToken || window.squatchToken;
 }
 function K() {
@@ -142,8 +142,8 @@ function J(o) {
   }
   return { message: o };
 }
-async function We(o, t, e, n) {
-  const i = n || $(), s = {
+async function Ue(o, t, e, n) {
+  const i = n || W(), s = {
     Accept: "application/json",
     "Content-Type": "application/json",
     ...i ? { Authorization: `Bearer ${i}` } : {},
@@ -161,11 +161,11 @@ async function We(o, t, e, n) {
     throw r;
   }
 }
-async function $e(o, t = "") {
+async function We(o, t = "") {
   const e = {
     Accept: "application/json",
     "Content-Type": "application/json"
-  }, n = t || $();
+  }, n = t || W();
   n && (e["X-SaaSquatch-User-Token"] = n);
   try {
     const i = await fetch(o, {
@@ -183,7 +183,7 @@ async function Q(o, t, e) {
   const n = {
     Accept: "application/json",
     "Content-Type": "application/json"
-  }, i = e || $();
+  }, i = e || W();
   i && (n["X-SaaSquatch-User-Token"] = i);
   try {
     const s = await fetch(o, {
@@ -197,12 +197,12 @@ async function Q(o, t, e) {
     throw s;
   }
 }
-async function qe(o, t, e) {
+async function Se(o, t, e) {
   const n = {
     Accept: "application/json",
     "Content-Type": "application/json",
     "X-SaaSquatch-Referrer": window ? window.location.href : ""
-  }, i = e || $();
+  }, i = e || W();
   i && (n["X-SaaSquatch-User-Token"] = i);
   try {
     const s = await fetch(o, {
@@ -217,7 +217,7 @@ async function qe(o, t, e) {
     throw s;
   }
 }
-const Se = `
+const qe = `
   query renderWidget ($user: UserIdInput, $engagementMedium: UserEngagementMedium, $widgetType: WidgetType, $locale: RSLocale) {
     renderWidget(user: $user, engagementMedium: $engagementMedium, widgetType: $widgetType, locale: $locale) {
       template
@@ -254,7 +254,7 @@ class Z {
     l(this, "domain");
     l(this, "npmCdn");
     l(this, "referralCookie", this.squatchReferralCookie);
-    const n = W(t);
+    const n = U(t);
     this.tenantAlias = n.tenantAlias, this.domain = n.domain, this.npmCdn = n.npmCdn;
   }
   /**
@@ -282,8 +282,8 @@ class Z {
       widgetType: i,
       engagementMedium: s,
       locale: a
-    }), m = `/api/v1/${c}/widget/account/${h}/user/${u}/upsert${p}`, g = this.domain + m, w = (M || window.Cookies).get("_saasquatch");
-    return w && (d.cookies = w), qe(g, JSON.stringify(d), r);
+    }), m = `/api/v1/${c}/widget/account/${h}/user/${u}/upsert${p}`, g = this.domain + m, w = (P || window.Cookies).get("_saasquatch");
+    return w && (d.cookies = w), Se(g, JSON.stringify(d), r);
   }
   /**
    * Requests widget template
@@ -299,13 +299,13 @@ class Z {
    * @return {Promise} template html if true.
    */
   render(t) {
-    const n = he(t), { widgetType: i, engagementMedium: s = "POPUP", jwt: r, user: a } = n, d = encodeURIComponent(this.tenantAlias), c = a != null && a.accountId ? encodeURIComponent(a.accountId) : null, h = a != null && a.id ? encodeURIComponent(a.id) : null, u = n.locale ?? Ue(navigator.language.replace(/\-/g, "_")), p = `/api/v1/${d}/graphql`, m = this.domain + p;
+    const n = he(t), { widgetType: i, engagementMedium: s = "POPUP", jwt: r, user: a } = n, d = encodeURIComponent(this.tenantAlias), c = a != null && a.accountId ? encodeURIComponent(a.accountId) : null, h = a != null && a.id ? encodeURIComponent(a.id) : null, u = n.locale ?? Te(navigator.language.replace(/\-/g, "_")), p = `/api/v1/${d}/graphql`, m = this.domain + p;
     return new Promise(async (g, w) => {
       var b;
       try {
-        const f = await We(
+        const f = await Ue(
           m,
-          Se,
+          qe,
           {
             user: h && c ? { id: h, accountId: c } : null,
             engagementMedium: s,
@@ -326,7 +326,7 @@ class Z {
    * @return {Promise<ReferralCookie>} code referral code if true.
    */
   async squatchReferralCookie() {
-    const t = encodeURIComponent(this.tenantAlias), e = (M || window.Cookies).get("_saasquatch") || "", n = e ? `?cookies=${encodeURIComponent(e)}` : "", i = `${this.domain}/a/${t}/widgets/squatchcookiejson${n}`, s = await $e(i);
+    const t = encodeURIComponent(this.tenantAlias), e = (P || window.Cookies).get("_saasquatch") || "", n = e ? `?cookies=${encodeURIComponent(e)}` : "", i = `${this.domain}/a/${t}/widgets/squatchcookiejson${n}`, s = await We(i);
     return Promise.resolve({
       ...s,
       encodedCookie: e
@@ -378,7 +378,7 @@ class ue {
   constructor(t) {
     l(this, "domain");
     var i;
-    const n = Pe(t);
+    const n = Me(t);
     this.domain = (n == null ? void 0 : n.domain) || ((i = K()) == null ? void 0 : i.domain) || A;
   }
   pushAnalyticsLoadEvent(t) {
@@ -391,7 +391,7 @@ class ue {
     return Q(d, JSON.stringify({}));
   }
 }
-function Pe(o) {
+function Me(o) {
   if (!I(o)) throw new Error("'options' should be an object");
   return o;
 }
@@ -649,7 +649,7 @@ const pe = ({
   `}
     </div>
   `;
-}, Me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   getSkeleton: pe
 }, Symbol.toStringTag, { value: "Module" })), y = k("squatch-js:widget");
@@ -664,7 +664,12 @@ class ge {
     l(this, "container");
     l(this, "loadEventListener", null);
     var e;
-    y("widget initializing ..."), this.content = t.content === "error" ? this._error(t.rsCode) : t.content, this.type = t.type, this.widgetApi = t.api, this.npmCdn = t.npmCdn, this.analyticsApi = new ue({ domain: t.domain }), this.context = t.context, this.container = ((e = t.context) == null ? void 0 : e.container) || t.container;
+    y("widget initializing ..."), this.content = t.content === "error" ? this._error({
+      rsCode: t.rsCode,
+      apiErrorCode: t.apiErrorCode,
+      statusCode: t.statusCode,
+      message: t.errorMessage
+    }) : t.content, this.type = t.type, this.widgetApi = t.api, this.npmCdn = t.npmCdn, this.analyticsApi = new ue({ domain: t.domain }), this.context = t.context, this.container = ((e = t.context) == null ? void 0 : e.container) || t.container;
   }
   _findElement() {
     let t;
@@ -749,6 +754,7 @@ class ge {
     });
   }
   _error(t, e = "modal", n = "") {
+    const { rsCode: i, apiErrorCode: s, statusCode: r, message: a } = t || {};
     return `<!DOCTYPE html>
     <!--[if IE 7]><html class="ie7 oldie" lang="en"><![endif]-->
     <!--[if IE 8]><html class="ie8 oldie" lang="en"><![endif]-->
@@ -757,6 +763,31 @@ class ge {
       <link rel="stylesheet" media="all" href="https://fast.ssqt.io/assets/css/widget/errorpage.css">
       <style>
         ${n}
+        .error-details {
+          margin-top: 16px;
+          padding: 12px;
+          background: #f8f8f8;
+          border-radius: 4px;
+          text-align: left;
+          font-size: 13px;
+          color: #666;
+        }
+        .error-details dt {
+          font-weight: 600;
+          color: #333;
+          margin-top: 8px;
+        }
+        .error-details dt:first-child {
+          margin-top: 0;
+        }
+        .error-details dd {
+          margin: 4px 0 0 0;
+          word-break: break-word;
+          font-family: monospace;
+        }
+        .error-details dd.message {
+          font-family: inherit;
+        }
       </style>
     </head>
     <body>
@@ -768,14 +799,18 @@ class ge {
         </div>
         <div class="errorbody">
           <div class="sadface"><img src="https://fast.ssqt.io/assets/images/face.png"></div>
-          <h4>Our referral program is temporarily unavailable.</h4><br>
+          <h4>Our referral program is temporarily unavailable.</h4>
           <p>Please reload the page or check back later.</p>
-          <p>If the persists please contact our support team.</p>
-          <br>
-          <br>
-          <div class="right-align errtxt">
-            Error Code: ${t}
-          </div>
+          <p>If the problem persists please contact our support team.</p>
+
+          ${r || s || i || a ? `
+          <dl class="error-details">
+            ${r ? `<dt>Status Code</dt><dd>${r}</dd>` : ""}
+            ${s ? `<dt>API Error Code</dt><dd>${s}</dd>` : ""}
+            ${i ? `<dt>RS Code</dt><dd>${i}</dd>` : ""}
+            ${a ? `<dt>Message</dt><dd class="message">${a}</dd>` : ""}
+          </dl>
+          ` : ""}
         </div>
       </div>
     </body>
@@ -987,7 +1022,7 @@ class O extends ge {
     return !!this.context.user && (e || n);
   }
 }
-const T = k("squatch-js:POPUPwidget");
+const $ = k("squatch-js:POPUPwidget");
 let R = 0;
 class D extends ge {
   constructor(e, n = ".squatchpop") {
@@ -1005,9 +1040,9 @@ class D extends ge {
     if (!this.trigger) return;
     let e;
     try {
-      e = document.querySelector(this.trigger) || document.querySelector(".impactpop"), this.trigger && !e && T("No element found with trigger selector", this.trigger);
+      e = document.querySelector(this.trigger) || document.querySelector(".impactpop"), this.trigger && !e && $("No element found with trigger selector", this.trigger);
     } catch {
-      T("Not a valid selector", this.trigger);
+      $("Not a valid selector", this.trigger);
     }
     e && (e.onclick = () => {
       this.open();
@@ -1054,7 +1089,7 @@ class D extends ge {
       ${this._getSkeletonPreloadHTML(i, (_ = e == null ? void 0 : e.color) == null ? void 0 : _.backgroundColor)}
       ${this.content}
       <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
-      `), h.close(), T("Popup template loaded into iframe"), await this._setupResizeHandler(s);
+      `), h.close(), $("Popup template loaded into iframe"), await this._setupResizeHandler(s);
   }
   async _setupResizeHandler(e) {
     const { contentWindow: n } = e;
@@ -1084,7 +1119,7 @@ class D extends ge {
     Y(a, () => {
       var c;
       const d = r.squatch || r.widgetIdent;
-      (c = s.contentDocument) == null || c.dispatchEvent(new CustomEvent("sq:refresh")), this.context.user ? (this._loadEvent(d), T("Popup opened")) : this._attachLoadEventListener(a, d);
+      (c = s.contentDocument) == null || c.dispatchEvent(new CustomEvent("sq:refresh")), this.context.user ? (this._loadEvent(d), $("Popup opened")) : this._attachLoadEventListener(a, d);
     });
   }
   close() {
@@ -1092,7 +1127,7 @@ class D extends ge {
     e != null && e.contentDocument && this._detachLoadEventListener(e.contentDocument);
     const n = this.container ? this._findElement() : document.body, s = (n.shadowRoot || n).querySelector(`#${this.id}`);
     if (!s) throw new Error("Could not determine container div");
-    s.close(), T("Popup closed");
+    s.close(), $("Popup closed");
   }
   _clickedOutside({ target: e }) {
   }
@@ -1137,7 +1172,7 @@ class j {
      * @default "https://fast.ssqt.io/npm"
      */
     l(this, "npmCdn");
-    const e = W(t);
+    const e = U(t);
     this.tenantAlias = e.tenantAlias, this.domain = e.domain, this.npmCdn = e.npmCdn, this.api = new Z(e);
   }
   /**
@@ -1302,19 +1337,22 @@ class j {
    * @returns {void}
    */
   _renderErrorWidget(t, e = "POPUP") {
-    const { apiErrorCode: n, rsCode: i, message: s } = t;
-    v(new Error(`${n} (${i}) ${s}`));
-    const r = {
+    const { apiErrorCode: n, rsCode: i, statusCode: s, message: r } = t;
+    v(new Error(`${n} (${i}) ${r}`));
+    const a = {
       content: "error",
       rsCode: i,
+      apiErrorCode: n,
+      statusCode: s,
+      errorMessage: r,
       api: this.api,
       domain: this.domain,
       npmCdn: this.npmCdn,
       type: "ERROR_WIDGET",
       context: { type: "error" }
     };
-    let a;
-    e === "EMBED" ? (a = new O(r), a.load()) : e === "POPUP" && (a = new D(r), a.load());
+    let d;
+    e === "EMBED" ? (d = new O(a), d.load()) : e === "POPUP" && (d = new D(a), d.load());
   }
   /**
    * @hidden
@@ -1345,7 +1383,7 @@ class De {
   constructor(t) {
     l(this, "tenantAlias");
     l(this, "domain");
-    const n = W(t);
+    const n = U(t);
     this.tenantAlias = n.tenantAlias, this.domain = n.domain;
   }
   /**
@@ -1377,9 +1415,9 @@ function Ne(o) {
 }
 function Fe() {
   var i;
-  const o = window[z] ? z : S, t = ((i = window["_" + o]) == null ? void 0 : i.ready) || [], e = window.impactOnReady || window.squatchOnReady, n = [...t, e].filter((s) => !!s);
+  const o = window[z] ? z : q, t = ((i = window["_" + o]) == null ? void 0 : i.ready) || [], e = window.impactOnReady || window.squatchOnReady, n = [...t, e].filter((s) => !!s);
   setTimeout(() => {
-    window[S] && (window[z] = window[S], n.forEach((s) => s()), window[S]._auto(), window["_" + o] = void 0, delete window["_" + o]);
+    window[q] && (window[z] = window[q], n.forEach((s) => s()), window[q]._auto(), window["_" + o] = void 0, delete window["_" + o]);
   }, 0);
 }
 const E = k("squatch-js"), re = (o) => typeof o == "object" && !Array.isArray(o), me = (o, t) => {
@@ -1421,7 +1459,7 @@ function Be() {
       return;
     }
     try {
-      i = JSON.parse(N(M.get("_saasquatch"))), E("existing cookie", i);
+      i = JSON.parse(N(P.get("_saasquatch"))), E("existing cookie", i);
     } catch (r) {
       E("Unable to retrieve cookie", r);
     }
@@ -1432,7 +1470,7 @@ function Be() {
         s = ae(JSON.stringify(a)), E("cookie to store:", a);
       } else
         s = ae(JSON.stringify(n)), E("cookie to store:", n);
-      M.set("_saasquatch", s, {
+      P.set("_saasquatch", s, {
         expires: 365,
         secure: !1,
         sameSite: "Lax",
@@ -1444,26 +1482,26 @@ function Be() {
     }
   }
 }
-const P = k("squatch-js");
+const M = k("squatch-js");
 function Je() {
   var u;
   const o = window.location.search, e = new URLSearchParams(o).get("_saasquatchExtra") || "";
   if (!e) {
-    P("No _saasquatchExtra param");
+    M("No _saasquatchExtra param");
     return;
   }
-  const n = W({
+  const n = U({
     tenantAlias: "UNKNOWN"
   });
   if (!n.domain) {
-    P("domain must be provided in config to use _saasquatchExtra");
+    M("domain must be provided in config to use _saasquatchExtra");
     return;
   }
   let i;
   try {
     i = JSON.parse(N(e));
   } catch {
-    P("Unable to decode _saasquatchExtra config");
+    M("Unable to decode _saasquatchExtra config");
     return;
   }
   function s(p) {
@@ -1471,7 +1509,7 @@ function Je() {
   }
   const r = s(n.domain), a = Object.keys((i == null ? void 0 : i[r]) || {})[0], d = (u = i == null ? void 0 : i[r]) == null ? void 0 : u[a];
   if (!d) {
-    P("_saasquatchExtra did not have an expected structure");
+    M("_saasquatchExtra did not have an expected structure");
     return;
   }
   const { autoPopupWidgetType: c, ...h } = d;
@@ -1582,8 +1620,8 @@ class fe extends HTMLElement {
      * @returns Instance of either {@link EmbedWidget} or {@link PopupWidget} depending on `this.type`
      */
     l(this, "setErrorWidget", (e) => {
-      var i;
-      const n = {
+      var d;
+      const n = e instanceof Error ? e.message : e == null ? void 0 : e.message, i = e instanceof Error || e == null ? void 0 : e.apiErrorCode, s = e instanceof Error || e == null ? void 0 : e.rsCode, r = e instanceof Error || e == null ? void 0 : e.statusCode, a = {
         api: this.widgetApi,
         content: "error",
         context: {
@@ -1591,15 +1629,19 @@ class fe extends HTMLElement {
           container: this.container || void 0
         },
         type: "ERROR_WIDGET",
-        domain: ((i = this.config) == null ? void 0 : i.domain) || A,
+        domain: ((d = this.config) == null ? void 0 : d.domain) || A,
         npmCdn: X,
-        container: this
+        container: this,
+        apiErrorCode: i,
+        rsCode: s,
+        statusCode: r,
+        errorMessage: n
       };
       if (this.type === "EMBED")
-        return new O(n);
+        return new O(a);
       {
-        const s = this.firstChild ? null : void 0;
-        return new D(n, s);
+        const c = this.firstChild ? null : void 0;
+        return new D(a, c);
       }
     });
     l(this, "reload", this.renderWidget);
@@ -1607,7 +1649,7 @@ class fe extends HTMLElement {
     l(this, "hide", this.close);
     this.attachShadow({
       mode: "open"
-    }).innerHTML = "<style>:host { display: block; }</style><slot></slot>", this.config = K(), this.token = $(), this.tenant = window.squatchTenant, this.container = this;
+    }).innerHTML = "<style>:host { display: block; }</style><slot></slot>", this.config = K(), this.token = W(), this.tenant = window.squatchTenant, this.container = this;
   }
   _setupApis(e) {
     var n, i;
@@ -1644,7 +1686,9 @@ class fe extends HTMLElement {
         jwt: this.token
       });
     } catch (i) {
-      return this.setErrorWidget(i instanceof Error ? i : Error(String(i)));
+      return this.setErrorWidget(
+        i
+      );
     }
     return await this.widgetApi.render({
       locale: this.locale,
@@ -1698,7 +1742,7 @@ class fe extends HTMLElement {
   }
   async connectedCallback() {
     this.loaded = !0, this.container = this.getAttribute("container"), this.widgetType = this.getAttribute("widget") || void 0;
-    const e = this.getWidgetType(this.widgetType), { getSkeleton: n } = await Promise.resolve().then(() => Me), i = n({
+    const e = this.getWidgetType(this.widgetType), { getSkeleton: n } = await Promise.resolve().then(() => Pe), i = n({
       height: "100%",
       type: e
     }), s = document.createElement("div");
@@ -1743,7 +1787,7 @@ function et() {
     "Having trouble using Squatch.js? Go to https://docs.referralsaasquatch.com/developer/ for tutorials, references and error codes."
   );
 }
-const U = k("squatch-js");
+const T = k("squatch-js");
 let F = null, H = null, B = null;
 function tt() {
   return F || G({}), F;
@@ -1767,8 +1811,8 @@ function ot() {
   }
 }
 function G(o) {
-  const e = W(o);
-  e.tenantAlias.match("^test") || e.debug ? Ie("squatch-js*") : _e(), U("initializing ..."), F = new Z(e), H = new j(e), B = new De(e), U("Widget API instance", F), U("Widgets instance", H), U("Events API instance", B);
+  const e = U(o);
+  e.tenantAlias.match("^test") || e.debug ? Ie("squatch-js*") : _e(), T("initializing ..."), F = new Z(e), H = new j(e), B = new De(e), T("Widget API instance", F), T("Widgets instance", H), T("Events API instance", B);
 }
 function st(o) {
   o();
@@ -1781,7 +1825,7 @@ function Ke() {
 }
 typeof document < "u" && !window.SaaSquatchDoNotAutoDrop && Ke();
 var ce;
-(ce = window.squatch) != null && ce.init && U(
+(ce = window.squatch) != null && ce.init && T(
   "Squatchjs is being loaded more than once. This may lead to multiple load events being sent, duplicated widgets, and inaccurate analytics."
 );
 typeof document < "u" && Fe();