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

package/src/screens/RedemptionHistory/index.tsx

@@ -0,0 +1,304 @@
+import React, {useEffect, useMemo, useState, useCallback } from "react";
+import { View, Text, ScrollView, StyleSheet, NativeModules } from "react-native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import { AppStackParamList } from "../../../src-app/types/navigation";
+import MobileHeader from "../../../src-app/components/MobileHeader";
+import styles from "./styles";
+import { RouteProp, useFocusEffect, useRoute } from "@react-navigation/native";
+import { useAppSelector } from "../../../src-app/hooks/useAppSelector";
+import { useAppDispatch } from "../../../src-app/hooks/useAppDispatch";
+import { RootState } from "../../../src-app/redux/store";
+import {
+  CustomImage,
+  CustomLoader,
+  NoDataFound,
+} from "../../../src-app/components";
+import Images from "../../../src-app/constants/Images";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { OrderNo, PointsRedeemed, RedemptionHistoryTitle } from "./RedemptionHistory.constants";
+import { useSDKContext } from '../../contexts/SDKContext';
+import OTPModal from "../../../src-app/components/OTPModal";
+import {
+  clearAllAuthState,
+  myOrdersGenerateOtpRequest,
+  myOrdersValidateOtpRequest,
+  resetAuthState,
+} from "../../../src-app/redux/authSlice";
+import { ROUTES } from "../../../src-app/constants/Routes";
+
+type RedemptionHistoryNavigationProp = StackNavigationProp<
+  AppStackParamList,
+  "RedemptionHistory"
+>;
+
+interface Props {
+  navigation: RedemptionHistoryNavigationProp;
+}
+
+type RedemptionHistoryRouteProp = RouteProp<
+  AppStackParamList,
+  "RedemptionHistory"
+>;
+
+const TAB_LIKE_OFFSET = 210;
+
+const RedemptionHistory: React.FC<Props> = ({ navigation }) => {
+  const route = useRoute<RedemptionHistoryRouteProp>();
+  const from = route.params?.from;
+  const exitToHost = (route.params as any)?.exitToHost;
+  const insets = useSafeAreaInsets();
+  const { isDeepLinkEntry } = useSDKContext();
+  const dispatch = useAppDispatch();
+  
+  // OTP modal state for deep link entry or direct access without prior OTP verification
+  const [otpModalVisible, setOtpModalVisible] = useState(false);
+  const [resetOtpTrigger, setResetOtpTrigger] = useState(0);
+  const [hasTriggeredOtp, setHasTriggeredOtp] = useState(false);
+
+  // Add mount logging
+  React.useEffect(() => {
+    console.log('🚀 RedemptionHistory MOUNTED with params:', { from, exitToHost, isDeepLinkEntry });
+    return () => {
+      console.log('🚀 RedemptionHistory UNMOUNTED');
+    };
+  }, []);
+
+  React.useEffect(() => {
+    console.log('🚀 RedemptionHistory route params changed:', { from, exitToHost });
+  }, [from, exitToHost]);
+
+  const handleGoBack = () => {
+    // If deep-linked from host app, exit SDK instead of navigating back
+    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) {
+        NativeModules.PropelSDKBridge.closeSDK();
+      } else if (NativeModules.PropelSDKBridge?.dismiss) {
+        NativeModules.PropelSDKBridge.dismiss();
+      }
+      return true;
+    }
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+      return true;
+    }
+    // Fallback: navigate to originating screen or Dashboard
+    if (from) {
+      navigation.navigate(from as never);
+      return true;
+    }
+    navigation.navigate('DashboardTab' as never, { screen: 'Dashboard' });
+    return true;
+  };
+
+  // Use myOrdersValidateOtpData from OTP verification (same as MyOrders screen)
+  const {
+    myOrdersValidateOtpData,
+    myOrdersValidateOtpLoading,
+    myOrdersValidateOtpError,
+    myOrdersValidateOtpSuccessMessage,
+    sdkAuthData,
+  } = useAppSelector((state: RootState) => state.auth);
+
+  // Check if we need to show OTP modal on mount (deep link or direct access without data)
+  useFocusEffect(
+    React.useCallback(() => {
+      console.log('📝 RedemptionHistory: Focus effect - checking if OTP needed', {
+        isDeepLinkEntry,
+        from,
+        hasData: !!myOrdersValidateOtpData?.length,
+        hasTriggeredOtp,
+        hasSDKAuth: !!sdkAuthData?.session?.token,
+      });
+      
+      // Wait for SDK authentication to complete before generating OTP
+      // This ensures the auth token is available for the OTP API call
+      if (!sdkAuthData?.session?.token) {
+        console.log('📝 RedemptionHistory: Waiting for SDK auth to complete before OTP generation');
+        return;
+      }
+      
+      // Show OTP modal if:
+      // 1. Deep link entry and no data yet
+      // 2. Direct access (not from Dashboard/Profile OTP flow) and no data
+      const needsOtp = !myOrdersValidateOtpData?.length && !hasTriggeredOtp;
+      
+      if (needsOtp && (isDeepLinkEntry || from === 'DeepLink' || !from)) {
+        console.log('📝 RedemptionHistory: Showing OTP modal for authentication');
+        setHasTriggeredOtp(true);
+        setOtpModalVisible(true);
+        dispatch(myOrdersGenerateOtpRequest({}));
+      }
+    }, [isDeepLinkEntry, from, myOrdersValidateOtpData, hasTriggeredOtp, dispatch, sdkAuthData])
+  );
+
+  // Handle OTP validation success
+  useEffect(() => {
+    if (otpModalVisible && myOrdersValidateOtpSuccessMessage) {
+      console.log('📝 RedemptionHistory: OTP validated successfully, closing modal');
+      setOtpModalVisible(false);
+      dispatch(resetAuthState("myOrdersValidateOtpSuccessMessage" as any));
+      dispatch(resetAuthState("myOrdersValidateOtpError" as any));
+    }
+  }, [otpModalVisible, myOrdersValidateOtpSuccessMessage, dispatch]);
+
+  // Close OTP modal when screen loses focus
+  useFocusEffect(
+    useCallback(() => {
+      return () => {
+        // This runs when the screen loses focus (unmounts or navigates away)
+        console.log('📝 RedemptionHistory: Screen losing focus, closing OTP modal');
+        setOtpModalVisible(false);
+      };
+    }, [])
+  );
+
+  const handleVerify = async (otp: string) => {
+    console.log('📝 RedemptionHistory: Verifying OTP:', otp);
+    try {
+      dispatch(
+        myOrdersValidateOtpRequest({
+          otp: otp,
+        })
+      );
+    } catch (error) {
+      console.error("Error verifying OTP:", error);
+    }
+  };
+
+  // Debug API data changes
+  useEffect(() => {
+    console.log('📋 RedemptionHistory: myOrdersValidateOtpData changed:', {
+      isArray: Array.isArray(myOrdersValidateOtpData),
+      length: myOrdersValidateOtpData?.length,
+      data: myOrdersValidateOtpData,
+    });
+  }, [myOrdersValidateOtpData]);
+
+  // Use actual data from myOrdersValidateOtpData (orders API via OTP verification)
+  const displayData = useMemo(() => {
+    if (Array.isArray(myOrdersValidateOtpData) && myOrdersValidateOtpData.length > 0) {
+      console.log('📋 RedemptionHistory: Using orders API data', myOrdersValidateOtpData.length, 'items');
+      console.log('📋 RedemptionHistory: API data sample:', myOrdersValidateOtpData[0]);
+      return myOrdersValidateOtpData;
+    }
+    // Return empty array if no data from backend
+    console.log('📋 RedemptionHistory: No data from backend, showing empty state');
+    return [];
+  }, [myOrdersValidateOtpData]);
+
+  const formatDate = (isoDate: string) => {
+    const date = new Date(isoDate);
+    const day = date.toLocaleString("en-GB", { day: "2-digit" });
+    const month = date.toLocaleString("en-GB", { month: "long" });
+    const year = date.getFullYear();
+    return `${day} ${month}, ${year}`;
+  };
+
+  const emptyStateStyle = useMemo(
+    () =>
+      StyleSheet.create({
+        root: {
+          flex: 1,
+          justifyContent: "center",
+          paddingBottom: (insets?.bottom ?? 0) + TAB_LIKE_OFFSET,
+        },
+      }).root,
+    [insets?.bottom]
+  );
+
+  // Show loader only when loading and no error
+  const showLoader = !myOrdersValidateOtpError && myOrdersValidateOtpLoading;
+  const hasData = displayData.length > 0;
+
+  // Debug logging
+  console.log('📋 RedemptionHistory RENDER:', {
+    showLoader,
+    hasData,
+    displayDataLength: displayData.length,
+    myOrdersValidateOtpLoading,
+    myOrdersValidateOtpError: !!myOrdersValidateOtpError,
+    firstItem: displayData[0] ? { id: displayData[0].id, order_no: displayData[0].order_no } : null,
+  });
+
+  return (
+    <View style={styles.container}>
+      {/* Debug indicator - remove after testing */}
+
+      <MobileHeader
+        title={RedemptionHistoryTitle}
+        showBack
+        onBack={() => handleGoBack()}
+        disableSafeAreaPadding={true}
+      />
+
+      <OTPModal
+        visible={otpModalVisible}
+        onClose={() => {
+          setOtpModalVisible(false);
+          dispatch(resetAuthState("myOrdersGenerateOtpError" as any));
+          dispatch(resetAuthState("myOrdersValidateOtpError" as any));
+          dispatch(resetAuthState("myOrdersValidateOtpSuccessMessage" as any));
+          // If user closes OTP modal without verifying, go back
+          if (!myOrdersValidateOtpData?.length) {
+            handleGoBack();
+          }
+        }}
+        onVerify={(otp) => {
+          handleVerify(otp);
+          setResetOtpTrigger((prev) => prev + 1);
+        }}
+        onResend={() => dispatch(myOrdersGenerateOtpRequest({}))}
+        onNavigateToOrders={() => {}}
+        resetOtpTrigger={resetOtpTrigger}
+        otpLength={4}
+        screen={ROUTES.REDEMPTION_HISTORY}
+      />
+
+      {showLoader ? (
+        <CustomLoader loading />
+      ) : hasData ? (
+        <ScrollView
+          style={styles.scrollView}
+          showsVerticalScrollIndicator={false}
+        >
+          <View style={styles.content}>
+            {displayData.map((item, index) => {
+              console.log('📋 RedemptionHistory item:', index, item?.order_no, item?.total_points);
+              return (
+              <View key={index}>
+                <View style={styles.redemptionItem}>
+                  <View style={styles.itemDetails}>
+                    <Text style={styles.itemTitle}>{PointsRedeemed}</Text>
+                    <Text style={styles.itemOrderNo}>
+                      {OrderNo} {item?.order_no}
+                    </Text>
+                    <Text style={styles.itemDate}>
+                      {formatDate(item?.created_at || item?.date)}
+                    </Text>
+                  </View>
+                  <View style={styles.itemPoints}>
+                    <CustomImage
+                      source={Images.arrowred}
+                      imgStyle={styles.arrowIcon}
+                    />
+                    <Text style={styles.pointsValue}>{(item?.amount_cents || 0) / 100}</Text>
+                  </View>
+                </View>
+                {index < displayData.length - 1 && (
+                  <View style={styles.separator} />
+                )}
+              </View>
+            )})}
+          </View>
+        </ScrollView>
+      ) : (
+        <NoDataFound containerstyle={emptyStateStyle} />
+      )}
+
+    </View>
+  );
+};
+
+export default RedemptionHistory;

package/src/screens/RedemptionHistory/styles.ts

@@ -0,0 +1,84 @@
+import { StyleSheet } from 'react-native';
+
+import FontFamily from '../../../src-app/constants/Fonts';
+import { colors } from '../../../src-app/styles/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  content: {
+    padding: 20,
+    // paddingTop: 20,
+    // paddingBottom: 100, // Space for tab bar
+  },
+  redemptionItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    paddingVertical: 0,
+  },
+  itemDetails: {
+    width: 193,
+    gap: 8,
+  },
+  itemTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '600',
+    lineHeight: 18,
+    color: '#1F2937',
+    textTransform: 'capitalize',
+  },
+  itemOrderNo: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: 18,
+    color: '#6B7280',
+    textTransform: 'capitalize',
+  },
+  itemDate: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 10,
+    fontWeight: '400',
+    color: '#6B7280',
+    textTransform: 'capitalize',
+  },
+  itemPoints: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  pointsValue: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    textAlign: 'right',
+    textTransform: 'capitalize',
+  },
+  separator: {
+    width: '100%',
+    height: 1.2,
+    backgroundColor: 'rgba(209, 213, 219, 0.45)',
+    marginVertical: 20,
+  },
+  arrowIcon: {
+    height: 10,
+    width: 8,
+    resizeMode: 'contain',
+  },
+  emptyText: {
+    textAlign: 'center',
+    marginTop: 20,
+    fontSize: 16,
+    color: 'black',
+  },
+});
+
+export default styles;