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

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

@@ -1,539 +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 { SafeAreaView } from 'react-native-safe-area-context';
-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 { Logo } from '../../../Logo/Logo';
-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 { BackgroundLayout } from '../../../BackgroundLayout';
-
-type OTPProps = {
-  title?: string;
-  onSubmit?: (values: { otp: string }) => Promise<void> | void;
-  onTopBackBtnPress?: () => void;
-  containerStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  formStyle?: StyleProp<ViewStyle>;
-  backBtnStyle?: StyleProp<ViewStyle>;
-  backgroundImage?: {
-    source?: string | null;
-  };
-  loading?: boolean;
-  logoUri?: string;
-  theme?: ThemeOverride;
-  otpDigitCount?: number;
-  keyboardType?: KeyboardTypeOptions;
-  phoneNumber?: string;
-  enableAutoFill?: boolean;
-  autoSubmitOnFill?: boolean;
-  text?: {
-    loadingSubmitBtnText?: string;
-    submitButton?: string;
-    otpSentText?: string;
-    resendOtpText?: string;
-    resendOtpCountdownText?: string;
-  };
-  // Resend
-  onResendOtp?: () => void;
-  renderResendButton?: (props: {
-    onPress: () => void;
-    disabled: boolean;
-  }) => React.ReactNode;
-  resendDisabledTime?: number;
-
-  // Render Props
-  renderLogo?: () => React.ReactNode;
-  renderSubmitButton?: (props: {
-    onPress: () => void;
-    disabled: boolean;
-    loading: boolean;
-  }) => React.ReactNode;
-  renderBackButton?: (props: { onPress: () => void }) => React.ReactNode;
-  renderOtpHeader?: () => React.ReactNode;
-  renderOtpInput?: (props: {
-    value: string;
-    onChange: (value: string) => void;
-    isFocused: boolean[];
-  }) => React.ReactNode;
-  renderPhoneText?: (phoneNumber: string) => React.ReactNode;
-
-  // Style Overrides
-  cellStyle?: StyleProp<TextStyle>;
-  focusCellStyle?: StyleProp<TextStyle>;
-};
-
-const DEFAULT_TEXT = {
-  submitButton: 'Verify OTP',
-  loadingSubmitBtnText: 'Verifying...',
-  otpSentText: 'A One-Time 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,
-  backgroundImage,
-  loading = false,
-  logoUri,
-  theme: overrideTheme,
-  otpDigitCount = 4,
-  keyboardType = 'number-pad',
-  phoneNumber,
-  enableAutoFill = true,
-  autoSubmitOnFill = true,
-  text = DEFAULT_TEXT,
-  onResendOtp,
-  renderResendButton,
-  resendDisabledTime = 30,
-  renderLogo,
-  renderSubmitButton,
-  renderBackButton,
-  renderOtpHeader,
-  renderOtpInput,
-  renderPhoneText,
-  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({
-        safeArea: {
-          flex: 1,
-          width: '100%',
-          paddingBottom: verticalScale(12),
-        },
-        container: {
-          flex: 1,
-          width: '100%',
-          paddingHorizontal: scale(16),
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-        topBackBtnWrapper: {
-          position: 'absolute',
-          top: verticalScale(2),
-          left: 0,
-          zIndex: 10,
-        },
-
-        centerContent: {
-          flex: 1,
-          width: '100%',
-          maxWidth: scale(400),
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: verticalScale(4),
-        },
-        title: {
-          fontSize: RFValue(21),
-          fontWeight: '700',
-          marginTop: verticalScale(8),
-          color: resolvedTheme.colors.textPrimary,
-          textAlign: 'center',
-        },
-        sentText: {
-          fontSize: RFValue(12),
-          color: resolvedTheme.colors.onSurfaceVariant,
-          textAlign: 'center',
-          lineHeight: scale(18),
-        },
-        sentNumberContainer: {
-          marginTop: verticalScale(8),
-          alignItems: 'center',
-        },
-        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(1),
-          borderRadius: scale(8),
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          alignSelf: 'center',
-          overflow: 'hidden',
-          color: resolvedTheme.colors.textPrimary,
-          borderColor: resolvedTheme.colors.outline,
-        },
-        focusCell: {
-          borderColor: resolvedTheme.colors.primary,
-          backgroundColor: resolvedTheme.colors.surfaceVariant,
-        },
-        resendSection: {
-          alignItems: 'center',
-          marginTop: verticalScale(10),
-        },
-        resendText: {
-          fontSize: RFValue(12),
-          textAlign: 'center',
-        },
-        resendTextDisabled: {
-          color: resolvedTheme.colors.onSurfaceVariant,
-        },
-        resendTextActive: {
-          color: resolvedTheme.colors.primary,
-        },
-        phoneNumberText: {
-          fontWeight: '700',
-          fontSize: RFValue(13),
-          marginTop: verticalScale(4),
-          color: resolvedTheme.colors.primary,
-        },
-        submitButtonTitle: {
-          fontSize: RFValue(13),
-        },
-      }),
-    [
-      isKeyboardOpen,
-      resolvedTheme.colors.onSurfaceVariant,
-      resolvedTheme.colors.outline,
-      resolvedTheme.colors.primary,
-      resolvedTheme.colors.surfaceVariant,
-      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,
-    []
-  );
-
-  // Memoize gradient split background
-  const gradientSplitBackground = useMemo(
-    () => (isKeyboardOpen ? 0.3 : 0.4),
-    [isKeyboardOpen]
-  );
-
-  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.One
-      theme={overrideTheme}
-      backgroundImage={backgroundImage?.source}
-      gradientSplitBackground={gradientSplitBackground}
-    >
-      <SafeAreaView style={styles.safeArea}>
-        {/* Top Back Button */}
-        {shouldRender(renderBackButton || onTopBackBtnPress) && (
-          <View style={styles.topBackBtnWrapper}>
-            {renderBackButton ? (
-              renderBackButton({
-                onPress: onTopBackBtnPress ?? noop,
-              })
-            ) : (
-              <BackBtn
-                theme={overrideTheme}
-                style={backBtnStyle}
-                onPress={onTopBackBtnPress}
-              />
-            )}
-          </View>
-        )}
-        <View style={[styles.container, containerStyle]}>
-          <HideKeyboard>
-            <View style={styles.centerContent}>
-              {renderLogo ? (
-                renderLogo()
-              ) : logoUri ? (
-                <Logo logoUri={logoUri} width={100} height={100} />
-              ) : null}
-
-              {renderOtpHeader ? (
-                renderOtpHeader()
-              ) : (
-                <Text style={[styles.title, titleStyle]}>{title}</Text>
-              )}
-
-              {phoneNumber &&
-                (renderPhoneText ? (
-                  renderPhoneText(phoneNumber)
-                ) : (
-                  <View style={styles.sentNumberContainer}>
-                    <Text style={styles.sentText}>
-                      {text?.otpSentText ?? DEFAULT_TEXT.otpSentText}
-                    </Text>
-                    <Text style={styles.phoneNumberText}>{phoneNumber}</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}>
-                    {renderResendButton ? (
-                      renderResendButton({
-                        onPress: handleResendOtp,
-                        disabled: resendTimer > 0,
-                      })
-                    ) : (
-                      <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.primary
-                        }
-                        style={{ fontSize: RFValue(12) }}
-                        bold
-                      />
-                    )}
-                  </View>
-                )}
-              </View>
-            </View>
-          </HideKeyboard>
-        </View>
-      </SafeAreaView>
-    </BackgroundLayout.One>
-  );
-};
-
-export default memo(OTP);