oneticket-sdk-vi 1.0.0

package/dist/src/screens/metro/ChooseTicketTypeScreen.js

@@ -0,0 +1,119 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 native_1 = require("@react-navigation/native");
+const react_native_size_matters_1 = require("react-native-size-matters");
+const TypeCard_1 = __importDefault(require("../../components/common/Cards/TypeCard"));
+const Header_1 = __importDefault(require("../../components/common/Header/Header"));
+const FullScreenLoader_1 = __importDefault(require("../../components/common/Loaders/FullScreenLoader"));
+const MetroStack_1 = require("../../navigation/metro/MetroStack");
+const itemsLowestFare_1 = require("../../helper/itemsLowestFare");
+const hooks_1 = require("../../services/apis/metro/fare/hooks");
+const react_native_toast_message_1 = __importDefault(require("react-native-toast-message"));
+// import { CustomText } from '../../components/common/CustomText';
+const ChooseTicketTypeScreen = () => {
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    const { navigate, goBack } = (0, native_1.useNavigation)();
+    const { params: { startStation, destinationStation, cityCode } } = (0, native_1.useRoute)();
+    const { data: items, isLoading: itemsLoading, isRefetching, refetch } = (0, hooks_1.useFetchGetMetroFares)({
+        startStation,
+        destinationStation,
+        cityCode
+    });
+    const [localLoading, setLocalLoading] = (0, react_1.useState)(true);
+    const [isSingleProvider, setIsSingleProvider] = (0, react_1.useState)(true);
+    const handleTicketTypeSelect = (item) => {
+        navigate(MetroStack_1.MetroScreens.BuyTicket, {
+            startStation,
+            destinationStation,
+            item,
+            cityCode,
+            isSingleProvider
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        if (!itemsLoading) {
+            if (items === null || items === void 0 ? void 0 : items.result) {
+                if (items.result.length === 1) {
+                    navigate(MetroStack_1.MetroScreens.BuyTicket, {
+                        startStation,
+                        destinationStation,
+                        cityCode,
+                        item: items.result[0],
+                        isSingleProvider
+                    });
+                }
+                else if (items.result.length === 0) {
+                    goBack();
+                    react_native_toast_message_1.default.show({
+                        type: "error",
+                        text1: "No Provider is available"
+                    });
+                }
+                else {
+                    setIsSingleProvider(false);
+                    setLocalLoading(false);
+                }
+            }
+            else {
+                goBack();
+                react_native_toast_message_1.default.show({
+                    type: "error",
+                    text1: (items === null || items === void 0 ? void 0 : items.message) || "Data not fetched properly"
+                });
+            }
+        }
+    }, [items, itemsLoading]);
+    if (localLoading || itemsLoading) {
+        return react_1.default.createElement(FullScreenLoader_1.default, null);
+    }
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, { backgroundColor: theme.colors.background }] },
+        react_1.default.createElement(Header_1.default, { showBackButton: true, title: "Choose Ticket Type", onBackPress: goBack }),
+        react_1.default.createElement(react_native_1.FlatList, { style: styles.list, contentContainerStyle: styles.listContent, data: (items === null || items === void 0 ? void 0 : items.result) || [], keyExtractor: (item) => item.itemName, renderItem: ({ item }) => {
+                const lowestFare = (0, itemsLowestFare_1.itemsLowestFare)(item);
+                return (react_1.default.createElement(TypeCard_1.default, { style: styles.card, imageSource: require('../../assets/images/single_journey.png'), title: item.itemName, description: lowestFare ? `Lowest Fare ${lowestFare}` : '', showArrow: true, onPress: () => handleTicketTypeSelect(item) }));
+            }, refreshControl: react_1.default.createElement(react_native_1.RefreshControl, { refreshing: isRefetching, onRefresh: refetch, colors: [theme.colors.primary[500]] }) })));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    list: {
+        marginTop: (0, react_native_size_matters_1.mvs)(20),
+    },
+    listContent: {
+        paddingHorizontal: (0, react_native_size_matters_1.ms)(24),
+    },
+    card: {
+        marginVertical: (0, react_native_size_matters_1.mvs)(8),
+    },
+});
+exports.default = ChooseTicketTypeScreen;

package/dist/src/screens/metro/HistoryScreen.d.ts

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

package/dist/src/screens/metro/HistoryScreen.js

@@ -0,0 +1,239 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const native_1 = require("@react-navigation/native");
+const TransactionCard_1 = __importDefault(require("../../components/common/Cards/TransactionCard"));
+const Header_1 = __importDefault(require("../../components/common/Header/Header"));
+const hooks_1 = require("../../services/apis/transaction/hooks");
+const formatDate_1 = require("../../utils/formatDate");
+const FooterComponentFlatList_1 = __importDefault(require("../../components/common/Loaders/FooterComponentFlatList"));
+const Loader_1 = __importDefault(require("../../components/common/Loaders/Loader"));
+const FilterIcon_1 = __importDefault(require("../../assets/icons/FilterIcon"));
+const MetroWithTabsStack_1 = require("../../navigation/metro/MetroWithTabsStack");
+const offlineHelper_1 = require("../../utils/offlineHelper");
+const NetInfo = __importStar(require("@react-native-community/netinfo"));
+const CustomText_1 = require("../../components/common/Text/CustomText");
+const ThemeProvider_1 = require("../../theme/ThemeProvider");
+const react_native_size_matters_1 = require("react-native-size-matters");
+const Tabs2_1 = __importDefault(require("../../components/common/Tabs/Tabs2"));
+const EmptyState_1 = __importDefault(require("../../components/common/EmptyState/EmptyState"));
+const CloseIcon_1 = __importDefault(require("../../assets/icons/CloseIcon"));
+const cities = [
+    { label: 'Delhi', value: 'std:011' },
+    { label: 'Mumbai', value: 'std:022' },
+    { label: 'Bangalore', value: 'std:080' },
+];
+const HistoryScreen = () => {
+    var _a, _b;
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    const { navigate } = (0, native_1.useNavigation)();
+    const [selectedTab, setSelectedTab] = (0, react_1.useState)('');
+    const [selectedCity, setSelectedCity] = (0, react_1.useState)('');
+    const [filterOption, setFilterOption] = (0, react_1.useState)('');
+    const [offlineTransactions, setOfflineTransactions] = (0, react_1.useState)([]);
+    const [isOffline, setIsOffline] = (0, react_1.useState)(false);
+    const [showFilterModal, setShowFilterModal] = (0, react_1.useState)(false);
+    const { data: allTransactions, isPending: allTransactionsLoading, fetchNextPage, isFetchingNextPage, refetch, isRefetching, } = (0, hooks_1.useFetchGetAllTransactions)({ status: selectedTab, cityCode: selectedCity });
+    const allTransactionsData = ((_b = (_a = allTransactions === null || allTransactions === void 0 ? void 0 : allTransactions.pages) === null || _a === void 0 ? void 0 : _a.map((page) => (page === null || page === void 0 ? void 0 : page.transactions) || [])) === null || _b === void 0 ? void 0 : _b.flat()) || [];
+    const todayDate = new Date().toISOString().split('T')[0];
+    const sortedTransactionsData = allTransactionsData
+        .filter((transaction) => {
+        const transactionDate = new Date(transaction.createdAt || 0).toISOString().split('T')[0];
+        return isOffline ? transactionDate === todayDate : true;
+    })
+        .sort((a, b) => {
+        if (filterOption === 'NewToOldDate') {
+            return new Date(b.createdAt || 0).getTime() - new Date(a.createdAt || 0).getTime();
+        }
+        if (filterOption === 'LowToHighAmount') {
+            return (a.totalPrice || 0) - (b.totalPrice || 0);
+        }
+        if (filterOption === 'HighToLowAmount') {
+            return (b.totalPrice || 0) - (a.totalPrice || 0);
+        }
+        return new Date(b.createdAt || 0).getTime() - new Date(a.createdAt || 0).getTime();
+    });
+    const transactions = (sortedTransactionsData === null || sortedTransactionsData === void 0 ? void 0 : sortedTransactionsData.map((element) => ({
+        _id: element._id,
+        title: `Purchase of ${element === null || element === void 0 ? void 0 : element.city} Metro QR Ticket`,
+        startStation: element.startStation,
+        destinationStation: element.destinationStation,
+        amount: (element === null || element === void 0 ? void 0 : element.totalPrice) || 0,
+        date: (0, formatDate_1.formatDateWithTime)(element.createdAt),
+        status: element.status,
+    }))) || [];
+    (0, react_1.useEffect)(() => {
+        if (!allTransactionsLoading && !isOffline) {
+            (0, offlineHelper_1.saveOfflineData)('transactions', transactions);
+        }
+    }, [transactions, allTransactionsLoading, isOffline]);
+    (0, react_1.useEffect)(() => {
+        const unsubscribe = NetInfo.addEventListener((state) => {
+            var _a;
+            const hasInternet = (_a = state.isConnected) !== null && _a !== void 0 ? _a : false;
+            setIsOffline(!hasInternet);
+            if (!hasInternet) {
+                (0, offlineHelper_1.getOfflineData)('transactions').then((savedData) => {
+                    setOfflineTransactions(savedData);
+                });
+            }
+        });
+        return () => unsubscribe();
+    }, [selectedTab]);
+    const handleFilterReset = () => {
+        setFilterOption('');
+        setSelectedCity('');
+        setShowFilterModal(false);
+    };
+    const displayedTransactions = isOffline && offlineTransactions
+        ? offlineTransactions.filter((transaction) => {
+            if (selectedTab === '')
+                return true;
+            return transaction.status === selectedTab;
+        })
+        : transactions;
+    const styles = react_native_1.StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        tabsContainer: {
+            paddingHorizontal: (0, react_native_size_matters_1.ms)(16),
+            paddingVertical: (0, react_native_size_matters_1.mvs)(20),
+        },
+        emptyContainer: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: (0, react_native_size_matters_1.mvs)(40),
+        },
+        emptyImage: {
+            width: (0, react_native_size_matters_1.ms)(300),
+            height: (0, react_native_size_matters_1.mvs)(250),
+            alignSelf: 'center',
+        },
+        listContainer: {
+            paddingHorizontal: (0, react_native_size_matters_1.ms)(16),
+        },
+        filterButton: {
+            padding: (0, react_native_size_matters_1.ms)(8),
+        },
+        modalContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'rgba(0,0,0,0.5)',
+        },
+        modalContent: {
+            width: '80%',
+            backgroundColor: theme.colors.backdrop,
+            borderRadius: (0, react_native_size_matters_1.ms)(8),
+            padding: (0, react_native_size_matters_1.ms)(16),
+        },
+        modalTitle: {
+            fontSize: (0, react_native_size_matters_1.ms)(16),
+            fontWeight: 'bold',
+            marginBottom: (0, react_native_size_matters_1.mvs)(16),
+        },
+        filterOption: {
+            paddingVertical: (0, react_native_size_matters_1.mvs)(12),
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.borderLight,
+        },
+        filterOptionText: {
+            fontSize: (0, react_native_size_matters_1.ms)(14),
+        },
+        resetButton: {
+            marginTop: (0, react_native_size_matters_1.mvs)(16),
+            paddingVertical: (0, react_native_size_matters_1.mvs)(12),
+            alignItems: 'center',
+        },
+        resetButtonText: {
+            color: theme.colors.error[500],
+            fontWeight: 'bold',
+        },
+        selectedOption: {
+            backgroundColor: theme.colors.surfaceVariant,
+            borderLeftWidth: 3,
+            borderLeftColor: theme.colors.primary[500],
+            paddingLeft: (0, react_native_size_matters_1.ms)(13), // 16 - 3 border
+        },
+    });
+    const isAmountOptionSelected = (option) => filterOption === option;
+    const isCitySelected = (cityValue) => selectedCity === cityValue;
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        react_1.default.createElement(Header_1.default, { showBackButton: true, onBackPress: () => navigate(MetroWithTabsStack_1.MetroWithTabsScreens.SelectStations, {}), title: "My Tickets", rightComponent: react_1.default.createElement(react_native_1.Pressable, { style: styles.filterButton, onPress: () => setShowFilterModal(true) },
+                react_1.default.createElement(FilterIcon_1.default, { size: (0, react_native_size_matters_1.ms)(22), color: theme.colors.text })) }),
+        react_1.default.createElement(react_native_1.View, { style: styles.tabsContainer },
+            react_1.default.createElement(Tabs2_1.default, { tabs: [
+                    { id: '', title: 'All' },
+                    { id: 'SUCCESSFUL', title: 'Successful' },
+                    { id: 'CANCELLED', title: 'Cancelled' },
+                ], activeTab: selectedTab, onChange: setSelectedTab })),
+        allTransactionsLoading && !isOffline ? (react_1.default.createElement(Loader_1.default, null)) : (react_1.default.createElement(react_native_1.FlatList, { data: displayedTransactions, ListEmptyComponent: react_1.default.createElement(EmptyState_1.default
+            // image={require('../../assets/images/NoData.png')}
+            , { 
+                // image={require('../../assets/images/NoData.png')}
+                image: require('../../assets/images/NoDataNewTheme.png'), title: "No Tickets" }), keyExtractor: (item) => item._id.toString(), style: styles.listContainer, renderItem: ({ item }) => (react_1.default.createElement(TransactionCard_1.default, { title: item.title, startStation: item.startStation, destinationStation: item.destinationStation, amount: item.amount, date: item.date, status: item.status, onPress: () => navigate(MetroWithTabsStack_1.MetroWithTabsScreens.TicketDetails, { transaction_id: item._id }) })), onEndReachedThreshold: 0.1, onEndReached: () => !isOffline && fetchNextPage(), ListFooterComponent: react_1.default.createElement(FooterComponentFlatList_1.default, { isFetchingNextPage: isFetchingNextPage }), refreshControl: react_1.default.createElement(react_native_1.RefreshControl, { refreshing: isRefetching, onRefresh: refetch }) })),
+        react_1.default.createElement(react_native_1.Modal, { visible: showFilterModal, transparent: true, animationType: "fade", onRequestClose: () => setShowFilterModal(false) },
+            react_1.default.createElement(react_native_1.View, { style: styles.modalContainer },
+                react_1.default.createElement(react_native_1.View, { style: styles.modalContent },
+                    react_1.default.createElement(react_native_1.View, { style: { flexDirection: 'row', justifyContent: 'space-between' } },
+                        react_1.default.createElement(CustomText_1.CustomText, { variant: "heading3", style: styles.modalTitle }, "Sort By Amount"),
+                        react_1.default.createElement(react_native_1.TouchableOpacity, { style: { padding: (0, react_native_size_matters_1.ms)(4) }, onPress: () => setShowFilterModal(false) },
+                            react_1.default.createElement(CloseIcon_1.default, { color: theme.colors.text }))),
+                    react_1.default.createElement(react_native_1.Pressable, { style: [
+                            styles.filterOption,
+                            isAmountOptionSelected('LowToHighAmount') && styles.selectedOption
+                        ], onPress: () => setFilterOption('LowToHighAmount') },
+                        react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: [
+                                styles.filterOptionText,
+                                isAmountOptionSelected('LowToHighAmount') ? { fontWeight: '600' } : {}
+                            ] }, "Low to High")),
+                    react_1.default.createElement(react_native_1.Pressable, { style: [
+                            styles.filterOption,
+                            isAmountOptionSelected('HighToLowAmount') && styles.selectedOption
+                        ], onPress: () => setFilterOption('HighToLowAmount') },
+                        react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: [
+                                styles.filterOptionText,
+                                isAmountOptionSelected('HighToLowAmount') ? { fontWeight: '600' } : {}
+                            ] }, "High to Low")),
+                    react_1.default.createElement(CustomText_1.CustomText, { variant: "heading3", style: [styles.modalTitle, { marginTop: (0, react_native_size_matters_1.mvs)(16) }] }, "Filter by City"),
+                    cities.map((city) => (react_1.default.createElement(react_native_1.Pressable, { key: city.value, style: [
+                            styles.filterOption,
+                            isCitySelected(city.value) && styles.selectedOption
+                        ], onPress: () => setSelectedCity(city.value) },
+                        react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: [
+                                styles.filterOptionText,
+                                isCitySelected(city.value) ? { fontWeight: '600' } : {}
+                            ] }, city.label)))),
+                    react_1.default.createElement(react_native_1.Pressable, { style: styles.resetButton, onPress: handleFilterReset },
+                        react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: styles.resetButtonText }, "Clear All Filters")))))));
+};
+exports.default = HistoryScreen;

package/dist/src/screens/metro/IssueChatScreen.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function IssueChatScreen(): React.JSX.Element;

package/dist/src/screens/metro/IssueChatScreen.js

@@ -0,0 +1,137 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Header_1 = __importDefault(require("../../components/common/Header/Header"));
+const SendIcon_1 = __importDefault(require("../../assets/icons/SendIcon"));
+const native_1 = require("@react-navigation/native");
+const hooks_1 = require("../../services/apis/metro/issue/hooks");
+const react_native_toast_message_1 = __importDefault(require("react-native-toast-message"));
+const FullScreenLoader_1 = __importDefault(require("../../components/common/Loaders/FullScreenLoader"));
+const Button_1 = require("../../components/common/Button/Button");
+const Input_1 = require("../../components/common/Input/Input");
+const CustomText_1 = require("../../components/common/Text/CustomText");
+const ThemeProvider_1 = require("../../theme/ThemeProvider");
+const react_native_size_matters_1 = require("react-native-size-matters");
+function IssueChatScreen() {
+    const { theme } = (0, ThemeProvider_1.useTheme)();
+    const { params: { issueId } } = (0, native_1.useRoute)();
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [newMessage, setNewMessage] = (0, react_1.useState)("");
+    const scrollViewRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const { data: getMessages, isLoading, isError, refetch, isRefetching } = (0, hooks_1.useFetchGetChat)({ issueId });
+    const { mutate: sendMessage } = (0, hooks_1.useMutateSendMessage)((data) => {
+        if (data.status === 'success') {
+            react_native_toast_message_1.default.show({
+                type: "success",
+                text1: "Message sent successfully",
+            });
+        }
+        else {
+            react_native_toast_message_1.default.show({
+                type: "error",
+                text1: "Failed to send message",
+            });
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        if (getMessages === null || getMessages === void 0 ? void 0 : getMessages.chat) {
+            setMessages(getMessages.chat);
+        }
+    }, [getMessages]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToEnd({ animated: true });
+    }, [messages]);
+    const handleSend = () => {
+        if (newMessage.trim()) {
+            sendMessage({ issueId, message: newMessage.trim() });
+            const newMsg = { message: newMessage.trim(), sender: "user" };
+            setMessages((prev) => [...prev, newMsg]);
+            setNewMessage("");
+        }
+    };
+    const styles = react_native_1.StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        chatContainer: {
+            padding: (0, react_native_size_matters_1.ms)(20),
+            flex: 1,
+        },
+        messageContainer: {
+            alignSelf: 'flex-start',
+            maxWidth: '80%',
+            marginBottom: (0, react_native_size_matters_1.mvs)(12),
+            padding: (0, react_native_size_matters_1.ms)(12),
+            borderRadius: (0, react_native_size_matters_1.ms)(8),
+        },
+        userMessage: {
+            alignSelf: 'flex-end',
+            // backgroundColor: theme.colors.primary[100],
+            backgroundColor: theme.colors.primary[600],
+        },
+        agentMessage: {
+            // backgroundColor: theme.colors.gray[200],
+            backgroundColor: theme.colors.coolGray[600],
+        },
+        inputContainer: {
+            // maxHeight: mvs(70),
+            marginBottom: (0, react_native_size_matters_1.mvs)(-4),
+            paddingHorizontal: (0, react_native_size_matters_1.ms)(16),
+            paddingTop: (0, react_native_size_matters_1.mvs)(12),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-between',
+            borderTopWidth: 1,
+            borderTopColor: theme.colors.borderLight,
+        }
+    });
+    if (isLoading) {
+        return react_1.default.createElement(FullScreenLoader_1.default, null);
+    }
+    if (isError) {
+        return react_1.default.createElement(CustomText_1.CustomText, null, "Error loading chat messages.");
+    }
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        react_1.default.createElement(Header_1.default, { chatHeader: true, isRefetching: isRefetching, onRefresh: refetch }),
+        react_1.default.createElement(react_native_1.ScrollView, { ref: scrollViewRef, contentContainerStyle: styles.chatContainer, onContentSizeChange: () => { var _a; return (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToEnd({ animated: true }); } }, messages.map((msg, index) => (msg && msg.message && msg.sender ? (react_1.default.createElement(react_native_1.View, { key: msg._id || index, style: [
+                styles.messageContainer,
+                msg.sender === "user" ? styles.userMessage : styles.agentMessage
+            ] },
+            react_1.default.createElement(CustomText_1.CustomText, { variant: "body1", style: { color: theme.colors.text2 } }, msg.message))) : null))),
+        react_1.default.createElement(react_native_1.View, { style: styles.inputContainer },
+            react_1.default.createElement(react_native_1.View, { style: { flexGrow: 1, marginRight: (0, react_native_size_matters_1.ms)(8) } },
+                react_1.default.createElement(Input_1.Input, { ref: inputRef, placeholder: "Type a message...", value: newMessage, onChangeText: setNewMessage, variant: "outlined", onSubmitEditing: handleSend })),
+            react_1.default.createElement(Button_1.Button, { variant: "primary", size: "md", style: { paddingHorizontal: (0, react_native_size_matters_1.ms)(12) }, onPress: handleSend, children: react_1.default.createElement(SendIcon_1.default, { color: "white" }) }))));
+}
+exports.default = IssueChatScreen;

package/dist/src/screens/metro/IssueDetailsScreen.d.ts

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