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

package/src/screens/OtpVerification/index.tsx

@@ -0,0 +1,283 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Keyboard,
+  Platform,
+} from "react-native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import { RouteProp } from "@react-navigation/native";
+import { RootStackParamList } from "../../../src-app/types/navigation";
+import styles from "./styles";
+import { useDispatch } from "react-redux";
+import {
+  generateOtpRequest,
+  resetAuthState,
+  updateAuthData,
+  verifyMobileOtpRequest,
+} from "../../../src-app/redux/authSlice";
+import { useAppSelector } from "../../../src-app/hooks/useAppSelector";
+import { RootState } from "../../../src-app/redux/store";
+import DeviceInfo from "react-native-device-info";
+import {
+  CustomButton,
+  CustomImage,
+  CustomLoader,
+  CustomMessagePopUp,
+  Footer,
+} from "../../../src-app/components";
+import Images from "../../../src-app/constants/Images";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { ENTER_4_DIGIT_CODE, OTP_VERIFY_LOADER } from "../../../src-app/constants/Messages";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+type OTPVerificationNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  "OTPVerification"
+>;
+
+type OTPVerificationRouteProp = RouteProp<
+  RootStackParamList,
+  "OTPVerification"
+>;
+
+interface Props {
+  navigation: OTPVerificationNavigationProp;
+  route: OTPVerificationRouteProp;
+}
+
+const OTPVerification: React.FC<Props> = ({ navigation, route }) => {
+  const { phoneNumber } = route.params;
+  const [otpInput, setOtpInput] = useState("");
+  const [timeLeft, setTimeLeft] = useState(45);
+  const [showError, setShowError] = useState(false);
+  const [messagepopUpVisible, setMessagepopUpVisible] = useState(false);
+  const dispatch = useDispatch();
+  const [deviceId, setDeviceId] = useState<string>("");
+
+  const otpToken = useAppSelector((state: RootState) => state.auth.otpToken);
+  const flag = useAppSelector((state: RootState) => state.auth.flag);
+  const verifyOtpSuccessMessage = useAppSelector(
+    (state: RootState) => state.auth.verifyOtpSuccessMessage
+  );
+  const verifyOtpError = useAppSelector(
+    (state: RootState) => state.auth.verifyOtpError
+  );
+  const verifyOtpLoading = useAppSelector(
+  (state: RootState) => state.auth.verifyOtpLoading
+);
+
+const wasPhoneAlreadyVerified = useAppSelector(
+    (state: RootState) => !!state.auth.generateOtpData?.is_phone_verified
+  );
+
+  const hasNavigated = useRef(false);
+
+  useEffect(() => {
+    if (verifyOtpError) {
+      setMessagepopUpVisible(true);
+    }
+  }, [verifyOtpError]);
+
+  useEffect(() => {
+    if (
+      verifyOtpSuccessMessage &&
+      !hasNavigated.current
+      // !hasNavigated.current
+    ) {
+      hasNavigated.current = true;
+
+      AsyncStorage.setItem("HAS_LOGGED_IN_ONCE", "true").catch(() => {});
+
+      if (wasPhoneAlreadyVerified) {
+        navigation.replace("MainTabs");
+        return;
+      }
+
+      if (flag) {
+        navigation.replace("MainTabs");
+      } else {
+        dispatch(updateAuthData({ key: "flag", value: true }));
+        navigation.replace("MyProfile");
+      }
+    }
+  }, [verifyOtpSuccessMessage, wasPhoneAlreadyVerified, flag, dispatch, navigation]);
+
+  useEffect(() => {
+    if (timeLeft > 0) {
+      const timer = setTimeout(() => setTimeLeft((prev) => prev - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [timeLeft]);
+
+  useEffect(() => {
+    const getDeviceId = async () => {
+      try {
+        const id = await DeviceInfo.getUniqueId();
+        const device_id = String(id);
+        setDeviceId(device_id);
+        console.log("device_id", device_id);
+      } catch (error) {
+        console.log("Error getting device ID:", error);
+      }
+    };
+
+    getDeviceId();
+  }, []);
+
+  const handleVerify = async () => {
+    dispatch(
+      verifyMobileOtpRequest({
+        client_key: "mobile_app",
+        client_name: "AndroidApp",
+        client_series: "1930",
+        client_type: "propel_platform",
+        client_version: "17.2",
+        device_id: deviceId,
+        fcm_token: "",
+        otp: otpInput,
+        username: phoneNumber,
+        is_hppl_login: true,
+      })
+    );
+  };
+
+  const handleResendOTP = () => {
+    setTimeLeft(45);
+    setOtpInput("");
+    setShowError(false);
+    dispatch(
+      generateOtpRequest({
+        client_name: "iOSApp",
+        client_series: "1930",
+        client_version: "17.2",
+        device_id: deviceId,
+        username: phoneNumber,
+        is_hppl_login: true,
+      })
+    );
+  };
+
+  const maskPhoneNumber = (phone: string) => {
+    const clean = phone.replace(/\D/g, "");
+    const first2 = clean.slice(0, 2);
+    const last2 = clean.slice(-2);
+    const masked = "*".repeat(clean.length - 4);
+    return `${first2}${masked}${last2}`;
+  };
+
+  const inputRef = useRef<TextInput>(null);
+
+  useEffect(() => {
+    const delay = Platform.OS === 'android' ? 100 : 0;
+    const timer = setTimeout(() => {
+      inputRef.current?.focus();
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+
+  return (
+    <SafeAreaView style={styles.container} edges={["top", "bottom"]}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View style={styles.content}>
+          <TouchableOpacity
+            activeOpacity={0.7}
+            onPress={() => navigation.goBack()}
+            style={styles.backButton}
+          >
+            <CustomImage source={Images.arrowBack} imgStyle={styles.backIcon} />
+          </TouchableOpacity>
+          <CustomImage source={Images.topWave} imgStyle={styles.topShape} />
+          <CustomImage
+            source={Images.bottomWave}
+            imgStyle={styles.bottomShape}
+          />
+          <CustomImage source={Images?.logo} imgStyle={styles.logoSection} />
+
+          <View style={styles.formSection}>
+            <View style={styles.formHeader}>
+              <Text style={styles.formTitle}>{ENTER_4_DIGIT_CODE}</Text>
+              <Text style={styles.formSubtitle}>
+                OTP has been sent to {maskPhoneNumber(phoneNumber)}
+              </Text>
+            </View>
+
+            {showError && (
+              <View style={styles.errorAlert}>
+                <View style={styles.errorIcon}>
+                  <Text style={styles.errorIconText}>!</Text>
+                </View>
+                <Text style={styles.errorText}>Wrong OTP Entered</Text>
+                <TouchableOpacity onPress={() => setShowError(false)}>
+                  <Text style={styles.errorClose}>×</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+
+            <View style={styles.inputContainer}>
+              <TextInput
+                ref={inputRef}                // <-- attach ref so focus works
+                style={styles.phoneInput}
+                placeholder="Enter OTP"
+                placeholderTextColor="#6B7280"
+                value={otpInput}
+                onChangeText={setOtpInput}
+                keyboardType="number-pad"
+                maxLength={4}
+                multiline={false}             // <-- single line input
+              />
+            </View>
+
+            <View style={styles.resendContainer}>
+              <Text style={styles.resendText}>Didn't Receive OTP?</Text>
+              <TouchableOpacity
+                disabled={timeLeft > 0}
+                onPress={handleResendOTP}
+              >
+                <Text style={[styles.resendLink, timeLeft > 0 && styles.resendLinkDisabled,]}>Resend OTP</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <View style={styles.timerContainer}>
+            <View style={styles.timerCircle}>
+              <Text style={styles.timerText}>
+                00:{timeLeft.toString().padStart(2, "0")}
+              </Text>
+              <Text style={styles.timerLabel}>Sec</Text>
+            </View>
+          </View>
+
+          <CustomButton
+            title="Verify"
+            onPress={handleVerify}
+            disabled={otpInput.length < 4}
+            customButtonContainerStyle={styles.buttonContainer}
+          />
+
+          <Footer />
+
+          <CustomMessagePopUp
+            title="Error"
+            message={verifyOtpError || ""}
+            visible={messagepopUpVisible}
+            onClose={() => {
+              setMessagepopUpVisible(false);
+              dispatch(resetAuthState("verifyOtpError"));
+            }}
+            icon={Images.pendingIcon}
+          />
+        </View>
+      </TouchableWithoutFeedback>
+      <CustomLoader loading={!!verifyOtpLoading} text={OTP_VERIFY_LOADER} fullScreen />
+
+    </SafeAreaView>
+  );
+};
+
+export default OTPVerification;

package/src/screens/OtpVerification/styles.ts

@@ -0,0 +1,197 @@
+import { Dimensions, Platform, StyleSheet } from 'react-native';
+import { borderRadius, spacing, typography } from '../../../src-app/styles/shared';
+import { VSCALE, SCALE } from '../../../src-app/constants/Scaling';
+import FontFamily from '../../../src-app/constants/Fonts';
+import { colors } from '../../../src-app/styles/colors';
+
+
+const { height: screenHeight } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  content: {
+    flex: 1,
+    position: 'relative',
+  },
+  topShape: {
+    position: 'absolute',
+    width: '100%',
+    height: VSCALE(200),
+    left: SCALE(90),
+    top: 0,
+    zIndex: -1,
+  },
+  bottomShape: {
+    position: 'absolute',
+    width: '100%',
+    height: VSCALE(200),
+    left: SCALE(-50),
+    bottom: VSCALE(0),
+    zIndex: -1,
+  },
+  logoSection: {
+    width: SCALE(177),
+    height: VSCALE(182),
+    resizeMode: 'contain',
+    alignSelf: 'center',
+    marginTop: screenHeight > 700 ? VSCALE(70) : VSCALE(70),
+  },
+  formContainer: {
+    paddingHorizontal: SCALE(20),
+    justifyContent: 'center',
+    marginTop: VSCALE(10),
+  },
+  formHeader: {
+    gap: VSCALE(spacing.sm),
+    marginBottom: VSCALE(spacing.md),
+  },
+  formTitle: {
+    ...typography.bodySmall,
+    color: colors.onSurface,
+    fontWeight: '500',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  formSubtitle: {
+    ...typography.caption,
+    color: colors.onSurfaceVariant,
+    lineHeight: VSCALE(18),
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  errorAlert: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.errorAlertColor,
+    borderWidth: 1,
+    borderColor: colors.error,
+    borderRadius: borderRadius.md,
+    padding: VSCALE(spacing.md),
+    marginBottom: VSCALE(spacing.lg),
+    gap: SCALE(spacing.md),
+  },
+  errorIcon: {
+    width: VSCALE(20),
+    height: VSCALE(20),
+    backgroundColor: colors.error,
+    borderRadius: VSCALE(10),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorIconText: {
+    color: 'white',
+    fontSize: SCALE(12),
+    fontWeight: 'bold',
+  },
+  errorText: {
+    ...typography.caption,
+    color: colors.error,
+    flex: 1,
+  },
+  errorClose: {
+    color: colors.error,
+    fontSize: SCALE(16),
+    fontWeight: 'bold',
+  },
+  resendContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: SCALE(spacing.sm),
+    marginTop: VSCALE(10),
+  },
+  resendText: {
+    ...typography.caption,
+    color: colors.onSurface,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  resendLink: {
+    ...typography.caption,
+    color: colors.primary,
+    textDecorationLine: 'underline',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  timerContainer: {
+    alignItems: 'center',
+    marginTop: VSCALE(spacing.md),
+    height: VSCALE(120),
+  },
+  timerCircle: {
+    width: VSCALE(100),
+    height: VSCALE(100),
+    borderRadius: VSCALE(50),
+    borderWidth: 4,
+    borderColor: colors.secondary,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  timerText: {
+    ...typography.body,
+    color: colors.onSurface,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  timerLabel: {
+    ...typography.caption,
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  apnaClubLogo: {
+    width: SCALE(124),
+    height: VSCALE(115),
+  },
+  hindustanPencilsLogo: {
+    width: SCALE(180),
+    height: VSCALE(60),
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: colors.outline,
+    borderRadius: SCALE(12),
+    backgroundColor: colors.background,
+    height: VSCALE(55),
+    paddingHorizontal: SCALE(20),
+  },
+  phoneInput: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(14),
+    color: colors.black,
+    textAlign: 'center',
+    width: '100%',
+  },
+  contentView: {
+    flex: 1,
+  },
+  footer: {
+    paddingBottom: Platform.OS === 'ios' ? VSCALE(0) : VSCALE(0),
+    paddingTop: VSCALE(10),
+    alignItems: 'center',
+  },
+  buttonContainer: {
+    paddingHorizontal: SCALE(20),
+    marginBottom: VSCALE(20),
+  },
+  formSection: {
+    paddingHorizontal: SCALE(20),
+    justifyContent: 'center',
+  },
+  backIcon: {
+    height: VSCALE(13),
+    width: SCALE(16),
+    resizeMode: 'contain',
+  },
+  backButton: {
+    padding: SCALE(12),
+    position: 'absolute',
+    left: SCALE(20),
+    top: SCALE(10),
+  },
+  resendLinkDisabled: {
+  color: colors.onSurfaceVariant,   
+  textDecorationLine: 'none',       
+},
+});
+
+export default styles;