@propel-nsl/propel-react-native-sdk 1.0.0

package/src/components/SDKBackHandler.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import { View, StyleSheet, DeviceEventEmitter, NativeModules, BackHandler } from 'react-native';
+import { CommonActions, StackActions, useNavigation, useFocusEffect } from '@react-navigation/native';
+import { useSDKContext } from '../contexts/SDKContext';
+import { useAppDispatch } from '../../src-app/hooks/useAppDispatch';
+import { clearAllAuthState } from '../../src-app/redux/authSlice';
+
+// Main visible tabs - these are root-level screens
+const MAIN_TABS = ['DashboardTab', 'Redeem', 'Profile', 'Help'];
+
+// Hidden tab screens
+const HIDDEN_TABS = [
+  'RedemptionHistory', 'MyOrders', 'OrderDetails', 'FAQ', 'TnC',
+  'ProductDetail', 'MyEVouchers', 'MyCart', 'PointsLog',
+  'DeliveryAddress', 'NewDeliveryAddress', 'PaymentMethod', 'TransactionSuccessful'
+];
+
+const SDKBackHandler: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const navigation = useNavigation();
+  const { isDeepLinkEntry } = 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) {
+      NativeModules.PropelSDKBridge.closeSDK();
+    }
+  }, [dispatch]);
+
+  // Shared back handler logic
+  const handleBackPress = React.useCallback(() => {
+    console.log('🔍 SDK Back Handler Called');
+    
+    // Get current navigation state - need to look into the nested tab navigator
+    const rootState = navigation.getState();
+    console.log('🔍 Root navigation state:', JSON.stringify(rootState, null, 2));
+    
+    // Find the MainTabs route (which contains the tab navigator)
+    const mainTabsRoute = rootState?.routes?.find(route => route.name === 'MainTabs');
+    const tabState = mainTabsRoute?.state;
+    
+    const currentIndex = tabState?.index ?? 0;
+    const currentRoute = tabState?.routes?.[currentIndex];
+    const currentTabName = currentRoute?.name;
+    const tabHistory = tabState?.history as Array<{ type: string; key: string }> | undefined;
+    
+    console.log('🔍 Current tab:', currentTabName, 'index:', currentIndex);
+    console.log('🔍 Tab history length:', tabHistory?.length);
+    console.log('🔍 Is main tab?', MAIN_TABS.includes(currentTabName || ''));
+    console.log('🔍 Is hidden tab?', HIDDEN_TABS.includes(currentTabName || ''));
+    
+    // Check if we're in DashboardTab and have nested stack screens
+    let isOnDashboardRoot = false;
+    let dashboardStackIndex = 0;
+    
+    if (currentTabName === 'DashboardTab' && currentRoute?.state) {
+      const dashboardStackState = currentRoute.state as { routes?: any[]; index?: number };
+      dashboardStackIndex = dashboardStackState.index ?? 0;
+      isOnDashboardRoot = dashboardStackIndex === 0;
+      console.log('🔍 DashboardStack index:', dashboardStackIndex, 'isOnDashboardRoot:', isOnDashboardRoot);
+    } else if (currentTabName === 'DashboardTab') {
+      isOnDashboardRoot = true;
+    }
+    
+    // CASE 1: We're in DashboardTab with nested screens - pop the stack
+    if (currentTabName === 'DashboardTab' && dashboardStackIndex > 0) {
+      console.log('🔙 Popping DashboardStack');
+      // Use goBack which will pop the stack
+      navigation.goBack();
+      return true;
+    }
+    
+    // CASE 2: We're on Dashboard root - exit SDK
+    if (currentTabName === 'DashboardTab' && isOnDashboardRoot) {
+      console.log('🚀 On Dashboard root - exiting SDK');
+      exitSDK();
+      return true;
+    }
+    
+    // CASE 3: We're on a hidden tab screen (MyCart, ProductDetail, etc.)
+    // These screens should go back to where they came from
+    if (HIDDEN_TABS.includes(currentTabName || '')) {
+      const fromParam = (currentRoute?.params as any)?.from;
+      console.log('🔍 On hidden tab:', currentTabName, 'from:', fromParam);
+      
+      // Check if tab history has previous screens
+      if (tabHistory && tabHistory.length > 1) {
+        console.log('🔙 Using tab history to go back');
+        navigation.goBack();
+        return true;
+      }
+      
+      // No history - check where we came from
+      if (fromParam === 'Profile') {
+        console.log('🔙 Going back to Profile');
+        navigation.navigate('Profile' as never);
+        return true;
+      }
+      
+      if (fromParam === 'Redeem' || fromParam === 'REDEEM') {
+        console.log('🔙 Going back to Redeem');
+        navigation.navigate('Redeem' as never);
+        return true;
+      }
+      
+      // Default: exit SDK instead of going to Dashboard
+      console.log('🚀 No clear back path from hidden tab - exiting SDK');
+      exitSDK();
+      return true;
+    }
+    
+    // CASE 4: We're on a main tab (Redeem, Profile, Help)
+    if (MAIN_TABS.includes(currentTabName || '')) {
+      // For main tabs, always go back to Dashboard instead of following tab history
+      if (currentTabName !== 'DashboardTab') {
+        console.log('🔙 Going back to Dashboard from main tab:', currentTabName);
+        // Use dispatch with CommonActions.navigate to reset tab navigation properly
+        navigation.dispatch(
+          CommonActions.navigate({
+            name: 'DashboardTab',
+            params: { screen: 'Dashboard' },
+          })
+        );
+        return true;
+      }
+      
+      // If we're already on Dashboard (shouldn't happen in this case), exit SDK
+      console.log('🚀 Already on Dashboard - exiting SDK');
+      exitSDK();
+      return true;
+    }
+    
+    // Fallback: try goBack, then Dashboard
+    if (navigation.canGoBack()) {
+      console.log('🔙 Fallback: using goBack()');
+      navigation.goBack();
+      return true;
+    }
+    
+    console.log('� Fallback: no navigation options - exiting SDK');
+    exitSDK();
+    return true;
+  }, [navigation, isDeepLinkEntry, exitSDK]);
+
+  // Handle custom SDK events
+  React.useEffect(() => {
+    console.log('🔵 SDKBackHandler MOUNTED');
+    const SDK_BACK_PRESS_EVENT = 'propelsdk_hardwareBackPress';
+    
+    // Subscribe to DeviceEventEmitter (native emits SDK-scoped back press event)
+    const deviceEventSubscription = DeviceEventEmitter.addListener(SDK_BACK_PRESS_EVENT, () => {
+      console.log('🔵 DeviceEventEmitter propelsdk_hardwareBackPress received');
+      handleBackPress();
+    });
+    
+    return () => {
+      console.log('🔴 SDKBackHandler UNMOUNTED');
+      deviceEventSubscription.remove();
+    };
+  }, [handleBackPress]);
+
+  // Handle standard React Native BackHandler
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        console.log('🔵 Standard BackHandler triggered');
+        return handleBackPress();
+      };
+
+      const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+
+      return () => subscription.remove();
+    }, [handleBackPress])
+  );
+
+  return <View style={styles.container}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default SDKBackHandler;

package/src/components/SDKProfile.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Profile from '../screens/Profile';
+import { useNavigation } from '@react-navigation/native';
+
+// Screens that are registered as hidden tabs in SDK (not inside DashboardStack)
+const HIDDEN_TAB_SCREENS = [
+  'RedemptionHistory',
+  'MyOrders',
+  'OrderDetails',
+  'FAQ',
+  'TnC',
+  'ProductDetail',
+  'MyEVouchers',
+  'MyCart',
+  'PointsLog',
+  'DeliveryAddress',
+  'NewDeliveryAddress',
+  'PaymentMethod',
+  'TransactionSuccessful',
+];
+
+/**
+ * SDK Profile Wrapper
+ * 
+ * This wrapper ensures the Profile component works correctly within the SDK navigation context.
+ * The original Profile component expects to be within a MainTabNavigator, but in the SDK
+ * it needs to navigate differently.
+ */
+const SDKProfile: React.FC = () => {
+  const navigation = useNavigation();
+
+  // Create a custom navigation prop that handles SDK-specific navigation
+  const sdkNavigation = React.useMemo(() => ({
+    ...navigation,
+    navigate: (routeName: string, params?: any) => {
+      console.log('🔍 SDK Profile Navigation:', { routeName, params });
+      
+      // Handle DashboardTab navigation - in SDK, these screens are hidden tabs, not nested in DashboardStack
+      if (routeName === 'DashboardTab') {
+        const targetScreen = params?.screen;
+        const targetParams = params?.params;
+        
+        console.log('🚀 SDK redirecting DashboardTab to:', targetScreen);
+        
+        if (targetScreen && HIDDEN_TAB_SCREENS.includes(targetScreen)) {
+          // Navigate to hidden tab screen directly (they're at tab level in SDK)
+          console.log('🚀 SDK navigating to hidden tab screen:', targetScreen);
+          navigation.navigate(targetScreen as never, targetParams as never);
+        } else if (targetScreen === 'Dashboard') {
+          // Navigate to DashboardTab which contains Dashboard
+          console.log('🚀 SDK navigating to DashboardTab');
+          navigation.navigate('DashboardTab' as never, { screen: 'Dashboard' } as never);
+        } else if (targetScreen) {
+          // Try direct navigation for any other screen
+          console.log('🚀 SDK direct navigation to:', targetScreen);
+          navigation.navigate(targetScreen as never, targetParams as never);
+        } else {
+          console.warn('⚠️ No target screen specified for DashboardTab navigation');
+        }
+      } else {
+        // Direct navigation for other routes
+        console.log('🚀 SDK direct navigation to:', routeName);
+        navigation.navigate(routeName as never, params as never);
+      }
+    },
+    reset: (options: any) => {
+      console.log('🔄 SDK navigation reset:', options);
+      navigation.reset(options);
+    }
+  }), [navigation]);
+
+  return (
+    <View style={styles.container}>
+      <Profile navigation={sdkNavigation} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+});
+
+export default SDKProfile;

package/src/components/SDKProfileWrapper.tsx

@@ -0,0 +1,51 @@
+/**
+ * SDK Profile Wrapper
+ * 
+ * With the new Root Stack + Tabs architecture, navigation is simple:
+ * - All detail screens are in the root stack
+ * - Just navigate directly to screen names
+ * - goBack() works correctly because screens are in a stack
+ */
+
+import React from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { Profile } from '../screens';
+
+const SDKProfileWrapper: React.FC = () => {
+  const navigation = useNavigation();
+
+  // Create SDK-aware navigation prop - simplified for new architecture
+  const sdkNavigation = React.useMemo(() => {
+    return {
+      ...navigation,
+      navigate: (routeName: string, params?: any) => {
+        console.log('🔍 SDK Profile Navigation:', { routeName, params });
+        
+        // Handle legacy DashboardTab navigation pattern (for backwards compatibility)
+        if (routeName === 'DashboardTab') {
+          const targetScreen = params?.screen;
+          const targetParams = params?.params;
+          
+          if (targetScreen === 'Dashboard') {
+            // Go to Dashboard tab
+            (navigation as any).navigate('Tabs', { screen: 'DashboardTab' });
+          } else if (targetScreen) {
+            // Navigate directly to the stack screen
+            (navigation as any).navigate(targetScreen, targetParams);
+          }
+          return;
+        }
+        
+        // Direct navigation for all other routes
+        (navigation as any).navigate(routeName, params);
+      },
+      reset: (options: any) => {
+        navigation.reset(options);
+      }
+    };
+  }, [navigation]);
+
+  return <Profile navigation={sdkNavigation} />;
+};
+
+export default SDKProfileWrapper;

package/src/constants.ts

@@ -0,0 +1,10 @@
+/**
+ * SDK Constants
+ */
+
+// AppRegistry component name - must match native wrapper expectations
+export const SDK_NAME = 'PropelSDK';
+
+// SDK Version
+export const SDK_VERSION = '1.0.0';
+

package/src/contexts/SDKContext.tsx

@@ -0,0 +1,72 @@
+import React, { createContext, useContext, ReactNode, useState, useCallback } from 'react';
+
+/**
+ * SDK Context
+ * 
+ * This context provides information about whether we're running in the SDK context
+ * and allows components to adapt their behavior accordingly.
+ * 
+ * It also tracks deep link entry state so back navigation can behave consistently:
+ * - When app is opened via deep link, back navigation should exit to host app
+ * - When app is opened normally, back navigation follows standard behavior
+ */
+interface SDKContextType {
+  isSDK: boolean;
+  sdkNavigation?: any;
+  /** Whether the app was opened via a deep link */
+  isDeepLinkEntry: boolean;
+  /** The screen that was deep linked to */
+  deepLinkTarget?: string;
+  /** Set the deep link entry state */
+  setDeepLinkEntry: (isDeepLink: boolean, target?: string) => void;
+}
+
+const SDKContext = createContext<SDKContextType>({
+  isSDK: false,
+  isDeepLinkEntry: false,
+  deepLinkTarget: undefined,
+  setDeepLinkEntry: () => {},
+});
+
+export const useSDKContext = () => useContext(SDKContext);
+
+interface SDKProviderProps {
+  children: ReactNode;
+  isSDK?: boolean;
+  sdkNavigation?: any;
+  initialDeepLinkEntry?: boolean;
+  initialDeepLinkTarget?: string;
+}
+
+export const SDKProvider: React.FC<SDKProviderProps> = ({ 
+  children, 
+  isSDK = false, 
+  sdkNavigation,
+  initialDeepLinkEntry = false,
+  initialDeepLinkTarget,
+}) => {
+  const [isDeepLinkEntry, setIsDeepLinkEntry] = useState(initialDeepLinkEntry);
+  const [deepLinkTarget, setDeepLinkTarget] = useState<string | undefined>(initialDeepLinkTarget);
+
+  const setDeepLinkEntry = useCallback((isDeepLink: boolean, target?: string) => {
+    console.log('🔗 SDKContext: setDeepLinkEntry', { isDeepLink, target });
+    setIsDeepLinkEntry(isDeepLink);
+    setDeepLinkTarget(target);
+  }, []);
+
+  const contextValue: SDKContextType = {
+    isSDK,
+    sdkNavigation,
+    isDeepLinkEntry,
+    deepLinkTarget,
+    setDeepLinkEntry,
+  };
+
+  return (
+    <SDKContext.Provider value={contextValue}>
+      {children}
+    </SDKContext.Provider>
+  );
+};
+
+export default SDKContext;

package/src/hooks/useSDKBackNavigation.ts

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+import { NativeModules } from 'react-native';
+import { useSDKContext } from '../contexts/SDKContext';
+
+/**
+ * Hook that provides deep-link-aware back navigation for SDK screens.
+ * 
+ * When the app is opened via deep link, pressing back should exit to the host app
+ * instead of navigating to Home/Dashboard.
+ * 
+ * Usage:
+ * ```tsx
+ * const { getDeepLinkExitHandler } = useSDKBackNavigation();
+ * 
+ * const handleGoBack = () =>
+ *   handleCustomGoBack(navigation, route, {
+ *     map: { ... },
+ *     fallback: ROUTES.DASHBOARD,
+ *     onDeepLinkExit: getDeepLinkExitHandler(),
+ *   });
+ * ```
+ */
+export const useSDKBackNavigation = () => {
+  const { isDeepLinkEntry } = useSDKContext();
+
+  /**
+   * Returns a handler that exits to the host app if this is a deep link entry.
+   * Returns undefined if not a deep link entry (so normal navigation continues).
+   */
+  const getDeepLinkExitHandler = useCallback(() => {
+    if (!isDeepLinkEntry) {
+      return undefined;
+    }
+
+    return () => {
+      console.log('🚀 Deep link entry detected - exiting to host app');
+      if (NativeModules.PropelSDKBridge?.closeSDK) {
+        NativeModules.PropelSDKBridge.closeSDK();
+      }
+      return true;
+    };
+  }, [isDeepLinkEntry]);
+
+  /**
+   * Directly exits to host app. Use when you know you want to exit.
+   */
+  const exitToHostApp = useCallback(() => {
+    console.log('🚀 Exiting to host app');
+    if (NativeModules.PropelSDKBridge?.closeSDK) {
+      NativeModules.PropelSDKBridge.closeSDK();
+    }
+  }, []);
+
+  return {
+    isDeepLinkEntry,
+    getDeepLinkExitHandler,
+    exitToHostApp,
+  };
+};
+
+export default useSDKBackNavigation;