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

package/src/screens/Profile/index.tsx

@@ -0,0 +1,368 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  Alert,
+  Keyboard,
+  TouchableWithoutFeedback,
+  ActivityIndicator,
+} from "react-native";
+import styles from "./styles";
+import { useAppDispatch } from "../../../src-app/hooks/useAppDispatch";
+import {
+  myOrdersGenerateOtpRequest,
+  myOrdersValidateOtpRequest,
+  myProfileRequest,
+  resetAuthState,
+  uploadProfileImageRequest,
+} from "../../../src-app/redux/authSlice";
+import { CustomImage, Logout } from "../../../src-app/components";
+import Images from "../../../src-app/constants/Images";
+import { useAppSelector } from "../../../src-app/hooks/useAppSelector";
+import { RootState } from "../../../src-app/redux/store";
+import { launchImageLibrary } from "react-native-image-picker";
+import OTPModal from "../../../src-app/components/OTPModal";
+import { SafeAreaView } from "react-native-safe-area-context";
+import CustomLoader from "../../../src-app/components/CustomLoader";
+import { useFocusEffect } from "@react-navigation/native";
+import { ROUTES } from "../../../src-app/constants/Routes";
+
+
+interface ProfileProps {
+  navigation?: any;
+}
+
+interface CustomViewProps {
+  icon: React.ReactNode;
+  label: string;
+  onPress: () => void;
+  showSeparator?: boolean;
+}
+
+const CustomView = ({
+  icon,
+  label,
+  onPress,
+  showSeparator = true,
+}: CustomViewProps) => {
+  return (
+    <>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        style={styles.menuItem}
+        onPress={onPress}
+      >
+        <View style={styles.menuItemContent}>
+          {icon}
+          <Text style={styles.menuItemText}>{label}</Text>
+        </View>
+        <CustomImage
+          source={Images.arrowright}
+          imgStyle={styles.arrowRightIcon}
+        />
+      </TouchableOpacity>
+      {showSeparator && <View style={styles.separator} />}
+    </>
+  );
+};
+
+const Profile: React.FC<ProfileProps> = ({ navigation }) => {
+  const dispatch = useAppDispatch();
+  const [otpModalVisible, setOtpModalVisible] = useState(false);
+  const [resetOtpTrigger, setResetOtpTrigger] = useState(0);
+  const [screen, setScreen] = useState(""); // Track which screen triggered OTP flow
+  const {
+    myProfileData,
+    uploadProfileImageLoading,
+    uploadProfileImageError
+  } = useAppSelector((state: RootState) => state.auth);
+  const [logoutModalVisible, setLogoutModalVisible] = useState(false);
+  const myProfileLoading = useAppSelector((state: RootState) => state.auth.myProfileLoading);
+  const { myOrdersValidateOtpSuccessMessage } = useAppSelector(
+  (state: RootState) => state.auth
+);
+
+
+
+  useFocusEffect(
+    useCallback(() => {
+      dispatch(myProfileRequest());
+    }, [dispatch])
+  );
+
+  // Handle upload errors
+  useEffect(() => {
+    if (uploadProfileImageError) {
+      Alert.alert("Upload Failed", uploadProfileImageError);
+    }
+  }, [uploadProfileImageError]);
+
+  useEffect(() => {
+  if (otpModalVisible && myOrdersValidateOtpSuccessMessage) {
+    setOtpModalVisible(false);
+
+    // Navigate based on which screen triggered the OTP flow
+    // With new Root Stack architecture, navigate directly to stack screens
+    if (screen === ROUTES.REDEMPTION_HISTORY) {
+      navigation.navigate("RedemptionHistory", { from: "Profile" });
+    } else {
+      navigation.navigate("MyOrders", { from: "Profile" });
+    }
+
+    setScreen("");
+    dispatch(resetAuthState("myOrdersValidateOtpSuccessMessage" as any));
+    dispatch(resetAuthState("myOrdersValidateOtpError" as any));
+  }
+}, [otpModalVisible, myOrdersValidateOtpSuccessMessage, screen, navigation, dispatch]);
+
+
+  const handleLogout = () => {
+    setLogoutModalVisible(true);
+  };
+
+  const handleMenuPress = (screen: string) => {
+    console.log('🚀 Profile handleMenuPress called with screen:', screen);
+    if (navigation) {
+      switch (screen) {
+        case "TransactionHistory":
+          console.log('🚀 Profile navigating to TransactionHistory/RedemptionHistory - showing OTP modal');
+          setScreen(ROUTES.REDEMPTION_HISTORY);
+          setOtpModalVisible(true);
+          dispatch(myOrdersGenerateOtpRequest({}));
+          break;
+        case "MyOrders":
+          console.log('🚀 Profile navigating to MyOrders - showing OTP modal');
+          setScreen(ROUTES.MY_ORDERS);
+          setOtpModalVisible(true);
+          dispatch(myOrdersGenerateOtpRequest({}));
+          break;
+        case "FAQ":
+          console.log('🚀 Profile navigating to FAQ');
+          navigation.navigate("FAQ", { from: "Profile" });
+          break;
+        case "TnC":
+          console.log('🚀 Profile navigating to TnC');
+          navigation.navigate("TnC", { from: "Profile" });
+          break;
+        default:
+          console.log('🚀 Profile unknown screen:', screen);
+          break;
+      }
+    } else {
+      console.warn('⚠️ Profile navigation is null');
+    }
+  };
+
+  const handleMyProfile = () => {
+    const options = {
+      mediaType: "photo" as const,
+      quality: 0.8 as const,
+      maxWidth: 1000,
+      maxHeight: 1000,
+    };
+
+    launchImageLibrary(options, (response) => {
+      if (response.didCancel) {
+        console.log('User cancelled image picker');
+        return;
+      }
+      if (response.errorCode) {
+        console.error('ImagePicker Error: ', response.errorMessage);
+        Alert.alert("Error", response.errorMessage || "Failed to pick image");
+        return;
+      }
+
+      const asset = response.assets?.[0];
+      if (!asset?.uri) {
+        Alert.alert("Error", "No image selected");
+        return;
+      }
+
+      // Validate file type
+      if (!asset.type?.startsWith('image/')) {
+        Alert.alert("Error", "Please select a valid image file");
+        return;
+      }
+
+      // Validate file size (5MB limit)
+      if (asset.fileSize && asset.fileSize > 5 * 1024 * 1024) {
+        Alert.alert("Error", "Image size should be less than 5MB");
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append("name", myProfileData?.client?.employee?.name || "");
+      // Proper FormData structure for React Native
+      formData.append("image", {
+        uri: asset.uri,
+        type: asset.type,
+        name: asset.fileName || `profile_${Date.now()}.jpg`,
+      } as any);
+
+      console.log('Uploading image:', {
+        uri: asset.uri,
+        type: asset.type,
+        name: asset.fileName,
+        size: asset.fileSize,
+      });
+
+      dispatch(uploadProfileImageRequest(formData));
+    });
+  };
+
+  const handleVerify = async (otp: string) => {
+    try {
+      dispatch(
+        myOrdersValidateOtpRequest({
+          otp: otp,
+        })
+      );
+    } catch (error) {
+      console.error("Error getting dynamic headers:", error);
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container} edges={["top", "bottom"]}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.content}
+        >
+          {/* Profile Section */}
+
+          <TouchableOpacity
+            onPress={handleMyProfile}
+            style={styles.profileSection}
+            disabled={uploadProfileImageLoading}
+          >
+            <View style={styles.avatarContainer}>
+              <Image
+                source={Images.circleblack}
+                style={styles.outerCircle}
+              />
+              <Image
+                source={
+                  myProfileData?.client?.image
+                    ? { uri: myProfileData.client.image }
+                    : Images.profileicon
+                }
+                style={[styles.avatar, uploadProfileImageLoading && { opacity: 0.5 }]}
+              />
+
+              {uploadProfileImageLoading ? (
+                <View style={styles.cameraIconContainer}>
+                  <ActivityIndicator size="small" color="#fff" />
+                </View>
+              ) : (
+                <View style={styles.cameraIconContainer}>
+                  <CustomImage
+                    source={Images.camera}
+                    imgStyle={styles.cameraIcon}
+                  />
+                </View>
+              )}
+            </View>
+          </TouchableOpacity>
+
+          <View style={styles.userInfo}>
+            <Text style={styles.userName}>
+              {myProfileData?.client?.employee?.name}
+            </Text>
+            <Text style={styles.userEmail}>
+              {myProfileData?.client?.employee?.email}
+            </Text>
+            <Text style={styles.userPhone}>
+              {myProfileData?.client?.employee?.phone}
+            </Text>
+          </View>
+
+          {/* My Account Section */}
+          <Text style={styles.sectionTitle}>My Account</Text>
+
+          <View style={styles.menuSection}>
+            <CustomView
+              icon={
+                <CustomImage
+                  source={Images.redemptionHistory}
+                  imgStyle={styles.icon}
+                />
+              }
+              label="Transaction History"
+              onPress={() => handleMenuPress("TransactionHistory")}
+            />
+
+            <CustomView
+              icon={
+                <CustomImage source={Images.myOrders} imgStyle={styles.icon} />
+              }
+              label="My Orders"
+              onPress={() => {
+                dispatch(resetAuthState("verifyOtpSuccessMessage"));
+                handleMenuPress("MyOrders");
+              }}
+            />
+
+            <CustomView
+              icon={<CustomImage source={Images.faq} imgStyle={styles.icon} />}
+              label="FAQ"
+              onPress={() => handleMenuPress("FAQ")}
+            />
+
+            <CustomView
+              icon={<CustomImage source={Images.tnc} imgStyle={styles.icon} />}
+              label="TnC"
+              onPress={() => handleMenuPress("TnC")}
+              showSeparator={false}
+            />
+          </View>
+
+          {/* Logout Button */}
+          <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
+            <CustomImage source={Images.logout} imgStyle={styles.logoutIcon} />
+            <Text style={styles.logoutButtonText}>Logout</Text>
+          </TouchableOpacity>
+        </ScrollView>
+      </TouchableWithoutFeedback>
+      <OTPModal
+        visible={otpModalVisible}
+        onClose={() => {
+          setOtpModalVisible(false);
+          setScreen("");
+          dispatch(resetAuthState("myOrdersGenerateOtpError" as any));
+          dispatch(resetAuthState("myOrdersValidateOtpError" as any));
+          dispatch(resetAuthState("myOrdersValidateOtpSuccessMessage" as any));
+        }}
+        onVerify={(otp) => {
+          handleVerify(otp);
+          setResetOtpTrigger((prev) => prev + 1);
+        }}
+        onResend={() => dispatch(myOrdersGenerateOtpRequest({}))}
+        onNavigateToOrders={() => {
+          setOtpModalVisible(false);
+          setScreen("");
+          navigation.navigate("MyOrders", { from: "Profile" });
+        }}
+        resetOtpTrigger={resetOtpTrigger}
+        otpLength={4}
+        screen={screen}
+      />
+      <Logout
+        visible={logoutModalVisible}
+        onClose={() => setLogoutModalVisible(false)}
+        onPress={() => {
+          setLogoutModalVisible(false);
+          navigation.reset({ index: 0, routes: [{ name: 'Login' }], });
+          dispatch(resetAuthState("verifyOtpSuccessMessage"));
+          dispatch(resetAuthState("otpSuccessMessage"));
+        }}
+      />
+      <CustomLoader loading={!!myProfileLoading} text="Loading profile..." fullScreen />
+    </SafeAreaView>
+  );
+};
+
+export default Profile;

package/src/screens/Profile/styles.ts

@@ -0,0 +1,158 @@
+import { Platform, StatusBar, StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+import { SCALE, VSCALE } from '../../../src-app/constants/Scaling';
+import { colors } from '../../../src-app/styles/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.profileBackground,
+  },
+  content: {
+    flexGrow: 1,
+    paddingBottom: VSCALE(40),
+    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+  },
+  profileSection: {
+    alignItems: 'center',
+    paddingTop: 0,
+    paddingBottom: VSCALE(32),
+    width: SCALE(150),
+    height: VSCALE(100),
+    alignSelf: 'center',
+  },
+  avatarContainer: {
+    alignItems: 'center',
+    width: SCALE(80),
+    height: VSCALE(80),
+    marginBottom: VSCALE(16),
+    marginTop: VSCALE(5)
+  },
+  cameraIconContainer: {
+    position: 'absolute',
+    right: -SCALE(2),
+    width: SCALE(30),
+    height: VSCALE(30),
+    bottom: VSCALE(0),
+  },
+  userInfo: {
+    alignItems: 'center',
+    gap: VSCALE(6),
+    paddingHorizontal: SCALE(4),
+    alignSelf: 'center',
+    marginTop: VSCALE(4),
+    width:VSCALE(203),
+  },
+  userName: {
+    fontFamily: FontFamily.LEXEND_SEMIBOLD,
+    fontSize: SCALE(18),
+    fontWeight: '600',
+    color: colors.profileTextPrimary,
+    textTransform: 'capitalize',
+    textAlign:'center'
+  },
+  userEmail: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    fontWeight: '400',
+    color: colors.profileTextSecondary,
+    width: '100%',
+     textAlign:'center'
+  },
+  userPhone: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    fontWeight: '400',
+    color: colors.profileTextSecondary,
+    letterSpacing: 0.24,
+    textTransform: 'lowercase',
+    width: '100%',
+    textAlign:'center'
+  },
+  sectionTitle: {
+    fontFamily: FontFamily.LEXEND_SEMIBOLD,
+    fontSize: SCALE(16),
+    fontWeight: '600',
+    color: colors.profileTextPrimary,
+    marginHorizontal: SCALE(30),
+    marginBottom: VSCALE(10),
+    marginTop: VSCALE(30),
+  },
+  menuSection: {
+    marginHorizontal: SCALE(30),
+    marginBottom: '20%',
+  },
+  menuItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: VSCALE(15),
+  },
+  menuItemContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SCALE(12),
+  },
+  menuItemText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(14),
+    fontWeight: '400',
+    color: colors.profileTextPrimary,
+  },
+  separator: {
+    width: '100%',
+    height: VSCALE(1.2),
+    backgroundColor: colors.profileSeparator,
+  },
+  logoutButton: {
+    marginHorizontal: SCALE(22),
+    borderRadius: SCALE(10),
+    borderWidth: 1,
+    borderColor: colors.profileLogout,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: VSCALE(20),
+    gap: SCALE(7),
+  },
+  logoutButtonText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(14),
+    fontWeight: '500',
+    color: colors.profileLogout,
+    letterSpacing: 0.02,
+  },
+
+  logoutIcon: {
+    height: VSCALE(12),
+    width: SCALE(12),
+  },
+  icon: {
+    height: VSCALE(20),
+    width: SCALE(20),
+  },
+  arrowRightIcon: {
+    height: VSCALE(12),
+    width: SCALE(12),
+  },
+  cameraIcon: {
+    height: VSCALE(30),
+    width: SCALE(30),
+  },
+  avatar: {
+    width:SCALE(72),
+    height:SCALE(72),
+    borderRadius: SCALE(72) / 2,
+    top:VSCALE(4)
+  },
+  outerCircle: {
+    width: SCALE(82),
+    height: SCALE(82),
+    resizeMode:'contain',
+    position:'absolute',
+  },
+
+
+});
+
+export default styles;

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

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