oneticket-sdk-vi 1.0.0

package/src/screens/common/Faq/FaqScreen.tsx

@@ -0,0 +1,215 @@
+import React, { useState } from 'react';
+import {
+    View,
+    Text,
+    ScrollView,
+    Pressable,
+    StyleSheet,
+    LayoutAnimation,
+    Platform,
+    UIManager,
+    TextInput,
+    Animated
+} from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import Header from '../../../components/common/Header/Header';
+import { ms, mvs } from 'react-native-size-matters';
+import { faqData } from '../../../utils/faqData';
+import SearchIcon from '../../../assets/icons/SearchIcon';
+import ChevronDownIcon from '../../../assets/icons/ChevronDownIcon';
+import HelpIcon from '../../../assets/icons/HelpIcon';
+import ChevronUpIcon from '../../../assets/icons/ChevronUpIcon';
+import { CategoryButton } from './Components/CategoryButton';
+import { Input } from '../../../components/common/Input/Input';
+import { CustomText } from '../../../components/common/Text/CustomText';
+
+type FAQItem = {
+    id: string;
+    question: string;
+    answer: string;
+    category: 'booking' | 'payment' | 'tickets' | 'account' | 'refunds';
+};
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const FAQScreen = () => {
+    const { theme } = useTheme();
+    const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({});
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+    const filteredFaqData = faqData.filter(item => {
+        const matchesSearch = item.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            item.answer.toLowerCase().includes(searchQuery.toLowerCase());
+        const matchesCategory = selectedCategory === 'all' || item.category === selectedCategory;
+        return matchesSearch && matchesCategory;
+    });
+
+    const toggleItem = (id: string) => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setExpandedItems(prev => ({
+            ...prev,
+            [id]: !prev[id]
+        }));
+    };
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        contentContainer: {
+            paddingBottom: mvs(20),
+        },
+        headerContainer: {
+            paddingHorizontal: ms(theme.spacing.m),
+            paddingTop: mvs(theme.spacing.m),
+            paddingBottom: mvs(theme.spacing.s),
+        },
+        title: {
+            color: theme.colors.primary[500],
+            marginBottom: mvs(theme.spacing.xs),
+        },
+        subtitle: {
+            color: theme.colors.textSecondary,
+            marginBottom: mvs(theme.spacing.l),
+        },
+        searchContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: theme.colors.background,
+            borderRadius: ms(10),
+            borderWidth: 1,
+            borderColor: theme.colors.borderLight,
+            paddingHorizontal: ms(theme.spacing.m),
+            marginBottom: mvs(theme.spacing.m),
+            height: mvs(48),
+        },
+        searchInput: {
+            flex: 1,
+            fontSize: ms(14),
+            color: theme.colors.text,
+            paddingVertical: mvs(theme.spacing.s),
+        },
+        categoryScroll: {
+            marginBottom: mvs(theme.spacing.s),
+            paddingVertical: mvs(theme.spacing.xs),
+        },
+        faqItem: {
+            borderRadius: 8,
+            backgroundColor: theme.colors.background,
+            shadowColor: theme.colors.shadow,
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.1,
+            shadowRadius: 2,
+            elevation: 2,
+            marginBottom: mvs(theme.spacing.s),
+        },
+        faqHeader: {
+            padding: ms(theme.spacing.m),
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        faqQuestion: {
+            flex: 1,
+            fontWeight: '500',
+            color: theme.colors.text,
+        },
+        faqAnswer: {
+            paddingLeft: ms(theme.spacing.m),
+            paddingRight: ms(theme.spacing.m),
+            paddingBottom: mvs(theme.spacing.m),
+            borderLeftWidth: 2,
+            borderLeftColor: theme.colors.primary[500],
+            marginLeft: ms(theme.spacing.s),
+        },
+        answerText: {
+            color: theme.colors.textSecondary,
+        },
+        emptyState: {
+            alignItems: 'center',
+            marginTop: mvs(theme.spacing.xl),
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            <Header showHomeButton={false} />
+            <ScrollView
+                contentContainerStyle={styles.contentContainer}
+                showsVerticalScrollIndicator={false}
+            >
+                <View style={styles.headerContainer}>
+                    <CustomText variant='heading1' style={styles.title}>Metro Ticket Help</CustomText>
+                    <CustomText variant='body1' style={styles.subtitle}>Get answers about booking, tickets, and more</CustomText>
+
+                    <Input
+                        placeholder="Search help articles..."
+                        placeholderTextColor={theme.colors.textTertiary}
+                        value={searchQuery}
+                        onChangeText={setSearchQuery}
+                        leftIcon={<SearchIcon size={ms(18)} color={theme.colors.textTertiary} />}
+                    />
+
+                    <ScrollView
+                        horizontal
+                        showsHorizontalScrollIndicator={false}
+                        style={styles.categoryScroll}
+                        contentContainerStyle={{ paddingHorizontal: ms(theme.spacing.xs) }}
+                    >
+                        {['all', 'booking', 'tickets', 'payment', 'refunds', 'account'].map(category => (
+                            <CategoryButton
+                                key={category}
+                                label={category === 'all' ? 'All Topics' : category}
+                                isActive={selectedCategory === category}
+                                onPress={() => setSelectedCategory(category)}
+                            />
+                        ))}
+                    </ScrollView>
+                </View>
+
+                <View style={{ paddingHorizontal: ms(theme.spacing.m) }}>
+                    {filteredFaqData.map(item => (
+                        <View key={item.id} style={styles.faqItem}>
+                            <Pressable
+                                onPress={() => toggleItem(item.id)}
+                                style={styles.faqHeader}
+                                android_ripple={{ color: theme.colors.surfaceVariant }}
+                            >
+                                <CustomText variant='body1' style={styles.faqQuestion}>{item.question}</CustomText>
+                                {expandedItems[item.id] ? (
+                                    <ChevronUpIcon size={ms(18)} color={theme.colors.text} />
+                                ) : (
+                                    <ChevronDownIcon size={ms(18)} color={theme.colors.text} />
+                                )}
+                            </Pressable>
+
+                            {expandedItems[item.id] && (
+                                <View style={styles.faqAnswer}>
+                                    <CustomText variant='body2' style={styles.answerText}>{item.answer}</CustomText>
+                                </View>
+                            )}
+                        </View>
+                    ))}
+                </View>
+
+                {filteredFaqData.length === 0 && (
+                    <View style={styles.emptyState}>
+                        <HelpIcon size={ms(60)} color={theme.colors.textTertiary} />
+                        <CustomText variant='body1' style={{ color: theme.colors.textSecondary, marginTop: mvs(theme.spacing.s) }}>
+                            No help articles found
+                        </CustomText>
+                        <CustomText variant='body2' style={{ color: theme.colors.textTertiary, marginTop: mvs(theme.spacing.xs) }}>
+                            Try different search terms or categories
+                        </CustomText>
+                    </View>
+                )}
+            </ScrollView>
+        </View>
+    );
+};
+
+export default FAQScreen;

package/src/screens/common/MyAccountScreen.tsx

@@ -0,0 +1,224 @@
+import React, { useState, useEffect } from 'react';
+import { View, ScrollView, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { mvs, ms } from 'react-native-size-matters';
+import { useFetchLoggedInUser, useMutatelogout } from '../../services/apis/auth/hooks';
+import BackIcon from '../../assets/icons/BackIcon';
+import Loader from '../../components/common/Loaders/Loader';
+import { useMutateUpdateUser } from '../../services/apis/user/hooks';
+import { MetroWithTabsStackNavigationProp } from '../../navigation/metro/MetroWithTabsStack';
+import { useTheme } from '../../theme/ThemeProvider';
+import { CustomText } from '../../components/common/Text/CustomText';
+import { Button } from '../../components/common/Button/Button';
+import { Input } from '../../components/common/Input/Input';
+import Header from '../../components/common/Header/Header';
+
+const MyAccountScreen = () => {
+    const { theme } = useTheme();
+    const { navigate, goBack } = useNavigation<MetroWithTabsStackNavigationProp>();
+    const [name, setName] = useState<string | undefined>('');
+    const [email, setEmail] = useState<string>('');
+    const [originalUser, setOriginalUser] = useState<{ name?: string; email?: string; gender?: string }>({});
+    const [nameError, setNameError] = useState<string>('');
+    const [isEditing, setIsEditing] = useState<boolean>(false);
+
+    const { data: loggedInUser, isLoading: loggedInUserLoading } = useFetchLoggedInUser();
+    const { mutateAsync: updateUser, isPending: updateUserLoading } = useMutateUpdateUser(data => {
+        if (data.status === 'success') {
+            setIsEditing(false);
+            // Show success message (you can implement a toast/alert component)
+        } else {
+            // Show error message
+        }
+    });
+
+    useEffect(() => {
+        if (loggedInUser && loggedInUser.status === 'success') {
+            const user = loggedInUser.user;
+            setName(user.name);
+            setEmail(user?.username || '');
+            setOriginalUser({ name: user.name, email: user?.username || '', gender: user.gender });
+        }
+    }, [loggedInUser]);
+
+    const hasChanges = () => {
+        return (
+            name !== originalUser.name ||
+            email !== originalUser.email
+        );
+    };
+
+    const handleSave = () => {
+        let isValid = true;
+        setNameError('');
+
+        if (!name || name.trim() === '') {
+            setNameError('Name cannot be empty');
+            isValid = false;
+        }
+
+        if (isValid) {
+            setIsEditing(false);
+            if (hasChanges()) {
+                updateUser({ name, email, gender: 'male' });
+            }
+        }
+    };
+
+    const handleEditToggle = () => {
+        setNameError('');
+        if (isEditing) {
+            setName(originalUser.name);
+            setEmail(originalUser.email || '');
+        }
+        setIsEditing(!isEditing);
+    };
+
+    return (
+        <View style={{ flex: 1, backgroundColor: theme.colors.background }}>
+            <Header
+                showHomeButton={false}
+                title="Profile"
+            />
+
+            {loggedInUserLoading ? (
+                <Loader />
+            ) : (
+                <ScrollView
+                    contentContainerStyle={{ flexGrow: 1, padding: ms(20) }}
+                    showsVerticalScrollIndicator={false}
+                >
+                    <View style={{ flex: 1 }}>
+                        {/* Profile Picture */}
+                        <View style={{
+                            alignItems: 'center',
+                        }}>
+                            <View style={{
+                                width: ms(100),
+                                height: ms(100),
+                                borderRadius: ms(50),
+                                backgroundColor: theme.colors.primary[500],
+                                justifyContent: 'center',
+                                alignItems: 'center'
+                            }}>
+                                <CustomText variant="heading1" style={{
+                                    color: theme.colors.white,
+                                    paddingTop: ms(theme.spacing.s),
+                                    fontSize: ms(36)
+                                }}>
+                                    {loggedInUser?.user?.name?.charAt(0)?.toUpperCase() || 'U'}
+                                </CustomText>
+                            </View>
+                        </View>
+
+                        {/* Form Fields */}
+                        <View style={{ marginTop: mvs(theme.spacing.xl) }}>
+                            {/* Name */}
+                            <View style={{ marginBottom: mvs(theme.spacing.m) }}>
+                                <CustomText variant="labelMedium" style={{
+                                    marginBottom: mvs(theme.spacing.xs),
+                                    color: theme.colors.textSecondary
+                                }}>
+                                    Full Name
+                                </CustomText>
+                                <Input
+                                    variant="outlined"
+                                    placeholder="Enter your name"
+                                    value={name}
+                                    onChangeText={(text) => {
+                                        setName(text);
+                                        if (text.trim() === '') {
+                                            setNameError('Name cannot be empty');
+                                        } else {
+                                            setNameError('');
+                                        }
+                                    }}
+                                    editable={isEditing}
+                                    error={nameError}
+                                    containerStyle={{ borderColor: isEditing ? theme.colors.primary[500] : theme.colors.border, backgroundColor: isEditing ? theme.colors.transparent : theme.colors.surfaceVariant }}
+                                    inputStyle={{ fontSize: ms(14) }}
+                                />
+                            </View>
+
+                            {/* Phone Number (readonly) */}
+                            <View style={{ marginBottom: mvs(theme.spacing.m) }}>
+                                <CustomText variant="labelMedium" style={{
+                                    marginBottom: mvs(theme.spacing.xs),
+                                    color: theme.colors.textSecondary
+                                }}>
+                                    Phone Number
+                                </CustomText>
+                                <Input
+                                    variant="outlined"
+                                    placeholder="Phone number"
+                                    value={String(loggedInUser?.user.moNumber)}
+                                    editable={false}
+                                    containerStyle={{ borderColor: theme.colors.border, backgroundColor: theme.colors.surfaceVariant }}
+                                    inputStyle={{ fontSize: ms(14) }}
+                                />
+                            </View>
+
+                            {/* Email */}
+                            <View style={{ marginBottom: mvs(theme.spacing.m) }}>
+                                <CustomText variant="labelMedium" style={{
+                                    marginBottom: mvs(theme.spacing.xs),
+                                    color: theme.colors.textSecondary
+                                }}>
+                                    Email (Optional)
+                                </CustomText>
+                                <Input
+                                    variant="outlined"
+                                    placeholder="Enter your email"
+                                    value={email}
+                                    onChangeText={setEmail}
+                                    editable={isEditing}
+                                    containerStyle={{ borderColor: isEditing ? theme.colors.primary[500] : theme.colors.border, backgroundColor: isEditing ? theme.colors.transparent : theme.colors.surfaceVariant }}
+                                    inputStyle={{ fontSize: ms(14) }}
+                                />
+                            </View>
+                        </View>
+
+                        {/* Action Buttons */}
+                        <View style={{ marginTop: 'auto' }}>
+                            {!isEditing ? (
+                                <Button
+                                    variant="primary"
+                                    size="lg"
+                                    onPress={handleEditToggle}
+                                    style={{ height: mvs(50) }}
+                                >
+                                    Edit Profile
+                                </Button>
+                            ) : (
+                                <View style={{
+                                    flexDirection: 'row',
+                                    gap: ms(theme.spacing.s)
+                                }}>
+                                    <Button
+                                        variant="outlined"
+                                        size="lg"
+                                        onPress={handleEditToggle}
+                                        style={{ flex: 1 }}
+                                    >
+                                        Cancel
+                                    </Button>
+                                    <Button
+                                        variant="primary"
+                                        size="md"
+                                        onPress={handleSave}
+                                        loading={updateUserLoading}
+                                        style={{ flex: 1 }}
+                                    >
+                                        Save Changes
+                                    </Button>
+                                </View>
+                            )}
+                        </View>
+                    </View>
+                </ScrollView>
+            )}
+        </View>
+    );
+};
+
+export default MyAccountScreen;

package/src/screens/common/Profile/Components/MenuItem.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { ms, mvs } from 'react-native-size-matters';
+import { useTheme } from '../../../../theme/ThemeProvider';
+import ChevronRightIcon from '../../../../assets/icons/ChevronRightIcon';
+import { CustomText } from '../../../../components/common/Text/CustomText';
+
+interface MenuItemProps {
+    title: string;
+    icon: React.ReactNode;
+    onPress: () => void;
+    description?: string;
+    showChevron?: boolean;
+    isLast?: boolean;
+}
+
+export const MenuItem: React.FC<MenuItemProps> = ({
+    title,
+    icon,
+    onPress,
+    description,
+    showChevron = true,
+    isLast = false,
+}) => {
+    const { theme } = useTheme();
+
+    return (
+        <Pressable
+            onPress={onPress}
+            style={({ pressed }) => [
+                styles.container,
+                {
+                    backgroundColor: pressed ? theme.colors.surfaceVariant : theme.colors.background,
+                },
+            ]}
+        >
+            <View style={styles.content}>
+                <View style={styles.iconContainer}>{icon}</View>
+                <View style={styles.textContainer}>
+                    <CustomText variant='body1'>{title}</CustomText>
+                    {description && (
+                        <CustomText variant='body2' style={{ marginTop: mvs(4), color: theme.colors.textSecondary }}>
+                            {description}
+                        </CustomText>
+                    )}
+                </View>
+                {showChevron && (
+                    <View style={styles.chevronContainer}>
+                        <ChevronRightIcon size={ms(18)} color={theme.colors.textTertiary} />
+                    </View>
+                )}
+            </View>
+            {!isLast && (
+                <View
+                    style={[
+                        styles.divider,
+                        { backgroundColor: theme.colors.borderLight },
+                    ]}
+                />
+            )}
+        </Pressable>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        paddingTop: mvs(16),
+        paddingHorizontal: ms(8),
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    iconContainer: {
+        marginRight: ms(16),
+    },
+    textContainer: {
+        flex: 1,
+    },
+    title: {
+        fontSize: ms(14),
+        fontWeight: '400',
+    },
+    description: {
+        fontSize: ms(12),
+        marginTop: mvs(4),
+    },
+    chevronContainer: {
+        marginLeft: ms(8),
+    },
+    divider: {
+        height: 1,
+        marginTop: mvs(16),
+    },
+});