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

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

@@ -1,342 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified oct 02 Oct 2025 at 10:30 AM
- */
-import React, { useState, useRef, useMemo, useCallback } 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 { 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');
-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)
-
-export type QrLoginProps = {
-  title?: string;
-  description?: string;
-  scanButtonText?: string;
-  onBackPress?: () => void;
-  onScanSuccess?: (value: string) => void;
-  theme?: ThemeOverride;
-};
-
-const DEFAULTS = {
-  title: 'QR Login',
-  description: 'Please move your camera over the QR Code',
-  scanButtonText: 'Scan QR Code',
-  cameraType: 'back' as const,
-};
-
-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;
-
-    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: 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;
-        }
-      }
-      setScanActive(true);
-    }, [hasPermission, requestPermission]);
-
-    // 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>
-            )
-          ) : (
-            <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>
-          )}
-        </View>
-      </View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  headerWrapper: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 20,
-    elevation: 20,
-  },
-  cameraWrapper: {
-    flex: 1,
-    top: HEADER_HEIGHT,
-  },
-  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(40),
-    minHeight: SCREEN_H / 2.5,
-    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;

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

@@ -1,329 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified oct 02 Oct 2025 at 10:30 AM
- */
-import React, { useEffect, useRef, useMemo, useCallback } from 'react';
-import {
-  View,
-  StyleSheet,
-  Animated,
-  Easing,
-  Dimensions,
-  Platform,
-} from 'react-native';
-import { scale } from 'react-native-size-matters';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-
-const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
-
-// Constants
-const ANIMATION_DURATION = 2000;
-const CORNER_SIZE = 18;
-const CORNER_BORDER_WIDTH = 3;
-const SCAN_LINE_HEIGHT = 3;
-const SCAN_LINE_MARGIN = 12;
-
-type QrViewAreaProps = {
-  scanBoxWidth?: number;
-  headerHeight?: number;
-  theme?: ThemeOverride;
-};
-
-const QrViewArea: React.FC<QrViewAreaProps> = React.memo(
-  ({ scanBoxWidth, headerHeight = 60, theme }) => {
-    const { theme: appliedTheme } = useInternalTheme(theme);
-    const { colors } = appliedTheme;
-
-    const anim = useRef(new Animated.Value(0)).current;
-
-    // Memoize box dimensions with better calculations (fix gap on right side)
-    const boxDimensions = useMemo(() => {
-      const defaultBoxW = scanBoxWidth || Math.min(SCREEN_W * 0.7, 320);
-      const boxW = defaultBoxW * 0.9;
-      const boxH = boxW;
-      const availableHeight = SCREEN_H - headerHeight;
-      const boxTop = Math.max(
-        headerHeight,
-        Math.floor(headerHeight + (availableHeight - boxH) / 2 - scale(40))
-      );
-      const topOverlayHeight = Math.max(0, Math.floor(boxTop - headerHeight));
-      const bottomOverlayHeight = Math.max(
-        0,
-        Math.floor(SCREEN_H - (boxTop + boxH))
-      );
-      // Calculate left overlay width
-      const leftOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
-      // Calculate right overlay width to fill remaining space (fix gap)
-      const scanBoxLeft = leftOverlayWidth;
-      const scanBoxRight = scanBoxLeft + boxW;
-      const rightOverlayWidth = Math.max(0, SCREEN_W - scanBoxRight);
-      return {
-        boxW,
-        boxH,
-        boxTop,
-        topOverlayHeight,
-        bottomOverlayHeight,
-        sideOverlayWidth: leftOverlayWidth,
-        rightOverlayWidth,
-      };
-    }, [scanBoxWidth, headerHeight]);
-
-    const margin = useMemo(() => scale(SCAN_LINE_MARGIN), []);
-    const lineTravel = useMemo(
-      () =>
-        Math.max(0, boxDimensions.boxH - margin * 2 - scale(SCAN_LINE_HEIGHT)),
-      [boxDimensions.boxH, margin]
-    );
-
-    const translateY = useMemo(
-      () =>
-        anim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, lineTravel],
-        }),
-      [anim, lineTravel]
-    );
-
-    // Memoize animation config
-    const animationConfig = useMemo(
-      () => ({
-        duration: ANIMATION_DURATION,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-      []
-    );
-
-    useEffect(() => {
-      const animation = Animated.loop(
-        Animated.sequence([
-          Animated.timing(anim, {
-            toValue: 1,
-            ...animationConfig,
-          }),
-          Animated.timing(anim, {
-            toValue: 0,
-            ...animationConfig,
-          }),
-        ])
-      );
-      animation.start();
-      return () => animation.stop();
-    }, [anim, animationConfig]);
-
-    // Memoize corner positions
-    const cornerPositions = useMemo(() => ['tl', 'tr', 'bl', 'br'], []);
-
-    // Memoize overlay color
-    const overlayColor = useMemo(
-      () => colors.overlay || 'rgba(0, 0, 0, 0.6)',
-      [colors.overlay]
-    );
-
-    // Memoize all overlay components in one array (optimized - created once)
-    const overlayComponents = useMemo(
-      () => [
-        {
-          key: 'top',
-          style: [
-            styles.overlayTop,
-            {
-              top: headerHeight,
-              height: Math.max(0, boxDimensions.topOverlayHeight),
-              backgroundColor: overlayColor,
-            },
-          ],
-        },
-        {
-          key: 'bottom',
-          style: [
-            styles.overlayBottom,
-            {
-              top: boxDimensions.boxTop + boxDimensions.boxH,
-              height: Math.max(0, boxDimensions.bottomOverlayHeight),
-              backgroundColor: overlayColor,
-            },
-          ],
-        },
-        {
-          key: 'left',
-          style: [
-            styles.overlaySide,
-            {
-              left: 0,
-              top: boxDimensions.boxTop,
-              height: boxDimensions.boxH,
-              width: Math.max(0, boxDimensions.sideOverlayWidth),
-              backgroundColor: overlayColor,
-            },
-          ],
-        },
-        {
-          key: 'right',
-          style: [
-            styles.overlaySide,
-            {
-              right: 0,
-              top: boxDimensions.boxTop,
-              height: boxDimensions.boxH,
-              width: Math.max(0, boxDimensions.rightOverlayWidth),
-              backgroundColor: overlayColor,
-            },
-          ],
-        },
-      ],
-      [
-        headerHeight,
-        boxDimensions.topOverlayHeight,
-        boxDimensions.boxTop,
-        boxDimensions.boxH,
-        boxDimensions.bottomOverlayHeight,
-        boxDimensions.sideOverlayWidth,
-        boxDimensions.rightOverlayWidth,
-        overlayColor,
-      ]
-    );
-
-    // Memoize scan box style with proper positioning (ensure no gap on right)
-    const scanBoxStyle = useMemo(
-      () => [
-        styles.scanBox,
-        {
-          top: boxDimensions.boxTop,
-          left: boxDimensions.sideOverlayWidth,
-          width: boxDimensions.boxW,
-          height: boxDimensions.boxH,
-        },
-      ],
-      [
-        boxDimensions.boxTop,
-        boxDimensions.sideOverlayWidth,
-        boxDimensions.boxW,
-        boxDimensions.boxH,
-      ]
-    );
-
-    // Memoize corner styles for better performance
-    const cornerSize = useMemo(() => scale(CORNER_SIZE), []);
-    const cornerBorderWidth = useMemo(() => scale(CORNER_BORDER_WIDTH), []);
-
-    const getCornerStyle = useCallback(
-      (c: string) => {
-        const baseStyle = [
-          styles.corner,
-          styles[`corner_${c}` as keyof typeof styles],
-        ];
-        const dynamicStyle = {
-          borderColor: colors.button,
-          width: cornerSize,
-          height: cornerSize,
-          borderTopWidth: c.startsWith('t') ? cornerBorderWidth : 0,
-          borderBottomWidth: c.startsWith('b') ? cornerBorderWidth : 0,
-          borderLeftWidth: c.endsWith('l') ? cornerBorderWidth : 0,
-          borderRightWidth: c.endsWith('r') ? cornerBorderWidth : 0,
-        };
-        return [...baseStyle, dynamicStyle];
-      },
-      [colors.button, cornerSize, cornerBorderWidth]
-    );
-
-    // Memoize animated line style
-    const scanLineHeight = useMemo(() => scale(SCAN_LINE_HEIGHT), []);
-    const animatedLineStyle = useMemo(
-      () => ({
-        position: 'absolute' as const,
-        top: margin,
-        left: margin,
-        right: margin,
-        height: scanLineHeight,
-        borderRadius: scanLineHeight / 2,
-        backgroundColor: colors.button,
-        transform: [{ translateY }],
-        shadowColor: colors.shadow || '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.4,
-        shadowRadius: 4,
-        elevation: Platform.OS === 'android' ? 5 : 0,
-      }),
-      [margin, scanLineHeight, colors.button, colors.shadow, translateY]
-    );
-
-    // Memoize corner components for better performance (used in both layouts)
-    const cornerComponents = useMemo(
-      () =>
-        cornerPositions.map((c) => <View key={c} style={getCornerStyle(c)} />),
-      [cornerPositions, getCornerStyle]
-    );
-
-    return (
-      <View style={styles.container} pointerEvents="box-none">
-        {/* Overlay sections - optimized single render */}
-        {overlayComponents.map((overlay) => (
-          <View key={overlay.key} style={overlay.style} />
-        ))}
-
-        {/* Scan box */}
-        <View style={scanBoxStyle} pointerEvents="none">
-          {/* Corner components - shown in both layouts */}
-          {cornerComponents}
-
-          {/* Animated scan line */}
-          <Animated.View style={animatedLineStyle} />
-        </View>
-      </View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 10,
-  },
-  overlayTop: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    zIndex: 1,
-  },
-  overlayBottom: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    zIndex: 1,
-  },
-  overlaySide: {
-    position: 'absolute',
-    zIndex: 1,
-  },
-  scanBox: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    zIndex: 2,
-  },
-  corner: {
-    position: 'absolute',
-    zIndex: 3,
-  },
-  corner_tl: {
-    top: 0,
-    left: 0,
-  },
-  corner_tr: {
-    top: 0,
-    right: 0,
-  },
-  corner_bl: {
-    bottom: 0,
-    left: 0,
-  },
-  corner_br: {
-    bottom: 0,
-    right: 0,
-  },
-});
-
-export default QrViewArea;