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

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

@@ -0,0 +1,539 @@
+/**
+ * @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);