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

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

@@ -1,324 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 18 Jun 2025 at 10:45 AM
- **/
-import React, { useCallback, useMemo, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Platform,
-  Alert,
-  SafeAreaView,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Input } from '../../../Input/Input';
-import { Button } from '../../../Button';
-import { BackgroundLayout } from '../../../BackgroundLayout/BackgroundLayout';
-import { Logo } from '../../../Logo/Logo';
-import { useKeyboard } from '../../../../hooks/useKeyboard';
-import HideKeyboard from '../../../Keyboard/HideKeyboard';
-import BackBtn from '../../../Button/BackBtn';
-import { Text } from '../../../Text';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-
-type FormValues = {
-  email: string;
-};
-
-type TextConfig = {
-  emailLabel?: string;
-  emailPlaceholder?: string;
-  loadingSubmitBtnText?: string;
-  forgetPasswordButton?: string;
-  bottomInfoText?: string;
-};
-
-type ForgetPasswordProps = {
-  title?: string;
-  onSubmit?: ({ email }: { email: string }) => Promise<void> | void;
-  onTopBackBtnPress?: () => void;
-  containerStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-  formStyle?: ViewStyle;
-  inputStyle?: TextStyle;
-  inputContainerStyle?: ViewStyle;
-  topBackBtnStyle?: ViewStyle;
-  backgroundImage?: {
-    source?: string | null;
-    onImageError?: (error: Error) => void;
-    gradientSplitBackground?: number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
-  };
-  logoUri?: string;
-  theme?: ThemeOverride;
-  loadingSubmitBtn?: boolean;
-  text?: TextConfig;
-  renderLogo?: () => React.ReactNode;
-  renderForgetPasswordHeader?: () => React.ReactNode;
-  renderSubmitButton?: (props: {
-    onPress: () => void;
-    disabled: boolean;
-    loading: boolean;
-  }) => React.ReactNode;
-  renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
-  renderBottomInfoText?: () => React.ReactNode;
-};
-
-const ForgetPassword: React.FC<ForgetPasswordProps> = ({
-  title = 'Forgot Password',
-  onSubmit,
-  onTopBackBtnPress,
-  containerStyle,
-  titleStyle,
-  formStyle,
-  inputStyle,
-  inputContainerStyle,
-  topBackBtnStyle,
-  loadingSubmitBtn = false,
-  backgroundImage,
-  logoUri,
-  theme: overrideTheme,
-  text = {
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your email',
-    loadingSubmitBtnText: 'Processing...',
-    forgetPasswordButton: 'Send Reset Link',
-  },
-  renderLogo,
-  renderForgetPasswordHeader,
-  renderSubmitButton,
-  renderTopBackBtn,
-  renderBottomInfoText,
-}) => {
-  const { theme } = useInternalTheme(overrideTheme);
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isValid, touchedFields },
-  } = useForm<FormValues>({
-    defaultValues: { email: '' },
-    mode: 'onChange',
-  });
-
-  const { isKeyboardOpen } = useKeyboard();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleFormSubmit = useCallback(
-    async (data: FormValues) => {
-      if (!onSubmit) return;
-      setIsLoading(true);
-      try {
-        await onSubmit(data);
-      } catch (error) {
-        console.error('Form submission error:', error);
-        Alert.alert('Error', 'Failed to process request. Please try again.');
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [onSubmit]
-  );
-
-  const shouldRender = useMemo(
-    () => (condition?: boolean | unknown) =>
-      typeof condition === 'function' || !!condition,
-    []
-  );
-
-  const isSubmitDisabled = useMemo(
-    () => loadingSubmitBtn || isLoading,
-    [loadingSubmitBtn, isLoading]
-  );
-
-  // Memoize gradient split background
-  const gradientSplitBackground = useMemo(
-    () => (isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3),
-    [isKeyboardOpen]
-  );
-
-  return (
-    <BackgroundLayout
-      backgroundImage={backgroundImage?.source}
-      theme={overrideTheme}
-      gradientSplitBackground={gradientSplitBackground}
-    >
-      <SafeAreaView style={styles.safeArea}>
-        <View style={[styles.container, containerStyle]}>
-          {/* Top Back Button */}
-          {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
-            <View style={styles.topBackBtnWrapper}>
-              {renderTopBackBtn ? (
-                renderTopBackBtn({
-                  onPress: onTopBackBtnPress ?? (() => {}),
-                })
-              ) : (
-                <BackBtn
-                  theme={overrideTheme}
-                  style={topBackBtnStyle}
-                  onPress={onTopBackBtnPress}
-                />
-              )}
-            </View>
-          )}
-          <HideKeyboard>
-            <View style={styles.centerContent}>
-              {/* Logo */}
-              {renderLogo ? (
-                renderLogo()
-              ) : logoUri ? (
-                <Logo logoUri={logoUri} width={100} height={100} />
-              ) : null}
-
-              {/* Title */}
-              {renderForgetPasswordHeader ? (
-                renderForgetPasswordHeader()
-              ) : (
-                <Text
-                  style={[
-                    styles.title,
-                    { color: theme.colors.textPrimary },
-                    titleStyle,
-                  ]}
-                  accessibilityRole="header"
-                  testID="title"
-                >
-                  {title}
-                </Text>
-              )}
-
-              {/* Form */}
-              <View style={[styles.form, formStyle]} testID="form">
-                <Controller
-                  control={control}
-                  name="email"
-                  rules={{
-                    required: 'Email is required',
-                    pattern: {
-                      value: /^\S+@\S+\.\S+$/,
-                      message: 'Enter a valid email address',
-                    },
-                  }}
-                  render={({ field: { onChange, onBlur, value } }) => (
-                    <Input.One
-                      placeholder={text.emailPlaceholder || 'Enter your email'}
-                      label={text.emailLabel || 'Email'}
-                      value={value}
-                      onChangeText={(inputText) => {
-                        const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
-                        onChange(sanitized);
-                      }}
-                      onBlur={onBlur}
-                      disabled={isSubmitDisabled}
-                      error={!!touchedFields.email && !!errors.email}
-                      errorMessage={errors.email?.message}
-                      inputStyle={inputStyle}
-                      containerStyle={inputContainerStyle}
-                      theme={overrideTheme}
-                      textContentType="emailAddress"
-                      autoCapitalize="none"
-                      keyboardType="email-address"
-                      autoCorrect={false}
-                      testID="email-input"
-                    />
-                  )}
-                />
-
-                {renderSubmitButton ? (
-                  renderSubmitButton({
-                    onPress: handleSubmit(handleFormSubmit),
-                    disabled: isSubmitDisabled || !isValid,
-                    loading: loadingSubmitBtn || isLoading,
-                  })
-                ) : (
-                  <Button.Primary
-                    title={text.forgetPasswordButton || 'Continue'}
-                    disabled={isSubmitDisabled || !isValid}
-                    theme={overrideTheme}
-                    loading={loadingSubmitBtn || isLoading}
-                    loadingText={text.loadingSubmitBtnText || 'Please wait...'}
-                    onPress={handleSubmit(handleFormSubmit)}
-                  />
-                )}
-              </View>
-
-              {/* Bottom Info Text */}
-              {!isKeyboardOpen && (
-                <>
-                  {renderBottomInfoText ? (
-                    renderBottomInfoText()
-                  ) : text.bottomInfoText ? (
-                    <Text
-                      style={[
-                        styles.bottomInfo,
-                        { color: theme.colors.textSecondary },
-                      ]}
-                      accessibilityRole="text"
-                      testID="bottom-info-text"
-                    >
-                      {text.bottomInfoText}
-                    </Text>
-                  ) : null}
-                </>
-              )}
-            </View>
-          </HideKeyboard>
-        </View>
-      </SafeAreaView>
-    </BackgroundLayout>
-  );
-};
-
-export default React.memo(ForgetPassword);
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    width: '100%',
-    paddingBottom: verticalScale(32),
-  },
-  container: {
-    flex: 1,
-    width: '100%',
-    paddingHorizontal: scale(20),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  topBackBtnWrapper: {
-    position: 'absolute',
-    top: verticalScale(6),
-    left: 0,
-    zIndex: 10,
-  },
-  centerContent: {
-    flex: 1,
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: verticalScale(16),
-  },
-  title: {
-    fontSize: RFValue(23),
-    fontWeight: '700',
-    marginTop: verticalScale(12),
-    marginBottom: verticalScale(20),
-    textAlign: 'center',
-  },
-  form: {
-    width: '100%',
-    gap: verticalScale(14),
-    marginTop: verticalScale(8),
-  },
-  bottomInfo: {
-    marginTop: verticalScale(15),
-    fontSize: RFValue(10),
-    fontWeight: '500',
-    textAlign: 'center',
-    opacity: 0.7,
-  },
-});