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

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { verticalScale } from 'react-native-size-matters';
+
+import { useTheme } from '../../../../../theme';
+
+type Props = {
+  title?: string;
+  description?: string;
+};
+
+const QrScannerHeader: React.FC<Props> = ({
+  title = 'Scan QR Code',
+  description = 'Hold steady to scan',
+}) => {
+  const { theme } = useTheme();
+  const { colors } = theme;
+
+  return (
+    <View style={styles.container}>
+      <Text
+        style={[
+          styles.title,
+          {
+            color: colors.white,
+          },
+        ]}
+      >
+        {title}
+      </Text>
+
+      <Text
+        style={[
+          styles.description,
+          {
+            color: colors.white,
+          },
+        ]}
+      >
+        {description}
+      </Text>
+    </View>
+  );
+};
+
+export default QrScannerHeader;
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    marginTop: verticalScale(10),
+  },
+
+  title: {
+    fontSize: RFValue(15),
+    fontWeight: '700',
+    marginBottom: verticalScale(6),
+  },
+
+  description: {
+    fontSize: RFValue(11),
+    opacity: 0.8,
+  },
+});

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

@@ -0,0 +1,255 @@
+import React from 'react';
+import { View, StyleSheet, ActivityIndicator } from 'react-native';
+import { Camera as CameraIcon, QrCode } from 'lucide-react-native';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+
+import { Button } from '../../../../Button';
+import { Text } from '../../../../Text';
+import { useTheme } from '../../../../../theme';
+import { toRgba } from '../../../../../theme/utils/toRgba';
+
+type Props = {
+  title?: string;
+  description?: string;
+  scanButtonText?: string;
+  loading?: boolean;
+  onPress?: () => void;
+};
+
+const QrScannerIntro: React.FC<Props> = ({
+  title = 'Scan QR to Sign In',
+  description = 'Open your TV app, go to Settings → Scan QR and point the code at your camera',
+  scanButtonText = 'Open Scanner',
+  loading = false,
+  onPress,
+}) => {
+  const { theme } = useTheme();
+  const { colors } = theme;
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.iconWrapper,
+          {
+            backgroundColor: toRgba(colors.primary, 0.1),
+          },
+        ]}
+      >
+        <CameraIcon size={scale(34)} color={colors.primary} strokeWidth={2.4} />
+      </View>
+
+      <Text
+        style={[
+          styles.title,
+          {
+            color: colors.textPrimary,
+          },
+        ]}
+      >
+        {title}
+      </Text>
+
+      <Text
+        style={[
+          styles.description,
+          {
+            color: toRgba(colors.textPrimary, 0.65),
+          },
+        ]}
+      >
+        {description}
+      </Text>
+
+      <View
+        style={[
+          styles.heroCard,
+          {
+            backgroundColor: colors.surface,
+            borderColor: toRgba(colors.primary, 0.1),
+            shadowColor: colors.primary,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.scannerBox,
+            {
+              borderColor: toRgba(colors.primary, 0.2),
+            },
+          ]}
+        >
+          <View
+            style={[
+              styles.corner,
+              styles.cornerTL,
+              { borderColor: colors.primary },
+            ]}
+          />
+          <View
+            style={[
+              styles.corner,
+              styles.cornerTR,
+              { borderColor: colors.primary },
+            ]}
+          />
+          <View
+            style={[
+              styles.corner,
+              styles.cornerBL,
+              { borderColor: colors.primary },
+            ]}
+          />
+          <View
+            style={[
+              styles.corner,
+              styles.cornerBR,
+              { borderColor: colors.primary },
+            ]}
+          />
+
+          <QrCode
+            size={moderateScale(190)}
+            color={toRgba(colors.primary, 0.85)}
+            strokeWidth={1.6}
+          />
+        </View>
+      </View>
+
+      {loading ? (
+        <ActivityIndicator color={colors.primary} style={styles.loader} />
+      ) : (
+        <Button.Primary
+          title={scanButtonText}
+          onPress={onPress}
+          disabled={loading}
+          leftIcon={
+            <CameraIcon
+              size={scale(14)}
+              color={colors.buttonText}
+              strokeWidth={2.3}
+            />
+          }
+          containerStyle={styles.button}
+          titleStyle={styles.buttonText}
+        />
+      )}
+    </View>
+  );
+};
+
+export default QrScannerIntro;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: '6%',
+    paddingBottom: '22%',
+  },
+
+  iconWrapper: {
+    width: moderateScale(72),
+    height: moderateScale(72),
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: verticalScale(16),
+  },
+
+  title: {
+    fontSize: RFValue(20),
+    lineHeight: RFValue(26),
+    fontWeight: '700',
+    letterSpacing: 0.3,
+    textAlign: 'center',
+    marginBottom: verticalScale(8),
+  },
+
+  description: {
+    fontSize: RFValue(12),
+    lineHeight: RFValue(18),
+    textAlign: 'center',
+    width: '82%',
+    marginBottom: verticalScale(24),
+  },
+
+  heroCard: {
+    width: '72%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderRadius: moderateScale(24),
+    padding: scale(16),
+    marginBottom: verticalScale(28),
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.07,
+    shadowRadius: 16,
+    elevation: 4,
+  },
+
+  scannerBox: {
+    width: '100%',
+    aspectRatio: 1,
+    borderRadius: moderateScale(18),
+    borderWidth: 1.5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+
+  corner: {
+    position: 'absolute',
+    width: '20%',
+    aspectRatio: 1,
+  },
+
+  cornerTL: {
+    top: 0,
+    left: 0,
+    borderTopWidth: 3,
+    borderLeftWidth: 3,
+    borderTopLeftRadius: moderateScale(16),
+  },
+
+  cornerTR: {
+    top: 0,
+    right: 0,
+    borderTopWidth: 3,
+    borderRightWidth: 3,
+    borderTopRightRadius: moderateScale(16),
+  },
+
+  cornerBL: {
+    bottom: 0,
+    left: 0,
+    borderBottomWidth: 3,
+    borderLeftWidth: 3,
+    borderBottomLeftRadius: moderateScale(16),
+  },
+
+  cornerBR: {
+    bottom: 0,
+    right: 0,
+    borderBottomWidth: 3,
+    borderRightWidth: 3,
+    borderBottomRightRadius: moderateScale(16),
+  },
+
+  button: {
+    width: '55%',
+    alignSelf: 'center',
+    minHeight: verticalScale(38),
+    paddingVertical: verticalScale(8),
+  },
+
+  buttonText: {
+    fontSize: RFValue(12),
+  },
+
+  loader: {
+    marginTop: verticalScale(8),
+  },
+});

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

@@ -0,0 +1,291 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  StyleSheet,
+  View,
+  ActivityIndicator,
+  Text,
+  useWindowDimensions,
+} from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import {
+  Canvas,
+  Path,
+  Skia,
+  rect,
+  rrect,
+  FillType,
+  RoundedRect,
+} from '@shopify/react-native-skia';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { CheckCircle2, AlertTriangle } from 'lucide-react-native';
+
+import { useTheme } from '../../../../../theme';
+import { toRgba } from '../../../../../theme/utils/toRgba';
+
+const SCANNER_SIZE = moderateScale(260);
+const BORDER_RADIUS = moderateScale(28);
+const BORDER_WIDTH = moderateScale(3);
+
+type Props = {
+  header?: React.ReactNode;
+  scanner?: React.ReactNode;
+  footer?: React.ReactNode;
+  isProcessing?: boolean;
+  opacity?: number;
+  containerHeight?: number;
+  status?: 'idle' | 'loading' | 'success' | 'error';
+  statusMessage?: string;
+};
+
+const QrScannerOverlay: React.FC<Props> = ({
+  header,
+  scanner,
+  footer,
+  isProcessing = false,
+  opacity = 0.82,
+  containerHeight,
+  status = 'idle',
+  statusMessage,
+}) => {
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const [layout, setLayout] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const { theme } = useTheme();
+  const { colors } = theme;
+
+  const mountOpacity = useSharedValue(0);
+
+  React.useEffect(() => {
+    mountOpacity.value = withTiming(1, {
+      duration: 250,
+      easing: Easing.out(Easing.ease),
+    });
+  }, [mountOpacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: mountOpacity.value,
+    flex: 1,
+  }));
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width: w, height: h } = event.nativeEvent.layout;
+    setLayout({ width: w, height: h });
+  }, []);
+
+  const width = layout?.width ?? windowWidth;
+  const height =
+    layout?.height ??
+    (containerHeight && containerHeight > 0 ? containerHeight : windowHeight);
+
+  const overlayColor = toRgba(
+    colors.background,
+    isProcessing ? Math.min(opacity + 0.1, 0.95) : opacity
+  );
+
+  const scannerX = (width - SCANNER_SIZE) / 2;
+  const scannerY = (height - SCANNER_SIZE) / 2;
+
+  const overlayPath = React.useMemo(() => {
+    const path = Skia.Path.Make();
+    path.addRect(rect(0, 0, width, height));
+    path.addRRect(
+      rrect(
+        rect(scannerX, scannerY, SCANNER_SIZE, SCANNER_SIZE),
+        BORDER_RADIUS,
+        BORDER_RADIUS
+      )
+    );
+    path.setFillType(FillType.EvenOdd);
+    return path;
+  }, [width, height, scannerX, scannerY]);
+
+  const loadingPillStyle = useMemo(
+    () => [
+      styles.processingRow,
+      {
+        backgroundColor: toRgba(colors.surface, 0.92),
+        borderColor: toRgba(colors.primary, 0.15),
+      },
+    ],
+    [colors.surface, colors.primary]
+  );
+
+  const loadingTextStyle = useMemo(
+    () => [styles.processingText, { color: colors.textPrimary }],
+    [colors.textPrimary]
+  );
+
+  const successPillStyle = useMemo(
+    () => [
+      styles.processingRow,
+      {
+        backgroundColor: toRgba(colors.alert.success, 0.95),
+        borderColor: toRgba(colors.alert.success, 0.2),
+      },
+    ],
+    [colors.alert.success]
+  );
+
+  const errorPillStyle = useMemo(
+    () => [
+      styles.processingRow,
+      {
+        backgroundColor: toRgba(colors.alert.error, 0.95),
+        borderColor: toRgba(colors.alert.error, 0.2),
+      },
+    ],
+    [colors.alert.error]
+  );
+
+  const scannerPositionStyle = useMemo(
+    () => [
+      styles.scannerContainer,
+      {
+        top: scannerY,
+        left: scannerX,
+      },
+    ],
+    [scannerY, scannerX]
+  );
+
+  const renderStatusPill = () => {
+    if (status === 'loading' || isProcessing) {
+      return (
+        <View style={loadingPillStyle}>
+          <ActivityIndicator size="small" color={colors.primary} />
+          <Text style={loadingTextStyle}>{statusMessage || 'Signing in…'}</Text>
+        </View>
+      );
+    }
+
+    if (status === 'success') {
+      return (
+        <View style={successPillStyle}>
+          <CheckCircle2 size={scale(14)} color="#FFFFFF" strokeWidth={2.5} />
+          <Text style={[styles.processingText, styles.textWhite]}>
+            {statusMessage || 'Login success!'}
+          </Text>
+        </View>
+      );
+    }
+
+    if (status === 'error') {
+      return (
+        <View style={errorPillStyle}>
+          <AlertTriangle size={scale(14)} color="#FFFFFF" strokeWidth={2.5} />
+          <Text style={[styles.processingText, styles.textWhite]}>
+            {statusMessage || 'Failed to verify.'}
+          </Text>
+        </View>
+      );
+    }
+
+    return footer;
+  };
+
+  return (
+    <Animated.View
+      style={[styles.container, animatedStyle]}
+      onLayout={onLayout}
+    >
+      <Canvas style={StyleSheet.absoluteFill}>
+        <Path path={overlayPath} color={overlayColor} />
+        <RoundedRect
+          x={scannerX}
+          y={scannerY}
+          width={SCANNER_SIZE}
+          height={SCANNER_SIZE}
+          r={BORDER_RADIUS}
+          color={
+            isProcessing
+              ? toRgba(colors.primary, 0.5)
+              : toRgba(colors.primary, 0.22)
+          }
+          style="stroke"
+          strokeWidth={BORDER_WIDTH}
+        />
+      </Canvas>
+
+      <View style={styles.topContainer}>{header}</View>
+
+      <View pointerEvents="box-none" style={scannerPositionStyle}>
+        {scanner}
+      </View>
+
+      <View style={styles.bottomContainer}>{renderStatusPill()}</View>
+    </Animated.View>
+  );
+};
+
+export default React.memo(QrScannerOverlay);
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFill,
+  },
+
+  topContainer: {
+    position: 'absolute',
+    top: verticalScale(20),
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    paddingHorizontal: scale(24),
+    zIndex: 10,
+  },
+
+  scannerContainer: {
+    position: 'absolute',
+    width: SCANNER_SIZE,
+    height: SCANNER_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    zIndex: 20,
+  },
+
+  bottomContainer: {
+    position: 'absolute',
+    bottom: verticalScale(40),
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    paddingHorizontal: scale(24),
+    zIndex: 10,
+  },
+
+  processingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: scale(6),
+    paddingVertical: verticalScale(5),
+    paddingHorizontal: scale(10),
+    borderRadius: moderateScale(99),
+    borderWidth: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+
+  processingText: {
+    fontSize: RFValue(11),
+    fontWeight: '600',
+    opacity: 0.95,
+  },
+
+  textWhite: {
+    color: '#FFFFFF',
+  },
+});