@zezosoft/zezo-ott-react-native-ui-kit 1.3.5 → 1.3.6

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

@@ -0,0 +1,329 @@
+import React, {
+  useState,
+  useMemo,
+  useCallback,
+  useRef,
+  useEffect,
+} from 'react';
+import { View, StyleSheet } from 'react-native';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraPermission,
+  useCodeScanner,
+} from 'react-native-vision-camera';
+
+import { AppHeader } from '../../../Headers';
+import { AppStatusBar } from '../../../common/AppStatusBar';
+import { useTheme } from '../../../../theme';
+
+import {
+  QrScannerIntro,
+  QrScannerOverlay,
+  QrScannerFrame,
+  QrScannerHeader,
+  QrScannerFallback,
+} from './components';
+
+export type ScannerStatus = 'idle' | 'loading' | 'success' | 'error';
+
+export interface ScannerState {
+  status: ScannerStatus;
+  message: string;
+}
+
+export type QrLoginProps = {
+  title?: string;
+  description?: string;
+  scanButtonText?: string;
+  onBackPress?: () => void;
+  onCodeScanned?: (value: string) => void;
+  isProcessing?: boolean;
+  theme?: any;
+  status?: ScannerStatus;
+  statusMessage?: string;
+  verifyQrLogin?: (scannedValue: string) => Promise<any>;
+  onSuccess?: () => void;
+  onError?: (message: string) => void;
+};
+
+export const QrLogin: React.FC<QrLoginProps> = React.memo(
+  ({
+    title = 'Scan QR Code',
+    description = 'Point your camera at the QR code to sign in',
+    scanButtonText = 'Open Scanner',
+    onBackPress,
+    onCodeScanned,
+    isProcessing = false,
+    theme,
+    status,
+    statusMessage,
+    verifyQrLogin,
+    onSuccess,
+    onError,
+  }) => {
+    const { theme: appliedTheme } = useTheme(theme);
+    const { colors } = appliedTheme;
+
+    const [isScanning, setIsScanning] = useState(false);
+    const [isPermissionDenied, setIsPermissionDenied] = useState(false);
+
+    // Scanner state management
+    const [scannerState, setScannerState] = useState<ScannerState>({
+      status: 'idle',
+      message: '',
+    });
+
+    const errorTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const cooldownTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+      null
+    );
+    const lastScannedQrRef = useRef('');
+    const isProcessingRef = useRef(false);
+
+    const clearErrorTimeout = useCallback(() => {
+      if (errorTimeoutRef.current) {
+        clearTimeout(errorTimeoutRef.current);
+        errorTimeoutRef.current = null;
+      }
+    }, []);
+
+    const updateStatus = useCallback(
+      (newStatus: ScannerStatus, msg: string) => {
+        clearErrorTimeout();
+        setScannerState({ status: newStatus, message: msg });
+        if (newStatus === 'error') {
+          errorTimeoutRef.current = setTimeout(() => {
+            setScannerState({ status: 'idle', message: '' });
+          }, 3000);
+        }
+      },
+      [clearErrorTimeout]
+    );
+
+    const handleScan = useCallback(
+      async (scannedValue: string) => {
+        try {
+          if (!scannedValue?.trim() || isProcessingRef.current) return;
+
+          const cleanedValue = scannedValue.replace(/"/g, '').trim();
+          if (!cleanedValue) return;
+
+          if (
+            cleanedValue.startsWith('http://') ||
+            cleanedValue.startsWith('https://')
+          ) {
+            updateStatus(
+              'error',
+              'Unsupported QR code. Please scan the QR code displayed on your TV screen.'
+            );
+            return;
+          }
+
+          if (lastScannedQrRef.current === cleanedValue) return;
+
+          isProcessingRef.current = true;
+          lastScannedQrRef.current = cleanedValue;
+
+          updateStatus('loading', 'Signing in...');
+
+          await verifyQrLogin?.(cleanedValue);
+
+          updateStatus('success', 'Login success!');
+          onSuccess?.();
+
+          cooldownTimeoutRef.current = setTimeout(() => {
+            isProcessingRef.current = false;
+            lastScannedQrRef.current = '';
+          }, 2500);
+        } catch (err: any) {
+          isProcessingRef.current = false;
+          lastScannedQrRef.current = '';
+
+          const rawMsg =
+            err.response?.data?.errors?.[0]?.msg ||
+            err.response?.data?.message ||
+            err.message ||
+            '';
+
+          let errorMsg = 'Failed to verify QR code. Please try again.';
+
+          if (
+            rawMsg &&
+            rawMsg.length < 80 &&
+            !rawMsg.includes('Exception') &&
+            !rawMsg.includes('Error') &&
+            !rawMsg.includes('{') &&
+            !rawMsg.includes('html')
+          ) {
+            errorMsg = rawMsg;
+          } else if (err.message === 'Network Error') {
+            errorMsg =
+              'Connection error. Please check your internet connection.';
+          }
+
+          updateStatus('error', errorMsg);
+          onError?.(errorMsg);
+        }
+      },
+      [updateStatus, verifyQrLogin, onSuccess, onError]
+    );
+
+    useEffect(() => {
+      return () => {
+        if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current);
+        if (cooldownTimeoutRef.current)
+          clearTimeout(cooldownTimeoutRef.current);
+      };
+    }, []);
+
+    const currentStatus = status !== undefined ? status : scannerState.status;
+    const currentMessage =
+      statusMessage !== undefined ? statusMessage : scannerState.message;
+    const currentIsLoading = isProcessing || currentStatus === 'loading';
+
+    const device = useCameraDevice('back');
+    const { hasPermission, requestPermission } = useCameraPermission();
+
+    const codeScanner = useCodeScanner({
+      codeTypes: ['qr'],
+      onCodeScanned: (codes) => {
+        if (currentIsLoading) return;
+        const value = codes[0]?.value;
+        if (value) {
+          if (onCodeScanned) {
+            onCodeScanned(value);
+          } else {
+            handleScan(value);
+          }
+        }
+      },
+    });
+
+    const requestCameraPermission = useCallback(async (): Promise<boolean> => {
+      if (hasPermission) return true;
+      const granted = await requestPermission();
+      if (!granted) setIsPermissionDenied(true);
+      return granted;
+    }, [hasPermission, requestPermission]);
+
+    const closeScanner = useCallback(() => {
+      setIsScanning(false);
+      setIsPermissionDenied(false);
+    }, []);
+
+    const handleBackPress = useCallback(() => {
+      if (isScanning) {
+        closeScanner();
+      } else {
+        onBackPress?.();
+      }
+    }, [isScanning, closeScanner, onBackPress]);
+
+    const openScanner = useCallback(async () => {
+      const granted = await requestCameraPermission();
+      if (!granted) return;
+
+      if (!device) return;
+
+      setIsScanning(true);
+    }, [device, requestCameraPermission]);
+
+    const containerStyle = useMemo(
+      () => [styles.container, { backgroundColor: colors.background }],
+      [colors.background]
+    );
+
+    const headerWrapperStyle = useMemo(
+      () => [styles.headerWrapper, { backgroundColor: colors.background }],
+      [colors.background]
+    );
+
+    const renderContent = () => {
+      if (isScanning) {
+        if (!device) {
+          return (
+            <QrScannerFallback
+              isCameraUnavailable
+              hasPermission={hasPermission}
+              onPress={closeScanner}
+            />
+          );
+        }
+
+        return (
+          <View style={styles.cameraContainer}>
+            <Camera
+              style={StyleSheet.absoluteFill}
+              device={device}
+              isActive={isScanning && !currentIsLoading}
+              codeScanner={codeScanner}
+            />
+            <QrScannerOverlay
+              header={<QrScannerHeader title={title} />}
+              scanner={<QrScannerFrame />}
+              isProcessing={currentIsLoading}
+              status={currentStatus}
+              statusMessage={currentMessage}
+            />
+          </View>
+        );
+      }
+
+      if (isPermissionDenied) {
+        return (
+          <QrScannerFallback
+            hasPermission={false}
+            isCameraUnavailable={false}
+            onPress={openScanner}
+          />
+        );
+      }
+
+      return (
+        <QrScannerIntro
+          title={title}
+          description={description}
+          scanButtonText={scanButtonText}
+          loading={currentIsLoading}
+          onPress={openScanner}
+        />
+      );
+    };
+
+    return (
+      <View style={containerStyle}>
+        <AppStatusBar theme={theme} />
+
+        <View style={headerWrapperStyle}>
+          <AppHeader
+            title={title}
+            onBackPress={handleBackPress}
+            theme={theme}
+            titleAlign="left"
+          />
+        </View>
+
+        <View style={styles.cameraWrapper}>{renderContent()}</View>
+      </View>
+    );
+  }
+);
+
+QrLogin.displayName = 'QrLogin';
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  headerWrapper: {
+    zIndex: 20,
+    elevation: 20,
+  },
+  cameraWrapper: {
+    flex: 1,
+  },
+  cameraContainer: {
+    flex: 1,
+  },
+});
+
+export default QrLogin;

package/src/components/Auth/One/QrLogin/components/index.ts

@@ -0,0 +1,8 @@
+export { default as QrScannerIntro } from './qr-scanner-intro';
+
+export { default as QrScannerHeader } from './qr-scanner-header';
+
+export { default as QrScannerFrame } from './qr-scanner-frame';
+
+export { default as QrScannerFallback } from './qr-scanner-fallback';
+export { default as QrScannerOverlay } from './qr-scanner-overlay';

package/src/components/Auth/One/QrLogin/components/qr-scanner-fallback.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { Camera, ShieldAlert } from 'lucide-react-native';
+
+import { useTheme } from '../../../../../theme';
+import { toRgba } from '../../../../../theme/utils/toRgba';
+import { Text } from '../../../../Text';
+import { Button } from '../../../../Button';
+
+type Props = {
+  hasPermission?: boolean;
+  isCameraUnavailable?: boolean;
+  onPress?: () => void;
+};
+
+const QrScannerFallback: React.FC<Props> = ({
+  hasPermission = false,
+  isCameraUnavailable = false,
+  onPress,
+}) => {
+  const { theme } = useTheme();
+  const { colors } = theme;
+
+  const title = isCameraUnavailable
+    ? 'Camera Unavailable'
+    : 'Camera Access Required';
+
+  const description = isCameraUnavailable
+    ? 'No camera device was found on this device. Please use a device with a working camera.'
+    : 'Please allow camera access so we can scan your QR code and sign you in securely.';
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={styles.content}>
+        <View
+          style={[
+            styles.iconOuter,
+            { backgroundColor: toRgba(colors.primary, 0.06) },
+          ]}
+        >
+          <View
+            style={[
+              styles.iconInner,
+              { backgroundColor: toRgba(colors.primary, 0.12) },
+            ]}
+          >
+            {isCameraUnavailable ? (
+              <Camera
+                size={moderateScale(28)}
+                color={colors.primary}
+                strokeWidth={2}
+              />
+            ) : (
+              <ShieldAlert
+                size={moderateScale(28)}
+                color={colors.primary}
+                strokeWidth={2}
+              />
+            )}
+          </View>
+        </View>
+
+        <Text style={[styles.title, { color: colors.textPrimary }]}>
+          {title}
+        </Text>
+
+        <Text
+          style={[
+            styles.description,
+            { color: toRgba(colors.textPrimary, 0.65) },
+          ]}
+        >
+          {description}
+        </Text>
+
+        {!hasPermission && !isCameraUnavailable && (
+          <Button.Primary
+            title="Allow Camera Access"
+            onPress={onPress}
+            containerStyle={styles.button}
+            titleStyle={styles.buttonText}
+          />
+        )}
+
+        {isCameraUnavailable && (
+          <Button.Secondary
+            title="Go Back"
+            onPress={onPress}
+            containerStyle={styles.button}
+            titleStyle={styles.buttonText}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default QrScannerFallback;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: scale(32),
+    paddingBottom: verticalScale(60),
+  },
+
+  iconOuter: {
+    width: moderateScale(96),
+    height: moderateScale(96),
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: verticalScale(24),
+  },
+
+  iconInner: {
+    width: moderateScale(68),
+    height: moderateScale(68),
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  title: {
+    fontSize: RFValue(18),
+    lineHeight: RFValue(23),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: verticalScale(10),
+  },
+
+  description: {
+    width: '85%',
+    fontSize: RFValue(12),
+    lineHeight: RFValue(18),
+    textAlign: 'center',
+    marginBottom: verticalScale(32),
+  },
+
+  button: {
+    width: '60%',
+    alignSelf: 'center',
+    minHeight: verticalScale(38),
+    paddingVertical: verticalScale(8),
+  },
+
+  buttonText: {
+    fontSize: RFValue(12),
+  },
+});

package/src/components/Auth/One/QrLogin/components/qr-scanner-frame.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+
+import { useTheme } from '../../../../../theme';
+import { toRgba } from '../../../../../theme/utils/toRgba';
+
+const SCANNER_SIZE = moderateScale(260);
+const LINE_HEIGHT = verticalScale(2);
+const VERTICAL_PADDING = verticalScale(30);
+const MAX_TRANSLATE = SCANNER_SIZE - VERTICAL_PADDING * 2;
+const GLOW_HEIGHT = verticalScale(20);
+
+const QrScannerFrame: React.FC = () => {
+  const { theme } = useTheme();
+  const { colors } = theme;
+
+  const translateY = useSharedValue(0);
+
+  React.useEffect(() => {
+    translateY.value = withRepeat(
+      withSequence(
+        withTiming(MAX_TRANSLATE, {
+          duration: 1800,
+          easing: Easing.inOut(Easing.ease),
+        }),
+        withTiming(0, {
+          duration: 1800,
+          easing: Easing.inOut(Easing.ease),
+        })
+      ),
+      -1,
+      false
+    );
+  }, [translateY]);
+
+  const animatedLineStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.frame,
+          {
+            borderColor: toRgba(colors.primary, 0.08),
+            shadowColor: colors.primary,
+          },
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.scanLineWrapper,
+            { top: VERTICAL_PADDING - 14 },
+            animatedLineStyle,
+          ]}
+        >
+          <LinearGradient
+            colors={[
+              'transparent',
+              toRgba(colors.primary, 0.08),
+              toRgba(colors.primary, 0.4),
+              toRgba(colors.primary, 0.08),
+              'transparent',
+            ]}
+            locations={[0, 0.2, 0.5, 0.8, 1]}
+            style={styles.glow}
+          />
+
+          <View
+            style={[
+              styles.scanLine,
+              {
+                backgroundColor: colors.primary,
+                shadowColor: colors.primary,
+              },
+            ]}
+          />
+        </Animated.View>
+      </View>
+
+      <View
+        style={[
+          styles.corner,
+          styles.cornerTopLeft,
+          { borderColor: colors.primary },
+        ]}
+      />
+
+      <View
+        style={[
+          styles.corner,
+          styles.cornerTopRight,
+          { borderColor: colors.primary },
+        ]}
+      />
+
+      <View
+        style={[
+          styles.corner,
+          styles.cornerBottomLeft,
+          { borderColor: colors.primary },
+        ]}
+      />
+
+      <View
+        style={[
+          styles.corner,
+          styles.cornerBottomRight,
+          { borderColor: colors.primary },
+        ]}
+      />
+    </View>
+  );
+};
+
+export default React.memo(QrScannerFrame);
+
+const styles = StyleSheet.create({
+  container: {
+    width: SCANNER_SIZE,
+    height: SCANNER_SIZE,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  frame: {
+    width: SCANNER_SIZE,
+    height: SCANNER_SIZE,
+    borderRadius: moderateScale(28),
+    borderWidth: 1,
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.08,
+    shadowRadius: 18,
+  },
+
+  scanLineWrapper: {
+    position: 'absolute',
+    width: '100%',
+    height: GLOW_HEIGHT,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  glow: {
+    position: 'absolute',
+    width: '82%',
+    height: GLOW_HEIGHT,
+    top: 0,
+  },
+
+  scanLine: {
+    width: '82%',
+    height: LINE_HEIGHT,
+  },
+
+  corner: {
+    position: 'absolute',
+    width: scale(46),
+    height: scale(46),
+  },
+
+  cornerTopLeft: {
+    top: 0,
+    left: 0,
+    borderTopWidth: 5,
+    borderLeftWidth: 5,
+    borderTopLeftRadius: moderateScale(26),
+  },
+
+  cornerTopRight: {
+    top: 0,
+    right: 0,
+    borderTopWidth: 5,
+    borderRightWidth: 5,
+    borderTopRightRadius: moderateScale(26),
+  },
+
+  cornerBottomLeft: {
+    bottom: 0,
+    left: 0,
+    borderBottomWidth: 5,
+    borderLeftWidth: 5,
+    borderBottomLeftRadius: moderateScale(26),
+  },
+
+  cornerBottomRight: {
+    bottom: 0,
+    right: 0,
+    borderBottomWidth: 5,
+    borderRightWidth: 5,
+    borderBottomRightRadius: moderateScale(26),
+  },
+});