react-notify-sdk 1.0.62 → 1.0.63

package/dist/FadeWrapper.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { FeatureMessages } from './types';
 interface FadeWrapperProps {
     visible: boolean;
-    message: FeatureMessages;
+    message: FeatureMessages | null;
     device: string | null;
     children: React.ReactNode;
 }

package/dist/FeatureMessage.d.ts

@@ -1,6 +1,6 @@
 import { FeatureMessages } from './types';
 interface FeatureMessageProps {
-    message: FeatureMessages;
+    message: FeatureMessages | null;
     onDismiss?: (id: string) => void;
 }
 declare const FeatureMessage: ({ message, onDismiss }: FeatureMessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/FeatureMessage.js

@@ -31,16 +31,16 @@ const FeatureMessage = ({ message, onDismiss }) => {
         if (e.target.closest('[data-dismiss-button]')) {
             return;
         }
-        const action = message.click_action || 'none';
+        const action = message?.click_action || 'none';
         // Perform the action
         switch (action) {
             case 'navigate':
-                if (message.click_url) {
-                    spaNavigate(message.click_url);
+                if (message?.click_url) {
+                    spaNavigate(message?.click_url);
                 }
                 break;
             case 'external':
-                if (message.click_url) {
+                if (message?.click_url) {
                     window.open(message.click_url, '_blank', 'noopener,noreferrer');
                 }
                 break;
@@ -54,7 +54,7 @@ const FeatureMessage = ({ message, onDismiss }) => {
     };
     const handleDismiss = () => {
         if (onDismiss) {
-            onDismiss(message.id);
+            onDismiss(message?.id ? message.id : '');
         }
     };
     const filterButton = (type) => {
@@ -85,8 +85,8 @@ const FeatureMessage = ({ message, onDismiss }) => {
             borderRadius: "0.5rem", // rounded-lg
             backgroundColor: message?.backgroundColor,
             borderWidth: "1px",
-            borderColor: hexToRgba(message?.borderColor, 0.3),
-            boxShadow: `0 10px 15px -3px ${hexToRgba(message.borderColor, 0.4)}, 0 4px 6px -4px ${hexToRgba(message.borderColor, 0.4)}`
+            borderColor: hexToRgba(message?.borderColor ? message?.borderColor : '', 0.3),
+            boxShadow: `0 10px 15px -3px ${hexToRgba(message?.borderColor ? message?.borderColor : '', 0.4)}, 0 4px 6px -4px ${hexToRgba(message?.borderColor ? message?.borderColor : '', 0.4)}`
         }, children: [_jsxs("div", { style: {
                     width: message?.click_action === "view only" ? "100%" : "80%", // w-4/5
                     height: "100%", // h-full

package/dist/FeatureMessageProvider.d.ts

@@ -1,2 +1,2 @@
 import { FeatureMessageProviderProps } from './types';
-export declare const FeatureMessageProvider: ({ projectKey, }: FeatureMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FeatureMessageProvider: ({ projectKey, }: FeatureMessageProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/FeatureMessageProvider.js

@@ -6,8 +6,8 @@ import { getSupabaseClient } from './supabase/supabaseClient';
 import useDeviceDetection from './useDeviceDetection';
 import FadeWrapper from './FadeWrapper';
 // Wildcard route matching utility
-const routeMatches = (pattern, path, baseUrl) => {
-    if (pattern === path && baseUrl === window.location.origin)
+const routeMatches = (pattern, path) => {
+    if (pattern === path)
         return true;
     const escapeRegex = (str) => str.replace(/([.+^=!:${}()|[\]/\\])/g, "\\$1");
     const regexPattern = "^" + pattern.split("*").map(escapeRegex).join(".*") + "$";
@@ -18,8 +18,16 @@ const routeMatches = (pattern, path, baseUrl) => {
         return false;
     }
 };
+const baseUrlMatches = (msgBaseUrl) => {
+    if (!msgBaseUrl)
+        return true; // backward compatibility
+    if (typeof window === "undefined")
+        return false;
+    return msgBaseUrl === window.location.origin;
+};
 export const FeatureMessageProvider = ({ projectKey, }) => {
     const [message, setMessage] = useState(null);
+    const [messages, setMessages] = useState([]);
     const [visible, setVisible] = useState(false);
     const [pathname, setPathname] = useState(() => typeof window !== 'undefined' ? window.location.pathname : '');
     const device = useDeviceDetection();
@@ -48,11 +56,11 @@ export const FeatureMessageProvider = ({ projectKey, }) => {
         setVisible(false);
     };
     const isDismissed = (message) => {
-        const dismissed = getDismissedMessages()[message.id];
+        const dismissed = getDismissedMessages()[message?.id];
         if (!dismissed)
             return false;
         // Re-show if message changed
-        return dismissed.messageUpdatedAt === message.updated_at;
+        return dismissed.messageUpdatedAt === message?.updated_at;
     };
     // Create supabase client with project key header
     const supabaseClient = getSupabaseClient(projectKey);
@@ -87,58 +95,67 @@ export const FeatureMessageProvider = ({ projectKey, }) => {
         if (typeof window === 'undefined')
             return; // Skip on server
         let fadeOutTimer = null; // Track the timer
-        const fetchMessage = async () => {
+        const origin = window.location.origin;
+        // 🔹 1. Fetch ALL active messages once per project
+        const fetchMessages = async () => {
             const { data } = await supabaseClient
-                .from('feature_messages')
-                .select('*')
-                .eq('project_key', projectKey)
-                .eq('route', pathname)
-                .eq('base_url', window.location.origin)
-                .eq('is_active', true)
-                .order('created_at', { ascending: false });
-            const match = data?.find((msg) => routeMatches(msg.route, pathname, msg.base_url));
-            if (match && !isDismissed(match)) {
-                if (fadeOutTimer)
-                    clearTimeout(fadeOutTimer); // Clear any pending timeout
-                setMessage(match);
-                setVisible(true); // Fade in
-                console.log("match set");
-            }
-            else {
-                // Trigger fade out before removing message
-                fadeOutTimer = setTimeout(() => setMessage(null), 300);
-                setVisible(false);
-                console.log("match not set");
+                .from("feature_messages")
+                .select("*")
+                .eq("project_key", projectKey)
+                .eq("is_active", true)
+                .order("created_at", { ascending: false });
+            if (data) {
+                setMessages(data);
             }
         };
-        fetchMessage();
+        fetchMessages();
+        // 🔹 2. Subscribe ONCE per project
         const subscription = supabaseClient
-            .channel('feature_messages_channel')
-            .on('postgres_changes', {
-            event: '*',
-            schema: 'public',
-            table: 'feature_messages',
-        }, (payload) => {
+            .channel("feature_messages_channel")
+            .on("postgres_changes", { event: "*", schema: "public", table: "feature_messages" }, (payload) => {
             const msg = payload.new;
-            if (msg.project_key === projectKey && msg.is_active && routeMatches(msg.route, pathname, msg.base_url)) {
-                if (fadeOutTimer)
-                    clearTimeout(fadeOutTimer); // Clear any pending timeout
-                setMessage(msg);
-                setVisible(true);
-                console.log("renders message");
-            }
-            else {
-                setVisible(false);
-                console.log("does not render message");
-                fadeOutTimer = setTimeout(() => setMessage(null), 300);
-            }
+            if (msg.project_key !== projectKey)
+                return;
+            setMessages((prev) => {
+                const filtered = prev.filter((m) => m.id !== msg.id);
+                if (msg.is_active) {
+                    return [msg, ...filtered];
+                }
+                return filtered;
+            });
         })
             .subscribe();
         return () => {
+            if (fadeOutTimer)
+                clearTimeout(fadeOutTimer);
             supabaseClient.removeChannel(subscription);
         };
-    }, [pathname, projectKey]);
-    if (!message)
-        return null;
-    return (_jsx(FadeWrapper, { visible: visible, device: device, message: message, children: _jsx(FeatureMessage, { message: message, onDismiss: () => dismissMessage(message) }) }));
+    }, [projectKey]);
+    useEffect(() => {
+        if (!pathname || !messages.length)
+            return;
+        let fadeOutTimer = null;
+        const origin = typeof window !== "undefined" ? window.location.origin : "";
+        const match = messages.find((msg) => routeMatches(msg.route, pathname) &&
+            baseUrlMatches(msg.base_url) &&
+            !isDismissed(msg));
+        if (match) {
+            if (fadeOutTimer)
+                clearTimeout(fadeOutTimer);
+            setMessage(match);
+            setVisible(true);
+        }
+        else {
+            setVisible(false);
+            fadeOutTimer = setTimeout(() => setMessage(null), 300);
+        }
+        return () => {
+            if (fadeOutTimer)
+                clearTimeout(fadeOutTimer);
+        };
+    }, [pathname, messages]);
+    return (_jsx(FadeWrapper, { visible: visible, device: device, message: message, children: _jsx(FeatureMessage, { message: message, onDismiss: () => {
+                if (message)
+                    dismissMessage(message);
+            } }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notify-sdk",
-  "version": "1.0.62",
+  "version": "1.0.63",
   "description": "SDK for displaying real-time route-specific messages in React apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",