@propel-nsl/propel-react-native-sdk 1.1.3 → 1.1.5

package/package.json

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

package/src/navigation/SDKMainTabNavigator.tsx

@@ -54,12 +54,12 @@ const HIDDEN_SCREENS = [
 
 const getTabBarHeight = (): number => {
   if (Platform.OS === 'ios') {
-    return screenHeight > 800 ? VSCALE(40) : VSCALE(45);
+    return screenHeight > 800 ? VSCALE(50) : VSCALE(55);
   }
   if (Platform.OS === 'android') {
-    return screenHeight > 800 ? VSCALE(35) : VSCALE(55);
+    return screenHeight > 800 ? VSCALE(50) : VSCALE(60);
   }
-  return VSCALE(50);
+  return VSCALE(55);
 };
 
 // DashboardStack - contains Dashboard and its nested screens
@@ -289,22 +289,26 @@ const styles = StyleSheet.create({
     backgroundColor: '#FFFFFF',
     borderTopWidth: 1,
     borderTopColor: '#E5E7EB',
-    paddingTop: VSCALE(8),
+    paddingTop: VSCALE(6),
+    paddingHorizontal: SCALE(4),
   },
   tabItem: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    minHeight: VSCALE(45),
+    minHeight: VSCALE(50),
+    paddingVertical: VSCALE(4),
   },
   tabItemContent: {
     alignItems: 'center',
     justifyContent: 'center',
+    gap: VSCALE(2),
   },
   tabLabel: {
-    fontSize: SCALE(10),
-    marginTop: VSCALE(3),
+    fontSize: SCALE(9),
+    marginTop: VSCALE(2),
     fontWeight: '400',
+    textAlign: 'center',
   },
   iconContainer: {
     justifyContent: 'center',

package/src/screens/Dashboard/index.tsx

@@ -384,7 +384,7 @@ const Dashboard: React.FC<Props> = ({ navigation }) => {
                 />
               </View>
               <View style={styles.pointsCardCenter}>
-                <Text style={styles.yourPointsLabel}>Your Points</Text>
+                <Text style={styles.yourPointsLabel}>Your Amount</Text>
                 <Text style={styles.pointsValue} numberOfLines={1}>
                   {dashboardInfoData?.current_balance || '0'}
                 </Text>

package/src/screens/MyCart/index.tsx

@@ -202,7 +202,7 @@ const MyCart: React.FC<MyCartProps> = ({ navigation }) => {
           </Text>
           <CustomImage source={Images.greyDownArrow} imgStyle={styles.icon} />
         </TouchableOpacity>
-        <Text style={styles.productPoints}>{item?.amount_cents / 100} points</Text>
+        <Text style={styles.productPoints}>₹{item?.amount_cents / 100}</Text>
       </View>
     </View>
   );

package/src/screens/OrdersDetails/index.tsx

@@ -189,7 +189,7 @@ const toUrlString = (raw: any): string | null => {
                   Qty : {product?.quantity}
                 </Text>
                 <Text style={styles.productPoints}>
-                  {pointsFromCentsFixed(product?.amount_cents, 1)} Points
+                  {pointsFromCentsFixed(product?.amount_cents, 1)} Amount
                 </Text>
               </View>
             </View>
@@ -264,7 +264,7 @@ const toUrlString = (raw: any): string | null => {
                 setAmountModalVisible(true);
               }}
             >
-              <Text style={styles.totalPoints}>{pointsFromCentsFixed(item?.grand_total, 1)} Points</Text>
+              <Text style={styles.totalPoints}>{pointsFromCentsFixed(item?.grand_total, 1)} Amount</Text>
               <CustomImage
                 source={Images.i_blackIcon}
                 imgStyle={[styles.icon, { width: 16, height: 16 }]}

package/src/screens/PaymentMethod/index.tsx

@@ -139,7 +139,7 @@ const PaymentMethod: React.FC<{
                 onPress={() => setShowPointsBreakdown(!showPointsBreakdown)}
               >
                 <Text style={styles.pointsText}>
-                  {viewMyCartData?.amount_cents / 100} Points
+                  ₹{viewMyCartData?.amount_cents / 100}
                 </Text>
                 <CustomImage
                   source={
@@ -230,7 +230,7 @@ const PaymentMethod: React.FC<{
       <View style={styles.bottomCTA}>
         <View style={styles.priceSection}>
           <Text style={styles.priceText}>
-            {viewMyCartData?.total_amount_cents / 100} points
+            ₹{viewMyCartData?.total_amount_cents / 100}
           </Text>
           <TouchableOpacity
             activeOpacity={0.7}

package/src/screens/PointsLog/index.tsx

@@ -111,7 +111,7 @@ const PointsLog: React.FC<Props> = ({ navigation }) => {
         <Text
           style={[styles.tabText, activeTab === "log" && styles.activeTabText]}
         >
-          Points Log
+          Amount Log
         </Text>
         {activeTab === "log" && <View style={styles.tabIndicator} />}
       </TouchableOpacity>
@@ -222,7 +222,7 @@ const PointsLog: React.FC<Props> = ({ navigation }) => {
             <View key={index}>
               <View style={styles.redemptionItem}>
                 <View style={styles.itemDetails}>
-                  <Text style={styles.itemTitle}>Points Redeemed</Text>
+                  <Text style={styles.itemTitle}>Amount Redeemed</Text>
                   <Text style={styles.itemOrderNo}>
                     Order No : {item?.order_no}
                   </Text>
@@ -255,7 +255,7 @@ const PointsLog: React.FC<Props> = ({ navigation }) => {
   return (
     <View style={styles.container}>
       <MobileHeader
-        title="Apna Points"
+        title="Apna Amount"
         showBack
         onBack={() => {
           if (navigation.canGoBack()) {

package/src/screens/RedemptionHistory/RedemptionHistory.constants.ts

@@ -1,4 +1,4 @@
 export const RedemptionHistoryTitle = "Redemption History"
-export const PointsRedeemed = "Points Redeemed"
+export const PointsRedeemed = "Amount Redeemed"
 export const OrderNo = "Order No :"
 export const Error = "Error";

package/src/screens/Reedem/index.tsx

@@ -1,12 +1,12 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   View,
   Text,
-  ScrollView,
+  FlatList,
   TouchableOpacity,
   SafeAreaView,
-  Dimensions,
   TextInput,
+  ActivityIndicator,
 } from 'react-native';
 import Svg, { Path, G, Defs, ClipPath, Rect } from 'react-native-svg';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
@@ -31,9 +31,6 @@ import {
 import Images from '../../../src-app/constants/Images';
 import { colors } from '../../../src-app/styles/colors';
 import { CATEGORY_LABELS } from '../../../src-app/constants/Labels';
-import { formatPointsRange } from '../../../src-app/constants/Formatter';
-import { NUMBER } from '../../../src-app/constants/Messages';
-import { MAP, PUSH, REDUCE } from '../../../src-app/utils/filterPins';
 import { ROUTES } from '../../../src-app/constants/Routes';
 
 const AmbraneIcon: React.FC = () => (
@@ -137,7 +134,7 @@ const ProductCard: React.FC<{
       <View style={styles.productInfo}>
         <Text style={styles.productTitle}>{title}</Text>
           <Text style={styles.productPoints}>
-            {((priceCents ?? 0) / 100)} Points
+            {((priceCents ?? 0) / 100)} Amount
           </Text>
       
       </View>
@@ -159,12 +156,11 @@ const Redeem: React.FC = () => {
   const [selectedFilters, setSelectedFilters] = useState(DEFAULT_FILTERS);
 
 
-  const { myProductsListError, viewMyCartData } = useAppSelector(
+  const { myProductsListError, viewMyCartData, myProductsListLoadingMore, myProductsListPage, myProductsListHasNextPage } = useAppSelector(
     (state: RootState) => state.auth,
   );
 
-  const screenWidth = Dimensions.get('window').width;
-  const cardWidth = (screenWidth - 60) / 2;
+  const currentFiltersRef = useRef<{ name?: string; product_types?: string; category_ids?: string }>({});
 
   const handleProductPress = (product: ProductData) => {
     console.log('🚀 Redeem navigating to ProductDetail with id:', product?.id);
@@ -185,6 +181,7 @@ const Redeem: React.FC = () => {
       console.log('🏪 Redeem Screen: useFocusEffect triggered - refreshing data');
       setSelectedFilters(DEFAULT_FILTERS);
       setSearchQuery('');
+      currentFiltersRef.current = {};
       dispatch(myProductsListRequest({}));
     }, [dispatch])
   );
@@ -197,19 +194,66 @@ const Redeem: React.FC = () => {
     (state: RootState) => state.auth,
   );
   
+  // Log response data
+  useEffect(() => {
+    console.log('📦 SDK Redeem Response:', JSON.stringify(myProductsListData, null, 2));
+  }, [myProductsListData]);
+  
   const handleSearch = (text: string) => {
     console.log('🔍 Redeem Screen: Search triggered with text:', text);
     setSearchQuery(text);
     if (text.length >= 3) {
       console.log('🔍 Redeem Screen: Dispatching search request with name:', text);
+      currentFiltersRef.current = { ...currentFiltersRef.current, name: text };
       dispatch(myProductsListRequest({ name: text }));
     }
     if (text.length === 0) {
       console.log('🔍 Redeem Screen: Dispatching clear search request');
+      currentFiltersRef.current = { ...currentFiltersRef.current, name: undefined };
       dispatch(myProductsListRequest({}));
     }
   };
 
+  const handleLoadMore = () => {
+    if (!myProductsListHasNextPage || myProductsListLoadingMore || myProductsListLoading) {
+      return;
+    }
+    const nextPage = myProductsListPage + 1;
+    dispatch(myProductsListRequest({ ...currentFiltersRef.current, page: nextPage }));
+  };
+
+  const renderProductItem = ({ item, index }: { item: any; index: number }) => (
+    <View style={{ flex: 1, marginHorizontal: 8, marginBottom: 28 }}>
+      <ProductCard
+        key={index}
+        title={item?.name}
+        priceCents={item?.price?.price_cents}
+        imageUrl={item?.image?.url}
+        category={item?.product_type}
+        logo={
+          item?.logo === 'titan' ? (
+            <TitanLogo />
+          ) : item?.logo === 'ambrane' ? (
+            <AmbraneIcon />
+          ) : item?.logo === 'rayban' ? (
+            <RayBanLogo />
+          ) : undefined
+        }
+        backgroundColor={item?.backgroundColor}
+        onPress={() => handleProductPress(item)}
+      />
+    </View>
+  );
+
+  const renderFooter = () => {
+    if (!myProductsListLoadingMore) return null;
+    return (
+      <View style={styles.paginationFooter}>
+        <ActivityIndicator size="small" color={colors.primary} />
+      </View>
+    );
+  };
+
   const navigateToCart = () => {
     // In SDK, MyCart is a hidden tab screen, navigate directly to it
     navigation.navigate(ROUTES.MyCart as any, { from: ROUTES.REDEEM });
@@ -261,52 +305,22 @@ const Redeem: React.FC = () => {
 
       {myProductsListLoading ? (
         <CustomLoader loading={myProductsListLoading} />
-      ) : (
-        <ScrollView
+      ) : Array.isArray(myProductsListData) && myProductsListData?.length > 0 ? (
+        <FlatList
+          data={myProductsListData}
+          renderItem={renderProductItem}
+          keyExtractor={(item, index) => `${item?.id || index}`}
+          numColumns={2}
+          contentContainerStyle={styles.productsGrid}
+          columnWrapperStyle={styles.productRow}
           style={styles.scrollContainer}
           showsVerticalScrollIndicator={false}
-        >
-          {Array.isArray(myProductsListData) &&
-            myProductsListData?.length > 0 ? (
-            <View style={styles.productsGrid}>
-              {myProductsListData
-                ?.[REDUCE]((rows: any[], product, index) => {
-                  if (index % 2 === 0) {
-                    rows?.[PUSH]([product]);
-                  } else {
-                    rows?.[rows.length - 1]?.[PUSH](product);
-                  }
-                  return rows;
-                }, [])
-                ?.[MAP]((row: any[], rowIndex: number) => (
-                  <View key={rowIndex} style={styles.productRow}>
-                    {row?.[MAP]((product, productIndex) => (
-                      <ProductCard
-                        key={`${rowIndex}-${productIndex}`}
-                        title={product?.name}
-                        priceCents={product?.price?.price_cents}                        imageUrl={product?.image?.url}
-                        category={product?.product_type}
-                        logo={
-                          product?.logo === 'titan' ? (
-                            <TitanLogo />
-                          ) : product?.logo === 'ambrane' ? (
-                            <AmbraneIcon />
-                          ) : product?.logo === 'rayban' ? (
-                            <RayBanLogo />
-                          ) : undefined
-                        }
-                        backgroundColor={product?.backgroundColor}
-                        onPress={() => handleProductPress(product)}
-                      />
-                    ))}
-                    {row?.length === 1 && <View style={{ width: cardWidth }} />}
-                  </View>
-                ))}
-            </View>
-          ) : (
-            <NoDataFound containerstyle={styles.nodataFound} />
-          )}
-        </ScrollView>
+          onEndReached={handleLoadMore}
+          onEndReachedThreshold={0.5}
+          ListFooterComponent={renderFooter}
+        />
+      ) : (
+        <NoDataFound containerstyle={styles.nodataFound} />
       )}
 
       <FilterModal
@@ -318,10 +332,15 @@ const Redeem: React.FC = () => {
         onApply={(filters) => {
           setSelectedFilters(filters);
           setIsFilterModalVisible(false);
+          const ref: any = {};
+          if (filters?.productType) ref.product_types = filters.productType;
+          if (filters?.categories?.length > 0) ref.category_ids = filters.categories.join(',');
+          currentFiltersRef.current = ref;
         }}
         onClear={() => {
           setSelectedFilters(DEFAULT_FILTERS);
           setIsFilterModalVisible(false);
+          currentFiltersRef.current = {};
           dispatch(myProductsListRequest({}));
         }}
       />

package/src/screens/Reedem/styles.ts

@@ -110,8 +110,6 @@ const styles = StyleSheet.create({
   },
   productsGrid: {
     paddingHorizontal: SCALE(20),
-    flexDirection: 'column',
-    gap: VSCALE(28),
     paddingBottom: VSCALE(100),
   },
   productRow: {
@@ -263,7 +261,12 @@ const styles = StyleSheet.create({
   },
   nodataFound:{
     minHeight:450
-  }
+  },
+  paginationFooter: {
+    paddingVertical: VSCALE(20),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
 export default styles;

package/src/screens/TransactionSuccessful/index.tsx

@@ -60,7 +60,7 @@ const TransactionSuccessful: React.FC<Props> = ({ navigation }) => {
         <View style={styles.contentContainer}>
           <CustomImage source={Images.successTick} imgStyle={styles.icon} />
 
-          <Text style={styles.title}>{points} Points</Text>
+          <Text style={styles.title}>{points} Amount</Text>
           <Text style={styles.subtitle}>Transaction Successful</Text>
         </View>
         <CustomButton

package/src-app/components/CustomCard/index.tsx

@@ -147,7 +147,7 @@ const CustomCard: React.FC<CustomCardProps> = ({ data, loading }) => {
             <Text style={styles.productQuantity}>Qty : {quantity}</Text>
           </View>
         </View>
-        <Text style={styles.productPoints}>{item / 100} Points</Text>
+        <Text style={styles.productPoints}>{item / 100} Amount</Text>
       </View>
     );
   };
@@ -168,7 +168,7 @@ const CustomCard: React.FC<CustomCardProps> = ({ data, loading }) => {
             </Text>
           </View>
 
-          <Text style={styles.totalPoints}>{pointsFromCentsFixed(item.grand_total, 2)} Points</Text>
+          <Text style={styles.totalPoints}>{pointsFromCentsFixed(item.grand_total, 2)} Amount</Text>
         </View>
       </View>
 

package/src-app/constants/Messages.ts

@@ -103,6 +103,6 @@ export const DATE = "Date :";
 export const ORDER_NO = "Order No :";
 
 export const AMOUNT_TO_BE_PAID = "Amount to be Paid";
-export const POINTS = "Points";
+export const POINTS = "Amount";
 export const AMOUNT_BREAKDOWN = "Amount Breakdown"
 

package/src-app/redux/authSaga.ts

@@ -166,14 +166,26 @@ function* handleMyProductList(
   const name = action.payload?.name;
   const product_types = action.payload?.product_types;
   const category_ids = action.payload?.category_ids;
+  const page = action.payload?.page || 1;
   try {
     const response = yield call(
       myProductListApi,
       name,
       product_types,
-      category_ids
+      category_ids,
+      page
     );
-    yield put(myProductsListSuccess(response.data));
+    const perPage = 12;
+    const totalRecords = response?.data?.total_records || 0;
+    const totalPages = Math.ceil(totalRecords / perPage);
+    const hasNextPage = page < totalPages;
+
+    yield put(myProductsListSuccess({
+      ...response.data,
+      page,
+      totalPages,
+      hasNextPage,
+    }));
   } catch (error: any) {
     yield put(myProductsListFailure(error?.response?.data?.message));
   }

package/src-app/redux/authSlice.ts

@@ -19,6 +19,10 @@ interface AuthState {
   myProductsListLoading: boolean;
   myProductsListError: string | null;
   myProductsListData: any;
+  myProductsListLoadingMore: boolean;
+  myProductsListPage: number;
+  myProductsListTotalPages: number;
+  myProductsListHasNextPage: boolean;
   myProfileLoading: boolean;
   myProfileError: string | null;
   myProfileData: any;
@@ -118,6 +122,10 @@ const initialState: AuthState = {
   myProductsListLoading: false,
   myProductsListError: null,
   myProductsListData: null,
+  myProductsListLoadingMore: false,
+  myProductsListPage: 1,
+  myProductsListTotalPages: 1,
+  myProductsListHasNextPage: false,
   myProfileLoading: false,
   myProfileError: null,
   myProfileData: null,
@@ -278,17 +286,35 @@ const authSlice = createSlice({
       state.myOrdersError = action.payload;
     },
     myProductsListRequest(state, _action: PayloadAction<any>) {
-      state.myProductsListLoading = true;
+      const page = _action.payload?.page || 1;
+      if (page > 1) {
+        state.myProductsListLoadingMore = true;
+      } else {
+        state.myProductsListLoading = true;
+        state.myProductsListData = null;
+        state.myProductsListPage = 1;
+        state.myProductsListTotalPages = 1;
+        state.myProductsListHasNextPage = false;
+      }
       state.myProductsListError = null;
-      state.myProductsListData = null;
     },
     myProductsListSuccess(state, action: PayloadAction<any>) {
+      const { response, page, totalPages, hasNextPage } = action.payload;
       state.myProductsListLoading = false;
-      state.myProductsListData = action.payload.response;
+      state.myProductsListLoadingMore = false;
+      state.myProductsListPage = page || 1;
+      state.myProductsListTotalPages = totalPages || 1;
+      state.myProductsListHasNextPage = hasNextPage || false;
+      if (page > 1 && Array.isArray(state.myProductsListData) && Array.isArray(response)) {
+        state.myProductsListData = [...state.myProductsListData, ...response];
+      } else {
+        state.myProductsListData = response;
+      }
       state.myProductsListError = null;
     },
     myProductsListFailure(state, action: PayloadAction<any>) {
       state.myProductsListLoading = false;
+      state.myProductsListLoadingMore = false;
       state.myProductsListError = action.payload;
     },
     myProfileRequest(state, _action: PayloadAction<any>) {

package/src-app/services/index.ts

@@ -133,7 +133,8 @@ export const myOrdersApi = async () => {
 export const myProductListApi = async (
   name?: string,
   product_types?: string,
-  category_ids?: string
+  category_ids?: string,
+  page?: number
 ) => {
   try {
     const headers = await getAuthHeader();
@@ -143,6 +144,10 @@ export const myProductListApi = async (
       payment_method: "zaggle_card",
     };
 
+    if (page) {
+      params.page = page;
+    }
+
     if (name) {
       params.by_name = name;
     }
@@ -160,6 +165,12 @@ export const myProductListApi = async (
       params,
     });
 
+    console.log('=== MY PRODUCT LIST API RESPONSE ===');
+    console.log('Status:', response.status);
+    console.log('record count:', response?.data?.total_records);
+    console.log('Response Data:', JSON.stringify(response.data, null, 2));
+    console.log('===================================');
+
     return response;
   } catch (error: any) {
     throw error;