oneticket-sdk-vi 1.0.0

package/src/components/common/Tabs/Tabs2.tsx

@@ -0,0 +1,165 @@
+import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import {
+    View,
+    Text,
+    Pressable,
+    LayoutAnimation,
+    Platform,
+    UIManager,
+    StyleSheet,
+    Dimensions,
+    Animated
+} from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+
+// Enable LayoutAnimation for Android
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+interface TabItem {
+    id: string;
+    title: string;
+}
+
+interface TabProps {
+    tabs: TabItem[];
+    activeTab: string;
+    onChange: (tabId: string) => void;
+}
+
+const Tabs: React.FC<TabProps> = ({ tabs, activeTab, onChange }) => {
+    const { theme } = useTheme();
+    const [containerWidth, setContainerWidth] = useState(Dimensions.get('window').width);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const indicatorAnim = useRef(new Animated.Value(0)).current;
+
+    const handleTabPress = useCallback((tabId: string) => {
+        if (isAnimating) return;
+
+        setIsAnimating(true);
+        LayoutAnimation.configureNext(
+            {
+                duration: 300,
+                create: {
+                    type: LayoutAnimation.Types.linear,
+                    property: LayoutAnimation.Properties.opacity,
+                },
+                update: {
+                    type: LayoutAnimation.Types.spring,
+                    springDamping: 0.7,
+                },
+            },
+            () => setIsAnimating(false)
+        );
+
+        onChange(tabId);
+    }, [isAnimating, onChange]);
+
+    const indicatorStyle = useMemo(() => {
+        const activeIndex = tabs.findIndex(t => t.id === activeTab);
+        const safeIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1));
+        const tabWidth = (containerWidth - mvs(10)) / tabs.length;
+
+        return {
+            left: safeIndex * tabWidth,
+            width: tabWidth,
+        };
+    }, [activeTab, tabs, containerWidth]);
+
+    // Animate the indicator when position changes
+    useEffect(() => {
+        Animated.spring(indicatorAnim, {
+            toValue: indicatorStyle.left,
+            useNativeDriver: false, // 'left' property not supported for native driver
+            bounciness: 0,
+            speed: 12,
+        }).start();
+    }, [indicatorStyle.left]);
+
+    const styles = StyleSheet.create({
+        container: {
+            width: '100%',
+        },
+        tabsContainer: {
+            backgroundColor: theme.colors.transparent,
+            borderWidth: 1,
+            borderColor: theme.colors.primary[500],
+            borderRadius: 100,
+            padding: mvs(4),
+        },
+        tabsInner: {
+            flexDirection: 'row',
+            position: 'relative',
+        },
+        tabItem: {
+            flex: 1,
+            paddingVertical: mvs(8),
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 10
+        },
+        tabText: {
+            fontSize: ms(14),
+            letterSpacing: 0.5,
+        },
+        activeTabText: {
+            color: theme.colors.white,
+            fontWeight: 'bold',
+        },
+        inactiveTabText: {
+            color: theme.colors.primary[500],
+            fontWeight: 'normal',
+        },
+        indicator: {
+            position: 'absolute',
+            top: 0,
+            height: '100%',
+            backgroundColor: theme.colors.primary[500],
+            borderRadius: 100,
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            <View
+                onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+                style={styles.tabsContainer}
+            >
+                <View style={styles.tabsInner}>
+                    {tabs.map((tab) => (
+                        <Pressable
+                            key={tab.id}
+                            style={styles.tabItem}
+                            onPress={() => handleTabPress(tab.id)}
+                            disabled={isAnimating}
+                        >
+                            <Text
+                                style={[
+                                    styles.tabText,
+                                    activeTab === tab.id ? styles.activeTabText : styles.inactiveTabText,
+                                    { opacity: isAnimating ? 0.7 : 1 }
+                                ]}
+                            >
+                                {tab.title}
+                            </Text>
+                        </Pressable>
+                    ))}
+
+                    <Animated.View
+                        style={[
+                            styles.indicator,
+                            {
+                                left: indicatorAnim,
+                                width: indicatorStyle.width,
+                            }
+                        ]}
+                    />
+                </View>
+            </View>
+        </View>
+    );
+};
+
+export default React.memo(Tabs);

package/src/components/common/Text/CustomText.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Text, TextStyle } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms } from 'react-native-size-matters';
+
+type TextVariant =
+    | 'heading1' | 'heading2' | 'heading3'
+    | 'body1' | 'body2'
+    | 'labelLarge' | 'labelMedium' | 'labelSmall'
+    | 'caption';
+
+interface CustomTextProps {
+    variant?: TextVariant;
+    // style?: TextStyle | TextStyle[];
+    style?: TextStyle | (TextStyle | false | null | undefined)[];
+    children: React.ReactNode;
+}
+
+export const CustomText: React.FC<CustomTextProps> = ({
+    variant = 'body1',
+    style,
+    children
+}) => {
+    const { theme } = useTheme();
+
+    const variantStyles: Record<TextVariant, TextStyle> = {
+        heading1: {
+            fontSize: ms(28),
+            fontWeight: 'bold',
+            lineHeight: ms(36),
+        },
+        heading2: {
+            fontSize: ms(24),
+            fontWeight: '600',
+            lineHeight: ms(32),
+        },
+        heading3: {
+            fontSize: ms(20),
+            fontWeight: '600',
+            lineHeight: ms(28),
+        },
+        body1: {
+            fontSize: ms(14),
+            lineHeight: ms(20),
+        },
+        body2: {
+            fontSize: ms(12),
+            lineHeight: ms(20),
+        },
+        labelLarge: {
+            fontSize: ms(14),
+            lineHeight: ms(20),
+            fontWeight: '500',
+        },
+        labelMedium: {
+            fontSize: ms(12),
+            lineHeight: ms(16),
+            fontWeight: '500',
+        },
+        labelSmall: {
+            fontSize: ms(11),
+            lineHeight: ms(16),
+            fontWeight: '500',
+        },
+        caption: {
+            fontSize: ms(12),
+            lineHeight: ms(16),
+        },
+    };
+
+    return (
+        <Text style={[
+            {
+                color: theme.colors.text,
+                ...variantStyles[variant]
+            },
+            style
+        ]}>
+            {children}
+        </Text>
+    );
+};

package/src/components/common/Toast/CustomToast.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Toast from 'react-native-toast-message';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import InfoIcon from '../../../assets/icons/InfoIcon';
+import ErrorIcon from '../../../assets/icons/ErrorIcon';
+import SuccessIcon from '../../../assets/icons/SuccessIcon';
+import { CustomText } from '../Text/CustomText';
+
+export const CustomToast = () => {
+    const { theme } = useTheme();
+
+    const getToastStyle = (type: 'success' | 'error' | 'info') => {
+        switch (type) {
+            case 'success':
+                return {
+                    icon: <SuccessIcon size={ms(20)} color={theme.colors.success[700]} />,
+                    bg: theme.colors.success[50],
+                    iconBg: theme.colors.success[100],
+                    textColor: theme.colors.success[900],
+                };
+            case 'error':
+                return {
+                    icon: <ErrorIcon size={ms(20)} color={theme.colors.error[700]} />,
+                    bg: theme.colors.error[50],
+                    iconBg: theme.colors.error[100],
+                    textColor: theme.colors.error[900],
+                };
+            case 'info':
+                return {
+                    icon: <InfoIcon size={ms(20)} color={theme.colors.warning[700]} />,
+                    bg: theme.colors.warning[50],
+                    iconBg: theme.colors.warning[100],
+                    textColor: theme.colors.warning[900],
+                };
+        }
+    };
+
+    const renderToast = (type: 'success' | 'error' | 'info') => (props: any) => {
+        const { icon, bg, iconBg, textColor } = getToastStyle(type);
+
+        return (
+            <View
+                style={[
+                    styles.toastContainer,
+                    {
+                        backgroundColor: bg,
+                        shadowColor: theme.colors.shadow,
+                    }
+                ]}
+            >
+                <View style={styles.content}>
+                    <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
+                        {icon}
+                    </View>
+                    <View style={styles.textContainer}>
+                        <CustomText variant="labelMedium" style={[styles.title, { color: textColor }]}>
+                            {props.text1}
+                        </CustomText>
+                        {props.text2 && (
+                            <CustomText variant="body2" style={[styles.description, { color: textColor }]}>
+                                {props.text2}
+                            </CustomText>
+                        )}
+                    </View>
+                </View>
+            </View>
+        );
+    };
+
+    const toastConfig = {
+        success: renderToast('success'),
+        error: renderToast('error'),
+        info: renderToast('info'),
+    };
+
+    return <Toast config={toastConfig} position="top" visibilityTime={3500} autoHide />;
+};
+
+const styles = StyleSheet.create({
+    toastContainer: {
+        paddingHorizontal: ms(16),
+        paddingVertical: mvs(12),
+        borderRadius: ms(16),
+        width: '90%',
+        alignSelf: 'center',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 4,
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+        gap: ms(12),
+    },
+    iconContainer: {
+        borderRadius: ms(100),
+        padding: ms(8),
+    },
+    textContainer: {
+        flex: 1,
+    },
+    title: {
+        flexShrink: 1,
+    },
+    description: {
+        flexShrink: 1,
+        opacity: 0.9,
+    },
+});
+
+export default CustomToast;

package/src/components/ticketDetail/BillingDetailsSection.tsx

@@ -0,0 +1,129 @@
+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';
+import InfoIcon from '../../assets/icons/InfoIcon';
+
+interface BillingDetailsSectionProps {
+    billingDetails: {
+        name: string;
+        email: string;
+        phone: string;
+        status: string;
+    };
+    status: string;
+    totalPrice: number;
+    cancellationCharges?: number;
+    refundAmount?: number;
+}
+
+const BillingDetailsSection: React.FC<BillingDetailsSectionProps> = ({
+    billingDetails,
+    status,
+    totalPrice,
+    cancellationCharges,
+    refundAmount
+}) => {
+    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',
+        },
+        errorText: {
+            color: theme.colors.error[500], // red-500 equivalent
+            fontWeight: '500',
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            <CustomText variant="labelLarge" style={styles.title}>
+                Billing Details
+            </CustomText>
+
+            <View style={styles.row}>
+                <CustomText variant="body1">Name</CustomText>
+                <CustomText variant="body1" style={styles.valueText}>
+                    {billingDetails?.name}
+                </CustomText>
+            </View>
+
+            <View style={styles.row}>
+                <CustomText variant="body1">Phone Number</CustomText>
+                <CustomText variant="body1" style={styles.valueText}>
+                    {billingDetails?.phone}
+                </CustomText>
+            </View>
+
+            <View style={styles.row}>
+                <CustomText variant="body1">Amount</CustomText>
+                <CustomText variant="body1" style={styles.valueText}>
+                    ₹{totalPrice || 0}
+                </CustomText>
+            </View>
+
+            {(status === "CANCELLED" || status === "CANCEL_INITIATED") && (
+                <>
+                    <View style={styles.row}>
+                        <CustomText variant="body1">Cancellation Charge</CustomText>
+                        <CustomText variant="body1" style={styles.errorText}>
+                            - ₹{cancellationCharges}
+                        </CustomText>
+                    </View>
+                    <View style={styles.row}>
+                        <CustomText variant="body1">Refund Amount</CustomText>
+                        <CustomText variant="body1" style={styles.valueText}>
+                            ₹{refundAmount}
+                        </CustomText>
+                    </View>
+                </>
+            )}
+
+            <View style={styles.row}>
+                <CustomText variant="body1">Status</CustomText>
+                <Badge
+                    text={billingDetails.status}
+                    variant={billingDetails.status === 'PAID' ? 'success' : 'warning'}
+                />
+            </View>
+            {(billingDetails.status === 'REFUND_INITIATED' || billingDetails.status === 'REFUNDED') && (
+                <View style={{ flexDirection: 'row', gap: ms(4) }}>
+                    <View style={{ marginTop: mvs(4) }}>
+                        <InfoIcon size={ms(14)} color={theme.colors.textTertiary} />
+                    </View>
+                    <CustomText variant="body2" style={{ color: theme.colors.textTertiary, flexShrink: 1 }}>
+                        The refund will be processed to your account within 2–3 business days.
+                    </CustomText>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export default BillingDetailsSection;

package/src/components/ticketDetail/QRCodeSection.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import Swiper from 'react-native-swiper';
+import QRCodeGenerator from '../common/QRCodeGenerator/QRCodeGenerator';
+import { View, Image, StyleSheet } from 'react-native';
+import ChevronRightIcon from '../../assets/icons/ChevronRightIcon';
+import ChevronLeftIcon from '../../assets/icons/ChevronLeftIcon';
+import RightArrowIcon from '../../assets/icons/RightArrowIcon';
+import { consoleFunc } from '../../utils/consoleFunc';
+import { CustomText } from '../common/Text/CustomText';
+import { useTheme } from '../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import PoweredBy from '../common/PoweredBy/PoweredBy';
+
+interface QRCodeSectionProps {
+    tickets: {
+        _id: string;
+        transaction_id: string;
+        startStation: string;
+        destinationStation: string;
+        qrCodeToken: string;
+        validTill: string;
+        status: string;
+        ticketId: string;
+        line: string | undefined;
+        lineColors: string[];
+    }[][];
+    isMultipleProviders: boolean;
+    issuedOn: string;
+    status: string;
+    startStation: string;
+    destinationStation: string;
+}
+
+const QRCodeSection: React.FC<QRCodeSectionProps> = ({
+    tickets,
+    isMultipleProviders,
+    issuedOn,
+    status,
+    startStation,
+    destinationStation
+}) => {
+    const { theme } = useTheme();
+    // consoleFunc("tickets", tickets);
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow }]}>
+            {/* from and to stations */}
+            <View style={styles.stationContainer}>
+                <CustomText variant="body1" style={styles.stationText}>
+                    {startStation}
+                </CustomText>
+                <View style={styles.arrowIcon}>
+                    <RightArrowIcon size={ms(20)} color={theme.colors.text} />
+                </View>
+                <CustomText variant="body1" style={styles.stationText}>
+                    {destinationStation}
+                </CustomText>
+            </View>
+
+            {tickets ? (
+                <>
+                    {tickets.length > 1 || isMultipleProviders ? (
+                        <Swiper
+                            showsPagination={true}
+                            showsButtons
+                            nextButton={<ChevronRightIcon size={ms(35)} color={theme.colors.primary[600]} />}
+                            prevButton={<ChevronLeftIcon size={ms(35)} color={theme.colors.primary[600]} />}
+                            loop={false}
+                            dotColor="lightgray"
+                            activeDotColor={theme.colors.primary[600]}
+                            containerStyle={{
+                                maxHeight: isMultipleProviders ? mvs(460) : mvs(420)
+                            }}
+                            paginationStyle={{ bottom: mvs(10) }}
+                        >
+                            {tickets?.map((element: any[], index: number) => (
+                                element.map((ticket, index1) => (
+                                    <QRCodeGenerator
+                                        line={ticket.line}
+                                        key={index1}
+                                        qrCodeToken={ticket.qrCodeToken}
+                                        ticketId={ticket.ticketId}
+                                        startStation={ticket.startStation}
+                                        destinationStation={ticket.destinationStation}
+                                        validTill={ticket.validTill}
+                                        issuedOn={issuedOn}
+                                        status={ticket.status}
+                                        passengerNumber={index + 1}
+                                        showStations={isMultipleProviders}
+                                        lineColors={ticket.lineColors}
+                                        isCancelled={status === 'CANCELLED' || status === 'CANCEL_INITIATED'}
+                                    />
+                                ))
+                            )).flat()}
+                        </Swiper>
+                    ) : (
+                        <QRCodeGenerator
+                            line={tickets[0]?.[0]?.line}
+                            ticketId={tickets?.[0]?.[0]?.ticketId}
+                            qrCodeToken={tickets[0]?.[0]?.qrCodeToken}
+                            startStation={tickets[0]?.[0]?.startStation}
+                            destinationStation={tickets[0]?.[0]?.destinationStation}
+                            validTill={tickets[0]?.[0]?.validTill}
+                            issuedOn={issuedOn}
+                            status={tickets[0]?.[0]?.status}
+                            passengerNumber={1}
+                            showStations={isMultipleProviders}
+                            isCancelled={status === 'CANCELLED' || status === 'CANCEL_INITIATED'}
+                            isSingle={true}
+                            lineColors={tickets[0]?.[0]?.lineColors}
+                        />
+                    )}
+                    <PoweredBy />
+                </>
+            ) : (
+                <CustomText>No Tickets Available</CustomText>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        padding: ms(12),
+        borderRadius: ms(8),
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: ms(4),
+        elevation: 2,
+        alignItems: 'center',
+        gap: mvs(8),
+    },
+    stationContainer: {
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '90%',
+        marginVertical: mvs(8),
+    },
+    stationText: {
+        flex: 1,
+        textAlign: 'center',
+        fontWeight: 'bold',
+        fontSize: ms(16)
+    },
+    arrowIcon: {
+        marginHorizontal: ms(2),
+        transform: 'rotate(90deg)',
+    },
+});
+
+export default QRCodeSection;