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

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

@@ -0,0 +1,612 @@
+/**
+ * @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)',
+  },
+});