@umituz/react-native-settings 4.21.2 → 4.21.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.21.2",
+  "version": "4.21.3",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -5,11 +5,12 @@
  * Receives appInfo and legalUrls from app.
  */
 
-import React from "react";
+import React, { useCallback } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useLocalization, LanguageSelectionScreen } from "@umituz/react-native-localization";
 import { NotificationSettingsScreen } from "@umituz/react-native-notifications";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AccountScreen, useAuth, useAuthModalStore } from "@umituz/react-native-auth";
+import { useAppDesignTokens, AlertService } from "@umituz/react-native-design-system";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import { FAQScreen } from "../../domains/faqs";
 import { useNavigationHandlers } from "./hooks";
@@ -30,6 +31,7 @@ import {
   createFAQScreenOptions,
   createLanguageSelectionScreenOptions,
   createGamificationScreenOptions,
+  createAccountScreenOptions,
 } from "./utils";
 import type { SettingsStackParamList, SettingsStackNavigatorProps } from "./types";
 import { GamificationScreenWrapper } from "../../domains/gamification";
@@ -51,9 +53,53 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
+  const { user, deleteAccount, signOut } = useAuth();
+  const { showAuthModal } = useAuthModalStore();
   const { handlePrivacyPress, handleTermsPress, handleEulaPress, aboutConfig } =
     useNavigationHandlers(appInfo, legalUrls);
 
+  const handleSignOut = useCallback(async () => {
+    try {
+      await signOut();
+    } catch (error) {
+      AlertService.createErrorAlert(t("common.error"), t("auth.errors.unknownError"));
+    }
+  }, [signOut, t]);
+
+  const handleDeleteAccount = useCallback(async () => {
+    try {
+      await deleteAccount();
+    } catch (error) {
+      AlertService.createErrorAlert(t("common.error"), t("account.deleteErrorMessage"));
+    }
+  }, [deleteAccount, t]);
+
+  const handleSignIn = useCallback(() => {
+    showAuthModal(() => {}, "login");
+  }, [showAuthModal]);
+
+  const isAnonymous = user?.isAnonymous ?? true;
+
+  const accountConfig = {
+    profile: {
+      displayName: userProfile?.displayName || user?.displayName || t("settings.profile.anonymousName"),
+      userId: userProfile?.userId || user?.uid,
+      isAnonymous,
+      avatarUrl: userProfile?.avatarUrl || user?.photoURL || undefined,
+    },
+    isAnonymous,
+    editProfileText: t("settings.account.editProfile"),
+    onSignIn: handleSignIn,
+    accountActions: {
+      onSignOut: handleSignOut,
+      onDeleteAccount: handleDeleteAccount,
+      signOutText: t("auth.signOut"),
+      deleteAccountText: t("account.deleteAccount"),
+      confirmDeleteTitle: t("auth.deleteAccountConfirmTitle"),
+      confirmDeleteMessage: t("auth.deleteAccountConfirmMessage"),
+    },
+  };
+
   const screenOptions = React.useMemo(() => createScreenOptions(tokens), [tokens]);
   const notificationTranslations = React.useMemo(() => createNotificationTranslations(t), [t]);
   const quietHoursTranslations = React.useMemo(() => createQuietHoursTranslations(t), [t]);
@@ -165,6 +211,13 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
           />
         )}
       </Stack.Screen>
+
+      <Stack.Screen
+        name="Account"
+        options={createAccountScreenOptions(t)}
+      >
+        {() => <AccountScreen config={accountConfig} />}
+      </Stack.Screen>
     </Stack.Navigator>
   );
 };

package/src/presentation/navigation/types.ts

@@ -43,6 +43,7 @@ export type SettingsStackParamList = {
   FAQ: undefined;
   LanguageSelection: undefined;
   Gamification: undefined;
+  Account: undefined;
 };
 
 /**

package/src/presentation/navigation/utils/navigationScreenOptions.ts

@@ -61,3 +61,9 @@ export const createGamificationScreenOptions = (t: any) => ({
   headerTitleAlign: "center" as const,
 });
 
+export const createAccountScreenOptions = (t: any) => ({
+  headerShown: true,
+  headerTitle: t("settings.account.title"),
+  headerTitleAlign: "center" as const,
+});
+