customerio-gist-web 0.0.0-test-oidc

package/src/gist.js

@@ -0,0 +1,128 @@
+import EventEmitter from "./utilities/event-emitter";
+import { log } from "./utilities/log";
+import { clearExpiredFromLocalStore } from "./utilities/local-storage";
+import { startQueueListener, checkMessageQueue, stopSSEListener } from "./managers/queue-manager";
+import { setUserToken, clearUserToken, useGuestSession } from "./managers/user-manager";
+import { showMessage, embedMessage, hideMessage, removePersistentMessage, fetchMessageByInstanceId, logBroadcastDismissedLocally } from "./managers/message-manager";
+import { setUserLocale } from "./managers/locale-manager";
+import { setCustomAttribute, clearCustomAttributes, removeCustomAttribute } from "./managers/custom-attribute-manager";
+import { setupPreview } from "./utilities/preview-mode";
+
+export default class {
+  static async setup(config) {
+    this.events = new EventEmitter();
+    this.config = {
+      useAnonymousSession: config.useAnonymousSession === undefined ? false : config.useAnonymousSession,
+      siteId: config.siteId,
+      dataCenter: config.dataCenter,
+      env: config.env === undefined ? "prod" : config.env,
+      logging: config.logging === undefined ? false : config.logging,
+      experiments: config.experiments === undefined ? false : config.experiments
+    }
+    this.currentMessages = [];
+    this.overlayInstanceId = null;
+    this.currentRoute = null;
+    this.isDocumentVisible = true;
+    this.config.isPreviewSession = setupPreview();
+    clearExpiredFromLocalStore();
+
+    log(`Setup complete on ${this.config.env} environment.`);
+
+    if (!this.config.isPreviewSession && this.config.useAnonymousSession) {
+      useGuestSession();
+    }
+
+    await startQueueListener();
+
+    document.addEventListener("visibilitychange", async () => {
+      if (document.visibilityState === "hidden") {
+        this.isDocumentVisible = false;
+      } else  {
+        this.isDocumentVisible = true;
+        await checkMessageQueue();
+      }
+    }, false);
+  }
+
+  static async setCurrentRoute(route) {
+    this.currentRoute = route;
+    log(`Current route set to: ${route}`);
+    await checkMessageQueue();
+  }
+
+  static async setUserToken(userToken, expiryDate) {
+    if (this.config.isPreviewSession) return;
+    setUserToken(userToken, expiryDate);
+    stopSSEListener(true);
+    await startQueueListener();
+  }
+
+  static setUserLocale(userLocale) {
+    setUserLocale(userLocale);
+  }
+
+  static setCustomAttribute(key, value) {
+    return setCustomAttribute(key, value);
+  }
+
+  static clearCustomAttributes() {
+    clearCustomAttributes();
+  }
+
+  static removeCustomAttribute(key) {
+    return removeCustomAttribute(key);
+  }
+
+  static async clearUserToken() {
+    if (this.config.isPreviewSession) return;
+    clearUserToken();
+    if (this.config.useAnonymousSession) {
+      useGuestSession();
+    }
+    stopSSEListener(true);
+    await startQueueListener();
+  }
+
+  static async dismissMessage(instanceId) {
+    var message = fetchMessageByInstanceId(instanceId);
+    await hideMessage(message);
+    await removePersistentMessage(message);
+    await logBroadcastDismissedLocally(message);
+    await checkMessageQueue();
+  }
+
+  static async embedMessage(message, elementId) {
+    var messageResponse = await embedMessage(message, elementId);
+    return messageResponse ? messageResponse.instanceId : null;
+  }
+
+  static async showMessage(message) {
+    var messageResponse = await showMessage(message);
+    return messageResponse ? messageResponse.instanceId : null;
+  }
+
+  // Actions
+
+  static messageShown(message) {
+    log(`Message shown: ${message.messageId}`);
+    this.events.dispatch('messageShown', message);
+  }
+
+  static messageDismissed(message) {
+    if (message !== null) {
+      log(`Message dismissed: ${message.messageId}`);
+      this.events.dispatch('messageDismissed', message);
+    }
+  }
+
+  static messageError(message) {
+    log(`Message error: ${message.messageId}`);
+    this.events.dispatch('messageError', message);
+  }
+
+  static messageAction(message, action, name) {
+    log(`Message action: ${message.currentRoute}, ${action} with name ${name} on ${message.instanceId}`);
+    this.events.dispatch('messageAction', {message: message, action: action, name: name});
+  }
+
+}

package/src/index.js

@@ -0,0 +1,2 @@
+const Gist = require('./gist').default;
+module.exports = Gist;

package/src/managers/custom-attribute-manager.js

@@ -0,0 +1,82 @@
+import { log } from '../utilities/log';
+import { setKeyToLocalStore, getKeyFromLocalStore, clearKeyFromLocalStore } from '../utilities/local-storage';
+
+const customAttributesLocalStoreName = "gist.web.customAttributes";
+const defaultExpiryInDays = 30;
+
+// Internal map to store custom attributes in memory
+let customAttributesMap = new Map();
+
+function loadCustomAttributesFromStorage() {
+  const storedAttributes = getKeyFromLocalStore(customAttributesLocalStoreName);
+  if (storedAttributes) {
+    try {
+      customAttributesMap = new Map(storedAttributes);
+    } catch {
+      customAttributesMap = new Map();
+    }
+  } else {
+    customAttributesMap = new Map();
+  }
+}
+
+function saveCustomAttributesToStorage() {
+  const attributesArray = Array.from(customAttributesMap.entries());
+  const expiryDate = new Date();
+  expiryDate.setDate(expiryDate.getDate() + defaultExpiryInDays);
+  
+  setKeyToLocalStore(customAttributesLocalStoreName, attributesArray, expiryDate);
+  log(`Saved ${customAttributesMap.size} custom attributes to storage with TTL of ${defaultExpiryInDays} days`);
+}
+
+loadCustomAttributesFromStorage();
+
+export function setCustomAttribute(key, value) {
+  if (!key || typeof key !== 'string') {
+    log(`Invalid key for custom attribute: ${key}`);
+    return false;
+  }
+  
+  customAttributesMap.set(key, value);
+  saveCustomAttributesToStorage();
+  log(`Set custom attribute "${key}" to "${value}"`);
+  return true;
+}
+
+export function getCustomAttribute(key) {
+  if (!key || typeof key !== 'string') {
+    log(`Invalid key for custom attribute: ${key}`);
+    return null;
+  }
+  
+  return customAttributesMap.get(key) || null;
+}
+
+export function getAllCustomAttributes() {
+  return new Map(customAttributesMap);
+}
+
+export function clearCustomAttributes() {
+  customAttributesMap.clear();
+  clearKeyFromLocalStore(customAttributesLocalStoreName);
+  log(`Cleared all custom attributes`);
+}
+
+export function removeCustomAttribute(key) {
+  if (!key || typeof key !== 'string') {
+    log(`Invalid key for custom attribute: ${key}`);
+    return false;
+  }
+  
+  const existed = customAttributesMap.has(key);
+  customAttributesMap.delete(key);
+  
+  if (customAttributesMap.size > 0) {
+    saveCustomAttributesToStorage();
+  } else {
+    clearKeyFromLocalStore(customAttributesLocalStoreName);
+  }
+  
+  log(`Removed custom attribute "${key}"`);
+  return existed;
+}

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

@@ -0,0 +1,36 @@
+export function resolveMessageProperties(message) {
+    const defaults = {
+        isEmbedded: false,
+        elementId: "",
+        hasRouteRule: false,
+        routeRule: "",
+        position: "",
+        hasPosition: false,
+        shouldScale: false,
+        campaignId: null,
+        messageWidth: 414,
+        overlayColor: "#00000033",
+        persistent: false,
+        exitClick: false,
+        hasCustomWidth: false
+    };
+
+    const gist = message?.properties?.gist;
+    if (!gist) return defaults;
+
+    return {
+        isEmbedded: !!gist.elementId,
+        elementId: gist.elementId || "",
+        hasRouteRule: !!gist.routeRuleWeb,
+        routeRule: gist.routeRuleWeb || "",
+        position: gist.position || "",
+        hasPosition: !!gist.position,
+        shouldScale: !!gist.scale,
+        campaignId: gist.campaignId ?? null,
+        messageWidth: gist.messageWidth > 0 ? gist.messageWidth : defaults.messageWidth,
+        hasCustomWidth: gist.messageWidth > 0,
+        overlayColor: gist.overlayColor || defaults.overlayColor,
+        persistent: !!gist.persistent,
+        exitClick: !!gist.exitClick
+    };
+}

package/src/managers/locale-manager.js

@@ -0,0 +1,16 @@
+import { log } from '../utilities/log';
+import { setKeyToLocalStore, getKeyFromLocalStore } from '../utilities/local-storage';
+const userLocaleLocalStoreName = "gist.web.userLocale";
+
+export function getUserLocale() {
+  if (getKeyFromLocalStore(userLocaleLocalStoreName) !== null) {
+    return getKeyFromLocalStore(userLocaleLocalStoreName);
+  } else {
+    return navigator.language;
+  }
+}
+
+export function setUserLocale(locale) {
+  setKeyToLocalStore(userLocaleLocalStoreName, locale);
+  log(`Set user locate to "${locale}"`);
+}

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

@@ -0,0 +1,107 @@
+import { log } from '../utilities/log';
+import { setKeyToLocalStore, getKeyFromLocalStore } from '../utilities/local-storage';
+import { getHashedUserToken } from './user-manager';
+
+const broadcastsLocalStoreName = "gist.web.message.broadcasts";
+const broadcastsExpiryInMinutes = 60;
+
+export async function updateBroadcastsLocalStore(messages) {
+  const messageBroadcastLocalStoreName = await getMessageBroadcastLocalStoreName();
+  if (!messageBroadcastLocalStoreName) return;
+
+  const expiryDate = new Date();
+  expiryDate.setMinutes(expiryDate.getMinutes() + broadcastsExpiryInMinutes);
+
+  const messagesWithBroadcast = messages.filter(isMessageBroadcast);
+  setKeyToLocalStore(messageBroadcastLocalStoreName, messagesWithBroadcast, expiryDate);
+}
+
+export async function getEligibleBroadcasts() {
+  const messageBroadcastLocalStoreName = await getMessageBroadcastLocalStoreName();
+  if (!messageBroadcastLocalStoreName) return [];
+
+  const broadcasts = getKeyFromLocalStore(messageBroadcastLocalStoreName) ?? [];
+  return broadcasts.filter(broadcast => {
+    const { broadcast: broadcastDetails } = broadcast.properties.gist;
+    const shouldShow = getKeyFromLocalStore(getBroadcastShouldShowLocalStoreName(messageBroadcastLocalStoreName, broadcast.queueId)) ?? true;
+    const numberOfTimesShown = getKeyFromLocalStore(getNumberOfTimesShownLocalStoreName(messageBroadcastLocalStoreName, broadcast.queueId)) || 0;
+    const isFrequencyUnlimited = broadcastDetails.frequency.count === 0;
+    return shouldShow && (isFrequencyUnlimited || numberOfTimesShown < broadcastDetails.frequency.count);
+  });
+}
+
+export async function markBroadcastAsSeen(broadcastId) {
+  log(`Marking broadcast ${broadcastId} as seen.`);
+  const messageBroadcastLocalStoreName = await getMessageBroadcastLocalStoreName();
+  if (!messageBroadcastLocalStoreName) return;
+  
+  const broadcast = await fetchMessageBroadcast(messageBroadcastLocalStoreName, broadcastId);
+  if (!broadcast) return;
+
+  const { broadcast: broadcastDetails } = broadcast.properties.gist;
+  const numberOfTimesShownLocalStoreName = getNumberOfTimesShownLocalStoreName(messageBroadcastLocalStoreName, broadcastId);
+  const broadcastShouldShowLocalStoreName = getBroadcastShouldShowLocalStoreName(messageBroadcastLocalStoreName, broadcastId);
+  let numberOfTimesShown = getKeyFromLocalStore(numberOfTimesShownLocalStoreName) || 0;
+  setKeyToLocalStore(numberOfTimesShownLocalStoreName, numberOfTimesShown + 1);
+
+  if (broadcastDetails.frequency.count === 1) {
+    setKeyToLocalStore(broadcastShouldShowLocalStoreName, false);
+    log(`Marked broadcast ${broadcastId} as seen.`);
+  } else {
+    let showShowDate = new Date();
+    showShowDate.setSeconds(showShowDate.getSeconds() + broadcastDetails.frequency.delay);
+    setKeyToLocalStore(broadcastShouldShowLocalStoreName, false, showShowDate);
+    log(`Marked broadcast ${broadcastId} as seen, broadcast was seen ${numberOfTimesShown + 1} times, next show date is ${showShowDate}.`);
+  }
+}
+
+export async function markBroadcastAsDismissed(broadcastId) {
+  log(`Marking broadcast ${broadcastId} as dismissed.`);
+  const messageBroadcastLocalStoreName = await getMessageBroadcastLocalStoreName();
+  if (!messageBroadcastLocalStoreName) return;
+
+  const broadcast = await fetchMessageBroadcast(messageBroadcastLocalStoreName, broadcastId);
+  if (!broadcast) return;
+
+  const { broadcast: broadcastDetails } = broadcast.properties.gist;
+  const ignoreDismiss = broadcastDetails.frequency.ignoreDismiss;
+  
+  if (ignoreDismiss === true) {
+    log(`Broadcast ${broadcastId} is set to ignore dismiss.`);
+    return;
+  }
+
+  // default to not showing the broadcast again
+  const broadcastShouldShowLocalStoreName = getBroadcastShouldShowLocalStoreName(messageBroadcastLocalStoreName, broadcastId);
+  setKeyToLocalStore(broadcastShouldShowLocalStoreName, false);
+  log(`Marked broadcast ${broadcastId} as dismissed and will not show again.`);
+}
+
+async function fetchMessageBroadcast(messageBroadcastLocalStoreName, broadcastId) {
+  const broadcasts = getKeyFromLocalStore(messageBroadcastLocalStoreName);
+  return broadcasts.find(message => message.queueId === broadcastId);
+}
+
+export function isMessageBroadcast(message) {
+  return message.properties && message.properties.gist && message.properties.gist.broadcast;
+}
+
+export function isShowAlwaysBroadcast(message) {
+  if (!isMessageBroadcast(message)) return false;
+  const { broadcast: broadcastDetails } = message.properties.gist;
+  return broadcastDetails.frequency.delay === 0 && broadcastDetails.frequency.count === 0;
+}
+
+async function getMessageBroadcastLocalStoreName() {
+  const userToken = await getHashedUserToken();
+  if (!userToken) return null;
+  return `${broadcastsLocalStoreName}.${userToken}`;
+}
+
+function getNumberOfTimesShownLocalStoreName(messageBroadcastLocalStoreName, broadcastId) {
+  return `${messageBroadcastLocalStoreName}.${broadcastId}.numberOfTimesShown`;
+}
+
+function getBroadcastShouldShowLocalStoreName(messageBroadcastLocalStoreName, broadcastId) {
+  return `${messageBroadcastLocalStoreName}.${broadcastId}.shouldShow`;
+}

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

@@ -0,0 +1,192 @@
+import Gist from '../gist';
+import { log } from "../utilities/log";
+import { resolveMessageProperties } from "./gist-properties-manager";
+import { embedHTMLTemplate } from "../templates/embed";
+import { messageHTMLTemplate } from "../templates/message";
+import { positions } from "./page-component-manager";
+
+const delay = ms => new Promise(res => setTimeout(res, ms));
+const wideOverlayPositions = ["x-gist-top", "x-gist-bottom", "x-gist-floating-top", "x-gist-floating-bottom"];
+
+export function isElementLoaded(elementId) {
+  var element = safelyFetchElement(elementId);
+  if (element && element.classList.contains("gist-visible")) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+export function loadEmbedComponent(elementId, url, message, options) {
+  var element = safelyFetchElement(elementId);
+  if (element) {
+    var messageElementId = getMessageElementId(message.instanceId);
+    element.classList.add(messageElementId);
+    var messageProperties = resolveMessageProperties(message);
+    var messageWidth = messageProperties.messageWidth + "px";
+    if (wideOverlayPositions.includes(elementId) && !messageProperties.hasCustomWidth) {
+        messageWidth = "100%";
+    }
+    // Only set the width if it's a position offered by the SDK
+    if (positions.includes(elementId)) {
+      element.style.width = messageWidth;
+    }
+    if (!elementHasHeight(elementId)) {
+      element.style.height = "0px";
+    }
+    element.innerHTML = embed(url, message, messageProperties);
+    attachIframeLoadEvent(messageElementId, options);
+  } 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(message, size) {
+  var elementId = message.elementId ? message.elementId : getMessageElementId(message.instanceId);
+  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 (message.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, options) {
+  document.body.insertAdjacentHTML('afterbegin', component(url, message));
+  attachIframeLoadEvent(getMessageElementId(message.instanceId), options);
+}
+
+function attachIframeLoadEvent(elementId, options) {
+  const iframe = document.getElementById(elementId);
+  if (iframe) {
+      iframe.onload = function() {
+          sendOptionsToIframe(elementId, options); // Send the options when iframe loads
+      };
+  }
+}
+
+function sendOptionsToIframe(iframeId, options) {
+  const iframe = document.getElementById(iframeId);
+  if (iframe && iframe.contentWindow) {
+      iframe.contentWindow.postMessage({ options: options }, '*');
+  }
+}
+
+export function showOverlayComponent(message) {
+  var messageProperties = resolveMessageProperties(message);
+  var mainMessageElement = document.querySelector("#gist-overlay");
+  if (mainMessageElement) {
+    mainMessageElement.classList.add("gist-visible");
+    var messageElement = document.querySelector(".gist-message");
+    if (message.position) {
+      messageElement.classList.add("gist-" + message.position);
+    } else {
+      messageElement.classList.add("gist-center");
+    }
+    setTimeout(showMessage, 100);
+    // If exitClick is set to true, we add a dismiss listener after a 1-second delay to prevent accidental dismissals.
+    if (messageProperties.exitClick) { setTimeout(() => addDismissListener(message.instanceId), 1000); }
+  } else {
+    removeOverlayComponent();
+  }
+}
+
+function addDismissListener(instanceId) {
+  // We check if the overlay is still active before adding the dismiss listener
+  var mainMessageElement = document.querySelector("#gist-overlay");
+  if (mainMessageElement) {
+    mainMessageElement.addEventListener("click", function() {
+      Gist.dismissMessage(instanceId);
+    });
+  }
+}
+
+export async function hideOverlayComponent() {
+  var message = document.querySelector(".gist-message");
+  if (message) {
+    message.classList.remove("gist-visible");
+    await delay(300);
+  }
+  removeOverlayComponent();
+}
+
+export function removeOverlayComponent() {
+  var mainMessageElement = document.querySelector("#gist-embed-message");
+  if (mainMessageElement) {
+    mainMessageElement.parentNode.removeChild(mainMessageElement);
+  }
+}
+
+export function changeOverlayTitle(instanceId, title) {
+  var element = safelyFetchElement(getMessageElementId(instanceId));
+  if (element) {
+    element.title = title;
+  }
+}
+
+function getMessageElementId(instanceId) {
+  return `gist-${instanceId}`;
+}
+
+function showMessage() {
+  var messageElement = document.querySelector(".gist-message");
+  if (messageElement) messageElement.classList.add("gist-visible");
+}
+
+function embed(url, message, messageProperties) {
+  var template = embedHTMLTemplate(getMessageElementId(message.instanceId), messageProperties, url);
+  return template;
+}
+
+function component(url, message) {
+  var messageProperties = resolveMessageProperties(message);
+  var template = messageHTMLTemplate(getMessageElementId(message.instanceId), messageProperties, url);
+  return template;
+}
+
+function safelyFetchElement(elementId) {
+  try {
+    var element = document.querySelector(`#${elementId}`);
+    if (element) {
+      return element;
+    } else {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+}