oneticket-sdk-vi 1.0.0

package/src/screens/common/Profile/ProfileScreen.tsx

@@ -0,0 +1,269 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import {
+    View,
+    Text,
+    ScrollView,
+    Modal,
+    StyleSheet,
+    Dimensions,
+    Linking,
+} from 'react-native';
+import { ProfileScreens } from '../../../navigation/metro/ProfileStack';
+import { useNavigation } from '@react-navigation/native';
+import { useMutateDeleteUser, useMutatelogout } from '../../../services/apis/auth/hooks';
+import { BaseScreens, BaseStackNavigationProp } from '../../../navigation/BaseStack';
+import { useFetchLoggedInUser } from '../../../services/apis/auth/hooks';
+import UserIcon from '../../../assets/icons/UserIcon';
+import HelpIcon from '../../../assets/icons/HelpIcon';
+import MailIcon from '../../../assets/icons/MailIcon';
+import LogoutIcon from '../../../assets/icons/LogoutIcon';
+import FAQIcon from '../../../assets/icons/FAQIcon';
+import DeleteIcon from '../../../assets/icons/DeleteIcon';
+import { AuthScreens, AuthStackNavigationProp } from '../../../navigation/AuthStack';
+import { MenuItem } from './Components/MenuItem';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import { Avatar } from '../../../components/common/Avatar/Avatar';
+import { CustomText } from '../../../components/common/Text/CustomText';
+import { Button } from '../../../components/common/Button/Button';
+
+type MenuItemType = {
+    title: string;
+    icon: React.ReactNode;
+    onPress: () => void;
+    description?: string;
+    showChevron?: boolean;
+};
+
+const ProfileScreen = () => {
+    const { theme } = useTheme();
+    const { navigate, reset } = useNavigation<AuthStackNavigationProp & BaseStackNavigationProp>();
+    const { data: userData } = useFetchLoggedInUser();
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [appVersion, setAppVersion] = useState<string>('');
+
+    const { mutateAsync: logout, isPending: logoutLoading } = useMutatelogout(data => {
+        if (data.status === 'success') {
+            reset({
+                index: 0,
+                routes: [{ name: BaseScreens.UnAuthStack }]
+            });
+        }
+    });
+
+    const contactEmail = "info@sequelstring.com";
+
+    const buttonList: MenuItemType[] = [
+        {
+            title: "My Account",
+            icon: <UserIcon size={24} color={theme.colors.primary[500]} />,
+            onPress: () => navigate(AuthScreens.ProfileStack, { screen: ProfileScreens.MyAccount }),
+            description: "Manage your personal information"
+        },
+        {
+            title: "FAQ",
+            icon: <FAQIcon size={24} color={theme.colors.primary[500]} />,
+            onPress: () => navigate(AuthScreens.ProfileStack, { screen: ProfileScreens.FaqScreen }),
+            description: "Frequently asked questions"
+        },
+        {
+            title: "Support",
+            icon: <HelpIcon size={24} color={theme.colors.primary[500]} />,
+            onPress: () => navigate(AuthScreens.ProfileStack, { screen: ProfileScreens.IssueScreen }),
+            description: "Get help with issues"
+        },
+        {
+            title: "Contact Us",
+            icon: <MailIcon size={24} color={theme.colors.primary[500]} />,
+            onPress: () => Linking.openURL(`mailto:${contactEmail}`),
+            description: `Email us at ${contactEmail}`
+        },
+    ];
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            {/* Profile Header */}
+            <View style={[styles.header, { backgroundColor: theme.colors.primary[500] }]}>
+                <View style={styles.profileContainer}>
+                    <Avatar
+                        size={mvs(80)}
+                        // source={userData?.user?.name?.charAt(0) || 'U'}
+                        initials={userData?.user?.name?.charAt(0) || 'U'}
+                        backgroundColor={theme.colors.primary[400]}
+                        borderWidth={3}
+                        borderColor={theme.colors.primary[300]}
+                        textColor={theme.colors.textOnPrimary}
+                    />
+                    <CustomText variant='heading2' style={{ marginTop: mvs(16), color: theme.colors.textOnPrimary }}>
+                        {userData?.user?.name || 'User'}
+                    </CustomText>
+
+                    <CustomText variant='body1' style={{ color: theme.colors.primary[100] }}>
+                        {userData?.user?.moNumber || ''}
+                    </CustomText>
+                </View>
+            </View>
+
+            {/* Menu Card */}
+            <View style={[styles.menuCard, { backgroundColor: theme.colors.background }]}>
+                <ScrollView
+                    contentContainerStyle={styles.scrollContent}
+                    showsVerticalScrollIndicator={false}
+                >
+                    {buttonList.map((item, index) => (
+                        <MenuItem
+                            key={index}
+                            title={item.title}
+                            icon={item.icon}
+                            onPress={item.onPress}
+                            description={item.description}
+                            showChevron={item.showChevron !== false}
+                            isLast={index === buttonList.length - 1}
+                        />
+                    ))}
+                </ScrollView>
+            </View>
+
+            <DeleteMyAccountModal
+                showDeleteModal={showDeleteModal}
+                setShowDeleteModal={setShowDeleteModal}
+            />
+        </View>
+    );
+};
+
+type DeleteMyAccountModalProps = {
+    showDeleteModal: boolean;
+    setShowDeleteModal: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const DeleteMyAccountModal = ({
+    showDeleteModal,
+    setShowDeleteModal,
+}: DeleteMyAccountModalProps) => {
+    const { reset } = useNavigation<AuthStackNavigationProp & BaseStackNavigationProp>();
+    const { theme } = useTheme();
+    const { mutateAsync: deleteUser, isPending: deleteUserLoading } = useMutateDeleteUser((data) => {
+        console.log(data);
+        if (data.status === 'success') {
+            reset({
+                index: 0,
+                routes: [{ name: BaseScreens.UnAuthStack }]
+            });
+            setShowDeleteModal(false);
+        }
+    });
+    return (
+        <Modal
+            transparent
+            visible={showDeleteModal}
+            animationType="fade"
+            onRequestClose={() => setShowDeleteModal(false)}
+        >
+            <View style={styles.overlay}>
+                <View style={[styles.modalContainer, { backgroundColor: theme.colors.backdrop, shadowColor: theme.colors.shadow }]}>
+                    <CustomText variant='heading3' style={[styles.title, { color: theme.colors.error[500] }]}>Delete Account</CustomText>
+                    <CustomText style={[styles.message, { color: theme.colors.textSecondary }]}>
+                        Are you sure you want to delete your account? This action cannot be
+                        reversed and all your data will be permanently deleted.
+                    </CustomText>
+
+                    <View style={styles.buttonContainer}>
+                        <Button
+                            size='sm'
+                            variant='secondary'
+                            style={{ flex: 1 }}
+                            onPress={() => setShowDeleteModal(false)}
+                        >
+                            {'Cancel'}
+                        </Button>
+                        <Button
+                            size='sm'
+                            style={{ flex: 1, backgroundColor: theme.colors.error[500] }}
+                            onPress={() => {
+                                deleteUser();
+                            }}
+                        >
+                            {'Delete'}
+                        </Button>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    header: {
+        paddingVertical: mvs(32),
+        paddingHorizontal: ms(24),
+    },
+    profileContainer: {
+        alignItems: 'center',
+        marginBottom: mvs(8),
+    },
+    avatarText: {
+        fontSize: ms(32),
+        fontWeight: 'bold',
+    },
+    userPhone: {
+        fontSize: ms(14),
+    },
+    menuCard: {
+        flex: 1,
+        borderTopLeftRadius: ms(24),
+        borderTopRightRadius: ms(24),
+        marginTop: mvs(-24),
+        paddingTop: mvs(16),
+    },
+    scrollContent: {
+        flexGrow: 1,
+        paddingBottom: mvs(16),
+        paddingHorizontal: ms(16)
+    },
+    versionContainer: {
+        alignItems: 'center',
+        marginTop: mvs(32),
+    },
+    versionText: {
+        fontSize: ms(12),
+    },
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    modalContainer: {
+        width: Dimensions.get('window').width * 0.85,
+        borderRadius: 12,
+        padding: 20,
+        elevation: 10,
+    },
+    title: {
+        // color: '#dc2626',
+        marginBottom: 10,
+    },
+    message: {
+        fontSize: 16,
+        marginBottom: 25,
+        lineHeight: 22,
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        gap: ms(10),
+    },
+    cancelText: {
+        fontWeight: '600',
+    },
+    deleteText: {
+        color: 'white',
+        fontWeight: '600',
+    }
+});
+
+export default ProfileScreen;

package/src/screens/metro/BuyTicket/BuyTicketScreen.tsx

@@ -0,0 +1,417 @@
+import React, { useCallback, useState } from 'react';
+import {
+    View,
+    ScrollView,
+    BackHandler,
+    StyleSheet,
+    TouchableOpacity
+} from 'react-native';
+import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import Header from '../../../components/common/Header/Header';
+import { useMutateCreatePayment, useMutateErrorPayment, useMutateVerifyPayment } from '../../../services/apis/metro/payment/hooks';
+import RazorpayCheckout from 'react-native-razorpay';
+import FullScreenLoader from '../../../components/common/Loaders/FullScreenLoader';
+import { MetroScreens, MetroStackNavigationProp, MetroStackRouteProp } from '../../../navigation/metro/MetroStack';
+import { MetroWithTabsScreens } from '../../../navigation/metro/MetroWithTabsStack';
+import { MetroTabScreens } from '../../../navigation/metro/MetroTabs';
+import { useMutateInitMetroTicketV2 } from '../../../services/apis/metro/ticketInit/hooks';
+import { InitMetroTicketV2ApiPayload } from '../../../services/apis/metro/ticketInit/types';
+import { useMutateConfirmMetroTicket } from '../../../services/apis/metro/confirmTicket/hooks';
+import { Button } from '../../../components/common/Button/Button';
+import { Input } from '../../../components/common/Input/Input';
+import { CustomText } from '../../../components/common/Text/CustomText';
+import MinusIcon from '../../../assets/icons/MinusIcon';
+import PlusIcon from '../../../assets/icons/PlusIcon';
+import RightArrowIcon from '../../../assets/icons/RightArrowIcon';
+import { basePath } from '../../../services/apiRoutes';
+import Toast from 'react-native-toast-message';
+
+const BuyTicketScreen = () => {
+    const { theme } = useTheme();
+    const { navigate, goBack } = useNavigation<MetroStackNavigationProp>();
+    const {
+        params: { startStation, destinationStation, item, cityCode, isSingleProvider },
+    } = useRoute<MetroStackRouteProp<MetroScreens.BuyTicket>>();
+
+    const singleTicketPrice = item.providers.reduce((last, curr) => last + curr.price, 0);
+    const [ticketCount, setTicketCount] = useState<number>(1);
+    const [isNavigating, setIsNavigating] = useState(false);
+
+    const { mutateAsync: errorPayment, isPending: errorPaymentLoading } = useMutateErrorPayment(data => {
+        navigate(MetroScreens.MetroTabs, { screen: MetroTabScreens.MetroWithTabsStack, params: { screen: MetroWithTabsScreens.SelectStations, params: { from: "", to: "" } } });
+    });
+
+    const { mutateAsync: confirmMetroTicket, isPending: confirmMetroTicketLoading } = useMutateConfirmMetroTicket(data => {
+        if (data.status === 'success') {
+            navigate(MetroScreens.MetroTabs, { screen: MetroTabScreens.MetroWithTabsStack, params: { screen: MetroWithTabsScreens.TicketDetails, params: { transaction_id: data.transaction_id } } });
+        } else {
+            navigate(MetroScreens.MetroTabs, { screen: MetroTabScreens.MetroWithTabsStack, params: { screen: MetroWithTabsScreens.SelectStations, params: { from: "", to: "" } } });
+        }
+    });
+
+    const { mutateAsync: verifyPayment, isPending: verifyPaymentLoading } = useMutateVerifyPayment(data => {
+        if (data.status === 'success') {
+            confirmMetroTicket({ transaction_id: data.payment.transaction_id });
+        } else {
+            navigate(MetroScreens.MetroTabs, { screen: MetroTabScreens.MetroWithTabsStack, params: { screen: MetroWithTabsScreens.SelectStations, params: { from: "", to: "" } } });
+        }
+    });
+
+    const { mutateAsync: createPayment, isPending: createPaymentLoading } = useMutateCreatePayment(data => {
+        if (data.status === 'success') {
+            var options: any = {
+                description: 'Buying Metro Ticket',
+                image: 'https://demo-poc.sequelstring.com/img/OneTicketNewBlueLogo2.png',
+                currency: data.payment.currency,
+                key: basePath === 'https://oneticket-prod-dashboard.sequelstring.com' ? 'rzp_live_BKsuyzOrglbstC' : 'rzp_test_vGU9oC6GAmkRFL',
+                amount: data.payment.amount,
+                name: 'OneTicket',
+                order_id: data.payment.order_id,
+                prefill: {
+                    email: '',
+                    contact: '',
+                    name: ''
+                },
+                theme: { color: `${theme.colors.primary[500]}` }
+                // theme: { color: '#14b8a6' }
+            };
+            RazorpayCheckout.open(options).then((data) => {
+                verifyPayment({
+                    razorpay_order_id: data.razorpay_order_id,
+                    razorpay_payment_id: data.razorpay_payment_id,
+                    razorpay_signature: data.razorpay_signature
+                });
+            }).catch((error) => {
+                errorPayment({ order_id: data.payment.order_id, error });
+            });
+        }
+    });
+
+    const {
+        mutateAsync: initMetroTicketV2,
+        isPending: initMetroTicketV2Loading,
+    } = useMutateInitMetroTicketV2(data => {
+        if (data.status === 'success') {
+            createPayment({ transaction_id: data.transaction_id, amount: singleTicketPrice * ticketCount });
+        } else {
+            navigate(MetroScreens.MetroTabs, { screen: MetroTabScreens.MetroWithTabsStack, params: { screen: MetroWithTabsScreens.SelectStations, params: { from: "", to: "" } } });
+        }
+    });
+
+    useFocusEffect(
+  useCallback(() => {
+    const onBackPress = () => {
+      if (isSingleProvider) {
+        navigate(MetroScreens.MetroTabs, {
+          screen: MetroTabScreens.MetroWithTabsStack,
+          params: {
+            screen: MetroWithTabsScreens.SelectStations,
+            params: { from: "", to: "" },
+          },
+        });
+      } else {
+        goBack();
+      }
+      return true;
+    };
+
+    const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+
+    return () => {
+      if (typeof subscription?.remove === 'function') {
+        subscription.remove();
+      } else {
+        BackHandler.removeEventListener?.('hardwareBackPress', onBackPress); // ✅ Fallback for older RN
+      }
+    };
+  }, [navigate, isSingleProvider])
+);
+
+    const increaseTicketCount = () => {
+        if (ticketCount < item.maximumTicketAvi) {
+            setTicketCount(ticketCount + 1)
+        } else {
+            Toast.show({
+                text1: `Maximum ${item.maximumTicketAvi} passengers tickets are allowed per transaction`,
+                type: "info"
+            })
+        };
+    };
+
+    const decreaseTicketCount = () => {
+        if (ticketCount > 1) setTicketCount(ticketCount - 1);
+    };
+
+    const handleProceedClick = () => {
+        const payloadData: InitMetroTicketV2ApiPayload = {
+            itemName: item.itemName,
+            cityCode,
+            ticketCount,
+            startStation,
+            destinationStation,
+            providers: item.providers,
+        };
+        setIsNavigating(true);
+        initMetroTicketV2(payloadData);
+    };
+
+    if (verifyPaymentLoading || errorPaymentLoading || confirmMetroTicketLoading || isNavigating) {
+        return <FullScreenLoader />;
+    }
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            <Header
+                showBackButton
+                onBackPress={() => {
+                    if (isSingleProvider) {
+                        navigate(MetroScreens.MetroTabs,
+                            {
+                                screen: MetroTabScreens.MetroWithTabsStack,
+                                params: {
+                                    screen: MetroWithTabsScreens.SelectStations,
+                                    params: { from: "", to: "" }
+                                }
+                            });
+                    } else {
+                        goBack();
+                    }
+                }}
+                title='Buy Ticket'
+            />
+
+            <ScrollView
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+            >
+                <View style={styles.contentContainer}>
+                    {/* From Field */}
+                    <View >
+                        <CustomText variant="labelMedium" style={styles.label}>
+                            From
+                        </CustomText>
+                        <Input
+                            value={startStation}
+                            readOnly
+                            variant="filled"
+                            containerStyle={{ borderColor: theme.colors.border }}
+                        />
+                    </View>
+
+                    {/* To Field */}
+                    <View>
+                        <CustomText variant="labelMedium" style={styles.label}>
+                            To
+                        </CustomText>
+                        <Input
+                            value={destinationStation}
+                            readOnly
+                            variant="filled"
+                            containerStyle={{ borderColor: theme.colors.border }}
+                        />
+                        <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
+                    </View>
+
+                    {/* Ticket Type & Fare */}
+                    <View style={styles.rowSpaceBetween}>
+                        <View>
+                            <CustomText variant="labelMedium" style={styles.label}>
+                                Ticket Type
+                            </CustomText>
+                            <CustomText variant="body1" style={{ color: theme.colors.primary[500] }}>
+                                {item.itemName}
+                            </CustomText>
+                        </View>
+                        <View>
+                            {/* <CustomText variant="labelMedium" style={{...styles.label, textAlign: "right"}}>
+                                Passenger
+                            </CustomText> */}
+                            <View style={styles.counterContainer}>
+                                <TouchableOpacity
+                                    onPress={decreaseTicketCount}
+                                    disabled={ticketCount === 1}
+                                    style={[
+                                        styles.counterButton,
+                                        {
+                                            borderColor: theme.colors.primary[500],
+                                            opacity: ticketCount === 1 ? 0.5 : 1
+                                        }
+                                    ]}
+                                >
+                                    <MinusIcon size={ms(18)} color={theme.colors.primary[500]} />
+                                </TouchableOpacity>
+                                <CustomText variant="body1" style={styles.counterText}>
+                                    {ticketCount}
+                                </CustomText>
+                                <TouchableOpacity
+                                    onPress={increaseTicketCount}
+                                    // disabled={ticketCount === item.maximumTicketAvi}
+                                    style={[
+                                        styles.counterButton,
+                                        {
+                                            borderColor: theme.colors.primary[500],
+                                            opacity: ticketCount === item.maximumTicketAvi ? 0.5 : 1
+                                        }
+                                    ]}
+                                >
+                                    <PlusIcon size={ms(18)} color={theme.colors.primary[500]} />
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+                    </View>
+
+                    {item.providers.length > 1 ? (
+                        <>
+                            <View>
+                                <CustomText variant="labelMedium" style={styles.label}>
+                                    Fare Breakdown
+                                </CustomText>
+                                <View>
+                                    {item.providers.map((provider, index) => (
+                                        <View key={index} style={styles.fareRow}>
+                                            <View style={styles.stationRoute}>
+                                                <CustomText variant="body2">
+                                                    {provider.startStationName}
+                                                </CustomText>
+                                                <RightArrowIcon size={ms(14)} />
+                                                <CustomText variant="body2">
+                                                    {provider.destinationStationName}
+                                                </CustomText>
+                                            </View>
+                                            <CustomText variant="body2">
+                                                ₹{provider.price.toFixed(2)}
+                                            </CustomText>
+                                        </View>
+                                    ))}
+                                    <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
+                                    <View style={styles.totalRow}>
+                                        <CustomText variant="body2" style={styles.totalLabel}>
+                                            Total per integrated ticket
+                                        </CustomText>
+                                        <CustomText variant="body2" style={styles.totalPrice}>
+                                            ₹{singleTicketPrice.toFixed(2)}
+                                        </CustomText>
+                                    </View>
+                                </View>
+                            </View>
+                            {/* Total Amount */}
+                            <View style={[styles.rowSpaceBetween, styles.totalAmountContainer, { alignItems: 'baseline' }]}>
+                                <CustomText variant="labelMedium" style={styles.label}>
+                                    Total Amount
+                                </CustomText>
+                                <CustomText variant="heading3" style={{ color: theme.colors.primary[600] }}>
+                                    ₹{(ticketCount * singleTicketPrice).toFixed(2)}
+                                </CustomText>
+                            </View>
+                        </>
+                    ) : (
+                        <View style={[styles.rowSpaceBetween, { marginTop: mvs(16) }]}>
+                            <View>
+                                <CustomText variant="labelMedium" style={styles.label}>
+                                    Fare
+                                </CustomText>
+                                <CustomText variant="body2">
+                                    ₹{singleTicketPrice} per ticket
+                                </CustomText>
+                            </View>
+                            <View>
+                                <CustomText variant="labelMedium" style={styles.label}>
+                                    Total Amount
+                                </CustomText>
+                                <CustomText variant="heading3" style={{ color: theme.colors.primary[600] }}>
+                                    ₹{(ticketCount * singleTicketPrice).toFixed(2)}
+                                </CustomText>
+                            </View>
+                        </View>
+                    )}
+
+                </View>
+                {/* Proceed Button at the Bottom */}
+                <Button
+                    loading={initMetroTicketV2Loading || createPaymentLoading}
+                    disabled={initMetroTicketV2Loading || createPaymentLoading}
+                    variant="primary"
+                    style={styles.proceedButton}
+                    onPress={handleProceedClick}
+                >
+                    Proceed to Pay
+                </Button>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+    contentContainer: {
+        flex: 1,
+        paddingHorizontal: ms(24),
+        paddingVertical: mvs(16),
+    },
+    label: {
+        marginBottom: mvs(8),
+    },
+    disabledInput: {
+        borderWidth: 1,
+    },
+    divider: {
+        height: 1,
+        marginVertical: mvs(16),
+    },
+    rowSpaceBetween: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        marginBottom: mvs(8)
+    },
+    counterContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-end'
+    },
+    counterButton: {
+        borderWidth: 1,
+        borderRadius: ms(100),
+        padding: ms(4),
+    },
+    counterText: {
+        marginHorizontal: ms(16),
+    },
+    fareRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: mvs(4),
+    },
+    stationRoute: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+        flexWrap: 'wrap',
+    },
+    totalRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    totalLabel: {
+        fontWeight: '500',
+    },
+    totalPrice: {
+        fontWeight: '500',
+    },
+    totalAmountContainer: {
+        alignItems: 'center',
+    },
+    proceedButton: {
+        marginHorizontal: ms(24),
+        marginVertical: mvs(16),
+    },
+});
+
+export default BuyTicketScreen;