customerio-gist-web 0.0.0-test-oidc

package/src/managers/message-manager.js

@@ -0,0 +1,314 @@
+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,
+  changeOverlayTitle
+} from "./message-component-manager";
+import { resolveMessageProperties } from "./gist-properties-manager";
+import { positions, addPageElement } from "./page-component-manager";
+import { getAllCustomAttributes } from "./custom-attribute-manager";
+import { checkMessageQueue } from "./queue-manager";
+import { isMessageBroadcast, markBroadcastAsSeen, markBroadcastAsDismissed } from './message-broadcast-manager';
+import { markUserQueueMessageAsSeen } from './message-user-queue-manager';
+import { setMessageLoaded } from './message-user-queue-manager';
+
+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: ${message.instanceId} not found`);
+  }
+}
+
+export async function removePersistentMessage(message) {
+  var messageProperties = resolveMessageProperties(message);
+  if (message) {
+    if (messageProperties.persistent) {
+      log(`Persistent message dismissed, logging view`);
+      await logUserMessageViewLocally(message);
+      await reportMessageView(message);
+    }
+  } else {
+    log(`Message with instance id: ${message.instanceId} not found`);
+  }
+}
+
+function resetEmbedState(message) {
+  removeMessageByInstanceId(message.instanceId);
+  hideEmbedComponent(message.elementId);
+}
+
+async function resetOverlayState(hideFirst, message) {
+  if (hideFirst) {
+    await hideOverlayComponent();
+  } else {
+    removeOverlayComponent();
+  }
+
+  if (Gist.currentMessages.length == 0) {
+    window.removeEventListener('message', handleGistEvents);
+    window.removeEventListener('touchstart', handleTouchStartEvents);
+  }
+
+  removeMessageByInstanceId(message.instanceId);
+  Gist.overlayInstanceId = null;
+}
+
+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,
+    customAttributes: Object.fromEntries(getAllCustomAttributes())
+  }
+  var url = `${settings.GIST_VIEW_ENDPOINT[Gist.config.env]}/index.html`
+  window.addEventListener('message', handleGistEvents);
+  window.addEventListener('touchstart', handleTouchStartEvents);
+
+  if (elementId) {
+    if (positions.includes(elementId)) { addPageElement(elementId); }
+    loadEmbedComponent(elementId, url, message, options);
+  } else {
+    loadOverlayComponent(url, message, options);
+  }
+
+  return message;
+}
+
+
+async function reportMessageView(message) {
+  log(`Message shown, logging view for: ${message.messageId}`);
+  var response = {};
+  if (message.queueId != null) {
+    await logUserMessageViewLocally(message);
+    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);
+}
+
+
+function handleTouchStartEvents() {
+  // Added this to avoid errors in the console
+}
+
+async function handleGistEvents(e) {
+  if (e.data.gist && e.origin === settings.RENDERER_HOST) {
+    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`);
+        setMessageLoaded(currentMessage.queueId);
+        currentMessage.currentRoute = e.data.gist.parameters.route;
+        if (currentMessage.firstLoad) {
+          if (currentMessage.overlay) {
+            showOverlayComponent(currentMessage);
+          } else {
+            showEmbedComponent(currentMessage.elementId);
+          }
+
+          Gist.messageShown(currentMessage);
+          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 logBroadcastDismissedLocally(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":
+                url = url.href.substring(url.href.indexOf('?url=') + 5);
+                if (url) {
+                  if (url.startsWith("mailto:") || url.startsWith("https://") || url.startsWith("http://") || url.startsWith("/")) {
+                    window.location.href = url;
+                  } else {
+                    window.location.href = window.location + url;
+                  }
+                }
+                break;
+            }
+          }
+        } catch {
+          // If the action is not a URL, we don't need to do anything.
+        }
+        
+        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, e.data.gist.parameters);
+        }
+        break;
+      }
+      case "titleChanged": {
+        log(`Overlay title changed to: ${e.data.gist.parameters.title}`);
+        changeOverlayTitle(currentInstanceId, e.data.gist.parameters.title);
+        break;
+      }
+      case "eventDispatched": {
+        Gist.events.dispatch("eventDispatched", { "name": e.data.gist.parameters.name, "payload": e.data.gist.parameters.payload });
+        break;
+      }
+      case "error":
+      case "routeError": {
+        Gist.messageError(currentMessage);
+        if (Gist.overlayInstanceId) {
+          resetOverlayState(false, currentMessage);
+        } else {
+          resetEmbedState(currentMessage);
+        }
+        break;
+      }
+    }
+  }
+}
+
+async function logUserMessageViewLocally(message) {
+  log(`Logging user message view locally for: ${message.queueId}`);
+  if (isMessageBroadcast(message)) {
+    await markBroadcastAsSeen(message.queueId);
+  } else {
+    await markUserQueueMessageAsSeen(message.queueId);
+  }
+}
+
+export async function logBroadcastDismissedLocally(message) {
+  if (isMessageBroadcast(message)) {
+    log(`Logging broadcast dismissed locally for: ${message.queueId}`);
+    await markBroadcastAsDismissed(message.queueId);
+  }
+}

package/src/managers/message-user-queue-manager.js

@@ -0,0 +1,80 @@
+import { getKeyFromLocalStore, setKeyToLocalStore, clearKeyFromLocalStore } from '../utilities/local-storage';
+import { getHashedUserToken } from './user-manager';
+
+const messageQueueLocalStoreName = "gist.web.message.user";
+const messagesLocalStoreCacheInMinutes = 60;
+
+
+export async function updateQueueLocalStore(messages) {
+  const userQueueLocalStoreName = await getUserQueueLocalStoreName();
+  if (!userQueueLocalStoreName) return;
+
+  const nonBroadcasts = messages.filter(message => 
+    !(message.properties && message.properties.gist && message.properties.gist.broadcast)
+  );
+  const expiryDate = new Date();
+  expiryDate.setMinutes(expiryDate.getMinutes() + messagesLocalStoreCacheInMinutes);
+  setKeyToLocalStore(userQueueLocalStoreName, nonBroadcasts, expiryDate);
+}
+
+export async function getMessagesFromLocalStore() {
+  const userQueueLocalStoreName = await getUserQueueLocalStoreName();
+  if (!userQueueLocalStoreName) return [];
+
+  const storedMessages = getKeyFromLocalStore(userQueueLocalStoreName) ?? [];
+  const seenMessages = await getSeenMessagesFromLocalStore();
+  return storedMessages.filter(message => !seenMessages.includes(message.queueId));
+}
+
+export async function markUserQueueMessageAsSeen(queueId) {
+  const userSeenQueueLocalStoreName = await getUserSeenQueueLocalStoreName();
+  if (!userSeenQueueLocalStoreName) return;
+
+  const seenMessages = getKeyFromLocalStore(userSeenQueueLocalStoreName) ?? [];
+  seenMessages.push(queueId);
+  setKeyToLocalStore(userSeenQueueLocalStoreName, seenMessages);
+}
+
+export async function isMessageLoading(queueId) {
+  const messageLoadingLocalStoreName = await getMessageLoadingStateLocalStoreName(queueId);
+  if (!messageLoadingLocalStoreName) return false;
+  return getKeyFromLocalStore(messageLoadingLocalStoreName) !== null ? true : false;
+}
+
+export async function setMessageLoading(queueId) {
+  const messageLoadingLocalStoreName = await getMessageLoadingStateLocalStoreName(queueId);
+  if (!messageLoadingLocalStoreName) return false;
+  // We add a TTL of 5sec, just in case the message gets stuck loading.
+  setKeyToLocalStore(messageLoadingLocalStoreName, true, new Date(Date.now() + 5000));
+}
+
+export async function setMessageLoaded(queueId) {
+  const messageLoadingLocalStoreName = await getMessageLoadingStateLocalStoreName(queueId);
+  if (!messageLoadingLocalStoreName) return false;
+  clearKeyFromLocalStore(messageLoadingLocalStoreName);
+}
+
+async function getSeenMessagesFromLocalStore() {
+  const userSeenQueueLocalStoreName = await getUserSeenQueueLocalStoreName();
+  if (!userSeenQueueLocalStoreName) return [];
+  
+  return getKeyFromLocalStore(userSeenQueueLocalStoreName) ?? [];
+}
+
+async function getUserQueueLocalStoreName() {
+  const userToken = await getHashedUserToken();
+  if (!userToken) return null;
+  return `${messageQueueLocalStoreName}.${userToken}`;
+}
+
+async function getUserSeenQueueLocalStoreName() {
+  const userToken = await getHashedUserToken();
+  if (!userToken) return null;
+  return `${messageQueueLocalStoreName}.${userToken}.seen`;
+}
+
+async function getMessageLoadingStateLocalStoreName(queueId) {
+  const userToken = await getHashedUserToken();
+  if (!userToken) return null;
+  return `${messageQueueLocalStoreName}.${userToken}.message.${queueId}.loading`
+}

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,216 @@
+import Gist from '../gist';
+import { log } from "../utilities/log";
+import { getUserToken, isAnonymousUser } from "./user-manager";
+import { getUserQueue, getQueueSSEEndpoint, userQueueNextPullCheckLocalStoreName } from "../services/queue-service";
+import { showMessage, embedMessage } from "./message-manager";
+import { resolveMessageProperties } from "./gist-properties-manager";
+import { clearKeyFromLocalStore, getKeyFromLocalStore } from '../utilities/local-storage';
+import { updateBroadcastsLocalStore, getEligibleBroadcasts, isShowAlwaysBroadcast } from './message-broadcast-manager';
+import { updateQueueLocalStore, getMessagesFromLocalStore, isMessageLoading, setMessageLoading } from './message-user-queue-manager';
+import { settings } from '../services/settings';
+
+var sleep = time => new Promise(resolve => setTimeout(resolve, time))
+var poll = (promiseFn, time) => promiseFn().then(sleep(time).then(() => poll(promiseFn, time)));
+var pollingSetup = false;
+let sseSource = null;
+
+export async function startQueueListener() {
+  if (!pollingSetup) {
+    if (getUserToken()) {
+      log("Queue watcher started");
+      pollingSetup = true;
+      poll(() => new Promise(() => pullMessagesFromQueue()), 1000);
+    } else {
+      log("User token not setup, queue not started.");
+    }
+  } else {
+    await checkMessageQueue();
+  }
+}
+
+export async function checkMessageQueue() {
+  var broadcastMessages = await getEligibleBroadcasts();
+  var userMessages = await getMessagesFromLocalStore();
+  var allMessages = broadcastMessages.concat(userMessages);
+
+  log(`Messages in local queue: ${allMessages.length}`);
+  var orderedMessages = allMessages.sort((a, b) => a.priority - b.priority);
+  for (const message of orderedMessages) {
+    await handleMessage(message);
+  }
+}
+
+//TODO: Move this to a utility and only return valid messages (from: getEligibleBroadcasts getMessagesFromLocalStore) & to handleMessage
+async function handleMessage(message) {
+  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 ${currentUrl} 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 the message is not persistant, is not a show always broadcast, and is already loading, we skip it.
+  if (!messageProperties.persistent && !isShowAlwaysBroadcast(message) && await isMessageLoading(message.queueId)) {
+    log(`Not showing message with queueId ${message.queueId} because its already loading.`);
+    return false;
+  } else {
+    var loading = false;
+    if (messageProperties.isEmbedded) {
+      loading = await embedMessage(message, messageProperties.elementId);
+    } else {
+      loading = await showMessage(message);
+    }
+    if (loading) setMessageLoading(message.queueId);
+    return loading;
+  }
+}
+
+export async function pullMessagesFromQueue() {
+  // If SSE connection is already active, just check the local queue
+  if (settings.hasActiveSSEConnection()) {
+    // Close our SSE connection if we're not the main instance.
+    if (!settings.isSSEConnectionManagedBySDK() && sseSource) {
+      log("Not the main instance, closing our SSE connection.");
+      stopSSEListener();
+    }
+    await checkMessageQueue();
+    return;
+  } else {
+    if (sseSource) {
+      log("SSE connection not active, closing it.");
+      stopSSEListener();
+    }
+  }
+
+  // If SSE is enabled and user is not anonymous, set up SSE listener
+  if (settings.useSSE() && !isAnonymousUser()) {
+    await setupSSEQueueListener();
+    return;
+  }
+
+  // Fall back to polling
+  await checkQueueThroughPolling();
+}
+
+async function checkQueueThroughPolling() {
+  if (getUserToken()) {
+    if (Gist.isDocumentVisible) {
+      // We're using the TTL as a way to determine if we should check the queue, so if the key is not there, we check the queue.
+      if (getKeyFromLocalStore(userQueueNextPullCheckLocalStoreName) === null) {
+        var response = await getUserQueue();
+        var responseData = [];
+        if (response) {
+          if (response.status === 200 || response.status === 204) {
+            log("200 response, updating local store.");
+            responseData = response.data;
+            updateQueueLocalStore(responseData);
+            updateBroadcastsLocalStore(responseData);
+          } else if (response.status === 304) {
+            log("304 response, using local store.");
+          }
+          await checkMessageQueue();
+        } else {
+          log(`There was an error while checking message queue.`);
+        }
+      } else {
+        log(`Next queue pull scheduled for later.`);
+      }
+    } else {
+      log(`Document not visible, skipping queue check.`);
+    }
+  } else {
+    log(`User token reset, skipping queue check.`);
+  }
+}
+
+async function setupSSEQueueListener() {
+  // Close any existing SSE connection.
+  stopSSEListener();
+
+  // Get the SSE endpoint.
+  const sseURL = getQueueSSEEndpoint();
+  if (sseURL === null) {
+    log("SSE endpoint not available, falling back to polling.");
+    await checkQueueThroughPolling();
+    return;
+  }
+  log(`Starting SSE queue listener on ${sseURL}`);
+  sseSource = new EventSource(sseURL);
+  settings.setActiveSSEConnection();
+
+  sseSource.addEventListener("connected", async (event) => {
+    try {
+      log("SSE connection received:", event);
+      settings.setUseSSEFlag(true);
+      var config = JSON.parse(event.data);
+      if(config.heartbeat) {
+        settings.setSSEHeartbeat(config.heartbeat);
+        log(`SSE heartbeat set to ${config.heartbeat} seconds`);
+      }
+      settings.setActiveSSEConnection();
+    } catch (e) {
+      log(`Failed to parse SSE settings: ${e}`);
+    }
+
+    // On successful SSE connection, pull the queue.
+    clearKeyFromLocalStore(userQueueNextPullCheckLocalStoreName);
+    await checkQueueThroughPolling();
+  });
+
+  sseSource.addEventListener("messages", async (event) => {
+    try {
+      var messages = JSON.parse(event.data);
+      log("SSE message received:", messages);
+      await updateQueueLocalStore(messages);
+      await updateBroadcastsLocalStore(messages);
+      await checkMessageQueue();
+    } catch (e) {
+      log("Failed to parse SSE message", e);
+      stopSSEListener();
+    }
+  });
+
+  sseSource.addEventListener("error", async (event) => {
+    log("SSE error received:", event);
+    stopSSEListener();
+  });
+
+  sseSource.addEventListener("heartbeat", async (event) => {
+    log("SSE heartbeat received:", event);
+    settings.setActiveSSEConnection();
+    settings.setUseSSEFlag(true);
+  });
+}
+
+export function stopSSEListener(disconnectGlobally = false) {
+  // When logging out, we need every instance to disconnect.
+  if (disconnectGlobally) {
+    settings.removeActiveSSEConnection();
+  }
+
+  // Update settings to reflect disconnected state
+  if (disconnectGlobally || settings.isSSEConnectionManagedBySDK()) {
+    settings.setUseSSEFlag(false);
+  }
+
+  // No active SSE connection to stop
+  if (!sseSource) {
+    return;
+  }
+
+  // Close the connection and clean up
+  log("Stopping SSE queue listener...");
+  sseSource.close();
+  sseSource = null;
+}