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

package/src/components/Auth/Login/LoginWithPhone.tsx

@@ -1,306 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 16 Jun 2025 at 04:10 PM
- */
-
-import React, { memo, useCallback, useMemo } from 'react';
-import { StyleSheet, View, type TextStyle, type ViewStyle } from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
-import { scale, verticalScale } from 'react-native-size-matters';
-
-import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
-import { Logo } from '../../Logo/Logo';
-import { Button } from '../../Button';
-import HideKeyboard from '../../Keyboard/HideKeyboard';
-import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-import { useKeyboard } from '../../../hooks/useKeyboard';
-import PhoneNumberInput from '../../Input/PhoneNumberInput';
-import TextButton from '../../Button/TextButton';
-import BackBtn from '../../Button/BackBtn';
-import { Text } from '../../Text';
-import type { ThemeOverride } from '../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-type PhoneField = {
-  fullNumber: string;
-  countryCode: string;
-  formattedNumber: string;
-};
-
-type FormValues = {
-  phone: PhoneField;
-};
-
-type LoginWithPhoneProps = {
-  title?: string;
-  onSubmit?: (values: FormValues) => 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';
-  };
-  loadingSubmitBtn?: boolean;
-  logoUri?: string;
-  theme?: ThemeOverride;
-  text?: {
-    phoneLabel?: string;
-    phonePlaceholder?: string;
-    loadingSubmitBtnText?: string;
-    loginButton?: string;
-    loginWithEmailButton?: string;
-  };
-  renderLogo?: () => React.ReactNode;
-  renderPhoneHeader?: () => React.ReactNode;
-  renderSubmitButton?: (props: {
-    onPress: () => void;
-    disabled: boolean;
-    loading: boolean;
-  }) => React.ReactNode;
-  renderLoginWithEmail?: () => React.ReactNode;
-  onLoginWithEmail?: () => void;
-  renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
-};
-
-const DEFAULT_TEXT = {
-  phoneLabel: 'Phone Number',
-  phonePlaceholder: 'Enter phone number',
-  loginButton: 'Login',
-  loadingSubmitBtnText: 'Logging in...',
-  loginWithEmailButton: 'Login With Email',
-};
-
-const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
-  title = 'Login with Phone',
-  onSubmit,
-  onTopBackBtnPress,
-  containerStyle,
-  titleStyle,
-  formStyle,
-  inputStyle,
-  topBackBtnStyle,
-  inputContainerStyle,
-  backgroundImage,
-  loadingSubmitBtn,
-  logoUri,
-  theme: overrideTheme,
-  text = DEFAULT_TEXT,
-  renderLogo,
-  renderPhoneHeader,
-  renderSubmitButton,
-  renderLoginWithEmail,
-  onLoginWithEmail,
-  renderTopBackBtn,
-}) => {
-  const { isKeyboardOpen } = useKeyboard();
-  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
-  const [isLoading, setIsLoading] = React.useState(false);
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isValid },
-  } = useForm<FormValues>({
-    defaultValues: {
-      phone: { fullNumber: '', countryCode: '91', formattedNumber: '' },
-    },
-    mode: 'onChange',
-  });
-
-  const handleFormSubmit = useCallback(
-    async (data: FormValues) => {
-      if (!onSubmit) return;
-      setIsLoading(true);
-      try {
-        await onSubmit(data);
-      } catch (error) {
-        console.error('Form submission error:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [onSubmit]
-  );
-
-  const handleEmailLogin = useCallback(() => {
-    if (onLoginWithEmail) {
-      requestAnimationFrame(onLoginWithEmail);
-    }
-  }, [onLoginWithEmail]);
-
-  // Memoize gradient split background
-  const gradientSplitBackground = useMemo(
-    () => (isKeyboardOpen ? 0.3 : 0.4),
-    [isKeyboardOpen]
-  );
-
-  // Memoize disabled state
-  const isDisabled = useMemo(
-    () => loadingSubmitBtn || isLoading,
-    [loadingSubmitBtn, isLoading]
-  );
-
-  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%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          maxWidth: scale(400),
-        },
-        title: {
-          fontSize: RFValue(21),
-          fontWeight: '700',
-          marginTop: verticalScale(8),
-          marginBottom: verticalScale(24),
-          color: resolvedTheme.colors.textPrimary,
-        },
-        form: {
-          width: '100%',
-          gap: verticalScale(10),
-          alignItems: 'center',
-        },
-        switchEmailText: {
-          marginTop: verticalScale(10),
-        },
-      }),
-    [resolvedTheme]
-  );
-  const shouldRender = (condition?: boolean | unknown): boolean =>
-    typeof condition === 'function' || !!condition;
-  return (
-    <BackgroundLayout
-      backgroundImage={backgroundImage?.source}
-      theme={overrideTheme}
-      gradientSplitBackground={gradientSplitBackground}
-    >
-      <View
-        style={[styles.container, containerStyle]}
-        testID="login-with-phone"
-      >
-        {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
-          <View style={styles.topBackBtnWrapper}>
-            {renderTopBackBtn ? (
-              renderTopBackBtn({
-                onPress: onTopBackBtnPress ?? (() => {}),
-              })
-            ) : (
-              <BackBtn
-                theme={overrideTheme}
-                style={topBackBtnStyle}
-                onPress={onTopBackBtnPress}
-              />
-            )}
-          </View>
-        )}
-        <HideKeyboard>
-          <View style={styles.centerContent}>
-            {renderLogo ? (
-              renderLogo()
-            ) : logoUri ? (
-              <Logo logoUri={logoUri} />
-            ) : null}
-
-            {renderPhoneHeader ? (
-              renderPhoneHeader()
-            ) : (
-              <Text style={[styles.title, titleStyle]}>{title}</Text>
-            )}
-
-            <View style={[styles.form, formStyle]}>
-              <Controller
-                control={control}
-                name="phone"
-                rules={{
-                  validate: (value) =>
-                    value?.fullNumber?.length >= 10
-                      ? true
-                      : 'Please enter a valid phone number',
-                }}
-                render={({ field: { onChange, value } }) => (
-                  <PhoneNumberInput
-                    value={value.formattedNumber}
-                    onChangeText={onChange}
-                    label={text.phoneLabel || DEFAULT_TEXT.phoneLabel}
-                    placeholder={
-                      text.phonePlaceholder || DEFAULT_TEXT.phonePlaceholder
-                    }
-                    disabled={isDisabled}
-                    error={!!errors.phone}
-                    errorMessage={errors.phone?.message}
-                    inputStyle={inputStyle}
-                    containerStyle={inputContainerStyle}
-                    theme={overrideTheme}
-                    accessibilityLabel={`Phone input${errors.phone ? ', error' : ''}`}
-                  />
-                )}
-              />
-
-              {renderSubmitButton ? (
-                renderSubmitButton({
-                  onPress: handleSubmit(handleFormSubmit),
-                  disabled: !isValid || isDisabled,
-                  loading: isDisabled,
-                })
-              ) : (
-                <Button.Primary
-                  title={text.loginButton || DEFAULT_TEXT.loginButton}
-                  disabled={!isValid || isDisabled}
-                  theme={overrideTheme}
-                  onPress={handleSubmit(handleFormSubmit)}
-                  loadingText={
-                    text.loadingSubmitBtnText ||
-                    DEFAULT_TEXT.loadingSubmitBtnText
-                  }
-                  loading={isDisabled}
-                />
-              )}
-            </View>
-            {!isKeyboardOpen &&
-              shouldRender(renderLoginWithEmail || onLoginWithEmail) &&
-              (renderLoginWithEmail ? (
-                renderLoginWithEmail()
-              ) : (
-                <TextButton
-                  title={
-                    text.loginWithEmailButton ||
-                    DEFAULT_TEXT.loginWithEmailButton
-                  }
-                  onPress={handleEmailLogin}
-                  color={resolvedTheme.colors.button}
-                  style={styles.switchEmailText}
-                  underline
-                  bold
-                  align="center"
-                />
-              ))}
-          </View>
-        </HideKeyboard>
-      </View>
-    </BackgroundLayout>
-  );
-};
-
-export default memo(LoginWithPhone);