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

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

@@ -2,7 +2,7 @@
  * @author Ashok Desai
  * @lastModified oct 02 Oct 2025 at 10:30 AM
  */
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useMemo, useCallback } from 'react';
 import {
   View,
   StyleSheet,
@@ -22,7 +22,7 @@ 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';
@@ -30,12 +30,9 @@ 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 };
-  };
-}
+// 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)
 
 export type QrLoginProps = {
   title?: string;
@@ -44,8 +41,6 @@ export type QrLoginProps = {
   onBackPress?: () => void;
   onScanSuccess?: (value: string) => void;
   theme?: ThemeOverride;
-  cameraType?: 'back' | 'front';
-  layout?: 'one' | 'two';
 };
 
 const DEFAULTS = {
@@ -55,192 +50,234 @@ const DEFAULTS = {
   cameraType: 'back' as const,
 };
 
-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);
-
-  const device = useCameraDevice(cameraType);
-  const { hasPermission, requestPermission } = useCameraPermission();
-
-  const scanTimer = 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);
+export const QrLogin: React.FC<QrLoginProps> = React.memo(
+  ({
+    title = DEFAULTS.title,
+    description = DEFAULTS.description,
+    scanButtonText = DEFAULTS.scanButtonText,
+    onBackPress,
+    onScanSuccess,
+    theme,
+  }) => {
+    const { theme: appliedTheme } = useInternalTheme(theme);
+    const { colors } = appliedTheme;
 
-    return (
-      origin.x >= sideOverlayWidth &&
-      origin.y >= boxTop &&
-      origin.x + size.width <= sideOverlayWidth + boxW &&
-      origin.y + size.height <= boxTop + boxH
+    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);
+
+    // Cleanup timers on unmount
+    React.useEffect(() => {
+      return () => {
+        if (scanTimer.current) {
+          clearTimeout(scanTimer.current);
+        }
+      };
+    }, []);
+
+    // 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;
+
+          // Clear any existing timer
+          if (scanTimer.current) {
+            clearTimeout(scanTimer.current);
+          }
+
+          // Update last scanned value
+          lastValueRef.current = value;
+
+          // Delay scan trigger to avoid rapid multiple scans
+          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);
+          }, SCAN_DELAY_MS);
+
+          // Process only first valid code
+          break;
+        }
+      },
+      [onScanSuccess]
     );
-  };
-
-  // ---- 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;
+
+    // ---- Code Scanner ----
+    const codeScanner = useCodeScanner({
+      codeTypes: ['qr'],
+      onCodeScanned: handleCodeScanned,
+    });
+
+    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;
+        }
       }
-    },
-  });
-
-  const startScan = async () => {
-    if (!hasPermission) {
-      setRequesting(true);
-      const granted = await requestPermission();
-      setRequesting(false);
-      if (!granted) return;
-    }
-    setScanActive(true);
-  };
-
-  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"
-        />
-      </View>
+      setScanActive(true);
+    }, [hasPermission, requestPermission]);
 
-      <View style={styles.cameraWrapper}>
-        {scanActive ? (
-          device ? (
-            <>
-              <Camera
-                style={StyleSheet.absoluteFill}
-                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) }}
-              />
-
-              <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}
+    // Memoize container style
+    const containerStyle = useMemo(
+      () => [styles.container, { backgroundColor: colors.background }],
+      [colors.background]
+    );
+
+    // Memoize header wrapper style
+    const headerWrapperStyle = useMemo(
+      () => [styles.headerWrapper, { height: HEADER_HEIGHT }],
+      []
+    );
+
+    // Memoize center style
+    const centerStyle = useMemo(
+      () => [styles.center, { backgroundColor: colors.background }],
+      [colors.background]
+    );
+
+    // Memoize description text style
+    const descTextStyle = useMemo(
+      () => [styles.descText, { color: colors.textPrimary }],
+      [colors.textPrimary]
+    );
+
+    // Memoize QR box style
+    const qrBoxStyle = useMemo(
+      () => [
+        styles.qrBox,
+        {
+          borderColor: colors.primary,
+          backgroundColor: colors.skeletonBaseColor,
+        },
+      ],
+      [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 }],
+      [colors.button]
+    );
+
+    // Memoize no camera text style
+    const noCameraTextStyle = useMemo(
+      () => ({ color: colors.textPrimary, fontSize: RFValue(16) }),
+      [colors.textPrimary]
+    );
+
+    return (
+      <View style={containerStyle}>
+        <AppStatusBar theme={theme} />
+
+        <View style={headerWrapperStyle}>
+          <AppHeader
+            title={title}
+            onBackPress={onBackPress}
+            theme={theme}
+            titleAlign="left"
+          />
+        </View>
+
+        <View style={styles.cameraWrapper}>
+          {scanActive ? (
+            device ? (
+              <>
+                <Camera
+                  style={StyleSheet.absoluteFill}
+                  device={device}
+                  isActive={true}
+                  codeScanner={codeScanner}
+                  enableFpsGraph={false}
                 />
+                <QrViewArea theme={theme} headerHeight={HEADER_HEIGHT} />
+              </>
+            ) : (
+              <View style={centerStyle}>
+                <Text style={noCameraTextStyle}>No camera available</Text>
               </View>
-
-              <TouchableOpacity
-                style={[styles.scanBtn, { borderColor: colors.button }]}
-                onPress={startScan}
-                activeOpacity={0.85}
-              >
+            )
+          ) : (
+            <View style={styles.content}>
+              <View style={styles.card}>
                 <CameraIcon
-                  size={scale(22)}
+                  size={scale(50)}
                   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}
+                  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>
-          </View>
-        )}
+          )}
+        </View>
       </View>
-    </View>
-  );
-};
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -297,6 +334,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;