react-notify-sdk 1.0.42 → 1.0.43

package/dist/FeatureMessage.d.ts

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

package/dist/FeatureMessage.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /////////////---Icon imports---////////////////////
 import { AlertTriangle, CircleX, Info } from "lucide-react";
-const FeatureMessage = ({ message }) => {
+const FeatureMessage = ({ message, onDismiss }) => {
     function hexToRgba(hex, alpha) {
         // Remove leading #
         hex = hex.replace(/^#/, "");
@@ -16,32 +16,110 @@ const FeatureMessage = ({ message }) => {
         const b = bigint & 255;
         return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     }
+    // Handle click with tracking
+    const handleClick = async (e) => {
+        // Don't trigger if clicking close button
+        if (e.target.closest('[data-dismiss-button]')) {
+            return;
+        }
+        const action = message.click_action || 'none';
+        // Perform the action
+        switch (action) {
+            case 'navigate':
+                if (message.click_url) {
+                    window.location.href = message.click_url;
+                }
+                break;
+            case 'external':
+                if (message.click_url) {
+                    window.open(message.click_url, '_blank', 'noopener,noreferrer');
+                }
+                break;
+            case 'dismiss':
+                handleDismiss();
+                break;
+            case 'none':
+            default:
+                break;
+        }
+    };
+    const handleDismiss = () => {
+        if (onDismiss) {
+            onDismiss(message.id);
+        }
+    };
+    const filterButton = (type) => {
+        if (type?.click_action === "external") {
+            return 'Open';
+        }
+        else if (type?.click_action === "navigate") {
+            return 'Go to';
+        }
+        else if (type?.click_action === "dismiss") {
+            return 'Close';
+        }
+        else {
+            return '';
+        }
+    };
     return (_jsxs("div", { style: {
-            width: '100%',
-            paddingTop: '4px', // p-4 = 1rem
-            paddingBottom: '4px',
-            paddingLeft: '12px',
-            paddingRight: '12px',
+            width: "95%", // w-[95%]
+            height: "100%", // h-full
+            marginLeft: "auto", // mx-auto
+            marginRight: "auto",
+            display: "flex", // flex flex-row
+            flexDirection: "row",
+            paddingTop: "0.75rem", // py-3
+            paddingBottom: "0.75rem",
+            paddingLeft: "0.75rem", // px-3
+            paddingRight: "0.75rem",
+            borderRadius: "0.5rem", // rounded-lg
             backgroundColor: message?.backgroundColor,
-            border: `1px solid ${message?.textColor}`, // Completed border style
-            borderRadius: "8px",
             borderWidth: "1px",
-            borderColor: `${hexToRgba(message.borderColor, 0.3)}`,
+            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)}`
-        }, children: [_jsxs("div", { className: 'w-full flex flex-row items-center', style: {
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center'
-                }, children: [message?.type === 'Information' && _jsx(Info, { size: 16, style: { color: 'rgb(59 130 24)' } }), message?.type === 'Warning' && _jsx(AlertTriangle, { size: 16, style: { color: 'rgb(245 158 1)' } }), message?.type === 'Error' && _jsx(CircleX, { size: 16, style: { color: 'rgb(239 68 68)' } }), _jsx("p", { className: `text-lg font-semibold text-[${message?.textColor}] ml-3`, style: {
-                            fontSize: '1.125rem', // text-lg = 18px = 1.125rem
-                            fontWeight: 600, // font-semibold = 600
-                            color: `${message?.textColor}`,
-                            marginLeft: '12px'
-                        }, children: message.title })] }), _jsx("p", { className: `text-sm text-[${message?.textColor}]`, style: {
-                    marginTop: '8px',
-                    fontSize: '0.875rem', // text-sm = 14px = 0.875rem
-                    color: `${message?.textColor}`,
-                }, children: message.content })] }));
+        }, children: [_jsxs("div", { style: {
+                    width: message?.click_action === "view only" ? "100%" : "80%", // w-4/5
+                    height: "100%", // h-full
+                    display: "flex", // flex flex-col
+                    flexDirection: "column",
+                    borderRightWidth: "1px", // border-r
+                    borderRightColor: "white"
+                }, children: [_jsxs("div", { style: {
+                            position: "relative", // relative
+                            width: "100%", // w-full
+                            display: "flex", // flex flex-row
+                            flexDirection: "row",
+                            alignItems: "center" // items-center
+                        }, children: [message?.type === "Information" && (_jsx(Info, { size: 16, style: { color: "#3b82f6" } }) // text-blue-500
+                            ), message?.type === "Warning" && (_jsx(AlertTriangle, { size: 16, style: { color: "#f59e0b" } }) // text-amber-500
+                            ), message?.type === "Error" && (_jsx(CircleX, { size: 16, style: { color: "#ef4444" } }) // text-red-500
+                            ), _jsx("p", { style: {
+                                    color: message?.textColor,
+                                    fontSize: "1.125rem", // text-lg
+                                    fontWeight: 600, // font-semibold
+                                    marginLeft: "0.75rem" // ml-3
+                                }, children: message?.title })] }), _jsx("p", { style: {
+                            color: message?.textColor,
+                            fontSize: "0.75rem", // text-xs
+                            marginTop: "0.25rem" // mt-1
+                        }, children: message?.content })] }), message?.click_action && message?.click_action === "view only" ?
+                null
+                :
+                    _jsx("button", { 
+                        //data-dismiss-button
+                        style: {
+                            width: "20%", // w-1/5
+                            height: "1rem", // h-4 (16px)
+                            marginTop: "auto", // my-auto
+                            marginBottom: "auto",
+                            display: "flex", // flex
+                            justifyContent: "center", // justify-center
+                            alignItems: "center" // items-center
+                        }, children: _jsx("p", { style: {
+                                fontSize: "1rem", // text-base
+                                color: "white",
+                                cursor: "pointer"
+                            }, onClick: message?.click_action ? handleClick : undefined, onMouseEnter: (e) => (e.currentTarget.style.color = `${message?.borderColor}`), onMouseLeave: (e) => (e.currentTarget.style.color = "white"), children: `${filterButton(message)}` }) })] }));
 };
 export default FeatureMessage;

package/dist/FeatureMessageProvider.js

@@ -23,6 +23,36 @@ export const FeatureMessageProvider = ({ projectKey, }) => {
     const [visible, setVisible] = useState(false);
     const [pathname, setPathname] = useState(() => typeof window !== 'undefined' ? window.location.pathname : '');
     const device = useDeviceDetection();
+    //Dismiss message caching
+    //Dismissed message cached retrieval
+    const DISMISSED_KEY = "__feature_messages_dismissed__";
+    const getDismissedMessages = () => {
+        if (typeof window === "undefined")
+            return {};
+        try {
+            return JSON.parse(localStorage.getItem(DISMISSED_KEY) || "{}");
+        }
+        catch {
+            return {};
+        }
+    };
+    //Dismissed message cache storing
+    const dismissMessage = (message) => {
+        const dismissed = getDismissedMessages();
+        dismissed[message.id] = {
+            messageId: message.id,
+            dismissedAt: new Date().toISOString(),
+            messageUpdatedAt: message.updated_at,
+        };
+        localStorage.setItem(DISMISSED_KEY, JSON.stringify(dismissed));
+    };
+    const isDismissed = (message) => {
+        const dismissed = getDismissedMessages()[message.id];
+        if (!dismissed)
+            return false;
+        // Re-show if message changed
+        return dismissed.messageUpdatedAt === message.updated_at;
+    };
     // Create supabase client with project key header
     const supabaseClient = getSupabaseClient(projectKey);
     // Effect to track pathname changes
@@ -55,6 +85,7 @@ export const FeatureMessageProvider = ({ projectKey, }) => {
     useEffect(() => {
         if (typeof window === 'undefined')
             return; // Skip on server
+        let fadeOutTimer = null; // Track the timer
         const fetchMessage = async () => {
             const { data } = await supabaseClient
                 .from('feature_messages')
@@ -64,14 +95,16 @@ export const FeatureMessageProvider = ({ projectKey, }) => {
                 .eq('is_active', true)
                 .order('created_at', { ascending: false });
             const match = data?.find((msg) => routeMatches(msg.route, pathname));
-            if (match) {
+            if (match && !isDismissed(match)) {
+                if (fadeOutTimer)
+                    clearTimeout(fadeOutTimer); // Clear any pending timeout
                 setMessage(match);
                 setVisible(true); // Fade in
             }
             else {
                 // Trigger fade out before removing message
+                fadeOutTimer = setTimeout(() => setMessage(null), 300);
                 setVisible(false);
-                setTimeout(() => setMessage(null), 300); // match fadeOut duration
             }
         };
         fetchMessage();
@@ -84,12 +117,14 @@ export const FeatureMessageProvider = ({ projectKey, }) => {
         }, (payload) => {
             const msg = payload.new;
             if (msg.project_key === projectKey && msg.is_active && routeMatches(msg.route, pathname)) {
+                if (fadeOutTimer)
+                    clearTimeout(fadeOutTimer); // Clear any pending timeout
                 setMessage(msg);
                 setVisible(true);
             }
             else {
                 setVisible(false);
-                setTimeout(() => setMessage(null), 300);
+                fadeOutTimer = setTimeout(() => setMessage(null), 300);
             }
         })
             .subscribe();
@@ -99,5 +134,5 @@ export const FeatureMessageProvider = ({ projectKey, }) => {
     }, [pathname, projectKey]);
     if (!message)
         return null;
-    return (_jsx(FadeWrapper, { visible: visible, device: device, message: message, children: _jsx(FeatureMessage, { message: message }) }));
+    return (_jsx(FadeWrapper, { visible: visible, device: device, message: message, children: _jsx(FeatureMessage, { message: message, onDismiss: () => dismissMessage(message) }) }));
 };

package/dist/lib/trackEvent.d.ts

@@ -0,0 +1 @@
+export declare const trackClick: (messageId: string, projectKey: string, clickAction: string, clickUrl?: string) => Promise<void>;

package/dist/lib/trackEvent.js

@@ -0,0 +1,20 @@
+// src/lib/trackEvent.ts
+import { getSupabaseClient } from "../supabase/supabaseClient";
+export const trackClick = async (messageId, projectKey, clickAction, clickUrl) => {
+    try {
+        const client = getSupabaseClient(projectKey);
+        await client.from('message_analytics').insert({
+            project_key: projectKey,
+            message_id: messageId,
+            event_type: 'click',
+            click_action: clickAction,
+            click_url: clickUrl,
+            user_agent: navigator.userAgent,
+            created_at: new Date().toISOString(),
+        });
+    }
+    catch (error) {
+        // Fail silently - don't break the user experience
+        console.error('Failed to track click:', error);
+    }
+};

package/dist/types.d.ts

@@ -13,10 +13,19 @@ export type FeatureMessages = {
     borderWidth: number;
     is_active: boolean;
     created_at: string;
+    updated_at?: string;
+    ended_at?: string;
     type?: 'Information' | 'Warning' | 'Error';
+    click_action?: 'view only' | 'navigate' | 'external' | 'dismiss';
+    click_url?: string;
 };
 export type FeatureMessageProviderProps = {
     projectKey: string;
     className?: string;
     disableDefaultStyles?: boolean;
 };
+export type DismissedMessage = {
+    messageId: string;
+    dismissedAt: string;
+    messageUpdatedAt: any;
+};

package/package.json

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