react-notify-sdk 1.0.31 → 1.0.32

package/dist/FadeWrapper.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { NotifyMessage } from './types';
+import { FeatureMessage } from './types';
 interface FadeWrapperProps {
     visible: boolean;
-    message: NotifyMessage;
+    message: FeatureMessage;
     device: string;
 }
 export declare const FadeWrapper: import("goober").StyledVNode<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & import("goober").DefaultTheme & FadeWrapperProps, never>>;

package/dist/NotifyMessage.d.ts

@@ -1,6 +1,6 @@
-import { NotifyMessage } from './types';
+import { FeatureMessage } from './types';
 interface NotifyMessageProps {
-    message: NotifyMessage;
+    message: FeatureMessage;
 }
 declare const NotificationMessage: ({ message }: NotifyMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default NotificationMessage;

package/dist/NotifyMessage.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FadeWrapper from './FadeWrapper';
 /////////////---Icon imports---////////////////////
 import { AlertTriangle, CircleX, Info } from "lucide-react";
+import useDeviceDetection from './UseDeviceDetection';
 const NotificationMessage = ({ message }) => {
+    const device = useDeviceDetection();
     function hexToRgba(hex, alpha) {
         // Remove leading #
         hex = hex.replace(/^#/, "");
@@ -16,31 +19,31 @@ const NotificationMessage = ({ message }) => {
         const b = bigint & 255;
         return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     }
-    return (_jsxs("div", { style: {
-            width: '100%',
-            paddingTop: '4px', // p-4 = 1rem
-            paddingBottom: '4px',
-            paddingLeft: '12px',
-            paddingRight: '12px',
-            backgroundColor: message?.backgroundColor,
-            borderRadius: "8px",
-            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)}`
-        }, 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 })] }));
+    return (_jsx(FadeWrapper, { visible: message?.is_active, device: device, message: message, children: _jsxs("div", { style: {
+                width: '100%',
+                paddingTop: '4px', // p-4 = 1rem
+                paddingBottom: '4px',
+                paddingLeft: '12px',
+                paddingRight: '12px',
+                backgroundColor: message?.backgroundColor,
+                borderRadius: "8px",
+                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)}`
+            }, 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 })] }) }));
 };
 export default NotificationMessage;

package/dist/NotifyProvider.d.ts

@@ -1,2 +1,12 @@
-import { NotifyMessageProviderProps } from './types';
-export declare const NotifyProvider: ({ projectKey, }: NotifyMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;
+import { FeatureMessageProviderProps } from './types';
+import { FeatureMessagesConfig } from './supabase/supabaseClient';
+interface FeatureMessagesContextType {
+    config: FeatureMessagesConfig | null;
+    projectKey: string | null;
+}
+export declare const NotifyProvider: ({ children, projectKey, endpoint, }: FeatureMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Hook to get the feature messages context (for advanced use cases)
+ */
+export declare const useFeatureMessagesContext: () => FeatureMessagesContextType;
+export {};

package/dist/NotifyProvider.js

@@ -1,83 +1,78 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/FeatureMessage.tsx
-import { useEffect, useState } from 'react';
+import { useEffect, useState, createContext, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import NotificationMessage from './NotifyMessage';
 import { getSupabaseClient } from './supabase/supabaseClient';
+import { useFeatureMessages } from './useFeatureMessage';
 import useDeviceDetection from './UseDeviceDetection';
-import FadeWrapper from './FadeWrapper';
-// Wildcard route matching utility
-const routeMatches = (pattern, path) => {
-    if (pattern === path)
-        return true;
-    const escapeRegex = (str) => str.replace(/([.+^=!:${}()|[\]/\\])/g, "\\$1");
-    const regexPattern = "^" + pattern.split("*").map(escapeRegex).join(".*") + "$";
-    try {
-        return new RegExp(regexPattern).test(path);
-    }
-    catch {
-        return false;
-    }
-};
-export const NotifyProvider = ({ projectKey,
-//className,
-//style,
-//disableDefaultStyles = true,
- }) => {
+const FeatureMessagesContext = createContext({
+    config: null,
+    projectKey: null,
+});
+export const NotifyProvider = ({ children, projectKey, endpoint, }) => {
+    const config = { projectKey, endpoint };
+    useEffect(() => {
+        getSupabaseClient(config);
+    }, [projectKey, endpoint]);
     const [message, setMessage] = useState(null);
     const [visible, setVisible] = useState(false);
     const location = useLocation();
     const device = useDeviceDetection();
-    const supabase = getSupabaseClient();
+    if (!message)
+        return null;
+    return (_jsxs(FeatureMessagesContext.Provider, { value: { config, projectKey }, children: [children, _jsx(AutomaticFeatureMessages, { projectKey: projectKey })] }));
+    /*
+      return message ? (
+        <FadeWrapper visible={visible} device={device} message={message}>
+          <NotificationMessage message={message} />
+        </FadeWrapper>
+      )
+      :
+      null;
+    */
+};
+/**
+ * Internal component that automatically displays messages based on current route
+ */
+const AutomaticFeatureMessages = ({ projectKey }) => {
+    // Get current route - works with any router or vanilla JavaScript
+    const [currentRoute, setCurrentRoute] = useState(window.location.pathname);
     useEffect(() => {
-        if (typeof window === 'undefined')
-            return; // Skip on server
-        const fetchMessage = async () => {
-            const { data } = await supabase
-                .from('feature_messages')
-                .select('*')
-                .eq('project_key', projectKey)
-                .eq('route', location.pathname)
-                .eq('is_active', true)
-                .order('created_at', { ascending: false });
-            //.limit(1)
-            //.single();
-            const match = data?.find((msg) => routeMatches(msg.route, location.pathname));
-            if (match) {
-                setMessage(match);
-                setVisible(true); // Fade in
-            }
-            else {
-                // Trigger fade out before removing message
-                setVisible(false);
-                setTimeout(() => setMessage(null), 300); // match fadeOut duration
-            }
+        // Listen for route changes (works with React Router, Next.js Router, etc.)
+        const handleRouteChange = () => {
+            setCurrentRoute(window.location.pathname);
+        };
+        // Listen for browser navigation
+        window.addEventListener('popstate', handleRouteChange);
+        // Listen for programmatic navigation (works with most routers)
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+        history.pushState = function () {
+            originalPushState.apply(history, arguments);
+            setTimeout(handleRouteChange, 0);
+        };
+        history.replaceState = function () {
+            originalReplaceState.apply(history, arguments);
+            setTimeout(handleRouteChange, 0);
         };
-        fetchMessage();
-        const subscription = supabase
-            .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, location.pathname)) {
-                setMessage(msg);
-                setVisible(true);
-            }
-            else {
-                setVisible(false);
-                setTimeout(() => setMessage(null), 300);
-            }
-        })
-            .subscribe();
         return () => {
-            supabase.removeChannel(subscription);
+            window.removeEventListener('popstate', handleRouteChange);
+            history.pushState = originalPushState;
+            history.replaceState = originalReplaceState;
         };
-    }, [location.pathname, projectKey]);
-    if (!message)
-        return null;
-    //const defaultClasses = `absolute ${message?.position}-6 left-1/2 transform -translate-x-1/2 z-20 w-full md:w-[${message?.width}%] px-3 py-1 bg-[${message?.backgroundColor}] border border-[${message?.borderColor}] text-[${message?.textColor}] rounded-lg shadow`;
-    return (_jsx(FadeWrapper, { visible: visible, device: device, message: message, children: _jsx(NotificationMessage, { message: message }) }));
+    }, []);
+    // Use the internal hook to get messages for current route
+    const { message, dismissMessage } = useFeatureMessages({
+        projectKey,
+        route: currentRoute,
+    });
+    // Automatically render the message if one exists
+    return message ? (_jsx(NotificationMessage, { message: message })) : null;
+};
+/**
+ * Hook to get the feature messages context (for advanced use cases)
+ */
+export const useFeatureMessagesContext = () => {
+    return useContext(FeatureMessagesContext);
 };

package/dist/UseDeviceDetection.js

@@ -5,9 +5,9 @@ const useDeviceDetection = () => {
     useEffect(() => {
         const handleDeviceDetection = () => {
             const parser = new UAParser(navigator.userAgent);
-            const parsedDevice = parser.getDevice();
-            const isMobile = parsedDevice.type === 'mobile';
-            const isTablet = parsedDevice.type === 'tablet';
+            const parsedDevice = parser.getResult();
+            const isMobile = parsedDevice.device.type === 'mobile';
+            const isTablet = parsedDevice.device.type === 'tablet';
             const isDesktop = !isMobile && !isTablet;
             if (isMobile) {
                 setDevice('Mobile');

package/dist/supabase/supabaseClient.d.ts

@@ -1,2 +1,32 @@
 import { SupabaseClient } from '@supabase/supabase-js';
-export declare const getSupabaseClient: () => SupabaseClient<any, "public", any>;
+export interface FeatureMessagesConfig {
+    /**
+     * Your SaaS API key (provided to customers)
+     * This identifies the customer and their project
+     */
+    projectKey: string;
+    /**
+     * Optional: Custom endpoint if you're using a different domain
+     * Defaults to your SaaS service endpoint
+     */
+    endpoint?: string;
+    /**
+     * Optional: Enable debug logging
+     */
+    debug?: boolean;
+}
+export declare const getSupabaseClient: (config: FeatureMessagesConfig) => SupabaseClient;
+/**
+ * Get the initialized feature messages client
+ * Used internally by the package components and hooks
+ */
+export declare const getFeatureMessagesClient: () => SupabaseClient;
+/**
+ * Get the current customer configuration
+ * Used internally by the package
+ */
+export declare const getCustomerConfig: () => FeatureMessagesConfig | null;
+/**
+ * Reset the client (useful for testing or switching configurations)
+ */
+export declare const resetFeatureMessagesClient: () => void;

package/dist/supabase/supabaseClient.js

@@ -1,18 +1,65 @@
 import { createClient } from '@supabase/supabase-js';
-const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
-const supabaseKey = process.env.REACT_APP_SUPABASE_KEY;
+const supabaseUrl = process.env.REACT_APP_SUPABASE_URL || "https://dhgnstjrkeuqnsapwcec.supabase.co";
+const supabaseKey = process.env.REACT_APP_SUPABASE_KEY || "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRoZ25zdGpya2V1cW5zYXB3Y2VjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTA2MDA0NTEsImV4cCI6MjA2NjE3NjQ1MX0.TLBAPIWjPYvzNUUPHyakIypRydAeWM8Y1OrUzVvIgLQ";
 // Create a single supabase client for interacting with your database
 //export const supabase = createClient(supabaseUrl, supabaseKey)
-let client = null;
-export const getSupabaseClient = () => {
-    if (!client) {
-        client = createClient(supabaseUrl, supabaseKey, {
+let featureMessagesClient = null;
+let customerConfig = null;
+export const getSupabaseClient = (config) => {
+    if (!config.projectKey) {
+        throw new Error('Feature Messages project key is required. Get yours at https://your-saas-dashboard.com');
+    }
+    // Validate that the service is properly configured
+    if (process.env.REACT_APP_SUPABASE_URL === 'https://your-saas-project.supabase.co' ||
+        process.env.REACT_APP_SUPABASE_KEY === 'your-readonly-anon-key') {
+        throw new Error('Feature Messages service is not properly configured. ' +
+            'Please contact support@your-saas.com for assistance.');
+    }
+    customerConfig = config;
+    if (!featureMessagesClient) {
+        featureMessagesClient = createClient(supabaseUrl, supabaseKey, {
             global: {
                 headers: {
-                    "X-Feature-Messages": "react-notified", // debugging / tracing
+                    // Pass the project key in headers for filtering
+                    'x-feature-messages-project-key': config.projectKey,
+                    // Add package version for analytics/debugging
+                    'x-feature-messages-version': process.env.npm_package_version || '1.0.0',
+                    // Identify this as package usage (not dashboard)
+                    'x-feature-messages-source': 'npm-package',
+                },
+            },
+            realtime: {
+                headers: {
+                    'x-feature-messages-project-key': config.projectKey,
+                    'x-feature-messages-source': 'npm-package',
                 },
             },
         });
     }
-    return client;
+    return featureMessagesClient;
+};
+/**
+ * Get the initialized feature messages client
+ * Used internally by the package components and hooks
+ */
+export const getFeatureMessagesClient = () => {
+    if (!featureMessagesClient || !customerConfig) {
+        throw new Error('Feature Messages not initialized. Make sure you have wrapped your app with FeatureMessagesProvider.\n' +
+            'Get your project key at https://your-saas-dashboard.com');
+    }
+    return featureMessagesClient;
+};
+/**
+ * Get the current customer configuration
+ * Used internally by the package
+ */
+export const getCustomerConfig = () => {
+    return customerConfig;
+};
+/**
+ * Reset the client (useful for testing or switching configurations)
+ */
+export const resetFeatureMessagesClient = () => {
+    featureMessagesClient = null;
+    customerConfig = null;
 };

package/dist/types.d.ts

@@ -1,10 +1,12 @@
-export type NotifyMessage = {
+import { ReactNode } from "react";
+import { FeatureMessagesConfig } from "./supabase/supabaseClient";
+export type FeatureMessage = {
     id: string;
     project_key: string;
     route: string;
     title: string;
     content: string;
-    position: string;
+    position: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     positionValue: number;
     backgroundColor: string;
     borderColor: string;
@@ -13,8 +15,16 @@ export type NotifyMessage = {
     borderWidth: number;
     is_active: boolean;
     created_at: string;
-    type: string;
+    type?: 'Information' | 'Warning' | 'Error';
 };
-export type NotifyMessageProviderProps = {
+export interface FeatureMessageFilter {
     projectKey: string;
+    route: string;
+    deviceType?: 'desktop' | 'tablet' | 'mobile';
+}
+export type FeatureMessageProviderProps = {
+    config: FeatureMessagesConfig | null;
+    projectKey: string;
+    children: ReactNode;
+    endpoint: string;
 };

package/dist/useFeatureMessage.d.ts

@@ -0,0 +1,17 @@
+import { FeatureMessage, FeatureMessageFilter } from './types';
+export interface UseFeatureMessagesReturn {
+    message: FeatureMessage | null;
+    messages: FeatureMessage[];
+    loading: boolean;
+    error: string | null;
+    dismissMessage: (messageId: string) => void;
+    refetch: () => Promise<void>;
+}
+export declare const useFeatureMessages: (filter: FeatureMessageFilter) => {
+    message: FeatureMessage | null;
+    messages: FeatureMessage[];
+    loading: boolean;
+    error: string | null;
+    dismissMessage: (messageId: string) => void;
+    refetch: () => Promise<void>;
+};

package/dist/useFeatureMessage.js

@@ -0,0 +1,148 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { getFeatureMessagesClient } from './supabase/supabaseClient';
+import { getCustomerConfig } from './supabase/supabaseClient';
+import useDeviceDetection from './UseDeviceDetection';
+const routeMatches = (pattern, path) => {
+    if (pattern === path)
+        return true;
+    const escapeRegex = (str) => str.replace(/([.+^=!:${}()|[\]/\\])/g, "\\$1");
+    const regexPattern = "^" + pattern.split("*").map(escapeRegex).join(".*") + "$";
+    try {
+        return new RegExp(regexPattern).test(path);
+    }
+    catch {
+        return false;
+    }
+};
+export const useFeatureMessages = (filter) => {
+    const [messages, setMessages] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [dismissedMessages, setDismissedMessages] = useState(new Set());
+    const channelRef = useRef(null);
+    const deviceInfo = useDeviceDetection();
+    const customerConfig = getCustomerConfig();
+    const { projectKey, route, deviceType } = filter;
+    const currentDeviceType = deviceType || deviceInfo;
+    // Filter messages based on route and active status
+    const filterMessages = useCallback((allMessages) => {
+        const now = new Date();
+        return allMessages.filter(message => {
+            // Check if message is active
+            if (!message.is_active)
+                return false;
+            // Check if message has ended
+            //if (message.ended_at && new Date(message.ended_at) < now) return false;
+            // Check project key (this should match what the customer set up in the dashboard)
+            if (message.project_key !== projectKey)
+                return false;
+            // Check route matching (including wildcards)
+            if (!routeMatches(route, message.route))
+                return false;
+            // Check if message has been dismissed
+            if (dismissedMessages.has(message.id))
+                return false;
+            return true;
+        });
+    }, [projectKey, route, dismissedMessages]);
+    // Get the most recent active message (since trigger enforces single active message)
+    const getActiveMessage = useCallback((filteredMessages) => {
+        if (filteredMessages.length === 0)
+            return null;
+        // Sort by creation date (newest first) since only one can be active
+        const sorted = [...filteredMessages].sort((a, b) => {
+            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+        });
+        return sorted[0];
+    }, []);
+    // Fetch messages from your SaaS backend
+    const fetchMessages = useCallback(async () => {
+        try {
+            setError(null);
+            const client = getFeatureMessagesClient();
+            // Query messages for this project key
+            const { data, error: fetchError } = await client
+                .from('feature_messages')
+                .select('*')
+                .eq('project_key', projectKey)
+                .eq('is_active', true);
+            if (fetchError) {
+                throw fetchError;
+            }
+            setMessages(data || []);
+        }
+        catch (err) {
+            console.error('Error fetching feature messages:', err);
+            setError(err instanceof Error ? err.message : 'Failed to fetch messages');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [projectKey]);
+    // Set up realtime subscription
+    useEffect(() => {
+        try {
+            const client = getFeatureMessagesClient();
+            // Clean up existing subscription
+            if (channelRef.current) {
+                client.removeChannel(channelRef.current);
+            }
+            // Create new subscription for this project
+            const channel = client
+                .channel(`feature_messages_${projectKey}`)
+                .on('postgres_changes', {
+                event: '*',
+                schema: 'public',
+                table: 'feature_messages',
+                filter: `project_key=eq.${projectKey}`,
+            }, (payload) => {
+                if (customerConfig?.debug) {
+                    console.log('Feature message change received:', payload);
+                }
+                if (payload.eventType === 'INSERT' || payload.eventType === 'UPDATE') {
+                    const newMessage = payload.new;
+                    setMessages(prev => {
+                        const existing = prev.find(m => m.id === newMessage.id);
+                        if (existing) {
+                            return prev.map(m => m.id === newMessage.id ? newMessage : m);
+                        }
+                        return [...prev, newMessage];
+                    });
+                }
+                else if (payload.eventType === 'DELETE') {
+                    const deletedMessage = payload.old;
+                    setMessages(prev => prev.filter(m => m.id !== deletedMessage.id));
+                }
+            })
+                .subscribe();
+            channelRef.current = channel;
+            // Initial fetch
+            fetchMessages();
+            return () => {
+                if (channelRef.current) {
+                    client.removeChannel(channelRef.current);
+                    channelRef.current = null;
+                }
+            };
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to initialize feature messages');
+            setLoading(false);
+        }
+    }, [projectKey, fetchMessages, customerConfig?.debug]);
+    // Dismiss a message
+    const dismissMessage = useCallback((messageId) => {
+        setDismissedMessages(prev => new Set([...prev, messageId]));
+    }, []);
+    // Get filtered messages and active message
+    const filteredMessages = filterMessages(messages);
+    const activeMessage = getActiveMessage(filteredMessages);
+    return {
+        message: activeMessage,
+        messages: filteredMessages,
+        loading,
+        error,
+        dismissMessage,
+        refetch: fetchMessages,
+    };
+};

package/package.json

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