@oxyhq/services 6.10.8 → 7.0.0

package/src/ui/screens/NotificationsScreen.tsx

@@ -0,0 +1,189 @@
+import React, { useCallback, useMemo } from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { Switch } from '@oxyhq/bloom/switch';
+import { useTheme } from '@oxyhq/bloom/theme';
+import type { NotificationPreferences } from '@oxyhq/core';
+import type { BaseScreenProps } from '../types/navigation';
+import Header from '../components/Header';
+import { SettingsIcon } from '../components/SettingsIcon';
+import { useI18n } from '../hooks/useI18n';
+import { useOxy } from '../context/OxyContext';
+import { useCurrentUser } from '../hooks/queries/useAccountQueries';
+import { useUpdateNotificationPreferences } from '../hooks/mutations/useAccountMutations';
+import { useSettingToggles } from '../hooks/useSettingToggle';
+import { useColorScheme } from '../hooks/useColorScheme';
+import { Colors } from '../constants/theme';
+import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
+
+interface NotificationToggleValues {
+    pushEnabled: boolean;
+    emailDigest: boolean;
+    securityAlerts: boolean;
+    marketingEmails: boolean;
+}
+
+const DEFAULT_VALUES: NotificationToggleValues = {
+    pushEnabled: true,
+    emailDigest: true,
+    securityAlerts: true,
+    marketingEmails: false,
+};
+
+/**
+ * NotificationsScreen — manage per-channel notification preferences.
+ *
+ * Persists every toggle change via `useUpdateNotificationPreferences`, which
+ * uses optimistic updates + offline-queue support. The initial values seed
+ * from the current user's `notificationPreferences` field, defaulting to the
+ * platform defaults when the field has never been set.
+ */
+const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }) => {
+    const bloomTheme = useTheme();
+    const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const palette = useMemo(
+        () => Colors[normalizeColorScheme(colorScheme, normalizeTheme(theme))],
+        [colorScheme, theme],
+    );
+    const { isAuthenticated } = useOxy();
+    const { data: user } = useCurrentUser({ enabled: isAuthenticated });
+    const updateMutation = useUpdateNotificationPreferences();
+
+    const initialValues = useMemo<NotificationToggleValues>(() => {
+        const prefs = user?.notificationPreferences;
+        return {
+            pushEnabled: prefs?.pushEnabled ?? DEFAULT_VALUES.pushEnabled,
+            emailDigest: prefs?.emailDigest ?? DEFAULT_VALUES.emailDigest,
+            securityAlerts: prefs?.securityAlerts ?? DEFAULT_VALUES.securityAlerts,
+            marketingEmails: prefs?.marketingEmails ?? DEFAULT_VALUES.marketingEmails,
+        };
+    }, [user?.notificationPreferences]);
+
+    const handleSave = useCallback(
+        async (key: keyof NotificationToggleValues, value: boolean) => {
+            const patch: Partial<NotificationPreferences> = { [key]: value };
+            await updateMutation.mutateAsync(patch);
+        },
+        [updateMutation],
+    );
+
+    const { values, toggle, savingKeys } = useSettingToggles<NotificationToggleValues>({
+        initialValues,
+        onSave: handleSave,
+        errorMessage: t('notifications.updateError') || 'Failed to update notification preferences',
+    });
+
+    const isSaving = savingKeys.size > 0;
+
+    return (
+        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+            <Header
+                title={t('notifications.title') || 'Notifications'}
+                onBack={goBack || onClose}
+                variant="minimal"
+                elevation="subtle"
+            />
+            <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
+                <SettingsListGroup
+                    title={t('notifications.sections.channels') || 'Channels'}
+                >
+                    <SettingsListItem
+                        icon={<SettingsIcon name="bell" color={palette.iconPersonalInfo} />}
+                        title={t('notifications.items.push.title') || 'Push notifications'}
+                        description={
+                            t('notifications.items.push.subtitle')
+                            || 'Real-time alerts on your devices'
+                        }
+                        rightElement={
+                            <Switch
+                                value={values.pushEnabled}
+                                onValueChange={() => toggle('pushEnabled')}
+                                disabled={isSaving}
+                            />
+                        }
+                        showChevron={false}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="email" color={palette.iconData} />}
+                        title={t('notifications.items.emailDigest.title') || 'Email digest'}
+                        description={
+                            t('notifications.items.emailDigest.subtitle')
+                            || 'Periodic summary of your account activity'
+                        }
+                        rightElement={
+                            <Switch
+                                value={values.emailDigest}
+                                onValueChange={() => toggle('emailDigest')}
+                                disabled={isSaving}
+                            />
+                        }
+                        showChevron={false}
+                    />
+                </SettingsListGroup>
+
+                <SettingsListGroup
+                    title={t('notifications.sections.alerts') || 'Alerts'}
+                >
+                    <SettingsListItem
+                        icon={<SettingsIcon name="shield-check" color={palette.iconSecurity} />}
+                        title={
+                            t('notifications.items.securityAlerts.title') || 'Security alerts'
+                        }
+                        description={
+                            t('notifications.items.securityAlerts.subtitle')
+                            || 'Sign-ins, recovery codes, and key changes'
+                        }
+                        rightElement={
+                            <Switch
+                                value={values.securityAlerts}
+                                onValueChange={() => toggle('securityAlerts')}
+                                disabled={isSaving}
+                            />
+                        }
+                        showChevron={false}
+                    />
+                </SettingsListGroup>
+
+                <SettingsListGroup
+                    title={t('notifications.sections.marketing') || 'Marketing'}
+                >
+                    <SettingsListItem
+                        icon={<SettingsIcon name="megaphone" color={palette.iconSharing} />}
+                        title={
+                            t('notifications.items.marketingEmails.title')
+                            || 'Marketing emails'
+                        }
+                        description={
+                            t('notifications.items.marketingEmails.subtitle')
+                            || 'Product news and occasional offers'
+                        }
+                        rightElement={
+                            <Switch
+                                value={values.marketingEmails}
+                                onValueChange={() => toggle('marketingEmails')}
+                                disabled={isSaving}
+                            />
+                        }
+                        showChevron={false}
+                    />
+                </SettingsListGroup>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scroll: {
+        flex: 1,
+    },
+    scrollContent: {
+        paddingHorizontal: 16,
+        paddingBottom: 24,
+    },
+});
+
+export default React.memo(NotificationsScreen);

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -9,23 +9,21 @@ import {
     useWindowDimensions,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { useThemeColors } from '../styles';
+import { useThemeColors } from '../styles/theme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { Button } from '@oxyhq/bloom/button';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
 import QRCode from 'react-native-qrcode-svg';
 
-import {
-    PaymentSummaryStep,
-    PaymentMethodStep,
-    PaymentDetailsStep,
-    PaymentReviewStep,
-    PaymentSuccessStep,
-    PAYMENT_METHODS,
-    createPaymentStyles,
-} from '../components/payment';
-import type { PaymentItem, PaymentGatewayResult, CardDetails } from '../components/payment';
+import PaymentSummaryStep from '../components/payment/PaymentSummaryStep';
+import PaymentMethodStep from '../components/payment/PaymentMethodStep';
+import PaymentDetailsStep from '../components/payment/PaymentDetailsStep';
+import PaymentReviewStep from '../components/payment/PaymentReviewStep';
+import PaymentSuccessStep from '../components/payment/PaymentSuccessStep';
+import { PAYMENT_METHODS } from '../components/payment/constants';
+import { createPaymentStyles } from '../components/payment/paymentStyles';
+import type { PaymentItem, PaymentGatewayResult, CardDetails } from '../components/payment/types';
 
 export type { PaymentItem, PaymentGatewayResult };
 
@@ -166,7 +164,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         if (onPaymentResult) {
             onPaymentResult({ success: true });
         }
-        navigate?.('AccountOverview');
+        navigate?.('ManageAccount');
     }, [onPaymentResult, navigate]);
 
     const handleClose = useCallback(() => {

package/src/ui/screens/PreferencesScreen.tsx

@@ -0,0 +1,263 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { AccessibilityInfo, Platform, StyleSheet, View, ScrollView } from 'react-native';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { Switch } from '@oxyhq/bloom/switch';
+import { useTheme } from '@oxyhq/bloom/theme';
+import type { UserPreferences } from '@oxyhq/core';
+import type { BaseScreenProps } from '../types/navigation';
+import Header from '../components/Header';
+import { SettingsIcon } from '../components/SettingsIcon';
+import { useI18n } from '../hooks/useI18n';
+import { useOxy } from '../context/OxyContext';
+import { useCurrentUser } from '../hooks/queries/useAccountQueries';
+import { useUpdateUserPreferences } from '../hooks/mutations/useAccountMutations';
+import { useColorScheme } from '../hooks/useColorScheme';
+import { Colors } from '../constants/theme';
+import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
+
+type ThemePreference = 'light' | 'dark' | 'system';
+
+const THEME_ORDER: ThemePreference[] = ['system', 'light', 'dark'];
+
+/**
+ * Resolve the device's timezone using `Intl.DateTimeFormat`. Available on
+ * every Hermes/JSC build we support; no `expo-localization` native module
+ * needed.
+ */
+const getDeviceTimezone = (): string => {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || '';
+    } catch {
+        return '';
+    }
+};
+
+/**
+ * PreferencesScreen — general user preferences applied across all Oxy apps.
+ *
+ * Language is delegated to the existing LanguageSelector screen. Theme,
+ * reduce-motion, and timezone are persisted on the User document via
+ * `useUpdateUserPreferences` so every Oxy app sees the same setting.
+ */
+const PreferencesScreen: React.FC<BaseScreenProps> = ({
+    onClose,
+    theme,
+    goBack,
+    navigate,
+}) => {
+    const bloomTheme = useTheme();
+    const { t, locale } = useI18n();
+    const colorScheme = useColorScheme();
+    const palette = useMemo(
+        () => Colors[normalizeColorScheme(colorScheme, normalizeTheme(theme))],
+        [colorScheme, theme],
+    );
+    const { isAuthenticated } = useOxy();
+    const { data: user } = useCurrentUser({ enabled: isAuthenticated });
+    const updateMutation = useUpdateUserPreferences();
+
+    const prefs = user?.userPreferences;
+    const themePref: ThemePreference = (prefs?.theme as ThemePreference) ?? 'system';
+    const reduceMotionPref = prefs?.reduceMotion ?? false;
+    const deviceTimezone = useMemo(getDeviceTimezone, []);
+    const timezone = prefs?.timezone || deviceTimezone;
+
+    // Mirror the OS reduce-motion state on first mount so users can see whether
+    // the device itself is in reduced-motion mode (independent of their saved
+    // server preference). Persists into the saved value when toggled.
+    const [systemReduceMotion, setSystemReduceMotion] = useState<boolean>(false);
+    useEffect(() => {
+        let cancelled = false;
+        AccessibilityInfo.isReduceMotionEnabled()
+            .then((value) => {
+                if (!cancelled) {
+                    setSystemReduceMotion(value);
+                }
+            })
+            .catch(() => {
+                // AccessibilityInfo not available on this platform — keep default
+            });
+        const sub = AccessibilityInfo.addEventListener(
+            'reduceMotionChanged',
+            (value) => setSystemReduceMotion(value),
+        );
+        return () => {
+            cancelled = true;
+            sub.remove();
+        };
+    }, []);
+
+    const handleThemeChange = useCallback(
+        async (nextTheme: ThemePreference) => {
+            const patch: Partial<UserPreferences> = { theme: nextTheme };
+            await updateMutation.mutateAsync(patch);
+        },
+        [updateMutation],
+    );
+
+    const handleReduceMotionToggle = useCallback(async () => {
+        const next = !reduceMotionPref;
+        const patch: Partial<UserPreferences> = { reduceMotion: next };
+        await updateMutation.mutateAsync(patch);
+    }, [reduceMotionPref, updateMutation]);
+
+    const handleResetTimezone = useCallback(async () => {
+        // Empty string means "follow device" — server-side default
+        const patch: Partial<UserPreferences> = { timezone: '' };
+        await updateMutation.mutateAsync(patch);
+    }, [updateMutation]);
+
+    const themeDisplay = useMemo(() => {
+        switch (themePref) {
+            case 'light':
+                return t('preferences.theme.light') || 'Light';
+            case 'dark':
+                return t('preferences.theme.dark') || 'Dark';
+            default:
+                return t('preferences.theme.system') || 'System default';
+        }
+    }, [themePref, t]);
+
+    const nextTheme: ThemePreference =
+        THEME_ORDER[(THEME_ORDER.indexOf(themePref) + 1) % THEME_ORDER.length] ?? 'system';
+
+    const languageDescription = useMemo(() => {
+        if (prefs?.language) {
+            return prefs.language;
+        }
+        return locale;
+    }, [prefs?.language, locale]);
+
+    const isSaving = updateMutation.isPending;
+
+    return (
+        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+            <Header
+                title={t('preferences.title') || 'Preferences'}
+                onBack={goBack || onClose}
+                variant="minimal"
+                elevation="subtle"
+            />
+            <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
+                <SettingsListGroup
+                    title={t('preferences.sections.appearance') || 'Appearance'}
+                >
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="theme-light-dark"
+                                color={palette.iconData}
+                            />
+                        }
+                        title={t('preferences.items.theme.title') || 'Theme'}
+                        description={themeDisplay}
+                        onPress={() => handleThemeChange(nextTheme)}
+                        disabled={isSaving}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="motion"
+                                color={palette.iconPersonalInfo}
+                            />
+                        }
+                        title={
+                            t('preferences.items.reduceMotion.title') || 'Reduce motion'
+                        }
+                        description={
+                            systemReduceMotion
+                                ? (t('preferences.items.reduceMotion.systemOn')
+                                    || 'Following system: reduce motion is on')
+                                : (t('preferences.items.reduceMotion.subtitle')
+                                    || 'Minimise animations across Oxy apps')
+                        }
+                        rightElement={
+                            <Switch
+                                value={reduceMotionPref}
+                                onValueChange={handleReduceMotionToggle}
+                                disabled={isSaving}
+                            />
+                        }
+                        showChevron={false}
+                    />
+                </SettingsListGroup>
+
+                <SettingsListGroup
+                    title={t('preferences.sections.language') || 'Language'}
+                >
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="translate"
+                                color={palette.iconPersonalInfo}
+                            />
+                        }
+                        title={t('preferences.items.language.title') || 'Language'}
+                        description={languageDescription}
+                        onPress={() => navigate?.('LanguageSelector')}
+                    />
+                </SettingsListGroup>
+
+                <SettingsListGroup
+                    title={t('preferences.sections.region') || 'Region'}
+                >
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="clock-outline"
+                                color={palette.iconSecurity}
+                            />
+                        }
+                        title={t('preferences.items.timezone.title') || 'Timezone'}
+                        description={
+                            timezone
+                            || (t('preferences.items.timezone.unknown')
+                                || 'Unable to detect timezone')
+                        }
+                        onPress={prefs?.timezone ? handleResetTimezone : undefined}
+                        disabled={isSaving || !prefs?.timezone}
+                        showChevron={false}
+                    />
+                </SettingsListGroup>
+
+                {Platform.OS === 'web' ? null : (
+                    <SettingsListGroup>
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="information"
+                                    color={palette.iconHome}
+                                />
+                            }
+                            title={
+                                t('preferences.items.about.title')
+                                || 'About preferences'
+                            }
+                            description={
+                                t('preferences.items.about.subtitle')
+                                || 'Preferences sync across every Oxy app you sign into'
+                            }
+                            showChevron={false}
+                            disabled
+                        />
+                    </SettingsListGroup>
+                )}
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scroll: {
+        flex: 1,
+    },
+    scrollContent: {
+        paddingHorizontal: 16,
+        paddingBottom: 24,
+    },
+});
+
+export default React.memo(PreferencesScreen);

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -8,7 +8,10 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxyhq/bloom';
-import { Header, Avatar, LoadingState, EmptyState } from '../components';
+import Header from '../components/Header';
+import Avatar from '../components/Avatar';
+import LoadingState from '../components/LoadingState';
+import EmptyState from '../components/EmptyState';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Switch } from '@oxyhq/bloom/switch';
 import { useI18n } from '../hooks/useI18n';

package/src/ui/screens/ProfileScreen.tsx

@@ -4,7 +4,7 @@ import { View, Text, StyleSheet, ActivityIndicator, ScrollView, TouchableOpacity
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import Avatar from '../components/Avatar';
-import { FollowButton } from '../components';
+import FollowButton from '../components/FollowButton';
 import { useFollow } from '../hooks/useFollow';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
@@ -227,7 +227,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                             <TouchableOpacity
                                 style={styles.actionButton}
                                 className="bg-background border-primary"
-                                onPress={() => navigate?.('AccountSettings')}
+                                onPress={() => navigate?.('ManageAccount')}
                             >
                                 <Text style={styles.actionButtonText} className="text-primary">{t('editProfile.title') || 'Edit Profile'}</Text>
                             </TouchableOpacity>

package/src/ui/screens/SavesCollectionsScreen.tsx

@@ -8,7 +8,9 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxyhq/bloom';
-import { Header, LoadingState, EmptyState } from '../components';
+import Header from '../components/Header';
+import LoadingState from '../components/LoadingState';
+import EmptyState from '../components/EmptyState';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';

package/src/ui/screens/SearchSettingsScreen.tsx

@@ -5,7 +5,8 @@ import {
     ScrollView,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { Header, LoadingState } from '../components';
+import Header from '../components/Header';
+import LoadingState from '../components/LoadingState';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Switch } from '@oxyhq/bloom/switch';
 import { useI18n } from '../hooks/useI18n';

package/src/ui/screens/UserLinksScreen.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { View, StyleSheet, ScrollView, Linking } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { Header } from '../components';
+import Header from '../components/Header';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useTheme } from '@oxyhq/bloom/theme';

package/src/ui/screens/UserListScreen.tsx

@@ -12,7 +12,7 @@ import {
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import Avatar from '../components/Avatar';
-import { FollowButton } from '../components';
+import FollowButton from '../components/FollowButton';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';

package/src/ui/screens/karma/KarmaAboutScreen.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
-import { Header } from '../../components';
+import Header from '../../components/Header';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 

package/src/ui/screens/karma/KarmaFAQScreen.tsx

@@ -2,7 +2,7 @@ import React, { useState, useMemo, useCallback } from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform, TextInput, LayoutAnimation } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
 import { Ionicons } from '@expo/vector-icons';
-import { Header } from '../../components';
+import Header from '../../components/Header';
 import { SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';

package/src/ui/screens/karma/KarmaLeaderboardScreen.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
 import Avatar from '../../components/Avatar';
-import { Header } from '../../components';
+import Header from '../../components/Header';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../../context/OxyContext';

package/src/ui/screens/karma/KarmaRewardsScreen.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { useMemo, useState, useEffect } from 'react';
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Platform } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
-import { Header } from '../../components';
+import Header from '../../components/Header';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';

package/src/ui/screens/karma/KarmaRulesScreen.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
-import { Header } from '../../components';
+import Header from '../../components/Header';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../../context/OxyContext';