@propel-nsl/propel-react-native-sdk 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propel-nsl/propel-react-native-sdk",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Propel Mobile SDK - React Native Core",
   "files": [
     "src/",

package/src/PropelSDKScreen.tsx

@@ -80,6 +80,9 @@ const PropelSDKScreen: React.FC<PropelSDKScreenProps> = (props) => {
     },
     // Flag so SDKApp knows it's running inside a RN host (no native bridge)
     __rnHostMode: true,
+    // Pass navigation and onClose for proper back navigation
+    hostNavigation: props.navigation,
+    onClose: props.onClose,
   };
 
   return (

package/src/SDKApp.tsx

@@ -508,8 +508,11 @@ const SDKApp: React.FC<any> = (props) => {
   const isDeepLinkEntryValue = deepLinkToRedemptionHistory || deepLinkToRedeem;
   const deepLinkTargetValue = deepLinkToRedemptionHistory ? 'RedemptionHistory' : (deepLinkToRedeem ? 'Redeem' : undefined);
   const isRNHostMode = !!(initialParams as any)?.__rnHostMode;
+  const hostNavigation = (initialParams as any)?.hostNavigation;
+  const onClose = (initialParams as any)?.onClose;
   
   console.log('🔍 SDKApp render: deepLinkToRedemptionHistory=', deepLinkToRedemptionHistory, 'deepLinkToRedeem=', deepLinkToRedeem, 'deepLinkTargetValue=', deepLinkTargetValue);
+  console.log('🔍 SDKApp render: isRNHostMode=', isRNHostMode, 'hasHostNavigation=', !!hostNavigation, 'hasOnClose=', !!onClose);
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
@@ -518,6 +521,8 @@ const SDKApp: React.FC<any> = (props) => {
         isSDK={true}
         initialDeepLinkEntry={isDeepLinkEntryValue}
         initialDeepLinkTarget={deepLinkTargetValue}
+        hostNavigation={hostNavigation}
+        onClose={onClose}
       >
         <SafeAreaProvider>
           <NavigationContainer

package/src/components/SDKBackHandler.tsx

@@ -17,17 +17,28 @@ const HIDDEN_TABS = [
 
 const SDKBackHandler: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const navigation = useNavigation();
-  const { isDeepLinkEntry } = useSDKContext();
+  const { isDeepLinkEntry, hostNavigation, onClose } = useSDKContext();
   const dispatch = useAppDispatch();
 
   // Helper to exit SDK and clear auth state
   const exitSDK = React.useCallback(() => {
     console.log('🚀 Exiting SDK - clearing auth state');
     dispatch(clearAllAuthState());
-    if (NativeModules.PropelSDKBridge?.closeSDK) {
+    
+    // Check if we're in RN host mode (hostNavigation or onClose available)
+    if (hostNavigation) {
+      console.log('🚀 RN Host Mode: Using hostNavigation.goBack()');
+      hostNavigation.goBack();
+    } else if (onClose) {
+      console.log('🚀 RN Host Mode: Using onClose callback');
+      onClose();
+    } else if (NativeModules.PropelSDKBridge?.closeSDK) {
+      console.log('🚀 Native Mode: Using PropelSDKBridge.closeSDK()');
       NativeModules.PropelSDKBridge.closeSDK();
+    } else {
+      console.log('⚠️ No exit method available - SDK may not close properly');
     }
-  }, [dispatch]);
+  }, [dispatch, hostNavigation, onClose]);
 
   // Shared back handler logic
   const handleBackPress = React.useCallback(() => {

package/src/contexts/SDKContext.tsx

@@ -19,6 +19,10 @@ interface SDKContextType {
   deepLinkTarget?: string;
   /** Set the deep link entry state */
   setDeepLinkEntry: (isDeepLink: boolean, target?: string) => void;
+  /** Host app navigation (for RN host mode) */
+  hostNavigation?: any;
+  /** Callback to close SDK (for RN host mode) */
+  onClose?: () => void;
 }
 
 const SDKContext = createContext<SDKContextType>({
@@ -26,6 +30,8 @@ const SDKContext = createContext<SDKContextType>({
   isDeepLinkEntry: false,
   deepLinkTarget: undefined,
   setDeepLinkEntry: () => {},
+  hostNavigation: undefined,
+  onClose: undefined,
 });
 
 export const useSDKContext = () => useContext(SDKContext);
@@ -36,6 +42,8 @@ interface SDKProviderProps {
   sdkNavigation?: any;
   initialDeepLinkEntry?: boolean;
   initialDeepLinkTarget?: string;
+  hostNavigation?: any;
+  onClose?: () => void;
 }
 
 export const SDKProvider: React.FC<SDKProviderProps> = ({ 
@@ -44,6 +52,8 @@ export const SDKProvider: React.FC<SDKProviderProps> = ({
   sdkNavigation,
   initialDeepLinkEntry = false,
   initialDeepLinkTarget,
+  hostNavigation,
+  onClose,
 }) => {
   const [isDeepLinkEntry, setIsDeepLinkEntry] = useState(initialDeepLinkEntry);
   const [deepLinkTarget, setDeepLinkTarget] = useState<string | undefined>(initialDeepLinkTarget);
@@ -60,6 +70,8 @@ export const SDKProvider: React.FC<SDKProviderProps> = ({
     isDeepLinkEntry,
     deepLinkTarget,
     setDeepLinkEntry,
+    hostNavigation,
+    onClose,
   };
 
   return (

package/src/screens/Dashboard/index.tsx

@@ -9,6 +9,7 @@ import {
   ImageBackground,
   Dimensions,
   NativeModules,
+  BackHandler,
 } from "react-native";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { AppStackParamList } from "../../../src-app/types/navigation";
@@ -36,6 +37,7 @@ import { useFocusEffect } from "@react-navigation/native";
 import { pointsFromCentsFixed } from "../../../src-app/constants/Formatter";
 import CustomLoader from "../../../src-app/components/CustomLoader";
 import { ROUTES } from "../../../src-app/constants/Routes";
+import { useSDKContext } from "../../contexts/SDKContext";
 
 type DashboardNavigationProp = StackNavigationProp<
   AppStackParamList,
@@ -53,6 +55,7 @@ const Dashboard: React.FC<Props> = ({ navigation }) => {
   const [resetOtpTrigger, setResetOtpTrigger] = useState(0);
   const [messagepopUpVisible, setMessagepopUpVisible] = useState(false);
   const [screen, setScreen] = useState("");
+  const { hostNavigation, onClose } = useSDKContext();
 
   // Debug screen state changes
   useEffect(() => {
@@ -196,6 +199,44 @@ const Dashboard: React.FC<Props> = ({ navigation }) => {
     dispatch(viewMyCartRequest({ id: cartId }));
   }, [cartId, dispatch]);
 
+  const handleBackToHost = () => {
+    console.log('🔙 Dashboard: handleBackToHost called');
+    // Clear all auth state before exiting SDK to prevent stale data on next launch
+    dispatch(clearAllAuthState());
+    
+    // Check if we're in RN host mode (hostNavigation or onClose available)
+    if (hostNavigation) {
+      console.log('🚀 Dashboard: RN Host Mode - Using hostNavigation.goBack()');
+      hostNavigation.goBack();
+    } else if (onClose) {
+      console.log('🚀 Dashboard: RN Host Mode - Using onClose callback');
+      onClose();
+    } else if (NativeModules.PropelSDKBridge?.closeSDK) {
+      console.log('🚀 Dashboard: Native Mode - Using NativeModules.PropelSDKBridge.closeSDK()');
+      NativeModules.PropelSDKBridge.closeSDK();
+    } else if (NativeModules.PropelSDKBridge?.dismiss) {
+      console.log('🚀 Dashboard: Native Mode - Using NativeModules.PropelSDKBridge.dismiss()');
+      NativeModules.PropelSDKBridge.dismiss();
+    } else {
+      console.log('⚠️ Dashboard: No closeSDK method available');
+    }
+  };
+
+  // Add hardware back handler as fallback for Dashboard
+  useFocusEffect(
+    useCallback(() => {
+      const onBackPress = () => {
+        console.log('🔙 Dashboard: Hardware back pressed - calling handleBackToHost');
+        handleBackToHost();
+        return true; // Prevent default back behavior
+      };
+
+      const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+
+      return () => subscription.remove();
+    }, [handleBackToHost])
+  );
+
   const navigateToDashboardScreen = (screenName: string, params?: any) => {
     // Navigate within DashboardStack for screens that are part of the stack
     // For screens like MyCart, we need to navigate within the stack
@@ -280,16 +321,6 @@ const Dashboard: React.FC<Props> = ({ navigation }) => {
     navigateToDashboardScreen("MyCart", { from: "Dashboard" });
   };
 
-  const handleBackToHost = () => {
-    // Clear all auth state before exiting SDK to prevent stale data on next launch
-    dispatch(clearAllAuthState());
-    if (NativeModules.PropelSDKBridge?.closeSDK) {
-      NativeModules.PropelSDKBridge.closeSDK();
-    } else if (NativeModules.PropelSDKBridge?.dismiss) {
-      NativeModules.PropelSDKBridge.dismiss();
-    }
-  };
-
   // Categories data with actual images
   const categoriesData = [
     { id: "1", name: "Apparel", image: Images.categoryApparel },

package/src/screens/Profile/index.tsx

@@ -19,7 +19,7 @@ import {
   resetAuthState,
   uploadProfileImageRequest,
 } from "../../../src-app/redux/authSlice";
-import { CustomImage, Logout } from "../../../src-app/components";
+import { CustomImage } from "../../../src-app/components";
 import Images from "../../../src-app/constants/Images";
 import { useAppSelector } from "../../../src-app/hooks/useAppSelector";
 import { RootState } from "../../../src-app/redux/store";
@@ -79,7 +79,6 @@ const Profile: React.FC<ProfileProps> = ({ navigation }) => {
     uploadProfileImageLoading,
     uploadProfileImageError
   } = useAppSelector((state: RootState) => state.auth);
-  const [logoutModalVisible, setLogoutModalVisible] = useState(false);
   const myProfileLoading = useAppSelector((state: RootState) => state.auth.myProfileLoading);
   const { myOrdersValidateOtpSuccessMessage } = useAppSelector(
   (state: RootState) => state.auth
@@ -119,9 +118,6 @@ const Profile: React.FC<ProfileProps> = ({ navigation }) => {
 }, [otpModalVisible, myOrdersValidateOtpSuccessMessage, screen, navigation, dispatch]);
 
 
-  const handleLogout = () => {
-    setLogoutModalVisible(true);
-  };
 
   const handleMenuPress = (screen: string) => {
     console.log('🚀 Profile handleMenuPress called with screen:', screen);
@@ -314,11 +310,6 @@ const Profile: React.FC<ProfileProps> = ({ navigation }) => {
             />
           </View>
 
-          {/* Logout Button */}
-          <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
-            <CustomImage source={Images.logout} imgStyle={styles.logoutIcon} />
-            <Text style={styles.logoutButtonText}>Logout</Text>
-          </TouchableOpacity>
         </ScrollView>
       </TouchableWithoutFeedback>
       <OTPModal
@@ -344,16 +335,6 @@ const Profile: React.FC<ProfileProps> = ({ navigation }) => {
         otpLength={4}
         screen={screen}
       />
-      <Logout
-        visible={logoutModalVisible}
-        onClose={() => setLogoutModalVisible(false)}
-        onPress={() => {
-          setLogoutModalVisible(false);
-          navigation.reset({ index: 0, routes: [{ name: 'Login' }], });
-          dispatch(resetAuthState("verifyOtpSuccessMessage"));
-          dispatch(resetAuthState("otpSuccessMessage"));
-        }}
-      />
       <CustomLoader loading={!!myProfileLoading} text="Loading profile..." fullScreen />
     </SafeAreaView>
   );

package/src/screens/RedemptionHistory/index.tsx

@@ -47,7 +47,7 @@ const RedemptionHistory: React.FC<Props> = ({ navigation }) => {
   const from = route.params?.from;
   const exitToHost = (route.params as any)?.exitToHost;
   const insets = useSafeAreaInsets();
-  const { isDeepLinkEntry } = useSDKContext();
+  const { isDeepLinkEntry, hostNavigation, onClose } = useSDKContext();
   const dispatch = useAppDispatch();
   
   // OTP modal state for deep link entry or direct access without prior OTP verification
@@ -72,9 +72,19 @@ const RedemptionHistory: React.FC<Props> = ({ navigation }) => {
     if (exitToHost || (isDeepLinkEntry && (!from || from === 'DeepLink' || from === 'HostApp'))) {
       console.log('🚀 RedemptionHistory: Deep link entry - exiting SDK to host app');
       dispatch(clearAllAuthState());
-      if (NativeModules.PropelSDKBridge?.closeSDK) {
+      
+      // Check if we're in RN host mode (hostNavigation or onClose available)
+      if (hostNavigation) {
+        console.log('🚀 RedemptionHistory: RN Host Mode - Using hostNavigation.goBack()');
+        hostNavigation.goBack();
+      } else if (onClose) {
+        console.log('🚀 RedemptionHistory: RN Host Mode - Using onClose callback');
+        onClose();
+      } else if (NativeModules.PropelSDKBridge?.closeSDK) {
+        console.log('🚀 RedemptionHistory: Native Mode - Using closeSDK');
         NativeModules.PropelSDKBridge.closeSDK();
       } else if (NativeModules.PropelSDKBridge?.dismiss) {
+        console.log('🚀 RedemptionHistory: Native Mode - Using dismiss');
         NativeModules.PropelSDKBridge.dismiss();
       }
       return true;

package/src-app/hooks/useAppSelector.ts

@@ -1,4 +1,4 @@
-import { useSelector } from 'react-redux';
+import { TypedUseSelectorHook, useSelector } from 'react-redux';
 import type { RootState } from '../redux/store';
 
-export const useAppSelector = useSelector.withTypes<RootState>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;