@transfergratis/react-native-sdk 0.1.8 → 0.1.10

package/src/components/KYCElements/IDCardCapture.tsx

@@ -7,11 +7,12 @@ import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
 import { Button } from '../ui/Button';
 import { removeDuplicates } from '../../utils/remove-duplicate';
-import { backVerification, frontVerification } from '../../modules/api/CardAuthentification';
+import { backVerification, checkTemplateType, frontVerification } from '../../modules/api/CardAuthentification';
 import { getDocumentTypeInfo } from '../../utils/get-document-type-info';
 import pathToBase64 from '../../utils/pathToBase64';
-import { truncateFields } from '../../modules/api/KYCService';
+import  { truncateFields } from '../../modules/api/KYCService';
 import { cropImageWithBBox } from '../../utils/cropByObb';
+import { logger } from '../../utils/logger';
 
 
 interface IIDCardPayload {
@@ -36,7 +37,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   error,
   language = 'en',
 }) => {
-  const { t } = useI18n();
+  const { t , locale} = useI18n();
   const [showCamera, setShowCamera] = useState(false);
   const [capturedImages, setCapturedImages] = useState<Record<string, IIDCardPayload>>(value || {});
   const [cropImageUri, setCropImageUri] = useState<string>('');
@@ -60,12 +61,12 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   const { actions, state, } = useTemplateKYCFlowContext();
   const config = component.config as IDCardConfig;
 
-  
+
 
   const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => {
     // console.log("text", text, JSON.stringify(component, null, 2));
-    if (text && typeof text[currentSide] === 'object' && text[currentSide][language]) {
-      return text[currentSide][language] || '';
+    if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) {
+      return text[currentSide][locale] || '';
     }
     return "";
   };
@@ -92,13 +93,13 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
         });
       }
     }
-    console.log("newconfig", truncateFields(newconfig));
+    logger.log("newconfig", truncateFields(newconfig));
     return newconfig;
   }, []);
 
 
   useEffect(() => {
-    console.log("cropImageUri", JSON.stringify(truncateFields({ box: silentCaptureResult }), null, 2));
+    logger.log("cropImageUri", JSON.stringify(truncateFields({ box: silentCaptureResult }), null, 2));
     if (capturedImages[currentSide]?.dir && silentCaptureResult?.bbox) {
       cropImageWithBBox(capturedImages[currentSide].dir, silentCaptureResult.bbox)?.then((uri) => {
         setCropImageUri(uri);
@@ -117,7 +118,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     maxRetakes: 3,
     overlay: {
       showGuide: true,
-      guideText: selectedDocumentType ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getLocalizedText(component.instructions as Record<string, LocalizedText>),
+      guideText: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions as Record<string, LocalizedText>),
       bbox: selectedDocumentType && config.bbox_configs[selectedDocumentType.type] ? config.bbox_configs[selectedDocumentType.type] : {
         xMin: 20,
         yMin: 140,
@@ -158,6 +159,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   const getCurrentSideVerification = (currentSide: string) => {
     const regionMapping = countryData?.regionMapping[selectedDocumentType?.type as GovernmentDocumentType];
     const authMethod: string[] = [];
+    const mrzTypes: string[] = [];
 
     const key = selectedDocumentType?.region?.trim()?.length > 0 ? selectedDocumentType?.region?.trim() : 'root';
     // console.log("regionMapping", JSON.stringify(regionMapping, null, 2), selectedDocumentType?.region);
@@ -167,44 +169,80 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
       regionMapping[key].forEach((item: any) => {
         if (item[currentSide as keyof typeof item]) {
           authMethod.push(item[currentSide as keyof typeof item]);
+          if (item?.mrz_type) {
+            mrzTypes.push(item?.mrz_type);
+          }
         }
       });
     }
 
-    console.log("regionMapping", JSON.stringify(truncateFields({ regionMapping, selectedDocumentType: selectedDocumentType?.region, key }), null, 2));
+    logger.log("regionMapping", JSON.stringify(truncateFields({ regionMapping, selectedDocumentType: selectedDocumentType?.region, key }), null, 2));
 
-    return removeDuplicates(authMethod);
+    return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping: regionMapping, key: key };
   }
 
+  const getCorrespondingMrzType = (templatePath: string, mapping: any, selectedDocumentType: string = "root") => {
+    if (!mapping[selectedDocumentType]) return null;
+
+    // Extraire le nom du fichier depuis le template_path
+    const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
+
+    if (!fileName) return null;
+
+    // Normaliser en .py
+    const pyName = `${fileName}.py`; // ex: cameroon_id_back_3_1.py
+
+    // Chercher dans la liste
+    const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName);
+
+    return found?.mrz_type || null;
+  }
 
-  const handleSilentCapture = (result: { success: boolean; path?: string; error?: string }) => {
+  const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string }) => {
     if (silentCaptureResult.isAnalyzing) {
       return;
     }
     if (result.success && result.path) {
       setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
+      let templatePath = silentCaptureResult.templatePath || '';
+
+      const regionMappings = getCurrentSideVerification(currentSide)
+      // logger.log("regionMappings", JSON.stringify(truncateFields({regionMappings, templatePath}), null, 2));
+      if (regionMappings.authMethod.includes('MRZ') && templatePath.length === 0) {
+        const templateType = await checkTemplateType({ path: result.path || '', docType: selectedDocumentType?.type as GovernmentDocumentType, docRegion: countryData?.code || "", postfix: currentSide });
+
+        if (templateType.template_path) {
+          templatePath = templateType.template_path;
+          logger.log("templatePath", templatePath);
+          setSilentCaptureResult((prev) => ({ ...prev, templatePath: templatePath }));
+        }
+      }
       if (currentSide === 'front') {
+
         frontVerification(
           {
             path: result.path,
-            regionMapping: getCurrentSideVerification(currentSide),
+            regionMapping: regionMappings,
             selectedDocumentType: selectedDocumentType?.type || '',
             code: countryData?.code || '',
             currentSide: currentSide,
-
+            templatePath: templatePath,
+            mrzType: getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '',
           }).then((mrz) => {
-            console.log("front verification result", truncateFields(mrz));
+            logger.log("front verification result", truncateFields(mrz));
             setSilentCaptureResult((prev) => ({
               ...prev, path: result.path,
               bbox: (mrz as any)?.bbox, success: true,
               mrz: JSON.stringify(mrz), isAnalyzing: false,
               country: countryData?.code,
-              documentType: selectedDocumentType?.type
+              documentType: selectedDocumentType?.type,
+              templatePath: "",
             }),
             );
+
           }).catch((e: any) => {
-            console.log("error front verification", truncateFields(e));
-            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
+            logger.log("error front verification", truncateFields(e));
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
             // Alert.alert('Erreur', e?.message || 'Erreur de détection du MRZ');
           })
       } else {
@@ -214,18 +252,20 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           selectedDocumentType: selectedDocumentType?.type || '',
           code: countryData?.code || '',
           currentSide: currentSide,
-
+          templatePath: templatePath,
+          mrzType: getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '',
         }).then((mrz) => {
-          console.log("back verification result", truncateFields(mrz));
+          logger.log("back verification result", truncateFields(mrz));
           setSilentCaptureResult((prev) => ({
             ...prev, path: result.path, bbox: (mrz as any)?.bbox,
             success: true, mrz: JSON.stringify(mrz), isAnalyzing: false,
             country: countryData?.code,
-            documentType: selectedDocumentType?.type
+            documentType: selectedDocumentType?.type,
+            templatePath: "",
           }));
         }).catch((e: any) => {
-          console.log("error back verification", truncateFields(e));
-          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
+          logger.log("error back verification", truncateFields(e));
+          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
           // Alert.alert('Erreur', e?.message || 'Erreur de détection du MRZ');
         })
       }
@@ -344,7 +384,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             }
 
             if (showDocumentSelection.regionSelection) {
-              console.log("showDocumentSelection", JSON.stringify(truncateFields(showDocumentSelection), null, 2));
+              logger.log("showDocumentSelection", JSON.stringify(truncateFields(showDocumentSelection), null, 2));
               setShowDocumentSelection({
                 documentSelection: false,
                 regionSelection: false
@@ -429,9 +469,10 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                   actions.showCustomStepper(true);
                 }
               },
-              selectedDocumentType: getDocumentTypeInfo(selectedDocumentType?.type || "identity_card").name.en || '',
+              selectedDocumentType: locale === 'en' ? getDocumentTypeInfo(selectedDocumentType?.type || "identity_card").name.en : getDocumentTypeInfo(selectedDocumentType?.type || "identity_card").name.fr || '',
               step: state.currentComponentIndex + 1,
               totalSteps: state.template.components.length,
+              side: currentSide,
             }}
           />
           }
@@ -482,6 +523,15 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                     }}
                   />
                 ) : null}
+                {silentCaptureResult.path ? (<Image
+                  source={{ uri: silentCaptureResult.path }}
+                  style={{
+                    width: '100%',
+                    height: 200,
+                    borderRadius: 12,
+                    resizeMode: 'cover',
+                  }}
+                />) : null}
 
               </View>
               {/* retake button */}

package/src/components/KYCElements/ReviewSubmitTemplate.tsx

@@ -89,7 +89,7 @@ export const ReviewSubmitTemplate: React.FC<ReviewSubmitTemplateProps> = () => {
                     const colorStyle = o === 'center' ? styles.pink : o === 'right' ? styles.blue : styles.purple;
                     return (
                       <View key={o} style={[styles.tile, colorStyle, has ? styles.active : null]}>
-                        <Text style={styles.tileLabel}>{o.charAt(0).toUpperCase() + o.slice(1)}</Text>
+                        <Text style={styles.tileLabel}>{t(`kyc.reviewSubmit.selfieSide.${o}`)}</Text>
                         {has ? <Text style={styles.check}>✓</Text> : null}
                       </View>
                     );

package/src/components/KYCElements/SelfieCaptureTemplate.tsx

@@ -253,6 +253,7 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
               selectedDocumentType: "Selfie",
               step: state.currentComponentIndex + 1,
               totalSteps: state.template.components.length,
+              side: currentOrientation,
             }} />}
         />
       </View>

package/src/components/KYCElements/VerificationProgressTemplate.tsx

@@ -4,6 +4,7 @@ import { TemplateComponent } from '../../types/KYC.types';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
 import kycService from '../../modules/api/KYCService';
+import { logger } from '../../utils/logger';
 
 interface VerificationProgressTemplateProps {
   component: TemplateComponent;
@@ -28,12 +29,12 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
   // Fonction pour récupérer le résultat de vérification avec retry
   const getVerificationResult = async (currentRetryCount = 0, maxRetries = 40) => {
     try {
-      console.log(`Starting verification check (attempt ${currentRetryCount + 1}/${maxRetries + 1})`);
+      logger.log(`Starting verification check (attempt ${currentRetryCount + 1}/${maxRetries + 1})`);
       
       const result = await kycService.getVerificationResult(state.session.session_id);
       const verificationResult = result[state.session.session_id].data;
 
-      console.log('getVerificationResult result', JSON.stringify(result, null, 2));
+      logger.log('getVerificationResult result', JSON.stringify(result, null, 2));
 
       // Vérifier le statut de vérification
       if (verificationResult.verification_status === null || verificationResult.verification_status === "processing" || verificationResult.verification_status === "pending") {
@@ -42,7 +43,7 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
           setRetryCount(nextRetryCount);
           setIsRetrying(true);
           
-          console.log(`Verification still processing, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
+          logger.log(`Verification still processing, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
 
           // Nettoyer le timeout précédent s'il existe
           if (timeoutId) {
@@ -57,7 +58,7 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
           setTimeoutId(newTimeoutId);
           return; // Sortir de la fonction pour éviter de traiter le résultat
         } else {
-          console.error('Max retries reached, verification still processing');
+          logger.error('Max retries reached, verification still processing');
           setIsRetrying(false);
           return;
         }
@@ -86,7 +87,7 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
       setIsRetrying(false);
 
     } catch (error) {
-      console.error('getVerificationResult error', error);
+      logger.error('getVerificationResult error', error);
 
       // En cas d'erreur, on peut aussi retry
       if (currentRetryCount < maxRetries) {
@@ -94,7 +95,7 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
         setRetryCount(nextRetryCount);
         setIsRetrying(true);
         
-        console.log(`Error occurred, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
+        logger.log(`Error occurred, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
         
         // Nettoyer le timeout précédent s'il existe
         if (timeoutId) {
@@ -108,7 +109,7 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
         setTimeoutId(newTimeoutId);
       } else {
         setIsRetrying(false);
-        console.error('Max retries reached after errors');
+        logger.error('Max retries reached after errors');
       }
     }
   };
@@ -155,7 +156,7 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
           ))}
         </View>
         <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.goToComponent(state.template.components.find(c => c.type !== 'review_submit' && c.type !== 'verification_progress')?.id || 0)}>
-          <Text style={styles.buttonText}>{t('common.retry')}</Text>
+          <Text style={styles.buttonText}>{t('kyc.verificationProgress.status.retry')}</Text>
         </TouchableOpacity>
         <TouchableOpacity style={[styles.button, styles.secondary]}>
           <Text style={styles.secondaryText}>{t('common.info')}</Text>
@@ -178,7 +179,7 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
       <Text style={styles.title}>{t('kyc.verificationProgress.title')}</Text>
       <Text style={styles.subtitle}>
         {isRetrying
-          ? `${t('kyc.verificationProgress.retrying')} (${retryCount}/10)`
+          ? `${t('kyc.verificationProgress.retrying', { current: retryCount, max: 40 })}`
           : t('kyc.verificationProgress.estimatedTime')
         }
       </Text>

package/src/components/OverLay/IdCard.tsx

@@ -141,14 +141,14 @@ const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax
 
             <View style={styles.bottomIntruction}>
                 <Text style={styles.bottomTitle}>
-                    {language === "en" ? "Measure 100cm in height.":"Mesurez 100cm de hauteur."}
+                    {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" 
-                          ? "Do not move the camera during capture. • Do not move the camera during capture."
-                          : "Ne pas déplacer la caméra pendant la capture. • Ne pas déplacer la caméra pendant la capture."
+                          ? "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>

package/src/components/OverLay/StepOverlay.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
+import useI18n from "../../hooks/useI18n";
 
 interface StepOverlayProps {
     back: () => void;
@@ -7,6 +8,7 @@ interface StepOverlayProps {
     totalSteps: number;
 }
 const StepOverlay = ({ back, selectedDocumentType, step, totalSteps }: StepOverlayProps) => {
+    const { t } = useI18n();
     return (
         <View style={styles.stepperContainer}>
             <TouchableOpacity onPress={back} style={styles.back}>
@@ -16,7 +18,7 @@ const StepOverlay = ({ back, selectedDocumentType, step, totalSteps }: StepOverl
                 <Text style={styles.stepperItemText}>{selectedDocumentType}</Text>
             </View>
             <View style={styles.stepperDetails}>
-                <Text style={styles.stepperDetailsText}>Step {step} of {totalSteps}</Text>
+                <Text style={styles.stepperDetailsText}>{t('kyc.step', { current: step, total: totalSteps })}</Text>
             </View>
         </View>
     )

package/src/components/OverLay/type.ts

@@ -15,7 +15,7 @@ export interface IdCardOverlayProps {
     orientation?: 'center' | 'left' | 'right';
     isAnalyzing?: boolean;
     isSuccess?: boolean;
-    language:string
+    language: string
 }
 
 
@@ -24,6 +24,7 @@ interface StepperProps {
     selectedDocumentType: string;
     step: number;
     totalSteps: number;
+    side: string;
 }
 
 export interface ExtractMrzTextResponse {
@@ -65,13 +66,13 @@ export interface EnhancedCameraViewProps {
     showSwitchCamera?: boolean;
     overlayComponent?: React.ReactNode;
     bbox?: {
-      xMin: number;
-      yMin: number;
-      xMax: number;
-      yMax: number;
-      borderColor?: string;
-      borderWidth?: number;
-      cornerRadius?: number;
+        xMin: number;
+        yMin: number;
+        xMax: number;
+        yMax: number;
+        borderColor?: string;
+        borderWidth?: number;
+        cornerRadius?: number;
     };
     canFlip?: boolean;
     // Video recording props
@@ -80,4 +81,9 @@ export interface EnhancedCameraViewProps {
     onVideoRecordingStart?: () => void;
     onVideoRecordingStop?: (result: { success: boolean; path?: string; error?: string }) => void;
     videoDuration?: number;
-  }
+}
+
+export interface CheckTemplateTypeResponse {
+    template_path: string;
+    lpips_score: number;
+}

package/src/components/TemplateKYCExample.tsx

@@ -56,8 +56,8 @@ const advancedVerificationTemplate: KYCTemplate = {
         buttonText: { en: "Confirm", fr: "Confirmer" }
       },
       config: {
-        allowed_countries: ["CA", "FR", "CM", "US", "DE", "SN", "NG", "MA", "DZ","CI", "KE","GH"],
-        default_country: "CA",
+        allowed_countries: ["CM", "NG", "CI", "KE","GH"],
+        default_country: "CM",
         required: true
       } as const
     },

package/src/config/countriesData.ts

@@ -81,4 +81,5 @@ export const countryData: Record<string, Country> = {
     IS: { name: 'Islande', name_en: "Iceland", flag: '🇮🇸' },
     IE: { name: 'Irlande', name_en: "Ireland", flag: '🇮🇪' },
     NZ: { name: 'Nouvelle-Zélande', name_en: "New Zealand", flag: '🇳🇿' },
+    GH: { name: 'Ghana', name_en: "Ghana", flag: '🇬🇭' },
 };