import React, { useEffect } from 'react'; import { Provider } from 'react-redux'; import { NavigationContainer } from '@react-navigation/native'; import FlashMessage from 'react-native-flash-message'; import SplashScreen from 'react-native-splash-screen'; import { PaperProvider } from 'react-native-paper'; import { store } from './src/redux/store'; import AppNavigator from './src/navigation/AppNavigator'; import { firebaseConfig } from './src/config/firebaseConfig'; // Assuming you have this file import firebase from '@react-native-firebase/app'; // Initialize Firebase if not already initialized if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); } else { firebase.app(); // if already initialized, use that one } const App = () => { useEffect(() => { SplashScreen.hide(); // Hide splash screen when app mounts }, []); return ( ); }; export default App; // Replace with your actual Firebase config export const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID", measurementId: "YOUR_MEASUREMENT_ID" // Optional }; import React, { useEffect, useState } from 'react'; import { createStackNavigator } from '@react-navigation/stack'; import { useSelector, useDispatch } from 'react-redux'; import auth from '@react-native-firebase/auth'; import firestore from '@react-native-firebase/firestore'; import { RootState } from '../redux/store'; import { setUser, clearUser, selectUser } from '../redux/slices/authSlice'; // Import Screens import LoginScreen from '../screens/Auth/LoginScreen'; import OTPScreen from '../screens/Auth/OTPScreen'; import ProfileCreationScreen from '../screens/Auth/ProfileCreationScreen'; import MainDrawerNavigator from './MainDrawerNavigator'; import AdminLoginScreen from '../screens/Admin/AdminLoginScreen'; // Placeholder import AdminDashboardScreen from '../screens/Admin/AdminDashboardScreen'; // Placeholder const Stack = createStackNavigator(); const AppNavigator = () => { const dispatch = useDispatch(); const user = useSelector(selectUser); const [loading, setLoading] = useState(true); const [isProfileComplete, setIsProfileComplete] = useState(false); const [isAdmin, setIsAdmin] = useState(false); // State to track admin status // Handle user state changes useEffect(() => { const subscriber = auth().onAuthStateChanged(async (firebaseUser) => { if (firebaseUser) { // Check if user profile exists in Firestore const userDoc = await firestore().collection('users').doc(firebaseUser.uid).get(); if (userDoc.exists) { const userData = userDoc.data(); dispatch(setUser({ uid: firebaseUser.uid, phoneNumber: firebaseUser.phoneNumber, ...userData })); setIsProfileComplete(true); // Check if the user is an admin (assuming a field like 'role' in user document) if (userData?.role === 'admin') { setIsAdmin(true); } else { setIsAdmin(false); } } else { // User is logged in via phone but profile is not created yet dispatch(setUser({ uid: firebaseUser.uid, phoneNumber: firebaseUser.phoneNumber })); setIsProfileComplete(false); setIsAdmin(false); // Not admin if profile doesn't exist or isn't marked admin } } else { dispatch(clearUser()); setIsProfileComplete(false); setIsAdmin(false); } setLoading(false); }); // Unsubscribe on unmount return subscriber; }, [dispatch]); if (loading) { // You might want a loading splash screen here return null; } return ( {user ? ( isProfileComplete ? ( isAdmin ? ( // Admin Flow ) : ( // User Flow ) ) : ( // Profile creation needed ) ) : ( // Auth Flow <> {/* Optional: Admin login screen if separate */} )} ); }; export default AppNavigator; import React from 'react'; import { createDrawerNavigator } from '@react-navigation/drawer'; import MainTabNavigator from './MainTabNavigator'; import DrawerContent from '../components/DrawerContent'; // Import Sidebar Screens import WalletScreen from '../screens/User/WalletScreen'; import TransactionHistoryScreen from '../screens/User/TransactionHistoryScreen'; import HelpSupportScreen from '../screens/User/HelpSupportScreen'; // Placeholder import PrivacyPolicyScreen from '../screens/User/PrivacyPolicyScreen'; // Placeholder import FAQScreen from '../screens/User/FAQScreen'; // Placeholder const Drawer = createDrawerNavigator(); const MainDrawerNavigator = () => { return ( } screenOptions={{ headerShown: false, // Hide default header, custom header will be in tabs }} > {/* Rate Our App and Share App will be handled via functions in DrawerContent */} ); }; export default MainDrawerNavigator; import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createStackNavigator } from '@react-navigation/stack'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { TouchableOpacity, View, Text } from 'react-native'; import { useNavigation } from '@react-navigation/native'; // Import Tab Screens import HomeScreen from '../screens/User/HomeScreen'; import ChatListScreen from '../screens/User/ChatListScreen'; import ProfileScreen from '../screens/User/ProfileScreen'; import ProductListScreen from '../screens/User/ProductListScreen'; // Import Screens accessible from Tabs (e.g., details screens) import AstrologerDetailScreen from '../screens/User/AstrologerDetailScreen'; import ChatScreen from '../screens/User/ChatScreen'; import ProductDetailScreen from '../screens/User/ProductDetailScreen'; import OrderStatusScreen from '../screens/User/OrderStatusScreen'; import WalletScreen from '../screens/User/WalletScreen'; // Accessible from header const Tab = createBottomTabNavigator(); const HomeStack = createStackNavigator(); const ChatStack = createStackNavigator(); const ProfileStack = createStackNavigator(); const ProductStack = createStackNavigator(); // Custom Header Component const CustomHeader = ({ title, navigation }: { title: string; navigation: any }) => { return ( navigation.openDrawer()}> {title} navigation.navigate('Wallet')}> ); }; const HomeStackScreen = () => { const navigation = useNavigation(); return ( , }} > {/* Add other screens accessible from Home if needed */} ); }; const ChatStackScreen = () => { const navigation = useNavigation(); return ( , }} > ); }; const ProfileStackScreen = () => { const navigation = useNavigation(); return ( , }} > ); }; const ProductStackScreen = () => { const navigation = useNavigation(); return ( , }} > ); }; const MainTabNavigator = () => { return ( ({ tabBarIcon: ({ focused, color, size }) => { let iconName; if (route.name === 'HomeStack') { iconName = focused ? 'home' : 'home-outline'; } else if (route.name === 'ChatStack') { iconName = focused ? 'chat' : 'chat-outline'; } else if (route.name === 'ProfileStack') { iconName = focused ? 'account' : 'account-outline'; } else if (route.name === 'ProductStack') { iconName = focused ? 'cart' : 'cart-outline'; } // You can return any component that you like here! return ; }, tabBarActiveTintColor: 'tomato', // Example active color tabBarInactiveTintColor: 'gray', headerShown: false, // Hide default header as we use CustomHeader in stacks })} > ); }; export default MainTabNavigator; import React from 'react'; import { View, StyleSheet, TouchableOpacity, Text, Image } from 'react-native'; import { DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer'; import { useNavigation } from '@react-navigation/native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { useSelector, useDispatch } from 'react-redux'; import auth from '@react-native-firebase/auth'; import InAppReview from 'react-native-in-app-review'; import Share from 'react-native-share'; import { selectUser } from '../redux/slices/authSlice'; import { showMessage } from 'react-native-flash-message'; const DrawerContent = (props: any) => { const navigation = useNavigation(); const user = useSelector(selectUser); const dispatch = useDispatch(); const handleLogout = async () => { try { await auth().signOut(); // Redux state will be cleared by the auth state listener in AppNavigator showMessage({ message: "Logged out successfully", type: "success", }); } catch (error: any) { console.error("Logout error:", error); showMessage({ message: "Logout failed", description: error.message, type: "danger", }); } }; const handleRateApp = () => { if (InAppReview.isAvailable()) { InAppReview.RequestInAppReview() .then((hasFlowFinishedSuccessfully) => { // when return true in android it means user finished or close the review flow console.log('InAppReview', hasFlowFinishedSuccessfully); }) .catch((error) => { console.log('InAppReview error', error); // fallback to opening app store // Linking.openURL('market://details?id=YOUR_APP_ID'); // Android // Linking.openURL('itms-apps://itunes.apple.com/app/YOUR_APP_ID'); // iOS }); } else { // fallback to opening app store // Linking.openURL('market://details?id=YOUR_APP_ID'); // Android // Linking.openURL('itms-apps://itunes.apple.com/app/YOUR_APP_ID'); // iOS console.log('In-app review not available'); } }; const handleShareApp = async () => { try { const shareOptions = { title: 'Share AstroAI App', message: 'Check out this amazing Astrology Chat App!', // Customize message url: 'YOUR_APP_STORE_LINK', // Replace with your app store link }; await Share.open(shareOptions); } catch (error: any) { console.error('Share error:', error.message); } }; return ( {user?.name || user?.phoneNumber || 'User'} {/* Optional: Display wallet balance here */} {/* Wallet: ${user?.walletBalance?.toFixed(2) || '0.00'} */} {/* Add custom drawer items here if needed */} navigation.navigate('Wallet')} > Wallet navigation.navigate('TransactionHistory')} > Transaction History navigation.navigate('HelpSupport')} > Help and Support Rate our app navigation.navigate('PrivacyPolicy')} > Privacy Policy Share App navigation.navigate('FAQ')} > FAQ Logout ); }; const styles = StyleSheet.create({ drawerHeader: { padding: 20, alignItems: 'center', backgroundColor: '#f8f8f8', // Example header background borderBottomWidth: 1, borderBottomColor: '#eee', }, profileImage: { width: 80, height: 80, borderRadius: 40, marginBottom: 10, }, userName: { fontSize: 18, fontWeight: 'bold', color: '#333', }, walletBalance: { fontSize: 14, color: '#666', marginTop: 5, }, drawerItem: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12, paddingHorizontal: 16, }, drawerIcon: { marginRight: 10, }, drawerItemText: { fontSize: 16, color: '#333', }, bottomDrawerSection: { marginBottom: 15, borderTopColor: '#f4f4f4', borderTopWidth: 1, }, }); export default DrawerContent; import { configureStore } from '@reduxjs/toolkit'; import authReducer from './slices/authSlice'; import userReducer from './slices/userSlice'; import astrologerReducer from './slices/astrologerSlice'; import chatReducer from './slices/chatSlice'; import productReducer from './slices/productSlice'; import walletReducer from './slices/walletSlice'; // Import admin slices if needed // import adminReducer from './slices/adminSlice'; export const store = configureStore({ reducer: { auth: authReducer, user: userReducer, astrologers: astrologerReducer, chat: chatReducer, products: productReducer, wallet: walletReducer, // admin: adminReducer, }, // Add middleware if necessary, e.g., for async operations middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false, // Disable serializable check for Firebase objects if needed }), }); export type RootState = ReturnType; export type AppDispatch = typeof store.dispatch; import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { RootState } from '../store'; interface UserState { uid: string | null; phoneNumber: string | null; name?: string; gender?: string; dateOfBirth?: string; // Or Date type timeOfBirth?: string; placeOfBirth?: string; photoURL?: string; role?: 'user' | 'admin'; // Add role walletBalance?: number; // Add wallet balance // Add other profile fields as needed } interface AuthState { user: UserState | null; isLoading: boolean; error: string | null; } const initialState: AuthState = { user: null, isLoading: false, error: null, }; export const authSlice = createSlice({ name: 'auth', initialState, reducers: { setUser: (state, action: PayloadAction) => { state.user = action.payload; state.isLoading = false; state.error = null; }, clearUser: (state) => { state.user = null; state.isLoading = false; state.error = null; }, setLoading: (state, action: PayloadAction) => { state.isLoading = action.payload; }, setError: (state, action: PayloadAction) => { state.error = action.payload; state.isLoading = false; }, updateUserProfile: (state, action: PayloadAction>) => { if (state.user) { state.user = { ...state.user, ...action.payload }; } }, updateWalletBalance: (state, action: PayloadAction) => { if (state.user) { state.user.walletBalance = action.payload; } }, }, }); export const { setUser, clearUser, setLoading, setError, updateUserProfile, updateWalletBalance } = authSlice.actions; export const selectUser = (state: RootState) => state.auth.user; export const selectAuthLoading = (state: RootState) => state.auth.isLoading; export const selectAuthError = (state: RootState) => state.auth.error; export default authSlice.reducer; import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { RootState } from '../store'; // This slice can be used for managing other user-related data // that isn't part of the core auth state, e.g., settings, preferences, etc. interface UserState { // Define additional user state properties here settings?: { notificationsEnabled: boolean; // etc. }; // ... other user-specific data } const initialState: UserState = { settings: { notificationsEnabled: true, }, }; export const userSlice = createSlice({ name: 'user', initialState, reducers: { // Define reducers to update user state updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; }, // ... other reducers }, }); export const { updateSettings } = userSlice.actions; export const selectUserSettings = (state: RootState) => state.user.settings; export default userSlice.reducer; import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { RootState } from '../store'; export interface Astrologer { id: string; name: string; photoURL?: string; about?: string; rating?: number; followers?: number; experience?: string; servedPeople?: number; skills?: string[]; // Add other astrologer properties } interface AstrologerState { astrologers: Astrologer[]; isLoading: boolean; error: string | null; selectedAstrologer: Astrologer | null; } const initialState: AstrologerState = { astrologers: [], isLoading: false, error: null, selectedAstrologer: null, }; export const astrologerSlice = createSlice({ name: 'astrologers', initialState, reducers: { setAstrologers: (state, action: PayloadAction) => { state.astrologers = action.payload; state.isLoading = false; state.error = null; }, addAstrologer: (state, action: PayloadAction) => { state.astrologers.push(action.payload); }, updateAstrologer: (state, action: PayloadAction) => { const index = state.astrologers.findIndex(astro => astro.id === action.payload.id); if (index !== -1) { state.astrologers[index] = action.payload; } }, removeAstrologer: (state, action: PayloadAction) => { state.astrologers = state.astrologers.filter(astro => astro.id !== action.payload); }, setLoading: (state, action: PayloadAction) => { state.isLoading = action.payload; }, setError: (state, action: PayloadAction) => { state.error = action.payload; state.isLoading = false; }, setSelectedAstrologer: (state, action: PayloadAction) => { state.selectedAstrologer = action.payload; }, }, }); export const { setAstrologers, addAstrologer, updateAstrologer, removeAstrologer, setLoading, setError, setSelectedAstrologer, } = astrologerSlice.actions; export const selectAllAstrologers = (state: RootState) => state.astrologers.astrologers; export const selectAstrologersLoading = (state: RootState) => state.astrologers.isLoading; export const selectAstrologersError = (state: RootState) => state.astrologers.error; export const selectSelectedAstrologer = (state: RootState) => state.astrologers.selectedAstrologer; export default astrologerSlice.reducer; import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { RootState } from '../store'; export interface Message { id: string; chatId: string; senderId: string; // User or Astrologer ID text: string; timestamp: any; // Firebase Timestamp isRead?: boolean; } export interface Chat { id: string; userId: string; astrologerId: string; lastMessage?: Message; createdAt: any; // Firebase Timestamp updatedAt: any; // Firebase Timestamp // Add other chat properties } interface ChatState { chats: Chat[]; messages: { [chatId: string]: Message[] }; // Store messages per chat isLoading: boolean; error: string | null; currentChatId: string | null; } const initialState: ChatState = { chats: [], messages: {}, isLoading: false, error: null, currentChatId: null, }; export const chatSlice = createSlice({ name: 'chat', initialState, reducers: { setChats: (state, action: PayloadAction) => { state.chats = action.payload; state.isLoading = false; state.error = null; }, addChat: (state, action: PayloadAction) => { // Prevent duplicates if chat already exists if (!state.chats.find(chat => chat.id === action.payload.id)) { state.chats.push(action.payload); } }, updateChat: (state, action: PayloadAction) => { const index = state.chats.findIndex(chat => chat.id === action.payload.id); if (index !== -1) { state.chats[index] = action.payload; } }, setMessagesForChat: (state, action: PayloadAction<{ chatId: string; messages: Message[] }>) => { state.messages[action.payload.chatId] = action.payload.messages; state.isLoading = false; state.error = null; }, addMessageToChat: (state, action: PayloadAction) => { const { chatId } = action.payload; if (!state.messages[chatId]) { state.messages[chatId] = []; } // Add message if it doesn't exist (to handle real-time listeners) if (!state.messages[chatId].find(msg => msg.id === action.payload.id)) { state.messages[chatId].push(action.payload); // Sort messages by timestamp state.messages[chatId].sort((a, b) => (a.timestamp?.toDate() || 0) - (b.timestamp?.toDate() || 0)); } }, setLoading: (state, action: PayloadAction) => { state.isLoading = action.payload; }, setError: (state, action: PayloadAction) => { state.error = action.payload; state.isLoading = false; }, setCurrentChatId: (state, action: PayloadAction) => { state.currentChatId = action.payload; }, clearMessagesForChat: (state, action: PayloadAction) => { delete state.messages[action.payload]; }, clearAllChatData: (state) => { state.chats = []; state.messages = {}; state.currentChatId = null; } }, }); export const { setChats, addChat, updateChat, setMessagesForChat, addMessageToChat, setLoading, setError, setCurrentChatId, clearMessagesForChat, clearAllChatData, } = chatSlice.actions; export const selectAllChats = (state: RootState) => state.chat.chats; export const selectMessagesByChatId = (chatId: string) => (state: RootState) => state.chat.messages[chatId] || []; export const selectChatLoading = (state: RootState) => state.chat.isLoading; export const selectChatError = (state: RootState) => state.chat.error; export const selectCurrentChatId = (state: RootState) => state.chat.currentChatId; export default chatSlice.reducer; import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { RootState } from '../store'; export interface Product { id: string; name: string; description?: string; price: number; imageUrl?: string; category?: string; type?: string; // e.g., ring, pendant stock?: number; // Add other product properties } export interface Order { id: string; userId: string; items: { productId: string; quantity: number; price: number }[]; totalAmount: number; orderDate: any; // Firebase Timestamp status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled'; paymentStatus: 'pending' | 'completed' | 'failed'; paymentDetails?: any; // Razorpay details // Add shipping address etc. } interface ProductState { products: Product[]; orders: Order[]; isLoading: boolean; error: string | null; selectedProduct: Product | null; } const initialState: ProductState = { products: [], orders: [], isLoading: false, error: null, selectedProduct: null, }; export const productSlice = createSlice({ name: 'product', initialState, reducers: { setProducts: (state, action: PayloadAction) => { state.products = action.payload; state.isLoading = false; state.error = null; }, addProduct: (state, action: PayloadAction) => { state.products.push(action.payload); }, updateProduct: (state, action: PayloadAction) => { const index = state.products.findIndex(p => p.id === action.payload.id); if (index !== -1) { state.products[index] = action.payload; } }, removeProduct: (state, action: PayloadAction) => { state.products = state.products.filter(p => p.id !== action.payload); }, setOrders: (state, action: PayloadAction) => { state.orders = action.payload; state.isLoading = false; state.error = null; }, addOrder: (state, action: PayloadAction) => { state.orders.push(action.payload); }, updateOrder: (state, action: PayloadAction) => { const index = state.orders.findIndex(o => o.id === action.payload.id); if (index !== -1) { state.orders[index] = action.payload; } }, setLoading: (state, action: PayloadAction) => { state.isLoading = action.payload; }, setError: (state, action: PayloadAction) => { state.error = action.payload; state.isLoading = false; }, setSelectedProduct: (state, action: PayloadAction) => { state.selectedProduct = action.payload; }, }, }); export const { setProducts, addProduct, updateProduct, removeProduct, setOrders, addOrder, updateOrder, setLoading, setError, setSelectedProduct, } = productSlice.actions; export const selectAllProducts = (state: RootState) => state.product.products; export const selectAllOrders = (state: RootState) => state.product.orders; export const selectProductLoading = (state: RootState) => state.product.isLoading; export const selectProductError = (state: RootState) => state.product.error; export const selectSelectedProduct = (state: RootState) => state.product.selectedProduct; export default productSlice.reducer; import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { RootState } from '../store'; export interface Transaction { id: string; userId: string; type: 'credit' | 'debit'; // credit for recharge, debit for chat/product purchase amount: number; timestamp: any; // Firebase Timestamp description: string; // e.g., "Wallet Recharge", "Chat with Astrologer X", "Product Y Purchase" relatedId?: string; // e.g., chat ID, order ID } interface WalletState { balance: number; transactions: Transaction[]; isLoading: boolean; error: string | null; } const initialState: WalletState = { balance: 0, transactions: [], isLoading: false, error: null, }; export const walletSlice = createSlice({ name: 'wallet', initialState, reducers: { setBalance: (state, action: PayloadAction) => { state.balance = action.payload; state.isLoading = false; state.error = null; }, setTransactions: (state, action: PayloadAction) => { state.transactions = action.payload; state.isLoading = false; state.error = null; }, addTransaction: (state, action: PayloadAction) => { state.transactions.unshift(action.payload); // Add to the beginning }, updateBalance: (state, action: PayloadAction) => { state.balance = action.payload; }, setLoading: (state, action: PayloadAction) => { state.isLoading = action.payload; }, setError: (state, action: PayloadAction) => { state.error = action.payload; state.isLoading = false; }, clearWalletData: (state) => { state.balance = 0; state.transactions = []; } }, }); export const { setBalance, setTransactions, addTransaction, updateBalance, setLoading, setError, clearWalletData, } = walletSlice.actions; export const selectWalletBalance = (state: RootState) => state.wallet.balance; export const selectTransactions = (state: RootState) => state.wallet.transactions; export const selectWalletLoading = (state: RootState) => state.wallet.isLoading; export const selectWalletError = (state: RootState) => state.wallet.error; export default walletSlice.reducer; import React, { useState } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native'; import PhoneInput from 'react-native-phone-number-input'; import auth from '@react-native-firebase/auth'; import { useNavigation } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; import { showMessage } from 'react-native-flash-message'; // Define the types for your navigation stack type AuthStackParamList = { Login: undefined; OTP: { verificationId: string; phoneNumber: string }; AdminLogin: undefined; // Add AdminLogin to stack params }; type LoginScreenNavigationProp = StackNavigationProp; const LoginScreen = () => { const [phoneNumber, setPhoneNumber] = useState(''); const [formattedValue, setFormattedValue] = useState(''); const [loading, setLoading] = useState(false); const phoneInputRef = React.useRef(null); const navigation = useNavigation(); const handleSendOTP = async () => { if (!phoneInputRef.current?.isValidNumber(phoneNumber)) { showMessage({ message: "Invalid phone number", type: "danger", }); return; } setLoading(true); try { const confirmation = await auth().signInWithPhoneNumber(formattedValue); setLoading(false); navigation.navigate('OTP', { verificationId: confirmation.verificationId, phoneNumber: formattedValue }); } catch (error: any) { setLoading(false); console.error("Error sending OTP:", error); showMessage({ message: "Failed to send OTP", description: error.message, type: "danger", }); } }; return ( Login with Phone { setPhoneNumber(text); }} onChangeFormattedText={(text) => { setFormattedValue(text); }} containerStyle={styles.phoneInputContainer} textContainerStyle={styles.phoneInputTextContainer} codeTextStyle={styles.phoneInputCodeText} textInputStyle={styles.phoneInputTextInput} countryPickerButtonStyle={styles.countryPickerButton} flagButtonStyle={styles.flagButton} placeholder="Enter phone number" withDarkTheme withShadow autoFocus /> {loading ? ( ) : ( Send OTP )} {/* Optional: Link to Admin Login */} navigation.navigate('AdminLogin')} > Admin Login ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, backgroundColor: '#f7f7f7', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 30, color: '#333', }, phoneInputContainer: { width: '100%', backgroundColor: '#fff', borderRadius: 8, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, phoneInputTextContainer: { backgroundColor: '#fff', borderRadius: 8, }, phoneInputCodeText: { color: '#333', }, phoneInputTextInput: { color: '#333', }, countryPickerButton: { backgroundColor: '#fff', borderRadius: 8, }, flagButton: { backgroundColor: '#fff', borderRadius: 8, }, button: { width: '100%', backgroundColor: '#3f51b5', padding: 15, borderRadius: 8, alignItems: 'center', marginTop: 20, }, buttonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, adminLink: { marginTop: 20, }, adminLinkText: { color: '#3f51b5', fontSize: 16, textDecorationLine: 'underline', }, }); export default LoginScreen; import React, { useState } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, TextInput } from 'react-native'; import auth from '@react-native-firebase/auth'; import { useRoute, useNavigation } from '@react-navigation/native'; import { StackNavigationProp, RouteProp } from '@react-navigation/stack'; import { showMessage } from 'react-native-flash-message'; // Define the types for your navigation stack and route type AuthStackParamList = { Login: undefined; OTP: { verificationId: string; phoneNumber: string }; ProfileCreation: undefined; }; type OTPScreenRouteProp = RouteProp; type OTPScreenNavigationProp = StackNavigationProp; const OTPScreen = () => { const [otp, setOtp] = useState(''); const [loading, setLoading] = useState(false); const route = useRoute(); const navigation = useNavigation(); const { verificationId, phoneNumber } = route.params; const handleVerifyOTP = async () => { if (otp.length !== 6) { // Assuming 6-digit OTP showMessage({ message: "Please enter a 6-digit OTP", type: "warning", }); return; } setLoading(true); try { const credential = auth.PhoneAuthProvider.credential(verificationId, otp); await auth().signInWithCredential(credential); setLoading(false); // The onAuthStateChanged listener in AppNavigator will handle navigation // to ProfileCreation or MainApp based on profile existence. } catch (error: any) { setLoading(false); console.error("Error verifying OTP:", error); showMessage({ message: "OTP verification failed", description: error.message, type: "danger", }); } }; return ( Verify OTP Enter the code sent to {phoneNumber} {loading ? ( ) : ( Verify OTP )} {/* Optional: Resend OTP button */} {/* Resend Code */} ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, backgroundColor: '#f7f7f7', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 10, color: '#333', }, subtitle: { fontSize: 16, color: '#666', marginBottom: 30, textAlign: 'center', }, otpInput: { width: '80%', height: 50, borderColor: '#ccc', borderWidth: 1, borderRadius: 8, fontSize: 20, paddingHorizontal: 10, marginBottom: 20, backgroundColor: '#fff', }, button: { width: '100%', backgroundColor: '#3f51b5', padding: 15, borderRadius: 8, alignItems: 'center', marginTop: 10, }, buttonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, resendButton: { marginTop: 20, }, resendButtonText: { color: '#3f51b5', fontSize: 16, textDecorationLine: 'underline', }, }); export default OTPScreen; import React, { useState } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, TextInput, ScrollView } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; import { useSelector, useDispatch } from 'react-redux'; import firestore from '@react-native-firebase/firestore'; import auth from '@react-native-firebase/auth'; import DateTimePicker from '@react-native-community/datetimepicker'; import { Picker } from '@react-native-picker/picker'; import moment from 'moment'; import { showMessage } from 'react-native-flash-message'; import { selectUser, setUser } from '../../redux/slices/authSlice'; // Define the types for your navigation stack type AuthStackParamList = { ProfileCreation: undefined; MainApp: undefined; // Assuming MainApp is the name of your main navigator screen }; type ProfileCreationScreenNavigationProp = StackNavigationProp; const ProfileCreationScreen = () => { const user = useSelector(selectUser); const dispatch = useDispatch(); const navigation = useNavigation(); const [name, setName] = useState(''); const [gender, setGender] = useState(''); const [dateOfBirth, setDateOfBirth] = useState(undefined); const [timeOfBirth, setTimeOfBirth] = useState(undefined); const [placeOfBirth, setPlaceOfBirth] = useState(''); const [loading, setLoading] = useState(false); const [showDatePicker, setShowDatePicker] = useState(false); const [showTimePicker, setShowTimePicker] = useState(false); const onDateChange = (event: any, selectedDate?: Date) => { const currentDate = selectedDate || dateOfBirth; setShowDatePicker(false); setDateOfBirth(currentDate); }; const onTimeChange = (event: any, selectedTime?: Date) => { const currentTime = selectedTime || timeOfBirth; setShowTimePicker(false); setTimeOfBirth(currentTime); }; const handleSaveProfile = async () => { if (!user?.uid) { showMessage({ message: "User not authenticated", type: "danger", }); return; } if (!name || !gender || !dateOfBirth || !timeOfBirth || !placeOfBirth) { showMessage({ message: "Please fill all required fields", type: "warning", }); return; } setLoading(true); try { const profileData = { uid: user.uid, phoneNumber: user.phoneNumber, name, gender, dateOfBirth: firestore.Timestamp.fromDate(dateOfBirth), timeOfBirth: moment(timeOfBirth).format('HH:mm'), // Store time as string placeOfBirth, createdAt: firestore.FieldValue.serverTimestamp(), role: 'user', // Default role is user walletBalance: 0, // Initialize wallet balance }; await firestore().collection('users').doc(user.uid).set(profileData); // Update Redux state with complete user profile dispatch(setUser({ ...user, ...profileData, dateOfBirth: dateOfBirth.toISOString() })); // Store date as ISO string in Redux for simplicity setLoading(false); showMessage({ message: "Profile created successfully", type: "success", }); // Navigation is handled by the onAuthStateChanged listener in AppNavigator // which will now see that the profile exists. } catch (error: any) { setLoading(false); console.error("Error saving profile:", error); showMessage({ message: "Failed to save profile", description: error.message, type: "danger", }); } }; return ( Create Your Profile setGender(itemValue)} style={styles.picker} > setShowDatePicker(true)} style={styles.dateButton}> {dateOfBirth ? moment(dateOfBirth).format('YYYY-MM-DD') : 'Select Date of Birth'} {showDatePicker && ( )} setShowTimePicker(true)} style={styles.dateButton}> {timeOfBirth ? moment(timeOfBirth).format('HH:mm') : 'Select Time of Birth'} {showTimePicker && ( )} {loading ? ( ) : ( Save Profile )} ); }; const styles = StyleSheet.create({ container: { flexGrow: 1, justifyContent: 'center', alignItems: 'center', padding: 20, backgroundColor: '#f7f7f7', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 30, color: '#333', }, input: { width: '100%', height: 50, borderColor: '#ccc', borderWidth: 1, borderRadius: 8, paddingHorizontal: 15, marginBottom: 15, backgroundColor: '#fff', fontSize: 16, }, pickerContainer: { width: '100%', borderColor: '#ccc', borderWidth: 1, borderRadius: 8, marginBottom: 15, backgroundColor: '#fff', justifyContent: 'center', height: 50, }, picker: { width: '100%', height: 50, color: '#333', }, dateButton: { width: '100%', height: 50, borderColor: '#ccc', borderWidth: 1, borderRadius: 8, paddingHorizontal: 15, marginBottom: 15, backgroundColor: '#fff', justifyContent: 'center', }, dateButtonText: { fontSize: 16, color: '#666', // Placeholder color }, button: { width: '100%', backgroundColor: '#3f51b5', padding: 15, borderRadius: 8, alignItems: 'center', marginTop: 20, }, buttonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, }); export default ProfileCreationScreen; import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet, ScrollView, FlatList, Image, TouchableOpacity, Dimensions, ActivityIndicator } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; import { useDispatch, useSelector } from 'react-redux'; import firestore from '@react-native-firebase/firestore'; import storage from '@react-native-firebase/storage'; import { selectAllAstrologers, setAstrologers, selectAstrologersLoading } from '../../redux/slices/astrologerSlice'; import { Astrologer } from '../../redux/slices/astrologerSlice'; // Import Astrologer type // Define the types for your navigation stack type HomeStackParamList = { Home: undefined; AstrologerDetail: { astrologerId: string }; Wallet: undefined; // Added Wallet to HomeStackParamList }; type HomeScreenNavigationProp = StackNavigationProp; const { width } = Dimensions.get('window'); const BANNER_HEIGHT = width * 0.4; // Example banner height const HomeScreen = () => { const navigation = useNavigation(); const dispatch = useDispatch(); const astrologers = useSelector(selectAllAstrologers); const loadingAstrologers = useSelector(selectAstrologersLoading); const [banners, setBanners] = useState([]); const [horoscope, setHoroscope] = useState("Loading today's horoscope..."); // Placeholder useEffect(() => { // Fetch Banners const fetchBanners = async () => { try { const listResult = await storage().ref('banners').listAll(); const urls = await Promise.all(listResult.items.map(itemRef => itemRef.getDownloadURL())); setBanners(urls); } catch (error) { console.error("Error fetching banners:", error); // Handle error } }; // Fetch Astrologers const fetchAstrologers = async () => { dispatch(setAstrologers([])); // Clear previous list dispatch({ type: 'astrologers/setLoading', payload: true }); try { const snapshot = await firestore().collection('astrologers').get(); const astrologersList: Astrologer[] = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() as Omit // Cast data to Astrologer type })); dispatch(setAstrologers(astrologersList)); } catch (error: any) { console.error("Error fetching astrologers:", error); dispatch({ type: 'astrologers/setError', payload: error.message }); } finally { dispatch({ type: 'astrologers/setLoading', payload: false }); } }; // Fetch Horoscope (Placeholder) const fetchHoroscope = () => { // In a real app, you would fetch this from an API setTimeout(() => { setHoroscope("Today's Horoscope: A good day for new beginnings!"); }, 1000); }; fetchBanners(); fetchAstrologers(); fetchHoroscope(); }, [dispatch]); const renderBanner = ({ item }: { item: string }) => ( ); const renderAstrologer = ({ item }: { item: Astrologer }) => ( navigation.navigate('AstrologerDetail', { astrologerId: item.id })} > {item.name} Rating: {item.rating?.toFixed(1) || 'N/A'} {/* Add more astrologer info here */} ); return ( {/* Banners */} index.toString()} horizontal pagingEnabled showsHorizontalScrollIndicator={false} snapToInterval={width} // Snap to full width decelerationRate="fast" /> {/* Astrologers List */} Meet Our Astrologers {loadingAstrologers ? ( ) : ( item.id} horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.astrologersListContent} /> )} {/* Today's Horoscope */} Today's Horoscope {horoscope} {/* Add more detailed horoscope view or link */} {/* Add other sections like featured products, etc. */} ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f7f7f7', }, section: { marginBottom: 20, backgroundColor: '#fff', paddingVertical: 15, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, sectionTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 10, paddingHorizontal: 15, color: '#333', }, bannerImage: { width: width, height: BANNER_HEIGHT, resizeMode: 'cover', }, astrologersListContent: { paddingHorizontal: 10, }, astrologerCard: { width: 120, marginHorizontal: 5, alignItems: 'center', padding: 10, borderRadius: 8, backgroundColor: '#fff', shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, astrologerImage: { width: 80, height: 80, borderRadius: 40, marginBottom: 8, }, astrologerName: { fontSize: 14, fontWeight: 'bold', textAlign: 'center', color: '#333', }, astrologerRating: { fontSize: 12, color: '#666', marginTop: 4, }, horoscopeBox: { paddingHorizontal: 15, }, horoscopeText: { fontSize: 16, color: '#555', lineHeight: 24, }, }); export default HomeScreen; import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity, ActivityIndicator } from 'react-native'; import { useRoute, RouteProp } from '@react-navigation/native'; import firestore from '@react-native-firebase/firestore'; import { Astrologer } from '../../redux/slices/astrologerSlice'; // Import Astrologer type import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { showMessage } from 'react-native-flash-message'; import { useSelector } from 'react-redux'; import { selectUser } from '../../redux/slices/authSlice'; import { useNavigation } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; // Define the types for your navigation stack and route type HomeStackParamList = { Home: undefined; AstrologerDetail: { astrologerId: string }; Chat: { astrologerId: string; astrologerName: string }; // Add Chat screen }; type AstrologerDetailScreenRouteProp = RouteProp; type AstrologerDetailScreenNavigationProp = StackNavigationProp; const AstrologerDetailScreen = () => { const route = useRoute(); const navigation = useNavigation(); const { astrologerId } = route.params; const user = useSelector(selectUser); const [astrologer, setAstrologer] = useState(null); const [loading, setLoading] = useState(true); const [isFollowing, setIsFollowing] = useState(false); // Placeholder for follow status useEffect(() => { const fetchAstrologer = async () => { try { const doc = await firestore().collection('astrologers').doc(astrologerId).get(); if (doc.exists) { setAstrologer({ id: doc.id, ...doc.data() as Omit }); } else { showMessage({ message: "Astrologer not found", type: "danger", }); } } catch (error: any) { console.error("Error fetching astrologer:", error); showMessage({ message: "Failed to load astrologer details", description: error.message, type: "danger", }); } finally { setLoading(false); } }; fetchAstrologer(); }, [astrologerId]); const handleFollow = async () => { if (!user?.uid) { showMessage({ message: "Please login to follow", type: "warning" }); return; } // Implement follow logic (e.g., add user ID to astrologer's followers list in Firestore) // This is a placeholder setIsFollowing(!isFollowing); showMessage({ message: isFollowing ? "Unfollowed" : "Following", type: "info", }); }; const handleRate = () => { // Implement rating logic (e.g., show a modal/form to submit a rating) showMessage({ message: "Rating feature coming soon!", type: "info", }); }; const handleStartChat = () => { if (!user?.uid) { showMessage({ message: "Please login to chat", type: "warning" }); return; } if (astrologer) { // Navigate to Chat screen, passing astrologer details // Note: Chat screen is part of the ChatStack, so we need to navigate across navigators // This requires the root navigator to be aware of both stacks, or use a common parent navigator. // A common pattern is to navigate to the tab first, then to the screen within that tab. navigation.navigate('Chat', { astrologerId: astrologer.id, astrologerName: astrologer.name }); } }; if (loading) { return ( Loading astrologer details... ); } if (!astrologer) { return ( Astrologer not found. ); } return ( {astrologer.name} Rating: {astrologer.rating?.toFixed(1) || 'N/A'} Experience: {astrologer.experience || 'N/A'} Served People: {astrologer.servedPeople || 0} {isFollowing ? 'Following' : 'Follow'} Rate Chat About Me {astrologer.about || 'No information available.'} Skills {astrologer.skills?.map((skill, index) => ( {skill} ))} {/* Placeholder for Photos */} {/* Photos Photos section coming soon. */} ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f7f7f7', }, loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, header: { alignItems: 'center', padding: 20, backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#eee', marginBottom: 15, }, astrologerImage: { width: 120, height: 120, borderRadius: 60, marginBottom: 15, }, astrologerName: { fontSize: 22, fontWeight: 'bold', color: '#333', marginBottom: 5, }, astrologerRating: { fontSize: 16, color: '#555', marginBottom: 5, }, astrologerExperience: { fontSize: 16, color: '#555', marginBottom: 5, }, astrologerServed: { fontSize: 16, color: '#555', marginBottom: 15, }, actionButtons: { flexDirection: 'row', marginTop: 10, }, actionButton: { alignItems: 'center', marginHorizontal: 15, }, actionButtonText: { fontSize: 12, color: '#3f51b5', marginTop: 5, }, section: { backgroundColor: '#fff', padding: 15, marginBottom: 15, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, sectionTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 10, color: '#333', }, sectionContent: { fontSize: 16, color: '#555', lineHeight: 24, }, skillsContainer: { flexDirection: 'row', flexWrap: 'wrap', }, skillTag: { backgroundColor: '#e0e0e0', borderRadius: 15, paddingVertical: 5, paddingHorizontal: 10, marginRight: 8, marginBottom: 8, }, skillText: { fontSize: 14, color: '#333', }, }); export default AstrologerDetailScreen; import React, { useEffect } from 'react'; import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; import { useSelector, useDispatch } from 'react-redux'; import firestore from '@react-native-firebase/firestore'; import { selectUser } from '../../redux/slices/authSlice'; import { selectAllChats, setChats, selectChatLoading, selectChatError } from '../../redux/slices/chatSlice'; import { Chat } from '../../redux/slices/chatSlice'; // Import Chat type import moment from 'moment'; // Define the types for your navigation stack type ChatStackParamList = { Chats: undefined; Chat: { chatId: string; astrologerId: string; astrologerName: string }; Wallet: undefined; // Added Wallet to ChatStackParamList }; type ChatListScreenNavigationProp = StackNavigationProp; const ChatListScreen = () => { const navigation = useNavigation(); const dispatch = useDispatch(); const user = useSelector(selectUser); const chats = useSelector(selectAllChats); const loading = useSelector(selectChatLoading); const error = useSelector(selectChatError); useEffect(() => { if (!user?.uid) { // Handle case where user is not logged in (shouldn't happen if navigation is set up correctly) return; } dispatch({ type: 'chat/setLoading', payload: true }); const subscriber = firestore() .collection('chats') .where('userId', '==', user.uid) .orderBy('updatedAt', 'desc') // Order by last message time .onSnapshot( querySnapshot => { const chatsList: Chat[] = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() as Omit, // Ensure timestamps are handled correctly if needed })); dispatch(setChats(chatsList)); }, err => { console.error("Error fetching chats:", err); dispatch({ type: 'chat/setError', payload: err.message }); } ); // Stop listening for updates when no longer required return () => subscriber(); }, [user?.uid, dispatch]); const renderChatItem = ({ item }: { item: Chat }) => { // You would typically fetch astrologer details here or store them in the chat document // For simplicity, let's assume astrologer name is available or fetched separately const astrologerName = `Astrologer ${item.astrologerId.substring(0, 4)}`; // Placeholder name return ( navigation.navigate('Chat', { chatId: item.id, astrologerId: item.astrologerId, astrologerName })} > {/* Placeholder for Astrologer Image */} {astrologerName[0]} {astrologerName} {item.lastMessage?.text || 'Start a chat'} {item.updatedAt ? moment(item.updatedAt.toDate()).fromNow() : ''} {/* Add unread count badge here */} ); }; if (loading) { return ( Loading chats... ); } if (error) { return ( Error loading chats: {error} ); } return ( item.id} contentContainerStyle={styles.listContent} ListEmptyComponent={() => ( No chats yet. Find an astrologer to start chatting! )} /> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f7f7f7', }, loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, listContent: { paddingVertical: 10, }, chatItem: { flexDirection: 'row', alignItems: 'center', paddingVertical: 15, paddingHorizontal: 15, borderBottomWidth: 1, borderBottomColor: '#eee', backgroundColor: '#fff', }, avatarPlaceholder: { width: 50, height: 50, borderRadius: 25, backgroundColor: '#3f51b5', // Example background color justifyContent: 'center', alignItems: 'center', marginRight: 15, }, avatarText: { color: '#fff', fontSize: 20, fontWeight: 'bold', }, chatContent: { flex: 1, justifyContent: 'center', }, chatName: { fontSize: 17, fontWeight: 'bold', color: '#333', marginBottom: 4, }, lastMessage: { fontSize: 14, color: '#666', }, chatMeta: { alignItems: 'flex-end', }, timestamp: { fontSize: 12, color: '#999', }, emptyList: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, emptyListText: { fontSize: 16, color: '#666', textAlign: 'center', }, }); export default ChatListScreen; import React, { useState, useEffect, useCallback } from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity, FlatList, KeyboardAvoidingView, Platform, ActivityIndicator } from 'react-native'; import { useRoute, RouteProp } from '@react-navigation/native'; import { useSelector, useDispatch } from 'react-redux'; import firestore from '@react-native-firebase/firestore'; import { selectUser } from '../../redux/slices/authSlice'; import { selectMessagesByChatId, setMessagesForChat, addMessageToChat, setCurrentChatId, clearMessagesForChat, selectChatLoading } from '../../redux/slices/chatSlice'; import { Message } from '../../redux/slices/chatSlice'; // Import Message type import moment from 'moment'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { showMessage } from 'react-native-flash-message'; // Define the types for your navigation route type ChatStackParamList = { Chats: undefined; Chat: { chatId?: string; astrologerId: string; astrologerName: string }; // chatId might be undefined initially }; type ChatScreenRouteProp = RouteProp; const ChatScreen = () => { const route = useRoute(); const dispatch = useDispatch(); const user = useSelector(selectUser); const loading = useSelector(selectChatLoading); const { chatId: initialChatId, astrologerId, astrologerName } = route.params; const [chatId, setChatId] = useState(initialChatId); const messages = useSelector(selectMessagesByChatId(chatId || '')); // Use chatId state const [inputMessage, setInputMessage] = useState(''); const [isCreatingChat, setIsCreatingChat] = useState(false); // State to prevent multiple chat creations // Set current chat ID in Redux when screen mounts useEffect(() => { if (chatId) { dispatch(setCurrentChatId(chatId)); } return () => { dispatch(setCurrentChatId(null)); // Clear current chat ID on unmount if (chatId) { dispatch(clearMessagesForChat(chatId)); // Clear messages for this chat on unmount } }; }, [chatId, dispatch]); // Fetch messages for the current chat useEffect(() => { if (!chatId) return; dispatch({ type: 'chat/setLoading', payload: true }); const subscriber = firestore() .collection('chats') .doc(chatId) .collection('messages') .orderBy('timestamp') .onSnapshot( querySnapshot => { const messagesList: Message[] = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() as Omit, timestamp: doc.data().timestamp, // Ensure timestamp is included })); dispatch(setMessagesForChat({ chatId, messages: messagesList })); }, err => { console.error("Error fetching messages:", err); dispatch({ type: 'chat/setError', payload: err.message }); } ); // Stop listening for updates when no longer required return () => subscriber(); }, [chatId, dispatch]); // Depend on chatId state // Function to create a new chat if one doesn't exist const findOrCreateChat = useCallback(async () => { if (!user?.uid || isCreatingChat) return; setIsCreatingChat(true); try { // Check if a chat already exists between this user and astrologer const existingChats = await firestore() .collection('chats') .where('userId', '==', user.uid) .where('astrologerId', '==', astrologerId) .limit(1) .get(); if (!existingChats.empty) { // Chat exists, use its ID const existingChatId = existingChats.docs[0].id; setChatId(existingChatId); dispatch(setCurrentChatId(existingChatId)); console.log("Found existing chat:", existingChatId); } else { // No chat exists, create a new one console.log("Creating new chat..."); const newChatRef = firestore().collection('chats').doc(); const newChatData = { id: newChatRef.id, userId: user.uid, astrologerId: astrologerId, createdAt: firestore.FieldValue.serverTimestamp(), updatedAt: firestore.FieldValue.serverTimestamp(), // Add other initial chat data if needed }; await newChatRef.set(newChatData); setChatId(newChatRef.id); dispatch(setCurrentChatId(newChatRef.id)); // Optionally add the new chat to the Redux chats list dispatch({ type: 'chat/addChat', payload: newChatData }); console.log("Created new chat:", newChatRef.id); } } catch (error: any) { console.error("Error finding or creating chat:", error); showMessage({ message: "Failed to start chat", description: error.message, type: "danger", }); } finally { setIsCreatingChat(false); } }, [user?.uid, astrologerId, dispatch, isCreatingChat]); // Trigger chat creation/finding when screen mounts if chatId is not provided useEffect(() => { if (!initialChatId && user?.uid && astrologerId) { findOrCreateChat(); } else if (initialChatId) { setChatId(initialChatId); } }, [initialChatId, user?.uid, astrologerId, findOrCreateChat]); const handleSendMessage = async () => { if (!inputMessage.trim() || !user?.uid || !chatId) { return; } const messageText = inputMessage.trim(); // Basic client-side content filtering (Placeholder) if (containsNudityKeywords(messageText)) { showMessage({ message: "Content violates policy", description: "Messages containing explicit content are not allowed.", type: "warning", }); return; } const newMessage: Omit = { chatId: chatId, senderId: user.uid, // User is the sender text: messageText, timestamp: firestore.FieldValue.serverTimestamp(), isRead: false, // Assuming astrologer needs to read it }; setInputMessage(''); // Clear input immediately try { const messagesRef = firestore().collection('chats').doc(chatId).collection('messages'); await messagesRef.add(newMessage); // Update the last message and updatedAt in the chat document await firestore().collection('chats').doc(chatId).update({ lastMessage: { text: messageText, senderId: user.uid, timestamp: firestore.FieldValue.serverTimestamp(), }, updatedAt: firestore.FieldValue.serverTimestamp(), }); // Simulate AI Astrologer response (This would be a backend call in a real app) setTimeout(async () => { const aiResponseText = `(AI Response from ${astrologerName}): Thanks for your message! Let me analyze that for you...`; // Placeholder AI response // Basic client-side content filtering for AI response (should be done server-side) if (containsNudityKeywords(aiResponseText)) { console.warn("AI response contained potential nudity keywords, not sending."); return; // Don't send AI response if it contains filtered content } const aiMessage: Omit = { chatId: chatId, senderId: astrologerId, // Astrologer is the sender text: aiResponseText, timestamp: firestore.FieldValue.serverTimestamp(), isRead: false, // User needs to read it }; const aiMessagesRef = firestore().collection('chats').doc(chatId).collection('messages'); await aiMessagesRef.add(aiMessage); // Update the last message and updatedAt in the chat document with AI response await firestore().collection('chats').doc(chatId).update({ lastMessage: { text: aiResponseText, senderId: astrologerId, timestamp: firestore.FieldValue.serverTimestamp(), }, updatedAt: firestore.FieldValue.serverTimestamp(), }); }, 2000); // Simulate a delay for AI response } catch (error: any) { console.error("Error sending message:", error); showMessage({ message: "Failed to send message", description: error.message, type: "danger", }); } }; // Placeholder for content filtering logic const containsNudityKeywords = (text: string): boolean => { const lowerText = text.toLowerCase(); // This is a very basic example. Real filtering requires sophisticated methods. const keywords = ['naked', 'sex', 'porn', 'nude', 'explicit']; // Add more keywords return keywords.some(keyword => lowerText.includes(keyword)); }; const renderMessage = ({ item }: { item: Message }) => { const isMyMessage = item.senderId === user?.uid; const messageTime = item.timestamp ? moment(item.timestamp.toDate()).format('LT') : ''; return ( {item.text} {messageTime} ); }; if (!chatId && (loading || isCreatingChat)) { return ( Starting chat... ); } if (!chatId) { return ( Could not start chat. ); } return ( {loading && messages.length === 0 ? ( Loading messages... ) : ( item.id} contentContainerStyle={styles.messagesList} inverted={false} // Set to true if you want newest messages at the bottom /> )} ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f7f7f7', }, loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, loadingOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(255,255,255,0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 1, // Ensure it's above the list }, messagesList: { paddingHorizontal: 10, paddingVertical: 10, }, messageBubble: { maxWidth: '80%', padding: 10, borderRadius: 8, marginBottom: 10, flexDirection: 'column', }, myMessage: { alignSelf: 'flex-end', backgroundColor: '#dcf8c6', // Light green for my messages }, otherMessage: { alignSelf: 'flex-start', backgroundColor: '#fff', // White for other messages }, messageText: { fontSize: 16, color: '#333', }, myMessageText: { color: '#000', }, otherMessageText: { color: '#333', }, messageTime: { fontSize: 10, marginTop: 5, alignSelf: 'flex-end', }, myMessageTime: { color: '#666', }, otherMessageTime: { color: '#999', }, inputContainer: { flexDirection: 'row', alignItems: 'center', padding: 10, borderTopWidth: 1, borderTopColor: '#eee', backgroundColor: '#fff', }, input: { flex: 1, minHeight: 40, maxHeight: 100, // Prevent input from growing too large borderColor: '#ccc', borderWidth: 1, borderRadius: 20, paddingHorizontal: 15, paddingTop: Platform.OS === 'ios' ? 10 : undefined, // Adjust padding for multiline on iOS paddingBottom: Platform.OS === 'ios' ? 10 : undefined, marginRight: 10, fontSize: 16, }, sendButton: { backgroundColor: '#3f51b5', borderRadius: 20, width: 40, height: 40, justifyContent: 'center', alignItems: 'center', }, }); export default ChatScreen; import React, { useState } from 'react'; import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator, TextInput, Image } from 'react-native'; import { useSelector, useDispatch } from 'react-redux'; import { selectUser, updateUserProfile } from '../../redux/slices/authSlice'; import firestore from '@react-native-firebase/firestore'; import storage from '@react-native-firebase/storage'; import ImagePicker from 'react-native-image-picker'; // Or use react-native-image-crop-picker import { showMessage } from 'react-native-flash-message'; import DateTimePicker from '@react-native-community/datetimepicker'; import { Picker } from '@react-native-picker/picker'; import moment from 'moment'; const ProfileScreen = () => { const user = useSelector(selectUser); const dispatch = useDispatch(); const [isEditing, setIsEditing] = useState(false); const [loading, setLoading] = useState(false); // State for editable fields const [name, setName] = useState(user?.name || ''); const [gender, setGender] = useState(user?.gender || ''); const [dateOfBirth, setDateOfBirth] = useState(user?.dateOfBirth ? new Date(user.dateOfBirth) : undefined); const [timeOfBirth, setTimeOfBirth] = useState(user?.timeOfBirth ? moment(user.timeOfBirth, 'HH:mm').toDate() : undefined); const [placeOfBirth, setPlaceOfBirth] = useState(user?.placeOfBirth || ''); const [photoURL, setPhotoURL] = useState(user?.photoURL || ''); const [showDatePicker, setShowDatePicker] = useState(false); const [showTimePicker, setShowTimePicker] = useState(false); const onDateChange = (event: any, selectedDate?: Date) => { const currentDate = selectedDate || dateOfBirth; setShowDatePicker(false); setDateOfBirth(currentDate); }; const onTimeChange = (event: any, selectedTime?: Date) => { const currentTime = selectedTime || timeOfBirth; setShowTimePicker(false); setTimeOfBirth(currentTime); }; const handleChoosePhoto = () => { const options = { noData: true, mediaType: 'photo', }; ImagePicker.launchImageLibrary(options, (response) => { if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); showMessage({ message: "Image picker error", description: response.error, type: "danger", }); } else if (response.assets && response.assets.length > 0) { const source = response.assets[0]; if (source.uri) { setPhotoURL(source.uri); // Set local URI for preview } } }); }; const handleSaveProfile = async () => { if (!user?.uid) { showMessage({ message: "User not authenticated", type: "danger" }); return; } setLoading(true); let newPhotoURL = photoURL; // Upload new photo if changed and it's a local URI if (photoURL && photoURL.startsWith('file://')) { try { const filename = photoURL.substring(photoURL.lastIndexOf('/') + 1); const storageRef = storage().ref(`profile_pictures/${user.uid}/${filename}`); const task = storageRef.putFile(photoURL); // Optional: Listen for state changes, errors, and completion task.on('state_changed', snapshot => { const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log('Upload is ' + progress + '% done'); }, error => { console.error("Photo upload error:", error); setLoading(false); showMessage({ message: "Photo upload failed", description: error.message, type: "danger" }); // Don't proceed with profile update if photo upload fails throw error; // Re-throw to stop the save process }, () => { // Upload completed successfully storageRef.getDownloadURL().then(downloadURL => { newPhotoURL = downloadURL; // Now proceed with Firestore update updateFirestoreProfile(newPhotoURL); }); } ); } catch (error) { // Error already handled in task.on return; // Stop here } } else { // No new photo or photo is already a remote URL, just update Firestore updateFirestoreProfile(newPhotoURL); } }; const updateFirestoreProfile = async (finalPhotoURL: string) => { if (!user?.uid) return; // Should not happen try { const profileData: any = { name, gender, placeOfBirth, photoURL: finalPhotoURL, // Only update date/time if they were selected ...(dateOfBirth && { dateOfBirth: firestore.Timestamp.fromDate(dateOfBirth) }), ...(timeOfBirth && { timeOfBirth: moment(timeOfBirth).format('HH:mm') }), }; await firestore().collection('users').doc(user.uid).update(profileData); // Update Redux state dispatch(updateUserProfile({ ...profileData, dateOfBirth: dateOfBirth ? dateOfBirth.toISOString() : undefined, // Store as ISO string in Redux timeOfBirth: timeOfBirth ? moment(timeOfBirth).format('HH:mm') : undefined, })); setLoading(false); setIsEditing(false); showMessage({ message: "Profile updated successfully", type: "success", }); } catch (error: any) { setLoading(false); console.error("Error updating profile:", error); showMessage({ message: "Failed to update profile", description: error.message, type: "danger", }); } }; return ( {isEditing && ( )} {user?.name || 'User'} {user?.phoneNumber} Personal Information Name: {isEditing ? ( ) : ( {user?.name || 'N/A'} )} Gender: {isEditing ? ( setGender(itemValue)} style={styles.editPicker} > ) : ( {user?.gender || 'N/A'} )} Date of Birth: {isEditing ? ( setShowDatePicker(true)} style={styles.editDateButton}> {dateOfBirth ? moment(dateOfBirth).format('YYYY-MM-DD') : 'Select Date'} ) : ( {user?.dateOfBirth ? moment(user.dateOfBirth).format('YYYY-MM-DD') : 'N/A'} )} {showDatePicker && ( )} Time of Birth: {isEditing ? ( setShowTimePicker(true)} style={styles.editDateButton}> {timeOfBirth ? moment(timeOfBirth).format('HH:mm') : 'Select Time'} ) : ( {user?.timeOfBirth || 'N/A'} )} {showTimePicker && ( )} Place of Birth: {isEditing ? ( ) : ( {user?.placeOfBirth || 'N/A'} )} {isEditing ? ( <> {loading ? ( ) : ( Save Changes )} { setIsEditing(false); // Reset state to current user data setName(user?.name || ''); setGender(user?.gender || ''); setDateOfBirth(user?.dateOfBirth ? new Date(user.dateOfBirth) : undefined); setTimeOfBirth(user?.timeOfBirth ? moment(user.timeOfBirth, 'HH:mm').toDate() : undefined); setPlaceOfBirth(user?.placeOfBirth || ''); setPhotoURL(user?.photoURL || ''); }} disabled={loading} > Cancel ) : ( setIsEditing(true)} > Edit Profile )} ); }; const styles = StyleSheet.create({ container: { flexGrow: 1, padding: 20, backgroundColor: '#f7f7f7', }, profileHeader: { alignItems: 'center', marginBottom: 30, }, profileImage: { width: 120, height: 120, borderRadius: 60, marginBottom: 10, backgroundColor: '#ccc', // Placeholder background }, cameraIconOverlay: { position: 'absolute', bottom: 0, right: 0, backgroundColor: 'rgba(0,0,0,0.5)', borderRadius: 20, padding: 5, }, userName: { fontSize: 22, fontWeight: 'bold', color: '#333', marginBottom: 5, }, userPhone: { fontSize: 16, color: '#666', }, profileDetails: { backgroundColor: '#fff', borderRadius: 8, padding: 15, marginBottom: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, sectionTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 15, color: '#333', borderBottomWidth: 1, borderBottomColor: '#eee', paddingBottom: 10, }, detailRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 12, }, detailLabel: { fontSize: 16, fontWeight: 'bold', color: '#555', width: 120, // Fixed width for labels }, detailValue: { flex: 1, fontSize: 16, color: '#333', }, editInput: { flex: 1, fontSize: 16, borderColor: '#ccc', borderWidth: 1, borderRadius: 4, paddingVertical: 5, paddingHorizontal: 10, backgroundColor: '#f9f9f9', }, editPickerContainer: { flex: 1, borderColor: '#ccc', borderWidth: 1, borderRadius: 4, backgroundColor: '#f9f9f9', height: 40, // Adjust height to match input justifyContent: 'center', }, editPicker: { flex: 1, height: 40, color: '#333', }, editDateButton: { flex: 1, borderColor: '#ccc', borderWidth: 1, borderRadius: 4, paddingVertical: 8, paddingHorizontal: 10, backgroundColor: '#f9f9f9', justifyContent: 'center', height: 40, }, editDateButtonText: { fontSize: 16, color: '#333', }, buttonContainer: { marginTop: 20, }, button: { width: '100%', padding: 15, borderRadius: 8, alignItems: 'center', marginBottom: 10, }, editButton: { backgroundColor: '#3f51b5', }, saveButton: { backgroundColor: '#4caf50', }, cancelButton: { backgroundColor: '#f44336', }, buttonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, }); export default ProfileScreen; import React, { useEffect } from 'react'; import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, ActivityIndicator } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; import { useSelector, useDispatch } from 'react-redux'; import firestore from '@react-native-firebase/firestore'; import { selectAllProducts, setProducts, selectProductLoading, selectProductError } from '../../redux/slices/productSlice'; import { Product } from '../../redux/slices/productSlice'; // Import Product type // Define the types for your navigation stack type ProductStackParamList = { Products: undefined; ProductDetail: { productId: string }; OrderStatus: undefined; Wallet: undefined; // Added Wallet to ProductStackParamList }; type ProductListScreenNavigationProp = StackNavigationProp; const ProductListScreen = () => { const navigation = useNavigation(); const dispatch = useDispatch(); const products = useSelector(selectAllProducts); const loading = useSelector(selectProductLoading); const error = useSelector(selectProductError); useEffect(() => { const fetchProducts = async () => { dispatch({ type: 'product/setLoading', payload: true }); try { const snapshot = await firestore().collection('products').get(); const productsList: Product[] = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() as Omit })); dispatch(setProducts(productsList)); } catch (error: any) { console.error("Error fetching products:", error); dispatch({ type: 'product/setError', payload: error.message }); } finally { dispatch({ type: 'product/setLoading', payload: false }); } }; fetchProducts(); }, [dispatch]); const renderProductItem = ({ item }: { item: Product }) => ( navigation.navigate('ProductDetail', { productId: item.id })} > {item.name} ${item.price.toFixed(2)} {/* Add category/type tags */} ); if (loading) { return ( Loading products... ); } if (error) { return ( Error loading products: {error} ); } return ( item.id} numColumns={2} // Display in 2 columns columnWrapperStyle={styles.row} contentContainerStyle={styles.listContent} ListEmptyComponent={() => ( No products available yet. )} /> navigation.navigate('OrderStatus')} > View Order Status ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f7f7f7', }, loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, listContent: { paddingHorizontal: 5, // Adjust padding for columns paddingBottom: 70, // Make space for the order status button }, row: { flex: 1, justifyContent: 'space-around', // Distribute items evenly marginBottom: 10, }, productCard: { flex: 0.48, // Take up slightly less than half to allow spacing backgroundColor: '#fff', borderRadius: 8, overflow: 'hidden', // Clip image corners shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, marginHorizontal: 5, // Add horizontal margin }, productImage: { width: '100%', height: 150, // Fixed height for images resizeMode: 'cover', }, productInfo: { padding: 10, }, productName: { fontSize: 16, fontWeight: 'bold', color: '#333', marginBottom: 5, }, productPrice: { fontSize: 14, color: '#555', }, emptyList: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, emptyListText: { fontSize: 16, color: '#666', textAlign: 'center', }, orderStatusButton: { position: 'absolute', bottom: 10, left: 20, right: 20, backgroundColor: '#3f51b5', padding: 15, borderRadius: 8, alignItems: 'center', zIndex: 10, // Ensure button is above list }, orderStatusButtonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, }); export default ProductListScreen; import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity, ActivityIndicator } from 'react-native'; import { useRoute, RouteProp } from '@react-navigation/native'; import firestore from '@react-native-firebase/firestore'; import { Product } from '../../redux/slices/productSlice'; // Import Product type import { showMessage } from 'react-native-flash-message'; import RazorpayCheckout from 'react-native-razorpay'; import { useSelector, useDispatch } from 'react-redux'; import { selectUser, updateWalletBalance } from '../../redux/slices/authSlice'; import { addOrder, addTransaction } from '../../redux/slices/productSlice'; // Assuming transactions are managed here or in wallet slice // Define the types for your navigation route type ProductStackParamList = { Products: undefined; ProductDetail: { productId: string }; OrderStatus: undefined; }; type ProductDetailScreenRouteProp = RouteProp; const ProductDetailScreen = () => { const route = useRoute(); const dispatch = useDispatch(); const user = useSelector(selectUser); const { productId } = route.params; const [product, setProduct] = useState(null); const [loading, setLoading] = useState(true); const [isProcessingPayment, setIsProcessingPayment] = useState(false); // Replace with your actual Razorpay Key ID const RAZORPAY_KEY_ID = 'YOUR_RAZORPAY_KEY_ID'; useEffect(() => { const fetchProduct = async () => { try { const doc = await firestore().collection('products').doc(productId).get(); if (doc.exists) { setProduct({ id: doc.id, ...doc.data() as Omit }); } else { showMessage({ message: "Product not found", type: "danger", }); } } catch (error: any) { console.error("Error fetching product:", error); showMessage({ message: "Failed to load product details", description: error.message, type: "danger", }); } finally { setLoading(false); } }; fetchProduct(); }, [productId]); const handleBuyNow = async () => { if (!user?.uid || !user?.phoneNumber || !user?.name || !product) { showMessage({ message: "User not logged in or profile incomplete", type: "warning" }); return; } setIsProcessingPayment(true); const options = { description: `Purchase of ${product.name}`, image: product.imageUrl || 'https://via.placeholder.com/100', currency: 'INR', // Or your currency key: RAZORPAY_KEY_ID, amount: product.price * 100, // Amount in paise name: 'AstroAI App', // Your app name order_id: '', // Replace with an order ID generated from your backend prefill: { email: user.email || '', // Optional: User email contact: user.phoneNumber, name: user.name, }, theme: { color: '#3f51b5' }, }; try { const data = await RazorpayCheckout.open(options); // Payment successful console.log('Razorpay Success:', data); // Create Order in Firestore const newOrderRef = firestore().collection('orders').doc(); const newOrder: Order = { id: newOrderRef.id, userId: user.uid, items: [{ productId: product.id, quantity: 1, price: product.price }], // Assuming quantity 1 for simplicity totalAmount: product.price, orderDate: firestore.FieldValue.serverTimestamp(), status: 'processing', // Initial status paymentStatus: 'completed', paymentDetails: data, // Store Razorpay details }; await newOrderRef.set(newOrder); // Add transaction to user's history const newTransactionRef = firestore().collection('transactions').doc(); const newTransaction: Transaction = { id: newTransactionRef.id, userId: user.uid, type: 'debit', amount: product.price, timestamp: firestore.FieldValue.serverTimestamp(), description: `Product Purchase: ${product.name}`, relatedId: newOrder.id, // Link to the order }; await newTransactionRef.set(newTransaction); // Update user's wallet balance (if applicable, e.g., if payment was from wallet) // If payment is directly via Razorpay, wallet balance might not change unless it's a top-up // If this purchase *debits* the wallet, you'd update the user's wallet balance here. // Assuming direct payment for now, no wallet debit needed here. dispatch(addOrder(newOrder)); // Add order to Redux state dispatch(addTransaction(newTransaction)); // Add transaction to Redux state showMessage({ message: "Payment Successful!", description: `Order placed for ${product.name}`, type: "success", }); } catch (error: any) { // Payment failed or cancelled console.error('Razorpay Error:', error.code, error.description); showMessage({ message: "Payment Failed", description: error.description || "An error occurred during payment.", type: "danger", }); // Optional: Log failed transaction/order attempt } finally { setIsProcessingPayment(false); } }; if (loading) { return ( Loading product details... ); } if (!product) { return ( Product not found. ); } return ( {product.name} ${product.price.toFixed(2)} {product.description || 'No description available.'} {/* Add more details like category, type, stock */} {product.category && Category: {product.category}} {product.type && Type: {product.type}} {typeof product.stock === 'number' && Stock: {product.stock}} {isProcessingPayment ? ( ) : ( {typeof product.stock === 'number' && product.stock <= 0 ? 'Out of Stock' : `Buy Now ($${product.price.toFixed(2)})`} )} ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f7f7f7', }, loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, productImage: { width: '100%', height: 300, // Adjust height as needed resizeMode: 'cover', }, detailsContainer: { padding: 20, backgroundColor: '#fff', margin: 15, borderRadius: 8, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, productName: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 10, }, productPrice: { fontSize: 20, color: '#4caf50', // Green color for price marginBottom: 15, }, productDescription: { fontSize: 16, color: '#555', lineHeight: 24, marginBottom: 15, }, detailText: { fontSize: 15, color: '#666', marginBottom: 5, }, buyButton: { backgroundColor: '#3f51b5', padding: 15, borderRadius: 8, alignItems: 'center', marginTop: 20, }, buyButtonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, }); export default ProductDetailScreen; import React, { useEffect } from 'react'; import { View, Text, StyleSheet, FlatList, ActivityIndicator } from 'react-native'; import { useSelector, useDispatch } from 'react-redux'; import firestore from '@react-native-firebase/firestore'; import { selectUser } from '../../redux/slices/authSlice'; import { selectAllOrders, setOrders, selectProductLoading, selectProductError } from '../../redux/slices/productSlice'; import { Order } from '../../redux/slices/productSlice'; // Import Order type import moment from 'moment'; const OrderStatusScreen = () => { const dispatch = useDispatch(); const user = useSelector(selectUser); const orders = useSelector(selectAllOrders); const loading = useSelector(selectProductLoading); // Using product loading state for orders const error = useSelector(selectProductError); // Using product error state for orders useEffect(() => { if (!user?.uid) { // Handle case where user is not logged in return; } dispatch({ type: 'product/setLoading', payload: true }); // Use product slice loading const subscriber = firestore() .collection('orders') .where('userId', '==', user.uid) .orderBy('orderDate', 'desc') .onSnapshot( querySnapshot => { const ordersList: Order[] = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() as Omit, orderDate: doc.data().orderDate, // Ensure timestamp is included })); dispatch(setOrders(ordersList)); }, err => { console.error("Error fetching orders:", err); dispatch({ type: 'product/setError', payload: err.message }); // Use product slice error } ); // Stop listening for updates when no longer required return () => subscriber(); }, [user?.uid, dispatch]); const renderOrderItem = ({ item }: { item: Order }) => ( Order ID: {item.id.substring(0, 8)}... Date: {item.orderDate ? moment(item.orderDate.toDate()).format('YYYY-MM-DD HH:mm') : 'N/A'} Total: ${item.totalAmount.toFixed(2)} Status: {item.status} Payment: {item.paymentStatus} {/* Display items in the order */} Items: {item.items.map((item, index) => ( - Product ID: {item.productId.substring(0, 6)}..., Qty: {item.quantity}, Price: ${item.price.toFixed(2)} ))} ); if (loading) { return ( Loading orders... ); } if (error) { return ( Error loading orders: {error} ); } return ( item.id} contentContainerStyle={styles.listContent} ListEmptyComponent={() => ( You have no orders yet. )} /> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f7f7f7', }, loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, listContent: { paddingVertical: 10, paddingHorizontal: 10, }, orderItem: { backgroundColor: '#fff', borderRadius: 8, padding: 15, marginBottom: 10, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, orderId: { fontSize: 16, fontWeight: 'bold', color: '#333', marginBottom: 5, }, orderDate: { fontSize: 14, color: '#666', marginBottom: 5, }, orderTotal: { fontSize: 16, fontWeight: 'bold', color: '#4caf50', // Green color marginBottom: 10, }, orderStatus: { fontSize: 15, color: '#3f51b5', // Blue color marginBottom: 5, }, paymentStatus: { fontSize: 15, color: '#ff9800', // Orange color marginBottom: 10, }, itemsContainer: { marginTop: 10, borderTopWidth: 1, borderTopColor: '#eee', paddingTop: 10, }, itemsTitle: { fontSize: 15, fontWeight: 'bold', color: '#555', marginBottom: 5, }, itemText: { fontSize: 14, color: '#666', marginBottom: 3, }, emptyList: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, emptyListText: { fontSize: 16, color: '#666', textAlign: 'center', }, }); export default OrderStatusScreen; import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, TextInput, Alert } from 'react-native'; import { useSelector, useDispatch } from 'react-redux'; import firestore from '@react-native-firebase/firestore'; import { selectUser, updateWalletBalance } from '../../redux/slices/authSlice'; import { selectWalletBalance, setBalance, addTransaction } from '../../redux/slices/walletSlice'; import RazorpayCheckout from 'react-native-razorpay'; import { showMessage } from 'react-native-flash-message'; import { Transaction } from '../../redux/slices/walletSlice'; // Import Transaction type const WalletScreen = () => { const dispatch = useDispatch(); const user = useSelector(selectUser); const walletBalance = useSelector(selectWalletBalance); const [rechargeAmount, setRechargeAmount] = useState(''); const [loading, setLoading] = useState(false); const [isProcessingPayment, setIsProcessingPayment] = useState(false); // Replace with your actual Razorpay Key ID const RAZORPAY_KEY_ID = 'YOUR_RAZORPAY_KEY_ID'; useEffect(() => { if (!user?.uid) return; // Fetch initial wallet balance const fetchBalance = async () => { try { const userDoc = await firestore().collection('users').doc(user.uid).get(); if (userDoc.exists) { const userData = userDoc.data(); const balance = userData?.walletBalance || 0; dispatch(setBalance(balance)); dispatch(updateWalletBalance(balance)); // Also update auth slice } } catch (error: any) { console.error("Error fetching wallet balance:", error); showMessage({ message: "Failed to load wallet balance", description: error.message, type: "danger", }); } }; fetchBalance(); // Optional: Set up a real-time listener for balance changes if needed // const subscriber = firestore().collection('users').doc(user.uid).onSnapshot(doc => { // if (doc.exists) { // const userData = doc.data(); // const balance = userData?.walletBalance || 0; // dispatch(setBalance(balance)); // dispatch(updateWalletBalance(balance)); // } // }); // return () => subscriber(); }, [user?.uid, dispatch]); const handleRecharge = async () => { const amount = parseFloat(rechargeAmount); if (isNaN(amount) || amount <= 0) { showMessage({ message: "Please enter a valid amount", type: "warning" }); return; } if (!user?.uid || !user?.phoneNumber || !user?.name) { showMessage({ message: "User not logged in or profile incomplete", type: "warning" }); return; } setIsProcessingPayment(true); const options = { description: `Wallet Recharge`, image: 'https://via.placeholder.com/100', // Your app logo currency: 'INR', // Or your currency key: RAZORPAY_KEY_ID, amount: amount * 100, // Amount in paise name: 'AstroAI App', // Your app name order_id: '', // Replace with an order ID generated from your backend prefill: { email: user.email || '', // Optional: User email contact: user.phoneNumber, name: user.name, }, theme: { color: '#3f51b5' }, }; try { const data = await RazorpayCheckout.open(options); // Payment successful console.log('Razorpay Success:', data); // Update wallet balance in Firestore const userRef = firestore().collection('users').doc(user.uid); await userRef.update({ walletBalance: firestore.FieldValue.increment(amount), }); // Add transaction to history const newTransactionRef = firestore().collection('transactions').doc(); const newTransaction: Transaction = { id: newTransactionRef.id, userId: user.uid, type: 'credit', amount: amount, timestamp: firestore.FieldValue.serverTimestamp(), description: `Wallet Recharge via Razorpay`, relatedId: data.razorpay_payment_id, // Link to payment ID }; await newTransactionRef.set(newTransaction); // Update Redux state dispatch(updateWalletBalance(walletBalance + amount)); dispatch(addTransaction(newTransaction)); setRechargeAmount(''); // Clear input showMessage({ message: "Recharge Successful!", description: `Added $${amount.toFixed(2)} to your wallet.`, type: "success", }); } catch (error: any) { // Payment failed or cancelled console.error('Razorpay Error:', error.code, error.description); showMessage({ message: "Recharge Failed", description: error.description || "An error occurred during recharge.", type: "danger", }); // Optional: Log failed transaction attempt } finally { setIsProcessingPayment(false); } }; return ( Current Balance: ${walletBalance.toFixed(2)} Recharge Wallet {isProcessingPayment ? ( ) : ( Recharge Now )} {/* Link to Transaction History */} {/* This is already in the Drawer, but could be added here too */} {/* View Transaction History */} ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f7f7f7', }, balanceContainer: { backgroundColor: '#3f51b5', borderRadius: 8, padding: 20, alignItems: 'center', marginBottom: 30, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, balanceLabel: { fontSize: 18, color: '#fff', marginBottom: 5, }, balanceAmount: { fontSize: 36, fontWeight: 'bold', color: '#fff', }, rechargeContainer: { backgroundColor: '#fff', borderRadius: 8, padding: 15, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, sectionTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 15, color: '#333', borderBottomWidth: 1, borderBottomColor: '#eee', paddingBottom: 10, }, input: { width: '100%', height: 50, borderColor: '#ccc', borderWidth: 1, borderRadius: 8, paddingHorizontal: 15, marginBottom: 20, backgroundColor: '#fff', fontSize: 16, }, rechargeButton: { backgroundColor: '#4caf50', // Green color for recharge padding: 15, borderRadius: 8, alignItems: 'center', }, rechargeButtonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, historyLink: { marginTop: 20, alignSelf: 'center', }, historyLinkText: { color: '#3f51b5', fontSize: 16, textDecorationLine: 'underline', }, }); export default WalletScreen; import React, { useEffect } from 'react'; import { View, Text, StyleSheet, FlatList, ActivityIndicator } from 'react-native'; import { useSelector, useDispatch } from 'react-redux'; import firestore from '@react-native-firebase/firestore'; import { selectUser } from '../../redux/slices/authSlice'; import { selectTransactions, setTransactions, selectWalletLoading, selectWalletError } from '../../redux/slices/walletSlice'; import { Transaction } from '../../redux/slices/walletSlice'; // Import Transaction type import moment from 'moment'; const TransactionHistoryScreen = () => { const dispatch = useDispatch(); const user = useSelector(selectUser); const transactions = useSelector(selectTransactions); const loading = useSelector(selectWalletLoading); // Using wallet loading state const error = useSelector(selectWalletError); // Using wallet error state useEffect(() => { if (!user?.uid) { // Handle case where user is not logged in return; } dispatch({ type: 'wallet/setLoading', payload: true }); // Use wallet slice loading const subscriber = firestore() .collection('transactions') .where('userId', '==', user.uid) .orderBy('timestamp', 'desc') .onSnapshot( querySnapshot => { const transactionsList: Transaction[] = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() as Omit, timestamp: doc.data().timestamp, // Ensure timestamp is included })); dispatch(setTransactions(transactionsList)); }, err => { console.error("Error fetching transactions:", err); dispatch({ type: 'wallet/setError', payload: err.message }); // Use wallet slice error } ); // Stop listening for updates when no longer required return () => subscriber(); }, [user?.uid, dispatch]); const renderTransactionItem = ({ item }: { item: Transaction }) => ( {item.description} {item.timestamp ? moment(item.timestamp.toDate()).format('YYYY-MM-DD HH:mm') : 'N/A'} {item.type === 'credit' ? '+' : '-'}${item.amount.toFixed(2)} ); if (loading) { return ( Loading transactions... ); } if (error) { return ( Error loading transactions: {error} ); } return ( item.id} contentContainerStyle={styles.listContent} ListEmptyComponent={() => ( No transactions found. )} /> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f7f7f7', }, loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, listContent: { paddingVertical: 10, paddingHorizontal: 10, }, transactionItem: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#fff', borderRadius: 8, padding: 15, marginBottom: 10, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, transactionInfo: { flex: 1, marginRight: 10, }, description: { fontSize: 16, fontWeight: 'bold', color: '#333', marginBottom: 4, }, date: { fontSize: 12, color: '#666', }, amount: { fontSize: 16, fontWeight: 'bold', }, creditAmount: { color: '#4caf50', // Green for credit }, debitAmount: { color: '#f44336', // Red for debit }, emptyList: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, emptyListText: { fontSize: 16, color: '#666', textAlign: 'center', }, }); export default TransactionHistoryScreen; import React from 'react'; import { View, Text, StyleSheet, ScrollView, Linking, TouchableOpacity } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; const HelpSupportScreen = () => { const handleEmailPress = () => { Linking.openURL('mailto:support@yourapp.com'); // Replace with your support email }; const handlePhonePress = () => { Linking.openURL('tel:+1234567890'); // Replace with your support phone number }; return ( Help & Support Contact Us If you have any questions or need assistance, please feel free to reach out to us. support@yourapp.com +1 234 567 890 FAQs You can find answers to common questions in our FAQ section. {/* Link to FAQ screen */} {/* navigation.navigate('FAQ')}> Go to FAQ */} {/* Add more sections like Tutorials, Troubleshooting, etc. */} ); }; const styles = StyleSheet.create({ container: { flexGrow: 1, padding: 20, backgroundColor: '#f7f7f7', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 30, color: '#333', textAlign: 'center', }, section: { backgroundColor: '#fff', borderRadius: 8, padding: 15, marginBottom: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, sectionTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 10, color: '#333', borderBottomWidth: 1, borderBottomColor: '#eee', paddingBottom: 10, }, sectionText: { fontSize: 16, color: '#555', lineHeight: 24, marginBottom: 15, }, contactItem: { flexDirection: 'row', alignItems: 'center', marginBottom: 10, }, contactText: { fontSize: 16, color: '#3f51b5', marginLeft: 10, textDecorationLine: 'underline', }, linkText: { fontSize: 16, color: '#3f51b5', textDecorationLine: 'underline', marginTop: 10, } }); export default HelpSupportScreen; import React from 'react'; import { View, Text, StyleSheet, ScrollView } from 'react-native'; const PrivacyPolicyScreen = () => { return ( Privacy Policy Introduction Your privacy is important to us. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our mobile application (the "App"). Please read this policy carefully. If you do not agree with the terms of this privacy policy, please do not access the App. Information We Collect We may collect information about you in a variety of ways. The information we may collect via the App depends on the content and materials you use, and includes: - Personal Data: Name, gender, date of birth, time of birth, place of birth, phone number, email address (if provided), profile picture. - Usage Data: Information about how you use the App, such as features accessed, time spent, etc. - Transaction Data: Details about purchases you make through the App (products, wallet recharges). - Chat Data: Content of your chats with astrologers. Use of Your Information Having accurate information about you permits us to provide you with a smooth, efficient, and customized experience. Specifically, we may use information collected about you via the App to: - Create and manage your account. - Provide and maintain the App's functionality. - Process transactions and payments. - Enable chat communication with astrologers. - Personalize your experience (e.g., horoscope based on birth details). - Send you updates, promotions, and relevant information (with your consent). - Monitor and analyze usage and trends to improve your experience. - Detect and prevent fraudulent transactions and other illegal activities. - Implement content filtering for chat messages. {/* Add more sections like Disclosure of Your Information, Security, etc. */} Contact Us If you have questions or comments about this Privacy Policy, please contact us at: support@yourapp.com ); }; const styles = StyleSheet.create({ container: { flexGrow: 1, padding: 20, backgroundColor: '#f7f7f7', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 30, color: '#333', textAlign: 'center', }, section: { backgroundColor: '#fff', borderRadius: 8, padding: 15, marginBottom: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, sectionTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 10, color: '#333', borderBottomWidth: 1, borderBottomColor: '#eee', paddingBottom: 10, }, sectionText: { fontSize: 16, color: '#555', lineHeight: 24, marginBottom: 10, }, bulletPoint: { fontSize: 16, color: '#555', lineHeight: 24, marginLeft: 10, marginBottom: 5, }, contactText: { fontSize: 16, color: '#3f51b5', textDecorationLine: 'underline', marginTop: 10, } }); export default PrivacyPolicyScreen; import React from 'react'; import { View, Text, StyleSheet, ScrollView } from 'react-native'; const FAQScreen = () => { // Placeholder FAQ data const faqs = [ { question: "How do I create an account?", answer: "You can create an account using your phone number on the login screen. You will receive an OTP to verify your number, and then you can complete your profile.", }, { question: "How do I chat with an astrologer?", answer: "Go to the Home tab, browse the list of astrologers, tap on an astrologer's card to view their details, and then tap the 'Chat' button.", }, { question: "How do I add money to my wallet?", answer: "Go to the Wallet screen from the sidebar or the header icon. Enter the amount you want to recharge and proceed with the payment using Razorpay.", }, { question: "How can I view my transaction history?", answer: "Your transaction history is available in the sidebar menu.", }, { question: "How do I buy products?", answer: "Go to the Products tab. Browse the available products, tap on a product to see details, and use the 'Buy Now' button to purchase via Razorpay.", }, { question: "Where can I see my order status?", answer: "You can view your order status from the Products tab by tapping the 'View Order Status' button.", }, // Add more FAQs ]; return ( Frequently Asked Questions {faqs.map((faq, index) => ( Q: {faq.question} A: {faq.answer} ))} ); }; const styles = StyleSheet.create({ container: { flexGrow: 1, padding: 20, backgroundColor: '#f7f7f7', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 30, color: '#333', textAlign: 'center', }, faqItem: { backgroundColor: '#fff', borderRadius: 8, padding: 15, marginBottom: 15, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, question: { fontSize: 16, fontWeight: 'bold', color: '#3f51b5', // Blue color for questions marginBottom: 8, }, answer: { fontSize: 16, color: '#555', lineHeight: 24, }, }); export default FAQScreen; {/* Placeholder Admin Screens */} import React, { useState } from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity, ActivityIndicator } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; import { showMessage } from 'react-native-flash-message'; import auth from '@react-native-firebase/auth'; import firestore from '@react-native-firebase/firestore'; import { useDispatch } from 'react-redux'; import { setUser } from '../../redux/slices/authSlice'; // Define the types for your navigation stack type AuthStackParamList = { Login: undefined; OTP: { verificationId: string; phoneNumber: string }; AdminLogin: undefined; AdminDashboard: undefined; // Add AdminDashboard to stack params }; type AdminLoginScreenNavigationProp = StackNavigationProp; const AdminLoginScreen = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); const navigation = useNavigation(); const dispatch = useDispatch(); const handleAdminLogin = async () => { if (!email || !password) { showMessage({ message: "Please enter email and password", type: "warning" }); return; } setLoading(true); try { const response = await auth().signInWithEmailAndPassword(email, password); const user = response.user; // Verify if the user has the 'admin' role in Firestore const userDoc = await firestore().collection('users').doc(user.uid).get(); if (userDoc.exists && userDoc.data()?.role === 'admin') { const userData = userDoc.data(); dispatch(setUser({ uid: user.uid, phoneNumber: user.phoneNumber, ...userData })); setLoading(false); showMessage({ message: "Admin Login Successful", type: "success" }); // Navigation is handled by AppNavigator's auth state listener } else { // Not an admin or user not found in 'users' collection await auth().signOut(); // Log out the non-admin user setLoading(false); showMessage({ message: "Access Denied", description: "You do not have admin privileges.", type: "danger" }); } } catch (error: any) { setLoading(false); console.error("Admin Login error:", error); showMessage({ message: "Admin Login Failed", description: error.message, type: "danger", }); } }; return ( Admin Login {loading ? ( ) : ( Login )} {/* Optional: Link back to User Login */} navigation.navigate('Login')} > User Login ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, backgroundColor: '#f7f7f7', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 30, color: '#333', }, input: { width: '100%', height: 50, borderColor: '#ccc', borderWidth: 1, borderRadius: 8, paddingHorizontal: 15, marginBottom: 15, backgroundColor: '#fff', fontSize: 16, }, button: { width: '100%', backgroundColor: '#3f51b5', padding: 15, borderRadius: 8, alignItems: 'center', marginTop: 10, }, buttonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, userLink: { marginTop: 20, }, userLinkText: { color: '#3f51b5', fontSize: 16, textDecorationLine: 'underline', }, }); export default AdminLoginScreen; import React from 'react'; import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; import auth from '@react-native-firebase/auth'; import { showMessage } from 'react-native-flash-message'; // Define the types for your navigation stack type AdminStackParamList = { AdminDashboard: undefined; ManageAstrologers: undefined; ManageUsers: undefined; ManageProducts: undefined; ViewOrders: undefined; Login: undefined; // To navigate back to login after logout }; type AdminDashboardScreenNavigationProp = StackNavigationProp; const AdminDashboardScreen = () => { const navigation = useNavigation(); const handleLogout = async () => { try { await auth().signOut(); showMessage({ message: "Admin logged out", type: "success", }); // Navigation is handled by AppNavigator's auth state listener } catch (error: any) { console.error("Admin logout error:", error); showMessage({ message: "Logout failed", description: error.message, type: "danger", }); } }; return ( Admin Dashboard navigation.navigate('ManageAstrologers')} > Manage Astrologers navigation.navigate('ManageUsers')} > Manage Users navigation.navigate('ManageProducts')} > Manage Products navigation.navigate('ViewOrders')} > View Orders {/* Add other admin management options */} Logout ); }; const styles = StyleSheet.create({ container: { flexGrow: 1, padding: 20, backgroundColor: '#f7f7f7', alignItems: 'center', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 30, color: '#333', }, dashboardButton: { width: '100%', backgroundColor: '#3f51b5', padding: 15, borderRadius: 8, alignItems: 'center', marginBottom: 15, }, buttonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, logoutButton: { backgroundColor: '#f44336', // Red color for logout marginTop: 30, }, }); export default AdminDashboardScreen; import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, Modal, TextInput, Button, Image, ScrollView } from 'react-native'; import firestore from '@react-native-firebase/firestore'; import storage from '@react-native-firebase/storage'; import { Astrologer } from '../../redux/slices/astrologerSlice'; // Import Astrologer type import { showMessage } from 'react-native-flash-message'; import ImagePicker from 'react-native-image-picker'; // Or use react-native-image-crop-picker const ManageAstrologersScreen = () => { const [astrologers, setAstrologers] = useState([]); const [loading, setLoading] = useState(true); const [modalVisible, setModalVisible] = useState(false); const [currentAstrologer, setCurrentAstrologer] = useState(null); // Form states const [name, setName] = useState(''); const [about, setAbout] = useState(''); const [experience, setExperience] = useState(''); const [skills, setSkills] = useState(''); // Comma separated string const [photoURL, setPhotoURL] = useState(''); // Local URI or remote URL const [uploadingPhoto, setUploadingPhoto] = useState(false); useEffect(() => { const fetchAstrologers = async () => { setLoading(true); try { const snapshot = await firestore().collection('astrologers').get(); const astrologersList: Astrologer[] = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() as Omit })); setAstrologers(astrologersList); } catch (error: any) { console.error("Error fetching astrologers:", error); showMessage({ message: "Failed to load astrologers", description: error.message, type: "danger" }); } finally { setLoading(false); } }; fetchAstrologers(); }, []); const openAddModal = () => { setCurrentAstrologer(null); resetForm(); setModalVisible(true); }; const openEditModal = (astrologer: Astrologer) => { setCurrentAstrologer(astrologer); setName(astrologer.name); setAbout(astrologer.about || ''); setExperience(astrologer.experience || ''); setSkills(astrologer.skills?.join(', ') || ''); setPhotoURL(astrologer.photoURL || ''); // Set existing photo URL setModalVisible(true); }; const resetForm = () => { setName(''); setAbout(''); setExperience(''); setSkills(''); setPhotoURL(''); }; const handleChoosePhoto = () => { const options = { noData: true, mediaType: 'photo', }; ImagePicker.launchImageLibrary(options, (response) => { if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); showMessage({ message: "Image picker error", description: response.error, type: "danger", }); } else if (response.assets && response.assets.length > 0) { const source = response.assets[0]; if (source.uri) { setPhotoURL(source.uri); // Set local URI for preview } } }); }; const handleSaveAstrologer = async () => { if (!name || !about || !experience || !skills) { showMessage({ message: "Please fill all required fields", type: "warning" }); return; } setLoading(true); setUploadingPhoto(true); // Indicate photo upload is starting let finalPhotoURL = photoURL; // Upload new photo if a local URI is set if (photoURL && photoURL.startsWith('file://')) { try { const filename = photoURL.substring(photoURL.lastIndexOf('/') + 1); const storageRef = storage().ref(`astrologer_photos/${currentAstrologer?.id || 'new'}/${filename}`); const task = storageRef.putFile(photoURL); await new Promise((resolve, reject) => { task.on('state_changed', snapshot => { /* progress can be added here */ }, error => { console.error("Photo upload error:", error); showMessage({ message: "Photo upload failed", description: error.message, type: "danger" }); setUploadingPhoto(false); reject(error); // Reject the promise }, () => { // Upload completed successfully storageRef.getDownloadURL().then(downloadURL => { finalPhotoURL = downloadURL; setUploadingPhoto(false); resolve(null); // Resolve the promise }).catch(err => { console.error("Get download URL error:", err); showMessage({ message: "Failed to get photo URL", description: err.message, type: "danger" }); setUploadingPhoto(false); reject(err); }); } ); }); } catch (error) { setLoading(false); return; // Stop the save process if photo upload failed } } else { setUploadingPhoto(false); // No photo upload needed } try { const astrologerData = { name, about, experience, skills: skills.split(',').map(s => s.trim()).filter(s => s), // Split skills by comma photoURL: finalPhotoURL, rating: currentAstrologer?.rating || 0, // Keep existing rating or default to 0 followers: currentAstrologer?.followers || 0, // Keep existing followers or default to 0 servedPeople: currentAstrologer?.servedPeople || 0, // Keep existing servedPeople or default to 0 // Add other fields as needed }; if (currentAstrologer) { // Update existing astrologer await firestore().collection('astrologers').doc(currentAstrologer.id).update(astrologerData); setAstrologers(astrologers.map(astro => astro.id === currentAstrologer.id ? { ...astro, ...astrologerData, id: astro.id } : astro)); showMessage({ message: "Astrologer updated successfully", type: "success" }); } else { // Add new astrologer const newAstrologerRef = firestore().collection('astrologers').doc(); const newAstrologer = { id: newAstrologerRef.id, ...astrologerData }; await newAstrologerRef.set(newAstrologer); setAstrologers([...astrologers, newAstrologer]); showMessage({ message: "Astrologer added successfully", type: "success" }); } setModalVisible(false); resetForm(); } catch (error: any) { console.error("Error saving astrologer:", error); showMessage({ message: currentAstrologer ? "Failed to update astrologer" : "Failed to add astrologer", description: error.message, type: "danger", }); } finally { setLoading(false); } }; const handleDeleteAstrologer = async (id: string) => { Alert.alert( "Confirm Delete", "Are you sure you want to delete this astrologer?", [ { text: "Cancel", style: "cancel" }, { text: "Delete", style: "destructive", onPress: async () => { setLoading(true); try { await firestore().collection('astrologers').doc(id).delete(); setAstrologers(astrologers.filter(astro => astro.id !== id)); showMessage({ message: "Astrologer deleted successfully", type: "success" }); } catch (error: any) { console.error("Error deleting astrologer:", error); showMessage({ message: "Failed to delete astrologer", description: error.message, type: "danger" }); } finally { setLoading(false); } }, }, ] ); }; const renderAstrologerItem = ({ item }: { item: Astrologer }) => ( {item.name} Exp: {item.experience || 'N/A'} | Rating: {item.rating?.toFixed(1) || 'N/A'} openEditModal(item)}> Edit handleDeleteAstrologer(item.id)}> Delete ); return ( Manage Astrologers Add New Astrologer {loading ? ( ) : ( item.id} contentContainerStyle={styles.listContent} ListEmptyComponent={() => ( No astrologers found. )} /> )} {/* Add/Edit Astrologer Modal */} setModalVisible(false)} > {currentAstrologer ? 'Edit Astrologer' : 'Add New Astrologer'} {uploadingPhoto && } {/* Add fields for rating, followers, servedPeople if editable by admin */} {loading || uploadingPhoto ? ( ) : ( Save Astrologer )} setModalVisible(false)} disabled={loading || uploadingPhoto} > Cancel ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f7f7f7', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20, color: '#333', textAlign: 'center', }, addButton: { backgroundColor: '#4caf50', padding: 15, borderRadius: 8, alignItems: 'center', marginBottom: 20, }, addButtonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, listContent: { paddingBottom: 20, }, astrologerItem: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', borderRadius: 8, padding: 15, marginBottom: 10, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1, }, astrologerItemImage: { width: 50, height: 50, borderRadius: 25, marginRight: 15, backgroundColor: '#ccc', }, astrologerItemInfo: { flex: 1, }, astrologerItemName: { fontSize: 16, fontWeight: 'bold', color: '#333', marginBottom: 4, }, astrologerItemDetails: { fontSize: 14, color: '#666', }, astrologerItemActions: { flexDirection: 'row', }, actionButtonText: { fontSize: 14, color: '#3f51b5', marginLeft: 15, }, deleteButtonText: { color: '#f44336', }, emptyList: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, emptyListText: { fontSize: 16, color: '#666', textAlign: 'center', }, modalContainer: { flexGrow: 1, padding: 20, backgroundColor: '#f7f7f7', justifyContent: 'center', }, modalTitle: { fontSize: 20, fontWeight: 'bold', marginBottom: 20, color: '#333', textAlign: 'center', }, modalAstrologerImage: { width: 100, height: 100, borderRadius: 50, alignSelf: 'center', marginBottom: 20, backgroundColor: '#ccc', }, uploadingIndicator: { position: 'absolute', alignSelf: 'center', top: 50, // Center vertically over the image }, input: { width: '100%', height: 50, borderColor: '#ccc', borderWidth: 1, borderRadius: 8, paddingHorizontal: 15, marginBottom: 15, backgroundColor: '#fff', fontSize: 16, }, textArea: { height: 100, textAlignVertical: 'top', paddingTop: 15, }, saveButton: { backgroundColor: '#3f51b5', padding: 15, borderRadius: 8, alignItems: 'center', marginTop: 20, marginBottom: 10, }, saveButtonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, cancelButton: { backgroundColor: '#999', padding: 15, borderRadius: 8, alignItems: 'center', }, cancelButtonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, }); export default ManageAstrologersScreen; import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, Modal, TextInput, Button, Alert } from 'react-native'; import firestore from '@react-native-firebase/firestore'; import { showMessage } from 'react-native-flash-message'; import moment from 'moment'; // Define a type for User data (matching the structure in Firestore) interface UserData { uid: string; phoneNumber: string; name?: string; gender?: string; dateOfBirth?: any; // Firebase Timestamp timeOfBirth?: string; placeOfBirth?: string; photoURL?: string; role?: 'user' | 'admin'; walletBalance?: number; createdAt?: any; // Firebase Timestamp isDisabled?: boolean; // Add disabled status } const ManageUsersScreen = () => { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [modalVisible, setModalVisible] = useState(false); const [currentUser, setCurrentUser] = useState(null); // Filter states (Placeholder) const [filter, setFilter] = useState('all'); // 'all', 'today', '7days', '30days' const [searchTerm, setSearchTerm] = useState(''); // For searching users useEffect(() => { const fetchUsers = async () => { setLoading(true); try { let query: firestore.Query = firestore().collection('users'); // Apply filters (This is a simplified example, date filtering is complex in Firestore client-side) // For real date filtering, you'd typically use server-side logic (e.g., Firebase Functions) // or structure your data differently. // This client-side filter example is basic and might not be efficient for large datasets. const now = moment(); if (filter === 'today') { // This client-side filter is illustrative; a proper solution needs backend // query = query.where('createdAt', '>=', firestore.Timestamp.fromDate(now.startOf('day').toDate())); // query = query.where('createdAt', '<=', firestore.Timestamp.fromDate(now.endOf('day').toDate())); } else if (filter === '7days') { // query = query.where('createdAt', '>=', firestore.Timestamp.fromDate(now.subtract(7, 'days').startOf('day').toDate())); } else if (filter === '30days') { // query = query.where('createdAt', '>=', firestore.Timestamp.fromDate(now.subtract(30, 'days').startOf('day').toDate())); } const snapshot = await query.get(); let usersList: UserData[] = snapshot.docs.map(doc => ({ uid: doc.id, ...doc.data() as Omit, dateOfBirth: doc.data().dateOfBirth, // Ensure timestamp is included createdAt: doc.data().createdAt, // Ensure timestamp is included })); // Apply client-side search filter (basic) if (searchTerm) { const lowerSearchTerm = searchTerm.toLowerCase(); usersList = usersList.filter(user => user.name?.toLowerCase().includes(lowerSearchTerm) || user.phoneNumber?.includes(searchTerm) || user.uid.toLowerCase().includes(lowerSearchTerm) ); } // Apply client-side date filter if Firestore query wasn't used (less efficient) if (filter !== 'all') { const filterDate = moment(); if (filter === 'today') filterDate.startOf('day'); else if (filter === '7days') filterDate.subtract(7, 'days').startOf('day'); else if (filter === '30days') filterDate.subtract(30, 'days').startOf('day'); usersList = usersList.filter(user => user.createdAt && moment(user.createdAt.toDate()).isSameOrAfter(filterDate) ); } setUsers(usersList); } catch (error: any) { console.error("Error fetching users:", error); showMessage({ message: "Failed to load users", description: error.message, type: "danger" }); } finally { setLoading(false); } }; fetchUsers(); }, [filter, searchTerm]); // Re-fetch when filter or search term changes const openUserModal = (user: UserData) => { setCurrentUser(user); setModalVisible(true); }; const handleDisableUser = async (user: UserData) => { Alert.alert( user.isDisabled ? "Enable User" : "Disable User", `Are you sure you want to ${user.isDisabled ? 'enable' : 'disable'} ${user.name || user.phoneNumber}?`, [ { text: "Cancel", style: "cancel" }, { text: user.isDisabled ? "Enable" : "Disable", style: user.isDisabled ? "default" : "destructive", onPress: async () => { setLoading(true); try { await firestore().collection('users').doc(user.uid).update({ isDisabled: !user.isDisabled, }); // Update local state setUsers(users.map(u => u.uid === user.uid ? { ...u, isDisabled: !u.isDisabled } : u)); showMessage({ message: `User ${user.isDisabled ? 'enabled' : 'disabled'} successfully`, type: "success" }); setModalVisible(false); // Close modal after action } catch (error: any) { console.error("Error disabling/enabling user:", error); showMessage({ message: `Failed to ${user.isDisabled ? 'enable' : 'disable'} user`, description: error.message, type: "danger" }); } finally { setLoading(false); } }, }, ] ); }; const renderUserItem = ({ item }: { item: UserData }) => ( openUserModal(item)}> {item.name || 'N/A'} {item.phoneNumber} Wallet: ${item.walletBalance?.toFixed(2) || '0.00'} Joined: {item.createdAt ? moment(item.createdAt.toDate()).format('YYYY-MM-DD') : 'N/A'} {item.isDisabled && ( Disabled )} ); return ( Manage Users {/* Filter and Search (Placeholder UI) */} {/* Basic Filter Buttons (Client-side filtering might be slow) */} {/*