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
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({
})