@umituz/react-native-settings 4.17.14 → 4.17.16

package/src/domains/faqs/presentation/screens/FAQScreen.tsx

@@ -0,0 +1,129 @@
+/**
+ * FAQ Screen Component
+ * Full-screen FAQ viewer with search functionality
+ * Uses design system tokens for theming
+ */
+
+import React, { useMemo } from 'react';
+import { View, ScrollView, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { useResponsiveDesignTokens, AtomicText, ScreenLayout } from '@umituz/react-native-design-system';
+import { FAQCategory } from '../../domain/entities/FAQEntity';
+import { useFAQSearch } from '../hooks/useFAQSearch';
+import { useFAQExpansion } from '../hooks/useFAQExpansion';
+import { FAQSearchBar, FAQSearchBarStyles } from '../components/FAQSearchBar';
+import { FAQEmptyState, FAQEmptyStateStyles } from '../components/FAQEmptyState';
+import { FAQCategoryComponent, FAQCategoryStyles } from '../components/FAQCategory';
+
+export interface FAQScreenStyles {
+  container?: ViewStyle;
+  header?: ViewStyle;
+  title?: TextStyle;
+  content?: ViewStyle;
+  searchBar?: FAQSearchBarStyles;
+  emptyState?: FAQEmptyStateStyles;
+  category?: FAQCategoryStyles;
+}
+
+export interface FAQScreenProps {
+  categories: FAQCategory[];
+  searchPlaceholder: string;
+  emptySearchTitle: string;
+  emptySearchMessage: string;
+  headerTitle: string;
+  onBack?: () => void;
+  renderHeader?: (props: { onBack: () => void }) => React.ReactElement | null;
+  styles?: FAQScreenStyles;
+}
+
+export const FAQScreen: React.FC<FAQScreenProps> = ({
+  categories,
+  searchPlaceholder,
+  emptySearchTitle,
+  emptySearchMessage,
+  headerTitle,
+  onBack,
+  renderHeader,
+  styles: customStyles,
+}) => {
+  const tokens = useResponsiveDesignTokens();
+  const { searchQuery, setSearchQuery, filteredCategories, hasResults } =
+    useFAQSearch(categories);
+  const { isExpanded, toggleExpansion } = useFAQExpansion();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          backgroundColor: tokens.colors.backgroundPrimary,
+        },
+        header: {
+          padding: tokens.spacing.md,
+          borderBottomWidth: 1,
+          borderBottomColor: tokens.colors.border,
+        },
+        content: {
+          flex: 1,
+        },
+      }),
+    [tokens]
+  );
+
+  const renderContent = () => {
+    if (searchQuery && !hasResults) {
+      return (
+        <FAQEmptyState
+          title={emptySearchTitle}
+          message={emptySearchMessage}
+          styles={customStyles?.emptyState}
+        />
+      );
+    }
+
+    return (
+      <ScrollView
+        style={[styles.content, customStyles?.content]}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={[styles.header, customStyles?.header]}>
+          <AtomicText type="headlineMedium" color="textPrimary" style={{ marginBottom: tokens.spacing.sm }}>
+            {headerTitle}
+          </AtomicText>
+          <FAQSearchBar
+            value={searchQuery}
+            onChangeText={setSearchQuery}
+            placeholder={searchPlaceholder}
+            styles={customStyles?.searchBar}
+          />
+        </View>
+
+        {filteredCategories.map((category) => (
+          <FAQCategoryComponent
+            key={category.id}
+            category={category}
+            isExpanded={isExpanded}
+            onToggleItem={toggleExpansion}
+            styles={customStyles?.category}
+          />
+        ))}
+      </ScrollView>
+    );
+  };
+
+  if (renderHeader) {
+    return (
+      <View style={[styles.container, customStyles?.container]}>
+        {renderHeader({ onBack: onBack || (() => { }) })}
+        {renderContent()}
+      </View>
+    );
+  }
+
+  return (
+    <ScreenLayout edges={['bottom']}>
+      <View style={[styles.container, customStyles?.container]}>
+        {renderContent()}
+      </View>
+    </ScreenLayout>
+  );
+};

package/src/domains/faqs/presentation/screens/index.ts

@@ -0,0 +1,2 @@
+export { FAQScreen } from "./FAQScreen";
+export type { FAQScreenProps } from "./FAQScreen";

package/src/domains/feedback/domain/entities/FeedbackEntity.ts

@@ -0,0 +1,92 @@
+/**
+ * Feedback Entity
+ */
+
+export type FeedbackType =
+  | 'general'
+  | 'bug_report'
+  | 'feature_request'
+  | 'improvement'
+  | 'other';
+
+export type FeedbackStatus = 'pending' | 'reviewed' | 'resolved' | 'closed';
+
+export type FeedbackRating = 1 | 2 | 3 | 4 | 5;
+
+export interface FeedbackEntity {
+  id: string;
+  userId: string | null;
+  userEmail?: string | null;
+  type: FeedbackType;
+  title: string;
+  description: string;
+  rating?: FeedbackRating;
+  status: FeedbackStatus;
+  deviceInfo?: {
+    platform: string;
+    osVersion: string;
+    appVersion: string;
+  };
+  metadata?: Record<string, unknown>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export function createFeedback(
+  userId: string | null,
+  type: FeedbackType,
+  title: string,
+  description: string,
+  userEmail?: string | null,
+  rating?: FeedbackRating,
+  deviceInfo?: FeedbackEntity['deviceInfo'],
+  metadata?: Record<string, unknown>
+): Omit<FeedbackEntity, 'id'> {
+  const now = new Date().toISOString();
+  return {
+    userId,
+    userEmail,
+    type,
+    title,
+    description,
+    rating,
+    status: 'pending',
+    deviceInfo,
+    metadata,
+    createdAt: now,
+    updatedAt: now,
+  };
+}
+
+export function getFeedbackTypeLabel(type: FeedbackType): string {
+  const labels: Record<FeedbackType, string> = {
+    general: 'General Feedback',
+    bug_report: 'Bug Report',
+    feature_request: 'Feature Request',
+    improvement: 'Improvement',
+    other: 'Other',
+  };
+  return labels[type] || 'Unknown';
+}
+
+export function getFeedbackTypeEmoji(type: FeedbackType): string {
+  const emojis: Record<FeedbackType, string> = {
+    general: '💬',
+    bug_report: '🐛',
+    feature_request: '✨',
+    improvement: '🔧',
+    other: '📝',
+  };
+  return emojis[type] || '📝';
+}
+
+export function getFeedbackTypeIcon(type: FeedbackType): string {
+  const icons: Record<FeedbackType, string> = {
+    general: 'message-circle',
+    bug_report: 'bug',
+    feature_request: 'sparkles',
+    improvement: 'wrench',
+    other: 'file-text',
+  };
+  return icons[type] || 'file-text';
+}

package/src/domains/feedback/domain/repositories/IFeedbackRepository.ts

@@ -0,0 +1,28 @@
+/**
+ * Feedback Repository Interface
+ */
+
+import type { FeedbackEntity } from '../entities/FeedbackEntity';
+
+export interface FeedbackError {
+  message: string;
+  code?: 'SUBMIT_FAILED' | 'FETCH_FAILED' | 'DELETE_FAILED' | 'VALIDATION_ERROR';
+}
+
+export type FeedbackResult<T> =
+  | {
+      success: true;
+      data: T;
+    }
+  | {
+      success: false;
+      error: FeedbackError;
+    };
+
+export interface IFeedbackRepository {
+  submitFeedback(
+    feedback: FeedbackEntity | Omit<FeedbackEntity, 'id'>
+  ): Promise<FeedbackResult<FeedbackEntity>>;
+  getUserFeedback(userId: string): Promise<FeedbackResult<FeedbackEntity[]>>;
+  deleteFeedback(feedbackId: string): Promise<FeedbackResult<boolean>>;
+}

package/src/domains/feedback/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Feedback Domain
+ * User feedback, bug reports
+ */
+
+export * from './presentation/screens/FeedbackScreen';

package/src/domains/feedback/presentation/components/FeedbackForm.tsx

@@ -0,0 +1,189 @@
+/**
+ * Feedback Form Component
+ * Form for submitting user feedback with type, rating, and description
+ */
+
+import React, { useState } from "react";
+import { View, StyleSheet, TouchableOpacity, ScrollView, TextInput } from "react-native";
+import { useResponsiveDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
+import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
+import { useFeedbackForm } from "../hooks/useFeedbackForm";
+
+export interface FeedbackFormProps {
+    onSubmit: (data: { type: FeedbackType; rating: FeedbackRating; description: string; title: string }) => Promise<void>;
+    texts: {
+        ratingLabel: string;
+        descriptionPlaceholder: string;
+        submitButton: string;
+        submittingButton: string;
+        feedbackTypes: Array<{ type: FeedbackType; label: string }>;
+        defaultTitle: (type: FeedbackType) => string;
+    };
+    initialType?: FeedbackType;
+    isSubmitting?: boolean;
+}
+
+export const FeedbackForm: React.FC<FeedbackFormProps> = ({
+    onSubmit,
+    texts,
+    initialType,
+    isSubmitting = false,
+}) => {
+    const tokens = useResponsiveDesignTokens();
+    const [selectedType, setSelectedType] = useState<FeedbackType>(initialType || texts.feedbackTypes[0].type);
+    const [rating, setRating] = useState<FeedbackRating>(5);
+    const [description, setDescription] = useState("");
+    const [title, setTitle] = useState("");
+
+    const handleSubmit = async () => {
+        if (!description.trim()) return;
+
+        await onSubmit({
+            type: selectedType,
+            rating,
+            description,
+            title: title || texts.defaultTitle(selectedType),
+        });
+    };
+
+    const renderRating = () => (
+        <View style={styles.ratingContainer}>
+            <AtomicText type="bodyMedium" style={{ marginBottom: 8, color: tokens.colors.textSecondary }}>
+                {texts.ratingLabel}
+            </AtomicText>
+            <View style={styles.stars}>
+                {[1, 2, 3, 4, 5].map((star) => (
+                    <TouchableOpacity
+                        key={star}
+                        onPress={() => setRating(star as FeedbackRating)}
+                        style={styles.starButton}
+                    >
+                        <AtomicIcon
+                            name={star <= rating ? "star" : "star-outline"}
+                            customSize={32}
+                            customColor={star <= rating ? tokens.colors.warning : tokens.colors.border}
+                        />
+                    </TouchableOpacity>
+                ))}
+            </View>
+        </View>
+    );
+
+    const renderTypeSelector = () => (
+        <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.typeScroll}
+            style={styles.typeContainer}
+        >
+            {texts.feedbackTypes.map((item) => {
+                const isSelected = selectedType === item.type;
+
+                return (
+                    <TouchableOpacity
+                        key={item.type}
+                        style={[
+                            styles.typeButton,
+                            {
+                                backgroundColor: isSelected ? tokens.colors.primary : tokens.colors.surface,
+                                borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+                            },
+                        ]}
+                        onPress={() => setSelectedType(item.type)}
+                    >
+                        <AtomicText
+                            type="bodySmall"
+                            style={{
+                                color: isSelected ? tokens.colors.onPrimary : tokens.colors.textSecondary,
+                                fontWeight: isSelected ? "600" : "400",
+                            }}
+                        >
+                            {item.label}
+                        </AtomicText>
+                    </TouchableOpacity>
+                );
+            })}
+        </ScrollView>
+    );
+
+    return (
+        <View style={styles.container}>
+            {renderTypeSelector()}
+
+            {renderRating()}
+
+            <View style={styles.inputContainer}>
+                <TextInput
+                    value={description}
+                    onChangeText={setDescription}
+                    placeholder={texts.descriptionPlaceholder}
+                    placeholderTextColor={tokens.colors.textTertiary}
+                    multiline
+                    numberOfLines={4}
+                    style={[
+                        styles.textArea,
+                        {
+                            color: tokens.colors.textPrimary,
+                            backgroundColor: tokens.colors.surface,
+                            borderColor: tokens.colors.border,
+                        }
+                    ]}
+                />
+            </View>
+
+            <AtomicButton
+                onPress={handleSubmit}
+                disabled={isSubmitting || !description.trim()}
+                style={styles.submitButton}
+            >
+                {isSubmitting ? texts.submittingButton : texts.submitButton}
+            </AtomicButton>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    typeContainer: {
+        marginBottom: 24,
+    },
+    typeScroll: {
+        gap: 8,
+    },
+    typeButton: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
+        borderWidth: 1,
+        gap: 6,
+    },
+    ratingContainer: {
+        alignItems: "center",
+        marginBottom: 24,
+    },
+    stars: {
+        flexDirection: "row",
+        gap: 8,
+    },
+    starButton: {
+        padding: 4,
+    },
+    inputContainer: {
+        marginBottom: 24,
+    },
+    textArea: {
+        textAlignVertical: "top",
+        minHeight: 120,
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 12,
+        fontSize: 16,
+    },
+    submitButton: {
+        width: "100%",
+    },
+});

package/src/domains/feedback/presentation/components/FeedbackModal.tsx

@@ -0,0 +1,111 @@
+/**
+ * Feedback Modal Component
+ * Modal wrapper for providing feedback
+ */
+
+import React from "react";
+import { Modal, View, StyleSheet, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useResponsiveDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+import { FeedbackForm } from "./FeedbackForm";
+import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
+
+export interface FeedbackModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onSubmit: (data: { type: FeedbackType; rating: FeedbackRating; description: string; title: string }) => Promise<void>;
+    initialType?: FeedbackType;
+    isSubmitting?: boolean;
+    title?: string;
+    subtitle?: string;
+    texts: any; // Type should ideally be shared or imported
+}
+
+export const FeedbackModal: React.FC<FeedbackModalProps> = ({
+    visible,
+    onClose,
+    onSubmit,
+    initialType,
+    isSubmitting,
+    title,
+    subtitle,
+    texts,
+}) => {
+    const tokens = useResponsiveDesignTokens();
+
+    return (
+        <Modal
+            visible={visible}
+            animationType="slide"
+            presentationStyle="pageSheet"
+            onRequestClose={onClose}
+        >
+            <SafeAreaView style={[styles.safeArea, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+                <KeyboardAvoidingView
+                    behavior={Platform.OS === "ios" ? "padding" : "height"}
+                    style={styles.keyboardView}
+                >
+                    <View style={[styles.header, { borderBottomColor: tokens.colors.border }]}>
+                        <View style={styles.headerText}>
+                            <AtomicText type="headlineSmall" style={{ color: tokens.colors.textPrimary }}>
+                                {title}
+                            </AtomicText>
+                            {subtitle && (
+                                <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary, marginTop: 4 }}>
+                                    {subtitle}
+                                </AtomicText>
+                            )}
+                        </View>
+                        <TouchableOpacity
+                            onPress={onClose}
+                            style={[styles.closeButton, { backgroundColor: tokens.colors.surface }]}
+                        >
+                            <AtomicIcon name="close" customSize={20} customColor={tokens.colors.textPrimary} />
+                        </TouchableOpacity>
+                    </View>
+
+                    <ScrollView
+                        contentContainerStyle={styles.content}
+                        keyboardShouldPersistTaps="handled"
+                    >
+                        <FeedbackForm
+                            onSubmit={onSubmit}
+                            initialType={initialType}
+                            isSubmitting={isSubmitting}
+                            texts={texts}
+                        />
+                    </ScrollView>
+                </KeyboardAvoidingView>
+            </SafeAreaView>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    safeArea: {
+        flex: 1,
+    },
+    keyboardView: {
+        flex: 1,
+    },
+    header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 16,
+        borderBottomWidth: 1,
+    },
+    headerText: {
+        flex: 1,
+    },
+    closeButton: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    content: {
+        padding: 20,
+    },
+});