@umituz/react-native-settings 4.16.4 → 4.16.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.16.4",
+  "version": "4.16.6",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -30,6 +30,7 @@
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@umituz/react-native-about": "^1.11.3",
+    "@umituz/react-native-avatar": "*",
     "@umituz/react-native-appearance": "*",
     "@umituz/react-native-design-system": "*",
     "@umituz/react-native-design-system-atoms": "*",
@@ -38,11 +39,14 @@
     "@umituz/react-native-design-system-responsive": "*",
     "@umituz/react-native-design-system-theme": "*",
     "@umituz/react-native-design-system-typography": "*",
+    "@umituz/react-native-exception": "latest",
+    "@umituz/react-native-feedback": "latest",
     "@umituz/react-native-legal": "*",
     "@umituz/react-native-localization": "*",
     "@umituz/react-native-notifications": "*",
     "@umituz/react-native-onboarding": "*",
     "@umituz/react-native-storage": "*",
+    "lucide-react-native": "*",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": "~5.6.0",
@@ -64,6 +68,7 @@
     "@umituz/react-native-about": "^1.11.4",
     "@umituz/react-native-alert": "latest",
     "@umituz/react-native-appearance": "^2.0.2",
+    "@umituz/react-native-avatar": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-atoms": "latest",
     "@umituz/react-native-design-system-molecules": "latest",
@@ -71,6 +76,7 @@
     "@umituz/react-native-design-system-responsive": "latest",
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-design-system-typography": "latest",
+    "@umituz/react-native-feedback": "latest",
     "@umituz/react-native-legal": "^2.0.3",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-notifications": "latest",

package/src/presentation/components/DevSettingsSection.tsx

@@ -38,11 +38,11 @@ const DEFAULT_TEXTS = {
 export interface DevSettingsProps {
   /** Enable dev settings section (default: true in __DEV__ mode) */
   enabled?: boolean;
-  /** Callback after storage is cleared - use this to reload the app */
+  /** Callback after storage is cleared - use this to reload the app and reset app state (e.g., onboarding) */
   onAfterClear?: () => Promise<void>;
   /** Custom texts (optional - defaults to English) */
   texts?: Partial<typeof DEFAULT_TEXTS>;
-  /** Custom dev components to render before the clear data button */
+  /** Custom dev components to render BEFORE the "Clear All Data" button (e.g., OnboardingResetSetting) */
   customDevComponents?: React.ReactNode[];
 }
 

package/src/presentation/components/FeedbackSupportSection.tsx

@@ -0,0 +1,59 @@
+/**
+ * Feedback Support Section Component
+ * Renders a Feedback Item and Modal
+ */
+
+import React, { useState } from "react";
+import { SettingsSection } from "./SettingsSection";
+import { SettingItem } from "./SettingItem";
+import { FeedbackModal } from "@umituz/react-native-feedback";
+import { MessageSquare } from "lucide-react-native";
+import type { FeedbackConfig } from "../screens/types/FeatureConfig";
+
+export interface FeedbackSupportSectionProps {
+    config: FeedbackConfig;
+}
+
+export const FeedbackSupportSection: React.FC<FeedbackSupportSectionProps> = ({ config }) => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const handleSubmit = async (data: { type: any; rating: number; description: string; title: string }) => {
+        if (config.onSubmit) {
+            setIsSubmitting(true);
+            try {
+                await config.onSubmit(data);
+                setModalVisible(false);
+            } catch (error) {
+                console.error("Feedback submission error:", error);
+                // Ideally show toast or alert here
+            } finally {
+                setIsSubmitting(false);
+            }
+        } else {
+            console.warn("No onSubmit handler provided for Feedback");
+            setModalVisible(false);
+        }
+    };
+
+    return (
+        <>
+            <SettingsSection title={config.title || "Support"}>
+                <SettingItem
+                    title={config.description || "Send Feedback"}
+                    icon={MessageSquare as any}
+                    onPress={() => setModalVisible(true)}
+                />
+            </SettingsSection>
+
+            <FeedbackModal
+                visible={modalVisible}
+                onClose={() => setModalVisible(false)}
+                onSubmit={handleSubmit}
+                initialType={config.initialType}
+                isSubmitting={isSubmitting}
+                title={config.title ? undefined : "Send Feedback"} // Use config title if passed? No, modal title usually fixed or different.
+            />
+        </>
+    );
+};

package/src/presentation/components/UserProfileHeader.tsx

@@ -4,12 +4,13 @@
  * Works for both guest and authenticated users
  */
 
-import React, { useState, useCallback } from "react";
-import { View, TouchableOpacity, StyleSheet, Image } from "react-native";
+import React, { useCallback } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { Feather } from "@expo/vector-icons";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { AtomicText } from "@umituz/react-native-design-system-atoms";
 import { useNavigation } from "@react-navigation/native";
+import { Avatar } from "@umituz/react-native-avatar";
 
 export interface UserProfileHeaderProps {
   /** User display name */
@@ -50,16 +51,9 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
   const navigation = useNavigation();
   const colors = tokens.colors;
   const spacing = tokens.spacing;
-  const [imageError, setImageError] = useState(false);
-
   const finalDisplayName = displayName || (isAnonymous ? anonymousDisplayName || defaultAnonymousDisplayName || "Anonymous" : defaultUserDisplayName || "User");
   const avatarName = isAnonymous ? anonymousDisplayName || defaultAnonymousDisplayName || "Anonymous" : finalDisplayName;
 
-  const defaultAvatarService = avatarServiceUrl || "https://ui-avatars.com/api";
-  const finalAvatarUrl =
-    (imageError ? null : avatarUrl) ||
-    `${defaultAvatarService}/?name=${encodeURIComponent(avatarName)}&background=${colors.primary.replace("#", "")}&color=fff&size=64`;
-
   const handlePress = useCallback(() => {
     if (onPress) {
       onPress();
@@ -84,24 +78,13 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
   const content = (
     <>
       <View style={styles.content}>
-        <View style={[styles.avatarContainer, { borderColor: `${colors.primary}30` }]}>
-          {finalAvatarUrl ? (
-            <Image
-              source={{ uri: finalAvatarUrl }}
-              style={styles.avatar}
-              onError={() => setImageError(true)}
-            />
-          ) : (
-            <View style={[styles.avatarFallback, { backgroundColor: `${colors.primary}20` }]}>
-              <AtomicText
-                type="headlineMedium"
-                color="primary"
-                style={styles.avatarText}
-              >
-                {avatarName.charAt(0).toUpperCase()}
-              </AtomicText>
-            </View>
-          )}
+        <View style={styles.avatarContainer}>
+          <Avatar
+            uri={avatarUrl}
+            name={avatarName}
+            size="lg"
+            shape="circle"
+          />
         </View>
         <View style={[styles.textContainer, { marginLeft: spacing.md }]}>
           <AtomicText
@@ -161,26 +144,9 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   avatarContainer: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    borderWidth: 2,
-    overflow: "hidden",
-    backgroundColor: "transparent",
-  },
-  avatar: {
-    width: "100%",
-    height: "100%",
-  },
-  avatarFallback: {
-    width: "100%",
-    height: "100%",
     justifyContent: "center",
     alignItems: "center",
   },
-  avatarText: {
-    fontWeight: "700",
-  },
   textContainer: {
     flex: 1,
   },

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

@@ -17,6 +17,7 @@ import { AboutSection } from "@umituz/react-native-about";
 import { LegalSection } from "@umituz/react-native-legal";
 import { AppearanceSection } from "@umituz/react-native-appearance";
 import { LanguageSection } from "@umituz/react-native-localization";
+import { FeedbackSupportSection } from "../../components/FeedbackSupportSection";
 import type { NormalizedConfig } from "../utils/normalizeConfig";
 import type { CustomSettingsSection } from "../types";
 
@@ -56,6 +57,7 @@ interface SettingsContentProps {
     disclaimer: boolean;
     userProfile: boolean;
     subscription: boolean;
+    feedback: boolean;
   };
   showUserProfile?: boolean;
   userProfile?: {
@@ -102,6 +104,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
     features.legal ||
     features.disclaimer ||
     features.subscription ||
+    features.feedback ||
     customSections.length > 0,
     [features, customSections.length]
   );
@@ -215,6 +218,20 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         />
       )}
 
+      {features.feedback && (
+        <FeedbackSupportSection
+          config={{
+            ...normalizedConfig.feedback.config,
+            title:
+              normalizedConfig.feedback.config?.title ||
+              t("settings.feedback.title") || "Support",
+            description:
+              normalizedConfig.feedback.config?.description ||
+              t("settings.feedback.description") || "Send Feedback",
+          }}
+        />
+      )}
+
       {features.disclaimer && DisclaimerSetting && (
         <DisclaimerSetting />
       )}

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

@@ -70,6 +70,7 @@ export function useFeatureDetection(
       disclaimer,
       userProfile,
       subscription,
+      feedback,
     } = normalizedConfig;
 
     const notificationServiceAvailable =
@@ -123,6 +124,7 @@ export function useFeatureDetection(
       subscription:
         subscription.enabled &&
         subscription.config?.sectionConfig !== undefined,
+      feedback: feedback.enabled,
     };
   }, [normalizedConfig, navigation, options]);
 }

package/src/presentation/screens/types/FeatureConfig.ts

@@ -168,3 +168,19 @@ export interface SubscriptionConfig {
     onUpgrade?: () => void;
   };
 }
+
+/**
+ * Feedback Settings Configuration
+ */
+export interface FeedbackConfig {
+  /** Show feedback section */
+  enabled?: FeatureVisibility;
+  /** Custom feedback title */
+  title?: string;
+  /** Custom feedback description */
+  description?: string;
+  /** Initial feedback type */
+  initialType?: "general" | "bug_report" | "feature_request" | "improvement" | "other";
+  /** Submit handler */
+  onSubmit?: (data: { type: string; rating: number; description: string; title: string }) => Promise<void>;
+}

package/src/presentation/screens/types/SettingsConfig.ts

@@ -13,6 +13,7 @@ import type {
   DisclaimerConfig,
   UserProfileConfig,
   SubscriptionConfig,
+  FeedbackConfig,
 } from "./FeatureConfig";
 
 /**
@@ -96,6 +97,12 @@ export interface SettingsConfig {
    */
   subscription?: FeatureVisibility | SubscriptionConfig;
 
+  /**
+   * Feedback settings
+   * @default 'auto'
+   */
+  feedback?: FeatureVisibility | FeedbackConfig;
+
   /**
    * Custom empty state text when no settings are available
    */

package/src/presentation/screens/types/index.ts

@@ -13,6 +13,7 @@ export type {
   DisclaimerConfig,
   UserProfileConfig,
   SubscriptionConfig,
+  FeedbackConfig,
 } from "./FeatureConfig";
 export type { SettingsConfig } from "./SettingsConfig";
 export type { CustomSettingsSection } from "./CustomSection";

package/src/presentation/screens/utils/normalizeConfig.ts

@@ -13,6 +13,7 @@ import type {
   DisclaimerConfig,
   UserProfileConfig,
   SubscriptionConfig,
+  FeedbackConfig,
   SettingsConfig,
 } from "../types";
 
@@ -49,6 +50,10 @@ export interface NormalizedConfig {
     enabled: boolean;
     config?: SubscriptionConfig;
   };
+  feedback: {
+    enabled: boolean;
+    config?: FeedbackConfig;
+  };
 }
 
 /**
@@ -91,6 +96,7 @@ export function normalizeSettingsConfig(
     disclaimer: normalizeConfigValue(config?.disclaimer, false),
     userProfile: normalizeConfigValue(config?.userProfile, false),
     subscription: normalizeConfigValue(config?.subscription, false),
+    feedback: normalizeConfigValue(config?.feedback, false),
   };
 }