customerio-gist-web 0.0.0-test-oidc

package/src/managers/user-manager.js

@@ -0,0 +1,88 @@
+import { v4 as uuidv4 } from 'uuid';
+import { log } from '../utilities/log';
+import { setKeyToLocalStore, getKeyFromLocalStore, clearKeyFromLocalStore } from '../utilities/local-storage';
+import { userQueueNextPullCheckLocalStoreName } from '../services/queue-service';
+
+const userTokenLocalStoreName = "gist.web.userToken";
+const usingGuestUserTokenLocalStoreName = "gist.web.usingGuestUserToken";
+const guestUserTokenLocalStoreName = "gist.web.guestUserToken";
+const defaultExpiryInDays = 30;
+
+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() + defaultExpiryInDays);
+  }
+  setKeyToLocalStore(userTokenLocalStoreName, userToken, expiryDate);
+
+  if (isUsingGuestUserToken()) {
+    // Removing pull check time key so that we check the queue immediately after the userToken is set.
+    clearKeyFromLocalStore(userQueueNextPullCheckLocalStoreName);
+    clearKeyFromLocalStore(usingGuestUserTokenLocalStoreName);
+  }
+  log(`Set user token "${userToken}" with expiry date set to ${expiryDate}`);
+}
+
+export function useGuestSession() {
+  // Guest sessions should never override existing sessions
+  if (getUserToken() === null) {
+    var guestUserToken = getKeyFromLocalStore(guestUserTokenLocalStoreName);
+    if (guestUserToken == null) {
+      guestUserToken = uuidv4();
+      setKeyToLocalStore(guestUserTokenLocalStoreName, guestUserToken);
+      log(`Set guest user token "${guestUserToken}" with expiry date set to 1 year from today`);
+    }
+
+    setKeyToLocalStore(userTokenLocalStoreName, guestUserToken);
+    setKeyToLocalStore(usingGuestUserTokenLocalStoreName, true);
+    log(`Using anonymous session with token: "${guestUserToken}"`);
+  }
+}
+
+export function isAnonymousUser() {
+  return isUsingGuestUserToken();
+}
+
+export async function getHashedUserToken() {
+  var userToken = getUserToken();
+  if (userToken === null) {
+    return null;
+  }
+  return await hashString(userToken);
+}
+
+export function getEncodedUserToken() {
+  var userToken = getUserToken();
+  if (userToken === null) {
+    return null;
+  }
+  return btoa(userToken);
+}
+
+export function clearUserToken() {
+  clearKeyFromLocalStore(userTokenLocalStoreName);
+  log(`Cleared user token`);
+}
+
+async function hashString(message) {
+  // Encode the message as a Uint8Array
+  const encoder = new TextEncoder();
+  const data = encoder.encode(message);
+
+  // Hash the message using the SHA-256 algorithm
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+
+  // Convert the hash to a hexadecimal string
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
+
+  return hashHex;
+}

package/src/services/log-service.js

@@ -0,0 +1,19 @@
+import { UserNetworkInstance } from './network';
+
+export async function logUserMessageView(queueId) {
+  try {
+    var response = await UserNetworkInstance().post(`/api/v1/logs/queue/${queueId}`);
+    return response;
+  } catch (error) {
+    return error.response;
+  }
+}
+
+export async function logMessageView(messageId) {
+  try {
+    var response = await UserNetworkInstance().post(`/api/v1/logs/message/${messageId}`);
+    return response;
+  } catch (error) {
+    return error.response;
+  }
+}

package/src/services/network.js

@@ -0,0 +1,81 @@
+import Gist from '../gist';
+import { settings } from './settings';
+import { getEncodedUserToken } from "../managers/user-manager";
+
+export function UserNetworkInstance() {
+  const baseURL = settings.GIST_QUEUE_API_ENDPOINT[Gist.config.env]
+  const defaultHeaders = {
+    'X-CIO-Site-Id': Gist.config.siteId,
+    'X-CIO-Client-Platform': 'web',
+  };
+
+  const userToken = getEncodedUserToken();
+  if (userToken != null) {
+    defaultHeaders['X-Gist-Encoded-User-Token'] = userToken;
+  }
+
+  async function request(path, options = {}) {
+    const url = baseURL + path;
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 5000);
+
+    try {
+      const response = await fetch(url, {
+        method: options.method || 'GET',
+        headers: {
+          ...defaultHeaders,
+          ...(options.headers || {}),
+        },
+        body: options.method && options.method.toUpperCase() !== 'GET' ? options.body : undefined,
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeout);
+
+      const isJSON = response.headers.get("content-type")?.includes("application/json");
+      const data = isJSON ? await response.json() : await response.text();
+
+      const headersObj = Object.fromEntries(response.headers.entries());
+
+      if (response.status < 200 || response.status >= 400) {
+        throw {
+          response: {
+            status: response.status,
+            data,
+            headers: headersObj,
+          }
+        };
+      }
+
+      return {
+        status: response.status,
+        headers: headersObj,
+        data,
+      };
+    } catch (err) {
+      clearTimeout(timeout);
+
+      if (!err.response) {
+        err.response = {
+          status: 0,
+          data: err.message || 'Unknown error',
+        };
+      }
+
+      throw err;
+    }
+  }
+
+  request.post = (path, data = {}, config = {}) => {
+    return request(path, {
+      method: 'POST',
+      body: JSON.stringify(data),
+      headers: {
+        'Content-Type': 'application/json',
+        ...(config.headers || {})
+      }
+    });
+  };
+
+  return request;
+}

package/src/services/queue-service.js

@@ -0,0 +1,75 @@
+import Gist from '../gist';
+import { UserNetworkInstance } from './network';
+import { getKeyFromLocalStore, setKeyToLocalStore } from '../utilities/local-storage';
+import { log } from "../utilities/log";
+import { isUsingGuestUserToken, getEncodedUserToken } from '../managers/user-manager';
+import { getUserLocale } from '../managers/locale-manager';
+import { settings } from './settings';
+import { v4 as uuidv4 } from 'uuid';
+
+const defaultPollingDelayInSeconds = 600;
+var currentPollingDelayInSeconds = defaultPollingDelayInSeconds;
+var checkInProgress = false;
+
+export const userQueueNextPullCheckLocalStoreName = "gist.web.userQueueNextPullCheck";
+export const sessionIdLocalStoreName = "gist.web.sessionId";
+export async function getUserQueue() {
+  var response;
+  try {
+    if (!checkInProgress) {
+      checkInProgress = true;
+      var headers = {
+        "X-Gist-User-Anonymous": isUsingGuestUserToken(),
+        "Content-Language": getUserLocale()
+      }
+      response = await UserNetworkInstance().post(`/api/v3/users?sessionId=${getSessionId()}`, {}, { headers: headers });
+    }
+  } catch (error) {
+    if (error.response) {
+      response = error.response;
+    } else {
+      log(`Error getting user queue: ${error}`);
+    }
+  } finally {
+    checkInProgress = false;
+    scheduleNextQueuePull(response);
+    setQueueUseSSE(response);
+  }
+
+  return response;
+}
+
+function setQueueUseSSE(response) {
+  const useSSE = response?.headers?.["x-cio-use-sse"]?.toLowerCase() === "true";
+  settings.setUseSSEFlag(useSSE);
+}
+
+function getSessionId() {
+  var sessionId = getKeyFromLocalStore(sessionIdLocalStoreName);
+  if (!sessionId) {
+    sessionId = uuidv4();
+  }
+  // The session ID TTL is renewed with every poll request and extended by 30 minutes.
+  setKeyToLocalStore(sessionIdLocalStoreName, sessionId, new Date(new Date().getTime() + 1800000));
+  return sessionId;
+}
+
+function scheduleNextQueuePull(response) {
+  if (response && response.headers) {
+    var pollingInterval = response.headers['x-gist-queue-polling-interval'];
+    if (pollingInterval && pollingInterval > 0) {
+      currentPollingDelayInSeconds = pollingInterval;
+    }
+  }
+  var expiryDate = new Date(new Date().getTime() + currentPollingDelayInSeconds * 1000);
+  setKeyToLocalStore(userQueueNextPullCheckLocalStoreName, currentPollingDelayInSeconds, expiryDate);
+}
+
+export function getQueueSSEEndpoint() {
+  var encodedUserToken = getEncodedUserToken();
+  if (encodedUserToken === null) {
+    log("No user token available for SSE endpoint.");
+    return null;
+  }
+  return settings.GIST_QUEUE_REALTIME_API_ENDPOINT[Gist.config.env] + `/api/v3/sse?userToken=${encodedUserToken}&siteId=${Gist.config.siteId}&sessionId=${getSessionId()}`;
+}

package/src/services/settings.js

@@ -0,0 +1,65 @@
+import { getKeyFromLocalStore, setKeyToLocalStore, clearKeyFromLocalStore } from '../utilities/local-storage';
+import { log } from '../utilities/log';
+import { v4 as uuidv4 } from 'uuid';
+const userQueueUseSSELocalStoreName = "gist.web.userQueueUseSSE";
+const userQueueActiveSSEConnectionLocalStoreName = "gist.web.activeSSEConnection";
+const heartbeatSlop = 5;
+let sseHeartbeat = 30;
+let sdkId;
+
+export const settings = {
+  RENDERER_HOST: "https://code.gist.build",
+  ENGINE_API_ENDPOINT: {
+    "prod": "https://engine.api.gist.build",
+    "dev": "https://engine.api.dev.gist.build",
+    "local": "http://engine.api.local.gist.build:82"
+  },
+  GIST_QUEUE_API_ENDPOINT: {
+    "prod": "https://consumer.cloud.gist.build",
+    "dev": "https://consumer.cloud.dev.gist.build",
+    "local": "http://api.local.gist.build:86"
+  },
+  GIST_QUEUE_REALTIME_API_ENDPOINT: {
+    "prod": "https://realtime.cloud.gist.build",
+    "dev": "https://realtime.cloud.dev.gist.build",
+    "local": "http://api.local.gist.build:3000"
+  },
+  GIST_VIEW_ENDPOINT: {
+    "prod": "https://renderer.gist.build/3.0",
+    "dev": "https://renderer.gist.build/3.0",
+    "local": "http://app.local.gist.build:8080/web"
+  },
+  getSdkId: function() {
+    if (!sdkId) {
+      sdkId = uuidv4();
+    }
+    return sdkId;
+  },
+  useSSE: function() {
+    return getKeyFromLocalStore(userQueueUseSSELocalStoreName) ?? false;
+  },
+  setUseSSEFlag: function(useSSE) {
+    setKeyToLocalStore(userQueueUseSSELocalStoreName, useSSE, new Date(new Date().getTime() + 60000));
+    log(`Set user uses SSE to "${useSSE}"`);
+  },
+  removeActiveSSEConnection: function() {
+    clearKeyFromLocalStore(userQueueActiveSSEConnectionLocalStoreName);
+  },
+  setActiveSSEConnection: function() {
+    setKeyToLocalStore(userQueueActiveSSEConnectionLocalStoreName, settings.getSdkId(), new Date(new Date().getTime() + settings.getSSEHeartbeat()));
+  },
+  hasActiveSSEConnection: function() {
+    return getKeyFromLocalStore(userQueueActiveSSEConnectionLocalStoreName) ?? false;
+  },
+  isSSEConnectionManagedBySDK: function() {
+    return getKeyFromLocalStore(userQueueActiveSSEConnectionLocalStoreName) === settings.getSdkId();
+  },
+  getSSEHeartbeat: function() {
+    return (sseHeartbeat + heartbeatSlop) * 1000;
+  },
+  setSSEHeartbeat: function(heartbeat) {
+    if (heartbeat && heartbeat > 0) {
+      sseHeartbeat = heartbeat;
+    }
+  }
+}

package/src/templates/embed.js

@@ -0,0 +1,69 @@
+export function embedHTMLTemplate(elementId, messageProperties, url) {
+    var maxWidthBreakpoint = 800;
+    if (messageProperties.messageWidth > maxWidthBreakpoint) {
+        maxWidthBreakpoint = messageProperties.messageWidth;
+    }
+    var template = `
+    <div id="gist-embed">
+        <style>
+            #x-gist-floating-top, #x-gist-floating-top-left, #x-gist-floating-top-right {
+                position: fixed;
+                top: 0px;
+                z-index: 1000000;
+            }
+            #x-gist-floating-bottom, #x-gist-floating-bottom-left, #x-gist-floating-bottom-right {
+                position: fixed;
+                bottom: 0px;
+                z-index: 1000000;
+            }
+            #x-gist-bottom, #x-gist-top, #x-gist-floating-top, #x-gist-floating-bottom {
+                left: 50%;
+                transform: translate(-50%, 0%);
+            }
+            #x-gist-floating-top-right, #x-gist-floating-bottom-right {
+                right: 0px;
+            }
+            #gist-embed {
+                position: relative;
+                height: 100%;
+                width: 100%;
+            }
+            #gist-embed-container {
+                position: relative;
+                height: 100%;
+                width: 100%;
+            }
+            #gist-embed-container .gist-frame {
+                height: 100%;
+                width: 100%;
+                border: none;
+            }
+            #x-gist-top.${elementId},
+            #x-gist-bottom.${elementId},
+            #x-gist-floating-top.${elementId},
+            #x-gist-floating-bottom.${elementId},
+            #x-gist-floating-top-left.${elementId},
+            #x-gist-floating-top-right.${elementId},
+            #x-gist-floating-bottom-left.${elementId},
+            #x-gist-floating-bottom-right.${elementId} {
+                transition: height 0.1s ease-in-out;
+            }
+            @media (max-width: ${maxWidthBreakpoint}px) {
+                #x-gist-top.${elementId},
+                #x-gist-bottom.${elementId},
+                #x-gist-floating-top.${elementId},
+                #x-gist-floating-bottom.${elementId},
+                #x-gist-floating-top-left.${elementId},
+                #x-gist-floating-top-right.${elementId},
+                #x-gist-floating-bottom-left.${elementId},
+                #x-gist-floating-bottom-right.${elementId} {
+                    width: 100% !important;
+                }
+            }
+        </style>
+        <div id="gist-embed-container">
+            <iframe id="${elementId}" class="gist-frame" src="${url}"></iframe>
+        </div>
+    </div>`;
+    return template
+}

package/src/templates/message.js

@@ -0,0 +1,57 @@
+export function messageHTMLTemplate(elementId, messageProperties, url) {
+    var maxWidthBreakpoint = 600;
+    if (messageProperties.messageWidth > maxWidthBreakpoint) {
+      maxWidthBreakpoint = messageProperties.messageWidth;    
+    }
+    var template = `
+    <div id="gist-embed-message">
+        <style>
+            #gist-overlay.gist-background {
+                position: fixed;
+                z-index: 9999999998;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                background-color: ${messageProperties.overlayColor};
+                visibility: hidden;
+            }
+            #gist-overlay.gist-background.gist-visible {
+                visibility: visible;
+            }
+            .gist-message {
+                width: ${messageProperties.messageWidth}px;
+                position: absolute;
+                border: none;
+                opacity: 0;
+                transition: opacity 0.3s ease-in-out, height 0.1s ease-in-out;
+                z-index: 9999999999;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+            .gist-message.gist-visible {
+                opacity: 1;
+                pointer-events: auto;
+            }
+            .gist-message.gist-center {
+                transform: translate(-50%, -50%);
+                top: 50%;
+            }
+            .gist-message.gist-bottom {
+                bottom: 0;
+            }
+            .gist-message.gist-top {
+                top: 0;
+            }
+            @media (max-width: ${maxWidthBreakpoint}px) {
+                .gist-message {
+                    width: 100%;
+                }
+            }
+        </style>
+        <div id="gist-overlay" class="gist-background">
+            <iframe id="${elementId}" class="gist-message" src="${url}"></iframe>
+        </div>
+    </div>`;
+    return template;
+}

package/src/utilities/event-emitter.js

@@ -0,0 +1,12 @@
+export default class EventEmitter {
+  on(name, callback) {
+      var callbacks = this[name];
+      if (!callbacks) this[name] = [callback];
+      else callbacks.push(callback);
+  }
+
+  dispatch(name, event) {
+      var callbacks = this[name];
+      if (callbacks) callbacks.forEach(callback => callback(event));
+  }
+}

package/src/utilities/local-storage.js

@@ -0,0 +1,86 @@
+import { log } from "./log";
+
+const maxExpiryDays = 365;
+
+const isPersistingSessionLocalStoreName = "gist.web.isPersistingSession";
+
+// Switches between local and session storage
+export function shouldPersistSession(presisted) {
+    sessionStorage.setItem(isPersistingSessionLocalStoreName, presisted);
+}
+
+export function setKeyToLocalStore(key, value, ttl = null) {
+    var expiryDate = ttl;
+    if (!expiryDate) {
+        expiryDate = new Date();
+        expiryDate.setDate(expiryDate.getDate() + maxExpiryDays);
+    }
+    const item = {
+        value: value,
+        expiry: expiryDate,
+    };
+    getStorage().setItem(key, JSON.stringify(item));
+}
+
+export function getKeyFromLocalStore(key) {
+    return checkKeyForExpiry(key);
+}
+
+export function clearKeyFromLocalStore(key) {
+    getStorage().removeItem(key);
+}
+
+export function clearExpiredFromLocalStore() {
+    const storage = getStorage();
+    for (let i = storage.length - 1; i >= 0; i--) {
+        checkKeyForExpiry(storage.key(i));
+    }
+}
+
+export function isSessionBeingPersisted() {
+    const currentValue = sessionStorage.getItem(isPersistingSessionLocalStoreName);
+    if (currentValue === null) {
+        sessionStorage.setItem(isPersistingSessionLocalStoreName, "true");
+        return true;
+    }
+    return currentValue === "true";
+}
+
+// Helper function to select the correct storage based on the session flag
+function getStorage() {
+    return isSessionBeingPersisted() ? localStorage : sessionStorage;
+}
+
+function checkKeyForExpiry(key) {
+    if (!key) return null;
+
+    try {
+        const itemStr = getStorage().getItem(key);
+        if (!itemStr) return null;
+
+        const item = JSON.parse(itemStr);
+        if (!item.expiry) return item.value;
+
+        const now = new Date();
+        const expiryTime = new Date(item.expiry);
+        
+        // remove old cache entries with long expiry times
+        const isBroadcastOrUserKey = (key.startsWith("gist.web.message.broadcasts") && !key.endsWith("shouldShow") && !key.endsWith("numberOfTimesShown")) || (key.startsWith("gist.web.message.user") && !key.endsWith("seen"));
+        const sixtyMinutesFromNow = new Date(now.getTime() + 61 * 60 * 1000);
+        if (isBroadcastOrUserKey && expiryTime.getTime() > sixtyMinutesFromNow.getTime()) {
+            clearKeyFromLocalStore(key);
+            return null;
+        }
+        
+        if (now.getTime() > expiryTime.getTime()) {
+            clearKeyFromLocalStore(key);
+            return null;
+        }
+
+        return item.value;
+    } catch (e) {
+        log(`Error checking key ${key} for expiry: ${e}`);
+    }
+    
+    return null;
+}

package/src/utilities/log.js

@@ -0,0 +1,7 @@
+import Gist from '../gist';
+
+export function log(message) {
+  if (Gist.config && Gist.config.logging) {
+    console.log(`Gist: ${message}`);
+  }
+}

package/src/utilities/preview-mode.js

@@ -0,0 +1,20 @@
+import Gist from '../gist';
+import { log } from './log';
+import { shouldPersistSession, isSessionBeingPersisted } from './local-storage';
+
+const previewParamId = "cioPreviewId";
+
+export function setupPreview() {
+    const cioPreviewId = fetchPreviewId();
+    if (cioPreviewId) {
+        shouldPersistSession(false);
+        Gist.setUserToken(cioPreviewId);
+        log(`Preview mode enabled with user token: ${cioPreviewId}`);
+    }
+    return !isSessionBeingPersisted();
+}
+
+function fetchPreviewId() {
+    const params = new URLSearchParams(window.location.search);
+    return params.get(previewParamId);
+}

package/test.sh

@@ -0,0 +1,4 @@
+# Testing script to open an incognito window to the examples
+#!/bin/bash
+
+open -na "Google Chrome" --args -incognito "http://localhost:8080/examples/"

package/webpack.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  watchOptions: {
+    poll: 1000
+  },
+  output: {
+    library: 'Gist',
+    libraryTarget: 'umd',
+    filename: 'gist.js',
+    globalObject: 'this'
+  }
+};