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

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "@propel-nsl/propel-react-native-sdk",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "Propel Mobile SDK - React Native Core",
-  "files": ["src/", "src-app/", "lib/", "assets/", "index.ts", "CLIENT_INTEGRATION_GUIDE.md", "RN_HOST_INTEGRATION.md", "README.md"],
+  "files": [
+    "src/",
+    "src-app/",
+    "lib/",
+    "assets/",
+    "index.ts",
+    "CLIENT_INTEGRATION_GUIDE.md",
+    "RN_HOST_INTEGRATION.md",
+    "README.md"
+  ],
   "main": "index.ts",
   "react-native": "lib/index.ts",
   "types": "lib/index.ts",
@@ -53,11 +62,21 @@
     "redux-saga": ">=1.0.0"
   },
   "peerDependenciesMeta": {
-    "@react-native-clipboard/clipboard": { "optional": true },
-    "@react-native-community/masked-view": { "optional": true },
-    "react-native-image-picker": { "optional": true },
-    "react-native-permissions": { "optional": true },
-    "react-native-fast-image": { "optional": true }
+    "@react-native-clipboard/clipboard": {
+      "optional": true
+    },
+    "@react-native-community/masked-view": {
+      "optional": true
+    },
+    "react-native-image-picker": {
+      "optional": true
+    },
+    "react-native-permissions": {
+      "optional": true
+    },
+    "react-native-fast-image": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

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

@@ -253,6 +253,8 @@ const SDKApp: React.FC<any> = (props) => {
         navigateToTransactionHistory(from);
       } else if (target === 'Redeem') {
         navigateToRedeem(from);
+      } else if (target === 'Dashboard') {
+        console.log('🚀 Dashboard navigation after auth - no special navigation needed, using default flow');
       }
     },
     [authenticateSDK, navigateToTransactionHistory, navigateToRedeem]
@@ -309,6 +311,14 @@ const SDKApp: React.FC<any> = (props) => {
         lastSegment === 'redeem_screen' ||
         lastSegment === 'redeemscreen';
 
+      const isDashboard =
+        normalized === 'dashboard' ||
+        normalized === 'dash' ||
+        normalized === 'home' ||
+        lastSegment === 'dashboard' ||
+        lastSegment === 'dash' ||
+        lastSegment === 'home';
+
       if (isRedemptionHistory || isTransactionHistory) {
         // Prevent duplicate handling
         if (deepLinkHandledRef.current) {
@@ -330,6 +340,16 @@ const SDKApp: React.FC<any> = (props) => {
         console.log('🚀 Intent matched! Will authenticate then navigate to Redeem...');
         pendingDeepLinkRef.current = { target: 'Redeem', from: 'HostApp' };
         authenticateAndNavigate('Redeem', 'HostApp');
+      } else if (isDashboard) {
+        // Prevent duplicate handling
+        if (deepLinkHandledRef.current) {
+          console.log('🚀 Deep link already handled, skipping duplicate call');
+          return;
+        }
+        deepLinkHandledRef.current = true;
+        console.log('🚀 Intent matched! Will authenticate then navigate to Dashboard...');
+        pendingDeepLinkRef.current = { target: 'Dashboard', from: 'HostApp' };
+        authenticateAndNavigate('Dashboard', 'HostApp');
       }
     },
     [authenticateAndNavigate]
@@ -488,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 }}>
@@ -498,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;

package/src-app/services/index.ts

@@ -33,8 +33,11 @@ const getDeviceId = async (): Promise<string> => {
 
 
 const createAuthHeader = async (token: string): Promise<string> => {
-  const deviceId = await getDeviceId();
-  return `Token token=${token};client_key=mobile_app;device_id=device123;client_id=7b170ef2-c0a0-4968-a832-d308d54a8419;user_type=end_user;language_code=en;`;
+  // Try to get device ID from SDK credentials first (from host app), then fallback to device info
+  const creds = getSDKCredentials();
+  const deviceId = creds?.deviceId || await getDeviceId();
+  console.log('createAuthHeader: Using device ID:', deviceId, '(from host:', !!creds?.deviceId, ')');
+  return `Token token=${token};client_key=mobile_app;device_id=${deviceId};client_id=7b170ef2-c0a0-4968-a832-d308d54a8419;user_type=end_user;language_code=en;`;
 };
 
 
@@ -67,8 +70,12 @@ export const sdkAuthApi = async () => {
 
   const environment = creds.environment?.toUpperCase?.() || "PRODUCTION";
 
+  const resolvedDeviceId = creds.deviceId && typeof creds.deviceId === 'object' && typeof (creds.deviceId as any).then === 'function'
+    ? await (creds.deviceId as Promise<string>)
+    : creds.deviceId;
+
   const payload = {
-    device_id: creds.deviceId || "device123",
+    device_id: resolvedDeviceId || await getDeviceId(),
     client_name: creds.clientName || "AndroidApp",
     client_version: creds.clientVersion || "1.0.0",
     environment,
@@ -83,7 +90,33 @@ export const sdkAuthApi = async () => {
     "Content-Type": "application/json",
   };
 
-  return api1.post(ENDPOINTS.SDK_AUTH_INIT, payload, { headers });
+  // Log complete authentication request
+  console.log('=== SDK AUTH API REQUEST ===');
+  console.log('URL:', ENDPOINTS.SDK_AUTH_INIT);
+  console.log('Headers:', {
+    "X-Auth-Token": creds.authToken.substring(0, 20) + '...',
+    "X-Auth-Id": creds.authId,
+    "Content-Type": "application/json",
+  });
+  console.log('Payload:', JSON.stringify(payload, null, 2));
+  console.log('=============================');
+
+  try {
+    const response = await api1.post(ENDPOINTS.SDK_AUTH_INIT, payload, { headers });
+    
+    console.log('=== SDK AUTH API RESPONSE ===');
+    console.log('Status:', response.status);
+    console.log('Response Data:', JSON.stringify(response.data, null, 2));
+    console.log('==============================');
+    
+    return response;
+  } catch (error: any) {
+    console.log('=== SDK AUTH API ERROR ===');
+    console.log('Error:', error?.response?.data || error?.message);
+    console.log('Status:', error?.response?.status);
+    console.log('==========================');
+    throw error;
+  }
 };
 export const myOrdersApi = async () => {
   try {