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

package/src-app/components/OTPModal.tsx

@@ -0,0 +1,747 @@
+// import React, { useState, useRef, useEffect } from 'react';
+// import {
+//   View,
+//   Text,
+//   StyleSheet,
+//   Modal,
+//   TouchableOpacity,
+//   Animated,
+//   TouchableWithoutFeedback,
+//   Dimensions,
+//   KeyboardAvoidingView,   
+//   Platform,               
+//   ScrollView,             
+// } from 'react-native';
+// import { OtpInput } from 'react-native-otp-entry';
+// import { useAppSelector } from '../hooks/useAppSelector';
+// import { RootState } from '../redux/store';
+// import CustomButton from './CustomButton';
+// import FontFamily from '../constants/Fonts';
+// import CustomError from './CustomError';
+// import {
+//   DIDNT_RECEIVE_OTP,
+//   ENTER_4_DIGIT_CODE,
+//   OTP,
+//   OTP_DIGIT,
+//   OTP_LENGTH,
+//   OTP_SENT,
+//   RESEND_OTP,
+//   TEXT,
+// } from '../constants/Messages';
+// import { colors } from '../styles/colors';
+
+// const { height: screenHeight } = Dimensions.get('window');
+
+// interface OTPModalProps {
+//   visible: boolean;
+//   onClose: () => void;
+//   onVerify: (otp: string) => void;
+//   onNavigateToOrders: () => void;
+//   phoneNumber?: string;
+//   onResend?: () => void;
+//   resetOtpTrigger?: number;
+//   otpLength?: number;
+//   screen?: string;
+// }
+
+// function maskPhoneNumber(phone: string): string {
+//   if (!phone) return '';
+//   const clean = phone.replace(/\D/g, '');
+//   if (clean.length <= 4) return clean;
+//   if (clean.length <= 6) {
+//     return clean;
+//   }
+//   const first2 = clean.slice(0, 2);
+//   const last2 = clean.slice(-2);
+//   const maskedLength = clean.length - 4;
+//   return `${first2}${'*'.repeat(maskedLength)}${last2}`;
+// }
+
+// const OTPModal: React.FC<OTPModalProps> = ({
+//   visible,
+//   onClose,
+//   onVerify,
+//   onNavigateToOrders,
+//   phoneNumber,
+//   onResend,
+//   resetOtpTrigger,
+//   otpLength = 6,
+//   screen,
+// }) => {
+//   const [countdown, setCountdown] = useState(60);
+//   const slideAnim = useRef(new Animated.Value(screenHeight)).current;
+//   const {
+//     mobileNumber: reduxMobileNumber,
+//     myOrdersValidateOtpError,
+//     validateEVouchersError,
+//   } = useAppSelector((state: RootState) => state.auth);
+//   const displayNumber = phoneNumber || reduxMobileNumber || '';
+//   const [newOtp, setNewOtp] = useState('');
+
+//   useEffect(() => {
+//     if (visible) {
+//       setCountdown(60);
+//       setNewOtp('');
+//       Animated.timing(slideAnim, {
+//         toValue: 0,
+//         duration: 300,
+//         useNativeDriver: true,
+//       }).start();
+//     } else {
+//       Animated.timing(slideAnim, {
+//         toValue: screenHeight,
+//         duration: 300,
+//         useNativeDriver: true,
+//       }).start();
+//     }
+//   }, [visible]);
+
+//   useEffect(() => {
+//     let timer: NodeJS.Timeout;
+//     if (visible && countdown > 0) {
+//       timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+//     }
+//     return () => clearTimeout(timer);
+//   }, [visible, countdown]);
+
+//   const handleVerify = () => {
+//     onVerify(newOtp);
+//   };
+
+//   const handleResendOTP = () => {
+//     setCountdown(60);
+//     setNewOtp('');
+//     onResend?.();
+//   };
+
+//   const formatTime = (seconds: number) => {
+//     const mins = Math.floor(seconds / 60);
+//     const secs = seconds % 60;
+//     return `${mins.toString().padStart(2, '0')} : ${secs
+//       .toString()
+//       .padStart(2, '0')}`;
+//   };
+
+//   if (!visible) return null;
+
+//   return (
+//     <Modal
+//       transparent
+//       visible={visible}
+//       animationType="none"
+//       onRequestClose={onClose}
+//       statusBarTranslucent   
+//     >
+//       <TouchableWithoutFeedback onPress={onClose}>
+//         <View style={styles.overlay}>
+//           <TouchableWithoutFeedback>
+//             {/* ⬇️ KeyboardAvoidingView makes the sheet rise with the keyboard */}
+//             <KeyboardAvoidingView
+//               behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+//               keyboardVerticalOffset={Platform.OS === 'ios' ? 12 : 0}
+//               style={{ width: '100%' }}
+//             >
+//               <Animated.View
+//                 style={[
+//                   styles.modalContainer,
+//                   {
+//                     transform: [{ translateY: slideAnim }],
+//                     height: myOrdersValidateOtpError ? 370 : 334,
+//                   },
+//                 ]}
+//               >
+//                 <ScrollView
+//                   keyboardShouldPersistTaps="handled"
+//                   contentContainerStyle={styles.sheetContent}
+//                   showsVerticalScrollIndicator={false}
+//                 >
+//                   <View style={styles.handleBar} />
+
+//                   {(myOrdersValidateOtpError || validateEVouchersError) && (
+//                     <CustomError
+//                       message={
+//                         myOrdersValidateOtpError || validateEVouchersError || ''
+//                       }
+//                     />
+//                   )}
+
+//                   <Text style={styles.title}>{ENTER_4_DIGIT_CODE}</Text>
+
+//                   <Text style={styles.subtitle}>
+//                     {OTP_SENT} {maskPhoneNumber(displayNumber)}
+//                   </Text>
+
+//                   <OtpInput
+//                     numberOfDigits={OTP_LENGTH}
+//                     focusColor="green"
+//                     autoFocus={false}
+//                     hideStick={false}
+//                     placeholder=""
+//                     blurOnFilled={true}
+//                     disabled={false}
+//                     type="numeric"
+//                     secureTextEntry={false}
+//                     focusStickBlinkingDuration={500}
+//                     onFocus={() => {}}
+//                     onBlur={() => {}}
+//                     onTextChange={setNewOtp}
+//                     onFilled={() => {}}
+//                     textInputProps={{
+//                       accessibilityLabel: OTP,
+//                     }}
+//                     textProps={{
+//                       accessibilityRole: TEXT,
+//                       accessibilityLabel: OTP_DIGIT,
+//                       allowFontScaling: false,
+//                     }}
+//                     theme={{
+//                       containerStyle: styles.container,
+//                       pinCodeContainerStyle: styles.pinCodeBox,
+//                       pinCodeTextStyle: styles.pinCodeText,
+//                       focusStickStyle: styles.focusStick,
+//                       focusedPinCodeContainerStyle: styles.activePinBox,
+//                       placeholderTextStyle: styles.placeholderTextStyle,
+//                       disabledPinCodeContainerStyle:
+//                         styles.disabledPinCodeContainer,
+//                     }}
+//                   />
+
+//                   <View style={styles.resendContainer}>
+//                     <View style={styles.resendTextContainer}>
+//                       <Text style={styles.resendText}>{DIDNT_RECEIVE_OTP}</Text>
+//                       {countdown > 0 ? (
+//                         <Text style={styles.resendLinkDisabled}>{RESEND_OTP}</Text>
+//                       ) : (
+//                         <TouchableOpacity onPress={handleResendOTP}>
+//                           <Text style={styles.resendLinkActive}>
+//                             {RESEND_OTP}
+//                           </Text>
+//                         </TouchableOpacity>
+//                       )}
+//                     </View>
+//                     <Text style={styles.countdown}>
+//                       {formatTime(countdown)}
+//                     </Text>
+//                   </View>
+
+//                   <CustomButton
+//                     title="Verify"
+//                     onPress={handleVerify}
+//                     disabled={newOtp.length !== OTP_LENGTH}
+//                   />
+//                 </ScrollView>
+//               </Animated.View>
+//             </KeyboardAvoidingView>
+//           </TouchableWithoutFeedback>
+//         </View>
+//       </TouchableWithoutFeedback>
+//     </Modal>
+//   );
+// };
+
+// const styles = StyleSheet.create({
+//   overlay: {
+//     flex: 1,
+//     backgroundColor: 'rgba(0, 0, 0, 0.5)',
+//     justifyContent: 'flex-end',
+//     alignItems: 'center',
+//   },
+//   modalContainer: {
+//     width: 393,
+//     maxWidth: '100%',
+//     height: 334,
+//     backgroundColor: colors.background,
+//     borderTopLeftRadius: 30,
+//     borderTopRightRadius: 30,
+//     paddingHorizontal: 20,
+//     paddingTop: 18,
+//     paddingBottom: 36,
+//     maxHeight: screenHeight * 0.9, 
+//     alignSelf: 'stretch',
+//   },
+//   sheetContent: {
+//     paddingBottom: 8, 
+//   },
+//   handleBar: {
+//     width: 48,
+//     height: 4,
+//     backgroundColor: colors.outline,
+//     borderRadius: 6,
+//     alignSelf: 'center',
+//     marginBottom: 15,
+//   },
+//   title: {
+//     fontFamily: FontFamily.LEXEND_MEDIUM,
+//     fontSize: 16,
+//     fontWeight: '500',
+//     color: colors.black,
+//     textTransform: 'capitalize',
+//     marginBottom: 8,
+//   },
+//   subtitle: {
+//     fontFamily: FontFamily.LEXEND_REGULAR,
+//     fontSize: 12,
+//     fontWeight: '400',
+//     color: colors.onSurfaceVariant,
+//     lineHeight: 18,
+//     marginBottom: 24,
+//   },
+
+//   resendContainer: {
+//     flexDirection: 'row',
+//     justifyContent: 'space-between',
+//     alignItems: 'center',
+//     marginBottom: 32,
+//   },
+//   resendTextContainer: {
+//     flexDirection: 'row',
+//     alignItems: 'center',
+//   },
+//   resendText: {
+//     fontFamily: FontFamily.LEXEND_REGULAR,
+//     fontSize: 12,
+//     fontWeight: '400',
+//     color: colors.black,
+//     lineHeight: 18,
+//   },
+//   resendLink: {
+//     fontFamily: FontFamily.LEXEND_MEDIUM,
+//     fontSize: 12,
+//     fontWeight: '500',
+//     color: colors.red,
+//     lineHeight: 18,
+//     textDecorationLine: 'underline',
+//     marginLeft: 6,
+//   },
+//   resendLinkActive: {
+//     fontFamily: FontFamily.LEXEND_MEDIUM,
+//     fontSize: 12,
+//     fontWeight: '500',
+//     color: colors.red,
+//     lineHeight: 18,
+//     textDecorationLine: 'underline',
+//     marginLeft: 6,
+//   },
+//   countdown: {
+//     fontFamily: FontFamily.LEXEND_REGULAR,
+//     fontSize: 12,
+//     fontWeight: '400',
+//     color: colors.black,
+//     lineHeight: 18,
+//   },
+
+//   // OTP Input Styles
+//   container: {
+//     flexDirection: 'row',
+//     justifyContent: 'space-between',
+//     paddingHorizontal: 0,
+//     marginBottom: 16,
+//   },
+//   pinCodeBox: {
+//     width: 49,
+//     height: 62,
+//     borderWidth: 1,
+//     borderRadius: 12,
+//     borderColor: colors.outline,
+//     justifyContent: 'center',
+//     alignItems: 'center',
+//     backgroundColor: colors.background,
+//   },
+//   pinCodeText: {
+//     fontFamily: FontFamily.LEXEND_REGULAR,
+//     fontSize: 18,
+//     fontWeight: '400',
+//     color: colors.black,
+//     textAlign: 'center',
+//   },
+//   focusStick: {
+//     width: 2,
+//     height: 30,
+//     backgroundColor: colors.darkGrey,
+//     borderRadius: 1,
+//   },
+//   activePinBox: {
+//     borderColor: colors.darkGrey,
+//     borderWidth: 2,
+//     backgroundColor: colors.background,
+//   },
+
+//   disabledPinCodeContainer: {
+//     borderColor: colors.outlineVariant,
+//     borderWidth: 1,
+//     backgroundColor: colors.surface,
+//     opacity: 0.6,
+//   },
+//   placeholderTextStyle: {
+//     fontFamily: FontFamily.LEXEND_REGULAR,
+//     fontSize: 18,
+//     fontWeight: '400',
+//     color: colors.placeholderColor,
+//     textAlign: 'center',
+//   },
+//   resendLinkDisabled: {
+//   fontFamily: FontFamily.LEXEND_MEDIUM,
+//   fontSize: 12,
+//   fontWeight: '500',
+//   color: colors.onSurfaceVariant,  
+//   lineHeight: 18,
+//   textDecorationLine: 'none',       
+//   marginLeft: 6,
+// },
+
+// });
+
+// export default OTPModal;
+
+
+
+
+
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Dimensions,
+  ScrollView,
+} from 'react-native';
+import { OtpInput } from 'react-native-otp-entry';
+import { useAppSelector } from '../hooks/useAppSelector';
+import { RootState } from '../redux/store';
+import CustomButton from './CustomButton';
+import FontFamily from '../constants/Fonts';
+import CustomError from './CustomError';
+import {
+  DIDNT_RECEIVE_OTP,
+  ENTER_4_DIGIT_CODE,
+  OTP_LENGTH,
+  OTP_SENT,
+  RESEND_OTP,
+} from '../constants/Messages';
+import { colors } from '../styles/colors';
+
+const { height: screenHeight, width: screenWidth } = Dimensions.get('window');
+
+interface OTPModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onVerify: (otp: string) => void;
+  onNavigateToOrders: () => void;
+  phoneNumber?: string;
+  onResend?: () => void;
+  resetOtpTrigger?: number;
+  otpLength?: number;
+  screen?: string;
+}
+
+function maskPhoneNumber(phone: string): string {
+  if (!phone) return '';
+  const clean = phone.replace(/\D/g, '');
+  if (clean.length <= 4) return clean;
+  if (clean.length <= 6) {
+    return clean;
+  }
+  const first2 = clean.slice(0, 2);
+  const last2 = clean.slice(-2);
+  const maskedLength = clean.length - 4;
+  return `${first2}${'*'.repeat(maskedLength)}${last2}`;
+}
+
+const OTPModal: React.FC<OTPModalProps> = ({
+  visible,
+  onClose,
+  onVerify,
+  onNavigateToOrders,
+  phoneNumber,
+  onResend,
+  resetOtpTrigger,
+  otpLength = 6,
+  screen,
+}) => {
+  const [countdown, setCountdown] = useState(60);
+  const {
+    mobileNumber: reduxMobileNumber,
+    myOrdersValidateOtpError,
+    validateEVouchersError,
+    myOrdersValidateOtpLoading,
+    validateEVouchersLoading,
+  } = useAppSelector((state: RootState) => state.auth);
+  
+  const isVerifying = myOrdersValidateOtpLoading || validateEVouchersLoading;
+  const displayNumber = phoneNumber || reduxMobileNumber || '';
+  const [newOtp, setNewOtp] = useState('');
+  
+  console.log("newOtp...",newOtp?.length);
+  
+
+  useEffect(() => {
+    if (visible) {
+      setCountdown(60);
+      setNewOtp('');
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    if (visible && countdown > 0) {
+      timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+    }
+    return () => clearTimeout(timer);
+  }, [visible, countdown]);
+
+  const handleVerify = () => {
+    console.log('🔍 OTPModal handleVerify called with OTP:', newOtp);
+    onVerify(newOtp);
+  };
+
+  const handleResendOTP = () => {
+    setCountdown(60);
+    setNewOtp('');
+    onResend?.();
+  };
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')} : ${secs
+      .toString()
+      .padStart(2, '0')}`;
+  };
+
+
+  if (!visible) {
+    console.log('🔍 OTPModal not visible, returning null');
+    return null;
+  }
+
+
+  // Use absolute positioning instead of Modal for AAR compatibility
+  return (
+    <View style={styles.absoluteContainer} pointerEvents="box-none">
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay} />
+      </TouchableWithoutFeedback>
+
+      <View style={styles.modalContainer}>
+        <ScrollView
+          keyboardShouldPersistTaps="handled"
+          style={styles.scrollView}
+          contentContainerStyle={[styles.sheetContent, styles.scrollContent]}
+          showsVerticalScrollIndicator={false}
+          nestedScrollEnabled
+        >
+          <View style={styles.handleBar} />
+
+          {(myOrdersValidateOtpError || validateEVouchersError) && (
+            <CustomError
+              message={
+                myOrdersValidateOtpError ||
+                validateEVouchersError ||
+                ''
+              }
+            />
+          )}
+
+          <Text style={styles.title}>{ENTER_4_DIGIT_CODE}</Text>
+
+          <Text style={styles.subtitle}>
+            {OTP_SENT} {maskPhoneNumber(displayNumber)}
+          </Text>
+
+          <OtpInput
+            numberOfDigits={OTP_LENGTH}
+            onTextChange={setNewOtp}
+            theme={{
+              containerStyle: styles.container,
+              pinCodeContainerStyle: styles.pinCodeBox,
+              pinCodeTextStyle: styles.pinCodeText,
+              focusedPinCodeContainerStyle: styles.activePinBox,
+            }}
+          />
+
+          <View style={styles.resendContainer}>
+            <View style={styles.resendTextContainer}>
+              <Text style={styles.resendText}>
+                {DIDNT_RECEIVE_OTP}
+              </Text>
+
+              {countdown > 0 ? (
+                <Text style={styles.resendLinkDisabled}>
+                  {RESEND_OTP}
+                </Text>
+              ) : (
+                <TouchableOpacity onPress={handleResendOTP}>
+                  <Text style={styles.resendLinkActive}>
+                    {RESEND_OTP}
+                  </Text>
+                </TouchableOpacity>
+              )}
+            </View>
+
+            <Text style={styles.countdown}>
+              {formatTime(countdown)}
+            </Text>
+          </View>
+
+          <CustomButton
+            title="Verify"
+            onPress={handleVerify}
+            loading={isVerifying}
+          />
+        </ScrollView>
+      </View>
+    </View>
+  );
+
+};
+
+const styles = StyleSheet.create({
+  absoluteContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: screenWidth,
+    height: screenHeight,
+    justifyContent: 'flex-end',
+    zIndex: 50000,
+    elevation: 50000,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  modalContainer: {
+    backgroundColor: colors.background,
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 36,
+    maxHeight: screenHeight * 0.95,
+    minHeight: screenHeight * 0.6,
+    flexShrink: 1,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: -2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 50001,
+  },
+  sheetContent: {
+    paddingBottom: 8,
+  },
+  scrollView: {
+    flexGrow: 0,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+  handleBar: {
+    width: 48,
+    height: 4,
+    backgroundColor: colors.outline,
+    borderRadius: 6,
+    alignSelf: 'center',
+    marginBottom: 15,
+  },
+  title: {
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    fontSize: 16,
+    fontWeight: '500',
+    color: colors.black,
+    textTransform: 'capitalize',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    lineHeight: 18,
+    marginBottom: 24,
+  },
+  resendContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  resendTextContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  resendText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.black,
+    lineHeight: 18,
+  },
+  resendLinkActive: {
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.red,
+    lineHeight: 18,
+    textDecorationLine: 'underline',
+    marginLeft: 6,
+  },
+  countdown: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.black,
+    lineHeight: 18,
+  },
+  // OTP Input Styles
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 0,
+    marginBottom: 16,
+  },
+  pinCodeBox: {
+    width: 49,
+    height: 62,
+    borderWidth: 1,
+    borderRadius: 12,
+    borderColor: colors.outline,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: colors.background,
+  },
+  pinCodeText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 18,
+    fontWeight: '400',
+    color: colors.black,
+    textAlign: 'center',
+  },
+  activePinBox: {
+    borderColor: colors.darkGrey,
+    borderWidth: 2,
+    backgroundColor: colors.background,
+  },
+  resendLinkDisabled: {
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.onSurfaceVariant,
+    lineHeight: 18,
+    textDecorationLine: 'none',
+    marginLeft: 6,
+  },
+});
+
+export default OTPModal;
+