@sanctum-key/react-native-sdk 1.0.6 → 1.0.7

package/src/components/NativeCameraView.tsx

@@ -10,7 +10,7 @@ export interface NativeCameraViewProps {
   onError?: (event: any) => void;
 }
 
-const NativeCameraViewComponent = requireNativeViewManager('TransfergratisSdk_TransfergratisSdkView');
+const NativeCameraViewComponent = requireNativeViewManager('SanctumKeySdk_SanctumKeySdkView');
 
 export const NativeCameraView: React.FC<NativeCameraViewProps> = (props) => {
   

package/src/components/OverLay/IdCard.tsx

@@ -1,277 +1,278 @@
-import { Animated, Dimensions, StyleSheet, Text, View } from "react-native";
-import Svg, { Defs, Mask, Rect, Path } from "react-native-svg";
-import ScanningLine from "../Svgs/scanningLine";
-import { IdCardOverlayProps } from "./type";
-import StepOverlay from "./StepOverlay";
+import React from 'react';
+import {
+    Animated,
+    Dimensions,
+    Platform,
+    SafeAreaView,
+    StatusBar,
+    StyleSheet,
+    Text,
+    View,
+} from 'react-native';
+import Svg, {
+    Defs,
+    G,
+    LinearGradient,
+    Mask,
+    Path,
+    Rect,
+    Stop,
+} from 'react-native-svg';
+import ScanningLine from '../Svgs/scanningLine';
+import StepOverlay from './StepOverlay';
+import { IdCardOverlayProps } from './type';
 
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 
+const IdCardOverlay = ({
+    cornerOpacity,
+    instructions,
+    stepperProps,
+    isSuccess,
+    language = 'en',
+    // Note: xMinPercent, yMinPercent, etc. are intentionally ignored below 
+    // to force a mathematically perfect ID card aspect ratio.
+}: IdCardOverlayProps) => {
+    const AnimatedG = Animated.createAnimatedComponent(G);
 
+    // --- 🚨 GEOMETRY FIX: Perfect ID Card Ratio ---
+    // Standard ISO ID-1 ratio is 1.586 (85.6mm / 53.98mm)
+    const ID_ASPECT_RATIO = 1.586;
+    
+    // Set width to 85% of the screen, and calculate perfect height
+    const boxWidth = screenWidth * 0.85;
+    const boxHeight = boxWidth / ID_ASPECT_RATIO;
 
-const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax: yMaxProps, cornerOpacity, instructions, cornerColor = "#4CAF50", stepperProps, isSuccess, language  }: IdCardOverlayProps) => {
-    const screenWidth = Dimensions.get('window').width;
-    const screenHeight = Dimensions.get('window').height;
+    // Center horizontally
+    const xMin = (screenWidth - boxWidth) / 2;
+    const xMax = xMin + boxWidth;
 
-    const boxWidth = xMaxProps - xMinProps;
-    const boxHeight = yMaxProps - yMinProps;
+    // Center vertically (shifted slightly up for better holding ergonomics)
+    const yMin = (screenHeight - boxHeight) * 0.42; 
+    const yMax = yMin + boxHeight;
 
-    
+    // --- Clean, Professional Copy Formatting ---
+    const formatDocType = (type?: string) => {
+        if (!type) return 'document';
+        // e.g., "identity_card" -> "identity card"
+        return type.replace(/_/g, ' ').toLowerCase();
+    };
 
+    const getSideText = (side?: string) => {
+        // Using "recto/verso" for French as it is much more professional for documents
+        if (side === 'front') return language === 'en' ? 'front' : 'recto';
+        return language === 'en' ? 'back' : 'verso';
+    };
 
+    const docTypeFormatted = formatDocType(stepperProps?.selectedDocumentType);
+    const sideText = getSideText(stepperProps?.side);
 
+    const bottomTitle = language === 'en'
+        ? `Position the ${sideText} of your ${docTypeFormatted}`
+        : `Positionnez le ${sideText} de votre ${docTypeFormatted}`;
 
-    // Calculer les coordonnées pour centrer le cadre
-    const xMin = (screenWidth - boxWidth) / 2;
-    const yMin = (screenHeight - boxHeight) / 3;
-    const xMax = xMin + boxWidth;
-    const yMax = yMin + boxHeight;
+    const bottomSubtitle = language === 'en'
+        ? 'Ensure all details are clear and readable.'
+        : 'Assurez-vous que tous les détails sont lisibles.';
 
-    return (
-        <View style={StyleSheet.absoluteFill}>
-            {stepperProps ? (
-                <StepOverlay {...stepperProps} />
-            ) : null}
+    const helperText = language === 'en'
+        ? 'No glare  •  All corners visible  •  Hold steady'
+        : 'Pas de reflets  •  Coins visibles  •  Maintenez stable';
 
-            <Animated.View style={[styles.topIntruction]}>
-                <Text style={styles.topIntructionText}>
-                    💡 {instructions}
-                </Text>
-            </Animated.View>
+    // --- SVG Constants ---
+    const CORNER_SIZE = 40; 
+    const STROKE_WIDTH = 4;
+    const BORDER_RADIUS = 16; // Reduced slightly for a tighter, more realistic card feel
 
-            <Svg
-                height={screenHeight}
-                width={screenWidth}
-                style={styles.svg}
-            >
+    return (
+        <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+            <StatusBar translucent backgroundColor="transparent" barStyle="light-content" />
+            
+            {/* SVG Overlay */}
+            <Svg width={screenWidth} height={screenHeight} style={styles.svg}>
                 <Defs>
                     <Mask id="cameraMask">
-                        {/* Fond blanc - zone visible */}
-                        <Rect
-                            x="0"
-                            y="0"
-                            width={screenWidth}
-                            height={screenHeight}
-                            fill="white"
-                        />
-                        {/* Zone noire - zone masquée (transparente) */}
+                        <Rect x="0" y="0" width={screenWidth} height={screenHeight} fill="white" />
+                        {/* Transparent Cutout */}
                         <Rect
                             x={xMin}
                             y={yMin}
                             width={boxWidth}
                             height={boxHeight}
+                            rx={BORDER_RADIUS}
+                            ry={BORDER_RADIUS}
                             fill="black"
                         />
                     </Mask>
+                    <LinearGradient id="scanBorderGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <Stop offset="0%" stopColor="#4ADE80" />
+                        <Stop offset="100%" stopColor="#22C55E" />
+                    </LinearGradient>
                 </Defs>
-
-                {/* Overlay semi-transparent avec masque */}
+                
+                {/* Dim background */}
+                <Rect x="0" y="0" width={screenWidth} height={screenHeight} fill="rgba(0,0,0,0.85)" mask="url(#cameraMask)" />
+                
+                {/* Main Card Border */}
                 <Rect
-                    x="0"
-                    y="0"
-                    width={screenWidth}
-                    height={screenHeight}
-                    fill="rgba(0, 0, 0, 0.5)"
-                    mask="url(#cameraMask)"
-                />
-
-                {/* Coins de la zone de capture - arrondis avec animation */}
-                {/* Coin supérieur gauche */}
-                <Path
-                    d={`M ${xMin + 15} ${yMin} Q ${xMin} ${yMin} ${xMin} ${yMin + 15} L ${xMin} ${yMin + 20}`}
-                    stroke={cornerColor}
-                    strokeWidth="8"
-                    fill="none"
-                    opacity={cornerOpacity}
-                />
-                <Path
-                    d={`M ${xMin + 20} ${yMin} L ${xMin + 15} ${yMin}`}
-                    stroke={cornerColor}
-                    strokeWidth="8"
-                    opacity={cornerOpacity}
-                />
-
-                {/* Coin supérieur droit */}
-                <Path
-                    d={`M ${xMax - 15} ${yMin} Q ${xMax} ${yMin} ${xMax} ${yMin + 15} L ${xMax} ${yMin + 20}`}
-                    stroke={cornerColor}
-                    strokeWidth="8"
-                    fill="none"
-                    opacity={cornerOpacity}
-                />
-                <Path
-                    d={`M ${xMax - 20} ${yMin} L ${xMax - 15} ${yMin}`}
-                    stroke={cornerColor}
-                    strokeWidth="8"
-                    opacity={cornerOpacity}
-                />
-
-                {/* Coin inférieur gauche */}
-                <Path
-                    d={`M ${xMin + 15} ${yMax} Q ${xMin} ${yMax} ${xMin} ${yMax - 15} L ${xMin} ${yMax - 20}`}
-                    stroke={cornerColor}
-                    strokeWidth="8"
-                    fill="none"
-                    opacity={cornerOpacity}
-                />
-                <Path
-                    d={`M ${xMin + 20} ${yMax} L ${xMin + 15} ${yMax}`}
-                    stroke={cornerColor}
-                    strokeWidth="8"
-                    opacity={cornerOpacity}
-                />
-
-                {/* Coin inférieur droit */}
-                <Path
-                    d={`M ${xMax - 15} ${yMax} Q ${xMax} ${yMax} ${xMax} ${yMax - 15} L ${xMax} ${yMax - 20}`}
-                    stroke={cornerColor}
-                    strokeWidth="8"
-                    fill="none"
-                    opacity={cornerOpacity}
-                />
-                <Path
-                    d={`M ${xMax - 20} ${yMax} L ${xMax - 15} ${yMax}`}
-                    stroke={cornerColor}
-                    strokeWidth="8"
-                    opacity={cornerOpacity}
+                    x={xMin}
+                    y={yMin}
+                    width={boxWidth}
+                    height={boxHeight}
+                    rx={BORDER_RADIUS}
+                    ry={BORDER_RADIUS}
+                    stroke="rgba(255,255,255,0.25)" // Subtle inner frame
+                    strokeWidth={1.5}
+                    fill="transparent"
                 />
+                
+                {/* Professional Corner Guides */}
+                <AnimatedG opacity={cornerOpacity || 1}>
+                    {/* Top Left */}
+                    <Path
+                        d={`M ${xMin} ${yMin + CORNER_SIZE} L ${xMin} ${yMin + BORDER_RADIUS} Q ${xMin} ${yMin} ${xMin + BORDER_RADIUS} ${yMin} L ${xMin + CORNER_SIZE} ${yMin}`}
+                        stroke="url(#scanBorderGradient)"
+                        strokeWidth={STROKE_WIDTH}
+                        strokeLinecap="round"
+                        fill="none"
+                    />
+                    {/* Top Right */}
+                    <Path
+                        d={`M ${xMax - CORNER_SIZE} ${yMin} L ${xMax - BORDER_RADIUS} ${yMin} Q ${xMax} ${yMin} ${xMax} ${yMin + BORDER_RADIUS} L ${xMax} ${yMin + CORNER_SIZE}`}
+                        stroke="url(#scanBorderGradient)"
+                        strokeWidth={STROKE_WIDTH}
+                        strokeLinecap="round"
+                        fill="none"
+                    />
+                    {/* Bottom Left */}
+                    <Path
+                        d={`M ${xMin} ${yMax - CORNER_SIZE} L ${xMin} ${yMax - BORDER_RADIUS} Q ${xMin} ${yMax} ${xMin + BORDER_RADIUS} ${yMax} L ${xMin + CORNER_SIZE} ${yMax}`}
+                        stroke="url(#scanBorderGradient)"
+                        strokeWidth={STROKE_WIDTH}
+                        strokeLinecap="round"
+                        fill="none"
+                    />
+                    {/* Bottom Right */}
+                    <Path
+                        d={`M ${xMax - CORNER_SIZE} ${yMax} L ${xMax - BORDER_RADIUS} ${yMax} Q ${xMax} ${yMax} ${xMax} ${yMax - BORDER_RADIUS} L ${xMax} ${yMax - CORNER_SIZE}`}
+                        stroke="url(#scanBorderGradient)"
+                        strokeWidth={STROKE_WIDTH}
+                        strokeLinecap="round"
+                        fill="none"
+                    />
+                </AnimatedG>
             </Svg>
-            {isSuccess ? null : (
-                <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} />
+
+            {/* Scanning animation */}
+            {!isSuccess && (
+                <ScanningLine yMin={yMin} yMax={yMax} screenWidth={screenWidth} height={screenHeight} />
             )}
-            {/* <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} /> */}
 
-            <View style={styles.bottomIntruction}>
-                <Text style={styles.bottomTitle}>
-                    {language === "en" ? `Scan the ${stepperProps?.side === 'front' ? 'front' : 'back'} side of your ${stepperProps?.selectedDocumentType}.`:`Scanner de la face ${stepperProps?.side === 'front' ? 'avant' : 'arrière'} de votre ${stepperProps?.selectedDocumentType}.`}
-                  
-                </Text>
-                <Text style={styles.bottomSubtitle}>
-                    {
-                        language === "en" 
-                          ? "Hold your ID card steady and make sure all corners are visible. Do not move your phone while the image is being captured."
-                          : "Maintenez votre carte d'identité stable et assurez-vous que tous les coins sont visibles. Ne déplacez pas votre téléphone pendant la capture."
-                    }
-                    
-                </Text>
+            {/* Top UI Zone */}
+            <View style={[styles.topZone, { height: yMin }]} pointerEvents="box-none">
+                <SafeAreaView style={styles.safeAreaZone} pointerEvents="box-none">
+                    {stepperProps && (
+                        <View style={styles.stepperWrapper}>
+                            <StepOverlay {...stepperProps} />
+                        </View>
+                    )}
+                    {instructions && (
+                        <View style={styles.instructionsContainer}>
+                            <View style={styles.instructionsBadge}>
+                                <Text style={styles.instructionsText}>{instructions}</Text>
+                            </View>
+                        </View>
+                    )}
+                </SafeAreaView>
+            </View>
+
+            {/* Bottom UI Zone */}
+            <View style={[styles.bottomZone, { top: yMax + 30 }]} pointerEvents="box-none">
+                <Text style={styles.bottomTitle}>{bottomTitle}</Text>
+                <Text style={styles.bottomSubtitle}>{bottomSubtitle}</Text>
+                <View style={styles.helperPill}>
+                    <Text style={styles.helperText}>{helperText}</Text>
+                </View>
             </View>
-        </View>)
-}
+        </View>
+    );
+};
 
 export default IdCardOverlay;
 
 const styles = StyleSheet.create({
-    overlay: {
+    svg: {
         position: 'absolute',
         top: 0,
         left: 0,
-        width: '100%',
-        height: '50%',
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 1,
     },
-    svg: {
+    topZone: {
         position: 'absolute',
         top: 0,
         left: 0,
-        width: '100%',
-        height: '100%',
+        right: 0,
+        zIndex: 10,
+        justifyContent: 'flex-start',
+    },
+    safeAreaZone: {
+        flex: 1,
+        paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 8 : 8,
+    },
+    stepperWrapper: {
+        paddingHorizontal: 20,
     },
-    topIntruction: {
-        zIndex: 1000,
-        flexDirection: 'row',
+    instructionsContainer: {
         alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 20,
-        paddingHorizontal: 10,
-        marginHorizontal: 20,
-        marginTop: 10,
-        backgroundColor: "#FDE04730",
-        borderColor: "#FDE047",
-        borderWidth: 1,
-        borderRadius: 10,
-        gap: 10,
+        marginTop: 'auto',
+        marginBottom: 24,
+        paddingHorizontal: 20,
     },
-    topIntructionText: {
-        color: '#FDE047',
-        fontSize: 14,
-        fontWeight: 'bold',
-        textAlign: 'center',
+    instructionsBadge: {
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        borderRadius: 8,
+        paddingVertical: 8,
+        paddingHorizontal: 14,
     },
-    bottomIntruction: {
+    instructionsText: {
+        color: '#FFFFFF',
+        fontSize: 13,
+        fontWeight: '500',
+        letterSpacing: 0.3,
+    },
+    bottomZone: {
         position: 'absolute',
         bottom: 0,
         left: 0,
-        width: '100%',
-        height: '35%',
-        paddingHorizontal: 20,
-    },
-    bottomIntructionTextBold: {
-        color: 'white',
-        fontSize: 16,
-        fontWeight: 'bold',
-        textAlign: 'center',
-    },
-    bottomIntructionText: {
-        color: 'white',
-        fontSize: 14,
-        fontWeight: 'bold',
-        textAlign: 'center',
+        right: 0,
+        zIndex: 10,
+        alignItems: 'center',
+        paddingHorizontal: 24,
     },
     bottomTitle: {
-        color: 'white',
-        fontSize: 25,
-        fontWeight: 'bold',
+        color: '#FFFFFF',
+        fontSize: 18,
+        fontWeight: '600',
         textAlign: 'center',
+        letterSpacing: 0.3,
+        marginBottom: 6,
     },
     bottomSubtitle: {
-        color: 'white',
-        marginTop: 15,
+        color: 'rgba(255,255,255,0.7)',
         fontSize: 14,
-        fontWeight: '500',
         textAlign: 'center',
+        fontWeight: '400',
+        marginBottom: 20,
     },
-
-
-    image: {
-        position: 'absolute',
-        borderRadius: 10,
+    helperPill: {
+        backgroundColor: 'rgba(255,255,255,0.1)',
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        borderRadius: 20,
     },
-    stepperContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 20,
-        paddingVertical: 15,
-        // backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        zIndex: 1000,
-    },
-    stepperItem: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    stepperDetails: {
-
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    stepperItemText: {
-        color: 'white',
-        fontSize: 20,
-        fontWeight: 'bold',
-    },
-    stepperDetailsText: {
-        color: 'white',
+    helperText: {
+        color: 'rgba(255,255,255,0.9)',
         fontSize: 12,
         fontWeight: '500',
     },
-    back: {
-        // flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    next: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-
-})
+});