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

package/src/navigation/SDKMainTabNavigator.tsx

@@ -0,0 +1,315 @@
+/**
+ * SDK Main Tab Navigator
+ * 
+ * Architecture: Tab Navigator with hidden screens + integrated back handler
+ * 
+ * All screens are registered as tabs (some hidden) so navigation.navigate() works
+ * from any screen. Back handler is integrated to handle hardware back press.
+ */
+
+import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createStackNavigator } from '@react-navigation/stack';
+import { View, StyleSheet, Dimensions, Platform, Keyboard, TouchableOpacity, Text } from 'react-native';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useNavigation, CommonActions, getFocusedRouteNameFromRoute } from '@react-navigation/native';
+
+import {
+  Dashboard,
+  DeliveryAddress,
+  FAQ,
+  Help,
+  MyCart,
+  MyEVouchers,
+  MyOrders,
+  NewDeliveryAddress,
+  PaymentMethod,
+  PointsLog,
+  ProductDetail,
+  Redeem,
+  RedemptionHistory,
+  TnC,
+  TransactionSuccessful,
+} from '../screens';
+import OrderDetails from '../screens/OrdersDetails';
+import { CustomImage } from 'src-app/components';
+import Images from 'src-app/constants/Images';
+import { SCALE, VSCALE } from 'src-app/constants/Scaling';
+import SDKProfileWrapper from '../components/SDKProfileWrapper';
+
+const Tab = createBottomTabNavigator<any>();
+const Stack = createStackNavigator<any>();
+
+const { height: screenHeight, width: screenWidth } = Dimensions.get('window');
+
+// Main visible tabs
+const MAIN_TABS = ['DashboardTab', 'Redeem', 'Profile', 'Help'];
+
+// Hidden screens (registered as tabs but not shown in tab bar)
+const HIDDEN_SCREENS = [
+  'RedemptionHistory', 'MyOrders', 'OrderDetails', 'FAQ', 'TnC',
+  'ProductDetail', 'MyEVouchers', 'MyCart', 'PointsLog',
+  'DeliveryAddress', 'NewDeliveryAddress', 'PaymentMethod', 'TransactionSuccessful'
+];
+
+const getTabBarHeight = (): number => {
+  if (Platform.OS === 'ios') {
+    return screenHeight > 800 ? VSCALE(40) : VSCALE(45);
+  }
+  if (Platform.OS === 'android') {
+    return screenHeight > 800 ? VSCALE(35) : VSCALE(55);
+  }
+  return VSCALE(50);
+};
+
+// DashboardStack - contains Dashboard and its nested screens
+const DashboardStack = () => (
+  <Stack.Navigator screenOptions={{ headerShown: false, gestureEnabled: false }}>
+    <Stack.Screen name="Dashboard" component={Dashboard} />
+    <Stack.Screen name="RedemptionHistory" component={RedemptionHistory} />
+    <Stack.Screen name="MyOrders" component={MyOrders} />
+    <Stack.Screen name="OrderDetails" component={OrderDetails as any} />
+    <Stack.Screen name="FAQ" component={FAQ} />
+    <Stack.Screen name="TnC" component={TnC} />
+    <Stack.Screen name="ProductDetail" component={ProductDetail} />
+    <Stack.Screen name="MyEVouchers" component={MyEVouchers} />
+    <Stack.Screen name="MyCart" component={MyCart} />
+    <Stack.Screen name="PointsLog" component={PointsLog} />
+    <Stack.Screen name="DeliveryAddress" component={DeliveryAddress} />
+    <Stack.Screen name="NewDeliveryAddress" component={NewDeliveryAddress as any} />
+    <Stack.Screen name="PaymentMethod" component={PaymentMethod} />
+    <Stack.Screen name="TransactionSuccessful" component={TransactionSuccessful} />
+  </Stack.Navigator>
+);
+
+// Custom Tab Bar Component - only shows 4 main tabs
+const CustomTabBar = ({ state, descriptors, navigation }: any) => {
+  const insets = useSafeAreaInsets();
+  const iconSize = SCALE(18);
+
+  // Filter to only show main tabs
+  const visibleRoutes = state.routes.filter((route: any) => MAIN_TABS.includes(route.name));
+
+  const getIcon = (routeName: string, focused: boolean) => {
+    if (routeName === 'DashboardTab') {
+      return focused ? Images.homeActive : Images.homeInactive;
+    }
+    if (routeName === 'Redeem') {
+      return focused ? Images.redeemActive : Images.redeemInactive;
+    }
+    if (routeName === 'Profile') {
+      return focused ? Images.userRed : Images.user;
+    }
+    if (routeName === 'Help') {
+      return focused ? Images.help : Images.help;
+    }
+    return Images.homeInactive;
+  };
+
+  const getLabel = (routeName: string) => {
+    if (routeName === 'DashboardTab') return 'Home';
+    if (routeName === 'Redeem') return 'Redeem';
+    if (routeName === 'Profile') return 'My Account';
+    if (routeName === 'Help') return 'Help';
+    return routeName;
+  };
+
+  return (
+    <View style={[styles.customTabBar, { 
+      paddingBottom: Math.max(VSCALE(8), insets.bottom + VSCALE(4)),
+      height: getTabBarHeight() + Math.max(insets.bottom, VSCALE(8)),
+    }]}>
+      {visibleRoutes.map((route: any) => {
+        const originalIndex = state.routes.findIndex((r: any) => r.key === route.key);
+        const isFocused = state.index === originalIndex;
+        
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            // Reset DashboardTab to Dashboard screen when switching to it
+            if (route.name === 'DashboardTab') {
+              navigation.dispatch(
+                CommonActions.navigate({
+                  name: 'DashboardTab',
+                  params: { screen: 'Dashboard' },
+                })
+              );
+            } else {
+              navigation.navigate(route.name);
+            }
+          }
+        };
+
+        return (
+          <TouchableOpacity
+            key={route.key}
+            activeOpacity={0.7}
+            onPress={onPress}
+            style={styles.tabItem}
+          >
+            <View style={styles.tabItemContent}>
+              <CustomImage
+                source={getIcon(route.name, isFocused)}
+                imgStyle={{ width: iconSize, height: iconSize }}
+              />
+              <Text 
+                style={[
+                  styles.tabLabel,
+                  { color: isFocused ? '#DC291E' : '#1F2937' }
+                ]}
+              >
+                {getLabel(route.name)}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+interface SDKMainTabNavigatorProps {
+  initialTab?: string;
+}
+
+const SDKMainTabNavigator: React.FC<SDKMainTabNavigatorProps> = ({ initialTab }) => {
+  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
+
+  // Determine initial route
+  const getInitialRouteName = (): string => {
+    if (!initialTab) return 'DashboardTab';
+    
+    const normalized = initialTab.toLowerCase();
+    // Match dashboard variants
+    if (
+      normalized === 'dashboard' ||
+      normalized === 'dashboard-screen' ||
+      normalized === 'dashboard_screen' ||
+      normalized === 'dashboardscreen' ||
+      normalized === 'home'
+    ) {
+      return 'DashboardTab';
+    }
+    // Match exact 'redeem' or redeem-screen variants, but NOT redemptionhistory/redemption-history
+    if (
+      normalized === 'redeem' ||
+      normalized === 'redeem-screen' ||
+      normalized === 'redeem_screen' ||
+      normalized === 'redeemscreen'
+    ) {
+      return 'Redeem';
+    }
+    if (normalized === 'profile') {
+      return 'Profile';
+    }
+    if (normalized === 'help') {
+      return 'Help';
+    }
+    // For deep link targets like RedemptionHistory, keep DashboardTab as initial
+    // The deep link navigation in SDKApp.tsx will handle navigating to the target screen
+    return 'DashboardTab';
+  };
+
+  const initialRouteName = getInitialRouteName();
+
+  // Keyboard listener
+  React.useEffect(() => {
+    const showListener = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
+    const hideListener = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container} edges={['bottom']}>
+      <View style={styles.mainContainer}>
+        <Tab.Navigator
+          initialRouteName={initialRouteName}
+          backBehavior="history"
+          tabBar={(props) => keyboardVisible ? null : <CustomTabBar {...props} />}
+          screenOptions={({ route }) => {
+            const routeName = getFocusedRouteNameFromRoute(route) ?? '';
+            const hideOnScreens = ['TnC', 'FAQ', 'TransactionSuccessful', 'RedemptionHistory', 'MyOrders', 'ProductDetail', 'MyCart', 'OrderDetails'];
+
+            return {
+              headerShown: false,
+              tabBarStyle: hideOnScreens.includes(routeName) 
+                ? { display: 'none' as const }
+                : undefined,
+            };
+          }}
+        >
+          {/* Main visible tabs */}
+          <Tab.Screen name="DashboardTab" component={DashboardStack} options={{ tabBarLabel: 'Home' }} />
+          <Tab.Screen name="Redeem" component={Redeem} options={{ tabBarLabel: 'Redeem' }} />
+          <Tab.Screen name="Profile" component={SDKProfileWrapper} options={{ tabBarLabel: 'My Account' }} />
+          <Tab.Screen name="Help" component={Help} options={{ tabBarLabel: 'Help' }} />
+          
+          {/* Hidden screens - accessible via navigation but not shown in tab bar */}
+          <Tab.Screen name="RedemptionHistory" component={RedemptionHistory} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="MyOrders" component={MyOrders} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="OrderDetails" component={OrderDetails as any} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="FAQ" component={FAQ} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="TnC" component={TnC} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="ProductDetail" component={ProductDetail} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="MyEVouchers" component={MyEVouchers} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="MyCart" component={MyCart} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="PointsLog" component={PointsLog} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="DeliveryAddress" component={DeliveryAddress} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="NewDeliveryAddress" component={NewDeliveryAddress as any} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="PaymentMethod" component={PaymentMethod} options={{ tabBarButton: () => null }} />
+          <Tab.Screen name="TransactionSuccessful" component={TransactionSuccessful} options={{ tabBarButton: () => null }} />
+        </Tab.Navigator>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    width: screenWidth,
+  },
+  mainContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+    width: screenWidth,
+  },
+  customTabBar: {
+    flexDirection: 'row',
+    width: screenWidth,
+    backgroundColor: '#FFFFFF',
+    borderTopWidth: 1,
+    borderTopColor: '#E5E7EB',
+    paddingTop: VSCALE(8),
+  },
+  tabItem: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: VSCALE(45),
+  },
+  tabItemContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tabLabel: {
+    fontSize: SCALE(10),
+    marginTop: VSCALE(3),
+    fontWeight: '400',
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default SDKMainTabNavigator;

package/src/navigation/SDKNavigator.tsx

@@ -0,0 +1,41 @@
+/**
+ * SDK Navigator
+ * 
+ * Navigation structure for the SDK.
+ * Uses a Stack Navigator wrapping SDKMainTabNavigator.
+ */
+
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { SDKParams } from '../types';
+import SDKMainTabNavigator from './SDKMainTabNavigator';
+import SDKBackHandler from '../components/SDKBackHandler';
+
+const Stack = createStackNavigator<any>();
+
+interface SDKNavigatorProps {
+  initialParams: SDKParams;
+  initialRouteOverride?: string; // Override initial route for deep linking
+}
+
+const SDKNavigator: React.FC<SDKNavigatorProps> = ({ initialParams, initialRouteOverride }) => {
+  console.log('🔍 SDKNavigator: initialRouteOverride=', initialRouteOverride);
+  
+  return (
+    <SDKBackHandler>
+      <Stack.Navigator
+        screenOptions={{
+          headerShown: false,
+          gestureEnabled: false,
+        }}
+        initialRouteName="MainTabs"
+      >
+        <Stack.Screen name="MainTabs" options={{ gestureEnabled: false }}>
+          {() => <SDKMainTabNavigator initialTab={initialRouteOverride} />}
+        </Stack.Screen>
+      </Stack.Navigator>
+    </SDKBackHandler>
+  );
+};
+
+export default SDKNavigator;

package/src/redux/store.ts

@@ -0,0 +1,32 @@
+/**
+ * Redux Store for SDK
+ * 
+ * This is a copy/adaptation of the main app's store.
+ * The SDK should have its own isolated Redux store.
+ */
+
+import { configureStore } from '@reduxjs/toolkit';
+import authReducer from 'src-app/redux/authSlice';
+import rootSaga from 'src-app/redux/rootSaga';
+
+const createSagaMiddleware = require('redux-saga').default;
+const sagaMiddleware = createSagaMiddleware();
+
+export const store = configureStore({
+  reducer: {
+    auth: authReducer,
+  },
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      thunk: false,
+      serializableCheck: {
+        ignoredActions: ['auth/uploadProfileImageRequest'],
+        ignoredActionPaths: ['payload'],
+      },
+    }).concat(sagaMiddleware),
+});
+
+sagaMiddleware.run(rootSaga);
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;