CircleCollect/circle-collect
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bank details update done

Browse Source
This commit is contained in:
Abin Toppo
2025-09-23 11:48:11 +05:30
parent db268c84ee ff8c0439f6
commit 8954129e23
20 changed files with 1178 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
android/app/src/main/AndroidManifest.xml
+6 -4
View File
@@ -19,7 +19,7 @@
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
@@ -27,9 +27,11 @@
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https"
android:host="api.godemo.in"
android:pathPrefix="/EProcurementSB" />
<data android:scheme="myapp" android:host="invite"/>
<data android:scheme="http"
android:host="192.168.1.19"
android:pathPrefix="/invite" />
</intent-filter>
</activity>
src/components/JoinedGroupCard.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ interface JoinedGroup {
}
interface JoinedGroupCardProps {
item: JoinedGroup;
item: JoinedGroup | any;
}
// Helper function to format dates
src/components/common/Custom.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ import colors from "../colors";
type CustomInputProps = TextInputProps & {
label?: string;
icon?: IoniconsIconName;
error:string
error?:string
};
const CustomInput: React.FC<CustomInputProps> = ({
src/components/common/Header.tsx
+62
View File
@@ -0,0 +1,62 @@
import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { Ionicons } from "@react-native-vector-icons/ionicons"
type HeaderProps = {
title: string;
showBack?: boolean; // optional, default true
onBackPress?: () => void; // optional custom back action
};
const Header: React.FC<HeaderProps> = ({
title,
showBack = true,
onBackPress,
}) => {
const navigation = useNavigation();
const handleBack = () => {
if (onBackPress) {
onBackPress();
} else {
navigation.goBack();
}
};
return (
<View style={styles.header}>
{showBack && (
<TouchableOpacity onPress={handleBack} style={styles.backButton}>
<Ionicons name="arrow-back" size={24} color="#000" />
</TouchableOpacity>
)}
<Text style={styles.headerTitle}>{title}</Text>
</View>
);
};
export default Header;
const styles = StyleSheet.create({
header: {
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: "#fff",
shadowColor: "#000",
shadowOpacity: 0.05,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
elevation: 3,
},
backButton: {
marginRight: 12,
},
headerTitle: {
fontSize: 18,
fontWeight: "600",
color: "#000",
},
});
src/navigation/AppNavigator.tsx
+25 -24
View File
@@ -1,7 +1,6 @@
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { View, Text, Button } from "react-native";
import LoginScreen from "../screens/LoginScreen";
import OtpVerificationScreen from "../screens/OtpVarificationScreen";
import SplashScreen from "../screens/SplashScreen";
@@ -11,48 +10,47 @@ import GroupCreation from "../screens/GroupCreation";
import GroupReview from "../screens/GroupReview";
import BottomTabs from "./BottomTabs";
import BecomeOrg from "../screens/profile/BecomeOrg";
import EditGroupScreen from "../screens/management/EditGroupScreen";
import YourContacts from "../screens/management/YourContacts";
import Transaction from "../screens/profile/Transaction";
import GroupDetails from "../screens/home/user-home/GroupDetails";
import EditGroupScreen from "../screens/management/EditGroupScreen";
import EditBankDetails from "../screens/profile/EditBankDetails";
const Stack = createNativeStackNavigator();
export type RootStackParamList = {
Splash: undefined;
Login: undefined;
OtpVarify: { mobile: string };
Home: undefined
HomeTabs: undefined
splash: undefined
OrganizerRegister: undefined
Home: undefined;
HomeTabs: undefined;
OrganizerRegister: undefined;
Profile: undefined;
GroupCreation: undefined;
GroupReview: undefined;
EditGroup: { groupId: string}
EditGroup: { groupId: string | number };
GroupDetails: { groupId: string | number };
BecomeOrg: undefined;
YourContacts: undefined;
Transaction: undefined;
EditBankDetails: { currentBankName: string | null; currentAccountNumber: string | null; currentBranchCode: string | null };
};
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
<Button
title="Go to Profile"
/>
</View>
);
}
const Stack = createNativeStackNavigator<RootStackParamList>();
export default function AppNavigator() {
const linking = {
prefixes: ["myapp://", "https://api.godemo.in"], // supports both
prefixes: [
"myapp://", // A custom scheme for internal or test links.
"https://192.168.1.19" // Your production domain for verified App Links.
],
config: {
screens: {
Profile: "EProcurementSB", // dynamic route
Profile: "invite",
},
},
};
return (
<NavigationContainer linking={linking} >
<NavigationContainer linking={linking}>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
<Stack.Screen name="Home" component={BottomTabs} options={{ headerShown: false }} />
@@ -64,7 +62,10 @@ export default function AppNavigator() {
<Stack.Screen name="GroupReview" component={GroupReview} options={{ headerShown: false }} />
<Stack.Screen name="BecomeOrg" component={BecomeOrg} options={{ headerShown: false }} />
<Stack.Screen name="YourContacts" component={YourContacts} options={{ headerShown: false }} />
<Stack.Screen name="Transaction" component={Transaction} options={{ headerShown: false }} />
<Stack.Screen name="GroupDetails" component={GroupDetails} options={{ headerShown: false }} />
<Stack.Screen name="EditGroup" component={EditGroupScreen} options={{ headerShown: false }} />
<Stack.Screen name="EditBankDetails" component={EditBankDetails} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
);
src/screens/GroupScreen.tsx
+55 -41
View File
@@ -11,6 +11,7 @@ import {
Image,
ScrollView,
Alert,
RefreshControl,
} from "react-native";
import { FAB } from "react-native-paper";
import { Ionicons } from "@react-native-vector-icons/ionicons";
@@ -20,7 +21,7 @@ import { StackNavigationProp } from "@react-navigation/stack";
import { RootStackParamList } from "../navigation/AppNavigator";
import AppView from "../components/AppView";
import { apiCall } from "../utils/ApiHelper";
import { BASE_URL, JOIN_GROUP_URL, PUBLIC_GROUPS_URL } from "../utils/ApiUrls";
import { BASE_URL, JOIN_GROUP_URL, PUBLIC_GROUPS_URL, PUT_USER_STATUS } from "../utils/ApiUrls";
import colors from "../components/colors";
import { ApiResponse } from "./home/UserProfileStatus";
import * as Keychain from "react-native-keychain";
@@ -92,6 +93,7 @@ export default function GroupScreen() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [role, setRole] = useState<string | null>(null);
const [refreshing, setRefreshing] = useState<boolean>(false)
const fetchGroups = async () => {
if (loading) return;
@@ -140,56 +142,64 @@ export default function GroupScreen() {
Alert.alert("Error", "An unexpected error occurred.");
}
};
const userStatus = async () => {
try {
const credentials = await Keychain.getGenericPassword();
if (!credentials) {
Alert.alert("Error", "You are not logged in");
return;
}
const token = credentials.password;
const userStatus = async () => {
try {
const credentials = await Keychain.getGenericPassword();
if (!credentials) {
Alert.alert("Error", "You are not logged in");
return;
}
const token = credentials.password;
setLoading(true);
setError(null);
const response = await fetch(`${BASE_URL}user/profile/status`, {
method: "GET",
headers: {
Accept: "*/*",
Authorization: `Bearer ${token}`,
},
});
setLoading(true);
setError(null);
const response = await fetch(PUT_USER_STATUS, {
method: "GET",
headers: {
Accept: "*/*",
Authorization: `Bearer ${token}`,
},
});
const json: ApiResponse = await response.json();
const json: ApiResponse = await response.json();
console.log("👤 Profile Status Response:", json);
if (json.status === "success") {
setRole(json.data.role);
console.log("👤 Profile Status Response:", json);
if (json.status === "success") {
setRole(json.data.role);
if (json.data.profileStatus === false) {
if (json.data.profileStatus === false) {
}
} else {
setError(json.message || "Failed to fetch status");
}
} catch (err) {
setError("Something went wrong. Please try again.");
} finally {
setLoading(false);
}
};
} else {
setError(json.message || "Failed to fetch status");
}
} catch (err) {
setError("Something went wrong. Please try again.");
} finally {
setLoading(false);
}
};
useFocusEffect(
useCallback(() => {
userStatus();
}, [])
);
useFocusEffect(
useCallback(() => {
userStatus();
}, [])
);
const handleViewGroup = (group: Group) => {
// navigation.navigate('GroupDetails', { group });
Alert.alert("View Group", `Viewing details for ${group.groupName}`);
};
const onRefresh = () => {
setRefreshing(true)
fetchGroups()
setTimeout(() => {
setRefreshing(false)
}, 20000);
}
const renderContent = () => {
let data: Group[];
switch (activeTab) {
@@ -226,6 +236,10 @@ export default function GroupScreen() {
)}
columnWrapperStyle={isGridView ? { justifyContent: 'space-between' } : null}
contentContainerStyle={{ paddingBottom: 150 }}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
ListFooterComponent={<ActivityIndicator size={'large'} color={colors.Group}/>}
/>
);
};
@@ -265,7 +279,7 @@ export default function GroupScreen() {
<TouchableOpacity key={tab} style={[styles.segmentButton, activeTab === tab && styles.segmentButtonActive]} onPress={() => setActiveTab(tab)}>
<Text style={[styles.segmentText, activeTab === tab && styles.segmentTextActive]}>{tab}</Text>
</TouchableOpacity>
))) }
)))}
</View>
<TouchableOpacity onPress={() => setIsGridView(!isGridView)} style={styles.layoutToggleButton}>
<Ionicons name={isGridView ? "list" : "grid"} size={22} color="#555" />
@@ -289,7 +303,7 @@ const styles = StyleSheet.create({
searchContainer: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', borderRadius: 12, paddingHorizontal: 10, elevation: 2, marginVertical: 20 },
searchIcon: { marginRight: 8 },
searchInput: { flex: 1, height: 45, fontSize: 16, color: '#333' },
sectionTitle: { fontSize: 20, fontWeight: 'bold', color: '#333', marginBottom: 12, paddingHorizontal: 16 },
sectionTitle: { fontSize: 20, fontWeight: 'bold', color: colors.Group, marginBottom: 12, paddingHorizontal: 16 },
featuredList: { paddingLeft: 16, marginBottom: 20 },
featuredCard: { width: width * 0.45, marginRight: 15, backgroundColor: '#fff', borderRadius: 12, elevation: 3, overflow: 'hidden' },
featuredImage: { width: '100%', height: 100 },
src/screens/LoginScreen.tsx
+94 -76
View File
@@ -42,8 +42,8 @@ export default function LoginScreen() {
const fade = useRef(new Animated.Value(0)).current;
const slide = useRef(new Animated.Value(24)).current;
const ctaScale = useRef(new Animated.Value(1)).current;
const user = useSelector((state:any) => state.user)
console.log("current user ----",user)
const user = useSelector((state: any) => state.user)
console.log("current user ----", user)
useEffect(() => {
Animated.parallel([
Animated.timing(fade, { toValue: 1, duration: 600, useNativeDriver: true }),
@@ -51,91 +51,109 @@ export default function LoginScreen() {
]).start();
}, []);
const handleContinue = async () => {
if (mobile.length === 10) {
setLoading(true);
try {
const res = await axios.get(LOGIN_URL + mobile);
console.log("OTP sent response:", res)
if (res.data.statusCode === 200) {
navigation.navigate("OtpVarify", { mobile });
}
} catch (error) {
console.error("Login error:", error);
Alert.alert("Error", "Failed to send OTP. Please try again.");
} finally {
setLoading(false);
const handleContinue = async () => {
if (mobile.length === 10) {
setLoading(true);
try {
console.log("LOGIN_URL console:", LOGIN_URL, "mobile:", mobile);
const res = await axios.get(LOGIN_URL, {
params: { mobile },
});
console.log("OTP sent response:", res.data);
if (res.data.statusCode === 200) {
navigation.navigate("OtpVarify", { mobile });
} else {
Alert.alert("Error", res.data.message || "Failed to send OTP");
}
} else {
Alert.alert("Please enter a valid 10-digit mobile number");
} catch (error: any) {
console.error("Login error:", error);
if (axios.isAxiosError(error)) {
console.log("Error message:", error.message);
console.log("Error response:", error.response?.data);
console.log("Error status:", error.response?.status);
console.log("Error headers:", error.response?.headers);
} else {
console.log("Unexpected error:", error);
}
Alert.alert("Error", "Failed to send OTP. Please try again.");
} finally {
setLoading(false);
}
};
} else {
Alert.alert("Please enter a valid 10-digit mobile number");
}
};
const onPressIn = () =>
Animated.spring(ctaScale, {
toValue: 0.97,
useNativeDriver: true,
speed: 20,
bounciness: 0,
}).start();
const onPressOut = () =>
Animated.spring(ctaScale, {
toValue: 1,
useNativeDriver: true,
speed: 20,
bounciness: 6,
}).start();
const onPressIn = () =>
Animated.spring(ctaScale, {
toValue: 0.97,
useNativeDriver: true,
speed: 20,
bounciness: 0,
}).start();
return (
<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS === "ios" ? "padding" : undefined}
>
<StatusBar barStyle="dark-content" backgroundColor={theme.background} />
const onPressOut = () =>
Animated.spring(ctaScale, {
toValue: 1,
useNativeDriver: true,
speed: 20,
bounciness: 6,
}).start();
{/* Top content */}
<View style={styles.topSection}>
<Text style={styles.brand}>CircleCollect</Text>
<Text style={styles.title}>Welcome Back 👋</Text>
<Text style={styles.subtitle}>
Enter your mobile number to sign in and continue.
</Text>
return (
<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS === "ios" ? "padding" : undefined}
>
<StatusBar barStyle="dark-content" backgroundColor={theme.background} />
<Animated.View
style={[
styles.inputWrapper,
{ opacity: fade, transform: [{ translateY: slide }] },
]}
>
<CustomInput
label="Mobile Number"
placeholder="Enter Mobile Number"
value={mobile}
onChangeText={setMobile}
keyboardType="phone-pad"
maxLength={10}
icon="call-outline"
/>
</Animated.View>
</View>
{/* Top content */}
<View style={styles.topSection}>
<Text style={styles.brand}>CircleCollect</Text>
<Text style={styles.title}>Welcome Back 👋</Text>
<Text style={styles.subtitle}>
Enter your mobile number to sign in and continue.
</Text>
{/* Bottom Button */}
<Animated.View
style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
style={[
styles.inputWrapper,
{ opacity: fade, transform: [{ translateY: slide }] },
]}
>
<CustomButton title={loading ? "Loading..." : "Continue"} onPress={handleContinue} icon="arrow-forward" />
<Text style={styles.footerText}>
By continuing, you agree to our{" "}
<Text style={{ color: theme.accent, fontWeight: "600" }}>
Terms & Privacy
</Text>
</Text>
<CustomInput
label="Mobile Number"
placeholder="Enter Mobile Number"
value={mobile}
onChangeText={setMobile}
keyboardType="phone-pad"
maxLength={10}
icon="call-outline"
/>
</Animated.View>
</KeyboardAvoidingView>
);
</View>
{/* Bottom Button */}
<Animated.View
style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
>
<CustomButton title={loading ? "Loading..." : "Continue"} onPress={handleContinue} icon="arrow-forward" />
<Text style={styles.footerText}>
By continuing, you agree to our{" "}
<Text style={{ color: theme.accent, fontWeight: "600" }}>
Terms & Privacy
</Text>
</Text>
</Animated.View>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
src/screens/SplashScreen.tsx
+87 -81
View File
@@ -1,101 +1,107 @@
import React, { useEffect, useRef, useState } from "react";
import { View, StyleSheet, ActivityIndicator, Animated, Alert } from "react-native";
import React, { useEffect, useRef } from "react";
import { View, Text, StyleSheet, ActivityIndicator, Animated, Alert, ToastAndroid } from "react-native";
import * as Keychain from "react-native-keychain";
import { useNavigation } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";
import { RootStackParamList } from "../navigation/AppNavigator";
import { PROFILE_URL } from "../utils/ApiUrls";
import { useDispatch } from "react-redux";
// --- Import your project files ---
import { RootStackParamList } from "../navigation/AppNavigator"; // Adjust path
import { BASE_URL } from "../utils/ApiUrls";
import { fetchUserProfile } from "../utils/HelperFunction";
import { setUserData } from "../redux/userSlice";
import { clearUser, setUserData } from "../redux/userSlice";
import colors from "../components/colors";
import { ApiResponse } from "./home/UserProfileStatus";
import { StackNavigationProp } from "@react-navigation/stack";
const SplashScreen = () => {
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
const dispatch = useDispatch();
const fadeAnim = useRef(new Animated.Value(1)).current;
// State to track the outcome of initialization
const [isReady, setIsReady] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const fetchUserProfile = async (dispatch: any, navigation: any) => {
try {
const credentials = await Keychain.getGenericPassword();
if (!credentials) {
return null;
}
const token = credentials.password;
const response = await fetch(PROFILE_URL, {
method: "GET",
headers: {
Accept: "*/*",
Authorization: `Bearer ${token}`,
},
});
const result = await response.json();
if (response.status === 200 && result.status === "success") {
// Save user data in Redux
dispatch(
setUserData({
id: result.data.id,
userId: result.data.userId,
username: result.data.username,
firstName: result.data.firstName,
lastName: result.data.lastName,
gender: result.data.gender,
mobile: result.data.mobile,
email: result.data.email,
address: result.data.address,
bankAccountNumber: result.data.bankAccountNumber,
bankName: result.data.bankName,
branchCode: result.data.branchCode,
profilePicture: result.data.filePath,
filePath: result.data.filePath,
imageBlob: result.data.imageBlob,
role: result.data.role,
organizerId: result.data.organizerId,
organizerStatus: result.data.organizerStatus,
profileStatus: true,
})
);
return result.data.role;
} else if (response.status === 401 || result.status === 401) {
// Unauthorized: reset credentials and navigate to login
await Keychain.resetGenericPassword();
dispatch(clearUser());
ToastAndroid.show(result.message || "Session expired. Please login again.", ToastAndroid.SHORT);
navigation.replace("Login");
return null;
} else {
console.warn("Unexpected response:", result);
return null;
}
} catch (error) {
console.error("❌ Error fetching profile:", error);
ToastAndroid.show("Failed to fetch profile. Please try again.", ToastAndroid.SHORT);
return null;
}
};
useEffect(() => {
// A single function to handle all startup tasks
const initializeApp = async () => {
try {
// 1. Check for stored credentials
const credentials = await Keychain.getGenericPassword();
if (!credentials) {
console.log("No credentials found. User needs to log in.");
setIsLoggedIn(false);
return; // Stop here if not logged in
}
const startSplash = async () => {
const role = await fetchUserProfile(dispatch, navigation);
console.log("🔑 Credentials found. Proceeding with user data fetches.");
const { password: token } = credentials;
// 2. Fetch all necessary data in parallel for efficiency
const [statusResponse, userProfile] = await Promise.all([
fetch(`${BASE_URL}user/profile/status`, {
method: "GET",
headers: {
Accept: "*/*",
Authorization: `Bearer ${token}`,
},
}),
fetchUserProfile(dispatch), // Assuming fetchUserProfile handles its own errors and dispatches to Redux
]);
// 3. Process the profile status response
if (!statusResponse.ok) {
throw new Error(`Server responded with status: ${statusResponse.status}`);
}
const statusJson: ApiResponse = await statusResponse.json();
console.log("👤 Profile Status Response:", statusJson);
if (statusJson.status === "success") {
// You could dispatch more data here if needed
// dispatch(setUserData(statusJson.data));
setIsLoggedIn(true);
Animated.timing(fadeAnim, {
toValue: 0,
duration: 1500,
useNativeDriver: true,
delay: 1500,
}).start(() => {
// Navigate based on role
if (!role) {
navigation.replace("Login");
} else if (role === "USER") {
navigation.replace("Home");
} else if (role === "ORGANIZER") {
navigation.replace("Home"); // Replace with Organizer screen if you have one
} else {
throw new Error(statusJson.message || "Failed to verify user status.");
navigation.replace("Login");
}
} catch (error) {
console.error("Initialization failed:", error);
Alert.alert("Error", "Your session may have expired. Please log in again.");
setIsLoggedIn(false); // Ensure login status is false on any error
} finally {
// 4. Signal that all tasks are done, whether they succeeded or failed
setIsReady(true);
}
});
};
// Trigger the animation, and run initialization logic after it completes
Animated.timing(fadeAnim, {
toValue: 0,
duration: 1500,
useNativeDriver: true,
delay: 1500,
}).start(() => {
initializeApp();
});
}, [fadeAnim, dispatch]);
// This effect handles the final navigation step once everything is ready
useEffect(() => {
if (isReady) {
if (isLoggedIn) {
navigation.replace("Home");
} else {
navigation.replace("Login");
}
}
}, [isReady, isLoggedIn, navigation]);
startSplash();
}, [navigation, fadeAnim, dispatch]);
return (
<View style={styles.container}>
src/screens/home/GroupList.tsx
+1 -1
View File
@@ -85,7 +85,7 @@ const GroupList = () => {
const res = await fetch(`${BASE_URL}fund/getAll/my/groups`, {
headers: { Accept: "*/*", Authorization: `Bearer ${token}` },
});
console.log("my groups response", res);
console.log("my groups response : ", res);
const data = await res.json();
setGroups(data.data || []);
setFilteredGroups(data.data || []);
src/screens/home/Home.tsx
+4 -7
View File
@@ -11,10 +11,10 @@ import {
import AppView from "../../components/AppView";
import UserProfileStatus from "./UserProfileStatus";
import colors from "../../components/colors";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import GroupsTabs from "./GroupsTabs";
import { useSelector } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import UserHome from "./user-home/UserHome";
// Enable animation for Android
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -29,11 +29,7 @@ const Home = () => {
<View style={styles.header}>
<Text style={styles.greeting}>Hello, {user.firstName} {user.lastName}👋</Text>
<TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
{/* <Ionicons
name="person-circle-outline"
size={40}
color={colors.primary}
/> */}
<Image
source={
user.imageBlob
@@ -45,7 +41,8 @@ const Home = () => {
</View>
{/* Status */}
<UserProfileStatus />
<GroupsTabs />
{user?.role === "USER" ? <UserHome /> :
<GroupsTabs />}
</AppView>
);
};
src/screens/home/UserProfileStatus.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import {
} from "react-native";
import * as Keychain from "react-native-keychain";
import { useFocusEffect, useNavigation } from "@react-navigation/native";
import { BASE_URL } from "../../utils/ApiUrls";
import { BASE_URL, PUT_USER_STATUS } from "../../utils/ApiUrls";
import colors from "../../components/colors";
export type ApiResponse = {
@@ -44,7 +44,7 @@ const UserProfileStatus: React.FC = () => {
setLoading(true);
setError(null);
const response = await fetch(`${BASE_URL}user/profile/status`, {
const response = await fetch(PUT_USER_STATUS, {
method: "GET",
headers: {
Accept: "*/*",
src/screens/home/user-home/GroupDetails.tsx
+248
View File
@@ -0,0 +1,248 @@
import React, { useRef, useEffect } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
FlatList,
Animated,
} from "react-native";
import { useRoute } from "@react-navigation/native";
import AppView from "../../../components/AppView";
import colors from "../../../components/colors";
import Ionicons from "@react-native-vector-icons/ionicons";
const GroupDetails = () => {
const route = useRoute();
const { groupId } = route.params as { groupId: string };
const group = {
id: groupId,
name: "Wedding Fund",
collected: 12000,
goal: 20000,
description:
"This group is created to collect contributions for the wedding celebration. Everyone can contribute as per their convenience.",
members: [
{ id: "1", name: "Alice", contribution: 3000, role: "Organizer" },
{ id: "2", name: "Bob", contribution: 2500, role: "Member" },
{ id: "3", name: "Charlie", contribution: 4000, role: "Member" },
{ id: "4", name: "David", contribution: 2500, role: "Member" },
],
};
const progress = Math.min(group.collected / group.goal, 1);
// Animation refs
const animatedValues = useRef(group.members.map(() => new Animated.Value(0))).current;
useEffect(() => {
const animations = group.members.map((_, i) =>
Animated.timing(animatedValues[i], {
toValue: 1,
duration: 400,
delay: i * 100,
useNativeDriver: true,
})
);
Animated.stagger(100, animations).start();
}, []);
const renderMember = ({ item, index }: { item: typeof group.members[0]; index: number }) => {
return (
<Animated.View
style={[
styles.memberCard,
{
opacity: animatedValues[index],
transform: [
{
translateY: animatedValues[index].interpolate({
inputRange: [0, 1],
outputRange: [20, 0], // slide up effect
}),
},
],
},
]}
>
<View style={{ flexDirection: 'row', gap: 10 }}>
<Ionicons
name="person-circle-outline"
size={40}
color={colors.primary}
/>
<View>
<Text style={styles.memberName}>
{item.name} {item.role === "Organizer" ? "(Organizer)" : "(Member)"}
</Text>
<Text style={styles.memberDetail}>Contribution: ₹{item.contribution}</Text>
</View>
</View>
</Animated.View>
);
};
return (
<AppView>
{/* Group Title */}
<Text style={styles.groupName}>{group.name}</Text>
<Text style={styles.description}>{group.description}</Text>
{/* Progress Bar */}
<View style={styles.progressContainer}>
<View style={styles.progressBar}>
<View style={[styles.progressFill, { flex: progress }]} />
<View style={{ flex: 1 - progress }} />
</View>
<Text style={styles.amount}>
₹{group.collected} / ₹{group.goal}
</Text>
</View>
{/* Stats */}
<View style={styles.statsRow}>
<View style={styles.statBox}>
<Text style={styles.statValue}>{group.members.length}</Text>
<Text style={styles.statLabel}>Members</Text>
</View>
<View style={styles.statBox}>
<Text style={styles.statValue}>₹{group.collected}</Text>
<Text style={styles.statLabel}>Collected</Text>
</View>
<View style={styles.statBox}>
<Text style={styles.statValue}>₹{group.goal}</Text>
<Text style={styles.statLabel}>Goal</Text>
</View>
</View>
{/* Members List */}
<Text style={styles.sectionTitle}>Members</Text>
<FlatList
data={group.members}
keyExtractor={(item) => item.id}
renderItem={({ item, index }) => renderMember({ item, index })}
contentContainerStyle={styles.membersListContainer}
/>
{/* Actions */}
<View style={styles.actions}>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Contribute</Text>
</TouchableOpacity>
</View>
</AppView>
);
};
export default GroupDetails;
const styles = StyleSheet.create({
groupName: {
fontSize: 22,
fontWeight: "700",
color: "#0f172a",
marginBottom: 6,
},
description: {
fontSize: 14,
color: "#475569",
marginBottom: 20,
lineHeight: 20,
},
progressContainer: {
marginBottom: 24,
},
progressBar: {
flexDirection: "row",
height: 8,
borderRadius: 4,
backgroundColor: "#e2e8f0",
overflow: "hidden",
marginBottom: 6,
},
progressFill: {
backgroundColor: colors.Home,
},
amount: {
fontSize: 13,
color: "#64748b",
},
statsRow: {
flexDirection: "row",
justifyContent: "space-between",
marginBottom: 20,
},
statBox: {
flex: 1,
backgroundColor: "#fff",
marginHorizontal: 4,
padding: 16,
borderRadius: 12,
alignItems: "center",
shadowColor: "#000",
shadowOpacity: 0.05,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
elevation: 2,
},
statValue: {
fontSize: 18,
fontWeight: "700",
color: "#1e293b",
},
statLabel: {
fontSize: 12,
color: "#64748b",
marginTop: 4,
},
sectionTitle: {
fontSize: 16,
fontWeight: "600",
color: "#0f172a",
marginBottom: 12,
},
membersListContainer: {
paddingBottom: 20,
},
memberCard: {
backgroundColor: "#fff",
padding: 16,
borderRadius: 12,
marginBottom: 10,
// shadowColor: "#000",
// shadowOpacity: 0.05,
// shadowOffset: { width: 0, height: 2 },
// shadowRadius: 4,
// elevation: 2,
borderLeftWidth:5,
borderColor:colors.primary
},
memberName: {
fontSize: 15,
fontWeight: "600",
color: "#1e293b",
marginBottom: 4,
},
memberDetail: {
fontSize: 13,
color: "#475569",
},
actions: {
marginTop: 16,
},
button: {
backgroundColor: colors.Home,
paddingVertical: 14,
borderRadius: 10,
alignItems: "center",
marginBottom: 12,
},
buttonText: {
fontSize: 15,
fontWeight: "600",
color: "#fff",
},
});
src/screens/home/user-home/UserHome.tsx
+168
View File
@@ -0,0 +1,168 @@
import React from "react";
import {
StyleSheet,
Text,
View,
FlatList,
TouchableOpacity,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import type { RootStackParamList } from "../../../navigation/AppNavigator"; // adjust path
import colors from "../../../components/colors";
import Ionicons from "@react-native-vector-icons/ionicons";
type NavigationProp = NativeStackNavigationProp<RootStackParamList, "GroupDetails">;
type Group = {
id: string;
name: string;
members: number;
collected: number;
goal: number;
};
const groups: Group[] = [
{ id: "1", name: "Wedding Fund", members: 25, collected: 12000, goal: 20000 },
{ id: "2", name: "Birthday Gift", members: 10, collected: 4500, goal: 6000 },
{ id: "3", name: "Community Event", members: 50, collected: 22000, goal: 30000 },
];
const UserHome = () => {
const navigation = useNavigation<NavigationProp>();
const totalGroups = groups.length;
const totalCollected = groups.reduce((sum, g) => sum + g.collected, 0);
const renderItem = ({ item }: { item: Group }) => {
const progress = Math.min(item.collected / item.goal, 1) * 100;
return (
<TouchableOpacity
style={styles.card}
onPress={() => navigation.navigate("GroupDetails", { groupId: item.id })}
>
<Text style={styles.groupName}>{item.name}</Text>
<View style={styles.statsRow}>
<Ionicons
name="person-circle-outline"
size={20}
color={colors.primary}
/>
<Text style={styles.detail}> {item.members} members</Text>
</View>
{/* Progress Bar */}
<View style={styles.progressBar}>
<View style={[styles.progressFill, { width: `${progress}%` }]} />
</View>
<Text style={styles.amount}>
₹{item.collected} / ₹{item.goal}
</Text>
</TouchableOpacity>
);
};
return (
<View>
{/* Stats */}
<View style={[styles.statsRow, { marginVertical: 24, }]}>
<View style={styles.statBox}>
<Text style={styles.statValue}>{totalGroups}</Text>
<Text style={styles.statLabel}>Groups Joined</Text>
</View>
<View style={styles.statBox}>
<Text style={styles.statValue}>₹{totalCollected}</Text>
<Text style={styles.statLabel}>Total Contributed</Text>
</View>
</View>
{/* Groups List */}
<Text style={styles.sectionTitle}>Your Groups</Text>
<FlatList
data={groups}
keyExtractor={(item) => item.id}
renderItem={renderItem}
contentContainerStyle={{ paddingBottom: 20 }}
/>
</View>
);
};
export default UserHome;
const styles = StyleSheet.create({
statsRow: {
flexDirection: "row",
gap: 10
},
statBox: {
flex: 1,
backgroundColor: "#fff",
// marginHorizontal: 6,
padding: 16,
borderRadius: 12,
alignItems: "center",
shadowColor: "#000",
shadowOpacity: 0.05,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
elevation: 2,
},
statValue: {
fontSize: 18,
fontWeight: "700",
color: colors.Home,
},
statLabel: {
fontSize: 12,
color: "#64748b",
marginTop: 4,
},
sectionTitle: {
fontSize: 18,
fontWeight: "600",
color: colors.Home,
marginBottom: 12,
},
card: {
backgroundColor: "#ffffff",
padding: 16,
marginBottom: 12,
borderRadius: 12,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
elevation: 2,
},
groupName: {
fontSize: 16,
fontWeight: "600",
color: colors.Home,
marginBottom: 6,
},
detail: {
fontSize: 13,
color: "#475569",
marginBottom: 8,
},
progressBar: {
height: 6,
borderRadius: 3,
backgroundColor: "#e2e8f0",
marginBottom: 6,
overflow: "hidden",
},
progressFill: {
backgroundColor: colors.primary,
height: "100%",
},
amount: {
fontSize: 13,
color: "#64748b",
},
});
src/screens/management/YourContacts.tsx
+5 -4
View File
@@ -15,6 +15,7 @@ import {
Alert,
} from "react-native";
import AppView from "../../components/AppView";
import colors from "../../components/colors";
const { ContactsModule } = NativeModules;
@@ -187,7 +188,7 @@ const styles = StyleSheet.create({
width: 45,
height: 45,
borderRadius: 25,
backgroundColor: "#25D366",
backgroundColor: colors.pastelOrange,
justifyContent: "center",
alignItems: "center",
marginRight: 12,
@@ -213,10 +214,10 @@ const styles = StyleSheet.create({
paddingVertical: 6,
borderRadius: 8,
borderWidth: 1,
borderColor: "#25D366",
borderColor: colors.Settings,
},
inviteText: {
color: "#25D366",
color: colors.Settings,
fontWeight: "bold",
},
modalOverlay: {
@@ -264,7 +265,7 @@ const styles = StyleSheet.create({
marginLeft: 10,
paddingVertical: 10,
borderRadius: 8,
backgroundColor: "#25D366",
backgroundColor: colors.pastelOrange,
alignItems: "center",
},
sendText: {
src/screens/profile/BecomeOrg.tsx
+4 -3
View File
@@ -81,7 +81,7 @@ const BecomeOrg = () => {
<TouchableOpacity onPress={() => navigation.replace("Home" as never)} >
<Ionicons name="arrow-back" size={24} color={'#000'} />
</TouchableOpacity>
<Text style={styles.headerTitle}>User Profile</Text>
<Text style={styles.headerTitle}>Become Organizer</Text>
</View>
<KeyboardAvoidingView
@@ -100,14 +100,14 @@ const BecomeOrg = () => {
keyboardType="numeric"
value={bankAccountNumber}
onChangeText={setBankAccountNumber}
icon="card-outline"
/>
icon="card-outline" error={""} />
<CustomInput
placeholder="Bank Name"
value={bankName}
onChangeText={setBankName}
icon="business-outline"
error=""
/>
<CustomInput
@@ -115,6 +115,7 @@ const BecomeOrg = () => {
value={branchCode}
onChangeText={setBranchCode}
icon="key-outline"
error=""
/>
<CustomButton
src/screens/profile/EditBankDetails.tsx
+162
View File
@@ -0,0 +1,162 @@
import React, { useState } from "react";
import {
StyleSheet,
View,
Text,
Alert,
ActivityIndicator,
TouchableOpacity,
} from "react-native";
import { useNavigation, useRoute } from "@react-navigation/native";
import { CustomButton, CustomInput } from "../../components/common/Custom";
import colors from "../../components/colors";
import AppView from "../../components/AppView";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import { UPDATE_BANK_URL } from "../../utils/ApiUrls";
import { apiCall } from "../../utils/ApiHelper";
const EditBankDetails = () => {
const navigation = useNavigation<any>();
const route = useRoute();
// Get initial data from route parameters passed from the Profile screen
const {
currentBankName,
currentAccountNumber,
currentBranchCode
} = route.params as {
currentBankName?: string;
currentAccountNumber?: string;
currentBranchCode?: string;
};
// Initialize state with the passed-in details
const [bankName, setBankName] = useState(currentBankName || "");
const [bankAccountNumber, setBankAccountNumber] = useState(currentAccountNumber || "");
const [branchCode, setBranchCode] = useState(currentBranchCode || "");
const [loading, setLoading] = useState(false);
// The update function remains the same, using the local state
const handleUpdateBankDetails = async () => {
if (!bankName || !bankAccountNumber || !branchCode) {
Alert.alert("Validation Error", "Please fill in all bank details.");
return;
}
try {
setLoading(true);
const response = await apiCall(UPDATE_BANK_URL, 'PUT', {
bankName,
bankAccountNumber,
branchCode,
}) as { status: string; message?: string };
console.log("Update Bank Response:", response);
if (response.status === "success") {
Alert.alert("Success", response.message || "Bank details updated successfully!");
navigation.goBack();
} else {
Alert.alert("Update Failed", response.message || "Could not update bank details.");
}
} catch (error: any) {
console.error("Error updating bank details:", error);
Alert.alert("Error", error.message || "An unexpected error occurred. Please try again.");
} finally {
setLoading(false);
}
};
return (
<AppView>
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
<Ionicons name="arrow-back" size={24} color={colors.Profile} />
</TouchableOpacity>
<Text style={styles.headerTitle}>Edit Bank Details</Text>
</View>
<View style={styles.container}>
<Text style={styles.sectionTitle}>Update Your Bank Information</Text>
<CustomInput
label="Bank Name"
placeholder="Enter your bank's name"
value={bankName}
onChangeText={setBankName}
icon="business"
error=""
/>
<CustomInput
label="Bank Account Number"
placeholder="Enter your account number"
value={bankAccountNumber}
onChangeText={setBankAccountNumber}
icon="card"
keyboardType="numeric"
error=""
/>
<CustomInput
label="Branch Code"
placeholder="Enter the branch code (IFSC)"
value={branchCode}
onChangeText={setBranchCode}
icon="barcode"
error=""
/>
<View style={styles.buttonContainer}>
<CustomButton
title={loading ? "Saving..." : "Save Changes"}
onPress={handleUpdateBankDetails}
icon={loading ? undefined : "save"}
buttonBackground={colors.pastelBlue}
/>
<CustomButton
title="Cancel"
onPress={() => navigation.goBack()}
style={styles.cancelButton}
buttonBackground={colors.pastelBlue}
/>
</View>
</View>
</AppView>
);
};
const styles = StyleSheet.create({
header: {
flexDirection: "row",
alignItems: "center",
padding: 16,
},
backButton: {
marginRight: 16,
},
headerTitle: {
fontSize: 22,
fontWeight: "600",
color: colors.Profile,
},
container: {
flex: 1,
padding: 16,
},
sectionTitle: {
fontSize: 18,
fontWeight: "700",
color: "#1e293b",
marginBottom: 20,
},
buttonContainer: {
marginTop: 24,
},
cancelButton: {
marginTop: 12,
borderWidth: 1,
borderColor: "#cbd5e1",
},
});
export default EditBankDetails;
src/screens/profile/Profile.tsx
+167 -62
View File
@@ -22,11 +22,12 @@ import colors from "../../components/colors";
import SwitchNavigator from "./SwitchNavigator";
import { useFocusEffect, useNavigation } from "@react-navigation/native";
import { ApiResponse } from "../home/UserProfileStatus";
import { BASE_URL } from "../../utils/ApiUrls";
import { BASE_URL, PUT_USER_PROFILE, PUT_USER_PROFILE_IMG, PUT_USER_STATUS } from "../../utils/ApiUrls";
import AppView from "../../components/AppView";
import { useDispatch } from "react-redux";
import { setUserData } from "../../redux/userSlice";
import { clearUser, setUserData } from "../../redux/userSlice";
import { StackNavigationProp } from "@react-navigation/stack";
import { RootStackParamList } from "../../navigation/AppNavigator";
type UserProfile = {
@@ -48,10 +49,11 @@ type UserProfile = {
role?: string;
};
const Profile = () => {
const navigation = useNavigation<any>();
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
const dispatch = useDispatch()
const [user, setUser] = useState<UserProfile | null>(null);
const [user, setUser] = useState<UserProfile | null | any>(null);
const [fetching, setFetching] = useState(true);
const [editing, setEditing] = useState(false);
const [imageUpdating, setImageUpdating] = useState(false);
@@ -60,6 +62,7 @@ const Profile = () => {
const [error, setError] = useState<string | null>(null);
const [refreshing, setRefreshing] = useState(false);
const fetchUserProfile = async () => {
try {
const credentials = await Keychain.getGenericPassword();
@@ -69,6 +72,7 @@ const Profile = () => {
}
const token = credentials.password;
setFetching(true);
const response = await fetch(
`${BASE_URL}user/profile/view`,
@@ -81,31 +85,32 @@ const Profile = () => {
}
);
const result = await response.json();
console.log("👤 Profile Response:", result);
if (result.status === "success") {
setUser(result.data);
dispatch(setUserData({
id: result?.data.id,
userId: result?.data.userId,
username: result?.data.username,
firstName: result?.data.firstName,
lastName: result?.data.lastName,
gender: result?.data.gender,
mobile: result?.data.mobile,
email: result?.data.email,
address: result?.data.address,
bankAccountNumber: result?.data.bankAccountNumber,
bankName: result?.data.bankName,
branchCode: result?.data.branchCode,
profilePicture: result?.data.filePath, // or keep as `filePath`
filePath: result?.data.filePath,
imageBlob: result?.data.imageBlob,
role: result?.data.role,
organizerId: result?.data.organizerId,
organizerStatus: result?.data.organizerStatus,
profileStatus: true, // set true once profile is fetched
}));
dispatch(setUserData({
id: result?.data.id,
userId: result?.data.userId,
username: result?.data.username,
firstName: result?.data.firstName,
lastName: result?.data.lastName,
gender: result?.data.gender,
mobile: result?.data.mobile,
email: result?.data.email,
address: result?.data.address,
bankAccountNumber: result?.data.bankAccountNumber,
bankName: result?.data.bankName,
branchCode: result?.data.branchCode,
profilePicture: result?.data.filePath, // or keep as `filePath`
filePath: result?.data.filePath,
imageBlob: result?.data.imageBlob,
role: result?.data.role,
organizerId: result?.data.organizerId,
organizerStatus: result?.data.organizerStatus,
profileStatus: true, // set true once profile is fetched
}));
} else {
Alert.alert("Error", "Failed to fetch user profile");
}
@@ -117,6 +122,7 @@ const Profile = () => {
}
};
const updateProfile = async () => {
try {
const credentials = await Keychain.getGenericPassword();
@@ -126,8 +132,9 @@ const Profile = () => {
}
const token = credentials.password;
const response = await fetch(
`${BASE_URL}user/profile/update`,
PUT_USER_PROFILE,
{
method: "PUT",
headers: {
@@ -146,6 +153,7 @@ const Profile = () => {
}
);
const result = await response.json();
if (result.status === "success") {
Alert.alert("Success", "Profile updated successfully");
@@ -160,6 +168,7 @@ const Profile = () => {
}
};
const pickImage = () => {
launchImageLibrary({ mediaType: "photo", quality: 0.5 }, (response) => {
if (response.didCancel) return;
@@ -167,13 +176,14 @@ const Profile = () => {
Alert.alert("Error", response.errorMessage || "Something went wrong");
} else if (response.assets && response.assets.length > 0) {
const selectedImage = response.assets[0];
setUser((prev) =>
setUser((prev: any) =>
prev ? { ...prev, filePath: selectedImage.uri ?? null } : prev
);
}
});
};
const handleUpdateImage = async () => {
try {
const credentials = await Keychain.getGenericPassword();
@@ -183,22 +193,26 @@ const Profile = () => {
}
const token = credentials.password;
if (!user?.filePath) {
Alert.alert("Error", "Please select an image first");
return;
}
setImageUpdating(true);
const formData = new FormData();
formData.append("file", {
uri: user.filePath,
uri: user?.filePath,
type: "image/jpeg",
name: "profile.jpg",
} as any);
const response = await fetch(
`${BASE_URL}user/update/userImg`,
PUT_USER_PROFILE_IMG,
{
method: "PUT",
headers: {
@@ -209,18 +223,21 @@ const Profile = () => {
}
);
const result = await response.json();
if (result.status === "success") {
Alert.alert("Success", "Profile image updated successfully");
// If API returns updated image, set it
if (result.data?.imageBlob) {
setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
setUser((prev: any) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
} else {
// Otherwise, keep the local filePath until next fetch
setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
setUser((prev: any) => prev ? { ...prev, filePath: user?.filePath } : prev);
}
// Refresh profile from API as well
fetchUserProfile();
} else {
@@ -234,6 +251,7 @@ const Profile = () => {
}
};
const userStatus = async () => {
try {
const credentials = await Keychain.getGenericPassword();
@@ -243,9 +261,10 @@ const Profile = () => {
}
const token = credentials.password;
setLoading(true);
setError(null);
const response = await fetch(`${BASE_URL}user/profile/status`, {
const response = await fetch(PUT_USER_STATUS, {
method: "GET",
headers: {
Accept: "*/*",
@@ -253,13 +272,16 @@ const Profile = () => {
},
});
const json: ApiResponse = await response.json();
console.log("👤 Profile Status Response:", json);
if (json.status === "success") {
setStatusData(json.data);
console.log("statusData response :", json);
} else {
setError(json.message || "Failed to fetch status");
}
@@ -270,17 +292,21 @@ const Profile = () => {
}
};
const logout = async (navigation: any) => {
try {
const credentials = await Keychain.getGenericPassword();
if (!credentials) {
Alert.alert("Info", "No user is currently logged in");
return;
}
// Clear stored credentials
await Keychain.resetGenericPassword();
dispatch(clearUser())
Alert.alert("Success", "You have been logged out");
navigation.replace("Login");
} catch (error) {
@@ -289,6 +315,7 @@ const Profile = () => {
}
};
const confirmLogout = (navigation: any) => {
Alert.alert(
"Logout",
@@ -300,20 +327,24 @@ const Profile = () => {
);
};
console.log("statusData?.role :", statusData?.role);
console.log("statusData?.organizerStatus :", statusData?.organizerStatus);
useFocusEffect(
useCallback(() => {
userStatus();
}, [])
);
useEffect(() => {
userStatus();
fetchUserProfile();
}, []);
const onRefresh = () => {
setRefreshing(true);
// Simulate a network request or data fetching
@@ -323,26 +354,21 @@ const Profile = () => {
}, 2000); // 2 seconds delay
};
console.log("user image :", user?.filePath);
const getProfileImage = () => {
if (user?.imageBlob) {
return `data:image/jpeg;base64,${user.imageBlob}`;
return `data:image/jpeg;base64,${user?.imageBlob}`;
}
if (user?.filePath) {
return user.filePath;
return user?.filePath;
}
return "https://randomuser.me/api/portraits/men/1.jpg";
return "https://randomuser?.me/api/portraits/men/1.jpg";
};
if (fetching || !user) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color={colors.pastelBlue} />
<Text style={styles.loadingText}>Loading profile...</Text>
</View>
);
}
return (
<AppView>
@@ -350,9 +376,19 @@ const Profile = () => {
<View style={styles.header}>
<Text style={styles.headerTitle}>User Profile</Text>
<TouchableOpacity onPress={() => confirmLogout(navigation)} style={styles.refreshButton}>
<Ionicons name="log-out-outline" size={24} color={'#000'} />
<Ionicons name="log-out-outline" size={24} color={colors.Profile} />
</TouchableOpacity>
</View>
{/* if (fetching || !user) {
return ( */}
{fetching || !user &&
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color={colors.pastelBlue} />
<Text style={styles.loadingText}>Loading profile...</Text>
</View>
}
<KeyboardAvoidingView
// style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : undefined}
@@ -365,6 +401,7 @@ const Profile = () => {
}
>
{/* Profile Card */}
<View style={styles.profileCard}>
{/* Profile Image Section */}
@@ -390,6 +427,7 @@ const Profile = () => {
)
}
<View style={styles.profileImageSection}>
<View style={styles.avatarContainer}>
<Image
@@ -402,6 +440,7 @@ const Profile = () => {
</TouchableOpacity>
</View>
<CustomButton
title={imageUpdating ? "Updating..." : "Update Image"}
onPress={handleUpdateImage}
@@ -409,9 +448,11 @@ const Profile = () => {
style={styles.updateImageButton}
buttonBackground={colors.pastelBlue}
/>
</View>
{!editing ? (
<>
{/* Profile Details */}
@@ -422,10 +463,14 @@ const Profile = () => {
<Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
{/* <View style={{ marginBottom: 16 }}>
</View> */}
</View> */}
</View>
<View>
<TouchableOpacity onPress={() => navigation.navigate('Transaction')}>
<Text>View Transaction</Text>
</TouchableOpacity>
<CustomButton
title="Edit Profile"
onPress={() => setEditing(true)}
@@ -439,59 +484,104 @@ const Profile = () => {
<Ionicons name="person" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Name</Text>
<Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
<Text style={styles.detailText}>{user?.firstName} {user?.lastName}</Text>
</View>
</View>
<View style={styles.detailRow}>
<Ionicons name="mail" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Email</Text>
<Text style={styles.detailText}>{user.email || "Not provided"}</Text>
<Text style={styles.detailText}>{user?.email || "Not provided"}</Text>
</View>
</View>
<View style={styles.detailRow}>
<Ionicons name="call" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Mobile</Text>
<Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
<Text style={styles.detailText}>{user?.mobile || "Not provided"}</Text>
</View>
</View>
<View style={styles.detailRow}>
<Ionicons name="at-circle" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Username</Text>
<Text style={styles.detailText}>{user.username}</Text>
<Text style={styles.detailText}>{user?.username}</Text>
</View>
</View>
<View style={styles.detailRow}>
<Ionicons name="location" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Address</Text>
<Text style={styles.detailText}>{user.address || "Not provided"}</Text>
<Text style={styles.detailText}>{user?.address || "Not provided"}</Text>
</View>
</View>
<View style={styles.detailRow}>
<Ionicons name="male-female" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Gender</Text>
<Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
<Text style={styles.detailText}>{user?.gender || "Not specified"}</Text>
</View>
</View>
<View style={styles.detailRow}>
<Ionicons name="key" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Role</Text>
<Text style={styles.detailText}>{user.role || "User"}</Text>
<Text style={styles.detailText}>{user?.role || "User"}</Text>
</View>
</View>
{/* BANK DETAILS SECTION */}
<View style={{ marginTop: 20 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<Text style={styles.sectionTitle}>Bank Information</Text>
{/* Navigate to a screen you will create for editing bank details */}
<CustomButton
title="Edit Bank Details"
onPress={() =>{ navigation.navigate("EditBankDetails", {
currentBankName: user?.bankName,
currentAccountNumber: user?.bankAccountNumber,
currentBranchCode: user?.branchCode,
})}}
icon="create-outline"
style={styles.editButton}
buttonBackground={colors.pastelBlue}
/>
</View>
<View style={styles.detailRow}>
<Ionicons name="business" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Bank Name</Text>
<Text style={styles.detailText}>{user?.bankName || "Not provided"}</Text>
</View>
</View>
<View style={styles.detailRow}>
<Ionicons name="barcode" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Branch Code</Text>
<Text style={styles.detailText}>{user?.branchCode || "Not provided"}</Text>
</View>
</View>
<View style={styles.detailRow}>
<Ionicons name="card" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Account Number</Text>
<Text style={styles.detailText}>{user?.bankAccountNumber || "Not provided"}</Text>
</View>
</View>
</View>
</View>
@@ -502,54 +592,65 @@ const Profile = () => {
<View style={styles.editSection}>
<Text style={styles.sectionTitle}>Edit Profile</Text>
<CustomInput
error=""
label="First Name"
placeholder="Enter first name"
value={user.firstName ?? ""}
value={user?.firstName ?? ""}
onChangeText={(text) => setUser({ ...user, firstName: text })}
icon="person"
/>
<CustomInput
error=""
label="Last Name"
placeholder="Enter last name"
value={user.lastName ?? ""}
value={user?.lastName ?? ""}
onChangeText={(text) => setUser({ ...user, lastName: text })}
icon="person"
/>
<CustomInput
error=""
label="Email"
placeholder="Enter email"
value={user.email ?? ""}
value={user?.email ?? ""}
onChangeText={(text) => setUser({ ...user, email: text })}
icon="mail"
keyboardType="email-address"
/>
<CustomInput
error=""
label="Username"
placeholder="Enter username"
value={user.username ?? ""}
value={user?.username ?? ""}
onChangeText={(text) => setUser({ ...user, username: text })}
icon="at"
/>
<CustomInput
error=""
label="Address"
placeholder="Enter address"
value={user.address ?? ""}
value={user?.address ?? ""}
onChangeText={(text) => setUser({ ...user, address: text })}
icon="location"
multiline
/>
<CustomInput
error=""
label="Gender"
placeholder="Enter gender"
value={user.gender ?? ""}
value={user?.gender ?? ""}
onChangeText={(text) => setUser({ ...user, gender: text })}
icon="male-female"
/>
<View style={styles.editButtons}>
<CustomButton
title="Save Changes"
@@ -567,6 +668,7 @@ const Profile = () => {
/>
</View>
</View>
</>
)}
@@ -577,6 +679,7 @@ const Profile = () => {
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
@@ -609,6 +712,7 @@ const styles = StyleSheet.create({
padding: 4,
},
profileCard: {
borderRadius: 20,
margin: 16,
@@ -692,7 +796,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 8,
},
editSection: {
marginBottom: '40%',
marginBottom: '100%',
flex: 1,
},
editButtons: {
@@ -768,4 +872,5 @@ const styles = StyleSheet.create({
},
});
export default Profile;
export default Profile;
src/screens/profile/Transaction.tsx
+17
View File
@@ -0,0 +1,17 @@
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import AppView from '../../components/AppView'
const Transaction = () => {
return (
<AppView barStyle='dark-content'>
<Text>Transaction</Text>
</AppView>
)
}
export default Transaction
const styles = StyleSheet.create({
})
src/utils/ApiUrls.tsx
+16 -15
View File
@@ -1,17 +1,18 @@
// export const BASE_URL = "https://api.godemo.in/FundCollect/api/"
export const BASE_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/"
export const LOGIN_URL = `${BASE_URL}user/generate/otp?mobile=`
export const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify`
export const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply`
export const GROUP_CREATION_URL = `${BASE_URL}fund/groups/{organizerId}`
export const PROFILE_URL =`${BASE_URL}user/profile/view`
export const PUBLIC_GROUPS_URL =`${BASE_URL}fund/user/public`
// export const BASE_URL = "https://api.godemo.in/FundCollect/api/"
export const LOGIN_URL = `${BASE_URL}user/generate/otp?mobiles=`
export const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify`
export const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply`
export const GROUP_CREATION_URL = `${BASE_URL}fund/groups/{organizerId}`
export const PROFILE_URL = `${BASE_URL}user/profile/view`
export const PUBLIC_GROUPS_URL = `${BASE_URL}fund/user/public`
export const JOIN_GROUP_URL = `${BASE_URL}fund/`;
export const MY_GROUPS_URL =`${BASE_URL}fund/getAll/my/groups`
export const REQUESTS_URL =`${BASE_URL}fund/group/pending/request`
//https://api.godemo.in/FundCollect/api/fund/groups/2a80cdaa-8532-4b8a-87f0-9c1023d18a7f/join/64
export const APPROVE_REQUEST_URL =`${BASE_URL}fund/requests/`
export const DECLINE_REQUEST_URL =`${BASE_URL}fund/user/my/groups`
// https://api.godemo.in/FundCollect/api/fund/groups/b89f56a1-952d-41b3-ab8d-3c28c91697f5/join/100005
export const GET_JOINED_GROUP_URL = `${BASE_URL}fund/my/join/groups`
export const MY_GROUPS_URL = `${BASE_URL}fund/getAll/my/groups`
export const REQUESTS_URL = `${BASE_URL}fund/group/pending/request`
export const APPROVE_REQUEST_URL = `${BASE_URL}fund/requests/`
export const DECLINE_REQUEST_URL = `${BASE_URL}fund/user/my/groups`
export const GET_JOINED_GROUP_URL = `${BASE_URL}fund/my/join/groups`
export const PUT_USER_PROFILE_IMG = `${BASE_URL}user/update/userImg`
export const PUT_USER_PROFILE = `${BASE_URL}user/profile/update`
export const PUT_USER_STATUS = `${BASE_URL}user/profile/status`
export const UPDATE_BANK_URL = `${BASE_URL}user/bank/update`;
src/utils/HelperFunction.tsx
+53 -55
View File
@@ -4,60 +4,58 @@ import * as Keychain from "react-native-keychain";
import { setUserData } from "../redux/userSlice";
import { Alert } from "react-native";
export const fetchUserProfile = async () => {
const dispatch = useDispatch();
try {
const credentials = await Keychain.getGenericPassword();
if (!credentials) {
// Alert.alert("Error", "You are not logged in");
return;
}
const token = credentials.password;
const response = await fetch(
`${BASE_URL}user/profile/view`,
{
method: "GET",
headers: {
Accept: "*/*",
Authorization: `Bearer ${token}`,
},
}
);
const result = await response.json();
console.log("user api data",result)
if (result.status === "success") {
dispatch(setUserData({
id: result?.data.id,
userId: result?.data.userId,
username: result?.data.username,
firstName: result?.data.firstName,
lastName: result?.data.lastName,
gender: result?.data.gender,
mobile: result?.data.mobile,
email: result?.data.email,
address: result?.data.address,
bankAccountNumber: result?.data.bankAccountNumber,
bankName: result?.data.bankName,
branchCode: result?.data.branchCode,
profilePicture: result?.data.filePath, // or keep as `filePath`
filePath: result?.data.filePath,
imageBlob: result?.data.imageBlob,
role: result?.data.role,
organizerId: result?.data.organizerId,
organizerStatus: result?.data.organizerStatus,
profileStatus: true, // set true once profile is fetched
}));
console.log("splash user data:", result.data);
} else {
Alert.alert("Error", "Failed to fetch user profile");
}
} catch (error) {
console.error("❌ Error fetching profile:", error);
Alert.alert("Error", "Could not connect to server");
const dispatch = useDispatch();
try {
const credentials = await Keychain.getGenericPassword();
if (!credentials) {
// Alert.alert("Error", "You are not logged in");
return;
}
const token = credentials.password;
const response = await fetch(
`${BASE_URL}user/profile/view`,
{
method: "GET",
headers: {
Accept: "*/*",
Authorization: `Bearer ${token}`,
},
}
};
);
const result = await response.json();
console.log("user api data", result)
if (result.status === "success") {
dispatch(setUserData({
id: result?.data.id,
userId: result?.data.userId,
username: result?.data.username,
firstName: result?.data.firstName,
lastName: result?.data.lastName,
gender: result?.data.gender,
mobile: result?.data.mobile,
email: result?.data.email,
address: result?.data.address,
bankAccountNumber: result?.data.bankAccountNumber,
bankName: result?.data.bankName,
branchCode: result?.data.branchCode,
profilePicture: result?.data.filePath, // or keep as `filePath`
filePath: result?.data.filePath,
imageBlob: result?.data.imageBlob,
role: result?.data.role,
organizerId: result?.data.organizerId,
organizerStatus: result?.data.organizerStatus,
profileStatus: true, // set true once profile is fetched
}));
console.log("splash user data:", result.data);
} else {
Alert.alert("Error", "Failed to fetch user profile");
}
} catch (error) {
console.error("❌ Error fetching profile:", error);
Alert.alert("Error", "Could not connect to server");
}
};