@umituz/react-native-settings 4.23.81 → 4.23.83

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

@@ -0,0 +1,163 @@
+import React, { 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";
+import { AboutScreen } from "../../../domains/about";
+import { LegalScreen } from "../../../domains/legal";
+import { GamificationScreen } from "../../../domains/gamification";
+import type { SettingsStackNavigatorProps, AdditionalScreen } from "../types";
+
+export interface UseSettingsScreensProps extends SettingsStackNavigatorProps {
+  aboutConfig: any;
+  legalProps: any;
+  notificationTranslations: any;
+  quietHoursTranslations: any;
+  t: (key: string) => string;
+}
+
+export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[] => {
+  const {
+    appInfo,
+    config,
+    showUserProfile,
+    userProfile,
+    devSettings,
+    customSections,
+    showHeader,
+    showCloseButton,
+    onClose,
+    aboutConfig,
+    legalProps,
+    notificationTranslations,
+    quietHoursTranslations,
+    faqData,
+    additionalScreens,
+    gamificationConfig,
+    accountConfig,
+    t,
+  } = props;
+
+  return useMemo(() => {
+    const baseScreens: StackScreen[] = [
+      {
+        name: "SettingsMain",
+        options: { headerShown: false },
+        children: () => React.createElement(SettingsScreen, {
+          config,
+          appVersion: appInfo.version,
+          showUserProfile,
+          userProfile,
+          devSettings,
+          customSections,
+          showHeader,
+          showCloseButton,
+          onClose,
+        }),
+      },
+      {
+        name: "Appearance",
+        component: AppearanceScreen as any,
+        options: { headerShown: false },
+      },
+      {
+        name: "About",
+        options: { headerShown: false },
+        children: () => React.createElement(AboutScreen, { config: aboutConfig }),
+      },
+      {
+        name: "Legal",
+        options: { headerShown: false },
+        children: () => React.createElement(LegalScreen, legalProps),
+      },
+      {
+        name: "Notifications",
+        options: { headerShown: false },
+        children: () => React.createElement(NotificationSettingsScreen, {
+          translations: notificationTranslations,
+          quietHoursTranslations,
+        }),
+      },
+    ];
+
+    const faqScreen: StackScreen | null = (faqData && faqData.categories?.length > 0)
+      ? {
+          name: "FAQ",
+          options: { headerShown: false },
+          children: () => React.createElement(FAQScreen, {
+            categories: faqData.categories,
+            searchPlaceholder: t("settings.faqs.searchPlaceholder"),
+            emptySearchTitle: t("settings.faqs.emptySearchTitle"),
+            emptySearchMessage: t("settings.faqs.emptySearchMessage"),
+            headerTitle: t("settings.faqs.headerTitle"),
+          }),
+        }
+      : null;
+
+    const additionalStackScreens: StackScreen[] = (additionalScreens || []).map((screen: AdditionalScreen): StackScreen => {
+      const stackScreen: any = { name: screen.name };
+      if (screen.component) stackScreen.component = screen.component;
+      if (screen.children) stackScreen.children = screen.children;
+      if (screen.options) stackScreen.options = screen.options;
+      return stackScreen as StackScreen;
+    });
+
+    const gamificationScreen: StackScreen | null = gamificationConfig?.enabled
+      ? {
+          name: "Gamification",
+          options: { headerShown: false },
+          children: () => React.createElement(GamificationScreen, { config: gamificationConfig }),
+        }
+      : null;
+
+    const languageScreen: StackScreen = {
+      name: "LanguageSelection",
+      options: { headerShown: false },
+      children: () => React.createElement(LanguageSelectionScreen, {
+        headerTitle: t("settings.language.title"),
+        searchPlaceholder: t("settings.languageSelection.searchPlaceholder"),
+      }),
+    };
+
+    const accountScreen: StackScreen | null = accountConfig
+      ? {
+          name: "Account",
+          options: { headerShown: false },
+          children: () => React.createElement(AccountScreen, { config: accountConfig }),
+        }
+      : null;
+
+    const allScreens: StackScreen[] = [
+      ...baseScreens,
+      ...(faqScreen ? [faqScreen] : []),
+      ...additionalStackScreens,
+      ...(gamificationScreen ? [gamificationScreen] : []),
+      languageScreen,
+      ...(accountScreen ? [accountScreen] : []),
+    ];
+
+    return allScreens;
+  }, [
+    t,
+    showHeader,
+    showCloseButton,
+    onClose,
+    config,
+    appInfo.version,
+    showUserProfile,
+    userProfile,
+    devSettings,
+    customSections,
+    aboutConfig,
+    legalProps,
+    notificationTranslations,
+    quietHoursTranslations,
+    faqData,
+    additionalScreens,
+    gamificationConfig,
+    accountConfig,
+  ]);
+};

package/src/presentation/screens/SettingsScreen.tsx

@@ -6,12 +6,10 @@
 import React from "react";
 import {
   ScreenLayout,
-  useAppNavigation,
 } from "@umituz/react-native-design-system";
+import { useSettingsScreen } from "./hooks/useSettingsScreen";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
-import { normalizeSettingsConfig } from "./utils/normalizeConfig";
-import { useFeatureDetection } from "./hooks/useFeatureDetection";
 import type { SettingsConfig, CustomSettingsSection } from "./types";
 import type { DevSettingsProps } from "../../domains/dev";
 
@@ -55,63 +53,44 @@ export interface SettingsScreenProps {
   showHeader?: boolean;
 }
 
-export const SettingsScreen: React.FC<SettingsScreenProps> = ({
-  children,
-  config = {},
-  showUserProfile,
-  userProfile,
-  showFooter = true,
-  footerText,
-  appVersion,
-  customSections = [],
-  showCloseButton = false,
-  showHeader = true,
-  onClose,
-  featureOptions,
-  devSettings,
-  gamificationConfig,
-}) => {
-  const navigation = useAppNavigation();
+export const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
+  const {
+    children,
+    config = {},
+    showUserProfile,
+    userProfile,
+    showFooter = true,
+    footerText,
+    appVersion: providedVersion,
+    customSections = [],
+    showCloseButton = false,
+    showHeader = true,
+    onClose,
+    featureOptions,
+    devSettings,
+    gamificationConfig,
+  } = props;
 
-  // Memoize config normalization to prevent unnecessary recalculations
-  const normalizedConfig = React.useMemo(
-    () => normalizeSettingsConfig(config),
-    [config]
-  );
-
-  // Feature detection hook (must be called at top level)
-  const detectedFeatures = useFeatureDetection(normalizedConfig, navigation, featureOptions);
-
-  // Memoize features to prevent unnecessary recalculations
-  const features = React.useMemo(
-    () => detectedFeatures,
-    [detectedFeatures]
-  );
-
-  // Determine if user profile should be shown (explicit prop takes priority, then config)
-  const shouldShowUserProfile = showUserProfile ?? features.userProfile;
+  const {
+    normalizedConfig,
+    features,
+    shouldShowUserProfile,
+    appVersion,
+    handleClose,
+  } = useSettingsScreen({
+    config,
+    showUserProfile,
+    featureOptions,
+    appVersion: providedVersion,
+    onClose,
+  });
 
-  // Workaround: Use conditional rendering with type assertion
-  if (showHeader) {
-    return <ScreenLayout header={<SettingsHeader showCloseButton={showCloseButton} onClose={onClose} />}>
-        {children ?? (
-          <SettingsContent
-            normalizedConfig={normalizedConfig}
-            features={features}
-            showUserProfile={shouldShowUserProfile}
-            userProfile={userProfile}
-            showFooter={showFooter}
-            footerText={footerText}
-            appVersion={appVersion}
-            customSections={customSections}
-            devSettings={devSettings}
-            gamificationConfig={gamificationConfig}
-          />
-        )}
-    </ScreenLayout>;
-  }
+  const header = showHeader ? (
+    <SettingsHeader showCloseButton={showCloseButton} onClose={handleClose} />
+  ) : undefined;
 
-  return <ScreenLayout>
+  return (
+    <ScreenLayout header={header}>
       {children ?? (
         <SettingsContent
           normalizedConfig={normalizedConfig}
@@ -126,5 +105,6 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           gamificationConfig={gamificationConfig}
         />
       )}
-  </ScreenLayout>;
+    </ScreenLayout>
+  );
 };

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

@@ -1,11 +1,6 @@
-/**
- * Settings Header Component
- * Handles close button functionality
- */
-
 import React from "react";
-import { View, Pressable, StyleSheet } from "react-native";
-import { useAppDesignTokens, AtomicIcon, AtomicText, useAppNavigation } from "@umituz/react-native-design-system";
+import { Pressable } from "react-native";
+import { useAppDesignTokens, AtomicIcon, useAppNavigation, NavigationHeader } from "@umituz/react-native-design-system";
 import { useLocalization } from "../../../domains/localization";
 
 interface SettingsHeaderProps {
@@ -29,41 +24,32 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
     }
   };
 
+  const rightElement = showCloseButton ? (
+    <Pressable
+      onPress={handleClose}
+      style={({ pressed }) => [
+        {
+          width: 44,
+          height: 44,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: pressed ? tokens.colors.surfaceVariant : tokens.colors.surface,
+          borderRadius: tokens.borders.radius.full,
+        },
+      ]}
+      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+    >
+      <AtomicIcon name="close-outline" size="lg" color="textPrimary" />
+    </Pressable>
+  ) : undefined;
+
   return (
-    <View style={[styles.container, { padding: tokens.spacing.lg }]}>
-      <AtomicText type="headlineLarge">
-        {t('settings.title')}
-      </AtomicText>
-      
-      {showCloseButton && (
-        <Pressable
-          onPress={handleClose}
-          style={({ pressed }) => [
-            styles.closeButton,
-            {
-              backgroundColor: pressed ? tokens.colors.surfaceVariant : tokens.colors.surface,
-              borderRadius: tokens.borders.radius.full,
-            },
-          ]}
-          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-        >
-          <AtomicIcon name="close-outline" size="lg" color="textPrimary" />
-        </Pressable>
-      )}
-    </View>
+    <NavigationHeader
+      title={t('settings.title')}
+      rightElement={rightElement}
+      // If NOT showing close button, we might want a back button? 
+      // But usually Settings is a root screen in a modal or stack.
+      onBackPress={!showCloseButton ? handleClose : undefined}
+    />
   );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  closeButton: {
-    width: 44,
-    height: 44,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
+};

package/src/presentation/screens/hooks/useSettingsScreen.ts

@@ -0,0 +1,64 @@
+/**
+ * useSettingsScreen Hook
+ * Refactored: Extracted business logic from SettingsScreen component
+ */
+
+import { useMemo, useCallback } from "react";
+import { useAppNavigation } from "@umituz/react-native-design-system";
+import { normalizeSettingsConfig } from "../utils/normalizeConfig";
+import { useFeatureDetection } from "./useFeatureDetection";
+import { getAppVersion } from "../../../utils/appUtils";
+import type { SettingsConfig } from "../types";
+
+export interface UseSettingsScreenParams {
+  config?: SettingsConfig;
+  showUserProfile?: boolean;
+  featureOptions?: {
+    notificationServiceAvailable?: boolean;
+  };
+  appVersion?: string;
+  onClose?: () => void;
+}
+
+export function useSettingsScreen({
+  config = {},
+  showUserProfile,
+  featureOptions,
+  appVersion: providedVersion,
+  onClose,
+}: UseSettingsScreenParams) {
+  const navigation = useAppNavigation();
+
+  // Normalize config
+  const normalizedConfig = useMemo(
+    () => normalizeSettingsConfig(config),
+    [config]
+  );
+
+  // Feature detection
+  const features = useFeatureDetection(
+    normalizedConfig,
+    navigation,
+    featureOptions
+  );
+
+  const shouldShowUserProfile = showUserProfile ?? features.userProfile;
+
+  const appVersion = providedVersion || getAppVersion();
+
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigation.goBack();
+    }
+  }, [onClose, navigation]);
+
+  return {
+    normalizedConfig,
+    features,
+    shouldShowUserProfile,
+    appVersion,
+    handleClose,
+  };
+}

package/src/utils/appUtils.ts

@@ -0,0 +1,43 @@
+/**
+ * App and Platform Utilities
+ */
+import { Platform } from "react-native";
+import Constants from "expo-constants";
+
+/**
+ * Gets the current app version from Expo constants
+ */
+export function getAppVersion(): string {
+  const version = Constants.expoConfig?.version ?? Constants.manifest2?.extra?.expoClient?.version;
+  if (!version) {
+    // Return a default if not found
+    return "1.0.0";
+  }
+  return version;
+}
+
+/**
+ * Gets the current build number from Expo constants
+ */
+export function getBuildNumber(): string | undefined {
+  return Constants.expoConfig?.ios?.buildNumber ?? Constants.expoConfig?.android?.versionCode?.toString();
+}
+
+/**
+ * Validates if the current platform is supported
+ */
+export function validatePlatform(): "ios" | "android" {
+  const platform = Platform.OS;
+  if (platform !== "ios" && platform !== "android") {
+     // Default to android for consistency if something goes wrong in detection
+     return "android";
+  }
+  return platform;
+}
+
+/**
+ * Checks if the app is currently in development mode
+ */
+export function isDev(): boolean {
+  return __DEV__;
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./appUtils";

package/src/domains/about/presentation/screens/AboutScreenContainer.tsx

@@ -1,109 +0,0 @@
-/**
- * AboutScreen Container Component
- * Handles business logic and state management for About screen
- */
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AboutScreenContent } from './AboutScreenContent';
-import { useAboutInfo } from '../hooks/useAboutInfo';
-import { useAppDesignTokens, AtomicText, type DesignTokens } from '@umituz/react-native-design-system';
-import type { AboutScreenProps } from './AboutScreen';
-
-export const AboutScreenContainer: React.FC<AboutScreenProps> = ({
-  config,
-  containerStyle,
-  headerStyle,
-  titleStyle,
-  versionStyle,
-  showHeader = true,
-  headerComponent,
-  footerComponent,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-
-  const { appInfo, loading, error } = useAboutInfo({
-    autoInit: true,
-    initialConfig: config,
-  });
-
-  const containerStyles = React.useMemo(() => {
-    return [
-      styles.container,
-      { backgroundColor: tokens.colors.backgroundPrimary },
-      containerStyle
-    ];
-  }, [containerStyle, tokens.colors.backgroundPrimary, styles]);
-
-  const texts = config.texts || {};
-
-  if (loading) {
-    return (
-      <View style={containerStyles} testID={testID}>
-        <AtomicText
-          type="bodyMedium"
-          color="textSecondary"
-          style={styles.statusText}
-        >
-          {texts.loading}
-        </AtomicText>
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={containerStyles} testID={testID}>
-        <AtomicText
-          type="bodyMedium"
-          color="error"
-          style={styles.statusText}
-        >
-          {texts.errorPrefix} {error}
-        </AtomicText>
-      </View>
-    );
-  }
-
-  if (!appInfo) {
-    return (
-      <View style={containerStyles} testID={testID}>
-        <AtomicText
-          type="bodyMedium"
-          color="textSecondary"
-          style={styles.statusText}
-        >
-          {texts.noInfo}
-        </AtomicText>
-      </View>
-    );
-  }
-
-  return (
-    <AboutScreenContent
-      appInfo={appInfo}
-      config={config}
-      containerStyle={containerStyle}
-      headerStyle={headerStyle}
-      titleStyle={titleStyle}
-      versionStyle={versionStyle}
-      showHeader={showHeader}
-      headerComponent={headerComponent}
-      footerComponent={footerComponent}
-      testID={testID}
-      _tokens={tokens}
-    />
-  );
-};
-
-const getStyles = (tokens: DesignTokens) => StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  statusText: {
-    textAlign: 'center',
-    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    marginTop: 20,
-  },
-});