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

package/src/components/Auth/Two/Login/LoginWithEmail.tsx

@@ -1,279 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 16 Jun 2025 at 03:05 PM
- */
-
-import React, { useCallback, useMemo } from 'react';
-import {
-  StyleSheet,
-  View,
-  Keyboard,
-  type ViewStyle,
-  type TextStyle,
-  KeyboardAvoidingView,
-  Platform,
-} 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 HideKeyboard from '../../../Keyboard/HideKeyboard';
-import TextButton from '../../../Button/TextButton';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-import AuthLoginShell from './AuthLoginShell';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-import { useKeyboard } from '../../../../hooks/useKeyboard';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { Lock, Mail } from 'lucide-react-native';
-import BackgroundLayoutOne from '../../../BackgroundLayout/BackgroundLayoutOne';
-
-type FormValues = {
-  email: string;
-  password: string;
-};
-
-type LoginWithEmailProps = {
-  title?: string;
-  description?: string;
-  bottomTitle?: string;
-  onSubmit?: (values: FormValues) => void;
-  onSignup?: () => void;
-  onForgotPassword?: () => void;
-  onSwitchToPhoneLogin?: () => void;
-  onTopBackBtnPress?: () => void;
-  containerStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-  formStyle?: ViewStyle;
-  inputStyle?: TextStyle;
-  inputContainerStyle?: ViewStyle;
-  topBackBtnStyle?: ViewStyle;
-  minPasswordLength?: number;
-  backgroundImage?: {
-    source?: string | null;
-    gradientSplitBackground?: number;
-  };
-  logoUri?: string;
-  loadingSubmitBtn?: boolean;
-  theme?: ThemeOverride;
-  text?: {
-    emailLabel?: string;
-    emailPlaceholder?: string;
-    passwordLabel?: string;
-    passwordPlaceholder?: string;
-    forgotPassword?: string;
-    loadingSubmitBtnText?: string;
-    loginButton?: string;
-    signupPrompt?: string;
-    signupLink?: string;
-    switchToPhoneLogin?: string;
-  };
-  signupTextProps?: TextStyle;
-  signupLinkTextProps?: TextStyle;
-};
-
-const LoginWithEmail: React.FC<LoginWithEmailProps> = React.memo(
-  ({
-    title = 'Ready to watch?',
-    description = 'Enter your email or phone number to create your account.',
-    bottomTitle = 'By proceeding you agree to our Terms of Service and Privacy Policy',
-    onSubmit,
-    onSignup,
-    onForgotPassword,
-    onSwitchToPhoneLogin,
-    containerStyle,
-    formStyle,
-    inputStyle,
-    inputContainerStyle,
-    loadingSubmitBtn,
-    minPasswordLength = 6,
-    // backgroundImage,
-    logoUri,
-    theme: overrideTheme,
-    text,
-  }) => {
-    const { isKeyboardOpen } = useKeyboard();
-    const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
-    const [isLoading, setIsLoading] = React.useState(false);
-
-    const {
-      control,
-      handleSubmit,
-      formState: { errors, isValid, touchedFields },
-    } = useForm<FormValues>({
-      defaultValues: { email: '', password: '' },
-      mode: 'onChange',
-    });
-
-    const handleFormSubmit = useCallback(
-      async (data: FormValues) => {
-        if (!onSubmit) return;
-        setIsLoading(true);
-        try {
-          await onSubmit(data);
-        } finally {
-          setIsLoading(false);
-        }
-      },
-      [onSubmit]
-    );
-
-    const handleKeyboardDismiss = useCallback((callback?: () => void) => {
-      Keyboard.dismiss();
-      requestAnimationFrame(() => callback?.());
-    }, []);
-
-    const isDisabled = useMemo(
-      () => loadingSubmitBtn || isLoading,
-      [loadingSubmitBtn, isLoading]
-    );
-
-    // const gradientSplitBackground = useMemo(
-    //   () => (isKeyboardOpen ? 0.31 : 0.35),
-    //   [isKeyboardOpen]
-    // );
-
-    return (
-      <BackgroundLayoutOne>
-        <KeyboardAvoidingView
-          style={{ flex: 1, width: '100%' }}
-          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-          keyboardVerticalOffset={Platform.OS === 'ios' ? 20 : 0}
-        >
-          <View style={[styles.container, containerStyle]}>
-            <HideKeyboard>
-              <AuthLoginShell
-                activeTab="email"
-                logoUri={logoUri}
-                onPhonePress={onSwitchToPhoneLogin}
-                onSignup={onSignup}
-                title={title}
-                description={description}
-                bottomTitle={bottomTitle}
-                theme={overrideTheme}
-              >
-                <View style={[styles.form, formStyle]}>
-                  <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.Three
-                        label={text?.emailLabel || 'Email'}
-                        placeholder={text?.emailPlaceholder || 'Email'}
-                        value={value}
-                        onChangeText={(inputText) =>
-                          onChange(inputText.replace(/[^\w@.\-+]/g, ''))
-                        }
-                        onBlur={onBlur}
-                        disabled={isDisabled}
-                        error={!!touchedFields.email && !!errors.email}
-                        errorMessage={errors.email?.message}
-                        inputStyle={inputStyle}
-                        containerStyle={inputContainerStyle}
-                        theme={overrideTheme}
-                        textContentType="emailAddress"
-                        autoCapitalize="none"
-                        keyboardType="email-address"
-                        autoCorrect={false}
-                        leftIcon={<Mail size={22} />}
-                      />
-                    )}
-                  />
-
-                  <Controller
-                    control={control}
-                    name="password"
-                    rules={{
-                      required: 'Password is required',
-                      minLength: {
-                        value: minPasswordLength,
-                        message: `Password must be at least ${minPasswordLength} characters`,
-                      },
-                    }}
-                    render={({ field: { onChange, onBlur, value } }) => (
-                      <>
-                        <Input.Three
-                          label={text?.passwordLabel || 'Password'}
-                          placeholder={text?.passwordPlaceholder || 'Password'}
-                          value={value}
-                          secureTextEntry
-                          onChangeText={(inputText) =>
-                            onChange(inputText.replace(/[^\w@.\-+]/g, ''))
-                          }
-                          onBlur={onBlur}
-                          disabled={isDisabled}
-                          error={!!touchedFields.password && !!errors.password}
-                          errorMessage={errors.password?.message}
-                          inputStyle={inputStyle}
-                          containerStyle={inputContainerStyle}
-                          textContentType="none"
-                          autoCapitalize="none"
-                          spellCheck={false}
-                          autoCorrect={false}
-                          autoComplete="off"
-                          theme={overrideTheme}
-                          leftIcon={<Lock size={22} />}
-                        />
-                        {!isKeyboardOpen && onForgotPassword && (
-                          <TextButton
-                            title={text?.forgotPassword || 'Forgot password?'}
-                            onPress={() =>
-                              handleKeyboardDismiss(onForgotPassword)
-                            }
-                            color={resolvedTheme.colors.button}
-                            align="right"
-                            style={styles.forgotPasswordText}
-                          />
-                        )}
-                      </>
-                    )}
-                  />
-
-                  <Button.Primary
-                    title={text?.loginButton || 'Login'}
-                    onPress={handleSubmit(handleFormSubmit)}
-                    disabled={isDisabled || !isValid}
-                    loading={isDisabled}
-                    theme={overrideTheme}
-                    titleStyle={{ fontSize: RFValue(14) }}
-                    loadingText={text?.loadingSubmitBtnText || 'Logging in...'}
-                  />
-                </View>
-              </AuthLoginShell>
-            </HideKeyboard>
-          </View>
-        </KeyboardAvoidingView>
-      </BackgroundLayoutOne>
-    );
-  }
-);
-
-export default LoginWithEmail;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    paddingHorizontal: scale(16),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  form: {
-    width: '100%',
-    gap: verticalScale(10),
-  },
-  forgotPasswordText: {
-    textAlign: 'right',
-    marginRight: scale(4),
-    marginTop: -verticalScale(10),
-    marginBottom: verticalScale(8),
-  },
-});

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

@@ -1,188 +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 ViewStyle,
-  type TextStyle,
-  KeyboardAvoidingView,
-  Platform,
-} from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
-import { scale, verticalScale } from 'react-native-size-matters';
-import HideKeyboard from '../../../Keyboard/HideKeyboard';
-import { Button } from '../../../Button';
-import PhoneNumberInputOne from '../../../Input/PhoneNumberInputTwo';
-import AuthLoginShell from './AuthLoginShell';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-import BackgroundLayoutOne from '../../../BackgroundLayout/BackgroundLayoutOne';
-
-type PhoneField = {
-  fullNumber: string;
-  countryCode: string;
-  formattedNumber: string;
-};
-
-type FormValues = {
-  phone: PhoneField;
-};
-
-type LoginWithPhoneProps = {
-  title?: string;
-  description?: string;
-  bottomTitle?: string;
-  onSubmit?: (values: FormValues) => Promise<void> | void;
-  onLoginWithEmail?: () => void;
-  onSignup?: () => void;
-  containerStyle?: ViewStyle;
-  formStyle?: ViewStyle;
-  inputStyle?: TextStyle;
-  inputContainerStyle?: ViewStyle;
-  backgroundImage?: {
-    source?: string | null;
-    gradientSplitBackground?: number;
-  };
-  loadingSubmitBtn?: boolean;
-  logoUri?: string;
-  theme?: ThemeOverride;
-};
-
-const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
-  title = 'Ready to watch?',
-  description = 'Enter your email or phone number to create your account.',
-  bottomTitle = 'By proceeding you agree to our Terms of Service and Privacy Policy',
-  onSubmit,
-  onLoginWithEmail,
-  onSignup,
-  containerStyle,
-  formStyle,
-  inputStyle,
-  inputContainerStyle,
-  // backgroundImage,
-  loadingSubmitBtn,
-  logoUri,
-  theme: overrideTheme,
-}) => {
-  useInternalTheme(overrideTheme);
-  // const { isKeyboardOpen } = useKeyboard();
-  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);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [onSubmit]
-  );
-
-  const isDisabled = useMemo(
-    () => loadingSubmitBtn || isLoading,
-    [loadingSubmitBtn, isLoading]
-  );
-
-  // const gradientSplitBackground = useMemo(
-  //   () => (isKeyboardOpen ? 0.3 : 0.4),
-  //   [isKeyboardOpen]
-  // );
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          flex: 1,
-          width: '100%',
-          paddingHorizontal: scale(16),
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-        form: {
-          width: '100%',
-          gap: verticalScale(12),
-          alignItems: 'center',
-        },
-      }),
-    []
-  );
-
-  return (
-    <BackgroundLayoutOne>
-      <KeyboardAvoidingView
-        style={{ flex: 1, width: '100%' }}
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 20 : 0}
-      >
-        <View style={[styles.container, containerStyle]}>
-          <HideKeyboard>
-            <AuthLoginShell
-              activeTab="phone"
-              logoUri={logoUri}
-              onEmailPress={onLoginWithEmail}
-              onSignup={onSignup}
-              title={title}
-              description={description}
-              bottomTitle={bottomTitle}
-              theme={overrideTheme}
-            >
-              <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 } }) => (
-                    <PhoneNumberInputOne
-                      value={value.formattedNumber}
-                      onChangeText={onChange}
-                      disabled={isDisabled}
-                      error={!!errors.phone}
-                      errorMessage={errors.phone?.message}
-                      inputStyle={inputStyle}
-                      containerStyle={inputContainerStyle}
-                      theme={overrideTheme}
-                    />
-                  )}
-                />
-
-                {/* Submit button */}
-                <Button.Primary
-                  title="Login"
-                  disabled={!isValid || isDisabled}
-                  loading={isDisabled}
-                  onPress={handleSubmit(handleFormSubmit)}
-                  theme={overrideTheme}
-                />
-              </View>
-            </AuthLoginShell>
-          </HideKeyboard>
-        </View>
-      </KeyboardAvoidingView>
-    </BackgroundLayoutOne>
-  );
-};
-
-export default memo(LoginWithPhone);