@umituz/react-native-settings 5.2.52 → 5.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.2.52",
+  "version": "5.3.1",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -20,6 +20,7 @@
     "./cloud-sync": "./src/domains/cloud-sync/index.ts",
     "./dev": "./src/domains/dev/index.ts",
     "./video-tutorials": "./src/domains/video-tutorials/index.ts",
+    "./account": "./src/account.ts",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -75,6 +76,11 @@
     "react-native-safe-area-context": ">=4.0.0",
     "zustand": ">=5.0.0"
   },
+  "peerDependenciesMeta": {
+    "@umituz/react-native-auth": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@expo/vector-icons": "^15.0.0",
     "@gorhom/bottom-sheet": "^5.2.8",

package/src/account.ts

@@ -0,0 +1,80 @@
+/**
+ * @umituz/react-native-settings/account
+ *
+ * Subpath export for apps that use @umituz/react-native-auth.
+ * Import auth-dependent hooks and components from here.
+ *
+ * Usage:
+ *   import {
+ *     useSettingsScreenConfigWithAuth,
+ *     AccountScreen,
+ *     ProfileSection,
+ *   } from '@umituz/react-native-settings/account';
+ *
+ *   // Pass AccountScreen and ProfileSection as props to SettingsStackNavigator:
+ *   <SettingsStackNavigator
+ *     AccountScreenComponent={AccountScreen}
+ *     ProfileSectionComponent={ProfileSection}
+ *     ...
+ *   />
+ */
+
+import { useMemo } from "react";
+import { useAuth, useUserProfile, useAuthHandlers } from "@umituz/react-native-auth";
+import { useSettingsScreenConfig } from './presentation/hooks/useSettingsScreenConfig';
+import type { UseSettingsScreenConfigParams, SettingsScreenConfigResult } from './presentation/hooks/useSettingsScreenConfig';
+import type { AppInfo } from './presentation/navigation/types';
+
+// Auth components - inject these into SettingsStackNavigator props
+export { AccountScreen, ProfileSection } from "@umituz/react-native-auth";
+
+// Auth hooks (re-export for direct use if needed)
+export { useAuth, useUserProfile, useAuthHandlers } from "@umituz/react-native-auth";
+
+// Auth types
+export type { AccountScreenConfig } from "@umituz/react-native-auth";
+
+// Base hook (accepts authData param)
+export { useSettingsScreenConfig } from './presentation/hooks/useSettingsScreenConfig';
+
+// Re-export types
+export type {
+  UseSettingsScreenConfigParams,
+  SettingsScreenConfigResult,
+  SettingsFeatures,
+  AuthData,
+} from './presentation/hooks/useSettingsScreenConfig';
+
+export type { AccountConfig } from './presentation/navigation/types';
+
+/**
+ * Convenience wrapper that auto-injects auth data from @umituz/react-native-auth.
+ * Drop-in replacement for the old useSettingsScreenConfig that called auth hooks internally.
+ *
+ * Usage:
+ *   const { settingsConfig, userProfile, accountConfig, ... } = useSettingsScreenConfigWithAuth({ appInfo, ... });
+ */
+export const useSettingsScreenConfigWithAuth = (
+  params: Omit<UseSettingsScreenConfigParams, 'authData'>
+): SettingsScreenConfigResult => {
+  const { user, loading, isAuthReady } = useAuth();
+  const userProfileData = useUserProfile({});
+  const { handleRatePress, handleSignOut, handleDeleteAccount, handleSignIn } =
+    useAuthHandlers(params.appInfo as AppInfo, params.translations?.errors);
+
+  const authData = useMemo(() => ({
+    user,
+    loading,
+    isAuthReady,
+    userProfileData,
+    handleRatePress,
+    handleSignOut,
+    handleDeleteAccount,
+    handleSignIn,
+  }), [user, loading, isAuthReady, userProfileData, handleRatePress, handleSignOut, handleDeleteAccount, handleSignIn]);
+
+  return useSettingsScreenConfig({
+    ...params,
+    authData,
+  });
+};

package/src/index.ts

@@ -37,11 +37,13 @@ export {
   useResetSettingsMutation
 } from './presentation/hooks/mutations/useSettingsMutations';
 
-export { useSettingsScreenConfig } from './presentation/hooks/useSettingsScreenConfig';
+// useSettingsScreenConfig is available from '@umituz/react-native-settings/account'
+// for apps that use @umituz/react-native-auth
 export type {
   UseSettingsScreenConfigParams,
   SettingsScreenConfigResult,
   SettingsFeatures,
+  AuthData,
 } from './presentation/hooks/useSettingsScreenConfig';
 
 

package/src/presentation/hooks/useSettingsScreenConfig.ts

@@ -2,20 +2,18 @@
  * useSettingsScreenConfig Hook
  *
  * One-stop hook for settings screen configuration.
- * Handles auth, feedback, and all settings config internally.
- * Apps pass subscription config from subscription package.
+ * Auth features are optional - pass authData for apps that use @umituz/react-native-auth.
+ * For apps WITH auth, use the convenience wrapper from '@umituz/react-native-settings/account'.
  */
 
 import { useMemo } from "react";
-import { useAuth, useUserProfile, useAuthHandlers } from "@umituz/react-native-auth";
 import { createUserProfileDisplay } from "../utils/userProfileUtils";
 import { createAccountConfig } from "../utils/accountConfigUtils";
 import { translateFAQData } from "../utils/faqTranslator";
 import { useSettingsConfigFactory } from "../utils/settingsConfigFactory";
 import type { SettingsConfig, SettingsTranslations } from "../screens/types";
 import type { FeedbackFormData } from "../utils/config-creators";
-import type { AppInfo, FAQData, UserProfileDisplay, AdditionalScreen } from "../navigation/types";
-import type { AccountScreenConfig } from "@umituz/react-native-auth";
+import type { AppInfo, FAQData, UserProfileDisplay, AdditionalScreen, AccountConfig } from "../navigation/types";
 
 export interface SettingsFeatures {
   notifications?: boolean;
@@ -31,6 +29,18 @@ export interface SettingsFeatures {
   subscription?: boolean;
 }
 
+/** Optional auth data - provide this if your app uses @umituz/react-native-auth */
+export interface AuthData {
+  user: { displayName?: string | null; uid?: string; isAnonymous?: boolean; photoURL?: string | null } | null;
+  loading: boolean;
+  isAuthReady: boolean;
+  userProfileData: { displayName?: string; userId?: string; avatarUrl?: string } | null;
+  handleRatePress: () => void;
+  handleSignOut: () => Promise<void>;
+  handleDeleteAccount: () => Promise<void>;
+  handleSignIn: () => void;
+}
+
 export interface UseSettingsScreenConfigParams {
   appInfo: AppInfo;
   faqData?: FAQData;
@@ -39,21 +49,38 @@ export interface UseSettingsScreenConfigParams {
   additionalScreens?: AdditionalScreen[];
   features?: SettingsFeatures;
   translations?: SettingsTranslations;
+  /** Auth data - optional. For apps with auth, provide this or use '@umituz/react-native-settings/account' */
+  authData?: AuthData;
 }
 
 export interface SettingsScreenConfigResult {
   settingsConfig: SettingsConfig;
   userProfile: UserProfileDisplay;
-  accountConfig: AccountScreenConfig;
+  accountConfig: AccountConfig | null;
   translatedFaqData: FAQData | undefined;
   isLoading: boolean;
   isAuthReady: boolean;
 }
 
+/** Default auth state for apps without authentication */
+const DEFAULT_AUTH: AuthData = {
+  user: null,
+  loading: false,
+  isAuthReady: true,
+  userProfileData: null,
+  handleRatePress: () => {},
+  handleSignOut: async () => {},
+  handleDeleteAccount: async () => {},
+  handleSignIn: () => {},
+};
+
 export const useSettingsScreenConfig = (
   params: UseSettingsScreenConfigParams
 ): SettingsScreenConfigResult => {
-  const { appInfo, faqData, isPremium, onFeedbackSubmit, features = {}, translations } = params;
+  const { appInfo, faqData, isPremium, onFeedbackSubmit, features = {}, translations, authData } = params;
+
+  const auth = authData || DEFAULT_AUTH;
+  const { user, loading, isAuthReady, userProfileData, handleRatePress, handleSignOut, handleDeleteAccount, handleSignIn } = auth;
 
   const {
     notifications: showNotifications = true,
@@ -69,13 +96,6 @@ export const useSettingsScreenConfig = (
     subscription: showSubscription = true,
   } = features;
 
-  const { user, loading, isAuthReady } = useAuth();
-  const userProfileData = useUserProfile({});
-
-  // Use centralized auth handlers
-  const { handleRatePress, handleSignOut, handleDeleteAccount, handleSignIn } =
-    useAuthHandlers(appInfo, translations?.errors);
-
   // Use settings config factory
   const baseSettingsConfig = useSettingsConfigFactory({
     onFeedbackSubmit,
@@ -136,21 +156,26 @@ export const useSettingsScreenConfig = (
   }, [baseSettingsConfig, translations]);
 
   const userProfile = useMemo(() => createUserProfileDisplay({
-    profileData: userProfileData,
+    profileData: userProfileData || undefined,
     onSignIn: handleSignIn,
   }), [userProfileData, handleSignIn]);
 
-  const accountConfig = useMemo(() => createAccountConfig({
-    displayName: userProfileData?.displayName || user?.displayName || undefined,
-    userId: userProfileData?.userId || user?.uid || undefined,
-    photoURL: user?.photoURL || undefined,
-    isAnonymous: user?.isAnonymous,
-    avatarUrl: userProfileData?.avatarUrl,
-    onSignIn: handleSignIn,
-    onLogout: handleSignOut,
-    onDeleteAccount: handleDeleteAccount,
-    translations: translations?.account as any,
-  }), [user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, translations]);
+  const accountConfig = useMemo(() => {
+    // Skip account config if no auth data is provided
+    if (!authData) return null;
+
+    return createAccountConfig({
+      displayName: userProfileData?.displayName || user?.displayName || undefined,
+      userId: userProfileData?.userId || user?.uid || undefined,
+      photoURL: user?.photoURL || undefined,
+      isAnonymous: user?.isAnonymous,
+      avatarUrl: userProfileData?.avatarUrl,
+      onSignIn: handleSignIn,
+      onLogout: handleSignOut,
+      onDeleteAccount: handleDeleteAccount,
+      translations: translations?.account as any,
+    });
+  }, [authData, user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, translations]);
 
   const translatedFaqData = useMemo(() =>
     translateFAQData(faqData, appInfo),

package/src/presentation/navigation/hooks/useSettingsScreens.ts

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import type { StackScreen } from "@umituz/react-native-design-system";
 import { LanguageSelectionScreen } from "../../../domains/localization";
 import { NotificationSettingsScreen } from "../../../domains/notifications";
-import { AccountScreen } from "@umituz/react-native-auth";
 import { SettingsScreen } from "../../screens/SettingsScreen";
 import { AppearanceScreen } from "../../screens/AppearanceScreen";
 import { FAQScreen } from "../../../domains/faqs";
@@ -29,6 +28,8 @@ export interface UseSettingsScreensProps extends SettingsStackNavigatorProps {
   legalProps: LegalScreenProps;
   notificationTranslations: NotificationSettingsTranslations;
   quietHoursTranslations: QuietHoursTranslations;
+  /** Optional AccountScreen component from @umituz/react-native-auth. If not provided, account screen is skipped. */
+  AccountScreenComponent?: React.ComponentType<any>;
 }
 
 export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[] => {
@@ -51,6 +52,8 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
     gamificationConfig,
     videoTutorialConfig,
     accountConfig,
+    AccountScreenComponent,
+    ProfileSectionComponent,
   } = props;
 
   const translations = config?.translations?.features;
@@ -69,6 +72,7 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
         showHeader,
         showCloseButton,
         onClose,
+        ProfileSectionComponent,
       }
     );
 
@@ -119,8 +123,8 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
     });
 
     const accountScreen = createConditionalScreen(
-      !!accountConfig,
-      () => createScreenWithProps("Account", AccountScreen as any, { config: accountConfig })
+      !!(accountConfig && AccountScreenComponent),
+      () => createScreenWithProps("Account", AccountScreenComponent as any, { config: accountConfig })
     );
 
     const videoTutorialScreen = createScreenWithProps("VideoTutorial", VideoTutorialsScreen as any, {

package/src/presentation/navigation/types.ts

@@ -88,11 +88,41 @@ export interface FAQData {
 }
 
 /**
- * Import AccountScreenConfig from auth package
+ * Account Configuration (locally defined to avoid hard dependency on auth package)
+ * Compatible with @umituz/react-native-auth's AccountScreenConfig
  */
-import type { AccountScreenConfig } from "@umituz/react-native-auth";
-
-export type AccountConfig = AccountScreenConfig;
+export interface AccountConfig {
+  profile: {
+    displayName?: string;
+    userId?: string;
+    isAnonymous: boolean;
+    avatarUrl?: string;
+    accountSettingsRoute?: string;
+    benefits?: string[];
+  };
+  accountActions?: {
+    logoutText: string;
+    deleteAccountText: string;
+    changePasswordText?: string;
+    logoutConfirmTitle: string;
+    logoutConfirmMessage: string;
+    deleteConfirmTitle: string;
+    deleteConfirmMessage: string;
+    deleteErrorTitle?: string;
+    deleteErrorMessage?: string;
+    cancelText: string;
+    onLogout: () => Promise<void>;
+    onDeleteAccount: () => Promise<void>;
+    onChangePassword?: () => void;
+    showChangePassword?: boolean;
+  };
+  isAnonymous: boolean;
+  editProfileText?: string;
+  onEditProfile?: () => void;
+  onSignIn?: () => void;
+  title?: string;
+  PasswordPromptComponent?: React.ReactNode;
+}
 
 /**
  * Settings Stack Navigator Props
@@ -115,4 +145,8 @@ export interface SettingsStackNavigatorProps {
   onClose?: () => void;
   gamificationConfig?: import("../../domains/gamification").GamificationSettingsConfig;
   videoTutorialConfig?: import("../../domains/video-tutorials").VideoTutorialsScreenProps;
+  /** Injected AccountScreen component from @umituz/react-native-auth (via account subpath). If not provided, account screen is not registered. */
+  AccountScreenComponent?: React.ComponentType<any>;
+  /** Injected ProfileSection component from @umituz/react-native-auth (via account subpath). If not provided, profile section is not rendered. */
+  ProfileSectionComponent?: React.ComponentType<any>;
 }

package/src/presentation/screens/SettingsScreen.tsx

@@ -53,6 +53,8 @@ export interface SettingsScreenProps {
   showHeader?: boolean;
   /** Password prompt modal component */
   PasswordPromptComponent?: React.ReactNode;
+  /** Injected ProfileSection component from @umituz/react-native-auth (via account subpath) */
+  ProfileSectionComponent?: React.ComponentType<any>;
 }
 
 export const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
@@ -72,6 +74,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
     devSettings,
     gamificationConfig,
     PasswordPromptComponent,
+    ProfileSectionComponent,
   } = props;
 
   const {
@@ -111,6 +114,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
             customSections={customSections}
             devSettings={devSettings}
             gamificationConfig={gamificationConfig}
+            ProfileSectionComponent={ProfileSectionComponent}
           />
         )}
       </ScreenLayout>

package/src/presentation/screens/components/SettingsContent.tsx

@@ -29,6 +29,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   emptyStateText,
   devSettings,
   gamificationConfig,
+  ProfileSectionComponent,
 }) => {
   const translations = normalizedConfig.translations;
   const { level } = useGamification(gamificationConfig);
@@ -48,9 +49,10 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   return (
     <View style={styles.container}>
       {showUserProfile && (
-        <ProfileSectionLoader 
-          userProfile={userProfile} 
+        <ProfileSectionLoader
+          userProfile={userProfile}
           translations={translations?.profile}
+          ProfileSectionComponent={ProfileSectionComponent}
         />
       )}
 

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { ProfileSection } from "@umituz/react-native-auth";
 import { useAppNavigation } from "@umituz/react-native-design-system";
 
 export interface ProfileSectionLoaderProps {
@@ -17,9 +16,11 @@ export interface ProfileSectionLoaderProps {
         anonymousName?: string;
         signIn?: string;
     };
+    /** Injected ProfileSection component from @umituz/react-native-auth (via account subpath) */
+    ProfileSectionComponent?: React.ComponentType<any>;
 }
 
-export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = React.memo(({ userProfile, translations }) => {
+export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = React.memo(({ userProfile, translations, ProfileSectionComponent }) => {
     const navigation = useAppNavigation();
 
     const handlePress = React.useCallback(() => {
@@ -36,11 +37,11 @@ export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = React.m
         return translations?.anonymousName || "";
     }, [translations]);
 
-    if (!userProfile) return null;
+    if (!userProfile || !ProfileSectionComponent) return null;
 
     return (
         <View style={styles.profileContainer}>
-            <ProfileSection
+            <ProfileSectionComponent
                 profile={{
                     displayName: userProfile.displayName || anonymousDisplayName,
                     userId: userProfile.userId,
@@ -56,7 +57,7 @@ export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = React.m
             />
         </View>
     );
-}, (prev, next) => prev.userProfile === next.userProfile && prev.translations === next.translations);
+}, (prev, next) => prev.userProfile === next.userProfile && prev.translations === next.translations && prev.ProfileSectionComponent === next.ProfileSectionComponent);
 
 ProfileSectionLoader.displayName = "ProfileSectionLoader";
 

package/src/presentation/screens/components/types/SettingsContentProps.ts

@@ -48,4 +48,6 @@ export interface SettingsContentProps {
   emptyStateText?: string;
   devSettings?: DevSettingsProps;
   gamificationConfig?: GamificationSettingsConfig;
+  /** Injected ProfileSection component from @umituz/react-native-auth (via account subpath) */
+  ProfileSectionComponent?: React.ComponentType<any>;
 }

package/src/presentation/utils/accountConfigUtils.ts

@@ -4,7 +4,7 @@
  * Helper functions for creating account screen configurations.
  */
 
-import type { AccountScreenConfig } from "@umituz/react-native-auth";
+import type { AccountConfig as AccountScreenConfig } from "../navigation/types";
 
 export interface AccountTranslations {
   editProfile?: string;