@zezosoft/zezo-ott-react-native-ui-kit 1.3.6 → 1.3.8

package/src/components/Auth/Two/OTP/OTP.tsx

@@ -1,504 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, {
-  memo,
-  useMemo,
-  useState,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
-import {
-  View,
-  type ViewStyle,
-  type TextStyle,
-  type KeyboardTypeOptions,
-  type StyleProp,
-  StyleSheet,
-  Platform,
-} from 'react-native';
-import {
-  CodeField,
-  Cursor,
-  useBlurOnFulfill,
-  useClearByFocusCell,
-} from 'react-native-confirmation-code-field';
-import { scale, verticalScale } from 'react-native-size-matters';
-
-import HideKeyboard from '../../../Keyboard/HideKeyboard';
-import { useKeyboard } from '../../../../hooks/useKeyboard';
-import BackBtn from '../../../Button/BackBtn';
-import { useTheme } from '../../../../theme';
-import { Button } from '../../../Button';
-import Display from '../../../../utils/Display';
-import { Text } from '../../../Text';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { MessageSquare } from 'lucide-react-native';
-import { BackgroundLayout } from '../../../BackgroundLayout';
-
-type OTPProps = {
-  title?: string;
-  countryCode?: string;
-  onSubmit?: (values: { otp: string }) => Promise<void> | void;
-  onTopBackBtnPress?: () => void;
-  containerStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  formStyle?: StyleProp<ViewStyle>;
-  backBtnStyle?: StyleProp<ViewStyle>;
-  loading?: boolean;
-  theme?: ThemeOverride;
-  otpDigitCount?: number;
-  keyboardType?: KeyboardTypeOptions;
-  phoneNumber?: string;
-  enableAutoFill?: boolean;
-  autoSubmitOnFill?: boolean;
-  text?: {
-    otpLabel?: string;
-    otpPlaceholder?: string;
-    loadingSubmitBtnText?: string;
-    submitButton?: string;
-    otpSentText?: string;
-    resendOtpText?: string;
-    resendOtpCountdownText?: string;
-  };
-  // Resend
-  onResendOtp?: () => void;
-  resendDisabledTime?: number;
-
-  // Render Props
-  renderSubmitButton?: (props: {
-    onPress: () => void;
-    disabled: boolean;
-    loading: boolean;
-  }) => React.ReactNode;
-  renderBackButton?: (props: { onPress: () => void }) => React.ReactNode;
-  renderOtpInput?: (props: {
-    value: string;
-    onChange: (value: string) => void;
-    isFocused: boolean[];
-  }) => React.ReactNode;
-
-  // Style Overrides
-  cellStyle?: StyleProp<TextStyle>;
-  focusCellStyle?: StyleProp<TextStyle>;
-};
-
-const DEFAULT_TEXT = {
-  otpLabel: 'Enter OTP',
-  otpPlaceholder: '••••',
-  submitButton: 'Verify OTP',
-  loadingSubmitBtnText: 'Verifying...',
-  otpSentText: 'A OTP has been sent to',
-  resendOtpText: 'Resend OTP',
-  resendOtpCountdownText: 'Resend OTP in',
-};
-
-const AUTO_SUBMIT_DELAY_MS = 300;
-const RESEND_COUNTDOWN_INTERVAL_MS = 1000;
-
-const OTP: React.FC<OTPProps> = ({
-  title,
-  onSubmit,
-  onTopBackBtnPress,
-  containerStyle,
-  titleStyle,
-  formStyle,
-  backBtnStyle,
-  loading = false,
-  theme: overrideTheme,
-  otpDigitCount = 4,
-  keyboardType = 'number-pad',
-  phoneNumber,
-  countryCode = '91',
-  enableAutoFill = true,
-  autoSubmitOnFill = true,
-  text = DEFAULT_TEXT,
-  onResendOtp,
-  resendDisabledTime = 30,
-  renderSubmitButton,
-  renderBackButton,
-  renderOtpInput,
-  cellStyle,
-  focusCellStyle,
-}) => {
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
-  const { isKeyboardOpen } = useKeyboard();
-  const [otp, setOtp] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [resendTimer, setResendTimer] = useState(resendDisabledTime);
-  const hasAutoSubmittedRef = useRef(false);
-  const autoSubmitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const lastAutoSubmittedOtpRef = useRef<string>('');
-  const handleSubmitRef = useRef<() => Promise<void>>(() => Promise.resolve());
-
-  const ref = useBlurOnFulfill({ value: otp, cellCount: otpDigitCount });
-  const [codeFieldProps, getCellOnLayoutHandler] = useClearByFocusCell({
-    value: otp,
-    setValue: setOtp,
-  });
-
-  const setOtpDigitsOnly = useCallback((value: string) => {
-    setOtp(value.replace(/\D/g, ''));
-  }, []);
-
-  const isFocusedArray = useMemo(
-    () => Array.from({ length: otpDigitCount }, (_, i) => otp.length === i),
-    [otp.length, otpDigitCount]
-  );
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          flex: 1,
-          width: '100%',
-          paddingHorizontal: scale(16),
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-        topBackBtnWrapper: {
-          position: 'absolute',
-          top: verticalScale(5),
-          left: scale(10),
-          right: scale(16),
-          zIndex: 10,
-        },
-        headerTitle: {
-          fontSize: RFValue(18),
-          fontWeight: '400',
-          marginLeft: scale(10),
-          color: resolvedTheme.colors.textPrimary,
-        },
-
-        centerContent: {
-          flex: 1,
-          width: '100%',
-          maxWidth: scale(400),
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: verticalScale(4),
-        },
-        form: {
-          width: '100%',
-          gap: verticalScale(20),
-          alignItems: 'center',
-          marginTop: verticalScale(24),
-          marginBottom: isKeyboardOpen ? verticalScale(20) : 0,
-        },
-        codeFieldRoot: {
-          width: Display.setWidth(80),
-          marginTop: scale(10),
-        },
-        cell: {
-          width: scale(55),
-          height: scale(55),
-          fontSize: RFValue(26),
-          fontWeight: '500',
-          paddingTop: Platform.OS === 'ios' ? scale(9) : scale(7),
-          borderWidth: scale(0.5),
-          borderRadius: scale(8),
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          alignSelf: 'center',
-          overflow: 'hidden',
-          color: resolvedTheme.colors.textPrimary,
-          borderColor: resolvedTheme.colors.textPrimary,
-        },
-        focusCell: {
-          borderColor: resolvedTheme.colors.primary,
-          backgroundColor: resolvedTheme.colors.border,
-        },
-        otpInfoRow: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginTop: verticalScale(12),
-          flexWrap: 'wrap',
-        },
-        otpInfoText: {
-          fontSize: RFValue(12),
-          color: resolvedTheme.colors.onSurfaceVariant,
-          flexShrink: 0,
-        },
-        otpPhone: {
-          fontSize: RFValue(13),
-          fontWeight: '500',
-          marginLeft: scale(4),
-          color: resolvedTheme.colors.textPrimary,
-          flexShrink: 0,
-        },
-        resendRow: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: scale(6),
-        },
-        resendSection: {
-          alignItems: 'center',
-          marginTop: verticalScale(10),
-        },
-        resendText: {
-          fontSize: RFValue(12),
-        },
-        resendTextDisabled: {
-          color: resolvedTheme.colors.onSurfaceVariant,
-        },
-        resendTextActive: {
-          color: resolvedTheme.colors.textPrimary,
-        },
-        submitButtonTitle: {
-          fontSize: RFValue(13),
-        },
-      }),
-    [
-      isKeyboardOpen,
-      resolvedTheme.colors.border,
-      resolvedTheme.colors.onSurfaceVariant,
-      resolvedTheme.colors.primary,
-      resolvedTheme.colors.textPrimary,
-    ]
-  );
-
-  useEffect(() => {
-    if (resendTimer <= 0) return;
-    const timer = setInterval(
-      () => setResendTimer((prev) => prev - 1),
-      RESEND_COUNTDOWN_INTERVAL_MS
-    );
-    return () => clearInterval(timer);
-  }, [resendTimer]);
-
-  const handleSubmit = useCallback(async () => {
-    if (!onSubmit || otp.length !== otpDigitCount) return;
-    setIsSubmitting(true);
-    try {
-      await onSubmit({ otp });
-    } catch (error) {
-      console.error('OTP submission error:', error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [onSubmit, otp, otpDigitCount]);
-
-  handleSubmitRef.current = handleSubmit;
-
-  useEffect(() => {
-    if (autoSubmitTimerRef.current) {
-      clearTimeout(autoSubmitTimerRef.current);
-      autoSubmitTimerRef.current = null;
-    }
-
-    if (otp.length !== otpDigitCount) {
-      hasAutoSubmittedRef.current = false;
-      lastAutoSubmittedOtpRef.current = '';
-      return undefined;
-    }
-
-    if (lastAutoSubmittedOtpRef.current === otp) return undefined;
-
-    if (
-      !autoSubmitOnFill ||
-      hasAutoSubmittedRef.current ||
-      isSubmitting ||
-      loading ||
-      !onSubmit
-    ) {
-      return undefined;
-    }
-
-    hasAutoSubmittedRef.current = true;
-    lastAutoSubmittedOtpRef.current = otp;
-
-    autoSubmitTimerRef.current = setTimeout(() => {
-      if (otp.length === otpDigitCount && !isSubmitting && !loading) {
-        handleSubmitRef.current();
-      } else {
-        hasAutoSubmittedRef.current = false;
-        lastAutoSubmittedOtpRef.current = '';
-      }
-      autoSubmitTimerRef.current = null;
-    }, AUTO_SUBMIT_DELAY_MS);
-
-    return () => {
-      if (autoSubmitTimerRef.current) {
-        clearTimeout(autoSubmitTimerRef.current);
-        autoSubmitTimerRef.current = null;
-      }
-    };
-  }, [otp, otpDigitCount, autoSubmitOnFill, isSubmitting, loading, onSubmit]);
-
-  const handleResendOtp = useCallback(() => {
-    if (onResendOtp) {
-      onResendOtp();
-      setResendTimer(resendDisabledTime);
-    }
-  }, [onResendOtp, resendDisabledTime]);
-
-  const isLoading = useMemo(
-    () => loading || isSubmitting,
-    [loading, isSubmitting]
-  );
-  const isSubmitDisabled = useMemo(
-    () => otp.length !== otpDigitCount || isLoading,
-    [otp.length, otpDigitCount, isLoading]
-  );
-  const shouldRender = useMemo(
-    () =>
-      (condition?: boolean | unknown): boolean =>
-        typeof condition === 'function' || !!condition,
-    []
-  );
-
-  const renderCell = useCallback(
-    ({
-      index,
-      symbol,
-      isFocused,
-    }: {
-      index: number;
-      symbol: string;
-      isFocused: boolean;
-    }) => (
-      <Text
-        key={index}
-        style={[
-          styles.cell,
-          cellStyle,
-          isFocused && styles.focusCell,
-          isFocused && focusCellStyle,
-        ]}
-        onLayout={getCellOnLayoutHandler(index)}
-      >
-        {symbol || (isFocused ? <Cursor /> : null)}
-      </Text>
-    ),
-    [styles, cellStyle, focusCellStyle, getCellOnLayoutHandler]
-  );
-
-  const noop = useCallback(() => {}, []);
-
-  return (
-    <BackgroundLayout.Two>
-      <View style={[styles.container, containerStyle]}>
-        {shouldRender(renderBackButton || onTopBackBtnPress) && (
-          <View style={styles.topBackBtnWrapper}>
-            {renderBackButton ? (
-              renderBackButton({
-                onPress: onTopBackBtnPress ?? noop,
-              })
-            ) : (
-              <BackBtn
-                theme={overrideTheme}
-                style={backBtnStyle}
-                onPress={onTopBackBtnPress}
-                textStyle={[styles.headerTitle, titleStyle]}
-                label={title ?? DEFAULT_TEXT.otpLabel}
-              />
-            )}
-          </View>
-        )}
-        <HideKeyboard>
-          <View style={styles.centerContent}>
-            {phoneNumber && (
-              <View style={styles.otpInfoRow}>
-                <Text style={styles.otpInfoText}>A OTP has been sent to</Text>
-                <Text style={styles.otpPhone}>
-                  +{countryCode} {phoneNumber.replace(/\D/g, '')}
-                </Text>
-              </View>
-            )}
-
-            <View style={[styles.form, formStyle]}>
-              {renderOtpInput ? (
-                renderOtpInput({
-                  value: otp,
-                  onChange: setOtpDigitsOnly,
-                  isFocused: isFocusedArray,
-                })
-              ) : (
-                <CodeField
-                  ref={ref}
-                  {...codeFieldProps}
-                  value={otp}
-                  onChangeText={setOtpDigitsOnly}
-                  cellCount={otpDigitCount}
-                  rootStyle={styles.codeFieldRoot}
-                  keyboardType={keyboardType}
-                  textContentType={enableAutoFill ? 'oneTimeCode' : 'none'}
-                  autoComplete={
-                    enableAutoFill
-                      ? Platform.OS === 'android'
-                        ? 'sms-otp'
-                        : 'off'
-                      : 'off'
-                  }
-                  renderCell={renderCell}
-                />
-              )}
-
-              {renderSubmitButton ? (
-                renderSubmitButton({
-                  onPress: handleSubmit,
-                  disabled: isSubmitDisabled,
-                  loading: isLoading,
-                })
-              ) : (
-                <Button.Primary
-                  title={text?.submitButton ?? DEFAULT_TEXT.submitButton}
-                  theme={overrideTheme}
-                  onPress={handleSubmit}
-                  loadingText={
-                    text?.loadingSubmitBtnText ??
-                    DEFAULT_TEXT.loadingSubmitBtnText
-                  }
-                  titleStyle={styles.submitButtonTitle}
-                  disabled={isSubmitDisabled}
-                  loading={isLoading}
-                />
-              )}
-
-              {/* Resend OTP Section */}
-
-              {!isKeyboardOpen && (
-                <View style={styles.resendSection}>
-                  <Button.TextButton
-                    title={
-                      resendTimer > 0
-                        ? `${text?.resendOtpCountdownText ?? DEFAULT_TEXT.resendOtpCountdownText} ${resendTimer}s`
-                        : (text?.resendOtpText ?? DEFAULT_TEXT.resendOtpText)
-                    }
-                    onPress={handleResendOtp}
-                    disabled={resendTimer > 0}
-                    color={
-                      resendTimer > 0
-                        ? resolvedTheme.colors.onSurfaceVariant
-                        : resolvedTheme.colors.textPrimary
-                    }
-                    leftIcon={
-                      <MessageSquare
-                        size={scale(14)}
-                        color={
-                          resendTimer > 0
-                            ? resolvedTheme.colors.onSurfaceVariant
-                            : resolvedTheme.colors.textPrimary
-                        }
-                      />
-                    }
-                    style={{ fontSize: RFValue(12), marginLeft: scale(6) }}
-                    bold
-                  />
-                </View>
-              )}
-            </View>
-          </View>
-        </HideKeyboard>
-      </View>
-    </BackgroundLayout.Two>
-  );
-};
-
-export default memo(OTP);