oneticket-sdk-vi 1.0.0

package/src/components/ticketDetail/RouteSection.tsx

@@ -0,0 +1,252 @@
+import React, { useMemo, useState } from 'react';
+import { View, Pressable, StyleSheet } from 'react-native';
+import { CustomText } from '../common/Text/CustomText';
+import ChangeIcon from '../../assets/icons/ChangeIcon';
+import { GetMetroTicketStatusApiResponse } from '../../services/apis/metro/status/types';
+import { consoleFunc } from '../../utils/consoleFunc';
+import WalkIcon from '../../assets/icons/WalkIcon';
+import { useTheme } from '../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import ChevronUpIcon from '../../assets/icons/ChevronUpIcon';
+import ChevronDownIcon from '../../assets/icons/ChevronDownIcon';
+
+interface RouteSectionProps {
+    routes: GetMetroTicketStatusApiResponse["result"]['routes'];
+}
+
+const RouteSection: React.FC<RouteSectionProps> = ({ routes }: RouteSectionProps) => {
+    const { theme } = useTheme();
+    const [isOpen, setIsOpen] = useState(false);
+
+    // Count the number of station objects (excluding instruction strings)
+    const stationCount = useMemo(() => {
+        const stationNames = new Set<string>();
+
+        routes?.forEach(route => {
+            if (typeof route === 'object' && route.station_name) {
+                stationNames.add(route.station_name);
+            }
+        });
+
+        return stationNames.size;
+    }, [routes]);
+
+    // Calculate line segments with counts
+    const lineSegments = useMemo(() => {
+        const segments: { startIndex: number, count: number, lineColor: string }[] = [];
+        let currentColor = '';
+        let currentCount = 0;
+        let startIndex = 0;
+
+        routes?.forEach((route, index) => {
+            if (typeof route === 'object' && route.lineColor) {
+                if (route.lineColor !== currentColor) {
+                    if (currentCount > 0) {
+                        segments.push({
+                            startIndex,
+                            count: currentCount,
+                            lineColor: currentColor
+                        });
+                    }
+                    currentColor = route.lineColor;
+                    currentCount = 1;
+                    startIndex = index;
+                } else {
+                    currentCount++;
+                }
+            }
+        });
+
+        // Push the last segment
+        if (currentCount > 0) {
+            segments.push({
+                startIndex,
+                count: currentCount,
+                lineColor: currentColor
+            });
+        }
+
+        return segments;
+    }, [routes]);
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow }]}>
+            {/* Accordion Header */}
+            <Pressable
+                onPress={() => setIsOpen(!isOpen)}
+                style={styles.header}
+            >
+                <View style={styles.headerContent}>
+                    <View style={styles.headerTextContainer}>
+                        <CustomText variant="labelLarge" style={styles.headerText}>
+                            Route Details
+                        </CustomText>
+                        <CustomText variant="body2" style={{ color: theme.colors.gray[500] }}>
+                            ({stationCount} stations)
+                        </CustomText>
+                    </View>
+                    {isOpen ? (
+                        <ChevronUpIcon size={ms(20)} color={theme.colors.text} />
+                    ) : (
+                        <ChevronDownIcon size={ms(20)} color={theme.colors.text} />
+                    )}
+                </View>
+            </Pressable>
+
+            {/* Accordion Content */}
+            {isOpen && (
+                <View style={styles.content}>
+                    {routes?.map((station, index) => {
+                        // Check if this is the first station of a line segment
+                        const segmentInfo = lineSegments.find(seg => seg.startIndex === index);
+
+                        return (
+                            <View key={index} style={styles.routeItem}>
+                                {/* Dot/Icon */}
+                                <View style={styles.iconContainer}>
+                                    {(typeof station === 'string' || station.instructions) ? (
+                                        typeof station === 'string' && station.toLowerCase().includes('exit') ? (
+                                            <View style={styles.iconWrapper}>
+                                                <WalkIcon color={theme.colors.text} size={ms(18)} />
+                                            </View>
+                                        ) : (
+                                            <View style={styles.iconWrapper}>
+                                                <ChangeIcon color={theme.colors.text} size={ms(18)} />
+                                            </View>
+                                        )
+                                    ) : (
+                                        <View style={[
+                                            styles.dot,
+                                            { backgroundColor: station.lineColor }
+                                        ]} />
+                                    )}
+
+                                    {/* Line below each dot/icon, except the last one */}
+                                    {index < routes.length - 1 && (
+                                        <View
+                                            style={[
+                                                styles.line,
+                                                {
+                                                    backgroundColor: typeof station === 'object' ?
+                                                        station?.lineColor :
+                                                        theme.colors.gray[400]
+                                                }
+                                            ]}
+                                        />
+                                    )}
+                                </View>
+
+                                {/* Info box on the right */}
+                                <View style={styles.infoContainer}>
+                                    {typeof station === 'object' ? (
+                                        <View style={styles.stationHeader}>
+                                            <CustomText variant="body1" style={styles.stationName}>
+                                                {station.station_name}
+                                            </CustomText>
+                                            {segmentInfo && (
+                                                <CustomText variant="caption" style={{ color: theme.colors.gray[500] }}>
+                                                    ({segmentInfo.count} stations)
+                                                </CustomText>
+                                            )}
+                                        </View>
+                                    ) : (
+                                        <CustomText variant="body2" style={styles.instructionText}>
+                                            {station}
+                                        </CustomText>
+                                    )}
+                                    {typeof station === 'object' && (
+                                        (typeof station === 'object' && station.instructions) ? (
+                                            <CustomText variant="caption" style={styles.instructionText}>
+                                                {station.instructions}
+                                            </CustomText>
+                                        ) : (
+                                            <CustomText variant="caption" style={styles.instructionText}>
+                                                {typeof station === 'object' && station.type}
+                                            </CustomText>
+                                        )
+                                    )}
+                                </View>
+                            </View>
+                        );
+                    })}
+                </View>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        padding: ms(16),
+        borderRadius: ms(8),
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: ms(4),
+        elevation: 2,
+        gap: 0,
+    },
+    header: {
+        paddingBottom: mvs(8),
+    },
+    headerContent: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    headerTextContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: ms(8),
+    },
+    headerText: {
+        fontWeight: 'bold',
+    },
+    content: {
+        marginTop: mvs(16),
+        // gap: mvs(16),
+    },
+    routeItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        // gap: ms(16),
+    },
+    iconContainer: {
+        alignItems: 'center',
+        width: ms(24),
+    },
+    iconWrapper: {
+        marginRight: ms(-6),
+        // marginVertical: mvs(4),
+    },
+    dot: {
+        width: ms(8),
+        height: ms(8),
+        borderRadius: ms(4),
+    },
+    line: {
+        borderRadius: ms(2),
+        width: ms(3),
+        flex: 1,
+        // marginTop: mvs(4),
+    },
+    infoContainer: {
+        flex: 1,
+        paddingHorizontal: ms(8),
+    },
+    stationHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: ms(8),
+        marginTop: mvs(-6),
+    },
+    stationName: {
+        fontWeight: '600',
+    },
+    instructionText: {
+        marginBottom: mvs(16),
+        fontStyle: 'italic',
+    },
+});
+
+export default RouteSection;

package/src/components/ticketDetail/TicketDetailSection.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../theme/ThemeProvider';
+import { CustomText } from '../common/Text/CustomText';
+import Badge from '../common/Badge/Badge';
+import { ms, mvs } from 'react-native-size-matters';
+
+interface TicketDetailSectionProps {
+    itemName: string;
+    status: string;
+    ticketCount: number;
+    totalPrice: number;
+}
+
+const TicketDetailSection: React.FC<TicketDetailSectionProps> = ({
+    itemName,
+    status,
+    ticketCount,
+    totalPrice
+}) => {
+    const { theme } = useTheme();
+
+    const styles = StyleSheet.create({
+        container: {
+            width: '100%',
+            padding: ms(12),
+            borderRadius: ms(8),
+            backgroundColor: theme.colors.background,
+            shadowColor: theme.colors.shadow,
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: ms(4),
+            elevation: 2,
+            gap: ms(8),
+        },
+        title: {
+            textAlign: 'center',
+            marginBottom: mvs(8),
+            fontWeight: 'bold',
+        },
+        row: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        valueText: {
+            color: theme.colors.primary[500], // teal-600 equivalent
+            fontWeight: '500',
+        },
+    });
+
+    const getBadgeVariant = () => {
+        if (status === 'SUCCESSFUL') return 'success';
+        if (status === 'CANCELLED') return 'error';
+        return 'warning';
+    };
+
+    return (
+        <View style={styles.container}>
+            <CustomText variant="labelLarge" style={styles.title}>
+                Ticket Details
+            </CustomText>
+
+            <View style={styles.row}>
+                <CustomText variant="body1">Ticket Type</CustomText>
+                <CustomText variant="body1" style={styles.valueText}>
+                    {itemName}
+                </CustomText>
+            </View>
+
+            <View style={styles.row}>
+                <CustomText variant="body1">Status</CustomText>
+                <Badge
+                    text={status}
+                    variant={getBadgeVariant()}
+                />
+            </View>
+
+            <View style={styles.row}>
+                <CustomText variant="body1">Total Tickets</CustomText>
+                <CustomText variant="body1" style={styles.valueText}>
+                    {ticketCount}
+                </CustomText>
+            </View>
+
+            {(status === "PAYMENT_FAILED" || status === "PAYMENT_INITIATED") && (
+                <View style={styles.row}>
+                    <CustomText variant="body1">Amount</CustomText>
+                    <CustomText variant="body1" style={styles.valueText}>
+                        ₹{totalPrice || 0}
+                    </CustomText>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export default TicketDetailSection;

package/src/helper/getProviders.ts

@@ -0,0 +1,58 @@
+// import { GetMetroStationsApiResponse } from "../services/apis/metro/providers/types";
+
+// const obj1 = {
+//     "name": "AIIMS ",
+//     "providers": [
+//         {
+//             "bpp_id": "ondc.sequelstring.com/seller/protocol",
+//             "metroImg": "https://ondc.org/assets/theme/images/ondc_registered_logo.svg?v=399788fda7",
+//             "name": "Sequel Delhi Metro Limited",
+//             "stationCode": "AIIMS"
+//         },
+//         {
+//             "bpp_id": "pramaan.ondc.org/beta/preprod/mock/seller",
+//             "metroImg": "https://ondc.org/assets/theme/images/ondc_registered_logo.svg?v=399788fda7",
+//             "name": "ONDC Metro Limited",
+//             "stationCode": "AIIMS"
+//         },
+//         {
+//             "bpp_id": "ondc-preprod.sequelstring.com/seller/dmrc",
+//             "metroImg": "https://delhimetrorail.com/static/media/logo-passenger.d3afd408.svg",
+//             "name": "Delhi Metro Rail Corporation",
+//             "stationCode": "87"
+//         }
+//     ]
+// };
+// const obj2 = {
+//     "name": "BOTANICAL GARDEN ",
+//     "providers": [
+//         {
+//             "bpp_id": "ondc.sequelstring.com/seller/protocol",
+//             "metroImg": "https://ondc.org/assets/theme/images/ondc_registered_logo.svg?v=399788fda7",
+//             "name": "Sequel Delhi Metro Limited", "stationCode": "BCGN"
+//         },
+//         {
+//             "bpp_id": "pramaan.ondc.org/beta/preprod/mock/seller",
+//             "metroImg": "https://ondc.org/assets/theme/images/ondc_registered_logo.svg?v=399788fda7",
+//             "name": "ONDC Metro Limited", "stationCode": "BCGN"
+//         }
+//     ]
+// }
+
+
+export const getProviders = ({ startStation, destinationStation }: { startStation: any["stations"][number], destinationStation: any["stations"][number] }) => {
+    // return startStation.providers
+    //     .filter(provider1 =>
+    //         destinationStation.providers.some(provider2 => provider1.bpp_id === provider2.bpp_id)
+    //     )
+    //     .map(provider1 => {
+    //         // Find the matching provider2 to get destinationStationCode
+    //         const matchingProvider = destinationStation.providers.find(provider2 => provider1.bpp_id === provider2.bpp_id);
+    //         const { stationCode, ...restData } = provider1;
+    //         return {
+    //             ...restData,
+    //             startStationCode: provider1.stationCode, // Include stationCode from obj1
+    //             destinationStationCode: matchingProvider ? matchingProvider.stationCode : null // Include stationCode from obj2
+    //         };
+    //     });
+}

package/src/helper/itemsLowestFare.ts

@@ -0,0 +1,16 @@
+// import { GetMetroFaresWithProvidersApiRepsonse } from "../services/apis/metro/fare/types";
+
+export const itemsLowestFare = (item: any["items"][number]) => {
+    if (item.providers?.length > 0) {
+        let lowestFare = parseFloat(item.providers[0].price.value) || 0;
+        for (let i = 0; i < item.providers.length; i++) {
+            const provider = item.providers[i];
+            const fare = parseFloat(provider.price.value) || 0;
+            if (lowestFare > fare) {
+                lowestFare = fare;
+            }
+        }
+        return lowestFare;
+    }
+    return 0;
+}

package/src/hooks/useSessionTracker.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react';
+import { AppState } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useMutateEndSession, useMutateStartSession } from '../services/apis/session/hooks';
+
+export default function useSessionTracker(userId: string) {
+    const appState = useRef(AppState.currentState);
+    const sessionId = useRef<string | null>(null);
+    const { mutateAsync: startSession, isPending: startSessionLoading } = useMutateStartSession(data => {
+
+    })
+    const { mutateAsync: endSession, isPending: endSessionLoading } = useMutateEndSession(data => {
+
+    })
+    useEffect(() => {
+        const handleAppStateChange = async (nextAppState: any) => {
+            if (
+                appState.current.match(/inactive|background/) &&
+                nextAppState === 'active'
+            ) {
+                // App came to foreground
+                sessionId.current = `${userId}-${Date.now()}`;
+                startSession({ sessionId: sessionId.current })
+                await AsyncStorage.setItem('sessionId', sessionId.current);
+            }
+
+            if (
+                appState.current === 'active' &&
+                nextAppState.match(/inactive|background/)
+            ) {
+                // App going to background
+                const storedSessionId = await AsyncStorage.getItem('sessionId');
+                endSession({ sessionId: storedSessionId || "" });
+            }
+
+            appState.current = nextAppState;
+        };
+
+        const subscription = AppState.addEventListener('change', handleAppStateChange);
+        return () => subscription.remove();
+    }, []);
+}

package/src/navigation/AuthStack.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { createNativeStackNavigator, NativeStackNavigationProp, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { NavigatorScreenParams, RouteProp } from '@react-navigation/native';
+import DetailsScreen from '../screens/auth/DetailsScreen';
+import SuccessScreen from '../screens/auth/SuccessScreen';
+// import TransportationSelectionScreen from '../screens/metro/TransportationSelectionScreen';
+import { useFetchLoggedInUser } from '../services/apis/auth/hooks';
+import FullScreenLoader from '../components/common/Loaders/FullScreenLoader';
+import MetroStack, { MetroScreenParams } from './metro/MetroStack';
+// import BusStack, { BusScreenParams } from './bus/BusStack';
+import ProfileStack, { ProfileScreenParams } from './metro/ProfileStack';
+import useSessionTracker from '../hooks/useSessionTracker';
+
+const Stack = createNativeStackNavigator();
+
+export enum AuthScreens {
+    Details = "Details",
+    Success = "Success",
+    // TransportationSelection = "TransportationSelection",
+
+    MetroStack = 'MetroStack',
+    ProfileStack = "ProfileStack"
+}
+
+export type AuthScreenParams = {
+    [AuthScreens.Details]: undefined;
+    [AuthScreens.Success]: {
+        title: string;
+        message: string;
+        buttonText?: string;
+        showButton?: boolean;
+        isSuccess: boolean;
+        // navigateTo: AuthScreens.TransportationSelection;
+        navigateTo?: boolean;
+    };
+    // [AuthScreens.TransportationSelection]: undefined;
+    [AuthScreens.MetroStack]: NavigatorScreenParams<MetroScreenParams>;
+    [AuthScreens.ProfileStack]: NavigatorScreenParams<ProfileScreenParams>
+
+}
+
+export type AuthScreenProps<RouteName extends keyof AuthScreenParams = AuthScreens> = NativeStackScreenProps<AuthScreenParams, RouteName>;
+export type AuthStackNavigationProp<RouteName extends keyof AuthScreenParams = AuthScreens> = NativeStackNavigationProp<AuthScreenParams, RouteName>;
+export type AuthStackRouteProp<RouteName extends keyof AuthScreenParams = AuthScreens> = RouteProp<AuthScreenParams, RouteName>;
+
+
+const AuthStack = () => {
+
+    const { data: loggedInUser, isPending: loggedInUserLoading } = useFetchLoggedInUser();
+
+    const initialRoute = AuthScreens.MetroStack;
+    // const initialRoute = loggedInUser?.user?.firstSetup ? AuthScreens.Details : AuthScreens.BusStack;
+
+    if (loggedInUserLoading) {
+        return <FullScreenLoader />
+    }
+    useSessionTracker(loggedInUser?.user._id || "");
+
+    return (
+        <Stack.Navigator initialRouteName={initialRoute}>
+            <Stack.Screen name={AuthScreens.Details} options={{ headerShown: false }} component={DetailsScreen} />
+            <Stack.Screen name={AuthScreens.Success} options={{ headerShown: false }} component={SuccessScreen} />
+            {/* <Stack.Screen name={AuthScreens.TransportationSelection} options={{ headerShown: false }} component={TransportationSelectionScreen} /> */}
+
+            {/* all stacks */}
+            <Stack.Screen name={AuthScreens.MetroStack} options={{ headerShown: false }} component={MetroStack} />
+            <Stack.Screen name={AuthScreens.ProfileStack} options={{ headerShown: false }} component={ProfileStack} />
+        </Stack.Navigator>
+    )
+}
+
+export default AuthStack;

package/src/navigation/BaseStack.tsx

@@ -0,0 +1,74 @@
+import { StyleSheet, View } from 'react-native'
+import React, { useEffect } from 'react'
+import { createNativeStackNavigator, NativeStackNavigationProp, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RouteProp } from '@react-navigation/native';
+import UnAuthStack from './UnAuthStack';
+import AuthStack from './AuthStack';
+import AuthGuard from '../components/authGuard/AuthGuard';
+import { useMutateSdkLogin } from '../services/apis/auth/hooks';
+import { getSdkConfig } from '../../index';
+import FullScreenLoader from '../components/common/Loaders/FullScreenLoader';
+
+const Stack = createNativeStackNavigator();
+
+export enum BaseScreens {
+    UnAuthStack = "UnAuthStack",
+    AuthStack = "AuthStack",
+}
+
+export type BaseScreenParams = {
+    [BaseScreens.UnAuthStack]: undefined;
+    [BaseScreens.AuthStack]: undefined;
+}
+
+export type BaseScreenProps<RouteName extends keyof BaseScreenParams = BaseScreens> = NativeStackScreenProps<BaseScreenParams, RouteName>;
+export type BaseStackNavigationProp<RouteName extends keyof BaseScreenParams = BaseScreens> = NativeStackNavigationProp<BaseScreenParams, RouteName>;
+export type BaseStackRouteProp<RouteName extends keyof BaseScreenParams = BaseScreens> = RouteProp<BaseScreenParams, RouteName>;
+
+const BaseStack = () => {
+    const config = getSdkConfig();
+    const { mutateAsync: sdkLogin, isPending: sdkLoginLoading } = useMutateSdkLogin(() => { });
+    console.log("config from base stack", config);
+    useEffect(() => {
+        sdkLogin({
+            name: config.user.name,
+            moNumber: config.user.phoneNumber,
+            sdkKey: config.sdkKey,
+            email: config.user.email
+        })
+    }, [])
+
+    if (sdkLoginLoading) {
+        return <FullScreenLoader />
+    }
+
+    return (
+        <View style={{ flex: 1 }}>
+            <Stack.Navigator
+                initialRouteName={BaseScreens.AuthStack}
+                screenOptions={{
+                    // This ensures the popup appears above the navigation stack
+                    presentation: 'transparentModal',
+                    animation: 'fade',
+                }}
+            >
+                <Stack.Screen name={BaseScreens.AuthStack} options={{ headerShown: false }}>
+                    {() => (
+                        <AuthGuard>
+                            <AuthStack />
+                        </AuthGuard>
+                    )}
+                </Stack.Screen>
+                <Stack.Screen
+                    name={BaseScreens.UnAuthStack}
+                    options={{ headerShown: false }}
+                    component={UnAuthStack}
+                />
+            </Stack.Navigator>
+        </View>
+    )
+}
+
+export default BaseStack
+
+const styles = StyleSheet.create({})

package/src/navigation/UnAuthStack.tsx

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native'
+import React from 'react'
+import { createNativeStackNavigator, NativeStackNavigationProp, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RouteProp } from '@react-navigation/native';
+import SignUpScreen from '../screens/auth/SignUpScreen';
+import LogInScreen from '../screens/auth/LogInScreen';
+import OTPScreen from '../screens/auth/OTPScreen';
+
+const Stack = createNativeStackNavigator();
+
+export enum UnAuthScreens {
+    SignUp = "SignUp",
+    LogIn = "LogIn",
+    OTP = "OTP"
+}
+
+export type UnAuthScreenParams = {
+    [UnAuthScreens.SignUp]: undefined;
+    [UnAuthScreens.LogIn]: undefined;
+    [UnAuthScreens.OTP]: { prevScreen: UnAuthScreens.LogIn | UnAuthScreens.SignUp, moNumber: number; };
+}
+
+export type UnAuthScreenProps<RouteName extends keyof UnAuthScreenParams = UnAuthScreens> = NativeStackScreenProps<UnAuthScreenParams, RouteName>;
+export type UnAuthStackNavigationProp<RouteName extends keyof UnAuthScreenParams = UnAuthScreens> = NativeStackNavigationProp<UnAuthScreenParams, RouteName>;
+export type UnAuthStackRouteProp<RouteName extends keyof UnAuthScreenParams = UnAuthScreens> = RouteProp<UnAuthScreenParams, RouteName>;
+
+
+const UnAuthStack = () => {
+    return (
+        <Stack.Navigator initialRouteName={UnAuthScreens.LogIn}>
+            <Stack.Screen name={UnAuthScreens.SignUp} options={{ headerShown: false }} component={SignUpScreen} />
+            <Stack.Screen name={UnAuthScreens.LogIn} options={{ headerShown: false }} component={LogInScreen} />
+            <Stack.Screen name={UnAuthScreens.OTP} options={{ headerShown: false }} component={OTPScreen} />
+        </Stack.Navigator>
+    )
+}
+
+export default UnAuthStack
+
+const styles = StyleSheet.create({})