oneticket-sdk-vi 1.0.0

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

@@ -0,0 +1,147 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { AuthScreens, AuthStackNavigationProp } from '../../../../navigation/AuthStack';
+import { MetroScreenParams, MetroScreens } from '../../../../navigation/metro/MetroStack';
+import { MetroWithTabsScreens, MetroWithTabsStackRouteProp } from '../../../../navigation/metro/MetroWithTabsStack';
+import { MetroTabScreens } from '../../../../navigation/metro/MetroTabs';
+import MetroIcon from '../../../../assets/icons/MetroIcon';
+import SwapIcon from '../../../../assets/icons/SwapIcon';
+import { CustomText } from '../../../../components/common/Text/CustomText';
+import { useTheme } from '../../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import { Button } from '../../../../components/common/Button/Button';
+
+const ToAndFromStations = () => {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<AuthStackNavigationProp>();
+    const { params } = useRoute<MetroWithTabsStackRouteProp<MetroWithTabsScreens.SelectStations>>();
+
+    const handleStationClick = (type: MetroScreenParams["ChooseStation"]["type"]) => {
+        if (type === "TO" && !params?.from) return;
+        navigate(AuthScreens.MetroStack, {
+            screen: MetroScreens.ChooseStation,
+            params: {
+                type,
+                from: params?.from,
+                to: params?.to
+            }
+        });
+    };
+
+    const handleSwapStations = () => {
+        if (!params?.from || !params?.to) return;
+
+        navigate(AuthScreens.MetroStack, {
+            screen: MetroScreens.MetroTabs,
+            params: {
+                screen: MetroTabScreens.MetroWithTabsStack,
+                params: {
+                    screen: MetroWithTabsScreens.SelectStations,
+                    params: {
+                        from: params.to,
+                        to: params.from,
+                    }
+                }
+            }
+        });
+    };
+
+    const fromColor = params?.from ? theme.colors.primary[500] : theme.colors.textTertiary;
+    const toColor = params?.to ? theme.colors.primary[500] : theme.colors.textTertiary;
+    const swapButtonBg = params?.from && params?.to ? theme.colors.primary[500] : theme.colors.surfaceVariant;
+    const swapButtonDisabled = !params?.from || !params?.to;
+
+    return (
+        <View style={styles.container}>
+            {/* From Station */}
+            <TouchableOpacity onPress={() => handleStationClick("FROM")}>
+                <View style={styles.stationRow}>
+                    <MetroIcon size={ms(20)} color={fromColor} />
+                    <CustomText
+                        variant="body1"
+                        style={[
+                            styles.stationText,
+                            { color: params?.from ? theme.colors.text : theme.colors.textTertiary }
+                        ]}
+                    >
+                        {params?.from || "Source"}
+                    </CustomText>
+                </View>
+            </TouchableOpacity>
+
+            <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
+
+            {/* To Station */}
+            <TouchableOpacity onPress={() => handleStationClick("TO")}>
+                <View style={styles.stationRow}>
+                    <MetroIcon size={ms(20)} color={toColor} />
+                    <CustomText
+                        variant="body1"
+                        style={[
+                            styles.stationText,
+                            { color: params?.to ? theme.colors.text : theme.colors.textTertiary }
+                        ]}
+                    >
+                        {params?.to || "Destination"}
+                    </CustomText>
+                </View>
+            </TouchableOpacity>
+
+            {/* Floating Swap Button */}
+            <View style={styles.swapButtonContainer}>
+                <Button
+                    variant="text"
+                    size='sm'
+                    onPress={handleSwapStations}
+                    disabled={swapButtonDisabled}
+                    style={{
+                        borderRadius: ms(18),
+                        paddingHorizontal: ms(12),
+                        backgroundColor: swapButtonBg,
+                        opacity: swapButtonDisabled ? 0.7 : 1,
+                        shadowColor: theme.colors.shadow,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.2,
+                        shadowRadius: 2,
+                        elevation: 2,
+                    }}
+                >
+                    <SwapIcon
+                        size={ms(14)}
+                        color={swapButtonDisabled ? theme.colors.textTertiary : theme.colors.white}
+                    />
+                </Button>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+    },
+    stationRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: mvs(16),
+        gap: ms(8),
+    },
+    stationText: {
+        fontWeight: '500',
+    },
+    divider: {
+        height: 1,
+        width: '100%',
+    },
+    swapButtonContainer: {
+        position: 'absolute',
+        right: ms(8),
+        top: '50%',
+        marginTop: mvs(-20),
+        zIndex: 10,
+    },
+});
+
+
+export default ToAndFromStations;

package/src/screens/metro/SelectStations/SelectStationContext.tsx

@@ -0,0 +1,82 @@
+import React,{ createContext, Dispatch, SetStateAction, useContext, useEffect, useState } from "react";
+import { useFetchCurrectCity } from "../../../services/apis/city/hooks";
+import { CurrectCityApiResponse } from "../../../services/apis/city/types";
+import { useMutateFindNearestStation } from "../../../services/apis/metro/stations/hooks";
+import { useNavigation, useRoute } from "@react-navigation/native";
+import { MetroWithTabsScreens, MetroWithTabsStackNavigationProp, MetroWithTabsStackRouteProp } from "../../../navigation/metro/MetroWithTabsStack";
+import { useFetchGetRecentTransactions } from "../../../services/apis/transaction/hooks";
+import { GetRecentTransactionsApiResponse } from "../../../services/apis/transaction/types";
+import { InfiniteData } from "@tanstack/react-query";
+
+interface SelectedStationsContextProps {
+    loading: boolean;
+    setLoading: Dispatch<SetStateAction<boolean>>;
+    currentCity: CurrectCityApiResponse | undefined;
+    currentCityLoading: boolean;
+    findNearestStationLoading: boolean;
+    recentTransactions: InfiniteData<GetRecentTransactionsApiResponse, unknown> | undefined;
+}
+
+const SelectedStationsContext = createContext<SelectedStationsContextProps | undefined>(undefined);
+
+interface props {
+    children: React.ReactNode;
+}
+
+export const SelectedStationsProvider = ({ children }: props) => {
+    const [loading, setLoading] = useState(true);
+    const { setParams } = useNavigation<MetroWithTabsStackNavigationProp<MetroWithTabsScreens.SelectStations>>();
+    const { params } = useRoute<MetroWithTabsStackRouteProp<MetroWithTabsScreens.SelectStations>>();
+    const { data: currentCity, isLoading: currentCityLoading } = useFetchCurrectCity({});
+    const { data: recentTransactions, isPending: recentTransactionsLoading } = useFetchGetRecentTransactions({
+        cityCode: currentCity?.cityCode || ''
+    });
+
+    const { mutateAsync: findNearestStation, isPending: findNearestStationLoading } = useMutateFindNearestStation(
+        (data) => {
+            setParams({
+                from: data?.station?.station_name,
+                to: params?.to
+            })
+        },
+        (data) => {
+            console.log(data)
+        }
+    );
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            if (
+                currentCityLoading ||
+                findNearestStationLoading ||
+                recentTransactionsLoading
+            ) {
+                setLoading(true);
+            } else {
+                setLoading(false);
+            }
+        }, 100); // Adjust to 100-200ms if needed
+
+        return () => clearTimeout(timeout);
+    }, [currentCityLoading, findNearestStationLoading, recentTransactionsLoading]);
+
+
+    return (
+        <SelectedStationsContext.Provider value={{
+            loading, setLoading,
+            currentCity, currentCityLoading,
+            findNearestStationLoading,
+            recentTransactions
+        }}>
+            {children}
+        </SelectedStationsContext.Provider>
+    )
+}
+
+export const useSelectedStationsContext = () => {
+    const context = useContext(SelectedStationsContext);
+    if (!context) {
+        throw new Error('useSelectedStationsContext must be used within a SelectedStationsProvider');
+    }
+    return context;
+};

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { View, StyleSheet, Image } from 'react-native';
+import Header from '../../../components/common/Header/Header';
+import ToAndFromStations from './Components/ToAndFromStations';
+import { useSelectedStationsContext } from './SelectStationContext';
+import FooterButton from './Components/FooterButton';
+import FullScreenLoader from '../../../components/common/Loaders/FullScreenLoader';
+import RecentTransactions from './Components/RecentTransactions';
+import { CustomText } from '../../../components/common/Text/CustomText';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import PoweredBy from '../../../components/common/PoweredBy/PoweredBy';
+
+const SelectStations = () => {
+    const { theme } = useTheme();
+    const { loading, recentTransactions, currentCityLoading, findNearestStationLoading } = useSelectedStationsContext();
+
+    const recentTransactionsData =
+        (recentTransactions?.pages?.map((page) => page?.result || [])?.flat() || [])
+            .sort(({ a, b }: any) => (b?.createdAt) - (a?.createdAt))
+            .slice(0, 3);
+
+    if (loading) {
+        return <FullScreenLoader />;
+    }
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            <Header
+                showBackButton={false}
+                showHomeButton={false}
+                showChooseCity
+                title='Select Stations'
+            />
+
+            <View style={{ flex: 1, justifyContent: 'space-between' }}>
+                <View>
+                    <View style={[
+                        styles.stationsContainer,
+                        {
+                            backgroundColor: theme.colors.background,
+                            shadowColor: theme.colors.shadow
+                        }
+                    ]}>
+                        <ToAndFromStations />
+                        <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
+                        <FooterButton />
+                    </View>
+
+                    <RecentTransactions recentTransactionsData={recentTransactionsData} />
+                </View>
+
+                <View style={styles.footer}>
+                    <PoweredBy />
+                </View>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    stationsContainer: {
+        paddingHorizontal: ms(12),
+        marginTop: mvs(24),
+        borderRadius: ms(8),
+        width: '90%',
+        alignSelf: 'center',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: ms(4),
+        elevation: 2,
+    },
+    divider: {
+        height: 1,
+        width: '100%',
+    },
+    footer: {
+        paddingVertical: mvs(12),
+    }
+});
+
+export default SelectStations;

package/src/screens/metro/TicketDetailsScreen.tsx

@@ -0,0 +1,326 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    View,
+    ScrollView,
+    Pressable,
+    StyleSheet,
+    ActivityIndicator,
+    RefreshControl
+} from 'react-native';
+import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
+import { BackHandler } from 'react-native';
+import Header from '../../components/common/Header/Header';
+import FullScreenLoader from '../../components/common/Loaders/FullScreenLoader';
+import { useFetchgetMetroTicketStatus } from '../../services/apis/metro/status/hooks';
+import { MetroScreens, MetroStackNavigationProp } from '../../navigation/metro/MetroStack';
+import HelpIcon from '../../assets/icons/HelpIcon';
+import { MetroWithTabsScreens, MetroWithTabsStackNavigationProp, MetroWithTabsStackRouteProp } from '../../navigation/metro/MetroWithTabsStack';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import NetInfo from '@react-native-community/netinfo';
+import { removeOldTicketData } from '../../utils/offlineHelper';
+import QRCodeSection from '../../components/ticketDetail/QRCodeSection';
+import BillingDetailsSection from '../../components/ticketDetail/BillingDetailsSection';
+import TicketDetailSection from '../../components/ticketDetail/TicketDetailSection';
+import CancellationModal from '../../components/common/Modals/CancellationModal';
+import RouteSection from '../../components/ticketDetail/RouteSection';
+import { useTheme } from '../../theme/ThemeProvider';
+import { Button } from '../../components/common/Button/Button';
+import { CustomText } from '../../components/common/Text/CustomText';
+import { ms, mvs } from 'react-native-size-matters';
+
+const TicketDetailsScreen = () => {
+    const { theme } = useTheme();
+    const { navigate, goBack } = useNavigation<MetroWithTabsStackNavigationProp & MetroStackNavigationProp>();
+    const {
+        params: { transaction_id },
+    } = useRoute<MetroWithTabsStackRouteProp<MetroWithTabsScreens.TicketDetails>>();
+
+    const [ticketData, setTicketData] = useState<any>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isCancelModalVisible, setIsCancelModalVisible] = useState(false);
+    const [showCancellationDetails, setShowCancellationDetails] =
+        useState<Boolean>(false);
+
+    const todayDate = new Date().toISOString().split('T')[0];
+
+    const { data: getTicketStatus, error, isLoading: getTicketStatusLoading, refetch } = useFetchgetMetroTicketStatus({ transaction_id });
+
+    useEffect(() => {
+        if (getTicketStatusLoading) {
+            setIsLoading(true);
+            return;
+        }
+
+        if (getTicketStatus?.result) {
+            const { createdAt } = getTicketStatus.result;
+            // Check if createdAt matches today's date
+            setTicketData(getTicketStatus.result);
+            setIsLoading(false);
+            if (createdAt && createdAt.split('T')[0] === todayDate) {
+                storeTicketData(getTicketStatus.result);
+            }
+        } else if (error) {
+            console.error('Error fetching ticket data:', error);
+            setIsLoading(false);
+        }
+    }, [getTicketStatus, error, getTicketStatusLoading]);
+
+    // Save data and remove outdated tickets
+    const storeTicketData = async (ticketStatus: any) => {
+        try {
+            // Save the data with today's date
+            const ticketKey = `ticket_${transaction_id}_${todayDate}`;
+            await AsyncStorage.setItem(ticketKey, JSON.stringify(ticketStatus));
+
+            // Remove other tickets that are not from today
+            await removeOldTicketData(todayDate);
+        } catch (error) {
+            console.error('Error saving ticket data:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // Fetch ticket data from offline storage
+    const fetchOfflineData = async () => {
+        try {
+            const storedData = await AsyncStorage.getItem(`ticket_${transaction_id}_${todayDate}`);
+            if (storedData) {
+                setTicketData(JSON.parse(storedData));
+            }
+        } catch (error) {
+            console.error('Error fetching offline ticket data:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // Check internet connection and fetch data accordingly
+    const checkAndFetchData = async () => {
+        const netInfo = await NetInfo.fetch();
+        if (netInfo.isConnected) {
+            // Don't call fetchAndStoreTicketData as the hook is already used
+            if (!getTicketStatusLoading && getTicketStatus?.result) {
+                const { createdAt } = getTicketStatus.result;
+                // Check if createdAt matches today's date
+                if (createdAt && createdAt.split('T')[0] === todayDate) {
+                    storeTicketData(getTicketStatus.result);
+                }
+            }
+        } else {
+            await fetchOfflineData();
+        }
+    };
+
+    useEffect(() => {
+        checkAndFetchData();
+    }, [transaction_id, getTicketStatus]);
+
+    // Custom Android back button behavior
+    useFocusEffect(
+  useCallback(() => {
+    const onBackPress = () => {
+      goBack();
+      return true;
+    };
+
+    const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+
+    return () => {
+      if (typeof subscription?.remove === 'function') {
+        subscription.remove(); // RN 0.72+
+      } else {
+        BackHandler.removeEventListener?.('hardwareBackPress', onBackPress); // RN < 0.72
+      }
+    };
+  }, [goBack])
+);
+
+    const handleRaiseIssue = () => navigate(MetroScreens.RaiseIssue, {
+        transaction_id: ticketData?._id || "",
+        orders: ticketData?.tickets?.[0]?.map((item: any) => ({
+            startStation: item.startStation,
+            destinationStation: item.destinationStation,
+            transaction_id: item.transaction_id
+        })) || []
+    })
+
+    const shouldShowCancelButton = useMemo(() => {
+        if (!ticketData) return false;
+
+        // Check if createdAt exists and matches today
+        const createdDate = ticketData.createdAt?.split('T')[0];
+        const isToday = createdDate === todayDate;
+
+        // Check first ticket status inside tickets
+        const firstTicketStatus = ticketData?.tickets?.[0]?.[0]?.status;
+
+        return (
+            ticketData.isCancellationAvilable === true &&
+            ticketData.status === "SUCCESSFUL" &&
+            isToday &&
+            firstTicketStatus === "UNCLAIMED" &&
+            ticketData.status !== "CANCELLED" &&
+            ticketData.status !== "CANCEL_INITIATED"
+        );
+    }, [ticketData, todayDate]);
+
+    const handleRefresh = async () => {
+        try {
+            setIsRefreshing(true);
+            await refetch();
+        } catch (error) {
+            console.error('Error refreshing ticket:', error);
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+
+    if (isLoading) {
+        return <FullScreenLoader />;
+    }
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            <Header
+                showBackButton
+                onBackPress={() => goBack()}
+                title="QR Ticket"
+                rightComponent={
+                    <View>
+                        <Button
+                            size='sm'
+                            variant="text"
+                            onPress={handleRaiseIssue}
+                        >
+                            <HelpIcon size={20} color={theme.colors.text} />
+                        </Button>
+                    </View>
+                }
+            />
+            <ScrollView
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+                showsHorizontalScrollIndicator={false}
+                refreshControl={
+                    <RefreshControl
+                        refreshing={isRefreshing}
+                        onRefresh={handleRefresh}
+                        colors={[theme.colors.primary[500]]}         // Android spinner color
+                        tintColor={theme.colors.primary[500]}       // iOS spinner color
+                    />
+                }
+
+            >
+                <View style={[styles.contentContainer, { backgroundColor: theme.colors.backdrop }]}>
+
+                    {/* qr tickets */}
+                    <QRCodeSection
+                        tickets={ticketData?.tickets}
+                        isMultipleProviders={ticketData?.multipleProviders}
+                        issuedOn={ticketData?.createdAt}
+                        status={ticketData?.status}
+                        startStation={ticketData?.startStation}
+                        destinationStation={ticketData?.destinationStation}
+                    />
+
+                    {/* Route Section */}
+                    {getTicketStatus?.result?.routes?.length ? <RouteSection routes={getTicketStatus?.result?.routes} /> : null}
+
+                    {/* Billing Details Section */}
+                    {(ticketData.status === "SUCCESSFUL" || ticketData.status === "CANCELLED" || ticketData.status === "CANCEL_INITIATED") && (
+                        <BillingDetailsSection
+                            billingDetails={ticketData?.billingDetails}
+                            status={ticketData?.status}
+                            totalPrice={ticketData?.totalPrice}
+                            cancellationCharges={ticketData?.cancellationCharges}
+                            refundAmount={ticketData?.refundAmount}
+                        />
+                    )}
+
+                    {/* Ticket Details Section */}
+                    <TicketDetailSection
+                        status={ticketData?.status}
+                        itemName={ticketData?.itemName}
+                        ticketCount={ticketData?.ticketCount}
+                        totalPrice={ticketData?.totalPrice}
+                    />
+
+                    {/* help links */}
+                    <View style={[styles.helpContainer, { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow }]}>
+                        <View style={styles.helpTextContainer}>
+                            <CustomText variant="body1">Having any issue?</CustomText>
+                            <Pressable onPress={handleRaiseIssue}>
+                                <CustomText
+                                    variant="body1"
+                                    style={{ color: theme.colors.primary[500], marginLeft: 4 }}
+                                >
+                                    Raise Issue
+                                </CustomText>
+                            </Pressable>
+                        </View>
+
+                        {/* cancel button */}
+                        {shouldShowCancelButton && !showCancellationDetails && (
+                            <Button
+                                variant="outlined"
+                                style={styles.cancelButton}
+                                textStyle={{ color: theme.colors.error[500] }}
+                                pressedStyle={{ backgroundColor: theme.colors.error[100] }}
+                                onPress={() => setIsCancelModalVisible(true)}
+                            >
+                                Cancel Ticket
+                            </Button>
+                        )}
+                    </View>
+                </View>
+            </ScrollView>
+            <CancellationModal
+                isCancelModalVisible={isCancelModalVisible}
+                setIsCancelModalVisible={setIsCancelModalVisible}
+                setShowCancellationDetails={setShowCancellationDetails}
+                transaction_id={transaction_id}
+                onCancelSuccess={() => {
+                    setShowCancellationDetails(true);
+                    refetch();
+                }}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+    contentContainer: {
+        flex: 1,
+        padding: ms(20),
+        gap: mvs(16),
+    },
+    helpContainer: {
+        width: '100%',
+        padding: ms(12),
+        borderRadius: ms(8),
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: ms(4),
+        elevation: 2,
+        gap: ms(8),
+    },
+    helpTextContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    cancelButton: {
+        marginTop: mvs(12),
+        borderColor: 'red',
+    },
+});
+
+export default TicketDetailsScreen;