oneticket-sdk-vi 1.0.0

package/src/components/common/Input/Input.tsx

@@ -0,0 +1,134 @@
+// components/Input.tsx
+import React, { forwardRef } from 'react';
+import { TextInput, TextInputProps, View, Text, TextStyle, ViewStyle } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import { resolveThemeColor } from '../../../theme/utils';
+
+type InputVariant = 'default' | 'filled' | 'outlined';
+
+interface InputProps extends Omit<TextInputProps, 'style'> {
+    variant?: InputVariant;
+    label?: string;
+    error?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    leftAddon?: React.ReactNode;
+    containerStyle?: ViewStyle;
+    inputStyle?: TextStyle;
+}
+
+export const Input = forwardRef<TextInput, InputProps>(({
+    variant = 'default',
+    label,
+    error,
+    leftIcon,
+    rightIcon,
+    leftAddon,
+    containerStyle,
+    inputStyle,
+    placeholder,
+    ...props
+}, ref) => {
+    const { theme } = useTheme();
+    const inputConfig = theme.components.input;
+
+    // Get variant styles with resolved colors
+    const variantStyles = {
+        ...inputConfig.variants[variant],
+        borderColor: resolveThemeColor(theme, inputConfig.variants[variant].borderColor),
+        backgroundColor: resolveThemeColor(theme, inputConfig.variants[variant].backgroundColor),
+    };
+
+    // Container styles with responsive sizing
+    const baseContainerStyle: ViewStyle = {
+        borderWidth: variantStyles.borderWidth ?? ms(inputConfig.borderWidth),
+        borderColor: error ? resolveThemeColor(theme, 'error.500') : variantStyles.borderColor,
+        borderRadius: ms(inputConfig.borderRadius),
+        backgroundColor: variantStyles.backgroundColor,
+        height: mvs(inputConfig.height),
+        paddingHorizontal: ms(inputConfig.paddingHorizontal),
+        flexDirection: 'row',
+        alignItems: 'center',
+    };
+
+    // Merge styles with containerStyle having higher priority
+    const inputContainerStyle: ViewStyle = {
+        ...baseContainerStyle,
+        ...containerStyle,
+    };
+
+    // Text input styles with responsive sizing
+    const baseTextStyle: TextStyle = {
+        ...inputConfig.textStyle,
+        flex: 1,
+        paddingVertical: mvs(inputConfig.paddingVertical),
+        color: resolveThemeColor(theme, 'text'),
+        fontSize: ms(14),
+    };
+
+    // Merge styles with inputStyle having higher priority
+    const textInputStyle: TextStyle = {
+        ...baseTextStyle,
+        ...inputStyle,
+    };
+
+    const placeholderColor = resolveThemeColor(theme, 'textTertiary') || '#999';
+
+    return (
+        <View style={{ marginBottom: mvs(theme.spacing.m) }}>
+            {label && (
+                <Text style={{
+                    color: resolveThemeColor(theme, 'textSecondary'),
+                    marginBottom: mvs(theme.spacing.xs),
+                    fontSize: ms(14),
+                }}>
+                    {label}
+                </Text>
+            )}
+
+            <View style={inputContainerStyle}>
+                {leftIcon && (
+                    <View style={{ marginRight: ms(theme.spacing.s) }}>
+                        {React.cloneElement(leftIcon as React.ReactElement, {
+                            color: resolveThemeColor(theme, 'textTertiary'),
+                            size: ms(theme.icons.medium),
+                        })}
+                    </View>
+                )}
+                {leftAddon && (
+                    <View style={{ marginRight: ms(theme.spacing.s) }}>
+                        {leftAddon}
+                    </View>
+                )}
+
+                <TextInput
+                    ref={ref}
+                    style={textInputStyle}
+                    placeholder={placeholder}
+                    placeholderTextColor={placeholderColor}
+                    {...props}
+                />
+
+                {rightIcon && (
+                    <View style={{ marginLeft: ms(theme.spacing.s) }}>
+                        {React.cloneElement(rightIcon as React.ReactElement, {
+                            color: resolveThemeColor(theme, 'textTertiary'),
+                            size: ms(theme.icons.medium),
+                        })}
+                    </View>
+                )}
+            </View>
+
+            {error && (
+                <Text style={{
+                    color: resolveThemeColor(theme, 'error.500'),
+                    marginTop: mvs(theme.spacing.xs),
+                    fontSize: ms(12),
+                }}>
+                    {error}
+                </Text>
+            )}
+        </View>
+    );
+});

package/src/components/common/Loaders/FooterComponentFlatList.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Loader from './Loader';
+
+type Props = {
+    isFetchingNextPage: boolean;
+};
+
+const FooterComponentFlatlist = ({ isFetchingNextPage }: Props) => {
+    if (!isFetchingNextPage) return null;
+    return <Loader />
+}
+
+export default FooterComponentFlatlist;

package/src/components/common/Loaders/FullScreenLoader.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect, useRef } from "react";
+import { StyleSheet, Dimensions, Animated, Easing, Image, View } from "react-native";
+import { CustomText } from "../Text/CustomText";
+import { ms, mvs } from "react-native-size-matters";
+import { useTheme } from "../../../theme/ThemeProvider";
+import PoweredBy from "../PoweredBy/PoweredBy";
+// import { Text, View } from "native-base";
+
+interface FullScreenLoaderProps {
+    text?: string; // Optional text prop
+}
+
+const { width, height } = Dimensions.get("window");
+
+const FullScreenLoader: React.FC<FullScreenLoaderProps> = ({ text }) => {
+    const { theme } = useTheme();
+    const scaleAnim = useRef(new Animated.Value(1)).current; // Initial scale value is 1
+    const opacityAnim = useRef(new Animated.Value(0.7)).current; // Initial opacity value is 0.7
+
+    useEffect(() => {
+        // Create the pulse animation for scale and opacity
+        const pulse = Animated.loop(
+            Animated.sequence([
+                Animated.parallel([
+                    Animated.timing(scaleAnim, {
+                        toValue: 1.1,
+                        duration: 500,
+                        easing: Easing.inOut(Easing.ease),
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(opacityAnim, {
+                        toValue: 1,
+                        duration: 500,
+                        easing: Easing.inOut(Easing.ease),
+                        useNativeDriver: true,
+                    }),
+                ]),
+                Animated.parallel([
+                    Animated.timing(scaleAnim, {
+                        toValue: 1,
+                        duration: 500,
+                        easing: Easing.inOut(Easing.ease),
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(opacityAnim, {
+                        toValue: 0.7,
+                        duration: 500,
+                        easing: Easing.inOut(Easing.ease),
+                        useNativeDriver: true,
+                    }),
+                ]),
+            ])
+        );
+
+        pulse.start(); // Start the animation
+
+        return () => pulse.stop(); // Clean up animation on component unmount
+    }, [scaleAnim, opacityAnim]);
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            width: "100%",
+            height: "100%",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingTop: mvs(30),
+            paddingBottom: mvs(12),
+        },
+        centerContent: {
+            flexGrow: 1,
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        logo: {
+            // width: ms(220),
+            // height: mvs(70),
+            width: ms(150),
+            height: mvs(150),
+            resizeMode: "contain",
+        },
+        loadingText: {
+            fontSize: ms(12),
+            fontWeight: "500",
+            color: theme.colors.primary[500],
+            marginTop: mvs(-8), // Added some margin between logo and text
+        },
+        poweredByContainer: {
+            flexDirection: 'row',
+            alignItems: "center",
+        }
+    });
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            {/* Animated logo in the center */}
+            <Animated.View style={[styles.centerContent, { transform: [{ scale: scaleAnim }], opacity: opacityAnim }]}>
+                {/* <Image
+                    source={require("../../../assets/images/poweredByLogo.png")}
+                    alt='company-logo'
+                    style={{
+                        // width: 220,
+                        width: 160,
+                        height: 80,
+                        alignSelf: 'center',
+                        marginTop: -24,
+                        marginBottom: 20,
+                    }}
+                    resizeMode="contain" // Adjust how the image scales
+                /> */}
+                <Image
+                    source={require("../../../assets/images/OneTicketNewBlueLogo.png")}
+                    alt={"company_logo"}
+                    style={[
+                        styles.logo,
+                        // { transform: [{ scale: scaleAnim }], opacity: opacityAnim },
+                    ]}
+                />
+                <CustomText
+                    style={[
+                        styles.loadingText,
+                        // { transform: [{ scale: scaleAnim }], opacity: opacityAnim }
+                    ]}
+                >
+                    Powered by SAI-SequelString AI
+                </CustomText>
+            </Animated.View>
+
+            {/* Powered by section at the bottom */}
+            <PoweredBy />
+        </View>
+    );
+};
+
+export default FullScreenLoader;

package/src/components/common/Loaders/Loader.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import Svg, { G, Circle } from 'react-native-svg';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const AnimatedLoader = ({ size, color }: any) => {
+    const circles = Array.from({ length: 10 }, (_, i) => i); // Create an array of 10 items
+    const animations = useRef(circles.map(() => new Animated.Value(0))).current;
+
+    useEffect(() => {
+        // Animate all circles with a staggered delay between them
+        const animateCircles = () => {
+            Animated.stagger(100, // Delay between the start of each circle's animation
+                circles.map((_, i) =>
+                    Animated.loop(
+                        Animated.sequence([
+                            Animated.timing(animations[i], {
+                                toValue: 1,
+                                duration: 1000,
+                                easing: Easing.linear,
+                                useNativeDriver: true,
+                            }),
+                            Animated.timing(animations[i], {
+                                toValue: 0,
+                                duration: 0,
+                                useNativeDriver: true,
+                            }),
+                        ]),
+                    )
+                )
+            ).start();
+        };
+
+        animateCircles();
+    }, [animations]);
+
+    const getCircleOpacity = (i: number) => animations[i].interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, 0], // Opacity fades from 1 to 0
+    });
+
+    const getCircleScale = (i: number) => animations[i].interpolate({
+        inputRange: [0, 1],
+        outputRange: [1.1, 1], // Circle scales down from 1.2 to 1
+    });
+
+    const positions = [
+        { x: 80, y: 50, rotate: 0 },
+        { x: 74, y: 67, rotate: 36 },
+        { x: 59, y: 78, rotate: 72 },
+        { x: 40, y: 78, rotate: 108 },
+        { x: 25, y: 67, rotate: 144 },
+        { x: 20, y: 50, rotate: 180 },
+        { x: 25, y: 32, rotate: 216 },
+        { x: 40, y: 21, rotate: 252 },
+        { x: 59, y: 21, rotate: 288 },
+        { x: 74, y: 32, rotate: 324 },
+    ];
+
+    return (
+        <View>
+            <Svg width={size} height={size} viewBox="0 0 100 100">
+                {positions.map((pos, i) => (
+                    <G key={i} transform={`translate(${pos.x}, ${pos.y}) rotate(${pos.rotate})`}>
+                        <AnimatedCircle
+                            r={5}
+                            fill={color}
+                            fillOpacity={getCircleOpacity(i)}
+                            transform={[{ scale: getCircleScale(i) }]}
+                        />
+                    </G>
+                ))}
+            </Svg>
+        </View>
+    );
+};
+
+const Loader = ({ size = 60, color = '#00b0f0' }) => (
+
+    <View style={{ justifyContent: 'center', alignItems: 'center', paddingVertical: 2 }}>
+        <AnimatedLoader size={size} color={color} />
+    </View>
+);
+
+export default Loader;

package/src/components/common/Modals/CancellationModal.tsx

@@ -0,0 +1,268 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, Modal, Pressable, TouchableOpacity } from 'react-native';
+import { CustomText } from '../Text/CustomText';
+import { Button } from '../Button/Button';
+import DropdownComponent from '../DropdownComponent/DropdownComponent';
+import { consoleFunc } from '../../../utils/consoleFunc';
+import { useMutateHardCancelMetroTicket, useMutateSoftCancelMetroTicket } from '../../../services/apis/metro/cancelTicket/hooks';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import CloseIcon from '../../../assets/icons/CloseIcon';
+
+interface CancellationModalProps {
+    isCancelModalVisible: boolean;
+    setIsCancelModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    setShowCancellationDetails: React.Dispatch<React.SetStateAction<any>>;
+    transaction_id: string;
+    onCancelSuccess?: () => void;
+}
+
+const CancellationModal: React.FC<CancellationModalProps> = ({
+    isCancelModalVisible,
+    setIsCancelModalVisible,
+    setShowCancellationDetails,
+    transaction_id,
+    onCancelSuccess
+}) => {
+    const { theme } = useTheme();
+    const [step, setStep] = useState(1);
+    const [selectedReason, setSelectedReason] = useState(null);
+    const [showHelperText, setShowHelperText] = useState(false);
+    const [confirmCancelDetails, setConfirmCancelDetails] = useState({
+        totalPrice: 0,
+        cancellationCharges: 0,
+        refundAmound: 0
+    });
+
+    const cancellationReasons = [
+        { id: '1', name: 'Change of plans' },
+        { id: '2', name: 'Incorrect details' },
+        { id: '3', name: 'Found a better option' },
+        { id: '4', name: 'Other' },
+    ];
+
+    const closeCancel = () => {
+        setIsCancelModalVisible(false);
+        setSelectedReason(null);
+        setShowHelperText(false);
+        setStep(1);
+    };
+
+    const { mutateAsync: hardCancel, isPending: hardCancelLoading } = useMutateHardCancelMetroTicket(data => {
+        consoleFunc("on hard cancel data", data);
+        if (data.status === 'success') {
+            setStep(3);
+            setShowCancellationDetails(true);
+        } else {
+            setIsCancelModalVisible(false);
+        }
+    });
+
+    const { mutateAsync: softCancel, isPending: softCancelLoading } = useMutateSoftCancelMetroTicket(data => {
+        consoleFunc("on soft cancel data", data);
+        if (data.status === 'success') {
+            setStep(2);
+            setShowHelperText(false);
+            setConfirmCancelDetails({
+                totalPrice: data.result.totalPrice,
+                cancellationCharges: data.result.cancellationCharges,
+                refundAmound: data.result.totalPrice - data.result.cancellationCharges,
+            });
+        } else {
+            setIsCancelModalVisible(false);
+        }
+    });
+
+    const handleNextClick = () => {
+        if (!selectedReason) {
+            setShowHelperText(true);
+        } else {
+            softCancel({ transaction_id });
+        }
+    };
+
+    const handleCancelTicket = () => {
+        hardCancel({ transaction_id });
+    };
+
+    const styles = StyleSheet.create({
+        modalOverlay: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        },
+        modalContainer: {
+            width: '90%',
+            backgroundColor: theme.colors.background,
+            borderRadius: ms(8),
+            padding: ms(20),
+            shadowColor: theme.colors.shadow,
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.25,
+            shadowRadius: ms(4),
+            elevation: 5,
+        },
+        modalTitle: {
+            fontWeight: 'bold',
+            marginBottom: mvs(16),
+        },
+        modalSubtitle: {
+            marginBottom: mvs(12),
+        },
+        modalText: {
+            marginBottom: mvs(8),
+        },
+        errorText: {
+            color: theme.colors.error[500],
+            marginTop: mvs(8),
+        },
+        buttonRow: {
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            marginTop: mvs(20),
+            gap: ms(8),
+        },
+        cancelButton: {
+            borderColor: theme.colors.error[500],
+            minWidth: ms(80),
+        },
+        nextButton: {
+            backgroundColor: theme.colors.error[500],
+            minWidth: ms(80),
+        },
+        backButton: {
+            borderColor: theme.colors.error[500],
+            minWidth: ms(80),
+        },
+        confirmButton: {
+            backgroundColor: theme.colors.error[500],
+            minWidth: ms(80),
+        },
+    });
+
+    return (
+        <Modal
+            visible={isCancelModalVisible}
+            transparent={true}
+            animationType="fade"
+            onRequestClose={closeCancel}
+        >
+            <View style={styles.modalOverlay}>
+                <View style={styles.modalContainer}>
+                    {step === 3 ? (
+                        <>
+                            <TouchableOpacity
+                                style={{ margin: ms(-8), alignSelf: 'flex-end' }}
+                                onPress={() => {
+                                    closeCancel();
+                                    onCancelSuccess?.();  // ← we’ll add this prop to tell parent to refresh
+                                }}
+                            >
+                                <CloseIcon color={theme.colors.text} />
+                            </TouchableOpacity>
+                            <View style={{
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }}>
+                                <CustomText variant="labelLarge" style={styles.modalTitle}>
+                                    Ticket Cancelled Successfully
+                                </CustomText>
+                                <CustomText variant="body1" style={styles.modalText}>
+                                    The refund will be processed to your account within 2–3 business days.
+                                </CustomText>
+                            </View>
+                        </>
+                    ) : step === 2 ? (
+                        <>
+                            <CustomText variant="labelLarge" style={styles.modalTitle}>
+                                Cancellation Confirmation
+                            </CustomText>
+                            <CustomText variant="body1" style={styles.modalText}>
+                                Cancellation Charges: ₹{confirmCancelDetails.cancellationCharges}
+                            </CustomText>
+                            <CustomText variant="body1" style={styles.modalText}>
+                                Refund Amount: ₹{confirmCancelDetails.refundAmound}
+                            </CustomText>
+                            <CustomText variant="body1" style={styles.modalText}>
+                                Are you sure you want to cancel this ticket?
+                            </CustomText>
+                            <View style={styles.buttonRow}>
+                                <Button
+                                    size='sm'
+                                    variant="outlined"
+                                    style={styles.backButton}
+                                    textStyle={{ color: theme.colors.error[500] }}
+                                    pressedStyle={{ backgroundColor: theme.colors.error[100] }}
+                                    onPress={() => setStep(1)}
+                                >
+                                    Back
+                                </Button>
+                                <Button
+                                    size='sm'
+                                    variant="primary"
+                                    style={styles.confirmButton}
+                                    pressedStyle={{ backgroundColor: theme.colors.error[800] }}
+                                    onPress={handleCancelTicket}
+                                    loading={hardCancelLoading}
+                                    loadingText="Processing..."
+                                >
+                                    Confirm
+                                </Button>
+                            </View>
+                        </>
+                    ) : (
+                        <>
+                            <CustomText variant="heading3" style={styles.modalTitle}>
+                                Cancellation Reason
+                            </CustomText>
+                            <CustomText variant="body1" style={styles.modalSubtitle}>
+                                Select a reason for cancellation:
+                            </CustomText>
+                            <DropdownComponent
+                                data={cancellationReasons}
+                                value={selectedReason}
+                                placeholder="Choose reason"
+                                enableSearch={false}
+                                onChange={(item) => {
+                                    setSelectedReason(item);
+                                    setShowHelperText(false);
+                                }}
+                            />
+                            {showHelperText && (
+                                <CustomText variant="caption" style={styles.errorText}>
+                                    Please select a reason for cancellation.
+                                </CustomText>
+                            )}
+                            <View style={styles.buttonRow}>
+                                <Button
+                                    size='sm'
+                                    variant="outlined"
+                                    style={styles.cancelButton}
+                                    textStyle={{ color: theme.colors.error[500] }}
+                                    pressedStyle={{ backgroundColor: theme.colors.error[100] }}
+                                    onPress={closeCancel}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button
+                                    size='sm'
+                                    variant="primary"
+                                    style={styles.nextButton}
+                                    pressedStyle={{ backgroundColor: theme.colors.error[800] }}
+                                    onPress={handleNextClick}
+                                    loading={softCancelLoading}
+                                    loadingText="Processing..."
+                                >
+                                    Proceed
+                                </Button>
+                            </View>
+                        </>
+                    )}
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+export default CancellationModal;

package/src/components/common/Modals/IssueCategoryData.tsx

@@ -0,0 +1,26 @@
+export const categories = [
+    { value: "ORDER", label: "Order" },
+    { value: "PAYMENT", label: "Payment" },
+    { value: "FULFILLMENT", label: "Fulfillment" },
+];
+
+export const subCategories: any = {
+    ORDER: [
+        { key: "ORD101", value: "Ticket not generated" }
+    ],
+    PAYMENT: [
+        { key: "PMT101", value: "Refund not received" },
+        { key: "PMT102", value: "Amount deducted but payment failed" },
+        // { key: "PMT103", value: "Overpaid (RSF)" },
+        // { key: "PMT104", value: "Not paid (RSF)" },
+        // { key: "PMT105", value: "Partially paid (RSF)" },
+        // { key: "PMT106", value: "Delayed payment (RSF)" },
+    ],
+    FULFILLMENT: [
+        { key: "FLM101", value: "Ticket not working" },
+        { key: "FLM102", value: "Unable to cancel the ticket" },
+        { key: "FLM103", value: "Unable to modifying ticket details" },
+        { key: "FLM104", value: "Ticket not working - due to To & fro mismatch" }
+    ],
+
+};