oneticket-sdk-vi 1.0.0

package/src/components/common/Popup/ForceUpdatePopup.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Modal, View, StyleSheet, Linking, Platform } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import { Button } from '../Button/Button';
+import { CustomText } from '../Text/CustomText';
+
+interface ForceUpdatePopupProps {
+    visible: boolean;
+    latestVersion: string;
+    currentVersion: string;
+}
+
+const ForceUpdatePopup: React.FC<ForceUpdatePopupProps> = ({
+    visible,
+    latestVersion,
+    currentVersion,
+}) => {
+    const { theme } = useTheme();
+
+    const handleUpdate = () => {
+        const url = Platform.select({
+            android: 'https://play.google.com/store/apps/details?id=com.oneticket',
+            ios: 'itms-apps://itunes.apple.com/app/idYOUR_APP_ID',
+        });
+        if (url) Linking.openURL(url);
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            transparent={true}
+            animationType="fade"
+            onRequestClose={() => { }}
+        >
+            <View style={[styles.overlay, { backgroundColor: theme.colors.backdrop }]}>
+                <View style={[styles.container, { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow }]}>
+                    <CustomText variant="heading2" style={styles.title}>
+                        Time to Update!
+                    </CustomText>
+
+                    <CustomText variant="body1" style={[styles.description, { color: theme.colors.textSecondary }]}>
+                        Please update to the latest version to enjoy new features and improvements.
+                    </CustomText>
+
+                    <Button
+                        onPress={handleUpdate}
+                        variant="primary"
+                        style={styles.button}
+                    >
+                        Update Now
+                    </Button>
+
+                    <CustomText variant="caption" style={[styles.footerText, { color: theme.colors.textTertiary }]}>
+                        This update is required to continue using the app
+                    </CustomText>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: ms(24),
+    },
+    container: {
+        width: '100%',
+        maxWidth: ms(400),
+        borderRadius: ms(12),
+        padding: ms(24),
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        elevation: 4,
+    },
+    animation: {
+        width: ms(100),
+        height: ms(100),
+    },
+    title: {
+        textAlign: 'center',
+        marginBottom: mvs(8),
+    },
+    description: {
+        textAlign: 'center',
+        lineHeight: mvs(22),
+        marginBottom: mvs(16),
+    },
+    button: {
+        marginTop: mvs(20),
+        marginBottom: mvs(12),
+    },
+    footerText: {
+        textAlign: 'center',
+        marginTop: mvs(8),
+    },
+});
+
+export default ForceUpdatePopup;

package/src/components/common/PoweredBy/PoweredBy.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import { ms, mvs } from 'react-native-size-matters';
+import { CustomText } from '../Text/CustomText';
+import { useFetchLoggedInUser } from '../../../services/apis/auth/hooks';
+import { useFetchCurrectCity } from '../../../services/apis/city/hooks';
+
+const PoweredBy = () => {
+    const { data: currentCity } = useFetchCurrectCity({});
+
+    const styles = StyleSheet.create({
+
+        poweredByContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            // backgroundColor: 'black',
+        }
+    });
+    return (
+        <View style={styles.poweredByContainer}>
+            <CustomText variant="body2" style={{ fontSize: 11 }}>Powered by</CustomText>
+            <Image
+                source={require("../../../assets/images/short-logo.png")}
+                alt='ondc-logo'
+                style={{ width: 35, height: 30 }}
+                resizeMode="contain"
+            />
+            <CustomText variant="body2" style={{ fontSize: 11 }}>, enabled by</CustomText>
+            <Image
+                source={require("../../../assets/images/ondc_network_vertical.png")}
+                alt='ondc-logo'
+                style={{ width: 45, height: 30 }}
+                resizeMode="contain"
+            />
+            {currentCity?.cityCode === 'std:022' && (
+                <>
+                    <CustomText variant="body2" style={{ fontSize: 11 }}>& supported by </CustomText>
+
+                    <Image
+                        source={require("../../../assets/images/mumbai_metro_line_1_logo.png")}
+                        alt='MITRA-logo'
+                        style={{ width: 35, height: 30 }}
+                        resizeMode="contain"
+                    />
+                    {/* <CustomText variant="body2" style={{ marginRight: ms(4), fontSize: 11 }}>&</CustomText>
+                    <Image
+                        source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/4/49/Logo_of_Mumbai_Metro_Line_1.png' }}
+                        alt='mumbai-metro-logo'
+                        style={{ width: 35, height: 30 }}
+                        resizeMode="contain"
+                    /> */}
+                </>
+            )}
+        </View>
+    );
+};
+
+export default PoweredBy;

package/src/components/common/QRCodeGenerator/QRCodeGenerator.tsx

@@ -0,0 +1,372 @@
+import React, { useEffect, useState } from 'react';
+import {
+    View,
+    StyleSheet,
+    Modal,
+    Pressable,
+    Image
+} from 'react-native';
+import RightArrowIcon from '../../../assets/icons/RightArrowIcon';
+import { formatDateWithTime } from '../../../utils/formatDate';
+import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';
+import WebView from 'react-native-webview';
+import { basePath } from '../../../services/apiRoutes';
+import { CustomText } from '../../../components/common/Text/CustomText';
+import Badge from '../Badge/Badge';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+
+interface QRCodeGeneratorProps {
+    qrCodeToken: string;
+    passengerNumber: number;
+    startStation: string;
+    destinationStation: string;
+    ticketId: string;
+    validTill: string;
+    issuedOn: string;
+    status: string;
+    showStations: boolean;
+    isCancelled: boolean;
+    isSingle?: boolean;
+    line?: string;
+    lineColors: string[];
+}
+
+const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({
+    qrCodeToken,
+    ticketId,
+    passengerNumber,
+    startStation,
+    destinationStation,
+    validTill,
+    issuedOn,
+    status,
+    showStations,
+    isCancelled,
+    isSingle = false,
+    line,
+    lineColors
+}) => {
+    const { theme } = useTheme();
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+    // const location = useCurrentLocation();
+    const [dynamicBlock, setDynamicBlock] = useState("");
+
+    const generateDynamicBlock = () => {
+        const currentTimeInSeconds = Math.floor(Date.now() / 1000);
+        const hexTime = currentTimeInSeconds.toString(16);
+        const lat = 12.993003;
+        const long = 77.557500;
+        return `{${hexTime}||${lat}|${long}|}`;
+    };
+
+    useEffect(() => {
+        if (line === "bmrcl") {
+            setDynamicBlock(generateDynamicBlock());
+            const interval = setInterval(() => {
+                setDynamicBlock(generateDynamicBlock());
+            }, 30000);
+            return () => clearInterval(interval);
+        }
+        // }, [location.latitude, location.longitude]);
+    }, []);
+
+    const handleSwipeDown = (event: any) => {
+        const { translationY } = event.nativeEvent;
+        if (translationY > 150) {
+            setIsModalOpen(false);
+        }
+    };
+
+    return (
+        <View style={styles.container}>
+            {/* Conditionally fade the QR code if cancelled */}
+            <View style={[styles.qrContainer, { opacity: isCancelled ? 0.3 : 1 }]}>
+                {qrCodeToken && (
+                    <View style={[styles.passengerBadge, {
+                        backgroundColor: theme.colors.primary[100],
+                        borderColor: theme.colors.primary[500]
+                    }]}>
+                        <CustomText variant="body1" style={[styles.passengerText, { color: theme.colors.primary[800] }]}>
+                            Passenger {passengerNumber}
+                        </CustomText>
+                    </View>
+                )}
+                {showStations && (
+                    <View style={styles.stationContainer}>
+                        <CustomText variant="body2" style={styles.stationText}>
+                            {startStation}
+                        </CustomText>
+                        <View style={styles.arrowIcon}>
+                            <RightArrowIcon size={ms(20)} color={theme.colors.text} />
+                        </View>
+                        <CustomText variant="body2" style={styles.stationText}>
+                            {destinationStation}
+                        </CustomText>
+                    </View>
+                )}
+
+                {qrCodeToken ? (
+                    <>
+                        <Pressable
+                            disabled={isCancelled}
+                            onPress={() => setIsModalOpen(true)}
+                        >
+                            <View style={[styles.webviewContainer, { backgroundColor: theme.colors.white }]}>
+                                <WebView
+                                    source={{
+                                        uri: `${basePath}/qr-page?token=${encodeURIComponent(qrCodeToken)}&line=${encodeURIComponent(line || "")}&dynamicBlock=${encodeURIComponent(dynamicBlock) || ""}`
+                                    }}
+                                    style={[styles.webview, { opacity: isCancelled ? 0.7 : 1 }]}
+                                    key={`webview-${dynamicBlock}`}
+                                />
+                            </View>
+                        </Pressable>
+
+                        <View style={styles.iconContainer}>
+                            {lineColors?.map((lineColor, index) => (
+                                <View key={`lineColor-${index}`} style={styles.iconWrapper}>
+                                    {/* First dot - full color */}
+                                    {index === 0 && (
+                                        <View style={[styles.dot, { backgroundColor: lineColor }]} />
+                                    )}
+
+                                    {/* Middle dots - half previous, half current color */}
+                                    {index > 0 && index < lineColors.length && (
+                                        <View style={styles.halfDotContainer}>
+                                            <View style={[styles.halfDot, {
+                                                backgroundColor: lineColors[index - 1],
+                                                borderTopLeftRadius: ms(6),
+                                                borderBottomLeftRadius: ms(6)
+                                            }]} />
+                                            <View style={[styles.halfDot, {
+                                                backgroundColor: lineColor,
+                                                borderTopRightRadius: ms(6),
+                                                borderBottomRightRadius: ms(6)
+                                            }]} />
+                                        </View>
+                                    )}
+
+                                    {/* Lines between dots */}
+                                    {index < lineColors.length && (
+                                        <View style={[
+                                            styles.line,
+                                            { backgroundColor: lineColor }
+                                        ]} />
+                                    )}
+
+                                    {/* Last dot - full color */}
+                                    {index === lineColors.length - 1 && (
+                                        <View style={[styles.dot, { backgroundColor: lineColor }]} />
+                                    )}
+                                </View>
+                            ))}
+                        </View>
+
+                        <View style={styles.statusContainer}>
+                            <CustomText variant="body2">Status: </CustomText>
+                            <Badge
+                                text={status}
+                                variant={status === 'SUCCESSFUL' ? 'success' : 'error'}
+                            />
+                        </View>
+                        <CustomText variant="body2" style={styles.ticketId}>
+                            Ticket Id: {ticketId || "NA"}
+                        </CustomText>
+                        <CustomText variant="caption" style={styles.dateText}>
+                            Issue On: {issuedOn ? formatDateWithTime(issuedOn) : "NA"}
+                        </CustomText>
+                        <CustomText variant="caption" style={[styles.dateText, { color: theme.colors.amber[500] }]}>
+                            Valid Till: {validTill ? formatDateWithTime(validTill) : "NA"}
+                        </CustomText>
+                    </>
+                ) : (
+                    <View style={styles.noTicketContainer}>
+                        <CustomText style={styles.noTicketText}>No Tickets</CustomText>
+                    </View>
+                )}
+            </View>
+
+            {/* Conditionally render "Cancelled" badge */}
+            {isCancelled && (
+                <View style={[
+                    styles.cancelledBadge,
+                    {
+                        backgroundColor: theme.colors.error[500],
+                        top: isSingle ? '32%' : '32%',
+                        left: isSingle ? '23%' : '36%'
+                    }
+                ]}>
+                    <CustomText variant="body2" style={styles.cancelledText}>
+                        Cancelled
+                    </CustomText>
+                </View>
+            )}
+
+            <Modal
+                visible={isModalOpen}
+                transparent={true}
+                animationType="slide"
+                onRequestClose={() => setIsModalOpen(false)}
+            >
+                <View style={styles.modalOverlay}>
+                    <View style={[styles.modalContent, { backgroundColor: theme.colors.backdrop }]}>
+                        <Pressable
+                            style={styles.closeButton}
+                            onPress={() => setIsModalOpen(false)}
+                        >
+                            <CustomText style={styles.closeButtonText}>×</CustomText>
+                        </Pressable>
+                        <GestureHandlerRootView>
+                            <PanGestureHandler onGestureEvent={handleSwipeDown}>
+                                <View style={styles.modalWebviewContainer}>
+                                    <WebView
+                                        source={{
+                                            uri: `${basePath}/qr-page?token=${encodeURIComponent(qrCodeToken)}&line=${encodeURIComponent(line || "")}&dynamicBlock=${encodeURIComponent(dynamicBlock)}`
+                                        }}
+                                        style={styles.modalWebview}
+                                        key={`modal-webview-${dynamicBlock}`}
+                                    />
+                                </View>
+                            </PanGestureHandler>
+                        </GestureHandlerRootView>
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+    },
+    qrContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    passengerBadge: {
+        paddingHorizontal: ms(12),
+        paddingVertical: mvs(4),
+        borderWidth: 1,
+        borderRadius: ms(16),
+        marginBottom: mvs(8),
+    },
+    passengerText: {
+        fontWeight: '600',
+    },
+    stationContainer: {
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '90%',
+        marginVertical: mvs(4),
+    },
+    stationText: {
+        textAlign: 'center',
+        fontWeight: 'bold',
+    },
+    arrowIcon: {
+        marginHorizontal: ms(2),
+        transform: 'rotate(90deg)',
+    },
+    iconContainer: {
+        width: ms(200),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: mvs(8),
+    },
+    iconWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+    },
+    halfDotContainer: {
+        width: ms(12),
+        height: ms(12),
+        flexDirection: 'row',
+    },
+    halfDot: {
+        width: '50%',
+        height: '100%',
+    },
+    dot: {
+        width: ms(12),
+        height: ms(12),
+        borderRadius: ms(6),
+    },
+    line: {
+        height: ms(3),
+        flexGrow: 1
+    },
+    webviewContainer: {
+        width: ms(200),
+        height: mvs(200),
+        paddingHorizontal: ms(4),
+    },
+    webview: {
+        flex: 1,
+    },
+    statusContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: mvs(12),
+    },
+    ticketId: {
+        marginVertical: mvs(12),
+    },
+    dateText: {
+        marginBottom: mvs(4),
+        fontWeight: 'bold',
+    },
+    noTicketContainer: {
+        marginVertical: mvs(20),
+    },
+    noTicketText: {
+        textAlign: 'center',
+    },
+    cancelledBadge: {
+        position: 'absolute',
+        borderRadius: ms(6),
+        paddingHorizontal: ms(16),
+        paddingVertical: mvs(8),
+        // transform: [{ translateX: -ms(25) }, { translateY: -mvs(25) }],
+        zIndex: 1,
+    },
+    cancelledText: {
+        color: 'white',
+        fontWeight: 'bold',
+    },
+    modalOverlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    },
+    modalContent: {
+        height: '50%',
+        width: '90%',
+        borderRadius: ms(8),
+        overflow: 'hidden',
+    },
+    closeButton: {
+        position: 'absolute',
+        right: ms(12),
+        top: ms(12),
+        zIndex: 1,
+    },
+    closeButtonText: {
+        fontSize: ms(24),
+        color: 'black',
+    },
+    modalWebviewContainer: {
+        height: '100%',
+        justifyContent: 'center',
+    },
+    modalWebview: {
+        flex: 1,
+    },
+});
+
+export default QRCodeGenerator;

package/src/components/common/SplashScreen/SplashScreen.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, Image, Text, StyleSheet } from 'react-native';
+
+const SplashScreen = () => {
+    return (
+        <View style={styles.container}>
+            <Image
+                source={require('../../../assets/images/sequelstring_logo.png')} // Adjust the path if necessary
+                style={styles.logo}
+                resizeMode="contain"
+            />
+            <Text style={styles.tagline}>Book Your Tickets</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#37C7B8',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    logo: {
+        width: '80%',
+        height: 100,
+        marginBottom: 20,
+        backgroundColor: "#FFFFFF",
+        borderRadius: 10,
+    },
+    tagline: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: '#FFFFFF',
+    },
+});
+
+export default SplashScreen;