@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.4

package/src/components/Auth/OTP/OTP.tsx

@@ -1,6 +1,18 @@
 import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
-import { View, type ViewStyle, type TextStyle, type KeyboardTypeOptions, StyleSheet, Platform } from 'react-native';
-import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell } from 'react-native-confirmation-code-field';
+import {
+  View,
+  type ViewStyle,
+  type TextStyle,
+  type KeyboardTypeOptions,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
 import { scale, verticalScale } from 'react-native-size-matters';
 
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
@@ -46,12 +58,19 @@ type OTPProps = {
   };
   // Resend
   onResendOtp?: () => void;
-  renderResendButton?: (props: { onPress: () => void; disabled: boolean }) => React.ReactNode;
+  renderResendButton?: (props: {
+    onPress: () => void;
+    disabled: boolean;
+  }) => React.ReactNode;
   resendDisabledTime?: number;
 
   // Render Props
   renderLogo?: () => React.ReactNode;
-  renderSubmitButton?: (props: { onPress: () => void; disabled: boolean; loading: boolean }) => React.ReactNode;
+  renderSubmitButton?: (props: {
+    onPress: () => void;
+    disabled: boolean;
+    loading: boolean;
+  }) => React.ReactNode;
   renderBackButton?: (props: { onPress: () => void }) => React.ReactNode;
   renderOtpHeader?: () => React.ReactNode;
   renderOtpInput?: (props: {
@@ -73,7 +92,7 @@ const DEFAULT_TEXT = {
   loadingSubmitBtnText: 'Verifying...',
   otpSentText: 'A One-Time OTP has been sent to',
   resendOtpText: 'Resend OTP',
-  resendOtpCountdownText: 'Resend OTP in'
+  resendOtpCountdownText: 'Resend OTP in',
 };
 
 const OTP: React.FC<OTPProps> = ({
@@ -102,7 +121,7 @@ const OTP: React.FC<OTPProps> = ({
   renderOtpInput,
   renderPhoneText,
   cellStyle,
-  focusCellStyle
+  focusCellStyle,
 }) => {
   const { theme: resolvedTheme } = useTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
@@ -113,7 +132,7 @@ const OTP: React.FC<OTPProps> = ({
   const ref = useBlurOnFulfill({ value: otp, cellCount: otpDigitCount });
   const [codeFieldProps, getCellOnLayoutHandler] = useClearByFocusCell({
     value: otp,
-    setValue: setOtp
+    setValue: setOtp,
   });
 
   const styles = useMemo(
@@ -124,13 +143,13 @@ const OTP: React.FC<OTPProps> = ({
           width: '100%',
           paddingHorizontal: scale(16),
           justifyContent: 'center',
-          alignItems: 'center'
+          alignItems: 'center',
         },
         topBackBtnWrapper: {
           position: 'absolute',
           top: verticalScale(6),
           left: 0,
-          zIndex: 10
+          zIndex: 10,
         },
 
         centerContent: {
@@ -139,35 +158,35 @@ const OTP: React.FC<OTPProps> = ({
           maxWidth: scale(400),
           alignItems: 'center',
           justifyContent: 'center',
-          gap: verticalScale(4)
+          gap: verticalScale(4),
         },
         title: {
           fontSize: RFValue(21),
           fontWeight: '700',
           marginTop: verticalScale(8),
           color: resolvedTheme.colors.textPrimary,
-          textAlign: 'center'
+          textAlign: 'center',
         },
         sentText: {
           fontSize: RFValue(12),
           color: resolvedTheme.colors.onSurfaceVariant,
           textAlign: 'center',
-          lineHeight: scale(18)
+          lineHeight: scale(18),
         },
         sentNumberContainer: {
           marginTop: verticalScale(8),
-          alignItems: 'center'
+          alignItems: 'center',
         },
         form: {
           width: '100%',
           gap: verticalScale(20),
           alignItems: 'center',
           marginTop: verticalScale(24),
-          marginBottom: isKeyboardOpen ? verticalScale(20) : 0
+          marginBottom: isKeyboardOpen ? verticalScale(20) : 0,
         },
         codeFieldRoot: {
           width: Display.setWidth(80),
-          marginTop: scale(10)
+          marginTop: scale(10),
         },
         cell: {
           width: scale(55),
@@ -183,12 +202,12 @@ const OTP: React.FC<OTPProps> = ({
           alignSelf: 'center',
           overflow: 'hidden',
           color: resolvedTheme.colors.textPrimary,
-          borderColor: resolvedTheme.colors.outline
+          borderColor: resolvedTheme.colors.outline,
         },
         focusCell: {
           borderColor: resolvedTheme.colors.primary,
-          backgroundColor: resolvedTheme.colors.surfaceVariant
-        }
+          backgroundColor: resolvedTheme.colors.surfaceVariant,
+        },
       }),
     [
       isKeyboardOpen,
@@ -196,7 +215,7 @@ const OTP: React.FC<OTPProps> = ({
       resolvedTheme.colors.outline,
       resolvedTheme.colors.primary,
       resolvedTheme.colors.surfaceVariant,
-      resolvedTheme.colors.textPrimary
+      resolvedTheme.colors.textPrimary,
     ]
   );
 
@@ -229,7 +248,8 @@ const OTP: React.FC<OTPProps> = ({
 
   const isLoading = loading || isSubmitting;
   const isSubmitDisabled = otp.length !== otpDigitCount || isLoading;
-  const shouldRender = (condition?: boolean | unknown): boolean => typeof condition === 'function' || !!condition;
+  const shouldRender = (condition?: boolean | unknown): boolean =>
+    typeof condition === 'function' || !!condition;
   return (
     <BackgroundLayout
       theme={resolvedTheme}
@@ -242,18 +262,30 @@ const OTP: React.FC<OTPProps> = ({
           <View style={styles.topBackBtnWrapper}>
             {renderBackButton ? (
               renderBackButton({
-                onPress: onTopBackBtnPress ?? (() => {})
+                onPress: onTopBackBtnPress ?? (() => {}),
               })
             ) : (
-              <BackBtn theme={resolvedTheme} style={backBtnStyle} onPress={onTopBackBtnPress} />
+              <BackBtn
+                theme={resolvedTheme}
+                style={backBtnStyle}
+                onPress={onTopBackBtnPress}
+              />
             )}
           </View>
         )}
         <HideKeyboard>
           <View style={styles.centerContent}>
-            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
+            {renderLogo ? (
+              renderLogo()
+            ) : logoUri ? (
+              <Logo logoUri={logoUri} />
+            ) : null}
 
-            {renderOtpHeader ? renderOtpHeader() : <Text style={[styles.title, titleStyle]}>{title}</Text>}
+            {renderOtpHeader ? (
+              renderOtpHeader()
+            ) : (
+              <Text style={[styles.title, titleStyle]}>{title}</Text>
+            )}
 
             {phoneNumber &&
               (renderPhoneText ? (
@@ -266,7 +298,7 @@ const OTP: React.FC<OTPProps> = ({
                       fontWeight: '700',
                       fontSize: RFValue(13),
                       marginTop: verticalScale(4),
-                      color: resolvedTheme.colors.primary
+                      color: resolvedTheme.colors.primary,
                     }}
                   >
                     {phoneNumber}
@@ -279,7 +311,10 @@ const OTP: React.FC<OTPProps> = ({
                 renderOtpInput({
                   value: otp,
                   onChange: (val) => setOtp(val.replace(/\D/g, '')),
-                  isFocused: Array.from({ length: otpDigitCount }, (_, i) => otp.length === i)
+                  isFocused: Array.from(
+                    { length: otpDigitCount },
+                    (_, i) => otp.length === i
+                  ),
                 })
               ) : (
                 <CodeField
@@ -294,7 +329,12 @@ const OTP: React.FC<OTPProps> = ({
                   renderCell={({ index, symbol, isFocused }) => (
                     <Text
                       key={index}
-                      style={[styles.cell, cellStyle, isFocused && styles.focusCell, isFocused && focusCellStyle]}
+                      style={[
+                        styles.cell,
+                        cellStyle,
+                        isFocused && styles.focusCell,
+                        isFocused && focusCellStyle,
+                      ]}
                       onLayout={getCellOnLayoutHandler(index)}
                     >
                       {symbol || (isFocused ? <Cursor /> : null)}
@@ -307,7 +347,7 @@ const OTP: React.FC<OTPProps> = ({
                 renderSubmitButton({
                   onPress: handleSubmit,
                   disabled: isSubmitDisabled,
-                  loading: isLoading
+                  loading: isLoading,
                 })
               ) : (
                 <Button.Primary
@@ -324,19 +364,24 @@ const OTP: React.FC<OTPProps> = ({
               {/* Resend OTP Section */}
 
               {!isKeyboardOpen && (
-                <View style={{ alignItems: 'center', marginTop: verticalScale(10) }}>
+                <View
+                  style={{ alignItems: 'center', marginTop: verticalScale(10) }}
+                >
                   {renderResendButton ? (
                     renderResendButton({
                       onPress: handleResendOtp,
-                      disabled: resendTimer > 0
+                      disabled: resendTimer > 0,
                     })
                   ) : (
                     <Text
                       onPress={resendTimer <= 0 ? handleResendOtp : undefined}
                       style={{
                         fontSize: RFValue(12),
-                        color: resendTimer > 0 ? resolvedTheme.colors.onSurfaceVariant : resolvedTheme.colors.primary,
-                        textAlign: 'center'
+                        color:
+                          resendTimer > 0
+                            ? resolvedTheme.colors.onSurfaceVariant
+                            : resolvedTheme.colors.primary,
+                        textAlign: 'center',
                       }}
                     >
                       {resendTimer > 0

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

@@ -0,0 +1,306 @@
+/**
+ * @author Ashok Desai
+ * @lastModified oct 02 Oct 2025 at 10:30 AM
+ */
+import React, { useState, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  ActivityIndicator,
+  StatusBar,
+} 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 { useTheme } from '../../../theme/hook/useTheme';
+import type { AppTheme } from '../../../theme/themes';
+import { Camera as CameraIcon, QrCode } from 'lucide-react-native';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraPermission,
+  useCodeScanner,
+  type Code as BaseCode,
+} from 'react-native-vision-camera';
+import QrViewArea from './components/QrViewArea';
+
+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 };
+  };
+}
+
+export type QrLoginProps = {
+  title?: string;
+  description?: string;
+  scanButtonText?: string;
+  onBackPress?: () => void;
+  onScanSuccess?: (value: string) => void;
+  theme?: AppTheme;
+  cameraType?: 'back' | 'front';
+  layout?: 'one' | 'two';
+};
+
+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> = ({
+  title = DEFAULTS.title,
+  description = DEFAULTS.description,
+  scanButtonText = DEFAULTS.scanButtonText,
+  onBackPress,
+  onScanSuccess,
+  theme,
+  cameraType = DEFAULTS.cameraType,
+  layout = 'one',
+}) => {
+  const { theme: appliedTheme } = useTheme(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);
+
+    return (
+      origin.x >= sideOverlayWidth &&
+      origin.y >= boxTop &&
+      origin.x + size.width <= sideOverlayWidth + boxW &&
+      origin.y + size.height <= boxTop + boxH
+    );
+  };
+
+  // ---- 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;
+      }
+    },
+  });
+
+  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 }]}>
+      <StatusBar
+        translucent
+        backgroundColor="transparent"
+        barStyle={appliedTheme.dark ? 'light-content' : 'dark-content'}
+      />
+
+      <View style={[styles.headerWrapper, { height: HEADER_HEIGHT }]}>
+        <AppHeader
+          title={title}
+          onBackPress={onBackPress}
+          theme={appliedTheme}
+          titleAlign="left"
+        />
+      </View>
+
+      <View style={styles.cameraWrapper}>
+        {scanActive ? (
+          device ? (
+            <>
+              <Camera
+                style={StyleSheet.absoluteFill}
+                device={device}
+                isActive={true}
+                codeScanner={codeScanner}
+              />
+              <QrViewArea
+                theme={appliedTheme}
+                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}
+                />
+              </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>
+        )}
+      </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) },
+});
+
+export default QrLogin;