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

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

@@ -1,308 +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,
-  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';
-
-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 {
-    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}
-    >
-      <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} />
-            ) : null}
-
-            {/* Title */}
-            {renderForgetPasswordHeader ? (
-              renderForgetPasswordHeader()
-            ) : (
-              <Text
-                style={[styles.title, 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}
-                    accessibilityRole="text"
-                    testID="bottom-info-text"
-                  >
-                    {text.bottomInfoText}
-                  </Text>
-                ) : null}
-              </>
-            )}
-          </View>
-        </HideKeyboard>
-      </View>
-    </BackgroundLayout>
-  );
-};
-
-export default React.memo(ForgetPassword);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    paddingHorizontal: scale(20),
-    paddingTop: verticalScale(24),
-    paddingBottom: verticalScale(32),
-    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,
-  },
-});