notifi

2025-10-13 14:02:32 +05:30
parent ae35611bdb
commit bb5ae9af4b
14 changed files with 396 additions and 255 deletions
@@ -1,4 +1,4 @@
-import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
+import { CommonActions, RouteProp, useNavigation, useRoute } from "@react-navigation/native";
 import axios from "axios";
 import React, { useEffect, useRef, useState } from "react";
 import {
@@ -13,16 +13,18 @@ import {
  TextInputKeyPressEventData,
  KeyboardAvoidingView,
  StatusBar,
+  Dimensions,
 } from "react-native";
 import { RootStackParamList } from "../navigation/AppNavigator";
 import * as Keychain from "react-native-keychain";
 import { LOGIN_URL, VARIFY_OTP_URL } from "../utils/ApiUrls";
 import colors from "../components/colors";
-import LinearGradient from "react-native-linear-gradient";
 import CustomAlert from "../components/CostomAlart";
 import { getFcmToken } from "../utils/firebase/firebaseServices";

 const CELL_COUNT = 6;
+const { width } = Dimensions.get('window');
+const BLOCK_SIZE = width / 3;
 type OtpVerifyRouteProp = RouteProp<RootStackParamList, "OtpVarify">;

 interface AlertButton {
@@ -53,21 +55,21 @@ export default function OtpVerificationScreen() {
  const route = useRoute<OtpVerifyRouteProp>();
  const { mobile } = route.params;
  const navigation = useNavigation<any>();
-  
+
  // Refs for auto-closing logic
  const successActionRef = useRef<(() => void) | null>(null);
  const successTimerRef = useRef<number | null>(null);

  const fade = useRef(new Animated.Value(0)).current;
-  const slide = useRef(new Animated.Value(24)).current;
+  const slide = useRef(new Animated.Value(30)).current;
  const ctaScale = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    Animated.parallel([
-      Animated.timing(fade, { toValue: 1, duration: 600, useNativeDriver: true }),
-      Animated.timing(slide, { toValue: 0, duration: 600, useNativeDriver: true }),
+      Animated.timing(fade, { toValue: 1, duration: 800, useNativeDriver: true }),
+      Animated.spring(slide, { toValue: 0, friction: 5, tension: 40, useNativeDriver: true }),
    ]).start();
-  }, [fade, slide]);
+  }, []);

  useEffect(() => {
    if (timer <= 0) return;
@@ -77,8 +79,8 @@ export default function OtpVerificationScreen() {

  const hideAlert = () => {
    if (successTimerRef.current) {
-        clearTimeout(successTimerRef.current);
-        successTimerRef.current = null;
+      clearTimeout(successTimerRef.current);
+      successTimerRef.current = null;
    }
    setAlertConfig(prev => ({ ...prev, visible: false }));
  };
@@ -91,12 +93,12 @@ export default function OtpVerificationScreen() {
    autoCloseAction?: () => void
  ) => {
    setAlertConfig({ visible: true, title, message, buttons, alertType });
-    
+
    if (alertType === 'success' && autoCloseAction) {
-        successActionRef.current = autoCloseAction;
-        successTimerRef.current = setTimeout(() => {
-            successActionRef.current?.();
-        }, 2000); // Auto-close after 2 seconds
+      successActionRef.current = autoCloseAction;
+      successTimerRef.current = setTimeout(() => {
+        successActionRef.current?.();
+      }, 2000);
    }
  };

@@ -130,14 +132,18 @@ export default function OtpVerificationScreen() {
        await saveToken(jwt);
        await getFcmToken(res.data?.data?.userId);

-        
        let hasActionRun = false;
-        const successAction = () => {
-            if (hasActionRun) return;
-            hasActionRun = true;
-            hideAlert();
-            navigation.replace("Home");
-        };
+       const successAction = () => {
+    if (hasActionRun) return;
+    hasActionRun = true;
+    hideAlert();
+    navigation.dispatch(
+      CommonActions.reset({
+        index: 0,
+        routes: [{ name: 'Home' }],
+      })
+    );
+};

        triggerAlert(
          'Success!',
@@ -162,20 +168,18 @@ export default function OtpVerificationScreen() {
    try {
      setIsResending(true);
      setTimer(30);
-      await axios.get(`${LOGIN_URL}?mobile=${mobile}`, {
-        headers: { "Content-Type": "application/json", Accept: "*/*" },
-      });
-      
+      await axios.get(LOGIN_URL, { params: { mobile } })
+
      setCode(Array(CELL_COUNT).fill(""));
      inputs.current[0]?.focus();
-      
+
      let hasActionRun = false;
      const successAction = () => {
-          if (hasActionRun) return;
-          hasActionRun = true;
-          hideAlert();
+        if (hasActionRun) return;
+        hasActionRun = true;
+        hideAlert();
      };
-      
+
      triggerAlert(
        'OTP Sent',
        'A new code has been sent to your mobile number.',
@@ -233,73 +237,130 @@ export default function OtpVerificationScreen() {
      inputs.current[idx - 1]?.focus();
    }
  };
+  
+    const colorsBlocks = [
+    colors.pastelPink,
+    colors.pastelBlue,
+    colors.pastelGreen,
+    colors.pastelOrange,
+    colors.pastelBlue,
+    colors.pastelPink,
+    colors.pastelGreen,
+    colors.pastelOrange,
+    colors.pastelPink,
+  ];

  return (
-    <LinearGradient colors={[colors.pastelGreen, colors.pastelOrange]} style={styles.gradientContainer}>
-      <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : undefined}>
-        <StatusBar barStyle="dark-content" backgroundColor={colors.pastelGreen} />
-        
+    <View style={styles.container}>
+      <StatusBar barStyle="dark-content" backgroundColor={colors.pastelOrange} />
+
+      <View style={styles.gridContainer}>
+        {colorsBlocks.map((bgColor, index) => (
+          <View
+            key={index}
+            style={[
+              styles.gridBlock,
+              { backgroundColor: bgColor },
+              index % 2 === 0 ? styles.elevatedBlock : {},
+            ]}
+          />
+        ))}
+      </View>
+
+      <KeyboardAvoidingView style={styles.keyboardAvoidingContainer} behavior={Platform.OS === "ios" ? "padding" : undefined}>
+
        <CustomAlert {...alertConfig} />

-        <View style={styles.topSection}>
-          <Text style={styles.title}>Verify Your Code 🔒</Text>
-          <Text style={styles.subtitle}>We’ve sent a 6-digit verification code to +91 {mobile}.</Text>
+        <View style={styles.contentPanel}>
+          <View style={styles.topSection}>
+            <Text style={styles.title}>Verify Your Code</Text>
+            <Text style={styles.subtitle}>We’ve sent a 6-digit verification code to +91 {mobile}.</Text>

-          <Animated.View style={[styles.otpRow, { opacity: fade, transform: [{ translateY: slide }] }]}>
-            {Array.from({ length: CELL_COUNT }).map((_, i) => (
-              <TextInput
-                key={`otp-${i}`}
-                ref={(r) => { inputs.current[i] = r; }}
-                style={[styles.cell, code[i] ? styles.cellFilled : null]}
-                keyboardType="number-pad"
-                maxLength={i === 0 ? CELL_COUNT : 1}
-                value={code[i]}
-                onChangeText={(t) => (i === 0 ? handleFirstCellChange(t) : updateIndex(i, t))}
-                onKeyPress={(e) => handleKeyPress(i, e)}
-                placeholder="•"
-                placeholderTextColor="#BDBDBD"
-                textContentType="oneTimeCode"
-              />
-            ))}
+            <Animated.View style={[styles.otpRow, { opacity: fade, transform: [{ translateY: slide }] }]}>
+              {Array.from({ length: CELL_COUNT }).map((_, i) => (
+                <TextInput
+                  key={`otp-${i}`}
+                  ref={(r) => { inputs.current[i] = r; }}
+                  style={[styles.cell, code[i] ? styles.cellFilled : null]}
+                  keyboardType="number-pad"
+                  maxLength={i === 0 ? CELL_COUNT : 1}
+                  value={code[i]}
+                  onChangeText={(t) => (i === 0 ? handleFirstCellChange(t) : updateIndex(i, t))}
+                  onKeyPress={(e) => handleKeyPress(i, e)}
+                  placeholder="•"
+                  placeholderTextColor="#BDBDBD"
+                  textContentType="oneTimeCode"
+                />
+              ))}
+            </Animated.View>
+          </View>
+
+          <Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
+            <Pressable
+              onPressIn={() => Animated.spring(ctaScale, { toValue: 0.97, useNativeDriver: true }).start()}
+              onPressOut={() => Animated.spring(ctaScale, { toValue: 1, useNativeDriver: true }).start()}
+              onPress={() => onSubmit(code.join(""), mobile)}
+              style={styles.button}
+            >
+              <Text style={styles.buttonText}>Verify & Continue</Text>
+            </Pressable>
+
+            {timer > 0 ? (
+              <Text style={styles.footerText}>Resend code in 00:{timer.toString().padStart(2, "0")}</Text>
+            ) : (
+              <Pressable onPress={resendOtp} disabled={isResending}>
+                <Text style={[styles.footerText, { color: colors.pastelPink, fontWeight: '600' }]}>
+                  {isResending ? "Resending..." : "Resend Code"}
+                </Text>
+              </Pressable>
+            )}
          </Animated.View>
        </View>
-
-        <Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
-          <Pressable
-            onPressIn={() => Animated.spring(ctaScale, { toValue: 0.97, useNativeDriver: true }).start()}
-            onPressOut={() => Animated.spring(ctaScale, { toValue: 1, useNativeDriver: true }).start()}
-            onPress={() => onSubmit(code.join(""), mobile)}
-            style={styles.button}
-          >
-            <Text style={styles.buttonText}>Verify & Continue</Text>
-          </Pressable>
-
-          {timer > 0 ? (
-            <Text style={styles.footerText}>Resend code in 00:{timer.toString().padStart(2, "0")}</Text>
-          ) : (
-            <Pressable onPress={resendOtp} disabled={isResending}>
-              <Text style={[styles.footerText, { color: colors.primary, fontWeight: '600' }]}>
-                {isResending ? "Resending..." : "Resend Code"}
-              </Text>
-            </Pressable>
-          )}
-        </Animated.View>
      </KeyboardAvoidingView>
-    </LinearGradient>
+    </View>
  );
 }

 const styles = StyleSheet.create({
-  gradientContainer: { flex: 1 },
-  container: { flex: 1, padding: 24, justifyContent: "space-between" },
-  topSection: { flex: 1, justifyContent: "center", alignItems: 'center' },
+  container: { flex: 1 },
+  gridContainer: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  gridBlock: {
+    width: BLOCK_SIZE,
+    height: BLOCK_SIZE,
+    margin: 2,
+    borderRadius: 16,
+  },
+  elevatedBlock: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 5 },
+    shadowOpacity: 0.15,
+    shadowRadius: 10,
+    elevation: 7,
+  },
+  keyboardAvoidingContainer: { flex: 1, justifyContent: 'center' },
+  contentPanel: {
+    marginHorizontal: 24,
+    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+    borderRadius: 32,
+    padding: 28,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.14,
+    shadowRadius: 24,
+    elevation: 12,
+  },
+  topSection: { alignItems: 'center', marginBottom: 24 },
  title: { fontSize: 28, fontWeight: "bold", color: colors.textDark, textAlign: 'center', marginBottom: 12 },
  subtitle: { fontSize: 16, color: colors.textLight, textAlign: 'center', marginBottom: 32, lineHeight: 24, maxWidth: 300 },
  otpRow: { flexDirection: "row", justifyContent: "space-between", width: '100%', paddingHorizontal: 10 },
  cell: { width: 48, height: 56, borderRadius: 12, borderWidth: 1.5, borderColor: colors.inputBorder, backgroundColor: colors.white, textAlign: "center", fontSize: 22, fontWeight: '700', color: colors.textDark, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.08, shadowRadius: 8, elevation: 3 },
  cellFilled: { borderColor: colors.primary, backgroundColor: '#F7F2FF' },
-  bottomSection: { paddingBottom: Platform.OS === "ios" ? 20 : 10 },
-  button: { backgroundColor: colors.primary, paddingVertical: 18, borderRadius: 30, alignItems: "center", justifyContent: "center", shadowColor: colors.primary, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.3, shadowRadius: 15, elevation: 8 },
+  bottomSection: { paddingBottom: Platform.OS === "ios" ? 20 : 10, paddingTop: 10 },
+  button: { backgroundColor: colors.pastelPink, paddingVertical: 18, borderRadius: 30, alignItems: "center", justifyContent: "center", shadowColor: colors.primary, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.3, shadowRadius: 15, elevation: 8 ,borderWidth:2, borderColor:colors.pastelPink},
  buttonText: { color: colors.white, fontWeight: "700", fontSize: 16 },
  footerText: { textAlign: "center", color: colors.textLight, fontSize: 14, marginTop: 20 },
 });