@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/FAQScreen.js

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const sonner_1 = require("../../lib/sonner");
+const components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const OxyContext_1 = require("../context/OxyContext");
+const FAQScreen = ({ onClose, theme, goBack, }) => {
+    const { oxyServices } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(theme || 'light');
+    const [faqs, setFaqs] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [expandedIds, setExpandedIds] = (0, react_1.useState)(new Set());
+    const [selectedCategory, setSelectedCategory] = (0, react_1.useState)(null);
+    // Load FAQs from API
+    (0, react_1.useEffect)(() => {
+        const loadFAQs = async () => {
+            try {
+                setIsLoading(true);
+                const data = await oxyServices.getFAQs();
+                setFaqs(data);
+            }
+            catch (error) {
+                sonner_1.toast.error(t('faq.loadError') || 'Failed to load FAQs');
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        loadFAQs();
+    }, [oxyServices, t]);
+    // Get unique categories
+    const categories = (0, react_1.useMemo)(() => {
+        const cats = [...new Set(faqs.map(f => f.category))];
+        return cats.sort();
+    }, [faqs]);
+    // Filter FAQs based on search and category
+    const filteredFaqs = (0, react_1.useMemo)(() => {
+        let result = faqs;
+        if (selectedCategory) {
+            result = result.filter(f => f.category === selectedCategory);
+        }
+        if (searchQuery.trim()) {
+            const query = searchQuery.toLowerCase();
+            result = result.filter(f => f.question.toLowerCase().includes(query) ||
+                f.answer.toLowerCase().includes(query));
+        }
+        return result;
+    }, [faqs, searchQuery, selectedCategory]);
+    const toggleExpanded = (0, react_1.useCallback)((id) => {
+        setExpandedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+    const styles = (0, react_1.useMemo)(() => createStyles(themeStyles), [themeStyles]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: t('faq.title') || 'FAQ', onBack: goBack || onClose, variant: "minimal", elevation: "subtle" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.searchContainer, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.searchInputWrapper, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor: themeStyles.borderColor }], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "search", size: 20, color: themeStyles.mutedTextColor, style: styles.searchIcon }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles.searchInput, { color: themeStyles.textColor }], placeholder: t('faq.searchPlaceholder') || 'Search FAQs...', placeholderTextColor: themeStyles.mutedTextColor, value: searchQuery, onChangeText: setSearchQuery, accessibilityLabel: "Search FAQs" }), searchQuery.length > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => setSearchQuery(''), accessibilityRole: "button", accessibilityLabel: "Clear search", children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close-circle", size: 20, color: themeStyles.mutedTextColor }) }))] }) }), categories.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.categoriesContainer, contentContainerStyle: styles.categoriesContent, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                            styles.categoryChip,
+                            !selectedCategory && styles.categoryChipActive,
+                            { backgroundColor: !selectedCategory ? themeStyles.primaryColor : themeStyles.secondaryBackgroundColor }
+                        ], onPress: () => setSelectedCategory(null), accessibilityRole: "button", accessibilityLabel: "Show all categories", accessibilityState: { selected: !selectedCategory }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                styles.categoryChipText,
+                                { color: !selectedCategory ? '#FFFFFF' : themeStyles.textColor }
+                            ], children: t('faq.allCategories') || 'All' }) }), categories.map(cat => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                            styles.categoryChip,
+                            selectedCategory === cat && styles.categoryChipActive,
+                            { backgroundColor: selectedCategory === cat ? themeStyles.primaryColor : themeStyles.secondaryBackgroundColor }
+                        ], onPress: () => setSelectedCategory(cat), accessibilityRole: "button", accessibilityLabel: `Filter by ${cat}`, accessibilityState: { selected: selectedCategory === cat }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                styles.categoryChipText,
+                                { color: selectedCategory === cat ? '#FFFFFF' : themeStyles.textColor }
+                            ], children: cat }) }, cat)))] })), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.content, showsVerticalScrollIndicator: false, children: isLoading ? ((0, jsx_runtime_1.jsx)(components_1.LoadingState, { message: t('faq.loading') || 'Loading FAQs...', color: themeStyles.textColor })) : filteredFaqs.length === 0 ? ((0, jsx_runtime_1.jsx)(components_1.EmptyState, { message: searchQuery ? (t('faq.noResults') || 'No FAQs match your search') : (t('faq.empty') || 'No FAQs available'), textColor: themeStyles.textColor })) : (filteredFaqs.map((faq, index) => {
+                    const isExpanded = expandedIds.has(faq.id);
+                    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                            styles.faqItem,
+                            { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor: themeStyles.borderColor },
+                            index === 0 && styles.faqItemFirst,
+                        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles.faqQuestion, onPress: () => toggleExpanded(faq.id), accessibilityRole: "button", accessibilityLabel: faq.question, accessibilityHint: isExpanded ? 'Collapse answer' : 'Expand answer', accessibilityState: { expanded: isExpanded }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.faqQuestionText, { color: themeStyles.textColor }], children: faq.question }), (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: isExpanded ? 'chevron-up' : 'chevron-down', size: 20, color: themeStyles.mutedTextColor })] }), isExpanded && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.faqAnswer, { borderTopColor: themeStyles.borderColor }], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.faqAnswerText, { color: themeStyles.mutedTextColor }], children: faq.answer }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.faqCategory, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "pricetag-outline", size: 14, color: themeStyles.primaryColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.faqCategoryText, { color: themeStyles.primaryColor }], children: faq.category })] })] }))] }, faq.id));
+                })) })] }));
+};
+const createStyles = (themeStyles) => react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    searchContainer: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    searchInputWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 12,
+        borderWidth: 1,
+        paddingHorizontal: 12,
+        height: 44,
+    },
+    searchIcon: {
+        marginRight: 8,
+    },
+    searchInput: {
+        flex: 1,
+        fontSize: 16,
+        ...react_native_1.Platform.select({
+            // outlineStyle: 'none' is a valid web CSS property not in React Native's TextStyle definition
+            web: { outlineStyle: 'none' },
+        }),
+    },
+    categoriesContainer: {
+        maxHeight: 50,
+    },
+    categoriesContent: {
+        paddingHorizontal: 16,
+        gap: 8,
+    },
+    categoryChip: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
+        marginRight: 8,
+    },
+    categoryChipActive: {},
+    categoryChipText: {
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    faqItem: {
+        borderRadius: 12,
+        borderWidth: 1,
+        marginBottom: 12,
+        overflow: 'hidden',
+    },
+    faqItemFirst: {
+        marginTop: 0,
+    },
+    faqQuestion: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: 16,
+    },
+    faqQuestionText: {
+        flex: 1,
+        fontSize: 16,
+        fontWeight: '600',
+        marginRight: 12,
+    },
+    faqAnswer: {
+        padding: 16,
+        paddingTop: 12,
+        borderTopWidth: 1,
+    },
+    faqAnswerText: {
+        fontSize: 14,
+        lineHeight: 22,
+    },
+    faqCategory: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 12,
+    },
+    faqCategoryText: {
+        fontSize: 12,
+        marginLeft: 6,
+        fontWeight: '500',
+    },
+});
+exports.default = FAQScreen;

package/src/ui/screens/FeedbackScreen.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+declare const FeedbackScreen: React.FC<BaseScreenProps>;
+export default FeedbackScreen;

package/src/ui/screens/FeedbackScreen.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const styles_1 = require("../styles");
+const themeUtils_1 = require("../utils/themeUtils");
+const vector_icons_1 = require("@expo/vector-icons");
+const sonner_1 = require("../../lib/sonner");
+const core_1 = require("@oxyhq/core");
+const components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const OxyContext_1 = require("../context/OxyContext");
+const feedback_1 = require("../components/feedback");
+const FeedbackScreen = ({ navigate, goBack, onClose, theme, }) => {
+    const { user, oxyServices } = (0, OxyContext_1.useOxy)();
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const colors = (0, styles_1.useThemeColors)(normalizedTheme);
+    const { t } = (0, useI18n_1.useI18n)();
+    const { feedbackData, feedbackState, setFeedbackState, updateField, resetForm } = (0, feedback_1.useFeedbackForm)();
+    const [currentStep, setCurrentStep] = (0, react_1.useState)(0);
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
+    const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const slideAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const styles = (0, react_1.useMemo)(() => (0, feedback_1.createFeedbackStyles)(colors), [colors]);
+    const animateTransition = (0, react_1.useCallback)((nextStep) => {
+        react_native_1.Animated.timing(fadeAnim, {
+            toValue: 0,
+            duration: 250,
+            useNativeDriver: react_native_1.Platform.OS !== 'web',
+        }).start(() => {
+            setCurrentStep(nextStep);
+            slideAnim.setValue(-100);
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.timing(fadeAnim, {
+                    toValue: 1,
+                    duration: 250,
+                    useNativeDriver: react_native_1.Platform.OS !== 'web',
+                }),
+                react_native_1.Animated.timing(slideAnim, {
+                    toValue: 0,
+                    duration: 300,
+                    useNativeDriver: react_native_1.Platform.OS !== 'web',
+                })
+            ]).start();
+        });
+    }, [fadeAnim, slideAnim]);
+    const nextStep = (0, react_1.useCallback)(() => {
+        if (currentStep < 3) {
+            animateTransition(currentStep + 1);
+        }
+    }, [currentStep, animateTransition]);
+    const prevStep = (0, react_1.useCallback)(() => {
+        if (currentStep > 0) {
+            animateTransition(currentStep - 1);
+        }
+    }, [currentStep, animateTransition]);
+    const isTypeStepValid = (0, react_1.useCallback)(() => {
+        return feedbackData.type && feedbackData.category;
+    }, [feedbackData.type, feedbackData.category]);
+    const isDetailsStepValid = (0, react_1.useCallback)(() => {
+        return feedbackData.title.trim() && feedbackData.description.trim();
+    }, [feedbackData.title, feedbackData.description]);
+    const isContactStepValid = (0, react_1.useCallback)(() => {
+        return feedbackData.contactEmail.trim() || user?.email;
+    }, [feedbackData.contactEmail, user?.email]);
+    const handleSubmitFeedback = (0, react_1.useCallback)(async () => {
+        if (!isTypeStepValid() || !isDetailsStepValid() || !isContactStepValid()) {
+            sonner_1.toast.error(t('feedback.toasts.fillRequired') || 'Please fill in all required fields');
+            return;
+        }
+        try {
+            setFeedbackState({ status: 'submitting', message: '' });
+            setErrorMessage('');
+            const feedbackPayload = {
+                type: feedbackData.type,
+                title: feedbackData.title,
+                description: feedbackData.description,
+                priority: feedbackData.priority,
+                category: feedbackData.category,
+                contactEmail: feedbackData.contactEmail || user?.email,
+                systemInfo: feedbackData.systemInfo ? {
+                    platform: react_native_1.Platform.OS,
+                    version: react_native_1.Platform.Version?.toString() || 'Unknown',
+                    appVersion: core_1.packageInfo.version,
+                    userId: user?.id,
+                    username: user?.username,
+                    timestamp: new Date().toISOString(),
+                } : undefined,
+            };
+            await oxyServices.submitFeedback(feedbackPayload);
+            setFeedbackState({ status: 'success', message: t('feedback.toasts.submitSuccess') || 'Feedback submitted successfully!' });
+            sonner_1.toast.success(t('feedback.toasts.thanks') || 'Thank you for your feedback!');
+            setTimeout(() => {
+                resetForm();
+                setCurrentStep(0);
+            }, 3000);
+        }
+        catch (error) {
+            setFeedbackState({ status: 'error', message: (error instanceof Error ? error.message : null) || (t('feedback.toasts.submitFailed') || 'Failed to submit feedback') });
+            sonner_1.toast.error((error instanceof Error ? error.message : null) || (t('feedback.toasts.submitFailed') || 'Failed to submit feedback'));
+        }
+    }, [feedbackData, user, isTypeStepValid, isDetailsStepValid, isContactStepValid, resetForm, setFeedbackState, t]);
+    const feedbackTypeItems = (0, react_1.useMemo)(() => feedback_1.FEEDBACK_TYPES.map(type => ({
+        id: type.id,
+        icon: type.icon,
+        iconColor: type.color,
+        title: type.label,
+        subtitle: type.description,
+        onPress: () => { updateField('type', type.id); updateField('category', ''); },
+        selected: feedbackData.type === type.id,
+        showChevron: false,
+        multiRow: true,
+        dense: true,
+    })), [feedbackData.type, updateField]);
+    const categoryItems = (0, react_1.useMemo)(() => (feedbackData.type ? (feedback_1.CATEGORIES[feedbackData.type] || []).map(cat => ({
+        id: cat,
+        icon: feedbackData.category === cat ? 'check-circle' : 'ellipse-outline',
+        iconColor: feedbackData.category === cat ? colors.primary : colors.secondaryText,
+        title: cat,
+        onPress: () => updateField('category', cat),
+        selected: feedbackData.category === cat,
+        showChevron: false,
+        dense: true,
+    })) : []), [feedbackData.type, feedbackData.category, colors.primary, colors.secondaryText, updateField]);
+    const priorityItems = (0, react_1.useMemo)(() => feedback_1.PRIORITY_LEVELS.map(p => ({
+        id: p.id,
+        icon: p.icon,
+        iconColor: p.color,
+        title: p.label,
+        onPress: () => updateField('priority', p.id),
+        selected: feedbackData.priority === p.id,
+        showChevron: false,
+        dense: true,
+    })), [feedbackData.priority, updateField]);
+    const renderTypeStep = () => ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modernHeader, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.stepTitle, { color: colors.text }], children: t('feedback.type.title') || 'What type of feedback?' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.modernSubtitle, { color: colors.secondaryText }], children: t('feedback.type.subtitle') || 'Choose the category that best describes your feedback' })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fullBleed, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: feedbackTypeItems }) }), feedbackData.type && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.categoryContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.modernLabel, { color: colors.secondaryText, marginBottom: 8 }], children: t('feedback.category.label') || 'Category' }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fullBleed, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: categoryItems }) })] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.navigationButtons, children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.navButton, { backgroundColor: 'transparent', borderColor: colors.border, borderRadius: 35 }], onPress: goBack, accessibilityRole: "button", accessibilityLabel: "Go back", children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-back", size: 16, color: colors.text }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.navButtonText, { color: colors.text }], children: t('common.actions.back') || 'Back' })] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.navButton, { backgroundColor: colors.primary, borderColor: colors.primary, borderRadius: 35 }], onPress: nextStep, disabled: !isTypeStepValid(), accessibilityRole: "button", accessibilityLabel: "Continue to next step", children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.navButtonText, { color: '#FFFFFF' }], children: t('common.actions.next') || 'Next' }), (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-forward", size: 16, color: "#FFFFFF" })] })] })] }));
+    const renderDetailsStep = () => ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modernHeader, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.stepTitle, { color: colors.text }], children: t('feedback.details.title') || 'Tell us more' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.modernSubtitle, { color: colors.secondaryText }], children: t('feedback.details.subtitle') || 'Provide details about your feedback' })] }), (0, jsx_runtime_1.jsx)(feedback_1.FormInput, { icon: "create-outline", label: t('feedback.fields.title.label') || 'Title', value: feedbackData.title, onChangeText: (text) => { updateField('title', text); setErrorMessage(''); }, placeholder: t('feedback.fields.title.placeholder') || 'Brief summary of your feedback', testID: "feedback-title-input", colors: colors, styles: styles, accessibilityLabel: "Feedback title", accessibilityHint: "Enter a brief summary of your feedback" }), (0, jsx_runtime_1.jsx)(feedback_1.FormInput, { icon: "document-text-outline", label: t('feedback.fields.description.label') || 'Description', value: feedbackData.description, onChangeText: (text) => { updateField('description', text); setErrorMessage(''); }, placeholder: t('feedback.fields.description.placeholder') || 'Please provide detailed information...', multiline: true, numberOfLines: 6, testID: "feedback-description-input", colors: colors, styles: styles, accessibilityLabel: "Feedback description", accessibilityHint: "Provide detailed information about your feedback" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { marginBottom: 24 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.modernLabel, { color: colors.secondaryText, marginBottom: 8 }], children: t('feedback.priority.label') || 'Priority Level' }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fullBleed, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: priorityItems }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.navigationButtons, children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.navButton, styles.backButton, { borderColor: colors.border }], onPress: prevStep, accessibilityRole: "button", accessibilityLabel: "Go back", children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-back", size: 16, color: colors.text }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.navButtonText, { color: colors.text }], children: t('common.actions.back') || 'Back' })] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.navButton, styles.nextButton, { backgroundColor: colors.primary, borderColor: colors.primary }], onPress: nextStep, disabled: !isDetailsStepValid(), accessibilityRole: "button", accessibilityLabel: "Continue to next step", children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.navButtonText, { color: '#FFFFFF' }], children: t('common.actions.next') || 'Next' }), (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-forward", size: 16, color: "#FFFFFF" })] })] })] }));
+    const renderContactStep = () => ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modernHeader, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.stepTitle, { color: colors.text }], children: t('feedback.contact.title') || 'Contact Information' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.modernSubtitle, { color: colors.secondaryText }], children: t('feedback.contact.subtitle') || 'Help us get back to you' })] }), (0, jsx_runtime_1.jsx)(feedback_1.FormInput, { icon: "mail-outline", label: t('feedback.fields.email.label') || 'Email Address', value: feedbackData.contactEmail, onChangeText: (text) => { updateField('contactEmail', text); setErrorMessage(''); }, placeholder: user?.email || (t('feedback.fields.email.placeholder') || 'Enter your email address'), testID: "feedback-email-input", colors: colors, styles: styles, accessibilityLabel: "Email address", accessibilityHint: "Enter your email so we can respond" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.checkboxContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                            styles.checkbox,
+                            {
+                                borderColor: feedbackData.systemInfo ? colors.primary : colors.border,
+                                backgroundColor: feedbackData.systemInfo ? colors.primary : 'transparent',
+                            }
+                        ], onPress: () => updateField('systemInfo', !feedbackData.systemInfo), accessibilityRole: "checkbox", accessibilityState: { checked: feedbackData.systemInfo }, accessibilityLabel: "Include system information", children: feedbackData.systemInfo && (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "checkmark", size: 16, color: "#FFFFFF" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.checkboxText, { color: colors.text }], children: t('feedback.contact.includeSystemInfo') || 'Include system information to help us better understand your issue' })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.navigationButtons, children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.navButton, styles.backButton, { borderColor: colors.border }], onPress: prevStep, accessibilityRole: "button", accessibilityLabel: "Go back", children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-back", size: 16, color: colors.text }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.navButtonText, { color: colors.text }], children: "Back" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.navButton, styles.nextButton, { backgroundColor: colors.primary, borderColor: colors.primary }], onPress: nextStep, disabled: !isContactStepValid(), accessibilityRole: "button", accessibilityLabel: "Continue to summary", children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.navButtonText, { color: '#FFFFFF' }], children: "Next" }), (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-forward", size: 16, color: "#FFFFFF" })] })] })] }));
+    const renderSummaryStep = () => ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modernHeader, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.stepTitle, { color: colors.text }], children: t('feedback.summary.title') || 'Summary' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.modernSubtitle, { color: colors.secondaryText }], children: t('feedback.summary.subtitle') || 'Please review your feedback before submitting' })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryContainer, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.summaryLabel, { color: colors.secondaryText }], children: "Type:" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.summaryValue, { color: colors.text }], children: feedback_1.FEEDBACK_TYPES.find(t => t.id === feedbackData.type)?.label })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.summaryLabel, { color: colors.secondaryText }], children: "Category:" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.summaryValue, { color: colors.text }], children: feedbackData.category })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.summaryLabel, { color: colors.secondaryText }], children: "Priority:" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.summaryValue, { color: colors.text }], children: feedback_1.PRIORITY_LEVELS.find(p => p.id === feedbackData.priority)?.label })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.summaryLabel, { color: colors.secondaryText }], children: "Title:" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.summaryValue, { color: colors.text }], children: feedbackData.title })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.summaryLabel, { color: colors.secondaryText }], children: "Contact:" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.summaryValue, { color: colors.text }], children: feedbackData.contactEmail || user?.email })] })] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.button, { backgroundColor: colors.primary }], onPress: handleSubmitFeedback, disabled: feedbackState.status === 'submitting', testID: "submit-feedback-button", accessibilityRole: "button", accessibilityLabel: "Submit feedback", children: feedbackState.status === 'submitting' ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: "#FFFFFF", size: "small" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.buttonText, children: t('feedback.actions.submit') || 'Submit Feedback' }), (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "send", size: 20, color: "#FFFFFF" })] })) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.navigationButtons, children: (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.navButton, { backgroundColor: 'transparent', borderColor: colors.border, borderRadius: 35 }], onPress: prevStep, accessibilityRole: "button", accessibilityLabel: "Go back", children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-back", size: 16, color: colors.text }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.navButtonText, { color: colors.text }], children: t('common.actions.back') || 'Back' })] }) })] }));
+    const renderSuccessStep = () => ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.successContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.successIcon, { backgroundColor: `${colors.success || '#34C759'}20`, padding: 24, borderRadius: 50 }], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "checkmark-circle", size: 48, color: colors.success || '#34C759' }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.successTitle, { color: colors.text }], children: t('feedback.success.thanks') || 'Thank You!' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.successMessage, { color: colors.secondaryText }], children: t('feedback.success.message') || "Your feedback has been submitted successfully. We'll review it and get back to you soon." }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.button, { backgroundColor: colors.primary }], onPress: () => { resetForm(); setCurrentStep(0); }, accessibilityRole: "button", accessibilityLabel: "Submit another feedback", children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.buttonText, children: t('feedback.actions.submitAnother') || 'Submit Another' }) })] }) }));
+    const renderCurrentStep = () => {
+        if (feedbackState.status === 'success')
+            return renderSuccessStep();
+        switch (currentStep) {
+            case 0: return renderTypeStep();
+            case 1: return renderDetailsStep();
+            case 2: return renderContactStep();
+            case 3: return renderSummaryStep();
+            default: return renderTypeStep();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.KeyboardAvoidingView, { style: [styles.container, { backgroundColor: theme === 'dark' ? colors.background : '#F7F9FC' }], behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', children: [(0, jsx_runtime_1.jsx)(react_native_1.StatusBar, { barStyle: theme === 'dark' ? 'light-content' : 'dark-content', backgroundColor: theme === 'dark' ? colors.background : '#F7F9FC' }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { contentContainerStyle: [styles.scrollContent, { backgroundColor: 'transparent' }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: [feedbackState.status !== 'success' && ((0, jsx_runtime_1.jsx)(feedback_1.ProgressIndicator, { currentStep: currentStep, totalSteps: 4, colors: colors, styles: styles })), renderCurrentStep()] })] }));
+};
+exports.default = FeedbackScreen;

package/src/ui/screens/FileManagementScreen.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FileManagementScreenProps } from '../types/fileManagement';
+declare const FileManagementScreen: React.FC<FileManagementScreenProps>;
+export default FileManagementScreen;