oneticket-sdk-vi 1.0.0

package/src/screens/metro/RaiseIssueScreen.tsx

@@ -0,0 +1,394 @@
+import React, { useState } from 'react';
+import {
+    View,
+    ScrollView,
+    StyleSheet,
+    Pressable
+} from 'react-native';
+import Header from '../../components/common/Header/Header';
+import DropdownComponent from '../../components/common/DropdownComponent/DropdownComponent';
+import CustomInput from '../../components/common/CustomInput/CustomInput';
+import { categories, subCategories } from '../../components/common/Modals/IssueCategoryData';
+import MultiSelectDropdown from '../../components/common/DropdownComponent/MultiSelectDropdown';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { MetroScreens, MetroStackNavigationProp, MetroStackRouteProp } from '../../navigation/metro/MetroStack';
+import Toast from 'react-native-toast-message';
+import { useMutateRaiseMetroTicketIssue } from '../../services/apis/metro/issue/hooks';
+import { CustomText } from '../../components/common/Text/CustomText';
+import { Button } from '../../components/common/Button/Button';
+import { Checkbox } from '../../components/common/Checkbox/Checkbox';
+import { useTheme } from '../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+
+const RaiseIssueScreen = () => {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<MetroStackNavigationProp>();
+    const { params: { transaction_id, orders } } = useRoute<MetroStackRouteProp<MetroScreens.RaiseIssue>>();
+
+    const [selectedOrders, setSelectedOrders] = useState<{
+        transaction_id: string;
+        startStation: string;
+        destinationStation: string;
+    }[]>([]);
+    const [differentIssues, setDifferentIssues] = useState(false);
+    const [ticketIssues, setTicketIssues] = useState<Record<string, any>>({});
+    const { mutateAsync: raiseIssue, isPending: raiseIsuueLoading } = useMutateRaiseMetroTicketIssue(data => {
+        if (data.status === "success") {
+            navigate(MetroScreens.IssueDetails, { transaction_id: transaction_id });
+        }
+    });
+
+    const onChangeOrder = (val: string) => {
+        const index = selectedOrders.findIndex(order => order.transaction_id === val);
+        if (index === -1) {
+            const find = orders.find(o => o.transaction_id === val);
+            if (!find) {
+                Toast.show({
+                    type: "error",
+                    text1: "Order not found",
+                });
+            } else {
+                setSelectedOrders(selectedOrders => {
+                    const updatedOrders = [
+                        ...selectedOrders,
+                        {
+                            transaction_id: find.transaction_id,
+                            startStation: find.startStation,
+                            destinationStation: find.destinationStation,
+                        },
+                    ];
+                    setTicketIssues(prev => ({
+                        ...prev,
+                        [find.transaction_id]: {
+                            category: null,
+                            subCategory: null,
+                            subject: '',
+                            detailedDescription: '',
+                        },
+                    }));
+                    return updatedOrders;
+                });
+            }
+        } else {
+            setSelectedOrders(selectedOrders => {
+                const updatedOrders = selectedOrders.filter((_, idx) => idx !== index);
+                const updatedIssues = { ...ticketIssues };
+                delete updatedIssues[val];
+                setTicketIssues(updatedIssues);
+                return updatedOrders;
+            });
+        }
+    };
+
+    const handleFieldChange = (ticketId: string, field: string, value: any) => {
+        setTicketIssues(prev => ({
+            ...prev,
+            [ticketId]: {
+                ...prev[ticketId],
+                [field]: value,
+            },
+        }));
+    };
+
+    const handleSubmit = () => {
+        let ordersData;
+
+        if (!differentIssues) {
+            // Apply the same values to all tickets
+            const baseIssue = ticketIssues[selectedOrders[0].transaction_id] || {};
+            ordersData = selectedOrders.map(order => ({
+                transaction_id: order.transaction_id,
+                category: baseIssue.category || '',
+                sub_category: baseIssue.subCategory || '',
+                short_desc: baseIssue.subject || '',
+                long_desc: baseIssue.detailedDescription || '',
+            }));
+        } else {
+            // Use individual values for each ticket
+            ordersData = selectedOrders.map(order => ({
+                transaction_id: order.transaction_id,
+                category: ticketIssues[order.transaction_id]?.category || '',
+                sub_category: ticketIssues[order.transaction_id]?.subCategory || '',
+                short_desc: ticketIssues[order.transaction_id]?.subject || '',
+                long_desc: ticketIssues[order.transaction_id]?.detailedDescription || '',
+            }));
+        }
+
+        console.log("Submitting issues data:", {
+            transaction_id: transaction_id,
+            orders: ordersData,
+        });
+
+        // Call the API
+        raiseIssue({
+            transaction_id: transaction_id,
+            orders: ordersData,
+        });
+    };
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            <Header showBackButton showHomeButton={false} title="Raise an Issue" />
+            <ScrollView
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+                showsHorizontalScrollIndicator={false}
+            >
+                <View style={styles.contentContainer}>
+                    <View>
+                        {/* Tickets dropdown */}
+                        <View style={styles.formControl}>
+                            <CustomText variant="labelMedium" style={styles.label}>Select Tickets</CustomText>
+                            <MultiSelectDropdown
+                                data={orders.map(item => ({
+                                    label: `${item.startStation} - ${item.destinationStation}`,
+                                    value: item.transaction_id
+                                }))}
+                                placeholder="Select ticket"
+                                selectedLabels={selectedOrders.map(item => `${item.startStation} - ${item.destinationStation}`)}
+                                selectedValues={selectedOrders.map(item => item.transaction_id)}
+                                onValueChange={onChangeOrder}
+                            />
+                        </View>
+
+                        {/* Checkbox for different issues */}
+                        {selectedOrders.length > 1 && (
+                            <View style={[styles.checkboxRow, !differentIssues && { marginBottom: mvs(16) }]}>
+                                <Checkbox
+                                    value={differentIssues}
+                                    onValueChange={setDifferentIssues}
+                                // size={ms(18)}
+                                />
+                                <CustomText variant="labelMedium" style={styles.checkboxLabel}>
+                                    Different issues with each ticket
+                                </CustomText>
+                            </View>
+                        )}
+
+                        {/* Dynamic fields for tickets */}
+                        {(!selectedOrders || !differentIssues) && selectedOrders.length === 0 && (
+                            <View key={selectedOrders[0]?.transaction_id}>
+                                <View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Category</CustomText>
+                                        <DropdownComponent
+                                            data={categories}
+                                            enableSearch={false}
+                                            value={ticketIssues[selectedOrders[0]?.transaction_id]?.category}
+                                            placeholder="Category"
+                                            onChange={item => handleFieldChange(selectedOrders[0]?.transaction_id, 'category', item.value)}
+                                        />
+                                    </View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Subcategory</CustomText>
+                                        <DropdownComponent
+                                            data={(subCategories[ticketIssues[selectedOrders[0]?.transaction_id]?.category] || []).map((sub: any) => ({
+                                                label: sub.value,
+                                                value: sub.key,
+                                            }))}
+                                            value={ticketIssues[selectedOrders[0]?.transaction_id]?.subCategory}
+                                            placeholder="SubCategory"
+                                            enableSearch={false}
+                                            isDisabled={true}
+                                            onChange={item => handleFieldChange(selectedOrders[0]?.transaction_id, 'subCategory', item.value)}
+                                        />
+                                    </View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Subject</CustomText>
+                                        <CustomInput
+                                            name={`subject-${selectedOrders[0]?.transaction_id}`}
+                                            type="text"
+                                            placeholder="Subject"
+                                            floatingLabel={false}
+                                            value={ticketIssues[selectedOrders[0]?.transaction_id]?.subject}
+                                            onChange={value => handleFieldChange(selectedOrders[0]?.transaction_id, 'subject', value)}
+                                        />
+                                    </View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Description</CustomText>
+                                        <CustomInput
+                                            name={`description-${selectedOrders[0]?.transaction_id}`}
+                                            type="textarea"
+                                            placeholder="Detailed Description"
+                                            floatingLabel={false}
+                                            value={ticketIssues[selectedOrders[0]?.transaction_id]?.detailedDescription}
+                                            onChange={value => handleFieldChange(selectedOrders[0]?.transaction_id, 'detailedDescription', value)}
+                                        />
+                                    </View>
+                                </View>
+                            </View>
+                        )}
+
+                        {(selectedOrders.length === 1 || !differentIssues) && selectedOrders.length > 0 && (
+                            <View key={selectedOrders[0].transaction_id}>
+                                <View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Category</CustomText>
+                                        <DropdownComponent
+                                            data={categories}
+                                            enableSearch={false}
+                                            value={ticketIssues[selectedOrders[0].transaction_id]?.category}
+                                            placeholder="Category"
+                                            onChange={item => handleFieldChange(selectedOrders[0].transaction_id, 'category', item.value)}
+                                        />
+                                    </View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Subcategory</CustomText>
+                                        <DropdownComponent
+                                            data={(subCategories[ticketIssues[selectedOrders[0].transaction_id]?.category] || []).map((sub: any) => ({
+                                                label: sub.value,
+                                                value: sub.key,
+                                            }))}
+                                            value={ticketIssues[selectedOrders[0].transaction_id]?.subCategory}
+                                            placeholder="SubCategory"
+                                            enableSearch={false}
+                                            isDisabled={!ticketIssues[selectedOrders[0].transaction_id]?.category}
+                                            onChange={item => handleFieldChange(selectedOrders[0].transaction_id, 'subCategory', item.value)}
+                                        />
+                                    </View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Subject</CustomText>
+                                        <CustomInput
+                                            name={`subject-${selectedOrders[0].transaction_id}`}
+                                            type="text"
+                                            placeholder="Subject"
+                                            floatingLabel={false}
+                                            value={ticketIssues[selectedOrders[0].transaction_id]?.subject}
+                                            onChange={value => handleFieldChange(selectedOrders[0].transaction_id, 'subject', value)}
+                                        />
+                                    </View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Description</CustomText>
+                                        <CustomInput
+                                            name={`description-${selectedOrders[0].transaction_id}`}
+                                            type="textarea"
+                                            placeholder="Detailed Description"
+                                            floatingLabel={false}
+                                            value={ticketIssues[selectedOrders[0].transaction_id]?.detailedDescription}
+                                            onChange={value => handleFieldChange(selectedOrders[0].transaction_id, 'detailedDescription', value)}
+                                        />
+                                    </View>
+                                </View>
+                            </View>
+                        )}
+
+                        {/* Render fields for each ticket if "Different issues" is checked */}
+                        {differentIssues && selectedOrders.length > 1 && selectedOrders.map(order => (
+                            <View key={order.transaction_id}>
+                                <View style={[styles.divider, { backgroundColor: theme.colors.borderLight }]} />
+                                <View >
+                                    <CustomText variant="labelMedium" style={styles.orderTitle}>
+                                        {`${order.startStation} - ${order.destinationStation}`}
+                                    </CustomText>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Category</CustomText>
+                                        <DropdownComponent
+                                            data={categories}
+                                            value={ticketIssues[order.transaction_id]?.category}
+                                            placeholder="Category"
+                                            enableSearch={false}
+                                            onChange={item => handleFieldChange(order.transaction_id, 'category', item.value)}
+                                        />
+                                    </View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Subcategory</CustomText>
+                                        <DropdownComponent
+                                            data={(subCategories[ticketIssues[order.transaction_id]?.category] || []).map((sub: any) => ({
+                                                label: sub.value,
+                                                value: sub.key,
+                                            }))}
+                                            value={ticketIssues[order.transaction_id]?.subCategory}
+                                            placeholder="SubCategory"
+                                            enableSearch={false}
+                                            isDisabled={!ticketIssues[order.transaction_id]?.category}
+                                            onChange={item => handleFieldChange(order.transaction_id, 'subCategory', item.value)}
+                                        />
+                                    </View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Subject</CustomText>
+                                        <CustomInput
+                                            name={`subject-${order.transaction_id}`}
+                                            type="text"
+                                            placeholder="Subject"
+                                            floatingLabel={false}
+                                            value={ticketIssues[order.transaction_id]?.subject}
+                                            onChange={value => handleFieldChange(order.transaction_id, 'subject', value)}
+                                        />
+                                    </View>
+                                    <View style={styles.formControl}>
+                                        <CustomText variant="labelMedium" style={styles.label}>Description</CustomText>
+                                        <CustomInput
+                                            name={`description-${order.transaction_id}`}
+                                            type="textarea"
+                                            placeholder="Detailed Description"
+                                            floatingLabel={false}
+                                            value={ticketIssues[order.transaction_id]?.detailedDescription}
+                                            onChange={value => handleFieldChange(order.transaction_id, 'detailedDescription', value)}
+                                        />
+                                    </View>
+                                </View>
+                            </View>
+                        ))}
+
+                    </View>
+
+                    {/* Submit button */}
+                    <Button
+                        variant="primary"
+                        style={styles.submitButton}
+                        onPress={handleSubmit}
+                        loading={raiseIsuueLoading}
+                        loadingText="Raising..."
+                    >
+                        Submit
+                    </Button>
+                </View>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+    contentContainer: {
+        flex: 1,
+        padding: ms(20),
+        justifyContent: 'space-between'
+    },
+    formControl: {
+        marginBottom: mvs(16),
+        gap: mvs(4),
+    },
+    label: {
+        fontWeight: 'bold',
+        marginBottom: mvs(4)
+    },
+    checkboxRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: ms(8),
+    },
+    checkboxLabel: {
+        flex: 1,
+    },
+    divider: {
+        height: 1,
+        marginVertical: mvs(16),
+    },
+    orderTitle: {
+        fontWeight: 'bold',
+        textDecorationLine: 'underline',
+        marginBottom: mvs(16)
+    },
+    submitButton: {
+        marginTop: mvs(16),
+        height: mvs(50),
+    },
+});
+
+export default RaiseIssueScreen;

package/src/screens/metro/RecentTransactionScreen.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { View, Image, FlatList, RefreshControl, StyleSheet } from 'react-native';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import Header from '../../components/common/Header/Header';
+import { useFetchGetRecentTransactions } from '../../services/apis/transaction/hooks';
+import FooterComponentFlatlist from '../../components/common/Loaders/FooterComponentFlatList';
+import Loader from '../../components/common/Loaders/Loader';
+import { MetroWithTabsScreens } from '../../navigation/metro/MetroWithTabsStack';
+import { MetroScreens, MetroStackNavigationProp, MetroStackRouteProp } from '../../navigation/metro/MetroStack';
+import RecentCard from '../../components/common/Cards/RecentCard';
+import { MetroTabScreens } from '../../navigation/metro/MetroTabs';
+import { ms, mvs } from 'react-native-size-matters';
+import { useTheme } from '../../theme/ThemeProvider';
+import EmptyState from '../../components/common/EmptyState/EmptyState';
+
+const RecentTransactionScreen = () => {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<MetroStackNavigationProp>();
+    const { params: { cityCode } } = useRoute<MetroStackRouteProp<MetroScreens.RecentTransactions>>();
+    const {
+        data: recentTransactions,
+        isPending: recentTransactionsLoading,
+        fetchNextPage,
+        isFetchingNextPage,
+        refetch,
+        isRefetching,
+    } = useFetchGetRecentTransactions({
+        cityCode: cityCode || ''
+    });
+
+    const recentTransactionsData =
+        (recentTransactions?.pages?.map((page) => page?.result || [])?.flat() || [])
+
+    const handleRecentTransactionPress = (item: any) => {
+        navigate(MetroScreens.ChooseTicketType, {
+            startStation: item.startStation,
+            destinationStation: item.destinationStation,
+            cityCode: cityCode || ''
+        });
+    };
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            <Header
+                showBackButton
+                showHomeButton={false}
+                onBackPress={() => navigate(MetroScreens.MetroTabs,
+                    {
+                        screen: MetroTabScreens.MetroWithTabsStack,
+                        params: { screen: MetroWithTabsScreens.SelectStations, params: { from: "", to: "" } }
+                    })}
+                title="My Recent Journeys"
+            />
+
+            {recentTransactionsLoading ? (
+                <Loader />
+            ) : (
+                <FlatList
+                    data={recentTransactionsData}
+                    ListEmptyComponent={
+                        <EmptyState
+                            // image={require('../../assets/images/NoData.png')}
+                            image={require('../../assets/images/NoDataNewTheme.png')}
+                            title="No Issues"
+                        // description="You haven't booked any ticket yet"
+                        />
+                    }
+                    keyExtractor={(item, index) => index.toString()}
+                    contentContainerStyle={styles.listContent}
+                    renderItem={({ item }) => (
+                        <RecentCard item={item} onPress={handleRecentTransactionPress} />
+                    )}
+                    onEndReachedThreshold={0.1}
+                    onEndReached={() => fetchNextPage()}
+                    ListFooterComponent={<FooterComponentFlatlist isFetchingNextPage={isFetchingNextPage} />}
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={isRefetching}
+                            onRefresh={refetch}
+                        />
+                    }
+                />
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    emptyContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: mvs(40),
+    },
+    emptyImage: {
+        width: ms(300),
+        height: mvs(250),
+        alignSelf: 'center',
+    },
+    emptyText: {
+        marginTop: mvs(16),
+    },
+    listContent: {
+        paddingHorizontal: ms(16),
+        paddingTop: mvs(16),
+    },
+});
+
+export default RecentTransactionScreen;

package/src/screens/metro/SelectStations/Components/FooterButton.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useSelectedStationsContext } from '../SelectStationContext';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { MetroWithTabsScreens, MetroWithTabsStackNavigationProp, MetroWithTabsStackRouteProp } from '../../../../navigation/metro/MetroWithTabsStack';
+import { MetroScreens, MetroStackNavigationProp } from '../../../../navigation/metro/MetroStack';
+import { Button } from '../../../../components/common/Button/Button';
+import { useTheme } from '../../../../theme/ThemeProvider';
+import { mvs } from 'react-native-size-matters';
+import { StyleSheet } from 'react-native';
+
+const FooterButton = () => {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<MetroWithTabsStackNavigationProp & MetroStackNavigationProp>();
+    const { currentCity } = useSelectedStationsContext();
+    const { params } = useRoute<MetroWithTabsStackRouteProp<MetroWithTabsScreens.SelectStations>>();
+
+    const handleProceed = () => {
+        navigate(MetroScreens.ChooseTicketType, {
+            startStation: params?.from || "",
+            destinationStation: params?.to || "",
+            cityCode: currentCity?.cityCode || "std:011",
+        });
+    };
+
+    const isDisabled = !params?.from || !params?.to;
+
+    return (
+        <Button
+            variant="primary"
+            size='lg'
+            onPress={handleProceed}
+            disabled={isDisabled}
+            style={styles.button}
+        // textStyle={isDisabled ? { color: theme.colors.textTertiary } : undefined}
+        >
+            Proceed
+        </Button>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: {
+        marginTop: mvs(16),
+        marginBottom: mvs(16),
+    },
+});
+
+export default FooterButton;

package/src/screens/metro/SelectStations/Components/RecentTransactions.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { MetroScreens, MetroStackNavigationProp } from '../../../../navigation/metro/MetroStack';
+import { useSelectedStationsContext } from '../SelectStationContext';
+import RecentCard from '../../../../components/common/Cards/RecentCard';
+import { MetroWithTabsStackNavigationProp } from '../../../../navigation/metro/MetroWithTabsStack';
+import { CustomText } from '../../../../components/common/Text/CustomText';
+import { Button } from '../../../../components/common/Button/Button';
+import { useTheme } from '../../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+
+interface RecentTransactionsDataProps {
+    recentTransactionsData: {
+        startStation: string;
+        destinationStation: string;
+        createdAt: string;
+    }[];
+}
+
+const RecentTransactions = ({ recentTransactionsData }: RecentTransactionsDataProps) => {
+    const { theme } = useTheme();
+    const { currentCity } = useSelectedStationsContext();
+    const { navigate } = useNavigation<MetroWithTabsStackNavigationProp & MetroStackNavigationProp>();
+
+    const handleRecentTransactionPress = (item: any) => {
+        navigate(MetroScreens.ChooseTicketType, {
+            startStation: item.startStation,
+            destinationStation: item.destinationStation,
+            cityCode: currentCity?.cityCode || ''
+        });
+    };
+
+    if (!recentTransactionsData?.length) return null;
+
+    return (
+        <View style={{ marginTop: mvs(8), marginHorizontal: ms(16) }}>
+            <View style={styles.header}>
+                <CustomText variant="labelLarge" style={styles.title}>
+                    Your Recent Journeys
+                </CustomText>
+                <Button
+                    variant="link"
+                    onPress={() => navigate(MetroScreens.RecentTransactions, { cityCode: currentCity?.cityCode || '' })}
+                    textStyle={{ color: theme.colors.primary[500] }}
+                    style={styles.viewAllButton}
+                >
+                    View All
+                </Button>
+            </View>
+            <FlatList
+                data={recentTransactionsData}
+                renderItem={({ item }) => (
+                    <RecentCard item={item} onPress={handleRecentTransactionPress} />
+                )}
+                keyExtractor={(item, index) => index.toString()}
+                showsVerticalScrollIndicator={false}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: mvs(8),
+        marginTop: mvs(4)
+    },
+    title: {
+        fontWeight: 'bold',
+        fontSize: ms(16),
+        paddingHorizontal: ms(4),
+    },
+    viewAllButton: {
+        padding: ms(4),
+    },
+});
+
+export default RecentTransactions;