oneticket-sdk-vi 1.0.0

package/src/screens/metro/HistoryScreen.tsx

@@ -0,0 +1,348 @@
+import React, { useState, useEffect } from 'react';
+import {
+    View,
+    Text,
+    FlatList,
+    RefreshControl,
+    StyleSheet,
+    TouchableOpacity,
+    Modal,
+    Pressable,
+    Image
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import TransactionCard from '../../components/common/Cards/TransactionCard';
+import Header from '../../components/common/Header/Header';
+import { useFetchGetAllTransactions } from '../../services/apis/transaction/hooks';
+import { formatDateWithTime } from '../../utils/formatDate';
+import FooterComponentFlatlist from '../../components/common/Loaders/FooterComponentFlatList';
+import Loader from '../../components/common/Loaders/Loader';
+import FilterIcon from '../../assets/icons/FilterIcon';
+import { MetroWithTabsScreens, MetroWithTabsStackNavigationProp } from '../../navigation/metro/MetroWithTabsStack';
+import { getOfflineData, saveOfflineData } from '../../utils/offlineHelper';
+import * as NetInfo from '@react-native-community/netinfo';
+import { Button } from '../../components/common/Button/Button';
+import { CustomText } from '../../components/common/Text/CustomText';
+import { useTheme } from '../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import Tabs2 from '../../components/common/Tabs/Tabs2';
+import EmptyState from '../../components/common/EmptyState/EmptyState';
+import CloseIcon from '../../assets/icons/CloseIcon';
+
+const cities = [
+    { label: 'Delhi', value: 'std:011' },
+    { label: 'Mumbai', value: 'std:022' },
+    { label: 'Bangalore', value: 'std:080' },
+];
+
+const HistoryScreen = () => {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<MetroWithTabsStackNavigationProp>();
+    const [selectedTab, setSelectedTab] = useState('');
+    const [selectedCity, setSelectedCity] = useState<string>('');
+    const [filterOption, setFilterOption] = useState<string>('');
+    const [offlineTransactions, setOfflineTransactions] = useState<any[]>([]);
+    const [isOffline, setIsOffline] = useState(false);
+    const [showFilterModal, setShowFilterModal] = useState(false);
+
+    const {
+        data: allTransactions,
+        isPending: allTransactionsLoading,
+        fetchNextPage,
+        isFetchingNextPage,
+        refetch,
+        isRefetching,
+    } = useFetchGetAllTransactions({ status: selectedTab, cityCode: selectedCity });
+
+    const allTransactionsData =
+        allTransactions?.pages?.map((page) => page?.transactions || [])?.flat() || [];
+
+    const todayDate = new Date().toISOString().split('T')[0];
+
+    const sortedTransactionsData = allTransactionsData
+        .filter((transaction) => {
+            const transactionDate = new Date(transaction.createdAt || 0).toISOString().split('T')[0];
+            return isOffline ? transactionDate === todayDate : true;
+        })
+        .sort((a, b) => {
+            if (filterOption === 'NewToOldDate') {
+                return new Date(b.createdAt || 0).getTime() - new Date(a.createdAt || 0).getTime();
+            }
+            if (filterOption === 'LowToHighAmount') {
+                return (a.totalPrice || 0) - (b.totalPrice || 0);
+            }
+            if (filterOption === 'HighToLowAmount') {
+                return (b.totalPrice || 0) - (a.totalPrice || 0);
+            }
+            return new Date(b.createdAt || 0).getTime() - new Date(a.createdAt || 0).getTime();
+        });
+
+    const transactions =
+        sortedTransactionsData?.map((element) => ({
+            _id: element._id,
+            title: `Purchase of ${element?.city} Metro QR Ticket`,
+            startStation: element.startStation,
+            destinationStation: element.destinationStation,
+            amount: element?.totalPrice || 0,
+            date: formatDateWithTime(element.createdAt),
+            status: element.status,
+        })) || [];
+
+    useEffect(() => {
+        if (!allTransactionsLoading && !isOffline) {
+            saveOfflineData('transactions', transactions);
+        }
+    }, [transactions, allTransactionsLoading, isOffline]);
+
+    useEffect(() => {
+        const unsubscribe = NetInfo.addEventListener((state) => {
+            const hasInternet = state.isConnected ?? false;
+            setIsOffline(!hasInternet);
+
+            if (!hasInternet) {
+                getOfflineData('transactions').then((savedData) => {
+                    setOfflineTransactions(savedData);
+                });
+            }
+        });
+
+        return () => unsubscribe();
+    }, [selectedTab]);
+
+    const handleFilterReset = () => {
+        setFilterOption('');
+        setSelectedCity('');
+        setShowFilterModal(false);
+    };
+
+    const displayedTransactions =
+        isOffline && offlineTransactions
+            ? offlineTransactions.filter((transaction) => {
+                if (selectedTab === '') return true;
+                return transaction.status === selectedTab;
+            })
+            : transactions;
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        tabsContainer: {
+            paddingHorizontal: ms(16),
+            paddingVertical: mvs(20),
+        },
+        emptyContainer: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: mvs(40),
+        },
+        emptyImage: {
+            width: ms(300),
+            height: mvs(250),
+            alignSelf: 'center',
+        },
+        listContainer: {
+            paddingHorizontal: ms(16),
+        },
+        filterButton: {
+            padding: ms(8),
+        },
+        modalContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'rgba(0,0,0,0.5)',
+        },
+        modalContent: {
+            width: '80%',
+            backgroundColor: theme.colors.backdrop,
+            borderRadius: ms(8),
+            padding: ms(16),
+        },
+        modalTitle: {
+            fontSize: ms(16),
+            fontWeight: 'bold',
+            marginBottom: mvs(16),
+        },
+        filterOption: {
+            paddingVertical: mvs(12),
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.borderLight,
+        },
+        filterOptionText: {
+            fontSize: ms(14),
+        },
+        resetButton: {
+            marginTop: mvs(16),
+            paddingVertical: mvs(12),
+            alignItems: 'center',
+        },
+        resetButtonText: {
+            color: theme.colors.error[500],
+            fontWeight: 'bold',
+        },
+        selectedOption: {
+            backgroundColor: theme.colors.surfaceVariant,
+            borderLeftWidth: 3,
+            borderLeftColor: theme.colors.primary[500],
+            paddingLeft: ms(13), // 16 - 3 border
+        },
+    });
+
+    const isAmountOptionSelected = (option: string) => filterOption === option;
+    const isCitySelected = (cityValue: string) => selectedCity === cityValue;
+
+    return (
+        <View style={styles.container}>
+            <Header
+                showBackButton
+                onBackPress={() => navigate(MetroWithTabsScreens.SelectStations, {})}
+                title="My Tickets"
+                rightComponent={
+                    <Pressable
+                        style={styles.filterButton}
+                        onPress={() => setShowFilterModal(true)}
+                    >
+                        <FilterIcon size={ms(22)} color={theme.colors.text} />
+                    </Pressable>
+                }
+            />
+
+            <View style={styles.tabsContainer}>
+                <Tabs2
+                    tabs={[
+                        { id: '', title: 'All' },
+                        { id: 'SUCCESSFUL', title: 'Successful' },
+                        { id: 'CANCELLED', title: 'Cancelled' },
+                    ]}
+                    activeTab={selectedTab}
+                    onChange={setSelectedTab}
+                />
+            </View>
+
+            {allTransactionsLoading && !isOffline ? (
+                <Loader />
+            ) : (
+                <FlatList
+                    data={displayedTransactions}
+                    ListEmptyComponent={
+                        <EmptyState
+                            // image={require('../../assets/images/NoData.png')}
+                            image={require('../../assets/images/NoDataNewTheme.png')}
+                            title="No Tickets"
+                        // description="You haven't booked any tickets yet"
+                        />
+                    }
+                    keyExtractor={(item) => item._id.toString()}
+                    style={styles.listContainer}
+                    renderItem={({ item }) => (
+                        <TransactionCard
+                            title={item.title}
+                            startStation={item.startStation}
+                            destinationStation={item.destinationStation}
+                            amount={item.amount}
+                            date={item.date}
+                            status={item.status}
+                            onPress={() =>
+                                navigate(MetroWithTabsScreens.TicketDetails, { transaction_id: item._id })
+                            }
+                        />
+                    )}
+                    onEndReachedThreshold={0.1}
+                    onEndReached={() => !isOffline && fetchNextPage()}
+                    ListFooterComponent={<FooterComponentFlatlist isFetchingNextPage={isFetchingNextPage} />}
+                    refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
+                />
+            )}
+
+            <Modal
+                visible={showFilterModal}
+                transparent
+                animationType="fade"
+                onRequestClose={() => setShowFilterModal(false)}
+            >
+                <View style={styles.modalContainer}>
+                    <View style={styles.modalContent}>
+                        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                            <CustomText variant="heading3" style={styles.modalTitle}>Sort By Amount</CustomText>
+                            <TouchableOpacity style={{ padding: ms(4) }} onPress={() => setShowFilterModal(false)}>
+                                <CloseIcon color={theme.colors.text} />
+                            </TouchableOpacity>
+                        </View>
+
+                        <Pressable
+                            style={[
+                                styles.filterOption,
+                                isAmountOptionSelected('LowToHighAmount') && styles.selectedOption
+                            ]}
+                            onPress={() => setFilterOption('LowToHighAmount')}
+                        >
+                            <CustomText
+                                variant="body1"
+                                style={[
+                                    styles.filterOptionText,
+                                    isAmountOptionSelected('LowToHighAmount') ? { fontWeight: '600' } : {}
+                                ]}
+                            >
+                                Low to High
+                            </CustomText>
+                        </Pressable>
+
+                        <Pressable
+                            style={[
+                                styles.filterOption,
+                                isAmountOptionSelected('HighToLowAmount') && styles.selectedOption
+                            ]}
+                            onPress={() => setFilterOption('HighToLowAmount')}
+                        >
+                            <CustomText
+                                variant="body1"
+                                style={[
+                                    styles.filterOptionText,
+                                    isAmountOptionSelected('HighToLowAmount') ? { fontWeight: '600' } : {}
+                                ]}
+                            >
+                                High to Low
+                            </CustomText>
+                        </Pressable>
+
+                        <CustomText variant="heading3" style={[styles.modalTitle, { marginTop: mvs(16) }]}>
+                            Filter by City
+                        </CustomText>
+
+                        {cities.map((city) => (
+                            <Pressable
+                                key={city.value}
+                                style={[
+                                    styles.filterOption,
+                                    isCitySelected(city.value) && styles.selectedOption
+                                ]}
+                                onPress={() => setSelectedCity(city.value)}
+                            >
+                                <CustomText variant="body1"
+                                    style={[
+                                        styles.filterOptionText,
+                                        isCitySelected(city.value) ? { fontWeight: '600' } : {}
+                                    ]}>
+                                    {city.label}
+                                </CustomText>
+                            </Pressable>
+                        ))}
+
+                        <Pressable
+                            style={styles.resetButton}
+                            onPress={handleFilterReset}
+                        >
+                            <CustomText variant="body1" style={styles.resetButtonText}>
+                                Clear All Filters
+                            </CustomText>
+                        </Pressable>
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    );
+};
+
+export default HistoryScreen;

package/src/screens/metro/IssueChatScreen.tsx

@@ -0,0 +1,156 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+    View,
+    ScrollView,
+    TextInput,
+    StyleSheet,
+    ActivityIndicator
+} from "react-native";
+import Header from "../../components/common/Header/Header";
+import SendIcon from "../../assets/icons/SendIcon";
+import { useRoute } from "@react-navigation/native";
+import { MetroScreens, MetroStackRouteProp } from "../../navigation/metro/MetroStack";
+import { useFetchGetChat, useMutateSendMessage } from "../../services/apis/metro/issue/hooks";
+import Toast from "react-native-toast-message";
+import FullScreenLoader from "../../components/common/Loaders/FullScreenLoader";
+import { Button } from "../../components/common/Button/Button";
+import { Input } from "../../components/common/Input/Input";
+import { CustomText } from "../../components/common/Text/CustomText";
+import { useTheme } from "../../theme/ThemeProvider";
+import { ms, mvs } from "react-native-size-matters";
+
+export default function IssueChatScreen() {
+    const { theme } = useTheme();
+    const { params: { issueId } } = useRoute<MetroStackRouteProp<MetroScreens.IssueChat>>();
+    const [messages, setMessages] = useState<any>([]);
+    const [newMessage, setNewMessage] = useState("");
+    const scrollViewRef = useRef<ScrollView | null>(null);
+    const inputRef = useRef<TextInput>(null);
+
+    const { data: getMessages, isLoading, isError, refetch, isRefetching } = useFetchGetChat({ issueId });
+    const { mutate: sendMessage } = useMutateSendMessage((data) => {
+        if (data.status === 'success') {
+            Toast.show({
+                type: "success",
+                text1: "Message sent successfully",
+            });
+        } else {
+            Toast.show({
+                type: "error",
+                text1: "Failed to send message",
+            });
+        }
+    });
+
+    useEffect(() => {
+        if (getMessages?.chat) {
+            setMessages(getMessages.chat);
+        }
+    }, [getMessages]);
+
+    useEffect(() => {
+        scrollViewRef.current?.scrollToEnd({ animated: true });
+    }, [messages]);
+
+    const handleSend = () => {
+        if (newMessage.trim()) {
+            sendMessage({ issueId, message: newMessage.trim() });
+            const newMsg = { message: newMessage.trim(), sender: "user" };
+            setMessages((prev: any) => [...prev, newMsg]);
+            setNewMessage("");
+        }
+    };
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        chatContainer: {
+            padding: ms(20),
+            flex: 1,
+        },
+        messageContainer: {
+            alignSelf: 'flex-start',
+            maxWidth: '80%',
+            marginBottom: mvs(12),
+            padding: ms(12),
+            borderRadius: ms(8),
+        },
+        userMessage: {
+            alignSelf: 'flex-end',
+            // backgroundColor: theme.colors.primary[100],
+            backgroundColor: theme.colors.primary[600],
+        },
+        agentMessage: {
+            // backgroundColor: theme.colors.gray[200],
+            backgroundColor: theme.colors.coolGray[600],
+        },
+        inputContainer: {
+            // maxHeight: mvs(70),
+            marginBottom: mvs(-4),
+            paddingHorizontal: ms(16),
+            paddingTop: mvs(12),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-between',
+            borderTopWidth: 1,
+            borderTopColor: theme.colors.borderLight,
+        }
+    });
+
+    if (isLoading) {
+        return <FullScreenLoader />;
+    }
+
+    if (isError) {
+        return <CustomText>Error loading chat messages.</CustomText>;
+    }
+
+    return (
+        <View style={styles.container}>
+            <Header chatHeader={true} isRefetching={isRefetching} onRefresh={refetch} />
+
+            <ScrollView
+                ref={scrollViewRef}
+                contentContainerStyle={styles.chatContainer}
+                onContentSizeChange={() => scrollViewRef.current?.scrollToEnd({ animated: true })}
+            >
+                {messages.map((msg: any, index: number) => (
+                    msg && msg.message && msg.sender ? (
+                        <View
+                            key={msg._id || index}
+                            style={[
+                                styles.messageContainer,
+                                msg.sender === "user" ? styles.userMessage : styles.agentMessage
+                            ]}
+                        >
+                            <CustomText variant="body1" style={{ color: theme.colors.text2 }}>{msg.message}</CustomText>
+                        </View>
+                    ) : null
+                ))}
+            </ScrollView>
+
+            <View style={styles.inputContainer}>
+                <View style={{ flexGrow: 1, marginRight: ms(8) }}>
+                    <Input
+                        ref={inputRef}
+                        placeholder="Type a message..."
+                        value={newMessage}
+                        onChangeText={setNewMessage}
+                        variant="outlined"
+                        onSubmitEditing={handleSend}
+                    />
+                </View>
+                <Button
+                    variant="primary"
+                    size="md"
+                    style={{ paddingHorizontal: ms(12) }}
+                    onPress={handleSend}
+                    children={<SendIcon color="white" />}
+                />
+            </View>
+        </View>
+    );
+}