@umituz/react-native-settings 4.21.11 → 4.21.13

package/src/domains/notifications/presentation/components/NotificationsSection.tsx

@@ -0,0 +1,84 @@
+/**
+ * NotificationsSection Component
+ * Settings section for notifications - navigates to full screen
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import type { StyleProp, ViewStyle } 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';
+// @ts-ignore - Optional peer dependency
+import { useLocalization } from '@umituz/react-native-localization';
+
+export interface NotificationsSectionConfig {
+  route?: string;
+  title?: string;
+  description?: string;
+  sectionTitle?: string;
+}
+
+export interface NotificationsSectionProps {
+  config?: NotificationsSectionConfig;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
+  config,
+  containerStyle,
+}) => {
+  const navigation = useNavigation();
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const handlePress = useCallback(() => {
+    const route = config?.route || 'Notifications';
+    navigation.navigate(route as never);
+  }, [config?.route, navigation]);
+
+  const title = config?.title || t('settings.notifications.title');
+  const description = config?.description || t('settings.notifications.description');
+  const sectionTitle = config?.sectionTitle || t('settings.notifications.sectionTitle');
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <AtomicText type="bodyLarge" style={styles.sectionTitle}>{sectionTitle}</AtomicText>
+
+      <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>
+    </View>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: { marginBottom: 16, borderRadius: 12, overflow: 'hidden', backgroundColor: tokens.colors.surface },
+    sectionTitle: { fontWeight: '600', paddingHorizontal: 16, paddingTop: 16, paddingBottom: 8 },
+    itemContainer: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 16, minHeight: 72 },
+    iconContainer: {
+      width: 48,
+      height: 48,
+      borderRadius: 12,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 16,
+      backgroundColor: tokens.colors.surfaceSecondary,
+    },
+    textContainer: { flex: 1, marginRight: 8 },
+    description: { color: tokens.colors.textSecondary, marginTop: 4 },
+  });

package/src/domains/notifications/presentation/components/RemindersNavRow.styles.ts

@@ -0,0 +1,38 @@
+/**
+ * RemindersNavRow Styles
+ */
+
+import { StyleSheet } from 'react-native';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+export const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    navRow: {
+      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,
+    },
+    badge: {
+      backgroundColor: tokens.colors.primary,
+      paddingHorizontal: 8,
+      paddingVertical: 2,
+      borderRadius: 10,
+      marginRight: 8,
+    },
+    badgeText: {
+      color: tokens.colors.surface,
+      fontWeight: '600',
+    },
+  });

package/src/domains/notifications/presentation/components/RemindersNavRow.tsx

@@ -0,0 +1,51 @@
+/**
+ * RemindersNavRow Component
+ * Reusable navigation row for reminders section with badge
+ */
+
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { createStyles } from './RemindersNavRow.styles';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+export interface RemindersNavRowProps {
+  title: string;
+  description: string;
+  count: number;
+  onPress: () => void;
+}
+
+export const RemindersNavRow: React.FC<RemindersNavRowProps> = ({
+  title,
+  description,
+  count,
+  onPress,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = createStyles(tokens);
+
+  return (
+    <TouchableOpacity style={styles.navRow} onPress={onPress} activeOpacity={0.7}>
+      <View style={styles.iconContainer}>
+        <AtomicIcon name="time" size="md" color="primary" />
+      </View>
+      <View style={styles.textContainer}>
+        <AtomicText type="bodyLarge" style={{ color: tokens.colors.textPrimary }}>
+          {title}
+        </AtomicText>
+        <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+          {description}
+        </AtomicText>
+      </View>
+      {count > 0 && (
+        <View style={styles.badge}>
+          <AtomicText type="bodySmall" style={styles.badgeText}>
+            {count}
+          </AtomicText>
+        </View>
+      )}
+      <AtomicIcon name="chevron-forward" size="md" color="secondary" />
+    </TouchableOpacity>
+  );
+};

package/src/domains/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/domains/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 '../../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/domains/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/domains/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/domains/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 '../../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 '../../reminders/infrastructure/storage/RemindersStore';
+import { useQuietHoursActions } from '../../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/domains/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;