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

package/src/components/Alert/UAAlert.tsx

@@ -0,0 +1,176 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React from 'react';
+import { Modal, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
+import { scale } from 'react-native-size-matters';
+import type { ThemeOverride } from '../../theme/themes';
+import { useTheme } from '../../theme';
+
+interface IProps {
+  theme?: ThemeOverride;
+  visible: boolean;
+  title?: string;
+  message?: string;
+  confirmationText?: string;
+  rejectText?: string;
+  resolveText?: string;
+  onPress: (e: 'reject' | 'resolve') => void;
+  onRequestClose?: () => void;
+}
+
+export const UAAlert: React.FC<IProps> = ({
+  theme: themeOverride,
+  visible,
+  title = 'Maturity Rating: 18+',
+  message = 'May contain non-explicit sexual behavior, nudity, violence, strong language, substances.',
+  confirmationText = 'I confirm that I am 18 years and above.',
+  rejectText = 'No',
+  resolveText = 'Yes',
+  onPress,
+  onRequestClose,
+}): React.ReactElement => {
+  const { theme } = useTheme(themeOverride);
+  return (
+    <Modal
+      animationType="fade"
+      transparent
+      visible={visible}
+      onRequestClose={onRequestClose ?? (() => onPress('reject'))}
+    >
+      <View style={styles.overlay}>
+        <View
+          style={[
+            styles.container,
+            { backgroundColor: theme?.colors?.surface ?? '#fff' },
+          ]}
+        >
+          {/* Title */}
+          <Text style={[styles.title, { color: theme?.colors?.textPrimary }]}>
+            {title}
+          </Text>
+
+          {/* Message */}
+          <Text
+            style={[styles.message, { color: theme?.colors?.textSecondary }]}
+          >
+            {message}
+          </Text>
+
+          {/* Confirmation Note */}
+          {confirmationText ? (
+            <Text
+              style={[
+                styles.confirmation,
+                { color: theme?.colors?.textSecondary },
+              ]}
+            >
+              {confirmationText}
+            </Text>
+          ) : null}
+
+          {/* Divider */}
+          <View style={[styles.divider, styles.dividerColor]} />
+
+          {/* Buttons */}
+          <View style={styles.buttonRow}>
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={() => onPress('reject')}
+              style={[styles.button, styles.rejectButtonBg]}
+            >
+              <Text
+                style={[
+                  styles.buttonText,
+                  { color: theme?.colors?.black ?? '#000' },
+                ]}
+              >
+                {rejectText}
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={() => onPress('resolve')}
+              style={[
+                styles.button,
+                { backgroundColor: theme?.colors?.primary },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.buttonText,
+                  { color: theme?.colors?.black ?? '#000' },
+                ]}
+              >
+                {resolveText}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.6)', // ✅ lighter backdrop for light mode
+  },
+  container: {
+    width: '80%',
+    padding: scale(20),
+    borderRadius: scale(20),
+    elevation: 5, // ✅ shadow on Android
+    shadowColor: '#000', // ✅ shadow on iOS
+    shadowOpacity: 0.2,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 6,
+  },
+  title: {
+    fontSize: scale(18),
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  message: {
+    fontSize: scale(13),
+    textAlign: 'center',
+    marginTop: scale(20),
+  },
+  confirmation: {
+    fontSize: scale(12.2),
+    textAlign: 'center',
+    marginTop: scale(20),
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    marginVertical: scale(12),
+    marginHorizontal: scale(18),
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginTop: scale(10),
+  },
+  button: {
+    width: scale(100),
+    paddingVertical: scale(10),
+    borderRadius: scale(8),
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: scale(13),
+    fontWeight: '600',
+  },
+  dividerColor: {
+    backgroundColor: '#ccc',
+  },
+  rejectButtonBg: {
+    backgroundColor: 'rgba(255, 255, 255, 0.97)',
+  },
+});

package/src/components/Alert/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './UAAlert';
+export * from './AlertDialog';

package/src/components/Auth/AuthProvider/AuthProvider.tsx

@@ -0,0 +1,412 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
+import {
+  View,
+  StyleSheet,
+  SafeAreaView,
+  TouchableOpacity,
+  Animated,
+} from 'react-native';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../../theme';
+import { type ThemeOverride } from '../../../theme/themes';
+import { Logo } from '../../Logo/Logo';
+import { Text } from '../../Text';
+import { Phone, Mail } from 'lucide-react-native';
+import { Button } from '../../Button';
+import { default as SkeletonPlaceholder } from 'react-native-skeleton-placeholder';
+import { BackgroundLayout } from '../../BackgroundLayout';
+
+export interface AuthProviderProps {
+  logoUri: string;
+  title: string;
+  description?: string;
+  backgroundImage?: {
+    source: string | null;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+  };
+  text?: {
+    loginWithPhone?: string;
+    loginWithEmail?: string;
+  };
+  variant?: 'one' | 'two';
+  theme?: ThemeOverride;
+  isLoading?: boolean;
+  authProvider?: {
+    phone?: {
+      enabled?: boolean;
+      onPress?: () => void;
+    };
+    email?: {
+      enabled?: boolean;
+      onPress?: () => void;
+    };
+  };
+}
+
+const AuthProvider: React.FC<AuthProviderProps> = React.memo(
+  ({
+    title = 'Your Favourite OTT Platform',
+    description,
+    backgroundImage,
+    logoUri,
+    text,
+    variant = 'one',
+    theme: overrideTheme,
+    isLoading = false,
+    authProvider = {
+      phone: { enabled: true },
+      email: { enabled: true },
+    },
+  }) => {
+    const { theme: resolvedTheme } = useTheme(overrideTheme);
+    const { colors } = resolvedTheme;
+
+    const phoneEnabled = !!authProvider.phone?.enabled;
+    const emailEnabled = !!authProvider.email?.enabled;
+
+    const [activeTab, setActiveTab] = useState<'phone' | 'email'>(
+      phoneEnabled ? 'phone' : 'email'
+    );
+
+    const slideAnim = useRef(new Animated.Value(80)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      setActiveTab(phoneEnabled ? 'phone' : 'email');
+
+      Animated.parallel([
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 600,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 600,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }, [phoneEnabled, emailEnabled, slideAnim, opacityAnim]);
+
+    const triggerEvent = useCallback(
+      (type: 'phone' | 'email') => {
+        if (type === 'phone') authProvider.phone?.onPress?.();
+        else authProvider.email?.onPress?.();
+      },
+      [authProvider.phone, authProvider.email]
+    );
+
+    const handlePress = useCallback(
+      (type: 'phone' | 'email') => {
+        if (activeTab !== type) setActiveTab(type);
+        setTimeout(() => triggerEvent(type), 100);
+      },
+      [activeTab, triggerEvent]
+    );
+
+    const authMethods: {
+      key: 'phone' | 'email';
+      label: string;
+      icon: React.ReactElement<{ color?: string; size?: number }>;
+      enabled: boolean;
+    }[] = useMemo(
+      () => [
+        {
+          key: 'phone',
+          label: text?.loginWithPhone || 'Phone',
+          icon: <Phone size={moderateScale(16)} />,
+          enabled: phoneEnabled,
+        },
+        {
+          key: 'email',
+          label: text?.loginWithEmail || 'Email',
+          icon: <Mail size={moderateScale(16)} />,
+          enabled: emailEnabled,
+        },
+      ],
+      [text?.loginWithPhone, text?.loginWithEmail, phoneEnabled, emailEnabled]
+    );
+
+    // Memoize enabled methods filter
+    const enabledMethods = useMemo(
+      () => authMethods.filter((item) => item.enabled),
+      [authMethods]
+    );
+
+    // Memoize skeleton style
+    const skeletonStyle = useMemo(
+      () =>
+        StyleSheet.create({
+          skeleton: {
+            width: '100%' as const,
+            height: verticalScale(48),
+            borderRadius: moderateScale(8),
+          },
+        }).skeleton,
+      []
+    );
+
+    // Memoize toggle skeleton style
+    const toggleSkeletonStyle = useMemo(
+      () =>
+        StyleSheet.create({
+          toggleSkeleton: {
+            width: '100%' as const,
+            height: verticalScale(48),
+            borderRadius: 50,
+          },
+        }).toggleSkeleton,
+      []
+    );
+
+    // Memoize animated view style
+    const animatedViewStyle = useMemo(
+      () => ({
+        transform: [{ translateY: slideAnim }],
+        opacity: opacityAnim,
+        width: '100%' as const,
+      }),
+      [slideAnim, opacityAnim]
+    );
+
+    // Memoize title style
+    const titleStyleMemo = useMemo(
+      () => [styles.title, { color: colors.textPrimary }],
+      [colors.textPrimary]
+    );
+
+    // Memoize description style
+    const descriptionStyleMemo = useMemo(
+      () => [styles.description, { color: colors.textSecondary }],
+      [colors.textSecondary]
+    );
+
+    // Memoize toggle wrapper style
+    const toggleWrapperStyleMemo = useMemo(
+      () => [
+        styles.toggleWrapper,
+        {
+          backgroundColor: colors.surfaceVariant,
+          borderColor: colors.border,
+        },
+      ],
+      [colors.surfaceVariant, colors.border]
+    );
+
+    const renderButtons = useCallback(
+      () => (
+        <View style={styles.buttonContainer}>
+          {enabledMethods.map((item) => {
+            const isTabActive = activeTab === item.key;
+            const dynamicContainerStyle = {
+              backgroundColor: isTabActive ? colors.button : 'transparent',
+              borderWidth: 1.2,
+              borderColor: colors.button,
+            };
+            const dynamicTitleStyle = {
+              color: isTabActive ? colors.buttonText : colors.textPrimary,
+            };
+            return (
+              <React.Fragment key={item.key}>
+                {isLoading ? (
+                  <SkeletonPlaceholder
+                    backgroundColor={colors.skeletonBaseColor}
+                    highlightColor={colors.skeletonHighlightColor}
+                    borderRadius={moderateScale(8)}
+                  >
+                    <View style={skeletonStyle} />
+                  </SkeletonPlaceholder>
+                ) : (
+                  <Button.Secondary
+                    containerStyle={dynamicContainerStyle}
+                    titleStyle={dynamicTitleStyle}
+                    title={`Continue with ${item.label}`}
+                    onPress={() => handlePress(item.key)}
+                    leftIcon={React.cloneElement(item.icon, {
+                      color: isTabActive
+                        ? colors.buttonText
+                        : colors.textPrimary,
+                      size: moderateScale(18),
+                    })}
+                  />
+                )}
+              </React.Fragment>
+            );
+          })}
+        </View>
+      ),
+      [
+        enabledMethods,
+        isLoading,
+        colors.skeletonBaseColor,
+        colors.skeletonHighlightColor,
+        colors.button,
+        colors.buttonText,
+        colors.textPrimary,
+        skeletonStyle,
+        activeTab,
+        handlePress,
+      ]
+    );
+
+    // Toggle render without absolute
+    const renderToggle = useCallback(() => {
+      if (isLoading) {
+        return (
+          <SkeletonPlaceholder
+            backgroundColor={colors.skeletonBaseColor}
+            highlightColor={colors.skeletonHighlightColor}
+            borderRadius={50}
+          >
+            <View style={toggleSkeletonStyle} />
+          </SkeletonPlaceholder>
+        );
+      }
+
+      return (
+        <View style={toggleWrapperStyleMemo}>
+          {enabledMethods.map((item) => {
+            const isActive = activeTab === item.key;
+            const toggleHalfBgStyle = {
+              backgroundColor: isActive ? colors.primary : 'transparent',
+            };
+            const toggleHalfTextStyle = {
+              color: isActive ? colors.buttonText : colors.textPrimary,
+            };
+            return (
+              <TouchableOpacity
+                key={item.key}
+                style={[styles.toggleHalf, toggleHalfBgStyle]}
+                onPress={() => handlePress(item.key)}
+                activeOpacity={0.8}
+              >
+                <View style={styles.iconTextRow}>
+                  {React.cloneElement(item.icon, {
+                    color: isActive ? colors.buttonText : colors.textPrimary,
+                  })}
+                  <Text style={[styles.toggleText, toggleHalfTextStyle]}>
+                    {item.label}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      );
+    }, [
+      isLoading,
+      enabledMethods,
+      activeTab,
+      colors,
+      handlePress,
+      toggleSkeletonStyle,
+      toggleWrapperStyleMemo,
+    ]);
+
+    return (
+      <BackgroundLayout.One
+        backgroundImage={backgroundImage?.source}
+        theme={overrideTheme}
+        gradientSplitBackground={
+          backgroundImage?.gradientSplitBackground ?? 0.35
+        }
+        resizeMode={backgroundImage?.resizeMode ?? 'cover'}
+      >
+        <SafeAreaView style={styles.safeArea}>
+          <View style={styles.container}>
+            <View style={styles.logoWrapper}>
+              <Logo logoUri={logoUri} width={100} height={100} />
+            </View>
+
+            <View style={styles.bottomSection}>
+              <Text style={titleStyleMemo}>{title}</Text>
+              <Text
+                style={descriptionStyleMemo}
+                numberOfLines={2}
+                adjustsFontSizeToFit
+              >
+                {description}
+              </Text>
+
+              <Animated.View style={animatedViewStyle}>
+                {variant === 'one' ? renderButtons() : renderToggle()}
+              </Animated.View>
+            </View>
+          </View>
+        </SafeAreaView>
+      </BackgroundLayout.One>
+    );
+  }
+);
+
+export default AuthProvider;
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    width: '100%',
+    paddingBottom: verticalScale(12),
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    paddingHorizontal: scale(18),
+    paddingVertical: verticalScale(20),
+  },
+  logoWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bottomSection: {
+    width: '100%',
+    alignItems: 'center',
+    paddingBottom: verticalScale(30),
+  },
+  title: {
+    fontSize: moderateScale(18),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: verticalScale(12),
+  },
+  description: {
+    fontSize: moderateScale(14),
+    textAlign: 'center',
+    width: '90%',
+    marginBottom: verticalScale(30),
+  },
+  buttonContainer: { width: '100%', gap: verticalScale(10) },
+  toggleWrapper: {
+    flexDirection: 'row',
+    height: verticalScale(48),
+    borderRadius: 50,
+    borderWidth: scale(0.5),
+    padding: scale(4),
+    overflow: 'hidden',
+    alignItems: 'center',
+    width: '100%',
+  },
+  toggleHalf: {
+    flex: 1,
+    borderRadius: scale(50),
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  toggleText: { fontSize: moderateScale(14), fontWeight: '600' },
+  iconTextRow: { flexDirection: 'row', alignItems: 'center', gap: scale(6) },
+});