@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

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

@@ -1,454 +0,0 @@
-import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
-import {
-  View,
-  type ViewStyle,
-  type TextStyle,
-  type KeyboardTypeOptions,
-  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 { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
-import HideKeyboard from '../../Keyboard/HideKeyboard';
-import { useKeyboard } from '../../../hooks/useKeyboard';
-import BackBtn from '../../Button/BackBtn';
-import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-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';
-
-type OTPProps = {
-  title?: string;
-  onSubmit?: (values: { otp: string }) => Promise<void> | void;
-  onTopBackBtnPress?: () => void;
-  containerStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-  formStyle?: ViewStyle;
-  backBtnStyle?: ViewStyle;
-  backgroundImage?: {
-    source?: string | null;
-    onImageError?: (error: Error) => void;
-    gradientSplitBackground?: number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
-  };
-  loading?: boolean;
-  logoUri?: string;
-  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;
-  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?: TextStyle;
-  focusCellStyle?: TextStyle;
-};
-
-const DEFAULT_TEXT = {
-  otpLabel: 'Enter OTP',
-  otpPlaceholder: '••••',
-  submitButton: 'Verify OTP',
-  loadingSubmitBtnText: 'Verifying...',
-  otpSentText: 'A One-Time OTP has been sent to',
-  resendOtpText: 'Resend OTP',
-  resendOtpCountdownText: 'Resend OTP in',
-};
-
-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 } = useInternalTheme(overrideTheme);
-  const { isKeyboardOpen } = useKeyboard();
-  const [otp, setOtp] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [resendTimer, setResendTimer] = useState(resendDisabledTime);
-
-  const ref = useBlurOnFulfill({ value: otp, cellCount: otpDigitCount });
-  const [codeFieldProps, getCellOnLayoutHandler] = useClearByFocusCell({
-    value: otp,
-    setValue: setOtp,
-  });
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          flex: 1,
-          width: '100%',
-          paddingHorizontal: scale(16),
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-        topBackBtnWrapper: {
-          position: 'absolute',
-          top: verticalScale(6),
-          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,
-        },
-      }),
-    [
-      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);
-    }, 1000);
-    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]);
-
-  // Auto-submit when OTP is auto-filled and complete
-  useEffect(() => {
-    if (
-      autoSubmitOnFill &&
-      otp.length === otpDigitCount &&
-      !isSubmitting &&
-      !loading &&
-      onSubmit
-    ) {
-      const timer = setTimeout(() => {
-        handleSubmit();
-      }, 300); // Small delay to ensure OTP is fully set
-      return () => clearTimeout(timer);
-    }
-    return;
-  }, [
-    otp,
-    otpDigitCount,
-    autoSubmitOnFill,
-    isSubmitting,
-    loading,
-    onSubmit,
-    handleSubmit,
-  ]);
-
-  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]
-  );
-  return (
-    <BackgroundLayout
-      theme={overrideTheme}
-      backgroundImage={backgroundImage?.source}
-      gradientSplitBackground={gradientSplitBackground}
-    >
-      <View style={[styles.container, containerStyle]}>
-        {/* Top Back Button */}
-        {shouldRender(renderBackButton || onTopBackBtnPress) && (
-          <View style={styles.topBackBtnWrapper}>
-            {renderBackButton ? (
-              renderBackButton({
-                onPress: onTopBackBtnPress ?? (() => {}),
-              })
-            ) : (
-              <BackBtn
-                theme={overrideTheme}
-                style={backBtnStyle}
-                onPress={onTopBackBtnPress}
-              />
-            )}
-          </View>
-        )}
-        <HideKeyboard>
-          <View style={styles.centerContent}>
-            {renderLogo ? (
-              renderLogo()
-            ) : logoUri ? (
-              <Logo logoUri={logoUri} />
-            ) : null}
-
-            {renderOtpHeader ? (
-              renderOtpHeader()
-            ) : (
-              <Text style={[styles.title, titleStyle]}>{title}</Text>
-            )}
-
-            {phoneNumber &&
-              (renderPhoneText ? (
-                renderPhoneText(phoneNumber)
-              ) : (
-                <View style={styles.sentNumberContainer}>
-                  <Text style={styles.sentText}>{text?.otpSentText}</Text>
-                  <Text
-                    style={{
-                      fontWeight: '700',
-                      fontSize: RFValue(13),
-                      marginTop: verticalScale(4),
-                      color: resolvedTheme.colors.primary,
-                    }}
-                  >
-                    {phoneNumber}
-                  </Text>
-                </View>
-              ))}
-
-            <View style={[styles.form, formStyle]}>
-              {renderOtpInput ? (
-                renderOtpInput({
-                  value: otp,
-                  onChange: (val) => setOtp(val.replace(/\D/g, '')),
-                  isFocused: Array.from(
-                    { length: otpDigitCount },
-                    (_, i) => otp.length === i
-                  ),
-                })
-              ) : (
-                <CodeField
-                  ref={ref}
-                  {...codeFieldProps}
-                  value={otp}
-                  onChangeText={(input) => setOtp(input.replace(/\D/g, ''))}
-                  cellCount={otpDigitCount}
-                  rootStyle={styles.codeFieldRoot}
-                  keyboardType={keyboardType}
-                  textContentType={enableAutoFill ? 'oneTimeCode' : 'none'}
-                  autoComplete={
-                    enableAutoFill
-                      ? Platform.OS === 'android'
-                        ? 'sms-otp'
-                        : 'off'
-                      : 'off'
-                  }
-                  renderCell={({ index, symbol, isFocused }) => (
-                    <Text
-                      key={index}
-                      style={[
-                        styles.cell,
-                        cellStyle,
-                        isFocused && styles.focusCell,
-                        isFocused && focusCellStyle,
-                      ]}
-                      onLayout={getCellOnLayoutHandler(index)}
-                    >
-                      {symbol || (isFocused ? <Cursor /> : null)}
-                    </Text>
-                  )}
-                />
-              )}
-
-              {renderSubmitButton ? (
-                renderSubmitButton({
-                  onPress: handleSubmit,
-                  disabled: isSubmitDisabled,
-                  loading: isLoading,
-                })
-              ) : (
-                <Button.Primary
-                  title={text.submitButton || DEFAULT_TEXT.submitButton}
-                  theme={overrideTheme}
-                  onPress={handleSubmit}
-                  loadingText={text.loadingSubmitBtnText}
-                  titleStyle={{ fontSize: RFValue(13) }}
-                  disabled={isSubmitDisabled}
-                  loading={isLoading}
-                />
-              )}
-
-              {/* Resend OTP Section */}
-
-              {!isKeyboardOpen && (
-                <View
-                  style={{ alignItems: 'center', marginTop: verticalScale(10) }}
-                >
-                  {renderResendButton ? (
-                    renderResendButton({
-                      onPress: handleResendOtp,
-                      disabled: resendTimer > 0,
-                    })
-                  ) : (
-                    <Text
-                      onPress={resendTimer <= 0 ? handleResendOtp : undefined}
-                      style={{
-                        fontSize: RFValue(12),
-                        color:
-                          resendTimer > 0
-                            ? resolvedTheme.colors.onSurfaceVariant
-                            : resolvedTheme.colors.primary,
-                        textAlign: 'center',
-                      }}
-                    >
-                      {resendTimer > 0
-                        ? `${text?.resendOtpCountdownText || DEFAULT_TEXT.resendOtpCountdownText} ${resendTimer}s`
-                        : text?.resendOtpText || DEFAULT_TEXT.resendOtpText}
-                    </Text>
-                  )}
-                </View>
-              )}
-            </View>
-          </View>
-        </HideKeyboard>
-      </View>
-    </BackgroundLayout>
-  );
-};
-
-export default memo(OTP);