be-components 7.4.3 → 7.4.4

package/lib/module/NotificationManager/index.js

@@ -0,0 +1,1140 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { View, Text, Button, TextInput } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
+import { NotificationApi, NotificationHelpers } from './api';
+import { Icons } from '../Components';
+import DropDown from '../Components/Dropdown';
+import { showConfirmAlert } from '../Components/ConfirmAlert';
+const notification_types = [{
+  label: 'Order Notifications',
+  value: 'order_notifications'
+}, {
+  label: 'Competition Notifications',
+  value: 'competition_notifications'
+}, {
+  label: 'Social Notifications',
+  value: 'social_notifications'
+}];
+const sections = ['header', 'top_row', 'preview', 'second_row'];
+const NotificationManager = ({
+  player_ids,
+  me,
+  notification_type,
+  default_path_name,
+  onFocusPosition,
+  default_params,
+  onComplete,
+  onClose
+}) => {
+  const Colors = useColors();
+  const [loading, setLoading] = useState(false);
+  const [loadingGroups, setLoadingGroups] = useState(false);
+  const [notificationGroups, setNotificationGroups] = useState([]);
+  const [selectedGroup, setSelectedGroup] = useState(null);
+  const [showGroupsModal, setShowGroupsModal] = useState(false);
+  const [groupMemberIds, setGroupMemberIds] = useState([]);
+  const [showEditCustomGroupModal, setShowEditCustomGroupModal] = useState(false);
+  const [customGroupCsv, setCustomGroupCsv] = useState('');
+  const [sendingProgress, setSendingProgress] = useState(null);
+
+  // Create a custom group from initial player_ids
+  const customGroup = player_ids.length > 0 ? {
+    notification_group_id: 'custom_group',
+    name: 'Custom Recipients',
+    description: `${player_ids.length} selected recipients`,
+    status: 'active',
+    grouping_function: '',
+    player_count: player_ids.length,
+    create_datetime: new Date().toISOString(),
+    last_update_datetime: new Date().toISOString()
+  } : null;
+
+  // Initialize selectedPath based on default_path_name if provided
+  const initialPath = default_path_name ? NotificationHelpers.app_paths.find(p => p.path_name === default_path_name) || NotificationHelpers.app_paths[0] : NotificationHelpers.app_paths[0];
+  const [selectedPath, setSelectedPath] = useState(initialPath);
+  const [customPathName, setCustomPathName] = useState('');
+  const [pathParams, setPathParams] = useState(default_params || {});
+  const [pathSearch, setPathSearch] = useState('');
+  const [notification, setNotification] = useState({
+    type: notification_type || 'order_notifications',
+    notify_body_type: 'custom',
+    title: '',
+    body: '',
+    status: 'pending',
+    expire_time: Date.now() + 7 * 24 * 60 * 60 * 1000 // 7 days from now
+  });
+  useEffect(() => {
+    startUp();
+    // Auto-select custom group if initial player_ids provided
+    if (customGroup) {
+      setSelectedGroup(customGroup);
+      setGroupMemberIds(player_ids);
+    }
+  }, []);
+  useEffect(() => {
+    // Initialize pathParams when selectedPath changes, merging with default_params
+    const mergedParams = {
+      ...selectedPath?.params,
+      ...(default_params || {})
+    };
+    setPathParams(mergedParams);
+  }, [selectedPath]);
+  const startUp = () => {
+    NotificationApi.setEnvironment();
+  };
+  const loadNotificationGroups = async () => {
+    setLoadingGroups(true);
+    const groups = await NotificationApi.getActiveNotificationGroups();
+    setNotificationGroups(groups);
+    setLoadingGroups(false);
+  };
+  const handleSelectGroup = async group_id => {
+    setLoadingGroups(true);
+
+    // Check if it's the custom group
+    if (group_id === 'custom_group' && customGroup) {
+      setSelectedGroup(customGroup);
+      setGroupMemberIds(player_ids);
+      setLoadingGroups(false);
+      setShowGroupsModal(false);
+      return;
+    }
+    const group = notificationGroups.find(g => g.notification_group_id === group_id);
+    setSelectedGroup(group || null);
+
+    // Fetch all members for this group
+    const members = await NotificationApi.getNotificationGroupMembersByGroup(group_id);
+
+    // Flatten all player_ids arrays from all member objects
+    const memberPlayerIds = members.flatMap(m => m.player_ids);
+    setGroupMemberIds(memberPlayerIds);
+    setLoadingGroups(false);
+    setShowGroupsModal(false);
+  };
+  const handleRemoveGroup = () => {
+    setSelectedGroup(null);
+    setGroupMemberIds([]);
+  };
+  const handleOpenEditCustomGroup = () => {
+    // Populate CSV with current groupMemberIds
+    setCustomGroupCsv(groupMemberIds.join(','));
+    setShowEditCustomGroupModal(true);
+  };
+  const handleSaveCustomGroup = () => {
+    // Parse CSV and update groupMemberIds
+    const ids = customGroupCsv.split(',').map(id => id.trim()).filter(id => id.length > 0);
+    setGroupMemberIds(ids);
+
+    // Update the custom group description
+    if (customGroup && selectedGroup?.notification_group_id === 'custom_group') {
+      const updatedGroup = {
+        ...customGroup,
+        description: `${ids.length} selected recipients`,
+        player_count: ids.length
+      };
+      setSelectedGroup(updatedGroup);
+    }
+    setShowEditCustomGroupModal(false);
+  };
+
+  // Filter and sort paths: primary first (alphabetically), then others (alphabetically), limited by search
+  const filteredPaths = useMemo(() => {
+    let filtered = NotificationHelpers.app_paths;
+
+    // Apply search filter
+    if (pathSearch) {
+      filtered = filtered.filter(path => path.label.toLowerCase().includes(pathSearch.toLowerCase()) || path.path_name.toLowerCase().includes(pathSearch.toLowerCase()));
+    }
+
+    // Sort: primary paths first (alphabetically), then non-primary (alphabetically)
+    const sorted = [...filtered].sort((a, b) => {
+      if (a.primary && !b.primary) return -1;
+      if (!a.primary && b.primary) return 1;
+      return a.label.localeCompare(b.label);
+    });
+
+    // Limit to 15 results
+    return sorted.slice(0, 15);
+  }, [pathSearch]);
+  const isValid = () => {
+    const errors = [];
+    if (!notification.title || notification.title.trim() === '') {
+      errors.push('Notification title is required');
+    }
+    if (!notification.body || notification.body.trim() === '') {
+      errors.push('Notification body is required');
+    }
+    if (groupMemberIds.length === 0) {
+      errors.push('At least one recipient is required');
+    }
+
+    // Check required params
+    if (selectedPath?.requiredParams && selectedPath.requiredParams.length > 0) {
+      selectedPath.requiredParams.forEach(paramKey => {
+        if (!pathParams[paramKey] || pathParams[paramKey].trim() === '') {
+          errors.push(`Required parameter "${paramKey}" is missing`);
+        }
+      });
+    }
+
+    // Check custom path name
+    if (selectedPath?.path_name === 'custom' && (!customPathName || customPathName.trim() === '')) {
+      errors.push('Custom path name is required');
+    }
+    return errors;
+  };
+  const confirmSendNotification = options => {
+    const errors = isValid();
+    if (errors.length > 0) {
+      const errorMessage = 'Please fix the following errors:\n\n' + errors.map((err, idx) => `${idx + 1}. ${err}`).join('\n');
+      alert(errorMessage);
+      return;
+    }
+    showConfirmAlert('Are you sure?', options?.test ? 'This will send a test notification to you only' : 'This will send a notification to all users selected', () => handleSendNotification(options), () => console.log('Done'));
+  };
+  const handleSendNotification = async options => {
+    // Use only group member IDs (no individual player_ids)
+    let player_ids_to_send = [...groupMemberIds];
+    if (options?.test) {
+      //Change to the admin
+      player_ids_to_send = [me.player_id];
+    }
+    setLoading(true);
+    try {
+      // Determine final path_name
+      const finalPathName = selectedPath?.path_name === 'custom' ? customPathName : selectedPath?.path_name;
+
+      // Construct the complete notification object with all required fields
+      const completeNotification = {
+        player_notification_id: '',
+        // Will be generated by backend
+        player_id: me.player_id,
+        type: notification.type,
+        notify_body_type: notification.notify_body_type || 'custom',
+        title: notification.title,
+        body: notification.body,
+        options: {
+          id: Date.now().toString(),
+          body: notification.body,
+          icon: 'default',
+          type: notification.type || 'order_notifications',
+          data: {
+            id: Date.now().toString(),
+            player_id: me.player_id,
+            pageStack: 'MainStack',
+            page: 'Notifications',
+            pageParams: {},
+            url: notification.link_override,
+            path_name: finalPathName,
+            params: pathParams
+          }
+        },
+        status: 'unread',
+        link_override: notification.link_override,
+        expire_time: 0,
+        create_datetime: new Date().toISOString(),
+        last_update_datetime: new Date().toISOString()
+      };
+
+      // Split into batches of 500
+      const BATCH_SIZE = 500;
+      const batches = [];
+      for (let i = 0; i < player_ids_to_send.length; i += BATCH_SIZE) {
+        batches.push(player_ids_to_send.slice(i, i + BATCH_SIZE));
+      }
+
+      // Send notifications in batches
+      for (let i = 0; i < batches.length; i++) {
+        const batch = batches[i];
+        if (!batch) continue;
+        setSendingProgress({
+          current: i + 1,
+          total: batches.length
+        });
+        await NotificationApi.broadcastNotifications(completeNotification, batch);
+      }
+      setSendingProgress(null);
+      if (onComplete) {
+        onComplete(completeNotification);
+      }
+
+      // Only reset form if not a test send
+      if (!options?.test) {
+        setNotification({
+          type: 'order_notifications',
+          notify_body_type: 'custom',
+          title: '',
+          body: '',
+          status: 'pending',
+          expire_time: Date.now() + 7 * 24 * 60 * 60 * 1000
+        });
+      }
+      const recipientCount = options?.test ? 1 : groupMemberIds.length;
+      const recipientMessage = options?.test ? 'Test notification sent to you!' : `Notification sent successfully to ${recipientCount} user${recipientCount !== 1 ? 's' : ''}!`;
+      alert(recipientMessage);
+    } catch (error) {
+      console.error('Error sending notification:', error);
+      alert('Failed to send notification. Please try again.');
+    }
+    setLoading(false);
+  };
+  const renderSections = data => {
+    switch (data.item) {
+      case 'header':
+        const headerTotalRecipients = groupMemberIds.length;
+        return /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            borderTopRightRadius: 8,
+            borderTopLeftRadius: 8
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Send Notification"), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Sending to ", headerTotalRecipients, " users")), onClose && /*#__PURE__*/React.createElement(Button, {
+          transparent: true,
+          onPress: onClose
+        }, /*#__PURE__*/React.createElement(Icons.CloseIcon, {
+          size: 16,
+          color: Colors.text.h1
+        })));
+      case 'preview':
+        return /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            margin: 5
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            borderTopRightRadius: 8,
+            borderTopLeftRadius: 8
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Preview"), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "What will this notification look like?"))), /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            padding: 15,
+            margin: 10,
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: Colors.borders.light
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          style: {
+            width: 40,
+            height: 40,
+            borderRadius: 8,
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginRight: 12
+          }
+        }, /*#__PURE__*/React.createElement(Icons.NotificationIcon, {
+          size: 20,
+          color: Colors.text.h1
+        })), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, notification.title || 'Notification Title'), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 4
+          }
+        }, notification.body || 'Notification message will appear here')))));
+      case 'top_row':
+        const totalRecipients = groupMemberIds.length;
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap'
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            flexGrow: 1,
+            minWidth: 300,
+            padding: 10,
+            margin: 5
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h2"
+        }, "Recipients (", totalRecipients, ")"), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 4
+          }
+        }, totalRecipients === 0 ? 'No recipients selected' : 'Selected group')), /*#__PURE__*/React.createElement(Button, {
+          type: "action",
+          onPress: () => {
+            loadNotificationGroups();
+            setShowGroupsModal(true);
+          },
+          style: {
+            padding: 8
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1",
+          color: Colors.text.white
+        }, "Select Group"))), selectedGroup && /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: 12,
+            borderRadius: 8,
+            marginTop: 5
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, selectedGroup.name), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 2
+          }
+        }, groupMemberIds.length, " members")), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flexDirection: 'row'
+          }
+        }, selectedGroup.notification_group_id === 'custom_group' && /*#__PURE__*/React.createElement(Button, {
+          type: "action",
+          onPress: handleOpenEditCustomGroup,
+          style: {
+            padding: 8,
+            marginRight: 8
+          }
+        }, /*#__PURE__*/React.createElement(Icons.EditIcon, {
+          size: 16,
+          color: Colors.text.white
+        })), /*#__PURE__*/React.createElement(Button, {
+          type: "error",
+          onPress: handleRemoveGroup,
+          style: {
+            padding: 8
+          }
+        }, /*#__PURE__*/React.createElement(Icons.CloseIcon, {
+          size: 16,
+          color: Colors.text.white
+        }))))));
+      case 'second_row':
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap'
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            minWidth: 300,
+            flexGrow: 1,
+            margin: 5
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            borderTopRightRadius: 8,
+            borderTopLeftRadius: 8
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Notification Message"), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Update notification message below"))), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          type: "body"
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h2",
+          style: {
+            marginBottom: 10
+          }
+        }, "Notification Title"), /*#__PURE__*/React.createElement(TextInput, {
+          value: notification.title,
+          onFocusPosition: onFocusPosition,
+          placeholder: "Enter notification title",
+          onChangeText: title => setNotification({
+            ...notification,
+            title
+          })
+        })), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h2",
+          style: {
+            marginBottom: 10
+          }
+        }, "Notification Body"), /*#__PURE__*/React.createElement(TextInput, {
+          value: notification.body,
+          onFocusPosition: onFocusPosition,
+          placeholder: "Enter notification message",
+          onChangeText: body => setNotification({
+            ...notification,
+            body
+          }),
+          multiline: true,
+          numberOfLines: 6,
+          style: {
+            padding: 12,
+            borderRadius: 8,
+            minHeight: 120
+          }
+        })))), /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            flexGrow: 1,
+            minWidth: 300,
+            margin: 5
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            borderTopRightRadius: 8,
+            borderTopLeftRadius: 8
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Notification Settings"), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Manage settigns below"))), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          type: "body"
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "row",
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h2",
+          style: {
+            flex: 1
+          }
+        }, "Notification Type"), /*#__PURE__*/React.createElement(DropDown, {
+          selected_value: notification_types.find(t => t.value === notification.type)?.label ?? '',
+          dropdown_options: [{
+            value: 'type',
+            eligible_options: notification_types.map(t => t.label)
+          }],
+          onOptionSelect: selected => {
+            const type = notification_types.find(t => t.label === selected)?.value;
+            setNotification({
+              ...notification,
+              type: type
+            });
+          }
+        })), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h2",
+          style: {
+            marginBottom: 10
+          }
+        }, "Link Override (Optional)"), /*#__PURE__*/React.createElement(TextInput, {
+          value: notification.link_override || '',
+          onFocusPosition: onFocusPosition,
+          placeholder: "https://example.com",
+          onChangeText: link_override => setNotification({
+            ...notification,
+            link_override
+          }),
+          style: {
+            padding: 12,
+            borderRadius: 8
+          }
+        })), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h2",
+          style: {
+            marginBottom: 10
+          }
+        }, "Deep Link Path"), /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            padding: 12,
+            borderRadius: 8,
+            marginBottom: 8,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1",
+          style: {
+            marginBottom: 2
+          }
+        }, selectedPath?.label), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            fontSize: 12
+          }
+        }, selectedPath?.path_name)), selectedPath?.primary && /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+            borderRadius: 4
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          color: Colors.text.white,
+          style: {
+            fontSize: 10
+          }
+        }, "Primary"))), /*#__PURE__*/React.createElement(TextInput, {
+          value: pathSearch,
+          placeholder: "Search paths to change...",
+          onFocusPosition: onFocusPosition,
+          onChangeText: setPathSearch,
+          style: {
+            padding: 12,
+            borderRadius: 8,
+            marginBottom: 8
+          }
+        }), pathSearch && /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            maxHeight: 300,
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: Colors.borders.light
+          }
+        }, /*#__PURE__*/React.createElement(FlatList, {
+          data: filteredPaths,
+          keyExtractor: item => item.path_name,
+          renderItem: ({
+            item
+          }) => /*#__PURE__*/React.createElement(TouchableOpacity, {
+            onPress: () => {
+              setSelectedPath(item);
+              setPathSearch('');
+            },
+            style: {
+              padding: 12,
+              borderBottomWidth: 1,
+              borderColor: Colors.borders.light
+            }
+          }, /*#__PURE__*/React.createElement(View, {
+            transparent: true,
+            style: {
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between'
+            }
+          }, /*#__PURE__*/React.createElement(View, {
+            transparent: true,
+            style: {
+              flex: 1
+            }
+          }, /*#__PURE__*/React.createElement(Text, {
+            theme: "h2",
+            style: {
+              marginBottom: 2
+            }
+          }, item.label), /*#__PURE__*/React.createElement(Text, {
+            theme: "description",
+            style: {
+              fontSize: 11
+            }
+          }, item.path_name)), item.primary && /*#__PURE__*/React.createElement(View, {
+            transparent: true,
+            style: {
+              paddingHorizontal: 6,
+              paddingVertical: 2,
+              borderRadius: 4,
+              marginLeft: 8
+            }
+          }, /*#__PURE__*/React.createElement(Text, {
+            theme: "description",
+            color: Colors.text.white,
+            style: {
+              fontSize: 9
+            }
+          }, "Primary")))),
+          ListEmptyComponent: /*#__PURE__*/React.createElement(View, {
+            style: {
+              padding: 20,
+              alignItems: 'center'
+            }
+          }, /*#__PURE__*/React.createElement(Text, {
+            theme: "description"
+          }, "No paths found"))
+        }))), Object.keys(selectedPath?.params ?? {}).length > 0 && /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h2",
+          style: {
+            marginBottom: 8
+          }
+        }, "Path Parameters"), /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            padding: 12,
+            borderRadius: 8
+          }
+        }, Object.keys(selectedPath?.params ?? {}).map(paramKey => {
+          const isRequired = selectedPath?.requiredParams.includes(paramKey);
+          return /*#__PURE__*/React.createElement(View, {
+            key: paramKey,
+            transparent: true,
+            style: {
+              marginBottom: 12
+            }
+          }, /*#__PURE__*/React.createElement(View, {
+            transparent: true,
+            style: {
+              flexDirection: 'row',
+              alignItems: 'center',
+              marginBottom: 4
+            }
+          }, /*#__PURE__*/React.createElement(Text, {
+            theme: "description"
+          }, paramKey), isRequired ? /*#__PURE__*/React.createElement(View, {
+            transparent: true,
+            style: {
+              marginLeft: 4,
+              paddingHorizontal: 6,
+              paddingVertical: 2,
+              backgroundColor: Colors.text.error,
+              borderRadius: 4
+            }
+          }, /*#__PURE__*/React.createElement(Text, {
+            theme: "description",
+            color: Colors.text.white,
+            style: {
+              fontSize: 10
+            }
+          }, "Required")) : /*#__PURE__*/React.createElement(View, {
+            transparent: true,
+            style: {
+              marginLeft: 4,
+              paddingHorizontal: 6,
+              paddingVertical: 2,
+              backgroundColor: Colors.borders.light,
+              borderRadius: 4
+            }
+          }, /*#__PURE__*/React.createElement(Text, {
+            theme: "description",
+            style: {
+              fontSize: 10
+            }
+          }, "Optional"))), /*#__PURE__*/React.createElement(TextInput, {
+            value: pathParams[paramKey] || '',
+            onFocusPosition: onFocusPosition,
+            placeholder: `Enter ${paramKey}${isRequired ? ' (required)' : ' (optional)'}`,
+            onChangeText: value => setPathParams({
+              ...pathParams,
+              [paramKey]: value
+            }),
+            style: {
+              padding: 10,
+              borderRadius: 8,
+              borderWidth: isRequired ? 2 : 1,
+              borderColor: isRequired && !pathParams[paramKey] ? Colors.text.error : Colors.borders.light
+            }
+          }));
+        })))), selectedPath?.path_name === 'custom' && /*#__PURE__*/React.createElement(View, {
+          style: {
+            marginBottom: 20
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h2",
+          style: {
+            marginBottom: 8
+          }
+        }, "Custom Path Name"), /*#__PURE__*/React.createElement(TextInput, {
+          value: customPathName,
+          onFocusPosition: onFocusPosition,
+          placeholder: "/your/custom/path",
+          onChangeText: setCustomPathName,
+          style: {
+            padding: 12,
+            borderRadius: 8
+          }
+        }))));
+      default:
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: sections,
+    keyExtractor: item => item,
+    key: 'notification_manager_list',
+    renderItem: renderSections
+  })), /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "action",
+    disabled: loading,
+    loading: loading,
+    onPress: () => confirmSendNotification({
+      test: true
+    }),
+    style: {
+      flex: 1,
+      opacity: loading || isValid().length > 0 ? 0.5 : 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    textAlign: "center",
+    theme: "h1",
+    color: Colors.text.white
+  }, loading ? sendingProgress ? `Sending ${sendingProgress.current}/${sendingProgress.total}` : 'Sending...' : 'Send Test')), /*#__PURE__*/React.createElement(Button, {
+    type: "success",
+    disabled: loading,
+    loading: loading,
+    onPress: () => confirmSendNotification(),
+    style: {
+      flex: 2,
+      marginLeft: 5,
+      opacity: loading || isValid().length > 0 ? 0.5 : 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    textAlign: "center",
+    theme: "h1",
+    color: Colors.text.white
+  }, loading ? sendingProgress ? `Sending batch ${sendingProgress.current} of ${sendingProgress.total}` : 'Sending...' : 'Send Notification'))), showGroupsModal && /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      padding: 20
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    float: true,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, "Notification Groups"), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      marginTop: 3
+    }
+  }, "Select a group to send to"))), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, loadingGroups ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 40,
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "large",
+    color: Colors.text.action
+  })) : /*#__PURE__*/React.createElement(FlatList, {
+    data: customGroup ? [customGroup, ...notificationGroups] : notificationGroups,
+    keyExtractor: item => item.notification_group_id,
+    renderItem: ({
+      item
+    }) => /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: () => handleSelectGroup(item.notification_group_id),
+      style: {
+        padding: 15,
+        borderBottomWidth: 1,
+        borderColor: Colors.borders.light,
+        backgroundColor: item.notification_group_id === 'custom_group' ? Colors.views.header : 'transparent'
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, item.name), item.notification_group_id === 'custom_group' && /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        marginLeft: 8,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        backgroundColor: Colors.buttons.background.action,
+        borderRadius: 4
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      color: Colors.text.white,
+      style: {
+        fontSize: 10
+      }
+    }, "CUSTOM"))), item.player_count !== undefined && /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        marginLeft: 8,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        backgroundColor: Colors.views.header,
+        borderRadius: 4
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        fontSize: 12,
+        fontWeight: '600'
+      }
+    }, item.player_count.toLocaleString(), " users"))), item.description && /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        marginTop: 4
+      }
+    }, item.description))),
+    ListEmptyComponent: /*#__PURE__*/React.createElement(View, {
+      style: {
+        padding: 40,
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "description"
+    }, "No groups found"))
+  })), /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    style: {
+      flex: 1
+    },
+    type: "close",
+    title: "CLOSE",
+    onPress: () => setShowGroupsModal(false)
+  })))), showEditCustomGroupModal && /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      padding: 20
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    float: true,
+    style: {
+      maxHeight: '80%',
+      minHeight: 400
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, "Edit Custom Recipients"), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      marginTop: 3
+    }
+  }, "Paste comma-separated player IDs"))), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      padding: 15
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginBottom: 10
+    }
+  }, "Player IDs (CSV format)"), /*#__PURE__*/React.createElement(TextInput, {
+    value: customGroupCsv,
+    onFocusPosition: onFocusPosition,
+    placeholder: "98,100,2485,etc",
+    onChangeText: setCustomGroupCsv,
+    multiline: true,
+    numberOfLines: 10,
+    style: {
+      padding: 12,
+      borderRadius: 8,
+      minHeight: 200,
+      textAlignVertical: 'top'
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      marginTop: 8
+    }
+  }, "Current count: ", customGroupCsv.split(',').filter(id => id.trim().length > 0).length, " IDs")), /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    style: {
+      flex: 1,
+      marginRight: 5
+    },
+    type: "close",
+    title: "CANCEL",
+    onPress: () => setShowEditCustomGroupModal(false)
+  }), /*#__PURE__*/React.createElement(Button, {
+    style: {
+      flex: 1
+    },
+    type: "success",
+    title: "SAVE",
+    onPress: handleSaveCustomGroup
+  })))));
+};
+export default NotificationManager;
+export { NotificationApi, NotificationHelpers };
+//# sourceMappingURL=index.js.map