Added exitClick handling

src/managers/gist-properties-manager.js

@@ -1,60 +1,36 @@
 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;
+    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;
 
-    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
-    }
+        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
+    };
 }

src/managers/message-component-manager.js

@@ -1,10 +1,12 @@
+import Gist from '../gist';
 import { log } from "../utilities/log";
 import { v4 as uuidv4 } from 'uuid';
 import { embedMessage } from "./message-manager";
 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"];
 
@@ -118,6 +120,7 @@ function sendOptionsToIframe(iframeId, options) {
 }
 
 export function showOverlayComponent(message) {
+  var messageProperties = resolveMessageProperties(message);
   var mainMessageElement = document.querySelector("#gist-overlay");
   if (mainMessageElement) {
     mainMessageElement.classList.add("visible");
@@ -128,11 +131,23 @@ export function showOverlayComponent(message) {
       messageElement.classList.add("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) {