@oxyhq/services 5.17.18 → 5.18.0

package/src/ui/components/feedback/ProgressIndicator.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { FeedbackColors } from './types';
+
+interface ProgressIndicatorProps {
+    currentStep: number;
+    totalSteps: number;
+    colors: FeedbackColors;
+    styles: any;
+}
+
+const ProgressIndicator: React.FC<ProgressIndicatorProps> = React.memo(({
+    currentStep,
+    totalSteps,
+    colors,
+    styles,
+}) => (
+    <View style={styles.progressContainer} accessibilityRole="progressbar" accessibilityLabel={`Step ${currentStep + 1} of ${totalSteps}`}>
+        {Array.from({ length: totalSteps }, (_, index) => (
+            <View
+                key={index}
+                style={[
+                    styles.progressDot,
+                    currentStep === index ?
+                        { backgroundColor: colors.primary, width: 24 } :
+                        { backgroundColor: colors.border }
+                ]}
+            />
+        ))}
+    </View>
+));
+
+ProgressIndicator.displayName = 'ProgressIndicator';
+
+export default ProgressIndicator;

package/src/ui/components/feedback/constants.ts

@@ -0,0 +1,22 @@
+import type { FeedbackType, PriorityLevel } from './types';
+
+export const FEEDBACK_TYPES: FeedbackType[] = [
+    { id: 'bug', label: 'Bug Report', icon: 'bug', color: '#FF3B30', description: 'Report a problem or issue' },
+    { id: 'feature', label: 'Feature Request', icon: 'bulb', color: '#007AFF', description: 'Suggest a new feature' },
+    { id: 'general', label: 'General Feedback', icon: 'chatbubble', color: '#34C759', description: 'Share your thoughts' },
+    { id: 'support', label: 'Support Request', icon: 'help-circle', color: '#FF9500', description: 'Get help with something' },
+];
+
+export const PRIORITY_LEVELS: PriorityLevel[] = [
+    { id: 'low', label: 'Low', icon: 'arrow-down', color: '#34C759' },
+    { id: 'medium', label: 'Medium', icon: 'remove', color: '#FF9500' },
+    { id: 'high', label: 'High', icon: 'arrow-up', color: '#FF3B30' },
+    { id: 'critical', label: 'Critical', icon: 'warning', color: '#FF0000' },
+];
+
+export const CATEGORIES: Record<string, string[]> = {
+    bug: ['UI/UX', 'Performance', 'Authentication', 'File Management', 'Billing', 'Other'],
+    feature: ['User Interface', 'File Management', 'Security', 'Performance', 'Integration', 'Other'],
+    general: ['User Experience', 'Design', 'Performance', 'Documentation', 'Other'],
+    support: ['Account Issues', 'Billing', 'Technical Problems', 'Feature Questions', 'Other'],
+};

package/src/ui/components/feedback/feedbackStyles.ts

@@ -0,0 +1,247 @@
+import { StyleSheet, Platform, Dimensions } from 'react-native';
+import { screenContentStyle } from '../../constants/spacing';
+import type { FeedbackColors } from './types';
+
+export const createFeedbackStyles = (colors: FeedbackColors) => StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    fullBleed: {
+        width: '100%',
+        alignSelf: 'stretch',
+    },
+    scrollContent: {
+        flexGrow: 1,
+        ...screenContentStyle,
+    },
+    stepContainer: {
+        flex: 1,
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+    },
+    modernHeader: {
+        alignItems: 'flex-start',
+        width: '100%',
+        marginBottom: 24,
+    },
+    stepTitle: {
+        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+        fontSize: 42,
+        lineHeight: 48,
+        marginBottom: 12,
+        textAlign: 'left',
+        letterSpacing: -1,
+    },
+    modernSubtitle: {
+        fontSize: 18,
+        lineHeight: 24,
+        textAlign: 'left',
+        opacity: 0.8,
+        marginBottom: 24,
+    },
+    inputContainer: {
+        width: '100%',
+        marginBottom: 24,
+    },
+    premiumInputWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 56,
+        borderRadius: 16,
+        paddingHorizontal: 20,
+        borderWidth: 2,
+        backgroundColor: colors.inputBackground,
+    },
+    textAreaWrapper: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        minHeight: 120,
+        borderRadius: 16,
+        paddingHorizontal: 20,
+        paddingVertical: 16,
+        borderWidth: 2,
+        backgroundColor: colors.inputBackground,
+    },
+    inputIcon: {
+        marginRight: 12,
+    },
+    inputContent: {
+        flex: 1,
+    },
+    modernLabel: {
+        fontSize: 12,
+        fontWeight: '500',
+        marginBottom: 2,
+    },
+    modernInput: {
+        flex: 1,
+        fontSize: 16,
+        height: '100%',
+    },
+    textArea: {
+        flex: 1,
+        fontSize: 16,
+        textAlignVertical: 'top',
+        minHeight: 80,
+    },
+    categoryContainer: {
+        marginBottom: 24,
+    },
+    checkboxContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 24,
+    },
+    checkbox: {
+        width: 24,
+        height: 24,
+        borderRadius: 6,
+        borderWidth: 2,
+        marginRight: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    checkboxText: {
+        fontSize: 16,
+        flex: 1,
+    },
+    button: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 18,
+        paddingHorizontal: 32,
+        borderRadius: 16,
+        marginVertical: 8,
+        gap: 8,
+        width: '100%',
+        ...Platform.select({
+            web: {
+                boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+            },
+            default: {
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: 0.3,
+                shadowRadius: 8,
+                elevation: 6,
+            }
+        }),
+    },
+    buttonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+        letterSpacing: 0.5,
+    },
+    navigationButtons: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginTop: 16,
+        marginBottom: 8,
+        width: '100%',
+        gap: 8,
+    },
+    navButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        gap: 6,
+        minWidth: 70,
+        borderWidth: 1,
+        ...Platform.select({
+            web: {
+                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            },
+            default: {
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.1,
+                shadowRadius: 4,
+                elevation: 2,
+            }
+        }),
+    },
+    backButton: {
+        backgroundColor: 'transparent',
+        borderTopLeftRadius: 35,
+        borderBottomLeftRadius: 35,
+        borderTopRightRadius: 12,
+        borderBottomRightRadius: 12,
+    },
+    nextButton: {
+        backgroundColor: 'transparent',
+        borderTopRightRadius: 35,
+        borderBottomRightRadius: 35,
+        borderTopLeftRadius: 12,
+        borderBottomLeftRadius: 12,
+    },
+    navButtonText: {
+        fontSize: 13,
+        fontWeight: '500',
+    },
+    progressContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginBottom: 20,
+        marginTop: 8,
+    },
+    progressDot: {
+        height: 10,
+        width: 10,
+        borderRadius: 5,
+        marginHorizontal: 6,
+        borderWidth: 2,
+        borderColor: '#fff',
+        ...Platform.select({
+            web: {
+                boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
+            },
+            default: {
+                shadowColor: colors.primary,
+                shadowOpacity: 0.08,
+                shadowOffset: { width: 0, height: 1 },
+                shadowRadius: 2,
+                elevation: 1,
+            }
+        }),
+    },
+    summaryContainer: {
+        padding: 0,
+        marginBottom: 24,
+        width: '100%',
+    },
+    summaryRow: {
+        flexDirection: 'row',
+        marginBottom: 10,
+    },
+    summaryLabel: {
+        fontSize: 15,
+        width: 90,
+    },
+    summaryValue: {
+        fontSize: 15,
+        fontWeight: '600',
+        flex: 1,
+    },
+    successContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 40,
+    },
+    successIcon: {
+        marginBottom: 24,
+    },
+    successTitle: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginBottom: 12,
+        textAlign: 'center',
+    },
+    successMessage: {
+        fontSize: 16,
+        textAlign: 'center',
+        opacity: 0.8,
+        marginBottom: 24,
+    },
+});

package/src/ui/components/feedback/index.ts

@@ -0,0 +1,6 @@
+export { default as FormInput } from './FormInput';
+export { default as ProgressIndicator } from './ProgressIndicator';
+export { useFeedbackForm } from './useFeedbackForm';
+export { createFeedbackStyles } from './feedbackStyles';
+export { FEEDBACK_TYPES, PRIORITY_LEVELS, CATEGORIES } from './constants';
+export type { FeedbackData, FeedbackState, FeedbackColors, FeedbackStepAnimations, FeedbackType, PriorityLevel, User } from './types';

package/src/ui/components/feedback/types.ts

@@ -0,0 +1,52 @@
+import type { Animated } from 'react-native';
+
+export interface FeedbackData {
+    type: 'bug' | 'feature' | 'general' | 'support';
+    title: string;
+    description: string;
+    priority: 'low' | 'medium' | 'high' | 'critical';
+    category: string;
+    contactEmail: string;
+    systemInfo: boolean;
+}
+
+export interface FeedbackState {
+    status: 'idle' | 'submitting' | 'success' | 'error';
+    message: string;
+}
+
+export interface FeedbackType {
+    id: string;
+    label: string;
+    icon: string;
+    color: string;
+    description: string;
+}
+
+export interface PriorityLevel {
+    id: string;
+    label: string;
+    icon: string;
+    color: string;
+}
+
+export interface FeedbackColors {
+    primary: string;
+    text: string;
+    secondaryText: string;
+    border: string;
+    background: string;
+    inputBackground: string;
+    success?: string;
+}
+
+export interface FeedbackStepAnimations {
+    fadeAnim: Animated.Value;
+    slideAnim: Animated.Value;
+}
+
+export interface User {
+    id?: string;
+    email?: string;
+    username?: string;
+}

package/src/ui/components/feedback/useFeedbackForm.ts

@@ -0,0 +1,44 @@
+import { useState, useCallback } from 'react';
+import type { FeedbackData, FeedbackState } from './types';
+
+export const useFeedbackForm = () => {
+    const [feedbackData, setFeedbackData] = useState<FeedbackData>({
+        type: 'general',
+        title: '',
+        description: '',
+        priority: 'medium',
+        category: '',
+        contactEmail: '',
+        systemInfo: true,
+    });
+
+    const [feedbackState, setFeedbackState] = useState<FeedbackState>({
+        status: 'idle',
+        message: ''
+    });
+
+    const updateField = useCallback(<K extends keyof FeedbackData>(field: K, value: FeedbackData[K]) => {
+        setFeedbackData(prev => ({ ...prev, [field]: value }));
+    }, []);
+
+    const resetForm = useCallback(() => {
+        setFeedbackData({
+            type: 'general',
+            title: '',
+            description: '',
+            priority: 'medium',
+            category: '',
+            contactEmail: '',
+            systemInfo: true,
+        });
+        setFeedbackState({ status: 'idle', message: '' });
+    }, []);
+
+    return {
+        feedbackData,
+        feedbackState,
+        setFeedbackState,
+        updateField,
+        resetForm
+    };
+};

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -0,0 +1,294 @@
+import React, { useState, useCallback } from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    StyleSheet,
+    Modal,
+    ActivityIndicator,
+    KeyboardAvoidingView,
+    Platform,
+} from 'react-native';
+import OxyIcon from '../icon/OxyIcon';
+
+interface DeleteAccountModalProps {
+    visible: boolean;
+    username: string;
+    onClose: () => void;
+    onDelete: (password: string) => Promise<void>;
+    colors: {
+        background: string;
+        text: string;
+        secondaryText: string;
+        border: string;
+        danger: string;
+        inputBackground: string;
+    };
+    t: (key: string, params?: Record<string, string>) => string | undefined;
+}
+
+const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
+    visible,
+    username,
+    onClose,
+    onDelete,
+    colors,
+    t,
+}) => {
+    const [password, setPassword] = useState('');
+    const [confirmUsername, setConfirmUsername] = useState('');
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [showPassword, setShowPassword] = useState(false);
+
+    const isValid = password.length > 0 && confirmUsername === username;
+
+    const handleDelete = useCallback(async () => {
+        if (!isValid) return;
+
+        setError(null);
+        setIsDeleting(true);
+
+        try {
+            await onDelete(password);
+            // Modal will be closed by parent on success
+        } catch (err: any) {
+            setError(err?.message || t('deleteAccount.error') || 'Failed to delete account');
+        } finally {
+            setIsDeleting(false);
+        }
+    }, [isValid, password, onDelete, t]);
+
+    const handleClose = useCallback(() => {
+        if (isDeleting) return;
+        setPassword('');
+        setConfirmUsername('');
+        setError(null);
+        onClose();
+    }, [isDeleting, onClose]);
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="fade"
+            onRequestClose={handleClose}
+        >
+            <KeyboardAvoidingView
+                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                style={styles.overlay}
+            >
+                <TouchableOpacity
+                    style={styles.backdrop}
+                    activeOpacity={1}
+                    onPress={handleClose}
+                />
+                <View style={[styles.modal, { backgroundColor: colors.background }]}>
+                    <View style={styles.header}>
+                        <OxyIcon name="alert" size={32} color={colors.danger} />
+                        <Text style={[styles.title, { color: colors.danger }]}>
+                            {t('deleteAccount.title') || 'Delete Account'}
+                        </Text>
+                    </View>
+
+                    <Text style={[styles.warning, { color: colors.text }]}>
+                        {t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
+                    </Text>
+
+                    {error && (
+                        <View style={[styles.errorContainer, { backgroundColor: colors.danger + '20' }]}>
+                            <Text style={[styles.errorText, { color: colors.danger }]}>
+                                {error}
+                            </Text>
+                        </View>
+                    )}
+
+                    <View style={styles.inputGroup}>
+                        <Text style={[styles.label, { color: colors.secondaryText }]}>
+                            {t('deleteAccount.passwordLabel') || 'Enter your password'}
+                        </Text>
+                        <View style={[styles.inputContainer, { borderColor: colors.border, backgroundColor: colors.inputBackground }]}>
+                            <TextInput
+                                style={[styles.input, { color: colors.text }]}
+                                value={password}
+                                onChangeText={setPassword}
+                                placeholder={t('deleteAccount.passwordPlaceholder') || 'Password'}
+                                placeholderTextColor={colors.secondaryText}
+                                secureTextEntry={!showPassword}
+                                autoCapitalize="none"
+                                editable={!isDeleting}
+                            />
+                            <TouchableOpacity
+                                onPress={() => setShowPassword(!showPassword)}
+                                style={styles.eyeButton}
+                            >
+                                <OxyIcon
+                                    name={showPassword ? 'eye-off' : 'eye'}
+                                    size={20}
+                                    color={colors.secondaryText}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+
+                    <View style={styles.inputGroup}>
+                        <Text style={[styles.label, { color: colors.secondaryText }]}>
+                            {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
+                        </Text>
+                        <TextInput
+                            style={[
+                                styles.input,
+                                styles.confirmInput,
+                                {
+                                    borderColor: confirmUsername === username ? '#34C759' : colors.border,
+                                    backgroundColor: colors.inputBackground,
+                                    color: colors.text,
+                                },
+                            ]}
+                            value={confirmUsername}
+                            onChangeText={setConfirmUsername}
+                            placeholder={username}
+                            placeholderTextColor={colors.secondaryText}
+                            autoCapitalize="none"
+                            autoCorrect={false}
+                            editable={!isDeleting}
+                        />
+                    </View>
+
+                    <View style={styles.buttons}>
+                        <TouchableOpacity
+                            style={[styles.button, styles.cancelButton, { borderColor: colors.border }]}
+                            onPress={handleClose}
+                            disabled={isDeleting}
+                        >
+                            <Text style={[styles.buttonText, { color: colors.text }]}>
+                                {t('common.cancel') || 'Cancel'}
+                            </Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            style={[
+                                styles.button,
+                                styles.deleteButton,
+                                { backgroundColor: isValid ? colors.danger : colors.danger + '50' },
+                            ]}
+                            onPress={handleDelete}
+                            disabled={!isValid || isDeleting}
+                        >
+                            {isDeleting ? (
+                                <ActivityIndicator color="#fff" size="small" />
+                            ) : (
+                                <Text style={styles.deleteButtonText}>
+                                    {t('deleteAccount.confirm') || 'Delete Forever'}
+                                </Text>
+                            )}
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </KeyboardAvoidingView>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    modal: {
+        width: '90%',
+        maxWidth: 400,
+        borderRadius: 16,
+        padding: 24,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 8,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 16,
+        gap: 12,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: '700',
+    },
+    warning: {
+        fontSize: 14,
+        lineHeight: 20,
+        marginBottom: 20,
+    },
+    errorContainer: {
+        padding: 12,
+        borderRadius: 8,
+        marginBottom: 16,
+    },
+    errorText: {
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    inputGroup: {
+        marginBottom: 16,
+    },
+    label: {
+        fontSize: 13,
+        marginBottom: 8,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderRadius: 8,
+    },
+    input: {
+        flex: 1,
+        fontSize: 16,
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+    },
+    confirmInput: {
+        borderWidth: 1,
+        borderRadius: 8,
+    },
+    eyeButton: {
+        padding: 12,
+    },
+    buttons: {
+        flexDirection: 'row',
+        gap: 12,
+        marginTop: 8,
+    },
+    button: {
+        flex: 1,
+        paddingVertical: 14,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    cancelButton: {
+        borderWidth: 1,
+    },
+    deleteButton: {
+        minHeight: 48,
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    deleteButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#fff',
+    },
+});
+
+export default DeleteAccountModal;

package/src/ui/components/modals/index.ts

@@ -0,0 +1 @@
+export { default as DeleteAccountModal } from './DeleteAccountModal';