oneticket-sdk-vi 1.0.0

package/src/screens/metro/ChooseStation/ChooseStation.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms } from 'react-native-size-matters';
+import Search from './Components/Search';
+import StationList from './Components/StationList';
+
+const ChooseStation = () => {
+    const { theme } = useTheme();
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            <Search />
+            <StationList />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingTop: ms(3),
+    },
+});
+
+export default ChooseStation;

package/src/screens/metro/ChooseStation/ChooseStationContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, Dispatch, SetStateAction, useContext, useState } from "react";
+
+interface ChooseStationContextProps {
+    search: string;
+    setSearch: Dispatch<SetStateAction<string>>;
+}
+
+const ChooseStationContext = createContext<ChooseStationContextProps | undefined>(undefined);
+
+interface props {
+    children: React.ReactNode;
+}
+
+export const ChooseStationProvider = ({ children }: props) => {
+    const [search, setSearch] = useState('');
+    return (
+        <ChooseStationContext.Provider value={{
+            search, setSearch
+        }}>
+            {children}
+        </ChooseStationContext.Provider>
+    )
+}
+
+export const useChooseStationContext = () => {
+    const context = useContext(ChooseStationContext);
+    if (!context) {
+        throw new Error('useChooseStationContext must be used within a ChooseStationProvider');
+    }
+    return context;
+};

package/src/screens/metro/ChooseStation/Components/Search.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
+import { useTheme } from '../../../../theme/ThemeProvider';
+import { useChooseStationContext } from '../ChooseStationContext';
+import BackIcon from '../../../../assets/icons/BackIcon';
+import { useNavigation } from '@react-navigation/native';
+import { ms, mvs } from 'react-native-size-matters';
+import { Input } from '../../../../components/common/Input/Input';
+import CloseIcon from '../../../../assets/icons/CloseIcon';
+
+const Search = () => {
+    const { theme } = useTheme();
+    const { search, setSearch } = useChooseStationContext();
+    const { goBack } = useNavigation();
+    const inputRef = useRef<any>(null);
+
+    console.log('search', search)
+
+    useEffect(() => {
+        setTimeout(() => {
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+        }, 100);
+    }, []);
+
+    return (
+        <View style={[styles.container]}>
+            <Input
+                variant='filled'
+                ref={inputRef}
+                placeholder="Search"
+                value={search}
+                onChangeText={setSearch}
+                leftIcon={
+                    <Pressable
+                        onPress={goBack}
+                        style={({ pressed }) => [
+                            styles.backButton,
+                            {
+                                backgroundColor: pressed ? theme.colors.backdrop : 'transparent',
+                                borderRadius: ms(100),
+                            }
+                        ]}
+                    >
+                        <BackIcon color={theme.colors.text} />
+                    </Pressable>
+                }
+                rightIcon={search.length > 0 && (
+                    <Pressable
+                        onPress={() => setSearch('')}
+                        style={({ pressed }) => ({
+                            opacity: pressed ? 0.6 : 1
+                        })}
+                    >
+                        <CloseIcon size={ms(24)} color={theme.colors.text} />
+                    </Pressable>
+                )}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        marginTop: mvs(12),
+        marginHorizontal: ms(12)
+    },
+    backButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default Search;

package/src/screens/metro/ChooseStation/Components/StationList.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { View, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
+import { useTheme } from '../../../../theme/ThemeProvider';
+import { useFetchCurrectCity } from '../../../../services/apis/city/hooks';
+import { useFetchGetMetroStations } from '../../../../services/apis/metro/stations/hooks';
+import { useChooseStationContext } from '../ChooseStationContext';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { AuthScreens, AuthStackNavigationProp } from '../../../../navigation/AuthStack';
+import { MetroScreens, MetroStackRouteProp } from '../../../../navigation/metro/MetroStack';
+import { MetroTabScreens } from '../../../../navigation/metro/MetroTabs';
+import { MetroWithTabsScreens } from '../../../../navigation/metro/MetroWithTabsStack';
+import FullScreenLoader from '../../../../components/common/Loaders/FullScreenLoader';
+import { CustomText } from '../../../../components/common/Text/CustomText';
+import { ms, mvs } from 'react-native-size-matters';
+import { consoleFunc } from '../../../../utils/consoleFunc';
+
+const StationList = () => {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<AuthStackNavigationProp>();
+    const { params: { type, from, to } } = useRoute<MetroStackRouteProp<MetroScreens.ChooseStation>>();
+    const { search } = useChooseStationContext();
+
+    const { data: currentCity, isLoading: currentCityLoading } = useFetchCurrectCity({});
+    const { data: stations, isLoading: stationsLoading } = useFetchGetMetroStations({
+        cityCode: currentCity?.cityCode || "std:011"
+    });
+
+    const stationsData = () => {
+        if (!stations?.stations) return [];
+        return stations.stations.filter(s => {
+            let condition: boolean;
+            if (from) {
+                condition = (s.name.toLowerCase().trim().includes(search.toLowerCase().trim()) && from !== s.name);
+            } else {
+                condition = s.name.toLowerCase().trim().includes(search.toLowerCase().trim());
+            }
+            return condition;
+        }) || [];
+    };
+
+    const handleStationClick = (name: string) => {
+        if (type === "FROM") {
+            navigate(AuthScreens.MetroStack, {
+                screen: MetroScreens.MetroTabs,
+                params: {
+                    screen: MetroTabScreens.MetroWithTabsStack,
+                    params: {
+                        screen: MetroWithTabsScreens.SelectStations,
+                        params: { from: name, to: to !== name ? to : undefined }
+                    }
+                }
+            });
+        } else {
+            navigate(AuthScreens.MetroStack, {
+                screen: MetroScreens.MetroTabs,
+                params: {
+                    screen: MetroTabScreens.MetroWithTabsStack,
+                    params: {
+                        screen: MetroWithTabsScreens.SelectStations,
+                        params: { from, to: name }
+                    }
+                }
+            });
+        }
+    };
+
+    if (currentCityLoading || stationsLoading) {
+        return <FullScreenLoader />;
+    }
+
+    return (
+        <View style={[styles.container, {
+            backgroundColor: theme.colors.background,
+            paddingHorizontal: ms(20),
+            // marginTop: mvs(8),
+            paddingVertical: mvs(2),
+        }]}>
+            <FlatList
+                data={stationsData()}
+                keyExtractor={(item, index) => item.name}
+                keyboardShouldPersistTaps="always"
+                renderItem={({ item }) => (
+                    <TouchableOpacity onPress={() => handleStationClick(item.name)}>
+                        <View style={styles.itemContainer}>
+                            <CustomText variant="body1" style={styles.stationName}>
+                                {item.name}
+                            </CustomText>
+                            <View style={styles.lineColorsContainer}>
+                                {item.lineColor?.map((color, index) => (
+                                    <View key={color} style={[styles.dot, { backgroundColor: color }]} />
+                                ))}
+                            </View>
+                        </View>
+                        <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
+                    </TouchableOpacity>
+                )}
+                showsVerticalScrollIndicator={false}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    itemContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: mvs(12),
+    },
+    stationName: {
+        fontWeight: '500',
+    },
+    lineColorsContainer: {
+        flexDirection: 'row',
+        gap: ms(4)
+    },
+    dot: {
+        width: ms(12),
+        height: ms(12),
+        borderRadius: ms(6),
+    },
+    divider: {
+        height: 1,
+        marginTop: mvs(4),
+    },
+});
+
+export default StationList;

package/src/screens/metro/ChooseTicketTypeScreen.tsx

@@ -0,0 +1,129 @@
+import React, { useEffect, useState } from 'react';
+import { View, FlatList, RefreshControl, StyleSheet } from 'react-native';
+import { useTheme } from '../../theme/ThemeProvider';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { ms, mvs } from 'react-native-size-matters';
+import TypeCard from '../../components/common/Cards/TypeCard';
+import Header from '../../components/common/Header/Header';
+import FullScreenLoader from '../../components/common/Loaders/FullScreenLoader';
+import { MetroScreens, MetroStackNavigationProp, MetroStackRouteProp } from '../../navigation/metro/MetroStack';
+import { itemsLowestFare } from '../../helper/itemsLowestFare';
+import { useFetchGetMetroFares } from '../../services/apis/metro/fare/hooks';
+import { GetMetroFaresApiResponse } from '../../services/apis/metro/fare/types';
+import Toast from 'react-native-toast-message';
+// import { CustomText } from '../../components/common/CustomText';
+
+const ChooseTicketTypeScreen = () => {
+    const { theme } = useTheme();
+    const { navigate, goBack } = useNavigation<MetroStackNavigationProp>();
+    const { params: { startStation, destinationStation, cityCode } } = useRoute<MetroStackRouteProp<MetroScreens.ChooseTicketType>>();
+
+    const { data: items, isLoading: itemsLoading, isRefetching, refetch } = useFetchGetMetroFares({
+        startStation,
+        destinationStation,
+        cityCode
+    });
+
+    const [localLoading, setLocalLoading] = useState(true);
+    const [isSingleProvider, setIsSingleProvider] = useState(true);
+
+    const handleTicketTypeSelect = (item: GetMetroFaresApiResponse["result"][number]) => {
+        navigate(MetroScreens.BuyTicket, {
+            startStation,
+            destinationStation,
+            item,
+            cityCode,
+            isSingleProvider
+        });
+    };
+
+    useEffect(() => {
+        if (!itemsLoading) {
+            if (items?.result) {
+                if (items.result.length === 1) {
+                    navigate(MetroScreens.BuyTicket, {
+                        startStation,
+                        destinationStation,
+                        cityCode,
+                        item: items.result[0],
+                        isSingleProvider
+                    });
+                } else if (items.result.length === 0) {
+                    goBack();
+                    Toast.show({
+                        type: "error",
+                        text1: "No Provider is available"
+                    });
+                } else {
+                    setIsSingleProvider(false);
+                    setLocalLoading(false);
+                }
+            } else {
+                goBack();
+                Toast.show({
+                    type: "error",
+                    text1: items?.message || "Data not fetched properly"
+                });
+            }
+        }
+    }, [items, itemsLoading]);
+
+    if (localLoading || itemsLoading) {
+        return <FullScreenLoader />;
+    }
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            <Header
+                showBackButton
+                title="Choose Ticket Type"
+                onBackPress={goBack}
+            />
+
+            <FlatList
+                style={styles.list}
+                contentContainerStyle={styles.listContent}
+                data={items?.result || []}
+                keyExtractor={(item) => item.itemName}
+                renderItem={({ item }) => {
+                    const lowestFare = itemsLowestFare(item);
+                    return (
+                        <TypeCard
+                            style={styles.card}
+                            imageSource={require('../../assets/images/single_journey.png')}
+                            title={item.itemName}
+                            description={lowestFare ? `Lowest Fare ${lowestFare}` : ''}
+                            showArrow={true}
+                            onPress={() => handleTicketTypeSelect(item)}
+                        />
+                    );
+                }}
+                refreshControl={
+                    <RefreshControl
+                        refreshing={isRefetching}
+                        onRefresh={refetch}
+                        colors={[theme.colors.primary[500]]}
+                    // tintColor={theme.colors.primary}
+                    />
+                }
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    list: {
+        marginTop: mvs(20),
+    },
+    listContent: {
+        paddingHorizontal: ms(24),
+    },
+    card: {
+        marginVertical: mvs(8),
+    },
+});
+
+export default ChooseTicketTypeScreen;