@umituz/react-native-settings 4.21.10 → 4.21.12

package/src/notifications/presentation/components/SettingRow.tsx

@@ -0,0 +1,86 @@
+/**
+ * Setting Row Component
+ * Reusable toggle row for settings
+ */
+
+import React, { useMemo, useCallback } from 'react';
+import { View, StyleSheet, Switch } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+export interface SettingRowProps {
+    iconName: string;
+    title: string;
+    description: string;
+    value: boolean;
+    onToggle: (value: boolean) => void;
+    onHapticFeedback?: () => void;
+}
+
+export const SettingRow: React.FC<SettingRowProps> = ({
+    iconName,
+    title,
+    description,
+    value,
+    onToggle,
+    onHapticFeedback,
+}) => {
+    const tokens = useAppDesignTokens();
+    const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+    const handleToggle = useCallback((newValue: boolean) => {
+        onHapticFeedback?.();
+        onToggle(newValue);
+    }, [onToggle, onHapticFeedback]);
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.iconContainer}>
+                <AtomicIcon name={iconName} size="md" color="primary" />
+            </View>
+            <View style={styles.textContainer}>
+                <AtomicText type="bodyLarge" style={{ color: tokens.colors.textPrimary }}>
+                    {title}
+                </AtomicText>
+                <AtomicText type="bodySmall" style={styles.description}>
+                    {description}
+                </AtomicText>
+            </View>
+            <Switch
+                value={value}
+                onValueChange={handleToggle}
+                trackColor={{
+                    false: tokens.colors.surfaceSecondary,
+                    true: tokens.colors.primary
+                }}
+                thumbColor={tokens.colors.surface}
+                ios_backgroundColor={tokens.colors.surfaceSecondary}
+            />
+        </View>
+    );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+    StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        iconContainer: {
+            width: 44,
+            height: 44,
+            borderRadius: 22,
+            backgroundColor: tokens.colors.surfaceSecondary,
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginRight: 12,
+        },
+        textContainer: {
+            flex: 1,
+            marginRight: 12,
+        },
+        description: {
+            color: tokens.colors.textSecondary,
+            marginTop: 2,
+        },
+    });

package/src/notifications/presentation/hooks/useNotificationSettingsUI.ts

@@ -0,0 +1,52 @@
+/**
+ * useNotificationSettingsUI Hook
+ * Handles all business logic for notification settings screen
+ */
+
+import { useEffect, useCallback } from 'react';
+import { useNotificationPreferences, useQuietHours, usePreferencesStore, useRemindersLoading } from '../../domains/reminders/infrastructure/storage/RemindersStore';
+import { notificationService } from '../../infrastructure/services/NotificationService';
+
+export const useNotificationSettingsUI = () => {
+    const preferences = useNotificationPreferences();
+    const quietHours = useQuietHours();
+    const { initialize, updatePreferences, updateQuietHours } = usePreferencesStore();
+    const isLoading = useRemindersLoading();
+
+    useEffect(() => {
+        initialize();
+    }, [initialize]);
+
+    const handleMasterToggle = useCallback(async (value: boolean) => {
+        if (value) {
+            const hasPermission = await notificationService.hasPermissions();
+            if (!hasPermission) {
+                const granted = await notificationService.requestPermissions();
+                if (!granted) return;
+            }
+        }
+        await updatePreferences({ enabled: value });
+    }, [updatePreferences]);
+
+    const handleSoundToggle = useCallback(async (value: boolean) => {
+        await updatePreferences({ sound: value });
+    }, [updatePreferences]);
+
+    const handleVibrationToggle = useCallback(async (value: boolean) => {
+        await updatePreferences({ vibration: value });
+    }, [updatePreferences]);
+
+    const handleQuietHoursToggle = useCallback(async (value: boolean) => {
+        await updateQuietHours({ ...quietHours, enabled: value });
+    }, [quietHours, updateQuietHours]);
+
+    return {
+        preferences,
+        quietHours,
+        isLoading,
+        handleMasterToggle,
+        handleSoundToggle,
+        handleVibrationToggle,
+        handleQuietHoursToggle,
+    };
+};

package/src/notifications/presentation/hooks/useTimePicker.ts

@@ -0,0 +1,71 @@
+/**
+ * useTimePicker Hook
+ * Encapsulates DateTimePicker logic for notification settings
+ */
+
+import { useState, useCallback } from 'react';
+import type { QuietHoursConfig } from '../../infrastructure/services/types';
+
+export type PickerMode = 'start' | 'end' | null;
+
+export interface UseTimePickerParams {
+  quietHours: QuietHoursConfig;
+  onStartTimeChange: (hours: number, minutes: number) => void;
+  onEndTimeChange: (hours: number, minutes: number) => void;
+}
+
+export interface TimePickerHandlers {
+  pickerMode: PickerMode;
+  handleStartTimePress: () => void;
+  handleEndTimePress: () => void;
+  handleTimeChange: (event: any, selectedDate?: Date) => void;
+  getPickerDate: () => Date;
+}
+
+export const useTimePicker = ({
+  quietHours,
+  onStartTimeChange,
+  onEndTimeChange,
+}: UseTimePickerParams): TimePickerHandlers => {
+  const [pickerMode, setPickerMode] = useState<PickerMode>(null);
+
+  const handleStartTimePress = useCallback(() => {
+    setPickerMode('start');
+  }, []);
+
+  const handleEndTimePress = useCallback(() => {
+    setPickerMode('end');
+  }, []);
+
+  const handleTimeChange = useCallback((event: any, selectedDate?: Date) => {
+    if (event.type === 'set' && selectedDate) {
+      const hours = selectedDate.getHours();
+      const minutes = selectedDate.getMinutes();
+
+      if (pickerMode === 'start') {
+        onStartTimeChange(hours, minutes);
+      } else if (pickerMode === 'end') {
+        onEndTimeChange(hours, minutes);
+      }
+    }
+    setPickerMode(null);
+  }, [pickerMode, onStartTimeChange, onEndTimeChange]);
+
+  const getPickerDate = useCallback((): Date => {
+    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;
+  }, [pickerMode, quietHours]);
+
+  return {
+    pickerMode,
+    handleStartTimePress,
+    handleEndTimePress,
+    handleTimeChange,
+    getPickerDate,
+  };
+};

package/src/notifications/presentation/screens/NotificationSettingsScreen.styles.ts

@@ -0,0 +1,30 @@
+/**
+ * NotificationSettingsScreen Styles
+ * Extracted styles for better organization and maintainability
+ */
+
+import { StyleSheet } from 'react-native';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+export const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 16,
+    },
+    loadingContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    card: {
+      marginBottom: 16,
+      padding: 16,
+      backgroundColor: tokens.colors.surface,
+    },
+    divider: {
+      height: 1,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      marginVertical: 12,
+    },
+  });

package/src/notifications/presentation/screens/NotificationSettingsScreen.tsx

@@ -0,0 +1,131 @@
+/**
+ * NotificationSettingsScreen
+ * Clean presentation-only screen for notification settings
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import { AtomicCard, ScreenLayout, AtomicSpinner } from '@umituz/react-native-design-system';
+import { QuietHoursCard } from '../../domains/quietHours/presentation/components/QuietHoursCard';
+import { SettingRow } from '../components/SettingRow';
+import { RemindersNavRow } from '../components/RemindersNavRow';
+import { useNotificationSettingsUI } from '../hooks/useNotificationSettingsUI';
+import { useTimePicker } from '../hooks/useTimePicker';
+import { useReminders } from '../../domains/reminders/infrastructure/storage/RemindersStore';
+import { useQuietHoursActions } from '../../domains/quietHours/infrastructure/hooks/useQuietHoursActions';
+import type { NotificationSettingsTranslations, QuietHoursTranslations } from '../../infrastructure/services/types';
+import { createStyles } from './NotificationSettingsScreen.styles';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+// @ts-ignore - Optional peer dependency
+import DateTimePicker from '@react-native-community/datetimepicker';
+
+export interface NotificationSettingsScreenProps {
+  translations: NotificationSettingsTranslations;
+  quietHoursTranslations: QuietHoursTranslations;
+  onHapticFeedback?: () => void;
+}
+
+export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProps> = ({
+  translations,
+  quietHoursTranslations,
+  onHapticFeedback,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = createStyles(tokens);
+  const reminders = useReminders();
+  const { setStartTime, setEndTime } = useQuietHoursActions();
+
+  const {
+    preferences,
+    quietHours,
+    isLoading,
+    handleMasterToggle,
+    handleSoundToggle,
+    handleVibrationToggle,
+    handleQuietHoursToggle,
+  } = useNotificationSettingsUI();
+
+  const timePicker = useTimePicker({
+    quietHours,
+    onStartTimeChange: setStartTime,
+    onEndTimeChange: setEndTime,
+  });
+
+  const handleRemindersPress = () => {
+    // Navigate to reminders screen when implemented
+  };
+
+  if (isLoading) {
+    return (
+      <ScreenLayout>
+        <AtomicSpinner size="lg" color="primary" fullContainer />
+      </ScreenLayout>
+    );
+  }
+
+  return (
+    <ScreenLayout hideScrollIndicator>
+      <View style={styles.container}>
+        <AtomicCard style={styles.card}>
+          <SettingRow
+            iconName="notifications"
+            title={translations.masterToggleTitle}
+            description={translations.masterToggleDescription}
+            value={preferences.enabled}
+            onToggle={handleMasterToggle}
+            onHapticFeedback={onHapticFeedback}
+          />
+        </AtomicCard>
+
+        {preferences.enabled && (
+          <>
+            <AtomicCard style={styles.card}>
+              <SettingRow
+                iconName="volume-high"
+                title={translations.soundTitle}
+                description={translations.soundDescription}
+                value={preferences.sound}
+                onToggle={handleSoundToggle}
+                onHapticFeedback={onHapticFeedback}
+              />
+              <View style={styles.divider} />
+              <SettingRow
+                iconName="phone-portrait"
+                title={translations.vibrationTitle}
+                description={translations.vibrationDescription}
+                value={preferences.vibration}
+                onToggle={handleVibrationToggle}
+                onHapticFeedback={onHapticFeedback}
+              />
+            </AtomicCard>
+
+            <AtomicCard style={styles.card}>
+              <RemindersNavRow
+                title={translations.remindersTitle}
+                description={translations.remindersDescription}
+                count={reminders.length}
+                onPress={handleRemindersPress}
+              />
+            </AtomicCard>
+
+            <QuietHoursCard
+              config={quietHours}
+              translations={quietHoursTranslations}
+              onToggle={handleQuietHoursToggle}
+              onStartTimePress={timePicker.handleStartTimePress}
+              onEndTimePress={timePicker.handleEndTimePress}
+            />
+          </>
+        )}
+      </View>
+      {timePicker.pickerMode && (
+        <DateTimePicker
+          value={timePicker.getPickerDate()}
+          mode="time"
+          is24Hour={true}
+          onChange={timePicker.handleTimeChange}
+        />
+      )}
+    </ScreenLayout>
+  );
+};

package/src/notifications/presentation/screens/NotificationsScreen.tsx

@@ -0,0 +1,107 @@
+/**
+ * Notifications Screen - Dynamic and Reusable
+ *
+ * A clean notification settings screen that accepts all text and configuration
+ * as props to make it completely reusable across different applications.
+ */
+
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicIcon, AtomicCard, AtomicText, ScreenLayout, STATIC_TOKENS, AtomicSpinner } from '@umituz/react-native-design-system';
+import { Switch } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { useNotificationSettings } from '../../infrastructure/hooks/useNotificationSettings';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+export interface NotificationsScreenProps {
+  translations: {
+    title: string;
+    description: string;
+    loadingText?: string;
+  };
+  iconName?: string;
+  iconColor?: string;
+  testID?: string;
+}
+
+export const NotificationsScreen: React.FC<NotificationsScreenProps> = ({
+  translations,
+  iconName = 'notifications',
+  iconColor = 'primary',
+  testID = 'notifications-screen',
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
+  const { notificationsEnabled, setNotificationsEnabled, isLoading } = useNotificationSettings();
+
+  if (isLoading) {
+    return (
+      <ScreenLayout testID={testID}>
+        <AtomicSpinner
+          size="lg"
+          color="primary"
+          text={translations.loadingText || 'Loading...'}
+          fullContainer
+        />
+      </ScreenLayout>
+    );
+  }
+
+  return (
+    <ScreenLayout testID={testID} hideScrollIndicator>
+      <AtomicCard style={styles.card}>
+        <View style={styles.settingItem}>
+          <View style={styles.iconContainer}>
+            <AtomicIcon name={iconName} size="lg" color={iconColor as any} />
+          </View>
+          <View style={styles.textContainer}>
+            <AtomicText type="bodyLarge" style={{ color: tokens.colors.textPrimary }}>
+              {translations.title}
+            </AtomicText>
+            <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary, marginTop: STATIC_TOKENS.spacing.xs }}>
+              {translations.description}
+            </AtomicText>
+          </View>
+          <Switch
+            value={notificationsEnabled}
+            onValueChange={setNotificationsEnabled}
+            trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+            thumbColor={tokens.colors.surface}
+            testID="notifications-toggle"
+          />
+        </View>
+      </AtomicCard>
+    </ScreenLayout>
+  );
+};
+
+const getStyles = (tokens: DesignTokens) => StyleSheet.create({
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  card: {
+    padding: STATIC_TOKENS.spacing.lg,
+    backgroundColor: tokens.colors.surface,
+  },
+  settingItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: tokens.colors.surfaceSecondary,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: STATIC_TOKENS.spacing.md,
+  },
+  textContainer: {
+    flex: 1,
+    marginRight: STATIC_TOKENS.spacing.md,
+  },
+});
+
+export default NotificationsScreen;

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -8,9 +8,13 @@
 import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useLocalization, LanguageSelectionScreen } from "@umituz/react-native-localization";
-import { NotificationSettingsScreen } from "@umituz/react-native-notifications";
+import { NotificationSettingsScreen } from "@notifications";
 import { AccountScreen } from "@umituz/react-native-auth";
-import { useAppDesignTokens, createScreenOptions } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+// ...
+
+
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import { FAQScreen } from "../../domains/faqs";
 import { useNavigationHandlers } from "./hooks";
@@ -49,15 +53,21 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     useNavigationHandlers(appInfo, legalUrls);
 
   const screenOptions = React.useMemo(
-    () =>
-      createScreenOptions({
-        colors: {
-          surface: tokens.colors.surface,
-          textPrimary: tokens.colors.textPrimary,
-          borderLight: tokens.colors.borderLight,
-        },
-        backTitle: t("settings.title"),
-      }),
+    () => ({
+      headerStyle: {
+        backgroundColor: tokens.colors.surface,
+        borderBottomColor: tokens.colors.borderLight,
+        borderBottomWidth: 1,
+        elevation: 0,
+        shadowOpacity: 0,
+      },
+      headerTintColor: tokens.colors.textPrimary,
+      headerTitleStyle: {
+        color: tokens.colors.textPrimary,
+        fontWeight: "600" as const,
+      },
+      headerBackTitle: t("settings.title"),
+    }),
     [tokens, t]
   );
   const notificationTranslations = React.useMemo(() => createNotificationTranslations(t), [t]);

package/src/presentation/screens/components/sections/FeatureSettingsSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useNavigation } from "@react-navigation/native";
 import { AppearanceSection } from "../../../../domains/appearance/presentation/components/AppearanceSection";
-import { NotificationsSection } from "@umituz/react-native-notifications";
+import { NotificationsSection } from "@notifications";
 import { useLocalization, getLanguageByCode } from "@umituz/react-native-localization";
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";