be-components 7.6.3 → 7.6.4

package/src/NotificationManager/components/shared/NotificationBuilderForm.tsx

@@ -0,0 +1,364 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { FlatList, TouchableOpacity } from 'react-native';
+import { View, Text, TextInput } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
+import { NotificationHelpers } from '../../api';
+import { Icons } from '../../../Components';
+import DropDown from '../../../Components/Dropdown';
+import type { PlayerNotificationProps, FocusPositionProps } from '../../../types';
+
+interface NotificationBuilderFormProps {
+    notification: Partial<PlayerNotificationProps>;
+    onChange: (notification: Partial<PlayerNotificationProps>) => void;
+    onFocusPosition?: (pos: FocusPositionProps) => void;
+    showPreview?: boolean;
+    showType?: boolean;
+}
+
+const notification_types = [
+    { label: 'Order Notifications', value: 'order_notifications' },
+    { label: 'Competition Notifications', value: 'competition_notifications' },
+    { label: 'Social Notifications', value: 'social_notifications' }
+];
+
+const NotificationBuilderForm = ({
+    notification,
+    onChange,
+    onFocusPosition,
+    showPreview = true,
+    showType = true
+}: NotificationBuilderFormProps) => {
+    const Colors = useColors();
+    const [pathSearch, setPathSearch] = useState('');
+    const [selectedPath, setSelectedPath] = useState<typeof NotificationHelpers.app_paths[0] | undefined>(
+        NotificationHelpers.app_paths[0]
+    );
+    const [pathParams, setPathParams] = useState<Record<string, string>>({});
+
+    useEffect(() => {
+        // Initialize selectedPath from notification options if exists
+        if (notification.options?.data?.path_name) {
+            const path = NotificationHelpers.app_paths.find(p => p.path_name === notification.options?.data?.path_name);
+            if (path) {
+                setSelectedPath(path);
+                setPathParams(notification.options?.data?.params || {});
+            }
+        }
+    }, []);
+
+    useEffect(() => {
+        // Update notification options when path or params change
+        if (selectedPath) {
+            const newOptions = {
+                ...(notification.options || {}),
+                id: notification.options?.id || Date.now().toString(),
+                body: notification.body || '',
+                icon: 'default',
+                type: notification.type || 'order_notifications',
+                data: {
+                    ...(notification.options?.data || {}),
+                    id: notification.options?.data?.id || Date.now().toString(),
+                    player_id: notification.options?.data?.player_id || '',
+                    pageStack: 'MainStack',
+                    page: selectedPath.path_name,
+                    pageParams: pathParams,
+                    path_name: selectedPath.path_name === 'custom' ? '' : selectedPath.path_name,
+                    params: pathParams
+                }
+            };
+
+            onChange({ ...notification, options: newOptions });
+        }
+    }, [selectedPath, pathParams]);
+
+    const filteredPaths = useMemo(() => {
+        if (!pathSearch) return [];
+        const search = pathSearch.toLowerCase();
+        return NotificationHelpers.app_paths.filter(
+            (path) =>
+                path.label.toLowerCase().includes(search) ||
+                path.path_name.toLowerCase().includes(search)
+        );
+    }, [pathSearch]);
+
+    return (
+        <View transparent style={{ flex: 1 }}>
+            {/* Preview Section */}
+            {showPreview && (
+                <View float style={{ margin: 5 }}>
+                    <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                        <View transparent style={{ flex: 1 }}>
+                            <Text theme='h1'>Preview</Text>
+                            <Text theme='description' style={{ marginTop: 3 }}>What will this notification look like?</Text>
+                        </View>
+                    </View>
+                    <View
+                        float
+                        style={{
+                            padding: 15,
+                            margin: 10,
+                            borderRadius: 8,
+                            borderWidth: 1,
+                            borderColor: Colors.borders.light,
+                        }}
+                    >
+                        <View transparent style={{ flexDirection: 'row', alignItems: 'center' }}>
+                            <View
+                                style={{
+                                    width: 40,
+                                    height: 40,
+                                    borderRadius: 8,
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    marginRight: 12,
+                                }}
+                            >
+                                <Icons.NotificationIcon size={20} color={Colors.text.h1} />
+                            </View>
+                            <View transparent style={{ flex: 1 }}>
+                                <Text theme="h1">
+                                    {notification.title || 'Notification Title'}
+                                </Text>
+                                <Text theme="description" style={{ marginTop: 4 }}>
+                                    {notification.body || 'Notification message will appear here'}
+                                </Text>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+            )}
+
+            {/* Message Section */}
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                <View float style={{ minWidth: 300, flexGrow: 1, margin: 5 }}>
+                    <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                        <View transparent style={{ flex: 1 }}>
+                            <Text theme='h1'>Notification Message</Text>
+                            <Text theme='description' style={{ marginTop: 3 }}>Update notification message below</Text>
+                        </View>
+                    </View>
+                    <View transparent type='body'>
+                        <View transparent style={{ padding: 10 }}>
+                            <Text theme="h2" style={{ marginBottom: 10 }}>
+                                Notification Title
+                            </Text>
+                            <TextInput
+                                value={notification.title}
+                                onFocusPosition={onFocusPosition}
+                                placeholder="Enter notification title"
+                                onChangeText={(title) => onChange({ ...notification, title })}
+                            />
+                        </View>
+                        <View transparent style={{ padding: 10 }}>
+                            <Text theme="h2" style={{ marginBottom: 10 }}>
+                                Notification Body
+                            </Text>
+                            <TextInput
+                                value={notification.body}
+                                onFocusPosition={onFocusPosition}
+                                placeholder="Enter notification message"
+                                onChangeText={(body) => onChange({ ...notification, body })}
+                                multiline
+                                numberOfLines={6}
+                                style={{ padding: 12, borderRadius: 8, minHeight: 120 }}
+                            />
+                        </View>
+                    </View>
+                </View>
+
+                {/* Settings Section */}
+                <View float style={{ flexGrow: 1, minWidth: 300, margin: 5 }}>
+                    <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                        <View transparent style={{ flex: 1 }}>
+                            <Text theme='h1'>Notification Settings</Text>
+                            <Text theme='description' style={{ marginTop: 3 }}>Manage settings below</Text>
+                        </View>
+                    </View>
+                    <View transparent type='body'>
+                        {showType === true && (
+                            <View type='row' style={{ padding: 10 }}>
+                                <Text theme="h2" style={{ flex: 1 }}>
+                                    Notification Type
+                                </Text>
+                                <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;
+                                        onChange({ ...notification, type: type as any });
+                                    }}
+                                />
+                            </View>
+                        )}
+                        <View transparent style={{ padding: 10 }}>
+                            <Text theme="h2" style={{ marginBottom: 10 }}>
+                                Link Override (Optional)
+                            </Text>
+                            <TextInput
+                                value={notification.link_override || ''}
+                                onFocusPosition={onFocusPosition}
+                                placeholder="https://example.com"
+                                onChangeText={(link_override) =>
+                                    onChange({ ...notification, link_override })
+                                }
+                                style={{ padding: 12, borderRadius: 8 }}
+                            />
+                        </View>
+                        <View transparent style={{ padding: 10 }}>
+                            <Text theme="h2" style={{ marginBottom: 10 }}>
+                                Deep Link Path
+                            </Text>
+
+                            {/* Selected Path Display */}
+                            <View
+                                type="header"
+                                style={{
+                                    padding: 12,
+                                    borderRadius: 8,
+                                    marginBottom: 8,
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between'
+                                }}
+                            >
+                                <View transparent style={{ flex: 1 }}>
+                                    <Text theme="h1" style={{ marginBottom: 2 }}>
+                                        {selectedPath?.label}
+                                    </Text>
+                                    <Text theme="description" style={{ fontSize: 12 }}>
+                                        {selectedPath?.path_name}
+                                    </Text>
+                                </View>
+                                {selectedPath?.primary === true && (
+                                    <View transparent style={{ paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4 }}>
+                                        <Text theme="description" color={Colors.text.white} style={{ fontSize: 10 }}>
+                                            Primary
+                                        </Text>
+                                    </View>
+                                )}
+                            </View>
+
+                            {/* Search Box */}
+                            <TextInput
+                                value={pathSearch}
+                                placeholder="Search paths to change..."
+                                onFocusPosition={onFocusPosition}
+                                onChangeText={setPathSearch}
+                                style={{ padding: 12, borderRadius: 8, marginBottom: 8 }}
+                            />
+
+                            {/* Path Results List */}
+                            {pathSearch ? (
+                                <View
+                                    float
+                                    style={{
+                                        maxHeight: 300,
+                                        borderRadius: 8,
+                                        borderWidth: 1,
+                                        borderColor: Colors.borders.light,
+                                    }}
+                                >
+                                    <FlatList
+                                        data={filteredPaths}
+                                        keyExtractor={(item) => item.path_name}
+                                        renderItem={({ item }) => (
+                                            <TouchableOpacity
+                                                onPress={() => {
+                                                    setSelectedPath(item);
+                                                    setPathParams(item.params as any);
+                                                    setPathSearch('');
+                                                }}
+                                                style={{
+                                                    padding: 12,
+                                                    borderBottomWidth: 1,
+                                                    borderColor: Colors.borders.light,
+                                                }}
+                                            >
+                                                <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                                                    <View transparent style={{ flex: 1 }}>
+                                                        <Text theme="h2" style={{ marginBottom: 2 }}>
+                                                            {item.label}
+                                                        </Text>
+                                                        <Text theme="description" style={{ fontSize: 11 }}>
+                                                            {item.path_name}
+                                                        </Text>
+                                                    </View>
+                                                    {item.primary === true && (
+                                                        <View transparent style={{ paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, marginLeft: 8 }}>
+                                                            <Text theme="description" color={Colors.text.white} style={{ fontSize: 9 }}>
+                                                                Primary
+                                                            </Text>
+                                                        </View>
+                                                    )}
+                                                </View>
+                                            </TouchableOpacity>
+                                        )}
+                                        ListEmptyComponent={
+                                            <View style={{ padding: 20, alignItems: 'center' }}>
+                                                <Text theme="description">No paths found</Text>
+                                            </View>
+                                        }
+                                    />
+                                </View>
+                            ) : null}
+                        </View>
+                        {Object.keys(selectedPath?.params ?? {}).length > 0 ? (
+                            <View style={{ padding: 10 }}>
+                                <Text theme="h2" style={{ marginBottom: 8 }}>
+                                    Path Parameters
+                                </Text>
+                                <View type="header" style={{ padding: 12, borderRadius: 8 }}>
+                                    {Object.keys(selectedPath?.params ?? {}).map((paramKey) => {
+                                        const isRequired = selectedPath?.requiredParams.includes(paramKey);
+                                        return (
+                                            <View key={paramKey} transparent style={{ marginBottom: 12 }}>
+                                                <View transparent style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
+                                                    <Text theme="description">
+                                                        {paramKey}
+                                                    </Text>
+                                                    {isRequired ? (
+                                                        <View transparent style={{ marginLeft: 4, paddingHorizontal: 6, paddingVertical: 2, backgroundColor: Colors.text.error, borderRadius: 4 }}>
+                                                            <Text theme="description" color={Colors.text.white} style={{ fontSize: 10 }}>
+                                                                Required
+                                                            </Text>
+                                                        </View>
+                                                    ) : (
+                                                        <View transparent style={{ marginLeft: 4, paddingHorizontal: 6, paddingVertical: 2, backgroundColor: Colors.borders.light, borderRadius: 4 }}>
+                                                            <Text theme="description" style={{ fontSize: 10 }}>
+                                                                Optional
+                                                            </Text>
+                                                        </View>
+                                                    )}
+                                                </View>
+                                                <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 ? 1 : 0,
+                                                        borderColor: isRequired ? Colors.text.error : 'transparent'
+                                                    }}
+                                                />
+                                            </View>
+                                        );
+                                    })}
+                                </View>
+                            </View>
+                        ) : null}
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+export default NotificationBuilderForm;

package/src/NotificationManager/components/shared/StatusBadge.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, Text } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
+import type { NotificationJobStatus } from '../../../types';
+
+interface StatusBadgeProps {
+    status: NotificationJobStatus;
+}
+
+const StatusBadge = ({ status }: StatusBadgeProps) => {
+    const Colors = useColors();
+
+    const getStatusColor = () => {
+        switch (status) {
+            case 'pending':
+                return Colors.borders.light;
+            case 'ready':
+                return Colors.text.action;
+            case 'processing':
+                return Colors.text.warning;
+            case 'sent':
+                return Colors.text.success;
+            case 'failed':
+                return Colors.text.error;
+            case 'cancelled':
+                return Colors.text.h2;
+            default:
+                return Colors.borders.light;
+        }
+    };
+
+    const getStatusLabel = () => {
+        switch (status) {
+            case 'pending':
+                return 'Draft';
+            case 'ready':
+                return 'Scheduled';
+            case 'processing':
+                return 'Sending';
+            case 'sent':
+                return 'Sent';
+            case 'failed':
+                return 'Failed';
+            case 'cancelled':
+                return 'Cancelled';
+            default:
+                return status;
+        }
+    };
+
+    return (
+        <View
+            transparent
+            style={{
+                paddingHorizontal: 8,
+                paddingVertical: 4,
+                backgroundColor: getStatusColor(),
+                borderRadius: 4,
+            }}
+        >
+            <Text
+                theme="description"
+                color={Colors.text.white}
+                style={{ fontSize: 11, fontWeight: '600' }}
+            >
+                {getStatusLabel()}
+            </Text>
+        </View>
+    );
+};
+
+export default StatusBadge;

package/src/NotificationManager/index.tsx

@@ -251,14 +251,6 @@ const NotificationManager = ({
     };
 
     const handleSendNotification = async (options?:{ test:boolean }) => {
-        // 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
@@ -295,26 +287,48 @@ const NotificationManager = ({
                 last_update_datetime: new Date().toISOString(),
             };
 
-            // Split into batches of 500
-            const BATCH_SIZE = 500;
-            const batches: string[][] = [];
-            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;
+            // Determine if we should use notification_group_id or player_ids
+            const useGroupId = selectedGroup &&
+                               selectedGroup.notification_group_id !== 'custom_group' &&
+                               !options?.test;
 
-                setSendingProgress({ current: i + 1, total: batches.length });
+            if (useGroupId) {
+                // Use notification_group_id - server handles member fetching
+                console.log('Sending to group:', selectedGroup!.notification_group_id);
                 await NotificationApi.broadcastNotifications(
                     completeNotification,
-                    batch
+                    [], // Empty player_ids when using group_id
+                    selectedGroup!.notification_group_id
                 );
-            }
+            } else {
+                // Use player_ids - either custom group or test send
+                let player_ids_to_send = options?.test
+                    ? [me.player_id]
+                    : [...groupMemberIds];
+
+                console.log('Sending to player_ids:', player_ids_to_send.length);
+
+                // Split into batches of 500
+                const BATCH_SIZE = 500;
+                const batches: string[][] = [];
+                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(null);
+                    setSendingProgress({ current: i + 1, total: batches.length });
+                    await NotificationApi.broadcastNotifications(
+                        completeNotification,
+                        batch
+                    );
+                }
+
+                setSendingProgress(null);
+            }
 
             if (onComplete && !options?.test) {
                 onComplete(completeNotification);
@@ -333,7 +347,11 @@ const NotificationManager = ({
             }
 
             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' : ''}!`;
+            const recipientMessage = options?.test
+                ? 'Test notification sent to you!'
+                : useGroupId
+                    ? `Notification sent successfully to group "${selectedGroup!.name}"!`
+                    : `Notification sent successfully to ${recipientCount} user${recipientCount !== 1 ? 's' : ''}!`;
             alert(recipientMessage);
         } catch (error) {
             console.error('Error sending notification:', error);
@@ -915,3 +933,4 @@ const NotificationManager = ({
 
 export default NotificationManager;
 export { NotificationApi, NotificationHelpers };
+export { default as NotificationManagerTabs } from './NotificationManagerTabs';

package/src/index.tsx

@@ -73,6 +73,7 @@ import BettorBotDashboard from './BettorBot';
 import NotificationManager from './NotificationManager';
 import { NotificationApi, NotificationHelpers } from './NotificationManager/api';
 import BetRouter from './BetRouter/index';
+import NotificationManagerTabs from './NotificationManager/NotificationManagerTabs';
 
 // Charts
 export { LivePriceChart, BaseLineChart, TradeChartAdapter } from './Charts';
@@ -84,6 +85,7 @@ export {
   MyAction,
   CreateEmbed,
   ReferralCodeManager,
+  NotificationManagerTabs,
   BetRouter,
   CreateEngagement,
   DiscordConnectionManager,

package/src/types.d.ts

@@ -910,11 +910,12 @@ export interface NotificationGroupProps {
     notification_group_id:string,
     name: string,
     description: string,
-    grouping_function: string,
+    grouping_function?: string,
     player_count:number,
     status: 'active'|'inactive',
     create_datetime:any,
-    last_update_datetime: any
+    last_update_datetime: any,
+    members?: NotificationGroupMemberProps[]
 }
 
 export interface NotificationGroupMemberProps {
@@ -923,10 +924,44 @@ export interface NotificationGroupMemberProps {
     batch_number:number,
     player_ids:string[],
     create_datetime: any,
-    player_count:number
+    player_count:number,
+    status: 'active' | 'inactive',
+    last_update_datetime: any
+}
+
+export type NotificationJobStatus = 'pending' | 'ready' | 'processing' | 'sent' | 'failed' | 'cancelled';
+
+export interface NotificationJobProps {
+    notification_job_id: string,
+    notification_group_id: string,
+    notification: PlayerNotificationProps,
+    scheduled_time: any,
+    status: NotificationJobStatus,
+    sent_datetime?: any,
+    error_message?: string | null,
+    create_datetime: any,
     last_update_datetime: any
 }
 
+// UI-specific types for NotificationManager
+export type NotificationManagerTab = 'send' | 'groups' | 'schedule' | 'jobs';
+
+export interface GroupFormData {
+    notification_group_id?: string,
+    name: string,
+    description: string,
+    grouping_function?: string,
+    status: 'active' | 'inactive'
+}
+
+export interface JobFormData {
+    notification_job_id?: string,
+    notification_group_id: string,
+    notification: PlayerNotificationProps,
+    scheduled_time: Date,
+    status: NotificationJobStatus
+}
+
 export interface NotificationOptionProps {
     id:string, 
     body:string,