Issue feat: Add new registration flow and access react native message events

src/Routes/Public/StackScreen.js

@@ -32,6 +32,8 @@ import DashboardStack from './DashboardStack';
 import SCPUserTabScreen from '../SCPUser/SCPUserTabScreen';
 import YouthNetTabScreen from '../Youthnet/YouthNetTabScreen';
 import UnauthorizedScreen from '../../screens/Unauthorized/UnauthorizedScreen';
+import PlpWebViewScreen from '../../screens/PlpWebViewScreen/PlpWebViewScreen';
+import ProgramsScreen from '../../screens/ProgramsScreen/ProgramsScreen';
 
 const StackScreen = () => {
   const Stack = createNativeStackNavigator();
@@ -270,6 +272,16 @@ const StackScreen = () => {
         component={UnauthorizedScreen}
         options={{ headerShown: false, lazy: true }}
       />
+      <Stack.Screen
+        name="PlpWebViewScreen"
+        component={PlpWebViewScreen}
+        options={{ headerShown: false, lazy: true }}
+      />
+      <Stack.Screen
+        name="ProgramsScreen"
+        component={ProgramsScreen}
+        options={{ headerShown: false, lazy: true }}
+      />
     </Stack.Navigator>
   );
 };

src/Routes/Public/TabScreen.js

@@ -8,6 +8,7 @@ import {
   Platform,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useFocusEffect } from '@react-navigation/native';
 import { useTranslation } from '../../context/LanguageContext';
 import {
   useTabBarStyle,
@@ -35,12 +36,14 @@ import explore_UNFILLED from '@src/assets/images/png/explore_UNFILLED.png';
 const Tab = createBottomTabNavigator();
 const WalkthroughableView = walkthroughable(View); // Wrap Image component
 
-const TabScreen = () => {
+  const TabScreen = () => {
+  console.log('###### TabScreen----yyyyy');
   const { t } = useTranslation();
   const [contentShow, setContentShow] = useState(true);
   const [CopilotStarted, setCopilotStarted] = useState(false);
   const [CopilotStopped, setCopilotStopped] = useState(false);
   const [isVolunteer, setIsVolunteer] = useState(false);
+  const [userType, setUserType] = useState('');
   const { start, goToNth, unregisterStep, copilotEvents } = useCopilot();
   const insets = useSafeAreaInsets();
   const tabBarStyle = useTabBarStyle();
@@ -58,28 +61,48 @@ const TabScreen = () => {
   //   copilotEvents.on('stop', () => setCopilotStopped(true));
   // }, [start, copilotEvents]);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      let userType = await getDataFromStorage('userType');
-      const result = JSON.parse(await getDataFromStorage('profileData'));
-      console.log(
-        '########## getUserDetails',
-        result?.getUserDetails?.[0]?.customFields
-      );
-      const volunteer = result?.getUserDetails?.[0]?.customFields.filter(
-        (item) => item?.label === 'IS_VOLUNTEER'
-      );
-      console.log('###### volunteer', volunteer);
-      const isVolunteer = volunteer?.[0]?.selectedValues?.[0];
-      console.log('###### isVolunteer', isVolunteer);
-      setIsVolunteer(isVolunteer);
-      if (userType === 'youthnet') {
-        setContentShow(false);
-      }
-    };
+  // Use useFocusEffect to re-run when screen comes into focus
+  // This will trigger when userType changes in storage
+  useFocusEffect(
+    React.useCallback(() => {
+      const fetchData = async () => {
+        try {
+          let currentUserType = await getDataFromStorage('userType');
+          console.log('###### Fetched userType:', currentUserType);
+
+          const result = JSON.parse(await getDataFromStorage('profileData'));
+          console.log(
+            '########## getUserDetails',
+            result?.getUserDetails?.[0]?.customFields
+          );
+
+          const volunteer = result?.getUserDetails?.[0]?.customFields.filter(
+            (item) => item?.label === 'IS_VOLUNTEER'
+          );
+          console.log('###### volunteer', volunteer);
+
+          const isVolunteerValue = volunteer?.[0]?.selectedValues?.[0];
+          console.log('###### isVolunteer', isVolunteerValue);
+
+          setIsVolunteer(isVolunteerValue);
+          setUserType(currentUserType);
+
+          // Update contentShow based on userType
+          if (currentUserType === 'youthnet') {
+            console.log('###### youthnetTab - hiding content, showing explore');
+            setContentShow(false);
+          } else {
+            console.log('###### regularTab - showing content, hiding explore');
+            setContentShow(true);
+          }
+        } catch (error) {
+          console.error('###### Error fetching data:', error);
+        }
+      };
 
-    fetchData();
-  }, []);
+      fetchData();
+    }, [])
+  );
 
   return (
     <Tab.Navigator

src/components/Layout/SecondaryHeader.js

@@ -6,20 +6,28 @@ import {
   SafeAreaView,
   StatusBar,
   TouchableOpacity,
+  Modal,
 } from 'react-native';
 import { IndexPath, Select, SelectItem } from '@ui-kitten/components';
 import Icon from 'react-native-vector-icons/Octicons';
-import { useNavigation } from '@react-navigation/native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import { languages } from '@context/Languages';
 import { useTranslation } from '../../context/LanguageContext';
+import { getDataFromStorage } from '../../utils/JsHelper/Helper';
 import Logo from '../../assets/images/png/logo.png';
 import PropTypes from 'prop-types';
+import GlobalText from '@components/GlobalText/GlobalText';
+import ProgramSwitch from '../ProgramSwitch/ProgramSwitch';
 
 const SecondaryHeader = ({ logo }) => {
   const navigation = useNavigation();
   const { setLanguage, language, t } = useTranslation();
   const [selectedIndex, setSelectedIndex] = useState();
   const [value, setValue] = useState();
+  const [userType, setUserType] = useState('');
+  const [userId, setUserId] = useState('');
+  const [showProgramSwitch, setShowProgramSwitch] = useState(false);
 
   useEffect(() => {
     // Set the initial value based on the current language
@@ -30,15 +38,49 @@ const SecondaryHeader = ({ logo }) => {
       setSelectedIndex(new IndexPath(currentLanguageIndex));
       setValue(language);
     }
+
+    // Fetch userType and userId from AsyncStorage
+    fetchUserTypeAndId();
   }, [language]); // Include language as a dependency
 
+  // Add focus effect to refresh data when returning from other screens
+  useFocusEffect(
+    React.useCallback(() => {
+      // Reset modal state when screen comes into focus
+      setShowProgramSwitch(false);
+      // Refresh user data
+      fetchUserTypeAndId();
+    }, [])
+  );
+
+  const fetchUserTypeAndId = async () => {
+    try {
+      const storedUserType = await getDataFromStorage('userType');
+      const storedUserId = await getDataFromStorage('userId');
+      setUserType(storedUserType || '');
+      setUserId(storedUserId || '');
+    } catch (error) {
+      console.error('Error fetching userType or userId:', error);
+    }
+  };
+
   const onSelect = (index) => {
     //setSelectedIndex(index);
     const selectedValue = languages[index.row].value;
     //setValue(selectedValue);
     setLanguage(selectedValue);
   };
 
+  const handleProgramSwitchToggle = () => {
+    setShowProgramSwitch(!showProgramSwitch);
+  };
+
+  const handleProgramSwitchClose = () => {
+    setShowProgramSwitch(false);
+    // Refresh userType after switching
+    fetchUserTypeAndId();
+  };
+
   return (
     <SafeAreaView style={styles.layout}>
       <StatusBar
@@ -62,8 +104,25 @@ const SecondaryHeader = ({ logo }) => {
             />
           </TouchableOpacity>
         ) : (
-          <View style={styles.center}>
+          <View style={styles.centerContainer}>
             <Image style={styles.image} source={Logo} resizeMode="contain" />
+            {userType && (
+              <TouchableOpacity
+                style={styles.userTypeContainer}
+                onPress={handleProgramSwitchToggle}
+              >
+                <GlobalText style={styles.userTypeText}>
+                             {userType ==="scp" ? "Second Chance Program" : userType ==="youthnet" ? "Vocational Traning" : userType }
+
+                </GlobalText>
+                <Ionicons
+                  name="chevron-down"
+                  size={16}
+                  color="#4D4639"
+                  style={styles.dropdownIcon}
+                />
+              </TouchableOpacity>
+            )}
           </View>
         )}
         <Select
@@ -77,6 +136,41 @@ const SecondaryHeader = ({ logo }) => {
           ))}
         </Select>
       </View>
+
+      {/* ProgramSwitch Modal */}
+      <Modal
+        visible={showProgramSwitch}
+        animationType="slide"
+        transparent={true}
+        onRequestClose={handleProgramSwitchClose}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
+            <View style={styles.modalHeader}>
+              <GlobalText style={styles.modalTitle}>
+                Switch Program
+              </GlobalText>
+              <TouchableOpacity onPress={handleProgramSwitchClose}>
+                <Ionicons name="close" size={28} color="#000" />
+              </TouchableOpacity>
+            </View>
+            {showProgramSwitch && (
+              <ProgramSwitch
+                key={`program-switch-${userId}-${Date.now()}`}
+                userId={userId}
+                onSuccess={(userData) => {
+                  console.log('Program switched successfully:', userData);
+                //  handleProgramSwitchClose();
+                }}
+                onError={(error) => {
+                  console.error('Program switch error:', error);
+                }}
+                onClose={handleProgramSwitchClose}
+              />
+            )}
+          </View>
+        </View>
+      </Modal>
     </SafeAreaView>
   );
 };
@@ -105,16 +199,63 @@ const styles = StyleSheet.create({
   select: {
     width: 100,
   },
-  center: {
+  centerContainer: {
     alignItems: 'center',
+    flexDirection: 'row',
   },
   image: {
     height: 50,
     width: 50,
   },
+  userTypeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    backgroundColor: '#F5F5F5',
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+  },
+  userTypeText: {
+    fontSize: 14,
+    color: '#4D4639',
+    fontFamily: 'Poppins-Medium',
+    marginRight: 4,
+  },
+  dropdownIcon: {
+    marginLeft: 2,
+  },
   icon: {
     marginLeft: 20,
   },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  modalContainer: {
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    height: '90%',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E5E5',
+  },
+  modalTitle: {
+    fontSize: 20,
+    color: '#000',
+    fontFamily: 'Poppins-Bold',
+    fontWeight: '600',
+  },
 });
 
 SecondaryHeader.propTypes = {