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

package/src/screens/Dashboard/index.tsx

@@ -0,0 +1,531 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  Platform,
+  FlatList,
+  ImageBackground,
+  Dimensions,
+  NativeModules,
+} from "react-native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import { AppStackParamList } from "../../../src-app/types/navigation";
+import styles from "./styles";
+import { CustomImage, CustomMessagePopUp } from "../../../src-app/components";
+import Images from "../../../src-app/constants/Images";
+import OTPModal from "../../../src-app/components/OTPModal";
+import { useAppDispatch } from "../../../src-app/hooks/useAppDispatch";
+import {
+  clearAllAuthState,
+  dashboardInfoRequest,
+  generateEVouchersRequest,
+  myOrdersGenerateOtpRequest,
+  myOrdersValidateOtpRequest,
+  resetAuthState,
+  sdkAuthRequest,
+  validateEVouchersRequest,
+  viewMyCartRequest,
+} from "../../../src-app/redux/authSlice";
+import DeviceInfo from "react-native-device-info";
+import { useAppSelector } from "../../../src-app/hooks/useAppSelector";
+import { RootState } from "../../../src-app/redux/store";
+import { SafeAreaView } from "react-native-safe-area-context";
+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";
+
+type DashboardNavigationProp = StackNavigationProp<
+  AppStackParamList,
+  "Dashboard",
+  "MyEVouchers"
+>;
+
+interface Props {
+  navigation: DashboardNavigationProp;
+}
+
+const Dashboard: React.FC<Props> = ({ navigation }) => {
+  const [otpModalVisible, setOtpModalVisible] = useState(false);
+  const dispatch = useAppDispatch();
+  const [resetOtpTrigger, setResetOtpTrigger] = useState(0);
+  const [messagepopUpVisible, setMessagepopUpVisible] = useState(false);
+  const [screen, setScreen] = useState("");
+
+  // Debug screen state changes
+  useEffect(() => {
+    console.log("🔍 Dashboard screen state changed to:", screen);
+  }, [screen]);
+
+  const {
+    dashboardInfoData,
+    myOrdersGenerateOtpError,
+    myOrdersValidateOtpError,
+    myOrdersValidateOtpSuccessMessage,
+    validateEVouchersData,
+    validateEVouchersSuccessMessage,
+    validateEVouchersError,
+    cartId,
+    viewMyCartData,
+    myOrdersValidateOtpLoading,
+    validateEVouchersLoading,
+    sdkAuthLoading,
+    sdkAuthError,
+    sdkAuthData,
+  } = useAppSelector((state: RootState) => state.auth);
+
+  const backPressedOnce = useRef(false);
+  const dashboardInfoLoading = useAppSelector(
+    (s: RootState) => s.auth.dashboardInfoLoading,
+  );
+
+  console.log(
+    "myOrdersValidateOtpSuccessMessage",
+    myOrdersValidateOtpSuccessMessage,
+  );
+  console.log("otpModalVisible", otpModalVisible);
+
+  useEffect(() => {
+    if (otpModalVisible && myOrdersValidateOtpSuccessMessage) {
+      setOtpModalVisible(false);
+      // Navigate based on which screen triggered the OTP flow
+      if (screen === ROUTES.REDEMPTION_HISTORY) {
+        navigateToDashboardScreen("RedemptionHistory", { from: "Dashboard" });
+      } else {
+        navigateToDashboardScreen("MyOrders", { from: "Dashboard" });
+      }
+      dispatch(resetAuthState("myOrdersValidateOtpSuccessMessage"));
+      dispatch(resetAuthState("myOrdersValidateOtpError"));
+    }
+  }, [
+    otpModalVisible,
+    screen,
+    myOrdersValidateOtpSuccessMessage,
+    navigation,
+    dispatch,
+  ]);
+
+  useEffect(() => {
+    if (
+      otpModalVisible &&
+      screen === ROUTES.MY_E_VOUCHERS &&
+      validateEVouchersSuccessMessage
+    ) {
+      setOtpModalVisible(false);
+      // navigation.navigate(ROUTES.MY_E_VOUCHERS as any);
+      navigateToDashboardScreen("MyEVouchers", { from: "Dashboard" });
+      dispatch(resetAuthState("validateEVouchersSuccessMessage"));
+      dispatch(resetAuthState("validateEVouchersError"));
+    }
+  }, [
+    otpModalVisible,
+    screen,
+    validateEVouchersSuccessMessage,
+    navigation,
+    dispatch,
+  ]);
+
+  useEffect(() => {
+    if (
+      otpModalVisible &&
+      (myOrdersGenerateOtpError || myOrdersValidateOtpError)
+    ) {
+      setMessagepopUpVisible(true);
+    }
+  }, [otpModalVisible, myOrdersGenerateOtpError, myOrdersValidateOtpError]);
+
+  useEffect(() => {
+    if (otpModalVisible && validateEVouchersError) {
+      setMessagepopUpVisible(true);
+    }
+  }, [otpModalVisible, validateEVouchersError]);
+
+  // Remove the hardware back handler - let SDKBackHandler handle it
+  // The SDKBackHandler will properly handle exit behavior for the Dashboard
+
+  useEffect(() => {
+    // Only call auth API if not already authenticated
+    if (!sdkAuthData?.session?.token) {
+      dispatch(sdkAuthRequest({}));
+    }
+  }, [dispatch, sdkAuthData?.session?.token]);
+
+  useEffect(() => {
+    if (sdkAuthError) {
+      console.log("🔴 SDK Auth failed, closing SDK:", sdkAuthError);
+      if (NativeModules.PropelSDKBridge?.closeSDKWithError) {
+        NativeModules.PropelSDKBridge.closeSDKWithError(sdkAuthError);
+      } else if (NativeModules.PropelSDKBridge?.closeSDK) {
+        NativeModules.PropelSDKBridge.closeSDK();
+      } else if (NativeModules.PropelSDKBridge?.dismiss) {
+        NativeModules.PropelSDKBridge.dismiss();
+      }
+    }
+  }, [sdkAuthError]);
+
+  useEffect(() => {
+    if (sdkAuthData?.session?.token) {
+      dispatch(dashboardInfoRequest({}));
+    }
+  }, [sdkAuthData, dispatch]);
+
+  // Refresh dashboard info when screen comes into focus (e.g., after order completion)
+  useFocusEffect(
+    useCallback(() => {
+      if (sdkAuthData?.session?.token) {
+        dispatch(dashboardInfoRequest({}));
+      }
+    }, [sdkAuthData?.session?.token, dispatch])
+  );
+
+  // Close modals when screen loses focus
+  useFocusEffect(
+    useCallback(() => {
+      return () => {
+        // This runs when the screen loses focus (unmounts or navigates away)
+        console.log('🔍 Dashboard: Screen losing focus, closing modals');
+        setOtpModalVisible(false);
+        setMessagepopUpVisible(false);
+      };
+    }, [])
+  );
+
+  useEffect(() => {
+    dispatch(viewMyCartRequest({ id: cartId }));
+  }, [cartId, dispatch]);
+
+  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
+    console.log("🧭 Dashboard navigateToDashboardScreen:", screenName, params);
+    
+    // Get parent navigator (Tab navigator) to navigate to hidden tabs
+    const parentNav = (navigation as any).getParent?.();
+    if (parentNav?.navigate) {
+      console.log("🧭 Using parent tab navigator for:", screenName);
+      parentNav.navigate(screenName, params);
+    } else {
+      // Fallback to direct navigation within stack
+      console.log("🧭 Using direct navigation for:", screenName);
+      (navigation as any).navigate(screenName, params);
+    }
+  };
+
+  const handleRedemptionHistoryPress = () => {
+    console.log("🟢 Dashboard action pressed: RedemptionHistory");
+    setScreen(ROUTES.REDEMPTION_HISTORY); // Set screen state for API call condition
+    setOtpModalVisible(true);
+    dispatch(myOrdersGenerateOtpRequest({}));
+  };
+
+  const handleMyOrdersPress = () => {
+    console.log("🟢 Dashboard action pressed: MyOrders");
+    setScreen(ROUTES.MY_ORDERS); // Set screen state for API call condition
+    setOtpModalVisible(true);
+    dispatch(myOrdersGenerateOtpRequest({}));
+    // navigateToDashboardScreen("MyOrders", { from: "Dashboard" });
+  };
+
+  const handleMyVouchersPress = () => {
+    console.log("🟢 Dashboard action pressed: MyEVouchers");
+    // navigateToDashboardScreen("MyEVouchers", { from: "Dashboard" });
+    setScreen(ROUTES.MY_E_VOUCHERS);
+    dispatch(resetAuthState("validateEVouchersError" as any));
+    dispatch(resetAuthState("validateEVouchersSuccessMessage" as any));
+    setOtpModalVisible(true);
+    dispatch(generateEVouchersRequest({}));
+  };
+
+  const handleVerify = async (otp: string) => {
+    console.log("🔍 Dashboard handleVerify called with:", { otp, screen });
+    try {
+      if (screen === ROUTES.MY_ORDERS || screen === ROUTES.REDEMPTION_HISTORY) {
+        console.log(
+          "🚀 Dashboard dispatching myOrdersValidateOtpRequest with OTP:",
+          otp,
+        );
+        dispatch(
+          myOrdersValidateOtpRequest({
+            otp: otp,
+          }),
+        );
+      } else if (screen === ROUTES.MY_E_VOUCHERS) {
+        console.log(
+          "🚀 Dashboard dispatching validateEVouchersRequest with OTP:",
+          otp,
+        );
+        dispatch(
+          validateEVouchersRequest({
+            otp: otp,
+          }),
+        );
+      } else {
+        console.log("⚠️ Dashboard handleVerify: No matching screen condition", {
+          screen,
+          MY_ORDERS: ROUTES.MY_ORDERS,
+          MY_E_VOUCHERS: ROUTES.MY_E_VOUCHERS,
+          REDEMPTION_HISTORY: ROUTES.REDEMPTION_HISTORY,
+        });
+      }
+    } catch (error) {
+      console.error("Error getting dynamic headers:", error);
+    }
+  };
+
+  const navigateToCart = () => {
+    console.log("🧭 Dashboard navigateToCart called");
+    // Use the same logic as navigateToDashboardScreen for consistency
+    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 },
+    { id: "2", name: "Home Goods", image: Images.categoryHomeGoods },
+    { id: "3", name: "Footwear", image: Images.categoryFootwear },
+    { id: "4", name: "Accessories", image: Images.categoryAccessories },
+  ];
+
+  // E-vouchers data with actual logos
+  const eVouchersData = [
+    { id: "1", name: "Myntra", logo: Images.myntraLogo },
+    { id: "2", name: "Flipkart", logo: Images.flipkartLogo },
+    { id: "3", name: "Amazon", logo: Images.amazonLogo },
+    { id: "4", name: "Nike", logo: Images.nikeLogo },
+  ];
+
+  const renderCategoryItem = ({ item }: { item: any }) => (
+    <TouchableOpacity style={styles.categoryItem} activeOpacity={0.7} onPress={() => navigateToDashboardScreen("Redeem")}>
+      <View style={styles.categoryImageContainer}>
+        <CustomImage source={item.image} imgStyle={styles.categoryImage} />
+      </View>
+      <Text style={styles.categoryName}>{item.name}</Text>
+    </TouchableOpacity>
+  );
+
+  const renderEVoucherItem = ({ item }: { item: any }) => (
+    <TouchableOpacity style={styles.eVoucherItem} activeOpacity={0.7} onPress={() => navigateToDashboardScreen("Redeem")}>
+      <View style={styles.eVoucherImageContainer}>
+        <CustomImage source={item.logo} imgStyle={styles.eVoucherLogo} />
+      </View>
+      <Text style={styles.eVoucherName}>{item.name}</Text>
+    </TouchableOpacity>
+  );
+
+  return (
+    <SafeAreaView style={[styles.container]}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollViewContent}
+        showsVerticalScrollIndicator={false}
+        bounces={true}
+        nestedScrollEnabled={true}
+      >
+        <View style={styles.headerSection}>
+          <View style={styles.userInfo}>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              style={styles.backButton}
+              onPress={handleBackToHost}
+            >
+              <CustomImage
+                source={Images.arrowBack}
+                imgStyle={styles.backArrowIcon}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              style={styles.avatar}
+              onPress={() => navigation.navigate("Profile")}
+            >
+              <Text style={styles.avatarText}>
+                {dashboardInfoData?.name?.slice(0, 2)?.toUpperCase() || "BK"}
+              </Text>
+            </TouchableOpacity>
+            <View style={styles.userDetails}>
+              <Text style={styles.greeting}>Hello!</Text>
+              <Text style={styles.userName}>{dashboardInfoData?.name || ''}</Text>
+            </View>
+          </View>
+          <View style={styles.headerIcons}>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              style={styles.cartButton}
+              onPress={() => navigateToCart()}
+            >
+              <View style={styles.cartCountContainer}>
+                <Text style={styles.cartCountText}>
+                  {viewMyCartData?.items?.length || 0}
+                </Text>
+              </View>
+              <CustomImage source={Images.cart} imgStyle={styles.headerIcon} />
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {/* Header Section with Floral Background */}
+        <ImageBackground
+          source={Images.floralBackground}
+          style={styles.headerBackground}
+          resizeMode="cover"
+        >
+          {/* Points Card */}
+          <View style={styles.pointsCardContainer}>
+            <View style={styles.pointsCard}>
+              <View style={styles.pointsCardLeft}>
+                <CustomImage
+                  source={Images.coinIcon}
+                  imgStyle={styles.coinIcon}
+                />
+              </View>
+              <View style={styles.pointsCardCenter}>
+                <Text style={styles.yourPointsLabel}>Your Points</Text>
+                <Text style={styles.pointsValue} numberOfLines={1}>
+                  {dashboardInfoData?.current_balance || '0'}
+                </Text>
+              </View>
+              <TouchableOpacity
+                activeOpacity={0.7}
+                style={styles.redeemButton}
+                onPress={() => navigateToDashboardScreen("Redeem")}
+              >
+                <Text style={styles.redeemButtonText}>Redeem Now</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </ImageBackground>
+
+        {/* Action Buttons */}
+        <View style={styles.actionsSection}>
+          <TouchableOpacity
+            style={styles.actionItem}
+            onPress={handleRedemptionHistoryPress}
+            activeOpacity={0.7}
+          >
+            <CustomImage
+              source={Images.redemptionHistory}
+              imgStyle={styles.actionIcon}
+            />
+            <Text style={styles.actionLabel}>Redemption{"\n"}History</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={styles.actionItem}
+            onPress={handleMyOrdersPress}
+          >
+            <CustomImage
+              source={Images.myOrders}
+              imgStyle={styles.actionIcon}
+            />
+            <Text style={styles.actionLabel}>My Orders</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            activeOpacity={0.7}
+            onPress={handleMyVouchersPress}
+            style={styles.actionItem}
+          >
+            <CustomImage
+              source={Images.eVoucher}
+              imgStyle={styles.actionIcon}
+            />
+            <Text style={styles.actionLabel}>My Vouchers</Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* Discount Banner */}
+        <View style={styles.bannerSection}>
+          <CustomImage
+            source={Images.discountBanner}
+            imgStyle={styles.discountBanner}
+          />
+        </View>
+
+        {/* Our Categories Section */}
+        <TouchableOpacity style={styles.sectionContainer} activeOpacity={0.7} onPress={() => navigateToDashboardScreen("Redeem")}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>Our Categories</Text>
+            <TouchableOpacity activeOpacity={0.7} onPress={() => navigateToDashboardScreen("Redeem")}>
+              <Text style={styles.viewAllText}>View all</Text>
+            </TouchableOpacity>
+          </View>
+          <FlatList
+            data={categoriesData}
+            renderItem={renderCategoryItem}
+            keyExtractor={(item) => item.id}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.categoriesList}
+          />
+        </TouchableOpacity>
+
+        {/* E-Vouchers Section */}
+        <TouchableOpacity style={styles.sectionContainer} activeOpacity={0.7} onPress={() => navigateToDashboardScreen("Redeem")}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>E-Vouchers</Text>
+            <TouchableOpacity activeOpacity={0.7} onPress={() => navigateToDashboardScreen("Redeem")}>
+              <Text style={styles.viewAllText}>View all</Text>
+            </TouchableOpacity>
+          </View>
+          <FlatList
+            data={eVouchersData}
+            renderItem={renderEVoucherItem}
+            keyExtractor={(item) => item.id}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.eVouchersList}
+          />
+        </TouchableOpacity>
+      </ScrollView>
+      <OTPModal
+        visible={otpModalVisible}
+        onClose={() => {
+          setOtpModalVisible(false);
+          setScreen("");
+          dispatch(resetAuthState("myOrdersGenerateOtpError"));
+          dispatch(resetAuthState("myOrdersValidateOtpError"));
+          dispatch(resetAuthState("myOrdersValidateOtpSuccessMessage"));
+          dispatch(resetAuthState("validateEVouchersError"));
+          dispatch(resetAuthState("validateEVouchersSuccessMessage"));
+        }}
+        onVerify={(otp) => {
+          handleVerify(otp);
+          setResetOtpTrigger((prev) => prev + 1);
+        }}
+        onResend={() => {
+          dispatch(resetAuthState("myOrdersGenerateOtpError" as any));
+          dispatch(resetAuthState("myOrdersValidateOtpError" as any));
+          dispatch(resetAuthState("validateEVouchersError" as any));
+
+          if (screen === ROUTES.MY_ORDERS || screen === ROUTES.REDEMPTION_HISTORY) {
+            dispatch(myOrdersGenerateOtpRequest({}));
+          } else if (screen === ROUTES.MY_E_VOUCHERS) {
+            dispatch(generateEVouchersRequest({}));
+          }
+        }}
+        onNavigateToOrders={() => {}}
+        resetOtpTrigger={resetOtpTrigger}
+        otpLength={4}
+        screen={screen}
+      />
+      <CustomLoader
+        loading={!!sdkAuthLoading || !!dashboardInfoLoading}
+        text={sdkAuthLoading ? "Authenticating..." : "Please wait..."}
+        fullScreen
+      />
+    </SafeAreaView>
+  );
+};
+
+export default Dashboard;