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

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

@@ -0,0 +1,602 @@
+/**
+ * @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;