oneticket-sdk-vi 1.0.0

package/src/screens/metro/IssueDetailsScreen.tsx

@@ -0,0 +1,272 @@
+import React, { useCallback, useState } from 'react';
+import {
+    View,
+    Text,
+    FlatList,
+    StyleSheet,
+    BackHandler,
+    Modal,
+} from 'react-native';
+import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
+import Header from '../../components/common/Header/Header';
+import { useFetchGetMetroIssueDetails, useMutateCloseIssue } from '../../services/apis/metro/issue/hooks';
+import { MetroScreens, MetroStackNavigationProp, MetroStackRouteProp } from '../../navigation/metro/MetroStack';
+import { IssueStackNavigationProp } from '../../navigation/metro/IssueStack';
+import { AuthStackNavigationProp } from '../../navigation/AuthStack';
+import { MetroTabScreens } from '../../navigation/metro/MetroTabs';
+import ChatIcon from '../../assets/icons/ChatIcon';
+import Badge from '../../components/common/Badge/Badge';
+import { useTheme } from '../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import { Button } from '../../components/common/Button/Button';
+import { CustomText } from '../../components/common/Text/CustomText';
+
+const IssueDetailsScreen = () => {
+    const { theme } = useTheme();
+    const { navigate, goBack } = useNavigation<MetroStackNavigationProp & IssueStackNavigationProp & AuthStackNavigationProp>();
+    const [showIssueCloseModal, setShowIssueCloseModal] = useState(false);
+    const { params: { transaction_id } } = useRoute<MetroStackRouteProp<MetroScreens.IssueDetails>>();
+
+    const { data: issueDetails, isLoading: issueDetailsLoading } = useFetchGetMetroIssueDetails({ transaction_id });
+    const { mutateAsync: closeIssue, isPending: closeIssueLoading } = useMutateCloseIssue(() => { });
+
+    const handleCloseIssue = (rating: string) => {
+        closeIssue({ transaction_id, rating });
+        setShowIssueCloseModal(false);
+    };
+
+    useFocusEffect(
+  useCallback(() => {
+    const onBackPress = () => {
+      navigate(MetroScreens.MetroTabs, {
+        screen: MetroTabScreens.IssuesStack,
+      });
+      return true;
+    };
+
+    const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+
+    return () => {
+      if (typeof subscription?.remove === 'function') {
+        subscription.remove(); // ✅ RN 0.72+
+      } else {
+        BackHandler.removeEventListener?.('hardwareBackPress', onBackPress); // ✅ fallback for RN < 0.72
+      }
+    };
+  }, [navigate])
+);
+
+    const getStatusVariant = (status: string) => {
+        switch (status) {
+            case 'CLOSED': return 'success';
+            case 'OPEN': return 'warning';
+            case 'RESOLVED': return 'info';
+            default: return 'primary';
+        }
+    };
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.backdrop,
+        },
+        contentContainer: {
+            padding: ms(theme.spacing.m),
+        },
+        issueCard: {
+            marginVertical: mvs(12),
+            padding: ms(12),
+            backgroundColor: theme.colors.background,
+            borderRadius: ms(8),
+            shadowColor: theme.colors.shadow,
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: 4,
+            elevation: 2,
+        },
+        title: {
+            marginBottom: mvs(theme.spacing.s),
+        },
+        description: {
+            marginBottom: mvs(12),
+        },
+        divider: {
+            height: 1,
+            backgroundColor: theme.colors.gray[300],
+            marginVertical: mvs(theme.spacing.s),
+        },
+        sectionTitle: {
+            fontWeight: '800',
+            marginBottom: mvs(theme.spacing.xs),
+        },
+        row: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: mvs(theme.spacing.s),
+        },
+        stationRow: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: mvs(12),
+        },
+        stationText: {
+            flex: 1,
+            fontWeight: '800'
+        },
+        closeButtonText: {
+            fontSize: ms(16),
+            fontWeight: '500',
+            color: theme.colors.white,
+        },
+        modalContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'rgba(0,0,0,0.7)',
+        },
+        modalContent: {
+            width: '90%',
+            borderRadius: ms(16),
+            padding: ms(16),
+            elevation: 10,
+        },
+        modalTitle: {
+            fontWeight: 'bold',
+            fontSize: ms(18),
+            textAlign: 'center',
+            marginBottom: mvs(24),
+        },
+        buttonRow: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            gap: ms(10),
+        },
+        buttonText: {
+            color: theme.colors.white,
+            fontWeight: '500',
+        },
+    });
+
+    const renderIssueItem = ({ item }: { item: any }) => (
+        <View style={styles.issueCard}>
+            <CustomText variant='heading2' style={styles.title}>{item.short_desc || 'N/A'}</CustomText>
+            <CustomText variant='body1' style={styles.description}>
+                {item.long_desc || 'No description available'}
+            </CustomText>
+
+            <View style={styles.divider} />
+
+            <View>
+                <CustomText variant='body1' style={styles.sectionTitle}>Response</CustomText>
+                <CustomText variant='body2' style={styles.description}>
+                    {item.status === "RESOLVED"
+                        ? "Your issue is resolved, you can close the issue"
+                        : item.status === "CLOSED"
+                            ? "Your issue is closed"
+                            : "Your issue is in progress."}
+                </CustomText>
+            </View>
+
+            <View style={styles.divider} />
+
+            <View style={styles.stationRow}>
+                <CustomText variant='body1' style={styles.stationText}>
+                    {item.startStationName} - {item.destinationStationName}
+                </CustomText>
+                <Button
+                    size='sm'
+                    variant='text'
+                    onPress={() => navigate(MetroScreens.IssueChat, { issueId: item.issueId })}
+                >
+                    <ChatIcon color={theme.colors.primary[500]} size={22} />
+                </Button>
+            </View>
+
+            <View style={styles.row}>
+                <CustomText variant='body1' style={{ fontWeight: '500' }}>Issue ID:</CustomText>
+                <CustomText variant='body1'>{item.issue_id}</CustomText>
+            </View>
+            <View style={styles.row}>
+                <CustomText variant='body1' style={{ fontWeight: '500' }}>Issue Category:</CustomText>
+                <CustomText variant='body1'>{item.category?.label || 'N/A'}</CustomText>
+            </View>
+            <View style={{ ...styles.row, alignItems: 'flex-start' }}>
+                <CustomText variant='body1' style={{ fontWeight: '500', flex: 1.5 }}>Issue Sub-category:</CustomText>
+                <CustomText style={{ flex: 2, textAlign: 'right' }}>{item.sub_category.value || 'N/A'}</CustomText>
+            </View>
+            <View style={styles.row}>
+                <CustomText variant='body1' style={{ fontWeight: '500' }}>Status:</CustomText>
+                <Badge
+                    text={item.status}
+                    variant={getStatusVariant(item.status)}
+                    size="md"
+                />
+            </View>
+        </View>
+    );
+
+    return (
+        <View style={styles.container}>
+            <Header
+                showBackButton
+                onBackPress={() => navigate(MetroScreens.MetroTabs, {
+                    screen: MetroTabScreens.IssuesStack
+                })}
+                title="Issue Detail"
+            />
+
+            <FlatList
+                data={issueDetails?.issue || []}
+                keyExtractor={(item, index) => `issue-${index}`}
+                contentContainerStyle={styles.contentContainer}
+                renderItem={renderIssueItem}
+            />
+
+            {issueDetails?.issue?.[0]?.status !== "CLOSED" && (
+                <Button
+                    size='md'
+                    onPress={() => setShowIssueCloseModal(true)}
+                    disabled={closeIssueLoading || !issueDetails?.issue}
+                    style={{ margin: ms(16) }}
+                    textStyle={{ fontSize: ms(16) }}
+                    children={'Close Issue'}
+                />
+            )}
+
+            <Modal
+                visible={showIssueCloseModal}
+                transparent
+                animationType="fade"
+                onRequestClose={() => setShowIssueCloseModal(false)}
+            >
+                <View style={styles.modalContainer}>
+                    <View style={[styles.modalContent, { backgroundColor: theme.colors.backdrop, shadowColor: theme.colors.shadow }]}>
+                        <CustomText style={styles.modalTitle}>
+                            Give the rating on your issue resolve process
+                        </CustomText>
+                        <View style={styles.buttonRow}>
+                            <Button
+                                size='sm'
+                                style={{ flex: 1 }}
+                                onPress={() => handleCloseIssue("THUMBS-UP")}
+                            >
+                                <Text style={styles.buttonText}>Great</Text>
+                            </Button>
+                            <Button
+                                size='sm'
+                                style={{ flex: 1, backgroundColor: theme.colors.error[500] }}
+                                onPress={() => handleCloseIssue("THUMBS-DOWN")}
+                            >
+                                <Text style={styles.buttonText}>Average</Text>
+                            </Button>
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    );
+};
+
+export default IssueDetailsScreen;

package/src/screens/metro/IssuesScreen.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import {
+    View,
+    FlatList,
+    RefreshControl,
+    StyleSheet
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Header from '../../components/common/Header/Header';
+import IssueCard from '../../components/common/Cards/IssueCard';
+import { IssueStackNavigationProp } from '../../navigation/metro/IssueStack';
+import { MetroScreens, MetroStackNavigationProp } from '../../navigation/metro/MetroStack';
+import { useFetchGetAllMetroIssues } from '../../services/apis/metro/issue/hooks';
+import Loader from '../../components/common/Loaders/Loader';
+import FooterComponentFlatlist from '../../components/common/Loaders/FooterComponentFlatList';
+import { formatDateWithTime } from '../../utils/formatDate';
+import { MetroWithTabsStackNavigationProp } from '../../navigation/metro/MetroWithTabsStack';
+import { useTheme } from '../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import EmptyState from '../../components/common/EmptyState/EmptyState';
+import Tabs2 from '../../components/common/Tabs/Tabs2';
+
+const IssuesScreen = () => {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<IssueStackNavigationProp & MetroStackNavigationProp & MetroWithTabsStackNavigationProp>();
+    const [selectedTab, setSelectedTab] = useState('');
+
+    const { data: allIssues, isLoading: allIssuesLoading, fetchNextPage, isFetchingNextPage, refetch, isRefetching } = useFetchGetAllMetroIssues({ status: selectedTab });
+
+    const allIssuesData = allIssues?.pages?.map(page => page?.allIssues || [])?.flat() || [];
+
+    const sortedIssuesData = allIssuesData.sort((a, b) => {
+        const dateA = new Date(a.createdAt).getTime();
+        const dateB = new Date(b.createdAt).getTime();
+        return dateB - dateA; // Newest on top
+    });
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        contentContainer: {
+            paddingHorizontal: ms(theme.spacing.m),
+            paddingVertical: mvs(theme.spacing.m),
+        },
+        emptyContainer: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: mvs(theme.spacing.xl),
+        },
+        emptyImage: {
+            width: ms(300),
+            height: mvs(250),
+            alignSelf: 'center',
+        },
+        emptyText: {
+            fontSize: ms(16),
+            color: theme.colors.primary[500],
+            fontWeight: '600',
+            marginTop: mvs(theme.spacing.m),
+        },
+        listContainer: {
+            paddingHorizontal: ms(theme.spacing.m),
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            {/* Header */}
+            <Header
+                showBackButton
+                showHomeButton={false}
+                title="Issues"
+            />
+
+            <View style={styles.contentContainer}>
+                <Tabs2
+                    tabs={[
+                        { id: '', title: 'All' },
+                        { id: 'OPEN', title: 'Open' },
+                        { id: 'CLOSED', title: 'Closed' },
+                    ]}
+                    activeTab={selectedTab}
+                    onChange={setSelectedTab}
+                />
+            </View>
+
+            {allIssuesLoading ? (
+                <Loader />
+            ) : (
+                <FlatList
+                    data={sortedIssuesData}
+                    ListEmptyComponent={
+                        <EmptyState
+                            // image={require('../../assets/images/NoData.png')}
+                            image={require('../../assets/images/NoDataNewTheme.png')}
+                            title="No Issues"
+                        // description="You haven't reported any issues yet"
+                        />
+                    }
+                    style={styles.listContainer}
+                    renderItem={({ item }) => (
+                        <IssueCard
+                            date={formatDateWithTime(item.createdAt)}
+                            onPress={() => navigate(MetroScreens.IssueDetails, { transaction_id: item._id })}
+                            status={item.status}
+                            startStation={item.startStation}
+                            destinationStation={item.destinationStation}
+                            issueCount={item.issueCount}
+                        />
+                    )}
+                    onEndReachedThreshold={0.1}
+                    onEndReached={() => fetchNextPage()}
+                    ListFooterComponent={<FooterComponentFlatlist isFetchingNextPage={isFetchingNextPage} />}
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={isRefetching}
+                            onRefresh={refetch}
+                            colors={[theme.colors.primary[500]]}
+                            tintColor={theme.colors.primary[500]}
+                        />
+                    }
+                />
+            )}
+        </View>
+    );
+};
+
+export default IssuesScreen;

package/src/screens/metro/MetroSelectionScreen.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { FlatList, View, Image, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useTheme } from '../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import { CustomText } from '../../components/common/Text/CustomText';
+import Header from '../../components/common/Header/Header';
+import FullScreenLoader from '../../components/common/Loaders/FullScreenLoader';
+import { useFetchAllCities, useMutateSelectCity } from '../../services/apis/city/hooks';
+import { MetroTabScreens } from '../../navigation/metro/MetroTabs';
+import { MetroScreens, MetroStackNavigationProp } from '../../navigation/metro/MetroStack';
+import { MetroWithTabsScreens } from '../../navigation/metro/MetroWithTabsStack';
+import TransportationCard from '../../components/common/Cards/TransportationCard';
+import PoweredBy from '../../components/common/PoweredBy/PoweredBy';
+
+const MetroSelectionScreen = () => {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<MetroStackNavigationProp>();
+    const { mutateAsync: selectCity, isPending: selectCityLoading } = useMutateSelectCity(data => {
+        if (data.status === 'success') {
+            navigate(MetroScreens.MetroTabs, {
+                screen: MetroTabScreens.MetroWithTabsStack,
+                params: {
+                    screen: MetroWithTabsScreens.SelectStations,
+                    params: {}
+                }
+            });
+        }
+    });
+
+    const { data: allCities, isLoading: allCitiesLoading } = useFetchAllCities({});
+
+    if (allCitiesLoading) {
+        return <FullScreenLoader />;
+    }
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            <Header
+                showBackButton={false}
+                showHomeButton={false}
+                title='Select Metro'
+            />
+
+            <FlatList
+                style={styles.list}
+                contentContainerStyle={{ paddingBottom: mvs(16) }}
+                data={allCities?.cities || []}
+                keyExtractor={item => item._id}
+                renderItem={({ item }) => (
+                    <TransportationCard
+                        style={styles.card}
+                        label={item.name}
+                        desc={`${item.is_active ? `Book QR tickets for ${item.description}` : item.description}`}
+                        image={item.image}
+                        imageSize={50}
+                        onPress={() => selectCity({ cityCode: item.cityCode })}
+                        disabled={selectCityLoading || !item.is_active}
+                    />
+                )}
+            />
+
+            <View style={styles.footer}>
+                <PoweredBy />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    list: {
+        marginTop: mvs(32),
+        paddingHorizontal: ms(24),
+    },
+    card: {
+        marginVertical: mvs(8),
+    },
+    footer: {
+        paddingVertical: mvs(12),
+    }
+});
+
+export default MetroSelectionScreen;