react-notify-sdk 1.0.17 → 1.0.19

package/dist/FadeWrapper.js

@@ -5,7 +5,7 @@ opacity: ${(props) => (props.visible ? 1 : 0)};
 animation: ${(props) => (props.visible ? fadeIn : fadeOut)} 0.3s ease forwards;
 transition: opacity 0.3s ease;
 position: absolute;
-width: ${(props) => props.device === 'Mobile' ? '100%' : props.device === 'Tablet' ? '80%' : `${props.message?.width}%`};
+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' : ''};
 left: 50%;

package/dist/NotifyMessage.js

@@ -1,4 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import InfoOutlineIcon from '@mui/icons-material/InfoOutline';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 const NotificationMessage = ({ message }) => {
     return (_jsxs("div", { style: {
             width: '100%',
@@ -9,11 +12,16 @@ const NotificationMessage = ({ message }) => {
             backgroundColor: message?.backgroundColor,
             border: `1px solid ${message?.textColor}`, // Completed border style
             borderRadius: "8px"
-        }, children: [_jsx("p", { className: `text-lg font-semibold text-[${message?.textColor}]`, style: {
-                    fontSize: '1.125rem', // text-lg = 18px = 1.125rem
-                    fontWeight: 600, // font-semibold = 600
-                    color: `${message?.textColor}`,
-                }, children: message.title }), _jsx("p", { className: `text-sm text-[${message?.textColor}]`, style: {
+        }, children: [_jsxs("div", { className: 'w-full flex flex-row', style: {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row'
+                }, children: [message?.type === 'Information' && _jsx(InfoOutlineIcon, { fontSize: 'medium', sx: { color: '#4983c9' } }), message?.type === 'Warning' && _jsx(WarningAmberIcon, { fontSize: 'medium', sx: { color: '#ffbf00' } }), message?.type === 'Error' && _jsx(HighlightOffIcon, { fontSize: 'medium', sx: { color: '#d0342c' } }), _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}`,

package/dist/NotifyProvider.js

@@ -6,6 +6,19 @@ import NotificationMessage from './NotifyMessage';
 import { supabase } from './supabase/supabaseClient';
 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 = ({ projectId,
 //className,
 //style,
@@ -25,11 +38,12 @@ export const NotifyProvider = ({ projectId,
                 .eq('project_key', projectId)
                 .eq('route', location.pathname)
                 .eq('is_active', true)
-                .order('created_at', { ascending: false })
-                .limit(1)
-                .single();
-            if (data) {
-                setMessage(data);
+                .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 {
@@ -47,7 +61,7 @@ export const NotifyProvider = ({ projectId,
             table: 'feature_messages',
         }, (payload) => {
             const msg = payload.new;
-            if (msg.project_key === projectId && msg.route === location.pathname && msg.is_active) {
+            if (msg.project_key === projectId && msg.is_active && routeMatches(msg.route, location.pathname)) {
                 setMessage(msg);
                 setVisible(true);
             }

package/dist/types.d.ts

@@ -13,6 +13,7 @@ export type NotifyMessage = {
     borderWidth: number;
     is_active: boolean;
     created_at: string;
+    type: string;
 };
 export type NotifyMessageProviderProps = {
     projectId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notify-sdk",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "SDK for displaying real-time route-specific messages in React apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,9 +15,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@mui/icons-material": "^7.2.0",
     "@supabase/supabase-js": "^2.50.0",
     "clsx": "^2.1.1",
-    "goober": "^2.1.16"
+    "goober": "^2.1.16",
+    "heroicons": "^1.0.6"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",