@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

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

@@ -1,602 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified oct 02 Oct 2025 at 10:30 AM
- */
-import React, {
-  useState,
-  useRef,
-  useMemo,
-  useCallback,
-  useEffect,
-} from 'react';
-import {
-  View,
-  StyleSheet,
-  Dimensions,
-  TouchableOpacity,
-  ActivityIndicator,
-} from 'react-native';
-import type { ViewStyle, TextStyle } from 'react-native';
-import { scale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Text } from '../../Text';
-import AppHeader from '../../Headers/AppHeader';
-import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../../theme/themes';
-import { Camera as CameraIcon, QrCode } from 'lucide-react-native';
-import {
-  Camera,
-  useCameraDevice,
-  useCameraPermission,
-  useCodeScanner,
-  type Code,
-} from 'react-native-vision-camera';
-import QrViewArea from './components/QrViewArea';
-import { AppStatusBar } from '../../common/AppStatusBar';
-
-const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
-
-// ==================== Constants ====================
-const SCAN_DELAY_MS = 1000;
-const RESET_DELAY_MS = 2000;
-const CAMERA_TYPE = 'back' as const;
-const CARD_WIDTH_OFFSET = 40;
-const CARD_MIN_HEIGHT_RATIO = 2.5;
-const ICON_SIZES = {
-  camera: 50,
-  qrCode: 180,
-  button: 22,
-} as const;
-const STROKE_WIDTHS = {
-  icon: 1.6,
-  button: 2,
-} as const;
-
-// ==================== Types ====================
-export type QrLoginProps = {
-  title?: string;
-  description?: string;
-  scanButtonText?: string;
-  onBackPress?: () => void;
-  onScanSuccess?: (value: string) => void;
-  onScanError?: (error: string) => void;
-  allowMultipleScans?: boolean;
-  theme?: ThemeOverride;
-};
-
-// ==================== Default Values ====================
-const DEFAULTS = {
-  title: 'QR Login',
-  description: 'Please move your camera over the QR Code',
-  scanButtonText: 'Scan QR Code',
-  cameraType: CAMERA_TYPE,
-} as const;
-
-// ==================== Helper Functions ====================
-/**
- * Extracts error message from error object
- */
-const getErrorMessage = (error: unknown, defaultMessage: string): string => {
-  return error instanceof Error ? error.message : defaultMessage;
-};
-
-/**
- * Creates style with background color
- */
-const createBackgroundStyle = (
-  baseStyle: ViewStyle,
-  backgroundColor: string
-): ViewStyle[] => [baseStyle, { backgroundColor }];
-
-/**
- * Creates text style with color
- */
-const createTextStyle = (baseStyle: TextStyle, color: string): TextStyle[] => [
-  baseStyle,
-  { color },
-];
-
-// ==================== Custom Hooks ====================
-/**
- * Hook to manage QR scan state and timers
- */
-const useQrScanState = () => {
-  const scanTimer = useRef<NodeJS.Timeout | null>(null);
-  const resetTimer = useRef<NodeJS.Timeout | null>(null);
-  const lastValueRef = useRef<string | null>(null);
-  const isScanning = useRef(false);
-
-  const resetScanState = useCallback(() => {
-    if (scanTimer.current) {
-      clearTimeout(scanTimer.current);
-      scanTimer.current = null;
-    }
-    if (resetTimer.current) {
-      clearTimeout(resetTimer.current);
-      resetTimer.current = null;
-    }
-    isScanning.current = false;
-    lastValueRef.current = null;
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      resetScanState();
-    };
-  }, [resetScanState]);
-
-  return {
-    scanTimer,
-    resetTimer,
-    lastValueRef,
-    isScanning,
-    resetScanState,
-  };
-};
-
-/**
- * Hook to handle camera permission request
- */
-const useCameraPermissionHandler = (
-  hasPermission: boolean,
-  requestPermission: () => Promise<boolean>,
-  onError?: (error: string) => void
-) => {
-  const [requesting, setRequesting] = useState(false);
-
-  const requestCameraPermission = useCallback(async (): Promise<boolean> => {
-    if (hasPermission) return true;
-
-    setRequesting(true);
-    try {
-      const granted = await requestPermission();
-      setRequesting(false);
-
-      if (!granted) {
-        onError?.('Camera permission denied');
-        return false;
-      }
-      return true;
-    } catch (error) {
-      setRequesting(false);
-      const errorMessage = getErrorMessage(
-        error,
-        'Camera permission request failed'
-      );
-      console.warn('Camera permission request failed:', error);
-      onError?.(errorMessage);
-      return false;
-    }
-  }, [hasPermission, requestPermission, onError]);
-
-  return { requesting, requestCameraPermission };
-};
-
-// ==================== Sub-Components ====================
-/**
- * Camera view component when scanning is active
- */
-const CameraView: React.FC<{
-  device: ReturnType<typeof useCameraDevice>;
-  codeScanner: ReturnType<typeof useCodeScanner>;
-  theme?: ThemeOverride;
-}> = React.memo(({ device, codeScanner, theme }) => {
-  if (!device) {
-    return null;
-  }
-
-  return (
-    <>
-      <Camera
-        style={StyleSheet.absoluteFill}
-        device={device}
-        isActive={true}
-        codeScanner={codeScanner}
-        enableFpsGraph={false}
-      />
-      <QrViewArea theme={theme} />
-    </>
-  );
-});
-
-CameraView.displayName = 'CameraView';
-
-/**
- * No camera available view
- */
-const NoCameraView: React.FC<{
-  textStyle: TextStyle;
-  containerStyle: ViewStyle[];
-}> = React.memo(({ textStyle, containerStyle }) => (
-  <View style={containerStyle}>
-    <Text style={textStyle}>No camera available</Text>
-  </View>
-));
-
-NoCameraView.displayName = 'NoCameraView';
-
-/**
- * Initial scan screen with QR code preview
- */
-const ScanPreviewScreen: React.FC<{
-  description: string;
-  scanButtonText: string;
-  requesting: boolean;
-  onStartScan: () => void;
-  colors: {
-    button: string;
-    textPrimary: string;
-    primary: string;
-    skeletonBaseColor: string;
-  };
-  styles: {
-    descText: TextStyle[];
-    qrBox: ViewStyle[];
-    scanBtn: ViewStyle[];
-    scanText: TextStyle[];
-    iconMargin: ViewStyle;
-    buttonIconMargin: ViewStyle;
-    loaderMargin: ViewStyle;
-  };
-}> = React.memo(
-  ({
-    description,
-    scanButtonText,
-    requesting,
-    onStartScan,
-    colors,
-    styles: componentStyles,
-  }) => (
-    <View style={styles.content}>
-      <View style={styles.card}>
-        <CameraIcon
-          size={scale(ICON_SIZES.camera)}
-          color={colors.button}
-          strokeWidth={STROKE_WIDTHS.icon}
-          style={componentStyles.iconMargin}
-        />
-
-        <Text style={componentStyles.descText}>{description}</Text>
-
-        <View style={componentStyles.qrBox}>
-          <QrCode
-            size={scale(ICON_SIZES.qrCode)}
-            color={colors.button}
-            strokeWidth={STROKE_WIDTHS.icon}
-          />
-        </View>
-
-        <TouchableOpacity
-          style={componentStyles.scanBtn}
-          onPress={onStartScan}
-          activeOpacity={0.85}
-        >
-          <CameraIcon
-            size={scale(ICON_SIZES.button)}
-            color={colors.button}
-            strokeWidth={STROKE_WIDTHS.button}
-            style={componentStyles.buttonIconMargin}
-          />
-          <Text style={componentStyles.scanText}>{scanButtonText}</Text>
-        </TouchableOpacity>
-
-        {requesting && (
-          <ActivityIndicator
-            style={componentStyles.loaderMargin}
-            color={colors.primary}
-          />
-        )}
-      </View>
-    </View>
-  )
-);
-
-ScanPreviewScreen.displayName = 'ScanPreviewScreen';
-
-// ==================== Main Component ====================
-export const QrLogin: React.FC<QrLoginProps> = React.memo(
-  ({
-    title = DEFAULTS.title,
-    description = DEFAULTS.description,
-    scanButtonText = DEFAULTS.scanButtonText,
-    onBackPress,
-    onScanSuccess,
-    onScanError,
-    allowMultipleScans = true,
-    theme,
-  }) => {
-    const { theme: appliedTheme } = useInternalTheme(theme);
-    const { colors } = appliedTheme;
-    const { top: statusBarHeight } = useSafeAreaInsets();
-
-    const [scanActive, setScanActive] = useState(false);
-
-    const device = useCameraDevice(DEFAULTS.cameraType);
-    const { hasPermission, requestPermission } = useCameraPermission();
-
-    // QR scan state management
-    const { scanTimer, resetTimer, lastValueRef, isScanning, resetScanState } =
-      useQrScanState();
-
-    // Camera permission handler
-    const { requesting, requestCameraPermission } = useCameraPermissionHandler(
-      hasPermission,
-      requestPermission,
-      onScanError
-    );
-
-    // Stop scanning
-    const stopScan = useCallback(() => {
-      resetScanState();
-      setScanActive(false);
-    }, [resetScanState]);
-
-    // Handle back press
-    const handleBackPress = useCallback(() => {
-      if (scanActive) {
-        stopScan();
-      }
-      onBackPress?.();
-    }, [scanActive, stopScan, onBackPress]);
-
-    // Handle code scanned
-    const handleCodeScanned = useCallback(
-      (codes: Code[]) => {
-        if (isScanning.current || codes.length === 0) return;
-
-        for (const code of codes) {
-          const value = code?.value;
-          if (!value) continue;
-
-          // Prevent duplicate scans
-          if (!allowMultipleScans && lastValueRef.current === value) return;
-
-          // Clear pending scan timer
-          if (scanTimer.current) {
-            clearTimeout(scanTimer.current);
-            scanTimer.current = null;
-          }
-
-          lastValueRef.current = value;
-
-          // Trigger success callback after delay
-          scanTimer.current = setTimeout(() => {
-            isScanning.current = true;
-            try {
-              onScanSuccess?.(value);
-            } catch (error) {
-              const errorMessage = getErrorMessage(
-                error,
-                'Unknown error occurred'
-              );
-              onScanError?.(errorMessage);
-              console.error('QR scan success callback error:', error);
-            }
-
-            // Reset scan state after delay for re-scanning
-            if (allowMultipleScans) {
-              resetTimer.current = setTimeout(() => {
-                resetScanState();
-              }, RESET_DELAY_MS);
-            }
-          }, SCAN_DELAY_MS);
-
-          break;
-        }
-      },
-      [
-        onScanSuccess,
-        onScanError,
-        allowMultipleScans,
-        resetScanState,
-        isScanning,
-        lastValueRef,
-        resetTimer,
-        scanTimer,
-      ]
-    );
-
-    // Code scanner
-    const codeScanner = useCodeScanner({
-      codeTypes: ['qr'],
-      onCodeScanned: handleCodeScanned,
-    });
-
-    // Start scan
-    const startScan = useCallback(async () => {
-      resetScanState();
-
-      const hasPermissionGranted = await requestCameraPermission();
-      if (!hasPermissionGranted) return;
-
-      if (!device) {
-        onScanError?.('No camera device available');
-        return;
-      }
-
-      setScanActive(true);
-    }, [device, resetScanState, requestCameraPermission, onScanError]);
-
-    // Memoized styles
-    const containerStyle = useMemo(
-      () => createBackgroundStyle(styles.container, colors.background),
-      [colors.background]
-    );
-
-    const headerWrapperStyle = useMemo(
-      () => [
-        styles.headerWrapper,
-        {
-          height: statusBarHeight,
-          backgroundColor: colors.background,
-        },
-      ],
-      [colors.background, statusBarHeight]
-    );
-
-    const centerStyle = useMemo(
-      () => createBackgroundStyle(styles.center, colors.background),
-      [colors.background]
-    );
-
-    const descTextStyle = useMemo(
-      () => createTextStyle(styles.descText, colors.textPrimary),
-      [colors.textPrimary]
-    );
-
-    const qrBoxStyle = useMemo(
-      () => [
-        styles.qrBox,
-        {
-          borderColor: colors.primary,
-          backgroundColor: colors.skeletonBaseColor,
-        },
-      ],
-      [colors.primary, colors.skeletonBaseColor]
-    );
-
-    const scanBtnStyle = useMemo(
-      () => [styles.scanBtn, { borderColor: colors.button }],
-      [colors.button]
-    );
-
-    const scanTextStyle = useMemo(
-      () => createTextStyle(styles.scanText, colors.button),
-      [colors.button]
-    );
-
-    const noCameraTextStyle = useMemo(
-      () => ({ color: colors.textPrimary, fontSize: RFValue(16) }),
-      [colors.textPrimary]
-    );
-
-    const cameraWrapperStyle = useMemo(
-      () => [
-        styles.cameraWrapper,
-        {
-          top: statusBarHeight,
-        },
-      ],
-      [statusBarHeight]
-    );
-
-    const componentStyles = useMemo(
-      () => ({
-        descText: descTextStyle,
-        qrBox: qrBoxStyle,
-        scanBtn: scanBtnStyle,
-        scanText: scanTextStyle,
-        iconMargin: styles.iconMargin,
-        buttonIconMargin: styles.buttonIconMargin,
-        loaderMargin: styles.loaderMargin,
-      }),
-      [descTextStyle, qrBoxStyle, scanBtnStyle, scanTextStyle]
-    );
-
-    return (
-      <View style={containerStyle}>
-        <AppStatusBar theme={theme} />
-
-        <View style={headerWrapperStyle}>
-          <AppHeader
-            title={title}
-            onBackPress={handleBackPress}
-            theme={theme}
-            titleAlign="left"
-          />
-        </View>
-
-        <View style={cameraWrapperStyle}>
-          {scanActive ? (
-            device ? (
-              <CameraView
-                device={device}
-                codeScanner={codeScanner}
-                theme={theme}
-              />
-            ) : (
-              <NoCameraView
-                textStyle={noCameraTextStyle}
-                containerStyle={centerStyle}
-              />
-            )
-          ) : (
-            <ScanPreviewScreen
-              description={description}
-              scanButtonText={scanButtonText}
-              requesting={requesting}
-              onStartScan={startScan}
-              colors={colors}
-              styles={componentStyles}
-            />
-          )}
-        </View>
-      </View>
-    );
-  }
-);
-
-QrLogin.displayName = 'QrLogin';
-
-// ==================== Styles ====================
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  headerWrapper: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 20,
-    elevation: 20,
-  },
-  cameraWrapper: {
-    flex: 1,
-  },
-  center: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  content: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: scale(14),
-    marginBottom: scale(50),
-  },
-  card: {
-    width: SCREEN_W - scale(CARD_WIDTH_OFFSET),
-    minHeight: SCREEN_H / CARD_MIN_HEIGHT_RATIO,
-    alignItems: 'center',
-    padding: scale(20),
-  },
-  descText: {
-    fontSize: RFValue(15),
-    textAlign: 'center',
-    marginVertical: scale(12),
-  },
-  qrBox: {
-    marginVertical: scale(20),
-    padding: scale(20),
-    borderWidth: 2,
-    borderRadius: scale(12),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  scanBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: scale(2),
-    borderRadius: scale(12),
-    paddingVertical: scale(10),
-    paddingHorizontal: scale(25),
-    marginTop: scale(20),
-  },
-  scanText: { fontWeight: '600', fontSize: RFValue(14) },
-  iconMargin: { marginBottom: scale(12) },
-  buttonIconMargin: { marginRight: 10 },
-  loaderMargin: { marginTop: scale(12) },
-});
-
-export default QrLogin;