customerio-gist-web 3.6.1

package/src/managers/gist-properties-manager.js

@@ -0,0 +1,60 @@
+export function resolveMessageProperties(message) {
+    var elementId = "";
+    var routeRule = "";
+    var position = "";
+    var isEmbedded = false;
+    var hasRouteRule = false;
+    var hasPosition = false;
+    var shouldScale = false;
+    var campaignId = null;
+    var persistent = false;
+    var overlayColor = "#00000033";
+    var messageWidth = 414;
+    var hasCustomWidth = false;
+
+    if (message.properties && message.properties.gist) {
+        if (message.properties.gist.campaignId) {
+            campaignId = message.properties.gist.campaignId;
+        }
+        if (message.properties.gist.elementId) {
+            elementId = message.properties.gist.elementId;
+            isEmbedded = true;
+        }
+        if (message.properties.gist.routeRuleWeb) {
+            routeRule = message.properties.gist.routeRuleWeb;
+            hasRouteRule = true;
+        }
+        if (message.properties.gist.position) {
+            position = message.properties.gist.position;
+            hasPosition = true;
+        }
+        if (message.properties.gist.scale) {
+            shouldScale = message.properties.gist.scale;
+        }
+        if (message.properties.gist.overlayColor) {
+            overlayColor = message.properties.gist.overlayColor;
+        }
+        if (message.properties.gist.messageWidth && message.properties.gist.messageWidth > 0) {
+            messageWidth = message.properties.gist.messageWidth;
+            hasCustomWidth = true;
+        }
+        if (message.properties.gist.persistent)
+        {
+            persistent = true
+        }
+    }
+    return {
+        isEmbedded: isEmbedded,
+        elementId: elementId,
+        hasRouteRule: hasRouteRule,
+        routeRule: routeRule,
+        position: position,
+        hasPosition: hasPosition,
+        shouldScale: shouldScale,
+        campaignId: campaignId,
+        messageWidth: messageWidth,
+        overlayColor: overlayColor,
+        persistent: persistent,
+        hasCustomWidth: hasCustomWidth
+    }
+}

package/src/managers/message-component-manager.js

@@ -0,0 +1,170 @@
+import { log } from "../utilities/log";
+import { v4 as uuidv4 } from 'uuid';
+import { embedMessage } from "./message-manager";
+import { resolveMessageProperties } from "./gist-properties-manager";
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
+export function isElementLoaded(elementId) {
+  var element = safelyFetchElement(elementId);
+  if (element && element.classList.contains("gist-visible")) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+export async function preloadRenderer() {
+  var preloadFrameId = `G${uuidv4().substring(0,8)}`;
+  var preloadFrameElement = document.createElement("div");
+  preloadFrameElement.setAttribute("id", preloadFrameId);
+  preloadFrameElement.style.display = "none";
+  document.body.appendChild(preloadFrameElement);
+  
+  await delay(5000);
+  embedMessage({messageId: ""}, preloadFrameId);
+}
+
+export function loadEmbedComponent(elementId, url, message) {
+  var element = safelyFetchElement(elementId);
+  if (element) {
+    if (!elementHasHeight(elementId)) {
+      element.style.height = "0px";
+    }
+    element.innerHTML = embed(url, message);
+  } else {
+    log(`Message could not be embedded, elementId ${elementId} not found.`);
+  }
+}
+
+export function showEmbedComponent(elementId) {
+  var element = safelyFetchElement(elementId);
+  if (element) {
+    element.classList.add("gist-visible");
+  }
+}
+
+export function hideEmbedComponent(elementId) {
+  var element = safelyFetchElement(elementId);
+  if (element) {
+    element.classList.remove("gist-visible");
+    element.style.removeProperty("height");
+    element.innerHTML = "";
+  }
+}
+
+export function elementHasHeight(elementId) {
+  var element = safelyFetchElement(elementId);
+  if (element) {
+    return element.style && element.style.height && element.style.height != "0px";
+  }
+}
+
+export function resizeComponent(elementId, size, shouldScale) {
+  var element = safelyFetchElement(elementId);
+  if (element) {
+    var style = element.style;
+    if (size.height > 0) {
+      if (size.height > window.innerHeight) {
+        var heightScale = 1 - ((size.height / window.innerHeight) - 1);
+        if (shouldScale && heightScale >= 0.4) {
+          style.height = `${size.height}px`;
+          style.transform = `translateX(-50%) translateY(-50%) scale(${heightScale})`;
+        } else {
+          style.height = `${window.innerHeight}px`;
+        }
+      } else {
+        style.height = `${size.height}px`;
+      }
+    }
+  }
+}
+
+export function loadOverlayComponent(url, message) {
+  document.body.insertAdjacentHTML('beforeend', component(url, message));
+}
+
+export function showOverlayComponent(message) {
+  var mainMessageElement = document.querySelector("#gist-overlay");
+  if (mainMessageElement) {
+    mainMessageElement.classList.add("visible");
+    var messageElement = document.querySelector("#gist-message");
+    if (message.position) {
+      messageElement.classList.add(message.position);
+    } else {
+      messageElement.classList.add("center");
+    }
+    setTimeout(showMessage, 100);
+  } else {
+    removeOverlayComponent();
+  }
+}
+
+export async function hideOverlayComponent() {
+  var message = document.querySelector("#gist-message");
+  if (message) {
+    message.classList.remove("visible");
+    await delay(300);
+  }
+  removeOverlayComponent();
+}
+
+export function removeOverlayComponent() {
+  var mainMessageElement = document.querySelector("#gist-embed-message");
+  if (mainMessageElement) {
+    mainMessageElement.parentNode.removeChild(mainMessageElement);
+  }
+}
+
+function showMessage() {
+  var messageElement = document.querySelector("#gist-message");
+  if (messageElement) messageElement.classList.add("visible");
+}
+
+function embed(url, message) {
+  const wideOverlayPositions = ["x-gist-bottom", "x-gist-bottom", "x-gist-floating-top", "x-gist-floating-bottom"];
+  var messageProperties = resolveMessageProperties(message);
+  var maxWidthBreakpoint = 800;
+  if (messageProperties.messageWidth > maxWidthBreakpoint) {
+    maxWidthBreakpoint = messageProperties.messageWidth;
+  }
+
+  var messageWidth = messageProperties.messageWidth + "px";
+  if (wideOverlayPositions.includes(messageProperties.elementId) && !messageProperties.hasCustomWidth) {
+    messageWidth = "100%";
+  }
+
+  var template = require("html-loader!../templates/embed.html");
+  template = template.replace("'${topBottomMessageWidth}'", messageWidth);
+  template = template.replace("'${cornersMessageWidth}'", messageWidth);
+  template = template.replace("'${maxWidth}'", maxWidthBreakpoint + "px");
+  template = template.replace("${url}", url);
+  return template;
+}
+
+function component(url, message) {
+  var messageProperties = resolveMessageProperties(message);
+  var maxWidthBreakpoint = 600;
+  if (messageProperties.messageWidth > maxWidthBreakpoint) {
+    maxWidthBreakpoint = messageProperties.messageWidth;    
+  }
+  var template = require("html-loader!../templates/message.html");
+  template = template.replace("'${messageWidth}'", messageProperties.messageWidth + "px");
+  template = template.replace("'${maxWidth}'", maxWidthBreakpoint + "px");
+  template = template.replace("'${overlayColor}'", messageProperties.overlayColor);
+  template = template.replace("${url}", url);
+  template = template.replace("${instanceId}", message.instanceId);
+  return template;
+}
+
+function safelyFetchElement(elementId) {
+  try {
+    var element = document.querySelector(`#${elementId}`);
+    if (element) {
+      return element;
+    } else {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+}

package/src/managers/message-manager.js

@@ -0,0 +1,291 @@
+import Gist from '../gist';
+import { log } from "../utilities/log";
+import { logMessageView, logUserMessageView } from "../services/log-service";
+import { v4 as uuidv4 } from 'uuid';
+import { settings } from "../services/settings";
+import { 
+  loadOverlayComponent, 
+  showOverlayComponent, 
+  hideOverlayComponent, 
+  removeOverlayComponent, 
+  loadEmbedComponent, 
+  showEmbedComponent, 
+  hideEmbedComponent,
+  resizeComponent,
+  elementHasHeight,
+  isElementLoaded
+} from "./message-component-manager";
+import { resolveMessageProperties } from "./gist-properties-manager";
+import { positions, addPageElement } from "./page-component-manager";
+import { checkMessageQueue } from "./queue-manager";
+
+var shownMessages = [];
+
+export async function showMessage(message) {
+  if (Gist.isDocumentVisible) {
+    if (Gist.overlayInstanceId) {
+      log(`Message ${Gist.overlayInstanceId} already showing.`);
+      return null;
+    } else {
+      var properties = resolveMessageProperties(message)
+      message.instanceId = uuidv4();
+      message.overlay = true;
+      message.firstLoad = true;
+      message.shouldResizeHeight = true;
+      message.shouldScale = properties.shouldScale;
+      message.renderStartTime = new Date().getTime();
+      Gist.overlayInstanceId = message.instanceId;
+      Gist.currentMessages.push(message);
+
+      return loadMessageComponent(message);
+    }
+  } else {
+    log("Document hidden, not showing message now.");
+    return null;
+  }
+}
+
+export async function embedMessage(message, elementId) {
+  if (Gist.isDocumentVisible) {
+    message.instanceId = uuidv4();
+    message.overlay = false;
+    message.firstLoad = true;
+    message.shouldScale = false;
+    message.elementId = elementId;
+    message.shouldResizeHeight = !elementHasHeight(elementId);
+    message.renderStartTime = new Date().getTime();
+    Gist.currentMessages.push(message);
+
+    return loadMessageComponent(message, elementId);
+  } else {
+    log("Document hidden, not showing message now.");
+    return null;
+  }
+}
+
+export async function hideMessage(message) {
+  if (message) {
+    Gist.messageDismissed(message);
+
+    if (message.overlay) {
+      await resetOverlayState(true, message);
+    } else {
+      resetEmbedState(message);
+    }
+  } else {
+    log(`Message with instance id: ${instanceId} not found`);
+  }
+}
+
+export async function removePersistentMessage(message) {
+  var messageProperties = resolveMessageProperties(message);
+  if (message) {
+    if (messageProperties.persistent) {
+      log(`Persistent message dismissed, logging view`);
+      await reportMessageView(message);
+    }
+  } else {
+    log(`Message with instance id: ${instanceId} not found`);
+  }
+}
+
+function resetEmbedState(message) {
+  removeMessageByInstanceId(message.instanceId);
+  hideEmbedComponent(message.elementId);
+}
+
+async function resetOverlayState(hideFirst, message) {
+  removeMessageByInstanceId(message.instanceId);
+  Gist.overlayInstanceId = null;
+  if (hideFirst) {
+    await hideOverlayComponent();
+  } else {
+    removeOverlayComponent();
+  }
+
+  if (Gist.currentMessages.length == 0) {
+    window.removeEventListener('message', handleGistEvents);
+    window.removeEventListener('touchstart', handleTouchStartEvents);
+  }
+}
+
+function loadMessageComponent(message, elementId = null) {
+  if (elementId && isElementLoaded(elementId)) {
+    log(`Message ${message.messageId} already showing in element ${elementId}.`);
+    return null;
+  }
+
+  var options = {
+    endpoint: settings.ENGINE_API_ENDPOINT[Gist.config.env],
+    siteId: Gist.config.siteId,
+    dataCenter: Gist.config.dataCenter,
+    messageId: message.messageId,
+    instanceId: message.instanceId,
+    livePreview: false,
+    properties: message.properties
+  }
+  var url = `${settings.GIST_VIEW_ENDPOINT[Gist.config.env]}/index.html?options=${encodeUnicode(JSON.stringify(options))}`
+  window.addEventListener('message', handleGistEvents);
+  window.addEventListener('touchstart', handleTouchStartEvents);
+
+  if (elementId) {
+    if (positions.includes(elementId)) { addPageElement(elementId); }
+    loadEmbedComponent(elementId, url, message);
+  } else {
+    loadOverlayComponent(url, message);
+  }
+
+  return message;
+}
+
+function encodeUnicode(str) {
+  var base64Unicode = btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
+      function toSolidBytes(match, p1) {
+          return String.fromCharCode('0x' + p1);
+  }));
+
+  return encodeURIComponent(base64Unicode);
+}
+
+async function reportMessageView(message) {
+  Gist.messageShown(message);
+  log(`Message shown, logging view for: ${message.messageId}`);
+  var response = {};
+  if (message.queueId != null) {
+    response = await logUserMessageView(message.queueId);
+  } else {
+    response = await logMessageView(message.messageId);
+  }
+  
+  if (response.status === 200) {
+    log(`Message view logged`);
+  } else {
+    log(`Problem logging message: ${response.status}`);
+  }
+}
+
+export function fetchMessageByInstanceId(instanceId) {
+  return Gist.currentMessages.find(message => message.instanceId === instanceId);
+}
+
+function removeMessageByInstanceId(instanceId) {
+  Gist.currentMessages = Gist.currentMessages.filter(message => message.instanceId !== instanceId)
+}
+
+function updateMessageByInstanceId(instanceId, message) {
+  removeMessageByInstanceId(instanceId);
+  Gist.currentMessages.push(message);
+}
+
+// Added this to avoid errors in the console
+function handleTouchStartEvents(e) {}
+
+async function handleGistEvents(e) {
+  if (e.data.gist) {
+    var currentInstanceId = e.data.gist.instanceId;
+    var currentMessage = fetchMessageByInstanceId(currentInstanceId);
+    if (!currentMessage) { return; }
+    var messageProperties = resolveMessageProperties(currentMessage);
+    switch (e.data.gist.method) {
+      case "routeLoaded": {
+        var timeElapsed = (new Date().getTime() - currentMessage.renderStartTime) * 0.001;
+        log(`Engine render for message: ${currentMessage.messageId} timer elapsed in ${timeElapsed.toFixed(3)} seconds`);
+        currentMessage.currentRoute = e.data.gist.parameters.route;
+        if (currentMessage.firstLoad) {
+          shownMessages.push(currentMessage);
+          if (currentMessage.overlay) {
+            showOverlayComponent(currentMessage);
+          } else {
+            showEmbedComponent(currentMessage.elementId);
+          }
+
+          if (messageProperties.persistent) {
+            log(`Persistent message shown, skipping logging view`);
+          } else {
+            await reportMessageView(currentMessage);
+          }
+
+          currentMessage.firstLoad = false;
+        }
+        updateMessageByInstanceId(currentInstanceId, currentMessage);
+        break;
+      }
+      case "tap": {
+        var action = e.data.gist.parameters.action;
+        var name = e.data.gist.parameters.name;
+        Gist.messageAction(currentMessage, action, name);
+        
+        if (e.data.gist.parameters.system && !messageProperties.persistent) {
+          await hideMessage(currentMessage);
+          break;
+        }
+
+        try {
+          var url = new URL(action);
+          if (url && url.protocol === "gist:") {
+            var gistAction = url.href.replace("gist://", "").split('?')[0];
+            switch (gistAction) {
+              case "close":
+                await hideMessage(currentMessage);
+                await removePersistentMessage(currentMessage);
+                await checkMessageQueue();
+                break;
+              case "showMessage":
+                var messageId = url.searchParams.get('messageId');
+                var properties = url.searchParams.get('properties');
+                if (messageId) {
+                  if (properties) {
+                    properties = JSON.parse(atob(properties));
+                  }
+                  await Gist.showMessage({ messageId: messageId, properties: properties });
+                }
+                break;
+              case "loadPage":
+                var url = url.href.substring(url.href.indexOf('?url=') + 5);
+                if (url) {
+                  if (url.startsWith("https://") || url.startsWith("http://") || url.startsWith("/")) {
+                    window.location.href = url;
+                  } else {
+                    window.location.href = window.location + url;
+                  }
+                }
+                break;
+            }
+          }
+        } catch (_) {}
+        
+        break;
+      }
+      case "routeChanged": {
+        currentMessage.currentRoute = e.data.gist.parameters.route;
+        currentMessage.renderStartTime = new Date().getTime();
+        updateMessageByInstanceId(currentInstanceId, currentMessage);
+        log(`Route changed to: ${currentMessage.currentRoute}`);
+        break;
+      }
+      case "sizeChanged": {
+        log(`Size Changed Width: ${e.data.gist.parameters.width} - Height: ${e.data.gist.parameters.height}`)
+        if (currentMessage.elementId && currentMessage.shouldResizeHeight) {
+          resizeComponent(currentMessage.elementId, e.data.gist.parameters, currentMessage.shouldScale);
+        } else {
+          resizeComponent("gist-message", e.data.gist.parameters, currentMessage.shouldScale);
+        }
+        break;
+      }
+      case "error":
+      case "routeError": {
+        Gist.messageError(currentMessage);
+        if (Gist.overlayInstanceId) {
+          resetOverlayState(false, currentMessage);
+        } else {
+          resetEmbedState(currentMessage);
+        }
+        break;
+      }
+    }
+  }
+}
+
+export function hasMessageBeenShownBefore(message) {
+  return shownMessages.find(msg => msg.queueId === message.queueId) !== undefined;
+}

package/src/managers/page-component-manager.js

@@ -0,0 +1,19 @@
+import { log } from "../utilities/log";
+
+export var positions = ["x-gist-top", "x-gist-floating-top", "x-gist-bottom", "x-gist-floating-bottom", "x-gist-floating-bottom-left", "x-gist-floating-bottom-right", "x-gist-floating-top-left", "x-gist-floating-top-right"];
+
+export function addPageElement(position) {
+  const element = document.createElement("div");
+  element.id = position
+
+  switch (position) {
+    case "x-gist-top":
+      document.body.insertBefore(element, document.body.firstChild);
+      break;
+    default:
+      document.body.insertAdjacentElement("beforeend", element);
+      break;
+  }
+
+  log('Top & bottom elements injected into page');
+}

package/src/managers/queue-manager.js

@@ -0,0 +1,112 @@
+import Gist from '../gist';
+import { log } from "../utilities/log";
+import { getUserToken } from "./user-manager";
+import { getUserQueue } from "../services/queue-service";
+import { showMessage, embedMessage, hasMessageBeenShownBefore } from "./message-manager";
+import { resolveMessageProperties } from "./gist-properties-manager";
+import { preloadRenderer } from "./message-component-manager";
+import { setKeyWithExpiryToLocalStore, getKeyFromLocalStore } from '../utilities/local-storage';
+
+const userQueueLocalStoreName = "gist.web.userQueue";
+const POLLING_DELAY_IN_SECONDS = 1000 * 10;
+var sleep = time => new Promise(resolve => setTimeout(resolve, time))
+var poll = (promiseFn, time) => promiseFn().then(sleep(time).then(() => poll(promiseFn, time)));
+var pollingSetup = false;
+var messages = [];
+
+export async function startQueueListener() {
+  if (!pollingSetup) {
+    preloadRenderer();
+    if (getUserToken()) {
+      log("Queue watcher started");
+      pollingSetup = true;
+      poll(() => new Promise(() => pollMessageQueue()), POLLING_DELAY_IN_SECONDS);
+    } else {
+      log(`User token not setup, queue not started.`);
+    }
+  } else {
+    await checkMessageQueue();
+  }
+}
+
+export async function checkMessageQueue() {
+  log(`Messages in local queue: ${messages.length}`);
+  var keptMessages = [];
+  var orderedMessages = messages.sort((a, b) => a.priority - b.priority);
+  for (const message of orderedMessages) {
+    var handledMessage = await handleMessage(message);
+    if (!handledMessage) {
+      var duplicateMessage = keptMessages.find(queueMessages => queueMessages.queueId === message.queueId);
+      var showingMessage = Gist.currentMessages.find(currentMessage => currentMessage.queueId === message.queueId);
+      if (duplicateMessage || showingMessage) {
+        log(`Message with queueId: ${message.queueId} already in queue, discarding.`);
+      } else {
+        keptMessages.push(message);
+      }
+    }
+  }
+  messages = keptMessages;
+}
+
+async function handleMessage(message) {
+  if (hasMessageBeenShownBefore(message)) {
+    log(`Message with ${message.queueId} has been shown before, skipping.`);
+    return;
+  }
+
+  var messageProperties = resolveMessageProperties(message);
+  if (messageProperties.hasRouteRule) {
+    var currentUrl = Gist.currentRoute
+    if (currentUrl == null) {
+      currentUrl = new URL(window.location.href).pathname;
+    }
+    var routeRule = messageProperties.routeRule;
+    log(`Verifying route against rule: ${routeRule}`);
+    var urlTester = new RegExp(routeRule);
+    if (!urlTester.test(currentUrl)) {
+      log(`Route ${currentUrl} does not match rule.`);
+      return false;
+    }
+  }
+  if (messageProperties.hasPosition) {
+    message.position = messageProperties.position;
+  }
+  if (messageProperties.isEmbedded) {
+    return await embedMessage(message, messageProperties.elementId);
+  } else {
+    return await showMessage(message);
+  }
+}
+
+export async function pollMessageQueue() {
+  if (getUserToken()) {
+    if (Gist.isDocumentVisible) {
+      var response = await getUserQueue();
+      var responseData = [];
+      if (response) {
+        if (response.status === 200 || response.status === 204) {
+          var expiryDate = new Date(new Date().getTime() + 1 * 60000);
+          setKeyWithExpiryToLocalStore(userQueueLocalStoreName, response.data, expiryDate);
+          responseData = response.data;
+        }
+        else if (response.status === 304) {
+          responseData = getKeyFromLocalStore(userQueueLocalStoreName);
+        }
+        if (responseData && responseData.length > 0) {
+          log(`Message queue checked for user ${getUserToken()}, ${responseData.length} messages found.`);
+          messages = responseData;
+          await checkMessageQueue();
+        } else {
+          messages = [];
+          log(`No messages for user token.`);
+        }
+      } else {
+        log(`There was an error while checking message queue.`);
+      }
+    } else {
+      log(`Document not visible, skipping queue check.`);  
+    }
+  } else {
+    log(`User token reset, skipping queue check.`);
+  }
+}

package/src/managers/user-manager.js

@@ -0,0 +1,47 @@
+import { log } from '../utilities/log';
+import { setKeyWithExpiryToLocalStore, getKeyFromLocalStore, clearKeyFromLocalStore } from '../utilities/local-storage';
+import { v4 as uuidv4 } from 'uuid';
+const userTokenLocalStoreName = "gist.web.userToken";
+const guestUserTokenLocalStoreName = "gist.web.guestUserToken";
+const usingGuestUserTokenLocalStoreName = "gist.web.usingGuestUserToken";
+
+export function isUsingGuestUserToken() {
+  return (getKeyFromLocalStore(usingGuestUserTokenLocalStoreName) !== null);
+}
+
+export function getUserToken() {
+  return getKeyFromLocalStore(userTokenLocalStoreName);
+}
+
+export function setUserToken(userToken, expiryDate) {
+  if (expiryDate === undefined) {
+    expiryDate = new Date();
+    expiryDate.setDate(expiryDate.getDate() + 30);
+  }
+  setKeyWithExpiryToLocalStore(userTokenLocalStoreName, userToken, expiryDate);
+  clearKeyFromLocalStore(usingGuestUserTokenLocalStoreName);
+  log(`Set user token "${userToken}" with expiry date set to ${expiryDate}`);
+}
+
+export function useGuestSession() {
+  var expiryDate = new Date();
+  expiryDate.setDate(expiryDate.getDate() + 365);
+
+  // Guest sessions should never override existing sessions
+  if (getUserToken() === null) {
+    var guestUserToken = getKeyFromLocalStore(guestUserTokenLocalStoreName);
+    if (guestUserToken == null) {
+      guestUserToken = uuidv4();
+      setKeyWithExpiryToLocalStore(guestUserTokenLocalStoreName, guestUserToken, expiryDate);
+      log(`Set guest user token "${guestUserToken}" with expiry date set to 1 year from today`);
+    }
+
+    setKeyWithExpiryToLocalStore(userTokenLocalStoreName, guestUserToken, expiryDate);
+    setKeyWithExpiryToLocalStore(usingGuestUserTokenLocalStoreName, true, expiryDate);
+  }
+}
+
+export function clearUserToken() {
+  clearKeyFromLocalStore(userTokenLocalStoreName);
+  log(`Cleared user token`);
+}