homePage update

src/screens/profile/BecomeOrg.tsx

@@ -8,7 +8,6 @@ import {
   ScrollView,
   KeyboardAvoidingView,
   Platform,
-  SafeAreaView,
   TouchableOpacity,
 } from "react-native";
 import * as Keychain from "react-native-keychain";
@@ -16,17 +15,17 @@ import { CustomInput, CustomButton } from "../../components/common/Custom";
 import colors from "../../components/colors";
 import { useNavigation } from "@react-navigation/native";
 import AppView from "../../components/AppView";
-import Ionicons from "@react-native-vector-icons/ionicons";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
 
 const BecomeOrg = () => {
   const navigation = useNavigation<any>();
-  const [bankAccountNumber, setBankAccountNumber] = useState("");
-  const [bankName, setBankName] = useState("");
-  const [branchCode, setBranchCode] = useState("");
+  const [idName, setIdName] = useState("");
+  const [idNumber, setIdNumber] = useState("");
+  const [issueDate, setIssueDate] = useState("");
   const [loading, setLoading] = useState(false);
 
   const handleSubmit = async () => {
-    if (!bankAccountNumber || !bankName || !branchCode) {
+    if (!idName || !idNumber || !issueDate) {
       Alert.alert("Error", "Please fill all fields");
       return;
     }
@@ -35,7 +34,10 @@ const BecomeOrg = () => {
       setLoading(true);
       const credentials = await Keychain.getGenericPassword();
       if (!credentials) {
-        Alert.alert("Error", "You are not logged in");
+        Alert.alert("Error", "You are not logged in. Please log in to continue.");
+        setLoading(false);
+        // Optionally navigate to login screen
+        // navigation.navigate("Login");
         return;
       }
       const token = credentials.password;
@@ -45,31 +47,31 @@ const BecomeOrg = () => {
         {
           method: "POST",
           headers: {
-            Accept: "*/*",
             "Content-Type": "application/json",
             Authorization: `Bearer ${token}`,
           },
           body: JSON.stringify({
-            bankAccountNumber,
-            bankName,
-            branchCode,
+            idName,
+            idNumber,
+            issueDate,
           }),
         }
       );
 
       const result = await response.json();
-      if (result.status === "success") {
-        Alert.alert("Success", "Organizer registration applied successfully");
-        setBankAccountNumber("");
-        setBankName("");
-        setBranchCode("");
+
+      if (response.ok && result.status === "success") {
+        Alert.alert("Success", "Organizer registration application submitted successfully!");
+        setIdName("");
+        setIdNumber("");
+        setIssueDate("");
         navigation.navigate("Home" as never);
       } else {
-        Alert.alert("Error", result.message || "Failed to apply");
+        Alert.alert("Error", result.message || "Failed to submit application");
       }
     } catch (error) {
       console.error("❌ Registration error:", error);
-      Alert.alert("Error", "Something went wrong");
+      Alert.alert("Error", "An unexpected error occurred. Please try again.");
     } finally {
       setLoading(false);
     }
@@ -78,11 +80,11 @@ const BecomeOrg = () => {
   return (
     <AppView barStyle="dark-content">
       <View style={styles.header}>
-        <TouchableOpacity onPress={() => navigation.replace("Home" as never)} >
+        <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
           <Ionicons name="arrow-back" size={24} color={'#000'} />
         </TouchableOpacity>
-        <Text style={styles.headerTitle}>Become Organizer</Text>
-
+        <Text style={styles.headerTitle}>Become an Organizer</Text>
+        <View style={styles.placeholder} />
       </View>
       <KeyboardAvoidingView
         style={{ flex: 1 }}
@@ -93,37 +95,42 @@ const BecomeOrg = () => {
           contentContainerStyle={styles.container}
           keyboardShouldPersistTaps="handled"
         >
-          <Text style={styles.title}>Organizer Registration</Text>
+          <Text style={styles.title}>Submit Your ID for Verification</Text>
+          <Text style={styles.subtitle}>
+            Please provide your official identification details to become a verified organizer.
+          </Text>
 
           <CustomInput
-            placeholder="Bank Account Number"
-            keyboardType="numeric"
-            value={bankAccountNumber}
-            onChangeText={setBankAccountNumber}
-            icon="card-outline" error={""}          />
+            placeholder="ID Name (e.g., Aadhaar, PAN Card)"
+            value={idName}
+            onChangeText={setIdName}
+            icon="person-outline"
+            error={""}
+          />
 
           <CustomInput
-            placeholder="Bank Name"
-            value={bankName}
-            onChangeText={setBankName}
-            icon="business-outline"
+            placeholder="ID Number"
+            value={idNumber}
+            onChangeText={setIdNumber}
+            icon="card-outline"
             error=""
           />
 
           <CustomInput
-            placeholder="Branch Code"
-            value={branchCode}
-            onChangeText={setBranchCode}
-            icon="key-outline"
+            placeholder="Issue Date (YYYY-MM-DD)"
+            value={issueDate}
+            onChangeText={setIssueDate}
+            icon="calendar-outline"
             error=""
           />
 
           <CustomButton
             title={loading ? "Submitting..." : "Request Organizer Role"}
             onPress={handleSubmit}
+
             icon="send-outline"
             buttonBackground={colors.pastelBlue}
-            style={{ opacity: loading ? 0.6 : 1 }}
+            style={{ opacity: loading ? 0.6 : 1, marginTop: 20 }}
           />
 
           {loading && (
@@ -148,23 +155,38 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   title: {
-    fontSize: 22,
+    fontSize: 24,
     fontWeight: "700",
-    marginBottom: 20,
+    marginBottom: 10,
     textAlign: "center",
     color: colors.textDark,
   },
+  subtitle: {
+    fontSize: 16,
+    textAlign: "center",
+    color: colors.textDark,
+    marginBottom: 30,
+  },
   header: {
     flexDirection: "row",
-    justifyContent: "space-between",
     alignItems: "center",
-    padding: 16,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 20,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E0E0E0',
+  },
+  backButton: {
+    padding: 5,
   },
   headerTitle: {
-    fontSize: 22,
-    fontWeight: "700",
-    color: "#000"
+    flex: 1,
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#000",
+    textAlign: "center",
+  },
+  placeholder: {
+    width: 24, // to balance the back button
   },
 });