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

package/lib/module/components/Auth/One/QrLogin/QrLogin.js

@@ -1,376 +1,199 @@
 "use strict";
 
-/**
- * @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 { 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/index.js";
-import AppHeader from "../../../Headers/AppHeader.js";
-import { useInternalTheme } from "../../../../theme/hook/useInternalTheme.js";
-import { Camera as CameraIcon, QrCode } from 'lucide-react-native';
+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 QrViewArea from "./components/QrViewArea.js";
+import { AppHeader } from "../../../Headers/index.js";
 import { AppStatusBar } from "../../../common/AppStatusBar.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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';
-const CARD_WIDTH_OFFSET = 40;
-const CARD_MIN_HEIGHT_RATIO = 2.5;
-const ICON_SIZES = {
-  camera: 50,
-  qrCode: 180,
-  button: 22
-};
-const STROKE_WIDTHS = {
-  icon: 1.6,
-  button: 2
-};
-
-// ==================== Types ====================
-
-// ==================== Default Values ====================
-const DEFAULTS = {
-  title: 'QR Login',
-  description: 'Please move your camera over the QR Code',
-  scanButtonText: 'Scan QR Code',
-  cameraType: CAMERA_TYPE
-};
-
-// ==================== Helper Functions ====================
-/**
- * Extracts error message from error object
- */
-const getErrorMessage = (error, defaultMessage) => {
-  return error instanceof Error ? error.message : defaultMessage;
-};
-
-/**
- * Creates style with background color
- */
-const createBackgroundStyle = (baseStyle, backgroundColor) => [baseStyle, {
-  backgroundColor
-}];
-
-/**
- * Creates text style with color
- */
-const createTextStyle = (baseStyle, color) => [baseStyle, {
-  color
-}];
-
-// ==================== Custom Hooks ====================
-/**
- * Hook to manage QR scan state and timers
- */
-const useQrScanState = () => {
-  const scanTimer = useRef(null);
-  const resetTimer = useRef(null);
-  const lastValueRef = useRef(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, requestPermission, onError) => {
-  const [requesting, setRequesting] = useState(false);
-  const requestCameraPermission = useCallback(async () => {
-    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 = /*#__PURE__*/React.memo(({
-  device,
-  codeScanner,
-  theme
-}) => {
-  if (!device) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Camera, {
-      style: StyleSheet.absoluteFill,
-      device: device,
-      isActive: true,
-      codeScanner: codeScanner,
-      enableFpsGraph: false
-    }), /*#__PURE__*/_jsx(QrViewArea, {
-      theme: theme
-    })]
-  });
-});
-CameraView.displayName = 'CameraView';
-
-/**
- * No camera available view
- */
-const NoCameraView = /*#__PURE__*/React.memo(({
-  textStyle,
-  containerStyle
-}) => /*#__PURE__*/_jsx(View, {
-  style: containerStyle,
-  children: /*#__PURE__*/_jsx(Text, {
-    style: textStyle,
-    children: "No camera available"
-  })
-}));
-NoCameraView.displayName = 'NoCameraView';
-
-/**
- * Initial scan screen with QR code preview
- */
-const ScanPreviewScreen = /*#__PURE__*/React.memo(({
-  description,
-  scanButtonText,
-  requesting,
-  onStartScan,
-  colors,
-  styles: componentStyles
-}) => /*#__PURE__*/_jsx(View, {
-  style: styles.content,
-  children: /*#__PURE__*/_jsxs(View, {
-    style: styles.card,
-    children: [/*#__PURE__*/_jsx(CameraIcon, {
-      size: scale(ICON_SIZES.camera),
-      color: colors.button,
-      strokeWidth: STROKE_WIDTHS.icon,
-      style: componentStyles.iconMargin
-    }), /*#__PURE__*/_jsx(Text, {
-      style: componentStyles.descText,
-      children: description
-    }), /*#__PURE__*/_jsx(View, {
-      style: componentStyles.qrBox,
-      children: /*#__PURE__*/_jsx(QrCode, {
-        size: scale(ICON_SIZES.qrCode),
-        color: colors.button,
-        strokeWidth: STROKE_WIDTHS.icon
-      })
-    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-      style: componentStyles.scanBtn,
-      onPress: onStartScan,
-      activeOpacity: 0.85,
-      children: [/*#__PURE__*/_jsx(CameraIcon, {
-        size: scale(ICON_SIZES.button),
-        color: colors.button,
-        strokeWidth: STROKE_WIDTHS.button,
-        style: componentStyles.buttonIconMargin
-      }), /*#__PURE__*/_jsx(Text, {
-        style: componentStyles.scanText,
-        children: scanButtonText
-      })]
-    }), requesting && /*#__PURE__*/_jsx(ActivityIndicator, {
-      style: componentStyles.loaderMargin,
-      color: colors.primary
-    })]
-  })
-}));
-ScanPreviewScreen.displayName = 'ScanPreviewScreen';
-
-// ==================== Main Component ====================
+import { useTheme } from "../../../../theme/index.js";
+import { QrScannerIntro, QrScannerOverlay, QrScannerFrame, QrScannerHeader, QrScannerFallback } from "./components/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const QrLogin = /*#__PURE__*/React.memo(({
-  title = DEFAULTS.title,
-  description = DEFAULTS.description,
-  scanButtonText = DEFAULTS.scanButtonText,
+  title = 'Scan QR Code',
+  description = 'Point your camera at the QR code to sign in',
+  scanButtonText = 'Open Scanner',
   onBackPress,
-  onScanSuccess,
-  onScanError,
-  allowMultipleScans = true,
-  theme
+  onCodeScanned,
+  isProcessing = false,
+  theme,
+  status,
+  statusMessage,
+  verifyQrLogin,
+  onSuccess,
+  onError
 }) => {
   const {
     theme: appliedTheme
-  } = useInternalTheme(theme);
+  } = useTheme(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();
+  const [isScanning, setIsScanning] = useState(false);
+  const [isPermissionDenied, setIsPermissionDenied] = useState(false);
 
-  // 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();
+  // Scanner state management
+  const [scannerState, setScannerState] = useState({
+    status: 'idle',
+    message: ''
+  });
+  const errorTimeoutRef = useRef(null);
+  const cooldownTimeoutRef = useRef(null);
+  const lastScannedQrRef = useRef('');
+  const isProcessingRef = useRef(false);
+  const clearErrorTimeout = useCallback(() => {
+    if (errorTimeoutRef.current) {
+      clearTimeout(errorTimeoutRef.current);
+      errorTimeoutRef.current = null;
     }
-    onBackPress?.();
-  }, [scanActive, stopScan, onBackPress]);
-
-  // Handle code scanned
-  const handleCodeScanned = useCallback(codes => {
-    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;
+  }, []);
+  const updateStatus = useCallback((newStatus, msg) => {
+    clearErrorTimeout();
+    setScannerState({
+      status: newStatus,
+      message: msg
+    });
+    if (newStatus === 'error') {
+      errorTimeoutRef.current = setTimeout(() => {
+        setScannerState({
+          status: 'idle',
+          message: ''
+        });
+      }, 3000);
+    }
+  }, [clearErrorTimeout]);
+  const handleScan = useCallback(async scannedValue => {
+    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;
       }
-      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;
+      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) {
+      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);
     }
-  }, [onScanSuccess, onScanError, allowMultipleScans, resetScanState, isScanning, lastValueRef, resetTimer, scanTimer]);
-
-  // Code scanner
+  }, [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: handleCodeScanned
+    onCodeScanned: codes => {
+      if (currentIsLoading) return;
+      const value = codes[0]?.value;
+      if (value) {
+        if (onCodeScanned) {
+          onCodeScanned(value);
+        } else {
+          handleScan(value);
+        }
+      }
+    }
   });
-
-  // Start scan
-  const startScan = useCallback(async () => {
-    resetScanState();
-    const hasPermissionGranted = await requestCameraPermission();
-    if (!hasPermissionGranted) return;
-    if (!device) {
-      onScanError?.('No camera device available');
-      return;
+  const requestCameraPermission = useCallback(async () => {
+    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?.();
     }
-    setScanActive(true);
-  }, [device, resetScanState, requestCameraPermission, onScanError]);
-
-  // Memoized styles
-  const containerStyle = useMemo(() => createBackgroundStyle(styles.container, colors.background), [colors.background]);
+  }, [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, {
-    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]);
+  }], [colors.background]);
+  const renderContent = () => {
+    if (isScanning) {
+      if (!device) {
+        return /*#__PURE__*/_jsx(QrScannerFallback, {
+          isCameraUnavailable: true,
+          hasPermission: hasPermission,
+          onPress: closeScanner
+        });
+      }
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.cameraContainer,
+        children: [/*#__PURE__*/_jsx(Camera, {
+          style: StyleSheet.absoluteFill,
+          device: device,
+          isActive: isScanning && !currentIsLoading,
+          codeScanner: codeScanner
+        }), /*#__PURE__*/_jsx(QrScannerOverlay, {
+          header: /*#__PURE__*/_jsx(QrScannerHeader, {
+            title: title
+          }),
+          scanner: /*#__PURE__*/_jsx(QrScannerFrame, {}),
+          isProcessing: currentIsLoading,
+          status: currentStatus,
+          statusMessage: currentMessage
+        })]
+      });
+    }
+    if (isPermissionDenied) {
+      return /*#__PURE__*/_jsx(QrScannerFallback, {
+        hasPermission: false,
+        isCameraUnavailable: false,
+        onPress: openScanner
+      });
+    }
+    return /*#__PURE__*/_jsx(QrScannerIntro, {
+      title: title,
+      description: description,
+      scanButtonText: scanButtonText,
+      loading: currentIsLoading,
+      onPress: openScanner
+    });
+  };
   return /*#__PURE__*/_jsxs(View, {
     style: containerStyle,
     children: [/*#__PURE__*/_jsx(AppStatusBar, {
@@ -384,95 +207,25 @@ export const QrLogin = /*#__PURE__*/React.memo(({
         titleAlign: "left"
       })
     }), /*#__PURE__*/_jsx(View, {
-      style: cameraWrapperStyle,
-      children: scanActive ? device ? /*#__PURE__*/_jsx(CameraView, {
-        device: device,
-        codeScanner: codeScanner,
-        theme: theme
-      }) : /*#__PURE__*/_jsx(NoCameraView, {
-        textStyle: noCameraTextStyle,
-        containerStyle: centerStyle
-      }) : /*#__PURE__*/_jsx(ScanPreviewScreen, {
-        description: description,
-        scanButtonText: scanButtonText,
-        requesting: requesting,
-        onStartScan: startScan,
-        colors: colors,
-        styles: componentStyles
-      })
+      style: styles.cameraWrapper,
+      children: renderContent()
     })]
   });
 });
 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)
+  cameraContainer: {
+    flex: 1
   }
 });
 export default QrLogin;