@zezosoft/zezo-ott-react-native-ui-kit 1.1.1 → 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 } 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';
@@ -22,226 +30,516 @@ import {
   useCameraDevice,
   useCameraPermission,
   useCodeScanner,
-  type Code as BaseCode,
+  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');
-const HEADER_HEIGHT = 25;
 
-export interface Code extends BaseCode {
-  bounds?: {
-    origin: { x: number; y: number };
-    size: { width: number; height: number };
-  };
-}
+// ==================== 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;
-  cameraType?: 'back' | 'front';
-  layout?: 'one' | 'two';
 };
 
+// ==================== 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;
 };
 
-export const QrLogin: React.FC<QrLoginProps> = ({
-  title = DEFAULTS.title,
-  description = DEFAULTS.description,
-  scanButtonText = DEFAULTS.scanButtonText,
-  onBackPress,
-  onScanSuccess,
-  theme,
-  cameraType = DEFAULTS.cameraType,
-  layout = 'one',
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const { colors } = appliedTheme;
-
-  const [scanActive, setScanActive] = useState(false);
-  const [requesting, setRequesting] = useState(false);
+/**
+ * Creates style with background color
+ */
+const createBackgroundStyle = (
+  baseStyle: ViewStyle,
+  backgroundColor: string
+): ViewStyle[] => [baseStyle, { backgroundColor }];
 
-  const device = useCameraDevice(cameraType);
-  const { hasPermission, requestPermission } = useCameraPermission();
+/**
+ * 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);
 
-  // ---- Check if QR inside scan box ----
-  const isCodeInsideBox = (code: Code): boolean => {
-    if (!code.bounds) return true;
-    const { origin, size } = code.bounds;
-    if (!origin || !size) return true;
-
-    const defaultBoxW = Math.min(SCREEN_W * 0.7, 320);
-    const boxW = defaultBoxW * 0.9;
-    const boxH = boxW;
-    const availableHeight = SCREEN_H - HEADER_HEIGHT;
-    const boxTop = Math.floor(
-      HEADER_HEIGHT + (availableHeight - boxH) / 2 - scale(40)
-    );
-    const sideOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
+  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;
+  }, []);
 
-    return (
-      origin.x >= sideOverlayWidth &&
-      origin.y >= boxTop &&
-      origin.x + size.width <= sideOverlayWidth + boxW &&
-      origin.y + size.height <= boxTop + boxH
-    );
+  useEffect(() => {
+    return () => {
+      resetScanState();
+    };
+  }, [resetScanState]);
+
+  return {
+    scanTimer,
+    resetTimer,
+    lastValueRef,
+    isScanning,
+    resetScanState,
   };
+};
 
-  // ---- Code Scanner ----
-  const codeScanner = useCodeScanner({
-    codeTypes: ['qr'],
-    onCodeScanned: (codes) => {
-      if (isScanning.current) return;
-      for (const c of codes) {
-        const code = c as Code;
-        const value = code?.value;
-        if (!value || !isCodeInsideBox(code)) continue;
-
-        if (lastValueRef.current === value) return;
-        lastValueRef.current = value;
-
-        if (scanTimer.current) clearTimeout(scanTimer.current);
-
-        scanTimer.current = setTimeout(() => {
-          isScanning.current = true;
-          setScanActive(false);
-          onScanSuccess?.(value);
-
-          setTimeout(() => {
-            isScanning.current = false;
-            lastValueRef.current = null;
-          }, 1000);
-        }, 1000);
-
-        break;
-      }
-    },
-  });
+/**
+ * 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;
 
-  const startScan = async () => {
-    if (!hasPermission) {
-      setRequesting(true);
+    setRequesting(true);
+    try {
       const granted = await requestPermission();
       setRequesting(false);
-      if (!granted) return;
+
+      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;
     }
-    setScanActive(true);
-  };
+  }, [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 (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
-      <AppStatusBar theme={theme} />
-
-      <View style={[styles.headerWrapper, { height: HEADER_HEIGHT }]}>
-        <AppHeader
-          title={title}
-          onBackPress={onBackPress}
-          theme={theme}
-          titleAlign="left"
+    <>
+      <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();
 
-      <View style={styles.cameraWrapper}>
-        {scanActive ? (
-          device ? (
-            <>
-              <Camera
-                style={StyleSheet.absoluteFill}
+    // 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}
-                isActive={true}
                 codeScanner={codeScanner}
-              />
-              <QrViewArea
                 theme={theme}
-                layout={layout}
-                headerHeight={HEADER_HEIGHT}
               />
-            </>
-          ) : (
-            <View
-              style={[styles.center, { backgroundColor: colors.background }]}
-            >
-              <Text
-                style={{ color: colors.textPrimary, fontSize: RFValue(16) }}
-              >
-                No camera available
-              </Text>
-            </View>
-          )
-        ) : (
-          <View style={styles.content}>
-            <View style={styles.card}>
-              <CameraIcon
-                size={scale(50)}
-                color={colors.button}
-                strokeWidth={1.6}
-                style={{ marginBottom: scale(12) }}
+            ) : (
+              <NoCameraView
+                textStyle={noCameraTextStyle}
+                containerStyle={centerStyle}
               />
-
-              <Text style={[styles.descText, { color: colors.textPrimary }]}>
-                {description}
-              </Text>
-
-              <View
-                style={[
-                  styles.qrBox,
-                  {
-                    borderColor: colors.primary,
-                    backgroundColor: colors.skeletonBaseColor,
-                  },
-                ]}
-              >
-                <QrCode
-                  size={scale(180)}
-                  color={colors.button}
-                  strokeWidth={1.6}
-                />
-              </View>
-
-              <TouchableOpacity
-                style={[styles.scanBtn, { borderColor: colors.button }]}
-                onPress={startScan}
-                activeOpacity={0.85}
-              >
-                <CameraIcon
-                  size={scale(22)}
-                  color={colors.button}
-                  strokeWidth={2}
-                  style={{ marginRight: 10 }}
-                />
-                <Text style={[styles.scanText, { color: colors.button }]}>
-                  {scanButtonText}
-                </Text>
-              </TouchableOpacity>
-
-              {requesting && (
-                <ActivityIndicator
-                  style={{ marginTop: scale(12) }}
-                  color={colors.primary}
-                />
-              )}
-            </View>
-          </View>
-        )}
+            )
+          ) : (
+            <ScanPreviewScreen
+              description={description}
+              scanButtonText={scanButtonText}
+              requesting={requesting}
+              onStartScan={startScan}
+              colors={colors}
+              styles={componentStyles}
+            />
+          )}
+        </View>
       </View>
-    </View>
-  );
-};
+    );
+  }
+);
+
+QrLogin.displayName = 'QrLogin';
 
+// ==================== Styles ====================
 const styles = StyleSheet.create({
   container: { flex: 1 },
   headerWrapper: {
@@ -254,7 +552,6 @@ const styles = StyleSheet.create({
   },
   cameraWrapper: {
     flex: 1,
-    top: HEADER_HEIGHT,
   },
   center: {
     flex: 1,
@@ -269,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),
   },
@@ -297,6 +594,9 @@ const styles = StyleSheet.create({
     marginTop: scale(20),
   },
   scanText: { fontWeight: '600', fontSize: RFValue(14) },
+  iconMargin: { marginBottom: scale(12) },
+  buttonIconMargin: { marginRight: 10 },
+  loaderMargin: { marginTop: scale(12) },
 });
 
 export default QrLogin;