@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

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

@@ -1,465 +0,0 @@
-import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
-import {
-  View,
-  type ViewStyle,
-  type TextStyle,
-  type KeyboardTypeOptions,
-  StyleSheet,
-  Platform,
-  SafeAreaView,
-} 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({
-        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,
-        },
-      }),
-    [
-      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}
-    >
-      <SafeAreaView style={styles.safeArea}>
-        <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} 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}</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>
-      </SafeAreaView>
-    </BackgroundLayout>
-  );
-};
-
-export default memo(OTP);