@zezosoft/zezo-ott-react-native-ui-kit 1.3.6 → 1.3.8

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

@@ -1,612 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  Animated,
-  Easing,
-  Keyboard,
-  Platform,
-  StyleSheet,
-  type TextStyle,
-  type ViewStyle,
-  type StyleProp,
-} from 'react-native';
-import { Controller, useForm } from 'react-hook-form';
-import { Pressable } from 'react-native-gesture-handler';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Lock, Mail, ShieldOff } from 'lucide-react-native';
-
-import AuthHeader from '../AuthHeader/AuthHeader';
-import { useTheme } from '../../../../theme';
-import type { ThemeOverride } from '../../../../theme';
-import { BackgroundLayout } from '../../../BackgroundLayout';
-import { Text } from '../../../Text';
-import { Button } from '../../../Button';
-import { Input } from '../../../Input/Input';
-import View from '../../../View/View';
-import HideKeyboard from '../../../Keyboard/HideKeyboard';
-import { useKeyboard } from '../../../../hooks';
-import TextButton from '../../../Button/TextButton';
-import Logo from '../../../Logo/Logo';
-
-/* ===================== TYPES ===================== */
-
-type PhoneNumberField = {
-  fullNumber: string;
-  countryCode: string;
-  formattedNumber: string;
-};
-
-type PhoneLoginForm = {
-  phone: PhoneNumberField;
-};
-
-type EmailLoginForm = {
-  email: string;
-  password: string;
-};
-
-type SubmitFormData =
-  (PhoneLoginForm & { type: 'phone' }) | (EmailLoginForm & { type: 'email' });
-
-type LoginProps = {
-  isEnabledMethods: {
-    phone: boolean;
-    email: boolean;
-  };
-  logoUri: string;
-  onPressSignup?: () => void;
-  onSubmit?: (values: SubmitFormData) => Promise<void> | void;
-  theme?: ThemeOverride;
-  title?: string;
-  description?: string;
-  text?: {
-    emailPlaceholder?: string;
-    phonePlaceholder?: string;
-    passwordPlaceholder?: string;
-    forgotPassword?: string;
-    submitButtonPhone?: string;
-    submitButtonEmail?: string;
-    loadingSubmitBtnTextPhone?: string;
-    loadingSubmitBtnTextEmail?: string;
-  };
-  formStyle?: StyleProp<ViewStyle>;
-  inputStyle?: StyleProp<TextStyle>;
-  inputContainerStyle?: StyleProp<ViewStyle>;
-  aboutTextBottom?: string;
-  loadingSubmitBtn?: boolean;
-  minPasswordLength?: number;
-  onForgotPassword?: () => void;
-};
-
-/* ===================== CONSTANTS ===================== */
-
-const PHONE_DEFAULT_VALUES: PhoneLoginForm = {
-  phone: { fullNumber: '', countryCode: '91', formattedNumber: '' },
-};
-
-const EMAIL_DEFAULT_VALUES: EmailLoginForm = {
-  email: '',
-  password: '',
-};
-
-/* ===================== COMPONENT ===================== */
-
-const EmailOrPhoneLogin = ({
-  isEnabledMethods,
-  logoUri,
-  onPressSignup,
-  onSubmit,
-  theme: customTheme,
-  title = 'Ready to watch?',
-  description = 'Enter your email or phone number to create your account.',
-  aboutTextBottom = 'By continuing, you agree to our Terms of Use and Privacy Policy.',
-  loadingSubmitBtn,
-  formStyle,
-  inputContainerStyle,
-  inputStyle,
-  text,
-  minPasswordLength = 6,
-  onForgotPassword,
-}: LoginProps) => {
-  const { phone = true, email = true } = isEnabledMethods ?? {};
-  const { isKeyboardOpen } = useKeyboard();
-  const { theme } = useTheme(customTheme);
-
-  /* ── Tab resolution ── */
-  const resolveTab = useCallback(
-    (current: 'phone' | 'email'): 'phone' | 'email' => {
-      if (current === 'phone' && phone) return 'phone';
-      if (current === 'email' && email) return 'email';
-      if (phone) return 'phone';
-      if (email) return 'email';
-      return 'phone';
-    },
-    [phone, email]
-  );
-
-  const [activeTab, setActiveTab] = useState<'phone' | 'email'>(() => {
-    if (phone) return 'phone';
-    if (email) return 'email';
-    return 'phone';
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const activeTabRef = useRef(activeTab);
-  activeTabRef.current = activeTab;
-
-  /* ── Forms ── */
-  const phoneLoginForm = useForm<PhoneLoginForm>({
-    defaultValues: PHONE_DEFAULT_VALUES,
-    mode: 'onChange',
-  });
-
-  const emailLoginForm = useForm<EmailLoginForm>({
-    defaultValues: EMAIL_DEFAULT_VALUES,
-    mode: 'onChange',
-  });
-
-  /* ── Sync active tab when enabled methods change at runtime ── */
-  useEffect(() => {
-    const preferred = resolveTab(activeTabRef.current);
-    if (preferred !== activeTabRef.current) {
-      setActiveTab(preferred);
-      if (preferred === 'phone') {
-        emailLoginForm.reset(EMAIL_DEFAULT_VALUES);
-      } else {
-        phoneLoginForm.reset(PHONE_DEFAULT_VALUES);
-      }
-    }
-  }, [phone, email, resolveTab, phoneLoginForm, emailLoginForm]);
-
-  /* ── Submit ── */
-  const submitHandler = useCallback(
-    async (formData: PhoneLoginForm | EmailLoginForm) => {
-      if (!onSubmit) return;
-      setIsSubmitting(true);
-      try {
-        if (activeTabRef.current === 'phone') {
-          await onSubmit({ ...(formData as PhoneLoginForm), type: 'phone' });
-        } else {
-          await onSubmit({ ...(formData as EmailLoginForm), type: 'email' });
-        }
-      } finally {
-        setIsSubmitting(false);
-      }
-    },
-    [onSubmit]
-  );
-
-  /* ── Tab switch ── */
-  const switchTab = useCallback(
-    (tab: 'phone' | 'email') => {
-      if (tab === 'phone' && !phone) return;
-      if (tab === 'email' && !email) return;
-      setActiveTab(tab);
-      if (tab === 'phone') {
-        phoneLoginForm.reset(PHONE_DEFAULT_VALUES);
-      } else {
-        emailLoginForm.reset(EMAIL_DEFAULT_VALUES);
-      }
-    },
-    [phone, email, phoneLoginForm, emailLoginForm]
-  );
-
-  /* ── Derived state ── */
-  const isLoading = (loadingSubmitBtn ?? false) || isSubmitting;
-  const isFormEnabled =
-    (activeTab === 'phone' && phone) || (activeTab === 'email' && email);
-  const showTabs = phone && email;
-
-  const dismissKeyboardAndExecute = useCallback((callback?: () => void) => {
-    Keyboard.dismiss();
-    requestAnimationFrame(() => callback?.());
-  }, []);
-
-  /* ── Fallback pulse animation (unconditional hook) ── */
-  const pulseAnim = useRef(new Animated.Value(1)).current;
-
-  useEffect(() => {
-    if (phone || email) return;
-    const anim = Animated.loop(
-      Animated.sequence([
-        Animated.timing(pulseAnim, {
-          toValue: 1.12,
-          duration: 1100,
-          easing: Easing.inOut(Easing.ease),
-          useNativeDriver: true,
-        }),
-        Animated.timing(pulseAnim, {
-          toValue: 1,
-          duration: 1100,
-          easing: Easing.inOut(Easing.ease),
-          useNativeDriver: true,
-        }),
-      ])
-    );
-    anim.start();
-    return () => anim.stop();
-  }, [phone, email, pulseAnim]);
-
-  /* ── No methods fallback ── */
-  if (!phone && !email) {
-    return (
-      <BackgroundLayout.Two>
-        <View style={styles.centered}>
-          {/* Logo */}
-          <Logo logoUri={logoUri} height={34} />
-
-          {/* Icon */}
-          <View style={styles.nmIconSection}>
-            <Animated.View
-              style={[
-                styles.nmGlowRing,
-                {
-                  borderColor: theme.colors.error,
-                  transform: [{ scale: pulseAnim }],
-                },
-              ]}
-            />
-            <View style={[styles.nmIconCircle, styles.errorIconBg]}>
-              <ShieldOff
-                size={42}
-                color={theme.colors.error}
-                strokeWidth={1.5}
-              />
-            </View>
-          </View>
-
-          {/* Divider */}
-          <View
-            style={[styles.nmDivider, { backgroundColor: theme.colors.border }]}
-          />
-
-          {/* Text */}
-          <View style={styles.nmTextGroup}>
-            <Text style={[styles.nmTitle, { color: theme.colors.textPrimary }]}>
-              Login Unavailable
-            </Text>
-            <Text
-              style={[styles.nmSubtitle, { color: theme.colors.textSecondary }]}
-            >
-              Sign-in is currently disabled. Try again later.
-            </Text>
-          </View>
-        </View>
-      </BackgroundLayout.Two>
-    );
-  }
-
-  /* ── Main UI ── */
-  const currentForm = activeTab === 'phone' ? phoneLoginForm : emailLoginForm;
-  const handleSubmitForm = currentForm.handleSubmit(submitHandler);
-
-  const containerMarginStyle = {
-    marginVertical: isKeyboardOpen
-      ? ('auto' as const)
-      : Platform.OS === 'ios'
-        ? showTabs
-          ? verticalScale(120)
-          : verticalScale(150)
-        : showTabs
-          ? verticalScale(130)
-          : verticalScale(170),
-  };
-
-  return (
-    <BackgroundLayout.Two>
-      <View style={styles.root}>
-        <AuthHeader
-          logoUri={logoUri}
-          rightTitle="Sign Up"
-          onRightPress={onPressSignup}
-          theme={customTheme}
-        />
-
-        <HideKeyboard keyboardVerticalOffset={0}>
-          <View style={[styles.container, containerMarginStyle]}>
-            <View style={styles.header}>
-              <Text style={[styles.title, { color: theme.colors.textPrimary }]}>
-                {title}
-              </Text>
-              <Text
-                style={[styles.subtitle, { color: theme.colors.textPrimary }]}
-              >
-                {description}
-              </Text>
-            </View>
-
-            {showTabs && (
-              <View style={styles.tabContainer}>
-                {(['phone', 'email'] as const).map((tab) => {
-                  const tabTextStyle = {
-                    color: theme.colors.textPrimary,
-                    opacity: activeTab === tab ? 1 : 0.6,
-                  };
-                  const activeIndicatorStyle = {
-                    backgroundColor: theme.colors.button,
-                  };
-                  return (
-                    <Pressable
-                      key={tab}
-                      style={styles.tab}
-                      onPress={() => switchTab(tab)}
-                    >
-                      <Text style={[styles.tabText, tabTextStyle]}>
-                        {tab === 'phone' ? 'Phone number' : 'Email address'}
-                      </Text>
-                      {activeTab === tab && (
-                        <View
-                          style={[styles.activeIndicator, activeIndicatorStyle]}
-                        />
-                      )}
-                    </Pressable>
-                  );
-                })}
-              </View>
-            )}
-
-            <View style={[styles.formWrapper, formStyle]}>
-              {activeTab === 'phone' && (
-                <Controller
-                  control={phoneLoginForm.control}
-                  name="phone"
-                  rules={{
-                    validate: (value) =>
-                      value?.fullNumber?.length >= 10 ||
-                      'Please enter a valid phone number',
-                  }}
-                  render={({ field: { onChange, value } }) => (
-                    <Input.PhoneInput.Two
-                      value={value.formattedNumber}
-                      onChangeText={onChange}
-                      disabled={isLoading}
-                      error={!!phoneLoginForm.formState.errors.phone}
-                      errorMessage={
-                        phoneLoginForm.formState.errors.phone?.message
-                      }
-                      inputStyle={inputStyle}
-                      containerStyle={inputContainerStyle}
-                      theme={customTheme}
-                    />
-                  )}
-                />
-              )}
-
-              {activeTab === 'email' && (
-                <>
-                  <Controller
-                    control={emailLoginForm.control}
-                    name="email"
-                    rules={{
-                      required: 'Email is required',
-                      pattern: {
-                        value: /^\S+@\S+\.\S+$/,
-                        message: 'Enter a valid email address',
-                      },
-                    }}
-                    render={({ field: { onChange, value } }) => (
-                      <Input.Three
-                        placeholder={text?.emailPlaceholder ?? 'Email'}
-                        value={value}
-                        onChangeText={(t) => onChange(t.toLowerCase())}
-                        textContentType="emailAddress"
-                        autoCapitalize="none"
-                        keyboardType="email-address"
-                        autoCorrect={false}
-                        disabled={isLoading}
-                        error={!!emailLoginForm.formState.errors.email}
-                        errorMessage={
-                          emailLoginForm.formState.errors.email?.message
-                        }
-                        leftIcon={<Mail size={22} />}
-                        theme={customTheme}
-                      />
-                    )}
-                  />
-
-                  <Controller
-                    control={emailLoginForm.control}
-                    name="password"
-                    rules={{
-                      required: 'Password is required',
-                      minLength: {
-                        value: minPasswordLength,
-                        message: `Password must be at least ${minPasswordLength} characters`,
-                      },
-                    }}
-                    render={({ field: { onChange, value } }) => (
-                      <>
-                        <Input.Three
-                          placeholder={text?.passwordPlaceholder ?? 'Password'}
-                          value={value}
-                          secureTextEntry
-                          onChangeText={onChange}
-                          disabled={isLoading}
-                          error={!!emailLoginForm.formState.errors.password}
-                          errorMessage={
-                            emailLoginForm.formState.errors.password?.message
-                          }
-                          leftIcon={<Lock size={22} />}
-                          theme={customTheme}
-                        />
-                        {!isKeyboardOpen && onForgotPassword && (
-                          <TextButton
-                            title={text?.forgotPassword ?? 'Forgot password?'}
-                            onPress={() =>
-                              dismissKeyboardAndExecute(onForgotPassword)
-                            }
-                            color={theme.colors.button}
-                            align="right"
-                            style={styles.forgotPassword}
-                          />
-                        )}
-                      </>
-                    )}
-                  />
-                </>
-              )}
-
-              {!isKeyboardOpen && (
-                <Button.Primary
-                  title={
-                    activeTab === 'phone'
-                      ? (text?.submitButtonPhone ?? 'Send OTP')
-                      : (text?.submitButtonEmail ?? 'Login')
-                  }
-                  disabled={
-                    !isFormEnabled ||
-                    !currentForm.formState.isValid ||
-                    isLoading
-                  }
-                  loadingText={
-                    activeTab === 'phone'
-                      ? (text?.loadingSubmitBtnTextPhone ?? 'Sending OTP...')
-                      : (text?.loadingSubmitBtnTextEmail ?? 'Logging in...')
-                  }
-                  loading={isLoading}
-                  onPress={handleSubmitForm}
-                  theme={customTheme}
-                />
-              )}
-            </View>
-          </View>
-        </HideKeyboard>
-
-        {!isKeyboardOpen && !!aboutTextBottom && (
-          <Text
-            style={[styles.footerText, { color: theme.colors.textPrimary }]}
-          >
-            {aboutTextBottom}
-          </Text>
-        )}
-      </View>
-    </BackgroundLayout.Two>
-  );
-};
-
-export default EmailOrPhoneLogin;
-
-/* ===================== STYLES ===================== */
-
-const styles = StyleSheet.create({
-  /* ── Main screen ── */
-  root: {
-    flex: 1,
-    paddingVertical: verticalScale(Platform.OS === 'ios' ? 0 : 10),
-    paddingHorizontal: scale(18),
-    alignItems: 'center',
-  },
-  container: {
-    width: '100%',
-  },
-  header: {
-    width: '100%',
-    gap: verticalScale(6),
-    alignItems: 'center',
-    marginBottom: verticalScale(15),
-  },
-  title: {
-    fontSize: RFValue(22),
-    fontWeight: '700',
-    marginBottom: verticalScale(6),
-  },
-  subtitle: {
-    fontSize: RFValue(12),
-    paddingHorizontal: scale(20),
-    textAlign: 'center',
-  },
-  tabContainer: {
-    flexDirection: 'row',
-    marginBottom: verticalScale(20),
-  },
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    marginTop: verticalScale(30),
-  },
-  tabText: {
-    fontSize: RFValue(14.5),
-    fontWeight: '600',
-  },
-  activeIndicator: {
-    marginTop: verticalScale(6),
-    height: 2,
-    width: '70%',
-  },
-  formWrapper: {
-    width: '100%',
-    gap: verticalScale(12),
-    alignItems: 'center',
-  },
-  forgotPassword: {
-    textAlign: 'right',
-    marginRight: scale(4),
-    marginTop: -verticalScale(15),
-    marginBottom: verticalScale(8),
-  },
-  footerText: {
-    marginBottom: verticalScale(45),
-    fontSize: RFValue(12.5),
-    opacity: 0.8,
-    textAlign: 'center',
-  },
-
-  /* ── No-methods fallback ── */
-  centered: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: scale(32),
-    gap: verticalScale(20),
-  },
-  nmIconSection: {
-    width: scale(110),
-    height: scale(110),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  nmGlowRing: {
-    position: 'absolute',
-    width: scale(110),
-    height: scale(110),
-    borderRadius: scale(55),
-    borderWidth: 1.5,
-    opacity: 0.4,
-  },
-  nmIconCircle: {
-    width: scale(88),
-    height: scale(88),
-    borderRadius: scale(44),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  nmDivider: {
-    width: scale(40),
-    height: 1,
-    borderRadius: 1,
-  },
-  nmTextGroup: {
-    alignItems: 'center',
-    gap: verticalScale(6),
-  },
-  nmTitle: {
-    fontSize: RFValue(20),
-    fontWeight: '700',
-    textAlign: 'center',
-    letterSpacing: 0.2,
-  },
-  nmSubtitle: {
-    fontSize: RFValue(13),
-    textAlign: 'center',
-    opacity: 0.55,
-    lineHeight: RFValue(21),
-  },
-  errorIconBg: {
-    backgroundColor: 'rgba(239,68,68,0.12)',
-  },
-});