@umituz/react-native-settings 4.21.11 → 4.21.13

package/src/domains/notifications/quietHours/infrastructure/hooks/useQuietHoursActions.ts

@@ -0,0 +1,52 @@
+/**
+ * useQuietHoursActions Hook
+ * Manages quiet hours configuration
+ */
+
+import { useCallback } from 'react';
+import { usePreferencesStore, useQuietHours } from '../../../reminders/infrastructure/storage/RemindersStore';
+import type { QuietHoursConfig } from '../../../infrastructure/services/types';
+
+export const useQuietHoursActions = () => {
+  const quietHours = useQuietHours();
+  const { updateQuietHours } = usePreferencesStore();
+
+  const setQuietHoursEnabled = useCallback(async (enabled: boolean): Promise<void> => {
+    await updateQuietHours({ ...quietHours, enabled });
+  }, [quietHours, updateQuietHours]);
+
+  const setStartTime = useCallback(async (hour: number, minute: number): Promise<void> => {
+    await updateQuietHours({ ...quietHours, startHour: hour, startMinute: minute });
+  }, [quietHours, updateQuietHours]);
+
+  const setEndTime = useCallback(async (hour: number, minute: number): Promise<void> => {
+    await updateQuietHours({ ...quietHours, endHour: hour, endMinute: minute });
+  }, [quietHours, updateQuietHours]);
+
+  const setQuietHours = useCallback(async (config: QuietHoursConfig): Promise<void> => {
+    await updateQuietHours(config);
+  }, [updateQuietHours]);
+
+  const isInQuietHours = useCallback((): boolean => {
+    if (!quietHours.enabled) return false;
+
+    const now = new Date();
+    const currentMinutes = now.getHours() * 60 + now.getMinutes();
+    const startMinutes = quietHours.startHour * 60 + quietHours.startMinute;
+    const endMinutes = quietHours.endHour * 60 + quietHours.endMinute;
+
+    if (startMinutes <= endMinutes) {
+      return currentMinutes >= startMinutes && currentMinutes < endMinutes;
+    }
+    return currentMinutes >= startMinutes || currentMinutes < endMinutes;
+  }, [quietHours]);
+
+  return {
+    quietHours,
+    setQuietHoursEnabled,
+    setStartTime,
+    setEndTime,
+    setQuietHours,
+    isInQuietHours,
+  };
+};

package/src/domains/notifications/quietHours/presentation/components/QuietHoursCard.tsx

@@ -0,0 +1,112 @@
+/**
+ * QuietHoursCard Component
+ * Displays and manages quiet hours settings
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon, AtomicCard } from '@umituz/react-native-design-system';
+import { Switch } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { SettingRow } from '../../../presentation/components/SettingRow';
+import type { QuietHoursConfig, QuietHoursTranslations } from '../../../infrastructure/services/types';
+
+export interface QuietHoursCardProps {
+  config: QuietHoursConfig;
+  translations: QuietHoursTranslations;
+  onToggle: (enabled: boolean) => void;
+  onStartTimePress: () => void;
+  onEndTimePress: () => void;
+}
+
+const formatTime = (hour: number, minute: number): string => {
+  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+};
+
+export const QuietHoursCard: React.FC<QuietHoursCardProps> = ({
+  config,
+  translations,
+  onToggle,
+  onStartTimePress,
+  onEndTimePress,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <AtomicCard style={styles.card}>
+      <View style={styles.header}>
+        <View style={styles.iconContainer}>
+          <AtomicIcon name="moon" size="md" color="primary" />
+        </View>
+        <View style={styles.headerText}>
+          <AtomicText type="bodyLarge">{translations.title}</AtomicText>
+          <AtomicText type="bodySmall" style={styles.description}>{translations.description}</AtomicText>
+        </View>
+        <Switch
+          value={config.enabled}
+          onValueChange={onToggle}
+          trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+          thumbColor={tokens.colors.surface}
+        />
+      </View>
+
+      {config.enabled && (
+        <View style={styles.timeContainer}>
+          <TouchableOpacity style={styles.timeButton} onPress={onStartTimePress} activeOpacity={0.7}>
+            <AtomicText type="bodySmall" style={styles.timeLabel}>{translations.startTimeLabel}</AtomicText>
+            <AtomicText type="bodyLarge" style={styles.timeValue}>
+              {formatTime(config.startHour, config.startMinute)}
+            </AtomicText>
+          </TouchableOpacity>
+
+          <View style={styles.timeSeparator}>
+            <AtomicIcon name="arrow-forward" size="sm" color="secondary" />
+          </View>
+
+          <TouchableOpacity style={styles.timeButton} onPress={onEndTimePress} activeOpacity={0.7}>
+            <AtomicText type="bodySmall" style={styles.timeLabel}>{translations.endTimeLabel}</AtomicText>
+            <AtomicText type="bodyLarge" style={styles.timeValue}>
+              {formatTime(config.endHour, config.endMinute)}
+            </AtomicText>
+          </TouchableOpacity>
+        </View>
+      )}
+    </AtomicCard>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    card: { padding: 16, backgroundColor: tokens.colors.surface },
+    header: { flexDirection: 'row', alignItems: 'center' },
+    iconContainer: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 12,
+    },
+    headerText: { flex: 1, marginRight: 12 },
+    description: { color: tokens.colors.textSecondary, marginTop: 2 },
+    timeContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 16,
+      paddingTop: 16,
+      borderTopWidth: 1,
+      borderTopColor: tokens.colors.surfaceSecondary,
+    },
+    timeButton: {
+      flex: 1,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      borderRadius: 8,
+      padding: 12,
+      alignItems: 'center',
+    },
+    timeLabel: { color: tokens.colors.textSecondary, marginBottom: 4 },
+    timeValue: { color: tokens.colors.textPrimary, fontWeight: '600' },
+    timeSeparator: { paddingHorizontal: 12 },
+  });

package/src/domains/notifications/reminders/infrastructure/config/reminderPresets.ts

@@ -0,0 +1,120 @@
+/**
+ * Reminder Presets Configuration
+ * Default time presets and frequency options for reminders
+ */
+
+import type { TimePreset, ReminderFrequency } from '../../../infrastructure/services/types';
+
+// ============================================================================
+// DEFAULT TIME PRESETS
+// ============================================================================
+
+export const DEFAULT_TIME_PRESETS: TimePreset[] = [
+  {
+    id: 'morning',
+    hour: 8,
+    minute: 0,
+    labelKey: 'notifications.presets.morning',
+    iconName: 'sunny',
+  },
+  {
+    id: 'noon',
+    hour: 12,
+    minute: 0,
+    labelKey: 'notifications.presets.noon',
+    iconName: 'sunny',
+  },
+  {
+    id: 'afternoon',
+    hour: 15,
+    minute: 0,
+    labelKey: 'notifications.presets.afternoon',
+    iconName: 'partly-sunny',
+  },
+  {
+    id: 'evening',
+    hour: 18,
+    minute: 0,
+    labelKey: 'notifications.presets.evening',
+    iconName: 'partly-sunny',
+  },
+  {
+    id: 'night',
+    hour: 21,
+    minute: 0,
+    labelKey: 'notifications.presets.night',
+    iconName: 'moon',
+  },
+];
+
+// ============================================================================
+// FREQUENCY OPTIONS
+// ============================================================================
+
+export interface FrequencyOption {
+  id: ReminderFrequency;
+  labelKey: string;
+  iconName: string;
+}
+
+export const FREQUENCY_OPTIONS: FrequencyOption[] = [
+  {
+    id: 'once',
+    labelKey: 'notifications.frequency.once',
+    iconName: 'calendar',
+  },
+  {
+    id: 'daily',
+    labelKey: 'notifications.frequency.daily',
+    iconName: 'repeat',
+  },
+  {
+    id: 'weekly',
+    labelKey: 'notifications.frequency.weekly',
+    iconName: 'calendar',
+  },
+  {
+    id: 'monthly',
+    labelKey: 'notifications.frequency.monthly',
+    iconName: 'calendar',
+  },
+];
+
+// ============================================================================
+// WEEKDAY OPTIONS
+// ============================================================================
+
+export interface WeekdayOption {
+  id: number;
+  labelKey: string;
+  shortLabelKey: string;
+}
+
+export const WEEKDAY_OPTIONS: WeekdayOption[] = [
+  { id: 1, labelKey: 'notifications.weekdays.sunday', shortLabelKey: 'notifications.weekdays.sun' },
+  { id: 2, labelKey: 'notifications.weekdays.monday', shortLabelKey: 'notifications.weekdays.mon' },
+  { id: 3, labelKey: 'notifications.weekdays.tuesday', shortLabelKey: 'notifications.weekdays.tue' },
+  { id: 4, labelKey: 'notifications.weekdays.wednesday', shortLabelKey: 'notifications.weekdays.wed' },
+  { id: 5, labelKey: 'notifications.weekdays.thursday', shortLabelKey: 'notifications.weekdays.thu' },
+  { id: 6, labelKey: 'notifications.weekdays.friday', shortLabelKey: 'notifications.weekdays.fri' },
+  { id: 7, labelKey: 'notifications.weekdays.saturday', shortLabelKey: 'notifications.weekdays.sat' },
+];
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+export const getTimePresetById = (id: string): TimePreset | undefined => {
+  return DEFAULT_TIME_PRESETS.find(preset => preset.id === id);
+};
+
+export const formatTime = (hour: number, minute: number): string => {
+  const h = hour.toString().padStart(2, '0');
+  const m = minute.toString().padStart(2, '0');
+  return `${h}:${m}`;
+};
+
+export const parseTime = (timeString: string): { hour: number; minute: number } => {
+  const [hour, minute] = timeString.split(':').map(Number);
+  return { hour: hour || 0, minute: minute || 0 };
+};

package/src/domains/notifications/reminders/infrastructure/hooks/useReminderActions.ts

@@ -0,0 +1,106 @@
+/**
+ * useReminderActions Hook
+ * Handles reminder CRUD operations with notification scheduling
+ */
+
+import { useCallback } from 'react';
+import { useRemindersStore } from '../storage/RemindersStore';
+import { NotificationScheduler } from '../../../infrastructure/services/NotificationScheduler';
+import { generateReminderId } from '../../../infrastructure/utils/idGenerator';
+import { buildTrigger } from '../../../infrastructure/utils/triggerBuilder';
+import type { Reminder, CreateReminderInput, UpdateReminderInput } from '../../../infrastructure/services/types';
+
+const scheduler = new NotificationScheduler();
+
+export const useReminderActions = () => {
+  const { addReminder, updateReminder, deleteReminder, toggleReminder } = useRemindersStore();
+
+  const createReminder = useCallback(async (input: CreateReminderInput): Promise<Reminder> => {
+    const now = new Date().toISOString();
+    const reminder: Reminder = {
+      id: generateReminderId(),
+      ...input,
+      enabled: true,
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    const trigger = buildTrigger(reminder);
+    const notificationId = await scheduler.scheduleNotification({
+      title: reminder.title,
+      body: reminder.body,
+      trigger,
+      data: { reminderId: reminder.id },
+    });
+
+    reminder.notificationId = notificationId;
+    await addReminder(reminder);
+
+    return reminder;
+  }, [addReminder]);
+
+  const editReminder = useCallback(async (id: string, input: UpdateReminderInput): Promise<void> => {
+    const { reminders } = useRemindersStore.getState();
+    const existing = reminders.find(r => r.id === id);
+    if (!existing) return;
+
+    if (existing.notificationId) {
+      await scheduler.cancelNotification(existing.notificationId);
+    }
+
+    const updated: Reminder = { ...existing, ...input, updatedAt: new Date().toISOString() };
+
+    if (updated.enabled) {
+      const trigger = buildTrigger(updated);
+      const notificationId = await scheduler.scheduleNotification({
+        title: updated.title,
+        body: updated.body,
+        trigger,
+        data: { reminderId: updated.id },
+      });
+      updated.notificationId = notificationId;
+    } else {
+      updated.notificationId = undefined;
+    }
+
+    await updateReminder(id, updated);
+  }, [updateReminder]);
+
+  const removeReminder = useCallback(async (id: string): Promise<void> => {
+    const { reminders } = useRemindersStore.getState();
+    const reminder = reminders.find(r => r.id === id);
+
+    if (reminder?.notificationId) {
+      await scheduler.cancelNotification(reminder.notificationId);
+    }
+
+    await deleteReminder(id);
+  }, [deleteReminder]);
+
+  const toggleReminderEnabled = useCallback(async (id: string): Promise<void> => {
+    const { reminders } = useRemindersStore.getState();
+    const reminder = reminders.find(r => r.id === id);
+    if (!reminder) return;
+
+    if (reminder.enabled && reminder.notificationId) {
+      await scheduler.cancelNotification(reminder.notificationId);
+      await updateReminder(id, { enabled: false, notificationId: undefined });
+    } else if (!reminder.enabled) {
+      const trigger = buildTrigger(reminder);
+      const notificationId = await scheduler.scheduleNotification({
+        title: reminder.title,
+        body: reminder.body,
+        trigger,
+        data: { reminderId: reminder.id },
+      });
+      await updateReminder(id, { enabled: true, notificationId });
+    }
+  }, [updateReminder]);
+
+  return {
+    createReminder,
+    editReminder,
+    removeReminder,
+    toggleReminderEnabled,
+  };
+};

package/src/domains/notifications/reminders/infrastructure/storage/RemindersStore.ts

@@ -0,0 +1,148 @@
+/**
+ * Reminders Store - Zustand State Management
+ * Manages reminder state with AsyncStorage persistence
+ */
+
+import { createStore } from '@umituz/react-native-storage';
+import type { Reminder, QuietHoursConfig, NotificationPreferences } from '../../../infrastructure/services/types';
+
+// ============================================================================
+// REMINDERS STORE
+// ============================================================================
+
+interface RemindersState {
+  reminders: Reminder[];
+}
+
+interface RemindersActions {
+  addReminder: (reminder: Reminder) => void;
+  updateReminder: (id: string, updates: Partial<Reminder>) => void;
+  deleteReminder: (id: string) => void;
+  toggleReminder: (id: string) => void;
+  resetReminders: () => void;
+}
+
+const DEFAULT_REMINDERS_STATE: RemindersState = {
+  reminders: [],
+};
+
+export const useRemindersStore = createStore<RemindersState, RemindersActions>({
+  name: 'reminders-store',
+  initialState: DEFAULT_REMINDERS_STATE,
+  persist: true,
+  actions: (set, get) => ({
+    addReminder: (reminder: Reminder) => {
+      const { reminders } = get();
+      set({ reminders: [...reminders, reminder] });
+    },
+
+    updateReminder: (id: string, updates: Partial<Reminder>) => {
+      const { reminders } = get();
+      set({
+        reminders: reminders.map(r =>
+          r.id === id ? { ...r, ...updates, updatedAt: new Date().toISOString() } : r
+        ),
+      });
+    },
+
+    deleteReminder: (id: string) => {
+      const { reminders } = get();
+      set({ reminders: reminders.filter(r => r.id !== id) });
+    },
+
+    toggleReminder: (id: string) => {
+      const { reminders } = get();
+      set({
+        reminders: reminders.map(r =>
+          r.id === id ? { ...r, enabled: !r.enabled, updatedAt: new Date().toISOString() } : r
+        ),
+      });
+    },
+
+    resetReminders: () => {
+      set({ reminders: [] });
+    },
+  }),
+});
+
+// ============================================================================
+// PREFERENCES STORE
+// ============================================================================
+
+interface PreferencesState {
+  preferences: NotificationPreferences;
+  isLoading: boolean;
+  isInitialized: boolean;
+}
+
+interface PreferencesActions {
+  initialize: () => Promise<void>;
+  updatePreferences: (updates: Partial<NotificationPreferences>) => void;
+  updateQuietHours: (quietHours: QuietHoursConfig) => void;
+  reset: () => void;
+}
+
+// ============================================================================
+// DEFAULT VALUES
+// ============================================================================
+
+const DEFAULT_PREFERENCES: NotificationPreferences = {
+  enabled: true,
+  sound: true,
+  vibration: true,
+  quietHours: {
+    enabled: false,
+    startHour: 22,
+    startMinute: 0,
+    endHour: 7,
+    endMinute: 0,
+  },
+};
+
+const initialPreferencesState: PreferencesState = {
+  preferences: DEFAULT_PREFERENCES,
+  isLoading: true,
+  isInitialized: false,
+};
+
+export const usePreferencesStore = createStore<PreferencesState, PreferencesActions>({
+  name: 'preferences-store',
+  initialState: initialPreferencesState,
+  persist: true,
+  actions: (set, get) => ({
+    initialize: async () => {
+      set({ isLoading: false, isInitialized: true });
+    },
+
+    updatePreferences: (updates: Partial<NotificationPreferences>) => {
+      const { preferences } = get();
+      set({ preferences: { ...preferences, ...updates } });
+    },
+
+    updateQuietHours: (quietHours: QuietHoursConfig) => {
+      const { preferences } = get();
+      set({ preferences: { ...preferences, quietHours } });
+    },
+
+    reset: () => {
+      set({ preferences: DEFAULT_PREFERENCES });
+    },
+  }),
+});
+
+// ============================================================================
+// SELECTOR HOOKS - REMINDERS
+// ============================================================================
+
+export const useReminders = () => useRemindersStore(state => state.reminders);
+export const useEnabledReminders = () => useRemindersStore(state => state.reminders.filter(r => r.enabled));
+export const useReminderById = (id: string) => useRemindersStore(state => state.reminders.find(r => r.id === id));
+
+// ============================================================================
+// SELECTOR HOOKS - PREFERENCES
+// ============================================================================
+
+export const useNotificationPreferences = () => usePreferencesStore(state => state.preferences);
+export const useQuietHours = () => usePreferencesStore(state => state.preferences.quietHours);
+export const useRemindersLoading = () => usePreferencesStore(state => state.isLoading);
+export const useRemindersInitialized = () => usePreferencesStore(state => state.isInitialized);

package/src/domains/notifications/reminders/presentation/components/FormButton.tsx

@@ -0,0 +1,66 @@
+/**
+ * FormButton Component
+ * Simple button for forms
+ */
+
+import React, { useMemo } from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+export interface FormButtonProps {
+  label: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary';
+  disabled?: boolean;
+}
+
+export const FormButton: React.FC<FormButtonProps> = ({
+  label,
+  onPress,
+  variant = 'primary',
+  disabled = false,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const isPrimary = variant === 'primary';
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        isPrimary ? styles.primaryButton : styles.secondaryButton,
+        disabled ? styles.disabled : undefined,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+    >
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, isPrimary ? styles.primaryLabel : styles.secondaryLabel]}
+      >
+        {label}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    button: {
+      flex: 1,
+      paddingVertical: 14,
+      paddingHorizontal: 16,
+      borderRadius: 10,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    primaryButton: { backgroundColor: tokens.colors.primary },
+    secondaryButton: { backgroundColor: tokens.colors.surfaceSecondary },
+    disabled: { opacity: 0.5 },
+    label: { fontWeight: '600' },
+    primaryLabel: { color: tokens.colors.surface },
+    secondaryLabel: { color: tokens.colors.textPrimary },
+  });

package/src/domains/notifications/reminders/presentation/components/FrequencySelector.tsx

@@ -0,0 +1,72 @@
+/**
+ * FrequencySelector Component
+ * Allows selection of reminder frequency
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import type { ReminderFrequency } from '../../../infrastructure/services/types';
+import type { FrequencyOption } from '../../infrastructure/config/reminderPresets';
+
+export interface FrequencySelectorProps {
+  options: FrequencyOption[];
+  selectedFrequency: ReminderFrequency;
+  onSelect: (frequency: ReminderFrequency) => void;
+  getLabel: (labelKey: string) => string;
+}
+
+export const FrequencySelector: React.FC<FrequencySelectorProps> = ({
+  options,
+  selectedFrequency,
+  onSelect,
+  getLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={styles.container}>
+      {options.map(option => {
+        const isSelected = selectedFrequency === option.id;
+        return (
+          <TouchableOpacity
+            key={option.id}
+            style={[styles.button, isSelected ? styles.selectedButton : undefined]}
+            onPress={() => onSelect(option.id)}
+            activeOpacity={0.7}
+          >
+            <AtomicIcon
+              name={option.iconName}
+              size="sm"
+              color={isSelected ? 'onSurface' : 'secondary'}
+            />
+            <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.text}>
+              {getLabel(option.labelKey)}
+            </AtomicText>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: { flexDirection: 'row', gap: 8 },
+    button: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 10,
+      paddingHorizontal: 8,
+      borderRadius: 8,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      gap: 6,
+    },
+    selectedButton: { backgroundColor: tokens.colors.primary },
+    text: { color: tokens.colors.textSecondary },
+    selectedText: { color: tokens.colors.surface },
+  });