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

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

@@ -2,7 +2,13 @@
  * @author Ashok Desai
  * @lastModified oct 02 Oct 2025 at 10:30 AM
  */
-import React, { useState, useRef, useMemo, useCallback } from 'react';
+import React, {
+  useState,
+  useRef,
+  useMemo,
+  useCallback,
+  useEffect,
+} from 'react';
 import {
   View,
   StyleSheet,
@@ -10,8 +16,10 @@ import {
   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';
@@ -28,28 +36,265 @@ import QrViewArea from './components/QrViewArea';
 import { AppStatusBar } from '../../common/AppStatusBar';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
-const HEADER_HEIGHT = 25;
-
-// QR Detection constants
-const SCAN_DELAY_MS = 1000; // Delay before triggering scan (reduced for faster response)
-const RESET_DELAY_MS = 1000; // Delay before resetting scan state (reduced for faster response)
 
+// ==================== 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: 'back' as const,
+  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,
@@ -57,119 +302,149 @@ export const QrLogin: React.FC<QrLoginProps> = React.memo(
     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 [requesting, setRequesting] = useState(false);
 
     const device = useCameraDevice(DEFAULTS.cameraType);
     const { hasPermission, requestPermission } = useCameraPermission();
 
-    const scanTimer = useRef<NodeJS.Timeout | null>(null);
-    const lastValueRef = useRef<string | null>(null);
-    const isScanning = useRef(false);
+    // QR scan state management
+    const { scanTimer, resetTimer, lastValueRef, isScanning, resetScanState } =
+      useQrScanState();
 
-    // Cleanup timers on unmount
-    React.useEffect(() => {
-      return () => {
-        if (scanTimer.current) {
-          clearTimeout(scanTimer.current);
-        }
-      };
-    }, []);
+    // 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[]) => {
-        // Skip if already processing a scan
         if (isScanning.current || codes.length === 0) return;
 
-        // Find first valid QR code
         for (const code of codes) {
           const value = code?.value;
           if (!value) continue;
 
-          // Skip if same code was just scanned
-          if (lastValueRef.current === value) return;
+          // Prevent duplicate scans
+          if (!allowMultipleScans && lastValueRef.current === value) return;
 
-          // Clear any existing timer
+          // Clear pending scan timer
           if (scanTimer.current) {
             clearTimeout(scanTimer.current);
+            scanTimer.current = null;
           }
 
-          // Update last scanned value
           lastValueRef.current = value;
 
-          // Delay scan trigger to avoid rapid multiple scans
+          // Trigger success callback after delay
           scanTimer.current = setTimeout(() => {
             isScanning.current = true;
-            setScanActive(false);
-            onScanSuccess?.(value);
-
-            // Reset scan state after processing
-            setTimeout(() => {
-              isScanning.current = false;
-              lastValueRef.current = null;
-            }, RESET_DELAY_MS);
+            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);
 
-          // Process only first valid code
           break;
         }
       },
-      [onScanSuccess]
+      [
+        onScanSuccess,
+        onScanError,
+        allowMultipleScans,
+        resetScanState,
+        isScanning,
+        lastValueRef,
+        resetTimer,
+        scanTimer,
+      ]
     );
 
-    // ---- Code Scanner ----
+    // Code scanner
     const codeScanner = useCodeScanner({
       codeTypes: ['qr'],
       onCodeScanned: handleCodeScanned,
     });
 
+    // Start scan
     const startScan = useCallback(async () => {
-      if (!hasPermission) {
-        setRequesting(true);
-        try {
-          const granted = await requestPermission();
-          setRequesting(false);
-          if (!granted) return;
-        } catch (error) {
-          setRequesting(false);
-          console.warn('Camera permission request failed:', error);
-          return;
-        }
+      resetScanState();
+
+      const hasPermissionGranted = await requestCameraPermission();
+      if (!hasPermissionGranted) return;
+
+      if (!device) {
+        onScanError?.('No camera device available');
+        return;
       }
+
       setScanActive(true);
-    }, [hasPermission, requestPermission]);
+    }, [device, resetScanState, requestCameraPermission, onScanError]);
 
-    // Memoize container style
+    // Memoized styles
     const containerStyle = useMemo(
-      () => [styles.container, { backgroundColor: colors.background }],
+      () => createBackgroundStyle(styles.container, colors.background),
       [colors.background]
     );
 
-    // Memoize header wrapper style
     const headerWrapperStyle = useMemo(
-      () => [styles.headerWrapper, { height: HEADER_HEIGHT }],
-      []
+      () => [
+        styles.headerWrapper,
+        {
+          height: statusBarHeight,
+          backgroundColor: colors.background,
+        },
+      ],
+      [colors.background, statusBarHeight]
     );
 
-    // Memoize center style
     const centerStyle = useMemo(
-      () => [styles.center, { backgroundColor: colors.background }],
+      () => createBackgroundStyle(styles.center, colors.background),
       [colors.background]
     );
 
-    // Memoize description text style
     const descTextStyle = useMemo(
-      () => [styles.descText, { color: colors.textPrimary }],
+      () => createTextStyle(styles.descText, colors.textPrimary),
       [colors.textPrimary]
     );
 
-    // Memoize QR box style
     const qrBoxStyle = useMemo(
       () => [
         styles.qrBox,
@@ -181,24 +456,44 @@ export const QrLogin: React.FC<QrLoginProps> = React.memo(
       [colors.primary, colors.skeletonBaseColor]
     );
 
-    // Memoize scan button style
     const scanBtnStyle = useMemo(
       () => [styles.scanBtn, { borderColor: colors.button }],
       [colors.button]
     );
 
-    // Memoize scan text style
     const scanTextStyle = useMemo(
-      () => [styles.scanText, { color: colors.button }],
+      () => createTextStyle(styles.scanText, colors.button),
       [colors.button]
     );
 
-    // Memoize no camera text style
     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} />
@@ -206,72 +501,35 @@ export const QrLogin: React.FC<QrLoginProps> = React.memo(
         <View style={headerWrapperStyle}>
           <AppHeader
             title={title}
-            onBackPress={onBackPress}
+            onBackPress={handleBackPress}
             theme={theme}
             titleAlign="left"
           />
         </View>
 
-        <View style={styles.cameraWrapper}>
+        <View style={cameraWrapperStyle}>
           {scanActive ? (
             device ? (
-              <>
-                <Camera
-                  style={StyleSheet.absoluteFill}
-                  device={device}
-                  isActive={true}
-                  codeScanner={codeScanner}
-                  enableFpsGraph={false}
-                />
-                <QrViewArea theme={theme} headerHeight={HEADER_HEIGHT} />
-              </>
+              <CameraView
+                device={device}
+                codeScanner={codeScanner}
+                theme={theme}
+              />
             ) : (
-              <View style={centerStyle}>
-                <Text style={noCameraTextStyle}>No camera available</Text>
-              </View>
+              <NoCameraView
+                textStyle={noCameraTextStyle}
+                containerStyle={centerStyle}
+              />
             )
           ) : (
-            <View style={styles.content}>
-              <View style={styles.card}>
-                <CameraIcon
-                  size={scale(50)}
-                  color={colors.button}
-                  strokeWidth={1.6}
-                  style={styles.iconMargin}
-                />
-
-                <Text style={descTextStyle}>{description}</Text>
-
-                <View style={qrBoxStyle}>
-                  <QrCode
-                    size={scale(180)}
-                    color={colors.button}
-                    strokeWidth={1.6}
-                  />
-                </View>
-
-                <TouchableOpacity
-                  style={scanBtnStyle}
-                  onPress={startScan}
-                  activeOpacity={0.85}
-                >
-                  <CameraIcon
-                    size={scale(22)}
-                    color={colors.button}
-                    strokeWidth={2}
-                    style={styles.buttonIconMargin}
-                  />
-                  <Text style={scanTextStyle}>{scanButtonText}</Text>
-                </TouchableOpacity>
-
-                {requesting && (
-                  <ActivityIndicator
-                    style={styles.loaderMargin}
-                    color={colors.primary}
-                  />
-                )}
-              </View>
-            </View>
+            <ScanPreviewScreen
+              description={description}
+              scanButtonText={scanButtonText}
+              requesting={requesting}
+              onStartScan={startScan}
+              colors={colors}
+              styles={componentStyles}
+            />
           )}
         </View>
       </View>
@@ -279,6 +537,9 @@ export const QrLogin: React.FC<QrLoginProps> = React.memo(
   }
 );
 
+QrLogin.displayName = 'QrLogin';
+
+// ==================== Styles ====================
 const styles = StyleSheet.create({
   container: { flex: 1 },
   headerWrapper: {
@@ -291,7 +552,6 @@ const styles = StyleSheet.create({
   },
   cameraWrapper: {
     flex: 1,
-    top: HEADER_HEIGHT,
   },
   center: {
     flex: 1,
@@ -306,8 +566,8 @@ const styles = StyleSheet.create({
     marginBottom: scale(50),
   },
   card: {
-    width: SCREEN_W - scale(40),
-    minHeight: SCREEN_H / 2.5,
+    width: SCREEN_W - scale(CARD_WIDTH_OFFSET),
+    minHeight: SCREEN_H / CARD_MIN_HEIGHT_RATIO,
     alignItems: 'center',
     padding: scale(20),
   },