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

package/src/components/Auth/One/QrLogin/QrLogin.tsx

@@ -1,329 +0,0 @@
-import React, {
-  useState,
-  useMemo,
-  useCallback,
-  useRef,
-  useEffect,
-} from 'react';
-import { View, StyleSheet } from 'react-native';
-import {
-  Camera,
-  useCameraDevice,
-  useCameraPermission,
-  useCodeScanner,
-} from 'react-native-vision-camera';
-
-import { AppHeader } from '../../../Headers';
-import { AppStatusBar } from '../../../common/AppStatusBar';
-import { useTheme } from '../../../../theme';
-
-import {
-  QrScannerIntro,
-  QrScannerOverlay,
-  QrScannerFrame,
-  QrScannerHeader,
-  QrScannerFallback,
-} from './components';
-
-export type ScannerStatus = 'idle' | 'loading' | 'success' | 'error';
-
-export interface ScannerState {
-  status: ScannerStatus;
-  message: string;
-}
-
-export type QrLoginProps = {
-  title?: string;
-  description?: string;
-  scanButtonText?: string;
-  onBackPress?: () => void;
-  onCodeScanned?: (value: string) => void;
-  isProcessing?: boolean;
-  theme?: any;
-  status?: ScannerStatus;
-  statusMessage?: string;
-  verifyQrLogin?: (scannedValue: string) => Promise<any>;
-  onSuccess?: () => void;
-  onError?: (message: string) => void;
-};
-
-export const QrLogin: React.FC<QrLoginProps> = React.memo(
-  ({
-    title = 'Scan QR Code',
-    description = 'Point your camera at the QR code to sign in',
-    scanButtonText = 'Open Scanner',
-    onBackPress,
-    onCodeScanned,
-    isProcessing = false,
-    theme,
-    status,
-    statusMessage,
-    verifyQrLogin,
-    onSuccess,
-    onError,
-  }) => {
-    const { theme: appliedTheme } = useTheme(theme);
-    const { colors } = appliedTheme;
-
-    const [isScanning, setIsScanning] = useState(false);
-    const [isPermissionDenied, setIsPermissionDenied] = useState(false);
-
-    // Scanner state management
-    const [scannerState, setScannerState] = useState<ScannerState>({
-      status: 'idle',
-      message: '',
-    });
-
-    const errorTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const cooldownTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-      null
-    );
-    const lastScannedQrRef = useRef('');
-    const isProcessingRef = useRef(false);
-
-    const clearErrorTimeout = useCallback(() => {
-      if (errorTimeoutRef.current) {
-        clearTimeout(errorTimeoutRef.current);
-        errorTimeoutRef.current = null;
-      }
-    }, []);
-
-    const updateStatus = useCallback(
-      (newStatus: ScannerStatus, msg: string) => {
-        clearErrorTimeout();
-        setScannerState({ status: newStatus, message: msg });
-        if (newStatus === 'error') {
-          errorTimeoutRef.current = setTimeout(() => {
-            setScannerState({ status: 'idle', message: '' });
-          }, 3000);
-        }
-      },
-      [clearErrorTimeout]
-    );
-
-    const handleScan = useCallback(
-      async (scannedValue: string) => {
-        try {
-          if (!scannedValue?.trim() || isProcessingRef.current) return;
-
-          const cleanedValue = scannedValue.replace(/"/g, '').trim();
-          if (!cleanedValue) return;
-
-          if (
-            cleanedValue.startsWith('http://') ||
-            cleanedValue.startsWith('https://')
-          ) {
-            updateStatus(
-              'error',
-              'Unsupported QR code. Please scan the QR code displayed on your TV screen.'
-            );
-            return;
-          }
-
-          if (lastScannedQrRef.current === cleanedValue) return;
-
-          isProcessingRef.current = true;
-          lastScannedQrRef.current = cleanedValue;
-
-          updateStatus('loading', 'Signing in...');
-
-          await verifyQrLogin?.(cleanedValue);
-
-          updateStatus('success', 'Login success!');
-          onSuccess?.();
-
-          cooldownTimeoutRef.current = setTimeout(() => {
-            isProcessingRef.current = false;
-            lastScannedQrRef.current = '';
-          }, 2500);
-        } catch (err: any) {
-          isProcessingRef.current = false;
-          lastScannedQrRef.current = '';
-
-          const rawMsg =
-            err.response?.data?.errors?.[0]?.msg ||
-            err.response?.data?.message ||
-            err.message ||
-            '';
-
-          let errorMsg = 'Failed to verify QR code. Please try again.';
-
-          if (
-            rawMsg &&
-            rawMsg.length < 80 &&
-            !rawMsg.includes('Exception') &&
-            !rawMsg.includes('Error') &&
-            !rawMsg.includes('{') &&
-            !rawMsg.includes('html')
-          ) {
-            errorMsg = rawMsg;
-          } else if (err.message === 'Network Error') {
-            errorMsg =
-              'Connection error. Please check your internet connection.';
-          }
-
-          updateStatus('error', errorMsg);
-          onError?.(errorMsg);
-        }
-      },
-      [updateStatus, verifyQrLogin, onSuccess, onError]
-    );
-
-    useEffect(() => {
-      return () => {
-        if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current);
-        if (cooldownTimeoutRef.current)
-          clearTimeout(cooldownTimeoutRef.current);
-      };
-    }, []);
-
-    const currentStatus = status !== undefined ? status : scannerState.status;
-    const currentMessage =
-      statusMessage !== undefined ? statusMessage : scannerState.message;
-    const currentIsLoading = isProcessing || currentStatus === 'loading';
-
-    const device = useCameraDevice('back');
-    const { hasPermission, requestPermission } = useCameraPermission();
-
-    const codeScanner = useCodeScanner({
-      codeTypes: ['qr'],
-      onCodeScanned: (codes) => {
-        if (currentIsLoading) return;
-        const value = codes[0]?.value;
-        if (value) {
-          if (onCodeScanned) {
-            onCodeScanned(value);
-          } else {
-            handleScan(value);
-          }
-        }
-      },
-    });
-
-    const requestCameraPermission = useCallback(async (): Promise<boolean> => {
-      if (hasPermission) return true;
-      const granted = await requestPermission();
-      if (!granted) setIsPermissionDenied(true);
-      return granted;
-    }, [hasPermission, requestPermission]);
-
-    const closeScanner = useCallback(() => {
-      setIsScanning(false);
-      setIsPermissionDenied(false);
-    }, []);
-
-    const handleBackPress = useCallback(() => {
-      if (isScanning) {
-        closeScanner();
-      } else {
-        onBackPress?.();
-      }
-    }, [isScanning, closeScanner, onBackPress]);
-
-    const openScanner = useCallback(async () => {
-      const granted = await requestCameraPermission();
-      if (!granted) return;
-
-      if (!device) return;
-
-      setIsScanning(true);
-    }, [device, requestCameraPermission]);
-
-    const containerStyle = useMemo(
-      () => [styles.container, { backgroundColor: colors.background }],
-      [colors.background]
-    );
-
-    const headerWrapperStyle = useMemo(
-      () => [styles.headerWrapper, { backgroundColor: colors.background }],
-      [colors.background]
-    );
-
-    const renderContent = () => {
-      if (isScanning) {
-        if (!device) {
-          return (
-            <QrScannerFallback
-              isCameraUnavailable
-              hasPermission={hasPermission}
-              onPress={closeScanner}
-            />
-          );
-        }
-
-        return (
-          <View style={styles.cameraContainer}>
-            <Camera
-              style={StyleSheet.absoluteFill}
-              device={device}
-              isActive={isScanning && !currentIsLoading}
-              codeScanner={codeScanner}
-            />
-            <QrScannerOverlay
-              header={<QrScannerHeader title={title} />}
-              scanner={<QrScannerFrame />}
-              isProcessing={currentIsLoading}
-              status={currentStatus}
-              statusMessage={currentMessage}
-            />
-          </View>
-        );
-      }
-
-      if (isPermissionDenied) {
-        return (
-          <QrScannerFallback
-            hasPermission={false}
-            isCameraUnavailable={false}
-            onPress={openScanner}
-          />
-        );
-      }
-
-      return (
-        <QrScannerIntro
-          title={title}
-          description={description}
-          scanButtonText={scanButtonText}
-          loading={currentIsLoading}
-          onPress={openScanner}
-        />
-      );
-    };
-
-    return (
-      <View style={containerStyle}>
-        <AppStatusBar theme={theme} />
-
-        <View style={headerWrapperStyle}>
-          <AppHeader
-            title={title}
-            onBackPress={handleBackPress}
-            theme={theme}
-            titleAlign="left"
-          />
-        </View>
-
-        <View style={styles.cameraWrapper}>{renderContent()}</View>
-      </View>
-    );
-  }
-);
-
-QrLogin.displayName = 'QrLogin';
-
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  headerWrapper: {
-    zIndex: 20,
-    elevation: 20,
-  },
-  cameraWrapper: {
-    flex: 1,
-  },
-  cameraContainer: {
-    flex: 1,
-  },
-});
-
-export default QrLogin;

package/src/components/Auth/One/QrLogin/components/index.ts

@@ -1,8 +0,0 @@
-export { default as QrScannerIntro } from './qr-scanner-intro';
-
-export { default as QrScannerHeader } from './qr-scanner-header';
-
-export { default as QrScannerFrame } from './qr-scanner-frame';
-
-export { default as QrScannerFallback } from './qr-scanner-fallback';
-export { default as QrScannerOverlay } from './qr-scanner-overlay';

package/src/components/Auth/One/QrLogin/components/qr-scanner-fallback.tsx

@@ -1,158 +0,0 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import { Camera, ShieldAlert } from 'lucide-react-native';
-
-import { useTheme } from '../../../../../theme';
-import { toRgba } from '../../../../../theme/utils/toRgba';
-import { Text } from '../../../../Text';
-import { Button } from '../../../../Button';
-
-type Props = {
-  hasPermission?: boolean;
-  isCameraUnavailable?: boolean;
-  onPress?: () => void;
-};
-
-const QrScannerFallback: React.FC<Props> = ({
-  hasPermission = false,
-  isCameraUnavailable = false,
-  onPress,
-}) => {
-  const { theme } = useTheme();
-  const { colors } = theme;
-
-  const title = isCameraUnavailable
-    ? 'Camera Unavailable'
-    : 'Camera Access Required';
-
-  const description = isCameraUnavailable
-    ? 'No camera device was found on this device. Please use a device with a working camera.'
-    : 'Please allow camera access so we can scan your QR code and sign you in securely.';
-
-  return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
-      <View style={styles.content}>
-        <View
-          style={[
-            styles.iconOuter,
-            { backgroundColor: toRgba(colors.primary, 0.06) },
-          ]}
-        >
-          <View
-            style={[
-              styles.iconInner,
-              { backgroundColor: toRgba(colors.primary, 0.12) },
-            ]}
-          >
-            {isCameraUnavailable ? (
-              <Camera
-                size={moderateScale(28)}
-                color={colors.primary}
-                strokeWidth={2}
-              />
-            ) : (
-              <ShieldAlert
-                size={moderateScale(28)}
-                color={colors.primary}
-                strokeWidth={2}
-              />
-            )}
-          </View>
-        </View>
-
-        <Text style={[styles.title, { color: colors.textPrimary }]}>
-          {title}
-        </Text>
-
-        <Text
-          style={[
-            styles.description,
-            { color: toRgba(colors.textPrimary, 0.65) },
-          ]}
-        >
-          {description}
-        </Text>
-
-        {!hasPermission && !isCameraUnavailable && (
-          <Button.Primary
-            title="Allow Camera Access"
-            onPress={onPress}
-            containerStyle={styles.button}
-            titleStyle={styles.buttonText}
-          />
-        )}
-
-        {isCameraUnavailable && (
-          <Button.Secondary
-            title="Go Back"
-            onPress={onPress}
-            containerStyle={styles.button}
-            titleStyle={styles.buttonText}
-          />
-        )}
-      </View>
-    </View>
-  );
-};
-
-export default QrScannerFallback;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-
-  content: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: scale(32),
-    paddingBottom: verticalScale(60),
-  },
-
-  iconOuter: {
-    width: moderateScale(96),
-    height: moderateScale(96),
-    borderRadius: 999,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: verticalScale(24),
-  },
-
-  iconInner: {
-    width: moderateScale(68),
-    height: moderateScale(68),
-    borderRadius: 999,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  title: {
-    fontSize: RFValue(18),
-    lineHeight: RFValue(23),
-    fontWeight: '700',
-    textAlign: 'center',
-    marginBottom: verticalScale(10),
-  },
-
-  description: {
-    width: '85%',
-    fontSize: RFValue(12),
-    lineHeight: RFValue(18),
-    textAlign: 'center',
-    marginBottom: verticalScale(32),
-  },
-
-  button: {
-    width: '60%',
-    alignSelf: 'center',
-    minHeight: verticalScale(38),
-    paddingVertical: verticalScale(8),
-  },
-
-  buttonText: {
-    fontSize: RFValue(12),
-  },
-});

package/src/components/Auth/One/QrLogin/components/qr-scanner-frame.tsx

@@ -1,207 +0,0 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withRepeat,
-  withSequence,
-  withTiming,
-  Easing,
-} from 'react-native-reanimated';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-
-import { useTheme } from '../../../../../theme';
-import { toRgba } from '../../../../../theme/utils/toRgba';
-
-const SCANNER_SIZE = moderateScale(260);
-const LINE_HEIGHT = verticalScale(2);
-const VERTICAL_PADDING = verticalScale(30);
-const MAX_TRANSLATE = SCANNER_SIZE - VERTICAL_PADDING * 2;
-const GLOW_HEIGHT = verticalScale(20);
-
-const QrScannerFrame: React.FC = () => {
-  const { theme } = useTheme();
-  const { colors } = theme;
-
-  const translateY = useSharedValue(0);
-
-  React.useEffect(() => {
-    translateY.value = withRepeat(
-      withSequence(
-        withTiming(MAX_TRANSLATE, {
-          duration: 1800,
-          easing: Easing.inOut(Easing.ease),
-        }),
-        withTiming(0, {
-          duration: 1800,
-          easing: Easing.inOut(Easing.ease),
-        })
-      ),
-      -1,
-      false
-    );
-  }, [translateY]);
-
-  const animatedLineStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: translateY.value }],
-  }));
-
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.frame,
-          {
-            borderColor: toRgba(colors.primary, 0.08),
-            shadowColor: colors.primary,
-          },
-        ]}
-      >
-        <Animated.View
-          style={[
-            styles.scanLineWrapper,
-            { top: VERTICAL_PADDING - 14 },
-            animatedLineStyle,
-          ]}
-        >
-          <LinearGradient
-            colors={[
-              'transparent',
-              toRgba(colors.primary, 0.08),
-              toRgba(colors.primary, 0.4),
-              toRgba(colors.primary, 0.08),
-              'transparent',
-            ]}
-            locations={[0, 0.2, 0.5, 0.8, 1]}
-            style={styles.glow}
-          />
-
-          <View
-            style={[
-              styles.scanLine,
-              {
-                backgroundColor: colors.primary,
-                shadowColor: colors.primary,
-              },
-            ]}
-          />
-        </Animated.View>
-      </View>
-
-      <View
-        style={[
-          styles.corner,
-          styles.cornerTopLeft,
-          { borderColor: colors.primary },
-        ]}
-      />
-
-      <View
-        style={[
-          styles.corner,
-          styles.cornerTopRight,
-          { borderColor: colors.primary },
-        ]}
-      />
-
-      <View
-        style={[
-          styles.corner,
-          styles.cornerBottomLeft,
-          { borderColor: colors.primary },
-        ]}
-      />
-
-      <View
-        style={[
-          styles.corner,
-          styles.cornerBottomRight,
-          { borderColor: colors.primary },
-        ]}
-      />
-    </View>
-  );
-};
-
-export default React.memo(QrScannerFrame);
-
-const styles = StyleSheet.create({
-  container: {
-    width: SCANNER_SIZE,
-    height: SCANNER_SIZE,
-    position: 'relative',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  frame: {
-    width: SCANNER_SIZE,
-    height: SCANNER_SIZE,
-    borderRadius: moderateScale(28),
-    borderWidth: 1,
-    overflow: 'hidden',
-    backgroundColor: 'transparent',
-    shadowOffset: { width: 0, height: 10 },
-    shadowOpacity: 0.08,
-    shadowRadius: 18,
-  },
-
-  scanLineWrapper: {
-    position: 'absolute',
-    width: '100%',
-    height: GLOW_HEIGHT,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  glow: {
-    position: 'absolute',
-    width: '82%',
-    height: GLOW_HEIGHT,
-    top: 0,
-  },
-
-  scanLine: {
-    width: '82%',
-    height: LINE_HEIGHT,
-  },
-
-  corner: {
-    position: 'absolute',
-    width: scale(46),
-    height: scale(46),
-  },
-
-  cornerTopLeft: {
-    top: 0,
-    left: 0,
-    borderTopWidth: 5,
-    borderLeftWidth: 5,
-    borderTopLeftRadius: moderateScale(26),
-  },
-
-  cornerTopRight: {
-    top: 0,
-    right: 0,
-    borderTopWidth: 5,
-    borderRightWidth: 5,
-    borderTopRightRadius: moderateScale(26),
-  },
-
-  cornerBottomLeft: {
-    bottom: 0,
-    left: 0,
-    borderBottomWidth: 5,
-    borderLeftWidth: 5,
-    borderBottomLeftRadius: moderateScale(26),
-  },
-
-  cornerBottomRight: {
-    bottom: 0,
-    right: 0,
-    borderBottomWidth: 5,
-    borderRightWidth: 5,
-    borderBottomRightRadius: moderateScale(26),
-  },
-});