@umituz/react-native-notifications 1.3.21 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-notifications",
-  "version": "1.3.21",
+  "version": "1.5.0",
   "description": "Offline-first local notifications system for React Native apps using expo-notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/NotificationsSection.tsx

@@ -1,24 +1,20 @@
 /**
  * NotificationsSection Component
- * Settings section for notifications with toggle
+ * Settings section for notifications - navigates to full screen
  */
 
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { View, TouchableOpacity, StyleSheet, Switch } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
 // @ts-ignore - Optional peer dependency
 import { useNavigation } from '@react-navigation/native';
-import { notificationService } from '../../infrastructure/services/NotificationService';
 
 export interface NotificationsSectionConfig {
-  initialValue?: boolean;
-  onToggleChange?: (value: boolean) => void;
   route?: string;
   title?: string;
   description?: string;
-  showToggle?: boolean;
 }
 
 export interface NotificationsSectionProps {
@@ -34,70 +30,32 @@ export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => createStyles(tokens), [tokens]);
 
-  const [enabled, setEnabled] = useState(config?.initialValue ?? false);
-
-  useEffect(() => {
-    if (config?.initialValue !== undefined) {
-      setEnabled(config.initialValue);
-    }
-  }, [config?.initialValue]);
-
-  const handleToggle = useCallback(async (value: boolean) => {
-    if (value) {
-      const hasPermissions = await notificationService.hasPermissions();
-      if (!hasPermissions) {
-        const granted = await notificationService.requestPermissions();
-        if (!granted) return;
-      }
-    }
-    setEnabled(value);
-    config?.onToggleChange?.(value);
-  }, [config]);
-
-  const handlePress = useCallback(async () => {
+  const handlePress = useCallback(() => {
     const route = config?.route || 'Notifications';
     navigation.navigate(route as never);
   }, [config?.route, navigation]);
 
   const title = config?.title || 'Notifications';
   const description = config?.description || 'Manage notification preferences';
-  const showToggle = config?.showToggle ?? false;
 
   return (
     <View style={[styles.container, containerStyle]}>
       <AtomicText type="bodyLarge" style={styles.sectionTitle}>General</AtomicText>
 
-      {showToggle ? (
-        <View style={styles.itemContainer}>
-          <View style={styles.iconContainer}>
-            <AtomicIcon name="notifications" size="md" color="primary" />
-          </View>
-          <View style={styles.textContainer}>
-            <AtomicText type="bodyLarge">{title}</AtomicText>
-          </View>
-          <Switch
-            value={enabled}
-            onValueChange={handleToggle}
-            trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
-            thumbColor={tokens.colors.surface}
-          />
+      <TouchableOpacity
+        style={styles.itemContainer}
+        onPress={handlePress}
+        activeOpacity={0.7}
+      >
+        <View style={styles.iconContainer}>
+          <AtomicIcon name="notifications" size="md" color="primary" />
+        </View>
+        <View style={styles.textContainer}>
+          <AtomicText type="bodyLarge">{title}</AtomicText>
+          <AtomicText type="bodySmall" style={styles.description}>{description}</AtomicText>
         </View>
-      ) : (
-        <TouchableOpacity
-          style={styles.itemContainer}
-          onPress={handlePress}
-          activeOpacity={0.7}
-        >
-          <View style={styles.iconContainer}>
-            <AtomicIcon name="notifications" size="md" color="primary" />
-          </View>
-          <View style={styles.textContainer}>
-            <AtomicText type="bodyLarge">{title}</AtomicText>
-            <AtomicText type="bodySmall" style={styles.description}>{description}</AtomicText>
-          </View>
-          <AtomicIcon name="chevron-forward" size="md" color="secondary" />
-        </TouchableOpacity>
-      )}
+        <AtomicIcon name="chevron-forward" size="md" color="secondary" />
+      </TouchableOpacity>
     </View>
   );
 };

package/src/presentation/screens/NotificationSettingsScreen.tsx

@@ -3,7 +3,7 @@
  * Clean presentation-only screen for notification settings
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View, StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { AtomicText, AtomicIcon, AtomicCard, ScreenLayout } from '@umituz/react-native-design-system';
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
@@ -11,28 +11,29 @@ import { QuietHoursCard } from '../../domains/quietHours/presentation/components
 import { SettingRow } from '../components/SettingRow';
 import { useNotificationSettingsUI } from '../hooks/useNotificationSettingsUI';
 import { useReminders } from '../../domains/reminders/infrastructure/storage/RemindersStore';
+import { useQuietHoursActions } from '../../domains/quietHours/infrastructure/hooks/useQuietHoursActions';
 import type { NotificationSettingsTranslations, QuietHoursTranslations } from '../../infrastructure/services/types';
+// @ts-ignore - Optional peer dependency
+import DateTimePicker from '@react-native-community/datetimepicker';
+
+type PickerMode = 'start' | 'end' | null;
 
 export interface NotificationSettingsScreenProps {
   translations: NotificationSettingsTranslations;
   quietHoursTranslations: QuietHoursTranslations;
-  onRemindersPress: () => void;
-  onStartTimePress: () => void;
-  onEndTimePress: () => void;
   onHapticFeedback?: () => void;
 }
 
 export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProps> = ({
   translations,
   quietHoursTranslations,
-  onRemindersPress,
-  onStartTimePress,
-  onEndTimePress,
   onHapticFeedback,
 }) => {
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => createStyles(tokens), [tokens]);
   const reminders = useReminders();
+  const { setStartTime, setEndTime } = useQuietHoursActions();
+  const [pickerMode, setPickerMode] = useState<PickerMode>(null);
 
   const {
     preferences,
@@ -44,6 +45,42 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
     handleQuietHoursToggle,
   } = useNotificationSettingsUI();
 
+  const handleRemindersPress = () => {
+    // Navigate to reminders screen when implemented
+  };
+
+  const handleStartTimePress = () => {
+    setPickerMode('start');
+  };
+
+  const handleEndTimePress = () => {
+    setPickerMode('end');
+  };
+
+  const handleTimeChange = (event: any, selectedDate?: Date) => {
+    if (event.type === 'set' && selectedDate) {
+      const hours = selectedDate.getHours();
+      const minutes = selectedDate.getMinutes();
+
+      if (pickerMode === 'start') {
+        setStartTime(hours, minutes);
+      } else if (pickerMode === 'end') {
+        setEndTime(hours, minutes);
+      }
+    }
+    setPickerMode(null);
+  };
+
+  const getPickerDate = () => {
+    const date = new Date();
+    if (pickerMode === 'start') {
+      date.setHours(quietHours.startHour, quietHours.startMinute);
+    } else if (pickerMode === 'end') {
+      date.setHours(quietHours.endHour, quietHours.endMinute);
+    }
+    return date;
+  };
+
   if (isLoading) {
     return (
       <ScreenLayout>
@@ -118,12 +155,20 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
               config={quietHours}
               translations={quietHoursTranslations}
               onToggle={handleQuietHoursToggle}
-              onStartTimePress={onStartTimePress}
-              onEndTimePress={onEndTimePress}
+              onStartTimePress={handleStartTimePress}
+              onEndTimePress={handleEndTimePress}
             />
           </>
         )}
       </View>
+      {pickerMode && (
+        <DateTimePicker
+          value={getPickerDate()}
+          mode="time"
+          is24Hour={true}
+          onChange={handleTimeChange}
+        />
+      )}
     </ScreenLayout>
   );
 };