oneticket-sdk-vi 1.0.0

package/dist/src/components/common/SplashScreen/SplashScreen.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const SplashScreen = () => {
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        react_1.default.createElement(react_native_1.Image, { source: require('../../../assets/images/sequelstring_logo.png'), style: styles.logo, resizeMode: "contain" }),
+        react_1.default.createElement(react_native_1.Text, { style: styles.tagline }, "Book Your Tickets")));
+};
+const styles = react_native_1.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',
+    },
+});
+exports.default = SplashScreen;

package/dist/src/components/common/Tabs/Tabs2.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface TabItem {
+    id: string;
+    title: string;
+}
+interface TabProps {
+    tabs: TabItem[];
+    activeTab: string;
+    onChange: (tabId: string) => void;
+}
+declare const _default: React.NamedExoticComponent<TabProps>;
+export default _default;

package/dist/src/components/common/Tabs/Tabs2.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const react_native_size_matters_1 = require("react-native-size-matters");
+// Enable LayoutAnimation for Android
+if (react_native_1.Platform.OS === 'android' && react_native_1.UIManager.setLayoutAnimationEnabledExperimental) {
+    react_native_1.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const Tabs = ({ tabs, activeTab, onChange }) => {
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(react_native_1.Dimensions.get('window').width);
+    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+    const indicatorAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const handleTabPress = (0, react_1.useCallback)((tabId) => {
+        if (isAnimating)
+            return;
+        setIsAnimating(true);
+        react_native_1.LayoutAnimation.configureNext({
+            duration: 300,
+            create: {
+                type: react_native_1.LayoutAnimation.Types.linear,
+                property: react_native_1.LayoutAnimation.Properties.opacity,
+            },
+            update: {
+                type: react_native_1.LayoutAnimation.Types.spring,
+                springDamping: 0.7,
+            },
+        }, () => setIsAnimating(false));
+        onChange(tabId);
+    }, [isAnimating, onChange]);
+    const indicatorStyle = (0, react_1.useMemo)(() => {
+        const activeIndex = tabs.findIndex(t => t.id === activeTab);
+        const safeIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1));
+        const tabWidth = (containerWidth - (0, react_native_size_matters_1.mvs)(10)) / tabs.length;
+        return {
+            left: safeIndex * tabWidth,
+            width: tabWidth,
+        };
+    }, [activeTab, tabs, containerWidth]);
+    // Animate the indicator when position changes
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.spring(indicatorAnim, {
+            toValue: indicatorStyle.left,
+            useNativeDriver: false,
+            bounciness: 0,
+            speed: 12,
+        }).start();
+    }, [indicatorStyle.left]);
+    const styles = react_native_1.StyleSheet.create({
+        container: {
+            width: '100%',
+        },
+        tabsContainer: {
+            backgroundColor: theme.colors.transparent,
+            borderWidth: 1,
+            borderColor: theme.colors.primary[500],
+            borderRadius: 100,
+            padding: (0, react_native_size_matters_1.mvs)(4),
+        },
+        tabsInner: {
+            flexDirection: 'row',
+            position: 'relative',
+        },
+        tabItem: {
+            flex: 1,
+            paddingVertical: (0, react_native_size_matters_1.mvs)(8),
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 10
+        },
+        tabText: {
+            fontSize: (0, react_native_size_matters_1.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 (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        react_1.default.createElement(react_native_1.View, { onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width), style: styles.tabsContainer },
+            react_1.default.createElement(react_native_1.View, { style: styles.tabsInner },
+                tabs.map((tab) => (react_1.default.createElement(react_native_1.Pressable, { key: tab.id, style: styles.tabItem, onPress: () => handleTabPress(tab.id), disabled: isAnimating },
+                    react_1.default.createElement(react_native_1.Text, { style: [
+                            styles.tabText,
+                            activeTab === tab.id ? styles.activeTabText : styles.inactiveTabText,
+                            { opacity: isAnimating ? 0.7 : 1 }
+                        ] }, tab.title)))),
+                react_1.default.createElement(react_native_1.Animated.View, { style: [
+                        styles.indicator,
+                        {
+                            left: indicatorAnim,
+                            width: indicatorStyle.width,
+                        }
+                    ] })))));
+};
+exports.default = react_1.default.memo(Tabs);

package/dist/src/components/common/Text/CustomText.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TextStyle } from 'react-native';
+type TextVariant = 'heading1' | 'heading2' | 'heading3' | 'body1' | 'body2' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'caption';
+interface CustomTextProps {
+    variant?: TextVariant;
+    style?: TextStyle | (TextStyle | false | null | undefined)[];
+    children: React.ReactNode;
+}
+export declare const CustomText: React.FC<CustomTextProps>;
+export {};

package/dist/src/components/common/Text/CustomText.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomText = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const react_native_size_matters_1 = require("react-native-size-matters");
+const CustomText = ({ variant = 'body1', style, children }) => {
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    const variantStyles = {
+        heading1: {
+            fontSize: (0, react_native_size_matters_1.ms)(28),
+            fontWeight: 'bold',
+            lineHeight: (0, react_native_size_matters_1.ms)(36),
+        },
+        heading2: {
+            fontSize: (0, react_native_size_matters_1.ms)(24),
+            fontWeight: '600',
+            lineHeight: (0, react_native_size_matters_1.ms)(32),
+        },
+        heading3: {
+            fontSize: (0, react_native_size_matters_1.ms)(20),
+            fontWeight: '600',
+            lineHeight: (0, react_native_size_matters_1.ms)(28),
+        },
+        body1: {
+            fontSize: (0, react_native_size_matters_1.ms)(14),
+            lineHeight: (0, react_native_size_matters_1.ms)(20),
+        },
+        body2: {
+            fontSize: (0, react_native_size_matters_1.ms)(12),
+            lineHeight: (0, react_native_size_matters_1.ms)(20),
+        },
+        labelLarge: {
+            fontSize: (0, react_native_size_matters_1.ms)(14),
+            lineHeight: (0, react_native_size_matters_1.ms)(20),
+            fontWeight: '500',
+        },
+        labelMedium: {
+            fontSize: (0, react_native_size_matters_1.ms)(12),
+            lineHeight: (0, react_native_size_matters_1.ms)(16),
+            fontWeight: '500',
+        },
+        labelSmall: {
+            fontSize: (0, react_native_size_matters_1.ms)(11),
+            lineHeight: (0, react_native_size_matters_1.ms)(16),
+            fontWeight: '500',
+        },
+        caption: {
+            fontSize: (0, react_native_size_matters_1.ms)(12),
+            lineHeight: (0, react_native_size_matters_1.ms)(16),
+        },
+    };
+    return (react_1.default.createElement(react_native_1.Text, { style: [
+            Object.assign({ color: theme.colors.text }, variantStyles[variant]),
+            style
+        ] }, children));
+};
+exports.CustomText = CustomText;

package/dist/src/components/common/Toast/CustomToast.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const CustomToast: () => React.JSX.Element;
+export default CustomToast;

package/dist/src/components/common/Toast/CustomToast.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomToast = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_toast_message_1 = __importDefault(require("react-native-toast-message"));
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const react_native_size_matters_1 = require("react-native-size-matters");
+const InfoIcon_1 = __importDefault(require("../../../assets/icons/InfoIcon"));
+const ErrorIcon_1 = __importDefault(require("../../../assets/icons/ErrorIcon"));
+const SuccessIcon_1 = __importDefault(require("../../../assets/icons/SuccessIcon"));
+const CustomText_1 = require("../Text/CustomText");
+const CustomToast = () => {
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    const getToastStyle = (type) => {
+        switch (type) {
+            case 'success':
+                return {
+                    icon: react_1.default.createElement(SuccessIcon_1.default, { size: (0, react_native_size_matters_1.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: react_1.default.createElement(ErrorIcon_1.default, { size: (0, react_native_size_matters_1.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: react_1.default.createElement(InfoIcon_1.default, { size: (0, react_native_size_matters_1.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) => (props) => {
+        const { icon, bg, iconBg, textColor } = getToastStyle(type);
+        return (react_1.default.createElement(react_native_1.View, { style: [
+                styles.toastContainer,
+                {
+                    backgroundColor: bg,
+                    shadowColor: theme.colors.shadow,
+                }
+            ] },
+            react_1.default.createElement(react_native_1.View, { style: styles.content },
+                react_1.default.createElement(react_native_1.View, { style: [styles.iconContainer, { backgroundColor: iconBg }] }, icon),
+                react_1.default.createElement(react_native_1.View, { style: styles.textContainer },
+                    react_1.default.createElement(CustomText_1.CustomText, { variant: "labelMedium", style: [styles.title, { color: textColor }] }, props.text1),
+                    props.text2 && (react_1.default.createElement(CustomText_1.CustomText, { variant: "body2", style: [styles.description, { color: textColor }] }, props.text2))))));
+    };
+    const toastConfig = {
+        success: renderToast('success'),
+        error: renderToast('error'),
+        info: renderToast('info'),
+    };
+    return react_1.default.createElement(react_native_toast_message_1.default, { config: toastConfig, position: "top", visibilityTime: 3500, autoHide: true });
+};
+exports.CustomToast = CustomToast;
+const styles = react_native_1.StyleSheet.create({
+    toastContainer: {
+        paddingHorizontal: (0, react_native_size_matters_1.ms)(16),
+        paddingVertical: (0, react_native_size_matters_1.mvs)(12),
+        borderRadius: (0, react_native_size_matters_1.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: (0, react_native_size_matters_1.ms)(12),
+    },
+    iconContainer: {
+        borderRadius: (0, react_native_size_matters_1.ms)(100),
+        padding: (0, react_native_size_matters_1.ms)(8),
+    },
+    textContainer: {
+        flex: 1,
+    },
+    title: {
+        flexShrink: 1,
+    },
+    description: {
+        flexShrink: 1,
+        opacity: 0.9,
+    },
+});
+exports.default = exports.CustomToast;

package/dist/src/components/ticketDetail/BillingDetailsSection.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface BillingDetailsSectionProps {
+    billingDetails: {
+        name: string;
+        email: string;
+        phone: string;
+        status: string;
+    };
+    status: string;
+    totalPrice: number;
+    cancellationCharges?: number;
+    refundAmount?: number;
+}
+declare const BillingDetailsSection: React.FC<BillingDetailsSectionProps>;
+export default BillingDetailsSection;

package/dist/src/components/ticketDetail/BillingDetailsSection.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ThemeProvider_1 = require("../../theme/ThemeProvider");
+const CustomText_1 = require("../common/Text/CustomText");
+const Badge_1 = __importDefault(require("../common/Badge/Badge"));
+const react_native_size_matters_1 = require("react-native-size-matters");
+const InfoIcon_1 = __importDefault(require("../../assets/icons/InfoIcon"));
+const BillingDetailsSection = ({ billingDetails, status, totalPrice, cancellationCharges, refundAmount }) => {
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    const styles = react_native_1.StyleSheet.create({
+        container: {
+            width: '100%',
+            padding: (0, react_native_size_matters_1.ms)(12),
+            borderRadius: (0, react_native_size_matters_1.ms)(8),
+            backgroundColor: theme.colors.background,
+            shadowColor: theme.colors.shadow,
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: (0, react_native_size_matters_1.ms)(4),
+            elevation: 2,
+            gap: (0, react_native_size_matters_1.ms)(8),
+        },
+        title: {
+            textAlign: 'center',
+            marginBottom: (0, react_native_size_matters_1.mvs)(8),
+            fontWeight: 'bold',
+        },
+        row: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        valueText: {
+            color: theme.colors.primary[500],
+            fontWeight: '500',
+        },
+        errorText: {
+            color: theme.colors.error[500],
+            fontWeight: '500',
+        },
+    });
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        react_1.default.createElement(CustomText_1.CustomText, { variant: "labelLarge", style: styles.title }, "Billing Details"),
+        react_1.default.createElement(react_native_1.View, { style: styles.row },
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1" }, "Name"),
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: styles.valueText }, billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name)),
+        react_1.default.createElement(react_native_1.View, { style: styles.row },
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1" }, "Phone Number"),
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: styles.valueText }, billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.phone)),
+        react_1.default.createElement(react_native_1.View, { style: styles.row },
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1" }, "Amount"),
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: styles.valueText },
+                "\u20B9",
+                totalPrice || 0)),
+        (status === "CANCELLED" || status === "CANCEL_INITIATED") && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_native_1.View, { style: styles.row },
+                react_1.default.createElement(CustomText_1.CustomText, { variant: "body1" }, "Cancellation Charge"),
+                react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: styles.errorText },
+                    "- \u20B9",
+                    cancellationCharges)),
+            react_1.default.createElement(react_native_1.View, { style: styles.row },
+                react_1.default.createElement(CustomText_1.CustomText, { variant: "body1" }, "Refund Amount"),
+                react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: styles.valueText },
+                    "\u20B9",
+                    refundAmount)))),
+        react_1.default.createElement(react_native_1.View, { style: styles.row },
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1" }, "Status"),
+            react_1.default.createElement(Badge_1.default, { text: billingDetails.status, variant: billingDetails.status === 'PAID' ? 'success' : 'warning' })),
+        (billingDetails.status === 'REFUND_INITIATED' || billingDetails.status === 'REFUNDED') && (react_1.default.createElement(react_native_1.View, { style: { flexDirection: 'row', gap: (0, react_native_size_matters_1.ms)(4) } },
+            react_1.default.createElement(react_native_1.View, { style: { marginTop: (0, react_native_size_matters_1.mvs)(4) } },
+                react_1.default.createElement(InfoIcon_1.default, { size: (0, react_native_size_matters_1.ms)(14), color: theme.colors.textTertiary })),
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body2", style: { color: theme.colors.textTertiary, flexShrink: 1 } }, "The refund will be processed to your account within 2\u20133 business days.")))));
+};
+exports.default = BillingDetailsSection;

package/dist/src/components/ticketDetail/QRCodeSection.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+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;
+}
+declare const QRCodeSection: React.FC<QRCodeSectionProps>;
+export default QRCodeSection;

package/dist/src/components/ticketDetail/QRCodeSection.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_swiper_1 = __importDefault(require("react-native-swiper"));
+const QRCodeGenerator_1 = __importDefault(require("../common/QRCodeGenerator/QRCodeGenerator"));
+const react_native_1 = require("react-native");
+const ChevronRightIcon_1 = __importDefault(require("../../assets/icons/ChevronRightIcon"));
+const ChevronLeftIcon_1 = __importDefault(require("../../assets/icons/ChevronLeftIcon"));
+const RightArrowIcon_1 = __importDefault(require("../../assets/icons/RightArrowIcon"));
+const CustomText_1 = require("../common/Text/CustomText");
+const ThemeProvider_1 = require("../../theme/ThemeProvider");
+const react_native_size_matters_1 = require("react-native-size-matters");
+const PoweredBy_1 = __importDefault(require("../common/PoweredBy/PoweredBy"));
+const QRCodeSection = ({ tickets, isMultipleProviders, issuedOn, status, startStation, destinationStation }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    // consoleFunc("tickets", tickets);
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow }] },
+        react_1.default.createElement(react_native_1.View, { style: styles.stationContainer },
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: styles.stationText }, startStation),
+            react_1.default.createElement(react_native_1.View, { style: styles.arrowIcon },
+                react_1.default.createElement(RightArrowIcon_1.default, { size: (0, react_native_size_matters_1.ms)(20), color: theme.colors.text })),
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: styles.stationText }, destinationStation)),
+        tickets ? (react_1.default.createElement(react_1.default.Fragment, null,
+            tickets.length > 1 || isMultipleProviders ? (react_1.default.createElement(react_native_swiper_1.default, { showsPagination: true, showsButtons: true, nextButton: react_1.default.createElement(ChevronRightIcon_1.default, { size: (0, react_native_size_matters_1.ms)(35), color: theme.colors.primary[600] }), prevButton: react_1.default.createElement(ChevronLeftIcon_1.default, { size: (0, react_native_size_matters_1.ms)(35), color: theme.colors.primary[600] }), loop: false, dotColor: "lightgray", activeDotColor: theme.colors.primary[600], containerStyle: {
+                    maxHeight: isMultipleProviders ? (0, react_native_size_matters_1.mvs)(460) : (0, react_native_size_matters_1.mvs)(420)
+                }, paginationStyle: { bottom: (0, react_native_size_matters_1.mvs)(10) } }, tickets === null || tickets === void 0 ? void 0 : tickets.map((element, index) => (element.map((ticket, index1) => (react_1.default.createElement(QRCodeGenerator_1.default, { 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())) : (react_1.default.createElement(QRCodeGenerator_1.default, { line: (_b = (_a = tickets[0]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.line, ticketId: (_d = (_c = tickets === null || tickets === void 0 ? void 0 : tickets[0]) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.ticketId, qrCodeToken: (_f = (_e = tickets[0]) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.qrCodeToken, startStation: (_h = (_g = tickets[0]) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.startStation, destinationStation: (_k = (_j = tickets[0]) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.destinationStation, validTill: (_m = (_l = tickets[0]) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.validTill, issuedOn: issuedOn, status: (_p = (_o = tickets[0]) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.status, passengerNumber: 1, showStations: isMultipleProviders, isCancelled: status === 'CANCELLED' || status === 'CANCEL_INITIATED', isSingle: true, lineColors: (_r = (_q = tickets[0]) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.lineColors })),
+            react_1.default.createElement(PoweredBy_1.default, null))) : (react_1.default.createElement(CustomText_1.CustomText, null, "No Tickets Available"))));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        padding: (0, react_native_size_matters_1.ms)(12),
+        borderRadius: (0, react_native_size_matters_1.ms)(8),
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: (0, react_native_size_matters_1.ms)(4),
+        elevation: 2,
+        alignItems: 'center',
+        gap: (0, react_native_size_matters_1.mvs)(8),
+    },
+    stationContainer: {
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '90%',
+        marginVertical: (0, react_native_size_matters_1.mvs)(8),
+    },
+    stationText: {
+        flex: 1,
+        textAlign: 'center',
+        fontWeight: 'bold',
+        fontSize: (0, react_native_size_matters_1.ms)(16)
+    },
+    arrowIcon: {
+        marginHorizontal: (0, react_native_size_matters_1.ms)(2),
+        transform: 'rotate(90deg)',
+    },
+});
+exports.default = QRCodeSection;

package/dist/src/components/ticketDetail/RouteSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { GetMetroTicketStatusApiResponse } from '../../services/apis/metro/status/types';
+interface RouteSectionProps {
+    routes: GetMetroTicketStatusApiResponse["result"]['routes'];
+}
+declare const RouteSection: React.FC<RouteSectionProps>;
+export default RouteSection;