@sprig-technologies/sprig-browser 2.14.0

package/index.js

@@ -0,0 +1,207 @@
+/* global window */
+
+import { INSTALLATION_METHOD } from './shared/constants';
+class SprigAPI {
+  /**
+   * Triggers displaying specified survey. Does submit answers!
+   * @param {Number} surveyId
+   * @returns
+   */
+  displaySurvey(surveyId) {
+    window.Sprig('displaySurvey', surveyId);
+  }
+
+  /**
+   * Triggers displaying specified survey template. Does not submit answers
+   * @param {String} surveyTemplateId
+   */
+  previewSurvey(surveyTemplateId) {
+    window.Sprig('previewSurvey', surveyTemplateId);
+  }
+
+  /**
+   * Triggers displaying specified survey. Does not submit answers
+   * @param {Number} surveyId
+   */
+  reviewSurvey(surveyId) {
+    window.Sprig('reviewSurvey', surveyId);
+  }
+
+  /**
+   * pauses api interactions
+   */
+  mute() {
+    window.Sprig('mute');
+  }
+
+  /**
+   * restart api interactions
+   */
+  unmute() {
+    window.Sprig('unmute');
+  }
+
+  /**
+   * Manually dismiss an opened survey
+   */
+  dismissActiveSurvey() {
+    window.Sprig('dismissActiveSurvey');
+  }
+
+  /**
+   * Set an arbitrary attribute on the visitor
+   * @param {String} attribute
+   * @param {String} value
+   */
+  setAttribute(attribute, value) {
+    window.Sprig('setAttribute', attribute, value);
+  }
+
+  /**
+   * Set attributes on visitor
+   * @param {Object} attributes
+   */
+  setAttributes(attributes) {
+    window.Sprig('setAttributes', attributes);
+  }
+
+  /**
+   * Set identifiers and attributes on visitor
+   * @param {Object} payload
+   * @param {Object} payload.attributes visitor attributes to set
+   * @param {String} payload.userId userId (optional)
+   * @param {String} payload.anonymousId anonymousId (optional)
+   */
+  identifyAndSetAttributes(payload) {
+    window.Sprig('identifyAndSetAttributes', payload);
+  }
+
+  /**
+   * Remove attributes on visitor
+   * @param {Object} attributes
+   */
+  removeAttributes(attributes) {
+    window.Sprig('removeAttributes', attributes);
+  }
+
+  /**
+   * Add a listener for an event defined in ulEvents
+   * @param {String} event
+   * @param {Function} listener
+   */
+  addListener(event, listener) {
+    window.Sprig('addListener', event, listener);
+  }
+
+  /**
+   * Remove a listener for an event defined in ulEvents
+   * @param {String} event
+   * @param {Function} listener
+   */
+  removeListener(event, listener) {
+    window.Sprig('removeListener', event, listener);
+  }
+
+  /**
+   * Remove all listeners set on Sprig
+   */
+  removeAllListeners() {
+    window.Sprig('removeAllListeners');
+  }
+
+  /**
+   * Attach an email address to visitor
+   */
+  setEmail(email) {
+    window.Sprig('setAttribute', '!email', email);
+  }
+
+  /**
+   * Attach a user id to the visitor
+   */
+  setUserId(userId) {
+    window.Sprig('setUserId', userId);
+  }
+
+  /**
+   * Set a partner anonymous id for future requests.
+   */
+  setPartnerAnonymousId(partnerAnonymousId) {
+    window.Sprig('setPartnerAnonymousId', partnerAnonymousId);
+  }
+
+  /**
+   * track an event to show survey if eligible
+   * @param {String} eventName
+   * @param {Object} metadata
+   * @returns
+   */
+  track(eventName, metadata = {}) {
+    window.Sprig('track', eventName, metadata);
+  }
+
+  /**
+   * optionally set userId and/or anonymousId, track an event to show survey if eligible
+   * @param {Object} payload
+   * @param {String} payload.eventName name of event to track
+  * @param {Object} payload.metadata event metadata (optional)
+   * @param {String} payload.userId userId (optional)
+   * @param {String} payload.anonymousId anonymousId (optional)
+   * @returns
+   */
+  identifyAndTrack(payload) {
+    window.Sprig('identifyAndTrack', payload);
+  }
+
+  /**
+   * @param {String} styleString css string representing the customized styles
+   */
+  applyStyles(styleString) {
+    window.Sprig('applyStyles', styleString);
+  }
+
+  /**
+    set viewport dimensions, in int pixels. necessary if Sprig is installed in an iframe/component defaulting to 0 width and height.
+    * @param {Number} width
+    * @param {Number} height
+  */
+  setWindowDimensions(width, height) {
+    window.Sprig('setWindowDimensions', width, height);
+  }
+
+  /**
+   * clears Sprig from window
+   */
+  teardown() {
+    window.Sprig('teardown');
+  }
+}
+
+export default {
+  /**
+   * Sets up the sprig api and load the sprig sdk on document load
+   * @param {Object} config
+   * @returns {SprigAPI} an instance of the sprig api
+   */
+  configure: (config) => {
+    if (!config.envId && !config.environmentId) {
+      throw new Error('Initialization Error: Sprig configure requires an environmentId');
+    }
+    if (!config.envId) config.envId = config.environmentId; // backwards compatible setting for environment id
+    config.installationMethod = INSTALLATION_METHOD.NPM;
+    if (window.Sprig) return window.Sprig;
+    window.Sprig = function() {
+      window.Sprig._queue.push(arguments);
+    };
+    Object.getOwnPropertyNames(SprigAPI.prototype).map((apiMethodName) => {
+      if (apiMethodName !== 'constructor') window.Sprig[apiMethodName] = SprigAPI.prototype[apiMethodName];
+    });
+    const S = window.Sprig;
+    S.appId = config.envId;
+    S._queue = [];
+    window.UserLeap = S;
+    const sprigInitializer = require('./controller/controller').default;
+    sprigInitializer(config);
+    return window.Sprig;
+  },
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@sprig-technologies/sprig-browser",
+  "version": "2.14.0",
+  "description": "npm package for the sprig web sdk",
+  "browser": "index.js",
+  "scripts": {
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/UserLeap/userleap-web-sdk.git"
+  },
+  "keywords": [
+    "product",
+    "user-research"
+  ],
+  "bugs": {
+    "url": "https://github.com/UserLeap/userleap-web-sdk/issues"
+  },
+  "homepage": "https://docs.sprig.com/docs/web-javascript",
+  "license": "See LICENSE file",
+  "dependencies": {
+    "autosize": "4.0.2",
+    "color": "3.1.2",
+    "core-js": "3.5.0",
+    "whatwg-fetch": "3.0.0",
+    "uuid": "8.3.2"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

package/shared/conflicting_widgets/index.js

@@ -0,0 +1,13 @@
+import * as Intercom from './intercom';
+
+const widgets = [Intercom];
+
+export default class ConflictingWidgets {
+  static disable() {
+    widgets.forEach((w) => w.disable());
+  }
+
+  static enable() {
+    widgets.forEach((w) => w.enable());
+  }
+}

package/shared/conflicting_widgets/intercom.js

@@ -0,0 +1,28 @@
+/* global window, document */
+const getIntercom = () => {
+  try {
+    return window.parent.Intercom;
+  } catch (err) {}
+};
+
+export const enable = () => {
+  const Intercom = getIntercom();
+  if (!Intercom) return;
+
+  if (Intercom.ul_wasVisible) {
+    Intercom('update', { hide_default_launcher: false });
+  }
+
+  delete Intercom.ul_wasVisible;
+};
+
+export const disable = () => {
+  const Intercom = getIntercom();
+  if (!Intercom) return;
+
+  Intercom.ul_wasVisible = !!document.querySelector('iframe.intercom-launcher-frame');
+
+  if (Intercom.ul_wasVisible) {
+    Intercom('update', { hide_default_launcher: true });
+  }
+};

package/shared/constants.js

@@ -0,0 +1,59 @@
+/**
+ * Various modes that the app can be in. For now test is the
+ * only one that matters
+ * @type {Object}
+ */
+export const APP_MODES = {
+  test: 'test',
+};
+
+export const PAGE_URL_EVENT_NAME = 'pageUrl';
+
+export const HEADERS = {
+  ENVIRONMENT_ID: 'x-ul-environment-id',
+  PARTNER_ANONYMOUS_ID: 'x-ul-anonymous-id',
+  USER_ID: 'x-ul-user-id',
+  VISITOR_ID: 'x-ul-visitor-id',
+  INSTALLATION_METHOD: 'x-ul-installation-method',
+};
+
+export const INSTALLATION_METHOD = {
+  NPM: 'web-npm',
+  GTM: 'web-gtm',
+  SEGMENT: 'web-segment',
+  SNIPPET: 'web-snippet',
+};
+
+export const CSS_CONSTANTS = {
+  CUSTOM_STYLE_TAG_ID: 'ul-custom-style',
+  CARD_CONTAINER_CLASS: 'ul-card__container',
+  VIDEO_CARD_CLASS: 'ul-card--video',
+  CLOSE_CONTAINER_CLASS: 'close-container',
+  CLOSE_BUTTON_CLASS: 'close-btn',
+  LIKERT_NUMBER_CLASS: 'likert-number',
+  NPS_NUMBER_CLASS: 'nps-number',
+  CHOICE_CLASS: 'choice',
+  CHOICE_LABEL_CLASS: 'select-label',
+  CHOICE_CHECKBOX_CLASS: 'select-checkbox',
+  CHOICE_RADIO_CLASS: 'select-radio',
+  CHOICE_GROUP_CLASS: 'ul-card__choices',
+  OPEN_TEXT_INPUT: 'ul-card-text__input',
+  DESKTOP_SUFFIX: '--desktop',
+  MOBILE_SUFFIX: '--mobile',
+  QUESTION_HEADER_CLASS: 'ul-question',
+  CAPTION_CLASS: 'ul-caption',
+};
+
+export const EXPERIMENT_FLAGS = {
+  SURVEY_MOBILE_STYLING: 'survey-mobile-styling',
+};
+
+export const MOBILE_MAX_WIDTH = 500;
+
+export const getClasses = (baseClass, useMobileStyling) => {
+  const suffix = useMobileStyling ? CSS_CONSTANTS.MOBILE_SUFFIX : CSS_CONSTANTS.DESKTOP_SUFFIX;
+
+  return [baseClass + suffix, baseClass];
+};
+
+export const MOBILE_PLATFORM_HEADERS = ['ios', 'android'];

package/shared/deferred.js

@@ -0,0 +1,15 @@
+class Deferred {
+  constructor(payload) {
+    this.promise = new Promise((resolve, reject) => {
+      this.payload = payload;
+      this.reject = reject;
+      this.resolve = resolve;
+    });
+  }
+
+  resolveRequest(result) {
+    this.resolve(result);
+  }
+}
+
+export default Deferred;

package/shared/eventEmitter.js

@@ -0,0 +1,52 @@
+/*global UserLeap*/
+// singleton event emitter instance for UserLeap web events
+// provides basic functionality such as subcribing to and emitting events
+class ULEventEmitter {
+  constructor() {
+    if (!ULEventEmitter.instance) {
+      this._events = {};
+      ULEventEmitter.instance = this;
+    }
+
+    return ULEventEmitter.instance;
+  }
+
+  subscribe(name, listener) {
+    if (!name || !listener) return;
+    if (!this._events[name]) this._events[name] = [];
+    this._events[name].push(listener);
+  }
+
+  removeListener(name, listenerToRemove) {
+    if (!name || !listenerToRemove) return;
+    if (!this._events[name]) {
+      if (UserLeap.debugMode) console.log(`[DEBUG] ULEventEmitter: Can't remove a listener. Event "${name}" doesn't exist.`);
+      return;
+    }
+    const filterListeners = (listener) => listener !== listenerToRemove;
+    this._events[name] = this._events[name].filter(filterListeners);
+  }
+  removeAllListeners() {
+    Object.keys(this._events).map((key) => {
+      this._events[key] = [];
+    });
+  }
+
+  emit(name, data) {
+    if (!this._events[name] || this._events[name].length == 0) {
+      if (UserLeap.debugMode) console.log(`[DEBUG] ULEventEmitter: No listener registered for event "${name}".`, data);
+      return;
+    }
+
+    const fireCallbacks = (callback) => {
+      callback(data);
+    };
+
+    this._events[name].forEach(fireCallbacks);
+  }
+}
+
+const instance = new ULEventEmitter();
+Object.freeze(instance);
+
+export default instance;

package/shared/network.js

@@ -0,0 +1,130 @@
+/*global fetch */
+import 'whatwg-fetch';
+import { HEADERS, INSTALLATION_METHOD } from './constants';
+import Deferred from './deferred';
+const { delay, NETWORK_CONFIG } = require('./networkHelper');
+
+let killswitch = false;
+let killswitchReason = '';
+let isRateLimited = false;
+let pendingRequestQueue = [];
+
+function getInstallationMethodHeader(Sprig) {
+  if (Sprig._config && Sprig._config.installationMethod) return Sprig._config.installationMethod;
+  if (Sprig._gtm) return INSTALLATION_METHOD.GTM;
+  if (Sprig._segment) return INSTALLATION_METHOD.SEGMENT;
+  return INSTALLATION_METHOD.SNIPPET;
+}
+
+export function killNetworkRequests(reason) {
+  killswitch = true;
+  killswitchReason = reason;
+}
+
+export function getHttpHeaders(Sprig = {}) {
+  const headers = {
+    'Content-Type': 'application/json',
+    'userleap-platform': 'web',
+    'x-ul-sdk-version': '2.14.0', //version here doesn't matter. it is string-replaced when compiled
+  };
+  if (Sprig.envId) headers[HEADERS.ENVIRONMENT_ID] = Sprig.envId;
+  if (Sprig.token) headers['Authorization'] = 'Bearer ' + Sprig.token;
+  if (Sprig.userId) headers[HEADERS.USER_ID] = Sprig.userId;
+  if (Sprig.visitorId) headers[HEADERS.VISITOR_ID] = Sprig.visitorId;
+  if (Sprig.partnerAnonymousId) headers[HEADERS.PARTNER_ANONYMOUS_ID] = Sprig.partnerAnonymousId;
+  if (Sprig.mobileHeadersJSON) {
+    const mobileHeaders = JSON.parse(Sprig.mobileHeadersJSON);
+    Object.assign(headers, mobileHeaders);
+  }
+  headers[HEADERS.INSTALLATION_METHOD] = getInstallationMethodHeader(Sprig);
+  if (Sprig.locale) headers['accept-language'] = Sprig.locale; // custom set locale overrides original header locales
+
+  return headers;
+}
+
+async function dropOrQueueRequest(shouldDropOnRateLimit, isRateLimitRetry, requestInfo) {
+  if (shouldDropOnRateLimit) {
+    return { status: 429 };
+  } else {
+    const deferredRequest = new Deferred(requestInfo);
+    pendingRequestQueue.push(deferredRequest);
+    return deferredRequest.promise;
+  }
+}
+
+export async function ulFetch(url, options, attempt = 0, shouldDropOnRateLimit = false, shouldRetryRequest = false) {
+  // drop or queue request based on the current rate limit status
+  const requestInfo = { url, options, attempt, shouldDropOnRateLimit };
+  if (isRateLimited && !shouldRetryRequest) {
+    return dropOrQueueRequest(shouldDropOnRateLimit, shouldRetryRequest, requestInfo);
+  }
+  const killswitchResponse = { ok: false, reportError: false };
+  if (killswitch) {
+    console.log(`UserLeap - ${killswitchReason}`);
+    return killswitchResponse;
+  }
+
+  try {
+    options.headers = Object.assign(getHttpHeaders(), options.headers);
+    const result = await fetch(url, options);
+    if (result.status === 429) {
+      // retry if rate limit is not in effect yet and the request is not droppable
+      const shouldRetryCurrentRequest = (!isRateLimited && !shouldDropOnRateLimit) || shouldRetryRequest;
+      if (shouldRetryCurrentRequest) {
+        isRateLimited = true;
+        const rateLimitResetTime = result.headers.has('ratelimit-reset')
+          ? Number(result.headers.get('ratelimit-reset'))
+          : NETWORK_CONFIG.RATELIMIT_RESET_DEFAULT;
+        return delay(rateLimitResetTime * 1000).then(async () => {
+          return ulFetch(url, options, 0, shouldDropOnRateLimit, true);
+        });
+      } else {
+        return dropOrQueueRequest(shouldDropOnRateLimit, false, requestInfo);
+      }
+    }
+    isRateLimited = false;
+    if (pendingRequestQueue.length) {
+      pendingRequestQueue.map((deferredRequest) => {
+        const { url, options, attempt, shouldDropOnRateLimit } = deferredRequest.payload;
+        ulFetch(url, options, attempt, shouldDropOnRateLimit).then((result) => {
+          deferredRequest.resolveRequest(result);
+        });
+      });
+      pendingRequestQueue = [];
+    }
+    if (result.ok) {
+      if (result.status === 249) {
+        killNetworkRequests();
+        return killswitchResponse;
+      }
+
+      const responseText = await result.text();
+      try {
+        if (responseText && responseText !== 'OK') {
+          result.json = JSON.parse(responseText);
+        }
+        return result;
+      } catch (err) {
+        return {
+          ok: false,
+          reportError: true,
+          error: new Error(`failed parsing response json for ${url} - ${responseText}`),
+        };
+      }
+    }
+    return result;
+  } catch (err) {
+    //retry
+    const newAttempt = attempt + 1;
+    if (newAttempt > 2) {
+      return {
+        ok: false,
+        reportError: false,
+        error: err,
+      };
+    }
+    return delay(newAttempt * 1000).then(() => {
+      return ulFetch(url, options, newAttempt);
+    });
+  }
+}

package/shared/networkHelper.js

@@ -0,0 +1,9 @@
+export function delay(t, v) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve.bind(null, v), t);
+  });
+}
+
+export const NETWORK_CONFIG = {
+  RATELIMIT_RESET_DEFAULT: 10, // 10s to restart rate limit retry
+};

package/shared/shouldDirectEmbed.js

@@ -0,0 +1,8 @@
+/**
+ * Get true or false for whether to direct embed from platform headers
+ * @param {Object} [options = {}]
+ * @return {Object} User meta information
+ */
+export default function shouldDirectEmbed({ 'userleap-platform': platform }) {
+  return platform !== 'web';
+}

package/shared/tool.js

@@ -0,0 +1,19 @@
+// for shared functions across the sdk
+
+import { CSS_CONSTANTS } from './constants';
+
+export const overrideStyles = (document, styleString) => {
+  const overrideStyles = document.createElement('style');
+  overrideStyles.type = 'text/css';
+  overrideStyles.textContent = styleString;
+  overrideStyles.id = CSS_CONSTANTS.CUSTOM_STYLE_TAG_ID;
+  document.head.appendChild(overrideStyles);
+};
+
+export const calculateFrameHeight = (document) => {
+  const container = document.querySelector(`.${CSS_CONSTANTS.CARD_CONTAINER_CLASS}`);
+  const containerHeight = container ? container.scrollHeight : 600;
+  const whiteSpace =
+    container && container.parentElement ? container.parentElement.clientHeight - container.clientHeight : 0;
+  return containerHeight + whiteSpace;
+};

package/shared/ulEvents.js

@@ -0,0 +1,45 @@
+// UserLeap event constants
+// event convention
+// event name: descriptive name of the event that happened
+//  payload: {
+//    name: 'event name',
+//    descriptiveDataName: data
+//  }
+export const ulEvents = {
+  // passing into controller
+  SURVEY_LIFE_CYCLE: 'survey.lifeCycle',
+  SURVEY_DIMENSIONS: 'survey.dimensions',
+  SURVEY_HEIGHT: 'survey.height',
+  SURVEY_PRESENTED: 'survey.presented',
+  SURVEY_APPEARED: 'survey.appeared',
+  SURVEY_FADING_OUT: 'survey.fadingOut',
+  SURVEY_WILL_CLOSE: 'survey.willClose',
+  SURVEY_CLOSED: 'survey.closed',
+  SDK_READY: 'sdk.ready',
+  // passing into view
+  CLOSE_SURVEY_ON_OVERLAY_CLICK: 'close.survey.overlayClick',
+  VISITOR_ID_UPDATED: 'visitor.id.updated',
+};
+
+// events not emitted externally and not in the documentation
+export const internalEvents = {
+  name: {
+    VERIFY_VIEW_VERSION: 'verify.view.version',
+  },
+  data: {
+    VIEW_VERSION: 'view.version',
+  },
+};
+
+export const DISMISS_REASONS = {
+  CLOSED: 'close.click', // user clicked the close button
+  COMPLETE: 'survey.completed', // user answered all questions
+  PAGE_CHANGE: 'page.change', // productConfig.dismissOnPageChange == true and we detected a page change (excludes hash/query param changes)
+  API: 'api', // JS called Sprig('dismissActiveSurvey')
+  OVERRIDE: 'override', // JS called Sprig('displaySurvey', SURVEY_ID)
+};
+
+export const SURVEY_STATE = {
+  READY: 'ready',
+  NO_SURVEY: 'no survey',
+};