create orgnizer screen and intrigate api

2025-09-15 17:05:52 +05:30
parent b13e114ab6
commit 070f7ace16
10 changed files with 613 additions and 140 deletions
@@ -86,7 +86,8 @@ export default function OtpVerificationScreen() {
      if (res.data.statusCode === 200) {
        saveToken(res.data.data);
        navigation.navigate('Home')
-        ToastAndroid.show("OTP Verified Successfully!", ToastAndroid.SHORT);}
+        ToastAndroid.show("OTP Verified Successfully!", ToastAndroid.SHORT);
+      }
    } catch (err: any) {
      console.error("❌ OTP Verification Error:", err?.response?.data || err.message);
      ToastAndroid.show(err.message || "Invalid OTP. Please try again.", ToastAndroid.SHORT);
@@ -0,0 +1,16 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import AppView from '../../components/AppView'
+import UserProfileStatus from './UserProfileStatus'
+
+const Home = () => {
+  return (
+  <AppView>
+    <UserProfileStatus/>
+  </AppView>
+  )
+}
+
+export default Home
+
+const styles = StyleSheet.create({})
@@ -0,0 +1,226 @@
+import React, { use, useCallback, useEffect, useState } from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+    ActivityIndicator,
+    TouchableOpacity,
+    Modal,
+    Alert,
+} from "react-native";
+import * as Keychain from "react-native-keychain";
+import { base_URL } from "../../utils/ApiUrls";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
+
+export type ApiResponse = {
+    message: string;
+    status: string;
+    statusCode: number;
+    data: {
+        role: string;
+        organizerStatus: string;
+        profileStatus: boolean;
+    };
+};
+
+
+const UserProfileStatus: React.FC = () => {
+    const navigation = useNavigation();
+    const [loading, setLoading] = useState(true);
+    const [statusData, setStatusData] = useState<ApiResponse["data"] | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [showModal, setShowModal] = useState(false);
+    const [intervalId, setIntervalId] = useState<null | number>(null);
+
+    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}`,
+                },
+            });
+
+            const json: ApiResponse = await response.json();
+
+            console.log("👤 Profile Status Response:", json);
+            if (json.status === "success") {
+                setStatusData(json.data);
+
+                if (json.data.profileStatus === false) {
+                    setShowModal(true);
+                }
+            } else {
+                setError(json.message || "Failed to fetch status");
+            }
+        } catch (err) {
+            setError("Something went wrong. Please try again.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useFocusEffect(
+        useCallback(() => {
+            userStatus();
+        }, [])
+    );
+
+    useEffect(() => {
+        if (statusData && statusData.profileStatus === false) {
+            const id = setInterval(() => {
+                setShowModal(true);
+            }, 5000);
+            setIntervalId(id);
+            return () => clearInterval(id);
+        }
+    }, [statusData]);
+
+    const handleGoToProfile = () => {
+        // Stop modal repetition
+        if (intervalId) {
+            clearInterval(intervalId);
+            setIntervalId(null);
+        }
+
+        setShowModal(false);
+
+        // Option 1: Mark profile as completed temporarily (so condition stops)
+        setStatusData(prev => (prev ? { ...prev, profileStatus: true } : prev));
+
+        // Navigate to Profile screen
+        navigation.navigate("Profile" as never);
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>Welcome Back 👋</Text>
+
+            <View style={styles.card}>
+                <Text style={styles.cardTitle}>Profile Status</Text>
+                <Text>Role: {statusData?.role}</Text>
+                <Text>Organizer: {statusData?.organizerStatus}</Text>
+                <Text>
+                    Profile Completed: {statusData?.profileStatus ? "Yes ✅" : "No ❌"}
+                </Text>
+            </View>
+
+            {/* Custom Modal */}
+            {showModal && (
+                <Modal
+                    visible={showModal}
+                    animationType="slide"
+                    transparent
+                    onRequestClose={() => setShowModal(false)}
+                >
+                    <View style={styles.modalOverlay}>
+                        <View style={styles.modalBox}>
+                            <Text style={styles.modalTitle}>Complete Your Profile</Text>
+                            <Text style={styles.modalText}>
+                                Your profile is incomplete. Please update your details to continue.
+                            </Text>
+
+                            <TouchableOpacity style={styles.button} onPress={handleGoToProfile}>
+                                <Text style={styles.buttonText}>Go to Profile</Text>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity
+                                style={[styles.button, { backgroundColor: "#ccc", marginTop: 8 }]}
+                                onPress={() => setShowModal(false)}
+                            >
+                                <Text style={[styles.buttonText, { color: "#333" }]}>Close</Text>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </Modal>
+            )}
+        </View>
+    );
+};
+
+
+export default UserProfileStatus;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 16,
+        backgroundColor: "#f5f7fb",
+    },
+    centered: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    title: {
+        fontSize: 22,
+        fontWeight: "700",
+        marginBottom: 20,
+    },
+    card: {
+        backgroundColor: "#fff",
+        padding: 16,
+        borderRadius: 12,
+        elevation: 3,
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        marginBottom: 20,
+    },
+    cardTitle: {
+        fontSize: 18,
+        fontWeight: "600",
+        marginBottom: 10,
+    },
+    button: {
+        backgroundColor: "#007AFF",
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        borderRadius: 8,
+        alignItems: "center",
+    },
+    buttonText: {
+        color: "#fff",
+        fontWeight: "600",
+    },
+    errorText: {
+        color: "red",
+        fontSize: 16,
+        marginBottom: 12,
+    },
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.4)",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    modalBox: {
+        width: "85%",
+        backgroundColor: "#fff",
+        borderRadius: 16,
+        padding: 20,
+        alignItems: "center",
+        elevation: 5,
+    },
+    modalTitle: {
+        fontSize: 20,
+        fontWeight: "700",
+        marginBottom: 10,
+        color: "#FF9500",
+    },
+    modalText: {
+        fontSize: 14,
+        color: "#444",
+        textAlign: "center",
+        marginBottom: 20,
+    },
+});
@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Alert,
+  ActivityIndicator,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+} from "react-native";
+import * as Keychain from "react-native-keychain";
+import { CustomInput, CustomButton } from "../../components/common/Custom";
+import colors from "../../components/colors";
+
+const BecomeOrg = () => {
+  const [bankAccountNumber, setBankAccountNumber] = useState("");
+  const [bankName, setBankName] = useState("");
+  const [branchCode, setBranchCode] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!bankAccountNumber || !bankName || !branchCode) {
+      Alert.alert("Error", "Please fill all fields");
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const credentials = await Keychain.getGenericPassword();
+      if (!credentials) {
+        Alert.alert("Error", "You are not logged in");
+        return;
+      }
+      const token = credentials.password;
+
+      const response = await fetch(
+        "https://api.godemo.in/FundCollect/api/organizer/registration/apply",
+        {
+          method: "POST",
+          headers: {
+            Accept: "*/*",
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({
+            bankAccountNumber,
+            bankName,
+            branchCode,
+          }),
+        }
+      );
+
+      const result = await response.json();
+      if (result.status === "success") {
+        Alert.alert("Success", "Organizer registration applied successfully");
+        setBankAccountNumber("");
+        setBankName("");
+        setBranchCode("");
+      } else {
+        Alert.alert("Error", result.message || "Failed to apply");
+      }
+    } catch (error) {
+      console.error("❌ Registration error:", error);
+      Alert.alert("Error", "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: colors.pastelPink }}>
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        keyboardVerticalOffset={Platform.OS === "ios" ? 60 : 0}
+      >
+        <ScrollView
+          contentContainerStyle={styles.container}
+          keyboardShouldPersistTaps="handled"
+        >
+          <Text style={styles.title}>Organizer Registration</Text>
+
+          <CustomInput
+            placeholder="Bank Account Number"
+            keyboardType="numeric"
+            value={bankAccountNumber}
+            onChangeText={setBankAccountNumber}
+            icon="card-outline"
+          />
+
+          <CustomInput
+            placeholder="Bank Name"
+            value={bankName}
+            onChangeText={setBankName}
+            icon="business-outline"
+          />
+
+          <CustomInput
+            placeholder="Branch Code"
+            value={branchCode}
+            onChangeText={setBranchCode}
+            icon="key-outline"
+          />
+
+          <CustomButton
+            title={loading ? "Submitting..." : "Request Organizer Role"}
+            onPress={handleSubmit}
+            icon="send-outline"
+            buttonBackground={colors.pastelBlue}
+            style={{ opacity: loading ? 0.6 : 1 }}
+          />
+
+          {loading && (
+            <ActivityIndicator
+              style={{ marginTop: 15 }}
+              size="large"
+              color={colors.primary}
+            />
+          )}
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+export default BecomeOrg;
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    padding: 20,
+    justifyContent: "center",
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "700",
+    marginBottom: 20,
+    textAlign: "center",
+    color: colors.textDark,
+  },
+});
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import {
  StyleSheet,
  View,
@@ -18,6 +18,10 @@ import { Ionicons } from "@react-native-vector-icons/ionicons";
 import { launchImageLibrary } from "react-native-image-picker";
 import { base_URL } from "../../utils/ApiUrls";
 import { CustomButton, CustomInput } from "../../components/common/Custom";
+import colors from "../../components/colors";
+import SwitchNavigator from "./SwitchNavigator";
+import { useFocusEffect } from "@react-navigation/native";
+import { ApiResponse } from "../home/UserProfileStatus";



@@ -45,6 +49,9 @@ const Profile = () => {
  const [fetching, setFetching] = useState(true);
  const [editing, setEditing] = useState(false);
  const [imageUpdating, setImageUpdating] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [statusData, setStatusData] = useState<null | { profileStatus: boolean; organizerStatus: string; role: string }>(null);
+  const [error, setError] = useState<string | null>(null);

  const fetchUserProfile = async () => {
    try {
@@ -198,6 +205,48 @@ const Profile = () => {
    }
  };

+  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}`,
+        },
+      });
+
+      const json: ApiResponse = await response.json();
+
+      console.log("👤 Profile Status Response:", json);
+      if (json.status === "success") {
+        setStatusData(json.data);
+
+      } else {
+        setError(json.message || "Failed to fetch status");
+      }
+    } catch (err) {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      userStatus();
+    }, [])
+  );
+
+  console.log("login user data :", user);

  useEffect(() => {
    fetchUserProfile();
@@ -243,9 +292,15 @@ const Profile = () => {
          contentContainerStyle={{ flexGrow: 1 }}
          keyboardShouldPersistTaps="handled"
        >
+
          {/* Profile Card */}
          <View style={styles.profileCard}>
            {/* Profile Image Section */}
+            {
+              statusData?.role && statusData?.organizerStatus ?
+                <Text style={{ color: "#64748b", marginBottom: 16 , textAlign:'center', fontSize:18}}>Your Role: {statusData.role} | Organizer Status: {statusData.organizerStatus}</Text>
+                :
+                <SwitchNavigator role={statusData?.role || ''} status={statusData?.organizerStatus || ''} />}
            <View style={styles.profileImageSection}>
              <View style={styles.avatarContainer}>
                <Image
@@ -263,7 +318,7 @@ const Profile = () => {
                onPress={handleUpdateImage}
                icon={imageUpdating ? undefined : "cloud-upload"}
                style={styles.updateImageButton}
-              // disabled={imageUpdating}
+                buttonBackground="#6366f1"

              />
            </View>
@@ -340,6 +395,7 @@ const Profile = () => {
                  onPress={() => setEditing(true)}
                  icon="create"
                  style={styles.editButton}
+                  buttonBackground="#6366f1"
                />
              </>
            ) : (
@@ -402,13 +458,14 @@ const Profile = () => {
                    onPress={updateProfile}
                    icon="save"
                    style={styles.saveButton}
+                    buttonBackground="#10b981"
                  />
                  <CustomButton
                    title="Cancel"
-                    type="outline"
                    onPress={() => setEditing(false)}
                    icon="close"
                    style={styles.cancelButton}
+                    buttonBackground="#f38080ff"
                  />
                </View>
              </>
@@ -423,7 +480,7 @@ const Profile = () => {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: "#f8fafc",
+    backgroundColor: colors.pastelBlue,
    marginBottom: '30%',
  },
  loadingContainer: {
@@ -506,6 +563,8 @@ const styles = StyleSheet.create({
  },
  updateImageButton: {
    width: "80%",
+    paddingHorizontal: 10,
+    borderRadius: 25,
  },
  detailsSection: {
    marginBottom: 24,
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet, Switch } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
+
+type RootStackParamList = {
+  BecomeOrg: undefined;
+  Profile: undefined;
+};
+
+type SwitchNavigatorProps = {
+  role: string;
+  status: string;
+};
+
+const SwitchNavigator: React.FC<SwitchNavigatorProps> = ({ role, status }) => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  const toggleSwitch = () => {
+    const newValue = !isEnabled;
+    setIsEnabled(newValue);
+
+    if (newValue) {
+      navigation.navigate("BecomeOrg"); // Navigate when ON
+    } else {
+      navigation.navigate("Profile"); // Navigate when OFF
+    }
+  };
+
+  console.log("status :", status);
+  console.log("role :", role);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>
+        {!isEnabled && role !== "USER" 
+          ? "Become an Organizer"
+          : `Request Organizer Role ${status}`}
+      </Text>
+      <Switch
+        trackColor={{ false: "#767577", true: "#81b0ff" }}
+        thumbColor={isEnabled ? "#007AFF" : "#f4f3f4"}
+        ios_backgroundColor="#3e3e3e"
+        onValueChange={toggleSwitch}
+        value={isEnabled}
+      />
+    </View>
+  );
+};
+
+export default SwitchNavigator;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: 'flex-end',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    gap: 10,
+  },
+  text: {
+    fontSize: 18,
+    flexShrink: 1, // Wrap text if too long
+  },
+});