react-notify-sdk 1.0.37 → 1.0.39

package/dist/FadeWrapper.js

@@ -4,7 +4,7 @@ export const FadeWrapper = styled("div") `
 opacity: ${(props) => (props.visible ? 1 : 0)};
 animation: ${(props) => (props.visible ? fadeIn : fadeOut)} 0.3s ease forwards;
 transition: opacity 0.3s ease;
-position: absolute;
+position: fixed;
 width: ${(props) => props.device === 'Mobile' ? '95%' : props.device === 'Tablet' ? '420px' : '420px'};
 top: ${(props) => props.message?.position === 'top' ? '24px' : ''};
 bottom: ${(props) => props.message?.position === 'bottom' ? '24px' : ''};

package/dist/FeatureMessageProvider.js

@@ -18,16 +18,40 @@ const routeMatches = (pattern, path) => {
         return false;
     }
 };
-export const FeatureMessageProvider = ({ projectKey,
-//className,
-//style,
-//disableDefaultStyles = true,
- }) => {
+export const FeatureMessageProvider = ({ projectKey, }) => {
     const [message, setMessage] = useState(null);
     const [visible, setVisible] = useState(false);
+    const [pathname, setPathname] = useState(() => typeof window !== 'undefined' ? window.location.pathname : '');
     const device = useDeviceDetection();
     // Create supabase client with project key header
     const supabaseClient = getSupabaseClient(projectKey);
+    // Effect to track pathname changes
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const updatePathname = () => {
+            setPathname(window.location.pathname);
+        };
+        // Listen for browser back/forward navigation
+        window.addEventListener('popstate', updatePathname);
+        // Listen for programmatic navigation (pushState/replaceState)
+        const originalPushState = window.history.pushState;
+        const originalReplaceState = window.history.replaceState;
+        window.history.pushState = function (...args) {
+            originalPushState.apply(window.history, args);
+            updatePathname();
+        };
+        window.history.replaceState = function (...args) {
+            originalReplaceState.apply(window.history, args);
+            updatePathname();
+        };
+        return () => {
+            window.removeEventListener('popstate', updatePathname);
+            window.history.pushState = originalPushState;
+            window.history.replaceState = originalReplaceState;
+        };
+    }, []);
+    // Your main effect - now uses the reactive pathname state
     useEffect(() => {
         if (typeof window === 'undefined')
             return; // Skip on server
@@ -36,12 +60,10 @@ export const FeatureMessageProvider = ({ projectKey,
                 .from('feature_messages')
                 .select('*')
                 .eq('project_key', projectKey)
-                .eq('route', window.location.pathname)
+                .eq('route', pathname)
                 .eq('is_active', true)
                 .order('created_at', { ascending: false });
-            //.limit(1)
-            //.single();
-            const match = data?.find((msg) => routeMatches(msg.route, window.location.pathname));
+            const match = data?.find((msg) => routeMatches(msg.route, pathname));
             if (match) {
                 setMessage(match);
                 setVisible(true); // Fade in
@@ -61,7 +83,7 @@ export const FeatureMessageProvider = ({ projectKey,
             table: 'feature_messages',
         }, (payload) => {
             const msg = payload.new;
-            if (msg.project_key === projectKey && msg.is_active && routeMatches(msg.route, window.location.pathname)) {
+            if (msg.project_key === projectKey && msg.is_active && routeMatches(msg.route, pathname)) {
                 setMessage(msg);
                 setVisible(true);
             }
@@ -74,9 +96,8 @@ export const FeatureMessageProvider = ({ projectKey,
         return () => {
             supabaseClient.removeChannel(subscription);
         };
-    }, [window.location.pathname, projectKey]);
+    }, [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(FeatureMessage, { message: message }) }));
 };

package/package.json

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