be-components 7.6.3 → 7.6.4

package/src/NotificationManager/components/ScheduleNotification.tsx

@@ -0,0 +1,388 @@
+import React, { useState, useEffect } from 'react';
+import { ScrollView, ActivityIndicator } from 'react-native';
+import { View, Text, Button } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+import { NotificationApi, NotificationHelpers } from '../api';
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
+import { Icons } from '../../Components';
+import NotificationBuilderForm from './shared/NotificationBuilderForm';
+import GroupSelector from './shared/GroupSelector';
+import BETimePicker from '../../Components/BETimePicker';
+import moment from 'moment-mini';
+import type { PlayerNotificationProps, NotificationGroupProps, NotificationJobProps, FocusPositionProps } from '../../types';
+
+interface ScheduleNotificationProps {
+    onFocusPosition?: (pos: FocusPositionProps) => void;
+    editingJob?: NotificationJobProps | null;
+    onJobSaved?: () => void;
+}
+
+const ScheduleNotification = ({ onFocusPosition, editingJob, onJobSaved }: ScheduleNotificationProps) => {
+    const Colors = useColors();
+    const [loading, setLoading] = useState(false);
+    const [loadingGroups, setLoadingGroups] = useState(false);
+    const [groups, setGroups] = useState<NotificationGroupProps[]>([]);
+    const [selectedGroup, setSelectedGroup] = useState<NotificationGroupProps | null>(null);
+    const [showGroupSelector, setShowGroupSelector] = useState(false);
+    const [scheduledTime, setScheduledTime] = useState(moment().add(1, 'hour')); // 1 hour from now
+    const [notification, setNotification] = useState<Partial<PlayerNotificationProps>>({
+        type: 'order_notifications',
+        notify_body_type: 'custom',
+        title: '',
+        body: '',
+        status: 'unread',
+        expire_time: 0,
+        options: {
+            id: '',
+            body: '',
+            icon: '',
+            type: '',
+            data: {
+                id: '',
+                player_id: '',
+                pageStack: 'MainStack',
+                page: '',
+                pageParams: {},
+                path_name: '',
+                params: {}
+            }
+        }
+    });
+
+    useEffect(() => {
+        loadGroups();
+
+        // If editing a job, populate the form
+        if (editingJob) {
+            setNotification(editingJob.notification);
+            setScheduledTime(moment(editingJob.scheduled_time));
+            loadGroupForJob(editingJob.notification_group_id);
+        }
+    }, [editingJob]);
+
+    const loadGroups = async () => {
+        setLoadingGroups(true);
+        const activeGroups = await NotificationApi.getActiveNotificationGroups();
+        setGroups(activeGroups);
+        setLoadingGroups(false);
+    };
+
+    const loadGroupForJob = async (groupId: string) => {
+        const group = await NotificationApi.getNotificationGroupById(groupId);
+        if (group) {
+            setSelectedGroup(group);
+        }
+    };
+
+    const handleSelectGroup = (group: NotificationGroupProps) => {
+        setSelectedGroup(group);
+    };
+
+    const validateNotification = (): { valid: boolean; errors: string[] } => {
+        const errors: string[] = [];
+
+        if (!notification.title?.trim()) {
+            errors.push('Notification title is required');
+        }
+
+        if (!notification.body?.trim()) {
+            errors.push('Notification body is required');
+        }
+
+        if (!selectedGroup) {
+            errors.push('Please select a recipient group');
+        }
+
+        if (scheduledTime.isSameOrBefore(moment())) {
+            errors.push('Scheduled time must be in the future');
+        }
+
+        // Check required path parameters
+        if (notification.options?.data?.path_name) {
+            const path = NotificationHelpers.app_paths.find(p => p.path_name === notification.options?.data?.path_name);
+            if (path?.requiredParams) {
+                const params = notification.options.data.params || {};
+                const missingParams = path.requiredParams.filter(param => !params[param]);
+                if (missingParams.length > 0) {
+                    errors.push(`Missing required parameters: ${missingParams.join(', ')}`);
+                }
+            }
+        }
+
+        return {
+            valid: errors.length === 0,
+            errors
+        };
+    };
+
+    const handleSaveDraft = async () => {
+        const validation = validateNotification();
+        if (!validation.valid) {
+            alert(`Cannot save:\n\n${validation.errors.join('\n')}`);
+            return;
+        }
+
+        try {
+            setLoading(true);
+
+            const jobData = {
+                notification_group_id: selectedGroup!.notification_group_id,
+                notification: notification as PlayerNotificationProps,
+                scheduled_time: scheduledTime.toISOString(),
+                status: 'pending' as const
+            };
+
+            if (editingJob) {
+                // Update existing job
+                await NotificationApi.updateNotificationJob({
+                    ...editingJob,
+                    ...jobData
+                });
+                alert('Job updated and saved as draft!');
+            } else {
+                // Create new job
+                await NotificationApi.createNotificationJob(jobData);
+                alert('Job saved as draft! Finalize it when ready to schedule.');
+            }
+
+            // Reset form
+            resetForm();
+            onJobSaved?.();
+        } catch (error) {
+            console.error('Error saving draft:', error);
+            alert('Failed to save draft. Please try again.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSchedule = () => {
+        const validation = validateNotification();
+        if (!validation.valid) {
+            alert(`Cannot schedule:\n\n${validation.errors.join('\n')}`);
+            return;
+        }
+
+        showConfirmAlert(
+            'Schedule Notification',
+            `This will schedule the notification to be sent to ${selectedGroup?.name} (${selectedGroup?.player_count} users) at ${scheduledTime.format('MM/DD/YYYY hh:mm a')}. Continue?`,
+            async () => {
+                try {
+                    setLoading(true);
+
+                    const jobData = {
+                        notification_group_id: selectedGroup!.notification_group_id,
+                        notification: notification as PlayerNotificationProps,
+                        scheduled_time: scheduledTime.toISOString(),
+                        status: 'pending' as const
+                    };
+
+                    let jobId: string;
+
+                    if (editingJob) {
+                        // Update existing job
+                        await NotificationApi.updateNotificationJob({
+                            ...editingJob,
+                            ...jobData
+                        });
+                        jobId = editingJob.notification_job_id;
+                    } else {
+                        // Create new job
+                        const newJob = await NotificationApi.createNotificationJob(jobData);
+                        jobId = newJob!.notification_job_id;
+                    }
+
+                    // Finalize the job to mark it as ready
+                    await NotificationApi.finalizeNotificationJob(jobId);
+
+                    alert('Notification scheduled successfully!');
+
+                    // Reset form
+                    resetForm();
+                    onJobSaved?.();
+                } catch (error) {
+                    console.error('Error scheduling notification:', error);
+                    alert('Failed to schedule notification. Please try again.');
+                } finally {
+                    setLoading(false);
+                }
+            }
+        );
+    };
+
+    const resetForm = () => {
+        setNotification({
+            type: 'order_notifications',
+            notify_body_type: 'custom',
+            title: '',
+            body: '',
+            status: 'unread',
+            expire_time: 0,
+            options: {
+                id: '',
+                body: '',
+                icon: '',
+                type: '',
+                data: {
+                    id: '',
+                    player_id: '',
+                    pageStack: 'MainStack',
+                    page: '',
+                    pageParams: {},
+                    path_name: '',
+                    params: {}
+                }
+            }
+        });
+        setSelectedGroup(null);
+        setScheduledTime(moment().add(1, 'hour'));
+    };
+
+    return (
+        <View style={{ flex: 1 }}>
+            {/* Header */}
+            <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
+                <View transparent style={{ flex: 1 }}>
+                    <Text theme='h1'>{editingJob ? 'Edit Scheduled Notification' : 'Schedule Notification'}</Text>
+                    <Text theme='description' style={{ marginTop: 3 }}>
+                        {editingJob ? 'Update notification details and reschedule' : 'Create and schedule a notification for later'}
+                    </Text>
+                </View>
+            </View>
+
+            <ScrollView style={{ flex: 1 }}>
+                {/* Group Selection */}
+                <View float style={{ margin: 10, padding: 15 }}>
+                    <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
+                        <View transparent style={{ flex: 1 }}>
+                            <Text theme="h2">Recipients</Text>
+                            <Text theme="description" style={{ marginTop: 4 }}>
+                                {selectedGroup ? `${selectedGroup.player_count} users in group` : 'No group selected'}
+                            </Text>
+                        </View>
+                        <Button
+                            type="action"
+                            onPress={() => {
+                                loadGroups();
+                                setShowGroupSelector(true);
+                            }}
+                            style={{ padding: 8 }}
+                        >
+                            <Text theme="h1" color={Colors.text.white}>
+                                Select Group
+                            </Text>
+                        </Button>
+                    </View>
+
+                    {selectedGroup && (
+                        <View
+                            float
+                            style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                padding: 12,
+                                borderRadius: 8,
+                                marginTop: 5
+                            }}
+                        >
+                            <View transparent style={{ flex: 1 }}>
+                                <Text theme="h1">{selectedGroup.name}</Text>
+                                <Text theme="description" style={{ marginTop: 2 }}>
+                                    {selectedGroup.description}
+                                </Text>
+                            </View>
+                            <Button
+                                type="error"
+                                onPress={() => setSelectedGroup(null)}
+                                style={{ padding: 8 }}
+                            >
+                                <Icons.CloseIcon size={16} color={Colors.text.white} />
+                            </Button>
+                        </View>
+                    )}
+                </View>
+
+                {/* Scheduled Time */}
+                <View float style={{ margin: 10, padding: 15 }}>
+                    <Text theme="h2" style={{ marginBottom: 8 }}>Scheduled Send Time</Text>
+                    <BETimePicker
+                        selected_time={scheduledTime}
+                        onSelectTime={setScheduledTime}
+                    />
+                </View>
+
+                {/* Notification Builder */}
+                <NotificationBuilderForm
+                    notification={notification}
+                    onChange={setNotification}
+                    onFocusPosition={onFocusPosition}
+                    showPreview={true}
+                    showType={true}
+                />
+            </ScrollView>
+
+            {/* Footer Actions */}
+            <View type='footer' style={{ flexDirection: 'row', padding: 10 }}>
+                <Button
+                    type="close"
+                    onPress={resetForm}
+                    style={{ flex: 1, padding: 12, marginRight: 5 }}
+                    disabled={loading}
+                >
+                    <Text theme="h1" color={Colors.text.white}>
+                        Clear
+                    </Text>
+                </Button>
+                <Button
+                    type="success"
+                    onPress={handleSaveDraft}
+                    style={{ flex: 1, padding: 12, marginHorizontal: 5 }}
+                    disabled={loading}
+                >
+                    {loading ? (
+                        <ActivityIndicator size="small" color={Colors.text.white} />
+                    ) : (
+                        <>
+                            <Icons.CheckIcon size={14} color={Colors.text.white} />
+                            <Text theme="h1" color={Colors.text.white} style={{ marginLeft: 6 }}>
+                                Save Draft
+                            </Text>
+                        </>
+                    )}
+                </Button>
+                <Button
+                    type="action"
+                    onPress={handleSchedule}
+                    style={{ flex: 1, padding: 12, marginLeft: 5 }}
+                    disabled={loading}
+                >
+                    {loading ? (
+                        <ActivityIndicator size="small" color={Colors.text.white} />
+                    ) : (
+                        <>
+                            <Icons.SendIcon size={14} color={Colors.text.white} />
+                            <Text theme="h1" color={Colors.text.white} style={{ marginLeft: 6 }}>
+                                Schedule
+                            </Text>
+                        </>
+                    )}
+                </Button>
+            </View>
+
+            {/* Group Selector Modal */}
+            <GroupSelector
+                visible={showGroupSelector}
+                onClose={() => setShowGroupSelector(false)}
+                onSelectGroup={handleSelectGroup}
+                groups={groups}
+                loading={loadingGroups}
+                selectedGroup={selectedGroup}
+                showCustomOption={false}
+                onFocusPosition={onFocusPosition}
+            />
+        </View>
+    );
+};
+
+export default ScheduleNotification;

package/src/NotificationManager/components/index.ts

@@ -0,0 +1,7 @@
+export { default as GroupManagement } from './GroupManagement';
+export { default as ScheduleNotification } from './ScheduleNotification';
+export { default as JobManagement } from './JobManagement';
+export { default as GroupSelector } from './shared/GroupSelector';
+export { default as StatusBadge } from './shared/StatusBadge';
+export { default as DateTimePicker } from './shared/DateTimePicker';
+export { default as NotificationBuilderForm } from './shared/NotificationBuilderForm';

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { View, Text, TextInput } from '../../../Components/Themed';
+import type { FocusPositionProps } from '../../../types';
+
+interface DateTimePickerProps {
+    value: Date;
+    onChange: (date: Date) => void;
+    label?: string;
+    minDate?: Date;
+    onFocusPosition?: (pos: FocusPositionProps) => void;
+}
+
+const DateTimePicker = ({ value, onChange, label, onFocusPosition }: DateTimePickerProps) => {
+
+    const formatDateForInput = (date: Date) => {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    };
+
+    const formatTimeForInput = (date: Date) => {
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        return `${hours}:${minutes}`;
+    };
+
+    const handleDateChange = (dateString: string) => {
+        if (!dateString) return;
+        const parts = dateString.split('-').map(Number);
+        if (parts.length !== 3) return;
+        const [year, month, day] = parts;
+        if (year === undefined || month === undefined || day === undefined) return;
+        const newDate = new Date(value);
+        newDate.setFullYear(year);
+        newDate.setMonth(month - 1);
+        newDate.setDate(day);
+        onChange(newDate);
+    };
+
+    const handleTimeChange = (timeString: string) => {
+        if (!timeString) return;
+        const parts = timeString.split(':').map(Number);
+        if (parts.length !== 2) return;
+        const [hours, minutes] = parts;
+        if (hours === undefined || minutes === undefined) return;
+        const newDate = new Date(value);
+        newDate.setHours(hours);
+        newDate.setMinutes(minutes);
+        onChange(newDate);
+    };
+
+    
+    return (
+        <View transparent>
+            {label && (
+                <Text theme="h2" style={{ marginBottom: 8 }}>
+                    {label}
+                </Text>
+            )}
+            <View transparent style={{ flexDirection: 'row' }}>
+                <View transparent style={{ flex: 1, marginRight: 5 }}>
+                    <Text theme="description" style={{ marginBottom: 4, fontSize: 12 }}>
+                        Date
+                    </Text>
+                    <TextInput
+                        value={formatDateForInput(value)}
+                        onFocusPosition={onFocusPosition}
+                        placeholder="YYYY-MM-DD"
+                        onChangeText={handleDateChange}
+                        style={{ padding: 12, borderRadius: 8 }}
+                    />
+                </View>
+                <View transparent style={{ flex: 1, marginLeft: 5 }}>
+                    <Text theme="description" style={{ marginBottom: 4, fontSize: 12 }}>
+                        Time
+                    </Text>
+                    <TextInput
+                        value={formatTimeForInput(value)}
+                        onFocusPosition={onFocusPosition}
+                        placeholder="HH:MM"
+                        onChangeText={handleTimeChange}
+                        style={{ padding: 12, borderRadius: 8 }}
+                    />
+                </View>
+            </View>
+            <Text theme="description" style={{ marginTop: 4, fontSize: 11 }}>
+                Selected: {value.toLocaleString()}
+            </Text>
+        </View>
+    );
+};
+
+export default DateTimePicker;

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

@@ -0,0 +1,130 @@
+import React from 'react';
+import { FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { View, Text, Button } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
+import type { NotificationGroupProps, FocusPositionProps } from '../../../types';
+
+interface GroupSelectorProps {
+    visible: boolean;
+    onClose: () => void;
+    onSelectGroup: (group: NotificationGroupProps) => void;
+    groups: NotificationGroupProps[];
+    loading?: boolean;
+    selectedGroup?: NotificationGroupProps | null;
+    showCustomOption?: boolean;
+    customGroup?: NotificationGroupProps;
+    onFocusPosition?: (pos: FocusPositionProps) => void;
+}
+
+const GroupSelector = ({
+    visible,
+    onClose,
+    onSelectGroup,
+    groups,
+    loading = false,
+    selectedGroup,
+    showCustomOption = true,
+    customGroup
+}: GroupSelectorProps) => {
+    const Colors = useColors();
+
+    if (!visible) return null;
+
+    // Combine custom group with regular groups if enabled
+    const allGroups = showCustomOption && customGroup
+        ? [customGroup, ...groups]
+        : groups;
+
+    return (
+        <View type='blur' style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, padding: 20 }}>
+            <View float style={{ flex: 1 }}>
+                <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                    <View transparent style={{ flex: 1 }}>
+                        <Text theme='h1'>Notification Groups</Text>
+                        <Text theme='description' style={{ marginTop: 3 }}>Select a group to send to</Text>
+                    </View>
+                </View>
+                <View style={{ flex: 1 }}>
+                    {loading ? (
+                        <View style={{ padding: 40, alignItems: 'center' }}>
+                            <ActivityIndicator size="large" color={Colors.text.action} />
+                        </View>
+                    ) : (
+                        <FlatList
+                            data={allGroups}
+                            keyExtractor={(item) => item.notification_group_id}
+                            renderItem={({ item }) => {
+                                const isSelected = selectedGroup?.notification_group_id === item.notification_group_id;
+                                const isCustom = item.notification_group_id === 'custom_group';
+
+                                return (
+                                    <TouchableOpacity
+                                        onPress={() => {
+                                            onSelectGroup(item);
+                                            onClose();
+                                        }}
+                                        style={{
+                                            padding: 15,
+                                            borderBottomWidth: 1,
+                                            borderColor: Colors.borders.light,
+                                            backgroundColor: isSelected ? Colors.views.header : 'transparent'
+                                        }}
+                                    >
+                                        <View transparent>
+                                            <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                                                <View transparent style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+                                                    <Text theme="h1">{item.name}</Text>
+                                                    {isCustom && (
+                                                        <View transparent style={{ marginLeft: 8, paddingHorizontal: 6, paddingVertical: 2, backgroundColor: Colors.buttons.background.action, borderRadius: 4 }}>
+                                                            <Text theme="description" color={Colors.text.white} style={{ fontSize: 10 }}>
+                                                                CUSTOM
+                                                            </Text>
+                                                        </View>
+                                                    )}
+                                                    {isSelected && (
+                                                        <View transparent style={{ marginLeft: 8, paddingHorizontal: 6, paddingVertical: 2, backgroundColor: Colors.text.success, borderRadius: 4 }}>
+                                                            <Text theme="description" color={Colors.text.white} style={{ fontSize: 10 }}>
+                                                                SELECTED
+                                                            </Text>
+                                                        </View>
+                                                    )}
+                                                </View>
+                                                {item.player_count !== undefined && (
+                                                    <View transparent style={{ marginLeft: 8, paddingHorizontal: 8, paddingVertical: 4, backgroundColor: Colors.views.header, borderRadius: 4 }}>
+                                                        <Text theme="description" style={{ fontSize: 12, fontWeight: '600' }}>
+                                                            {item.player_count.toLocaleString()} users
+                                                        </Text>
+                                                    </View>
+                                                )}
+                                            </View>
+                                            {item.description && (
+                                                <Text theme="description" style={{ marginTop: 4 }}>
+                                                    {item.description}
+                                                </Text>
+                                            )}
+                                        </View>
+                                    </TouchableOpacity>
+                                );
+                            }}
+                            ListEmptyComponent={
+                                <View style={{ padding: 40, alignItems: 'center' }}>
+                                    <Text theme="description">No groups found</Text>
+                                </View>
+                            }
+                        />
+                    )}
+                </View>
+                <View type='footer' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderBottomRightRadius: 8, borderBottomLeftRadius: 8 }}>
+                    <Button
+                        style={{ flex: 1 }}
+                        type='close'
+                        title='CLOSE'
+                        onPress={onClose}
+                    />
+                </View>
+            </View>
+        </View>
+    );
+};
+
+export default GroupSelector;