react-notify-sdk 1.0.16 → 1.0.18

package/dist/FadeWrapper.d.ts

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

package/dist/FadeWrapper.js

@@ -0,0 +1,15 @@
+import { styled } from "goober";
+import { fadeIn, fadeOut } from './animations';
+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;
+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%;
+transform: translateX(-50%);
+z-index: 5;
+`;
+export default FadeWrapper;

package/dist/NotifyMessage.d.ts

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

package/dist/NotifyMessage.js

@@ -1,13 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const NotificationMessage = ({ message, device }) => {
+const NotificationMessage = ({ message }) => {
     return (_jsxs("div", { style: {
-            position: 'absolute',
-            top: message?.position === 'top' ? '24px' : undefined,
-            bottom: message?.position === 'bottom' ? '24px' : undefined,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            zIndex: 5,
-            width: device === 'Mobile' ? '100%' : device === 'Tablet' ? '80%' : `${message?.width}%`,
+            width: '100%',
             paddingTop: '4px', // p-4 = 1rem
             paddingBottom: '4px',
             paddingLeft: '12px',

package/dist/NotifyProvider.js

@@ -3,23 +3,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import NotificationMessage from './NotifyMessage';
-import { styled } from "goober";
 import { supabase } from './supabase/supabaseClient';
 import useDeviceDetection from './UseDeviceDetection';
-import { fadeIn, fadeOut } from './animations';
-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: fixed;
-bottom: 20px;
-left: 20px;
-background: #1f2937;
-color: white;
-padding: 12px 16px;
-border-radius: 8px;
-z-index: 1000;
-`;
+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,
@@ -39,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 {
@@ -61,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);
             }
@@ -78,5 +78,5 @@ export const NotifyProvider = ({ projectId,
     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, children: _jsx(NotificationMessage, { message: message, device: device }) }));
+    return (_jsx(FadeWrapper, { visible: visible, device: device, message: message, children: _jsx(NotificationMessage, { message: message }) }));
 };

package/package.json

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