@sanctum-key/react-native-sdk 1.0.0

package/src/components/KYCElements/SelfieCaptureTemplate.tsx

@@ -0,0 +1,662 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
+import { TemplateComponent, LocalizedText, ISilentCaptureResult, OrientationType, GovernmentDocumentType } from '../../types/KYC.types';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+import { Button } from '../ui/Button';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import SelfieOverlay from '../OverLay/SelfieOverlay';
+import selfieVerification from '../../modules/api/SelfieVerification';
+import pathToBase64 from '../../utils/pathToBase64';
+import { truncateFields } from '../../modules/api/KYCService';
+
+interface IImagePayload {
+  dir: string;
+  file: string;
+}
+interface SelfieCaptureTemplateProps {
+  component: TemplateComponent;
+  value: Record<string, IImagePayload> | undefined;
+  onValueChange: (value: Record<string, IImagePayload | string>) => void;
+  error?: string;
+  language: string;
+}
+
+export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
+  component,
+  value,
+  onValueChange,
+  error,
+  language,
+}) => {
+  const { t } = useI18n();
+  // const config = component.config as SelfieConfig;
+  const orientations: OrientationType[] = (['center','left','right']) as OrientationType[];
+  const { actions, state, env } = useTemplateKYCFlowContext();
+
+  const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
+
+  const [showCamera, setShowCamera] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+  const [previewImagePath, setPreviewImagePath] = useState<string | null>(null);
+  const [currentOrientation, setCurrentOrientation] = useState<OrientationType>(orientations[0]);
+  const [capturedImages, setCapturedImages] = useState<Record<string, IImagePayload>>(value || {});
+
+  const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => {
+    if (!text) return '';
+    // If text is a nested record (e.g., per theme/device), try to pick a default then localize
+    const maybeNested = text as Record<string, LocalizedText>;
+    if (maybeNested && typeof maybeNested === 'object' && 'en' in maybeNested === false && 'fr' in maybeNested === false) {
+      const firstKey = Object.keys(maybeNested)[0];
+      const nested = maybeNested[firstKey] as LocalizedText;
+      return nested?.[language] || nested?.en || '';
+    }
+    const loc = text as LocalizedText;
+    return loc[language] || loc.en || '';
+  };
+
+  const getOrientationInstructions = (orientation: OrientationType): string => {
+    switch (orientation) {
+      case 'center':
+        return state.currentLanguage === "en" ? "Take a selfie of face, look straight ahead you" : "Prenez un selfie de face, regardez droit devant vous";
+      case 'left':
+        return state.currentLanguage === "en" ? "Turn your head to the left, keep your shoulders straight" : "Tournez votre tête vers la gauche, gardez les épaules droites";
+      case 'right':
+        return state.currentLanguage === "en" ? "Turn your head to the right, keep your shoulders straight" : "Tournez votre tête vers la droite, gardez les épaules droites";
+      default:
+        return getLocalizedText(component.instructions as LocalizedText);
+    }
+  };
+
+  useEffect(() => {
+    actions.showCustomStepper(!showCamera);
+  }, [showCamera]);
+
+  const getOrientationLabel = (orientation: OrientationType): string => {
+    switch (orientation) {
+      case 'center':
+        return state.currentLanguage === "en" ? "Front Profile Selfie" : "Selfie de face";
+      case 'left':
+        return state.currentLanguage === "en" ? "Left Profile Selfie" : "Selfie profil gauche";
+      case 'right':
+        return state.currentLanguage === "en" ? "Right Profile Selfie" : "Selfie profil droit";
+      default:
+        return getLocalizedText(component.labels as LocalizedText);
+    }
+  };
+  const getOrientationOpposite = (orientation: OrientationType): OrientationType => {
+    switch (orientation) {
+      case 'center':
+        return 'center';
+      case 'left':
+        return 'left';
+      case 'right':
+        return 'right';
+      default:
+        return orientation;
+    }
+  }
+  // const countryData = useMemo(() => {
+  //   const geCountryID = Object.keys(state.componentData).find((c: string) => c === "6");
+
+  //   if (geCountryID) {
+  //     const countryMapping = state.componentData[geCountryID];
+  //     return countryMapping?.code;
+  //   }
+  //   return null;
+  // }, [state.componentData]);
+
+  const getInstructions = (orientation: OrientationType): { title: string, subtitle: string } => {
+    const lang = state.currentLanguage;
+    switch (orientation) {
+      case 'center':
+        return {
+          title:
+
+            lang === "en" ? 'Center your face' : 'Mettez votre face au centre',
+          subtitle: lang === "en"
+            ? 'Align your face to the center of the selfie area and then take a photo'
+            : 'Alignez votre visage au centre de la zone selfie puis prenez une photo'
+        };
+      case 'left':
+        return {
+          title:
+            lang === 'en'
+              ? 'Turn your head left'
+              : 'Tournez la tête vers la gauche',
+          subtitle:
+            lang === 'en'
+              ? 'Slowly turn your head to the left while keeping your face in the selfie area'
+              : 'Tournez lentement la tête vers la gauche en gardant votre visage dans la zone selfie'
+        };
+      case 'right':
+        return {
+          title:
+            lang === 'en'
+              ? 'Turn your head right'
+              : 'Tournez la tête vers la droite',
+          subtitle:
+            lang === 'en'
+              ? 'Slowly turn your head to the right while keeping your face in the selfie area'
+              : 'Tournez lentement la tête vers la droite en gardant votre visage dans la zone selfie'
+        };
+      default:
+        return { title: getLocalizedText(component.labels as LocalizedText), subtitle: getLocalizedText(component.instructions as LocalizedText) };
+    }
+  };
+
+  const handleSilentCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    if (silentCaptureResult.isAnalyzing) {
+      return;
+    }
+    if (result.success && result.path) {
+      setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
+      selfieVerification(result.path, env).then((response) => {
+        if (response.length > 0) {
+          const res = response[0];
+          // In SANDBOX mode, always accept the result regardless of orientation
+          if (env === 'SANDBOX' && res?.capture) {
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path }));
+          } else if (res?.orientation_direction === getOrientationOpposite(currentOrientation) && res?.capture) {
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path }));
+          } else {
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Le selfie n\'est pas correct' }));
+          }
+        } else {
+          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Le selfie n\'est pas correct' }));
+        }
+      }).catch((e: any) => {
+        setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: e?.message || 'Erreur de vérification du selfie' }));
+      });
+    }
+  }
+
+  // Capture manuelle - affiche le preview
+  const handleCapture = async (result: { success: boolean; path?: string; error?: string }) => {
+    console.log("handleCapture called", result, silentCaptureResult);
+
+    // Priorité 1: Si la capture silencieuse a réussi, utiliser ce path
+    if (silentCaptureResult.success && silentCaptureResult.path) {
+      setPreviewImagePath(silentCaptureResult.path);
+      setShowCamera(false);
+      setShowPreview(true);
+      return;
+    }
+
+    // Priorité 2: Capture manuelle normale
+    if (result.success && result.path) {
+      setPreviewImagePath(result.path);
+      setShowCamera(false);
+      setShowPreview(true);
+    }
+  };
+
+  // Confirmer la capture depuis le preview
+  const handleConfirmCapture = async () => {
+    if (!previewImagePath) return;
+
+    try {
+      const base64 = await pathToBase64(previewImagePath);
+      const newImages: Record<string, any> = {
+        ...capturedImages,
+        [currentOrientation]: { dir: previewImagePath, file: base64 } as IImagePayload,
+      };
+      setCapturedImages(newImages);
+      onValueChange(newImages);
+      setShowPreview(false);
+      setPreviewImagePath(null);
+      setSilentCaptureResult({ success: false, isAnalyzing: false });
+
+      // Passer à l'orientation suivante si disponible
+      const currentIndex = orientations.indexOf(currentOrientation as OrientationType);
+      if (currentIndex < orientations.length - 1) {
+        const nextOrientation = orientations[currentIndex + 1];
+        setCurrentOrientation(nextOrientation);
+        // Rouvrir automatiquement la caméra pour la prochaine orientation
+        setShowCamera(true);
+      }
+      // Si toutes les orientations sont complétées, on reste sur la vue principale
+    } catch (e) {
+      console.error("Error confirming capture", e);
+      showAlert('Erreur', 'Erreur lors de la sauvegarde de l\'image');
+    }
+  };
+
+  // Reprendre la photo depuis le preview
+  const handleRetakeFromPreview = () => {
+    setShowPreview(false);
+    setPreviewImagePath(null);
+    setSilentCaptureResult({ success: false, isAnalyzing: false });
+    setShowCamera(true);
+  };
+  const idCardData = useMemo(() => {
+    const idCardID = Object.keys(state.componentData).find((c: string) => c === "1");
+    if (idCardID) {
+      const _idCardData = state.componentData[idCardID];
+      const documentType = _idCardData?.documentType;
+      // Map national_id to identity_card for selfie capture
+      const mappedDocumentType = documentType === 'national_id' ? 'identity_card' : documentType;
+      return {
+        country: _idCardData?.country,
+        documentType: mappedDocumentType as GovernmentDocumentType
+      };
+    }
+    return null;
+  }, [state.componentData]);
+  console.log("idCardData", truncateFields(idCardData), JSON.stringify(truncateFields(state.componentData), null, 2));
+
+
+  const handleError = (event: { message: string }) => {
+    showAlert('Erreur', event.message);
+    setShowCamera(false);
+  };
+
+
+  const isOrientationCompleted = (orientation: OrientationType): boolean => {
+    return !!capturedImages[orientation];
+  };
+
+  const isAllOrientationsCompleted = (): boolean => {
+    return orientations.every(orientation => isOrientationCompleted(orientation));
+  };
+  console.log("Current Orientation", currentOrientation);
+
+  // Vue Preview
+  if (showPreview && previewImagePath) {
+    return (
+      <View style={styles.containerCamera}>
+        <View style={styles.previewContainer}>
+          <View style={styles.previewHeader}>
+            <TouchableOpacity onPress={handleRetakeFromPreview} style={styles.backButton}>
+              <Text style={styles.backButtonText}>←</Text>
+            </TouchableOpacity>
+            <Text style={styles.previewTitle}>
+              {state.currentLanguage === "en" ? "Preview" : "Aperçu"}
+            </Text>
+            <View style={{ width: 40 }} />
+          </View>
+
+          <View style={styles.previewImageContainer}>
+            <Image
+              source={{ uri: previewImagePath }}
+              style={styles.previewImage}
+              resizeMode="contain"
+            />
+          </View>
+
+          <Text style={styles.previewInstructions}>
+            {state.currentLanguage === "en"
+              ? "Is your face clearly visible?"
+              : "Votre visage est-il clairement visible ?"}
+          </Text>
+
+          <View style={styles.previewButtonsContainer}>
+            <TouchableOpacity
+              style={styles.retakeButton}
+              onPress={handleRetakeFromPreview}
+            >
+              <Text style={styles.retakeButtonText}>
+                {state.currentLanguage === "en" ? "Retake" : "Reprendre"}
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.confirmButton}
+              onPress={handleConfirmCapture}
+            >
+              <Text style={styles.confirmButtonText}>
+                {state.currentLanguage === "en" ? "Use Photo" : "Utiliser"}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  // Vue Camera
+  if (showCamera) {
+    return (
+      <View style={styles.containerCamera}>
+        <EnhancedCameraView
+          instructions={getOrientationInstructions(currentOrientation)}
+          showCamera={true}
+          cameraType="front"
+          style={styles.camera}
+          onCapture={handleCapture}
+          onError={handleError}
+          onClose={() => setShowCamera(false)}
+          quality="high"
+          showCaptureButton={true}
+          showSwitchCamera={false}
+          enableFlash={false}
+          silentCaptureResult={silentCaptureResult}
+          onSilentCapture={handleSilentCapture}
+          overlayComponent={<SelfieOverlay
+            xMin={20}
+            yMin={140}
+            xMax={370}
+            yMax={340}
+            cornerOpacity={1}
+            instructions={""}
+            language={state.currentLanguage}
+            orientation={currentOrientation as 'center' | 'left' | 'right'}
+            instructionsTile={getInstructions(currentOrientation).title}
+            instructionsSubtitle={getInstructions(currentOrientation).subtitle}
+            stepperProps={{
+              back: () => {
+                setShowCamera(false);
+              },
+              selectedDocumentType: "Selfie",
+              step: state.currentComponentIndex + 1,
+              totalSteps: state.template.components.length,
+              side: currentOrientation,
+            }} />}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[{
+      maxWidth: 760,
+      width: '100%',
+      height: '100%',
+    }]}>
+      <View style={styles.container}>
+        <Text style={styles.title}>{getLocalizedText(component.labels as LocalizedText)}</Text>
+        <Text style={styles.description}>{getLocalizedText(component.instructions as LocalizedText)}</Text>
+
+        <ScrollView style={styles.orientationsContainer} showsVerticalScrollIndicator={false}>
+          <View style={{ flexDirection: 'column', alignItems: 'center', gap: 10 }}>
+
+            {orientations.map((orientation, key) => (
+              <View key={orientation} style={{
+                backgroundColor: '#F3F4F6',
+                borderRadius: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                width: '100%',
+                paddingVertical: 10,
+                paddingHorizontal: 10,
+              }}>
+                <View style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backgroundColor: isOrientationCompleted(orientation) ? '#2DBE60' : '#D1D5DB',
+                  borderRadius: 100,
+                  width: 30,
+                  height: 30,
+                }}>
+                  <Text style={{ color: 'white', fontSize: 16, fontWeight: 'bold' }}>{key + 1}</Text>
+                </View>
+
+
+                <Text style={styles.orientationTitle}>
+                  {getOrientationLabel(orientation)}
+                </Text>
+
+
+
+              </View>
+            ))}
+            <View style={{ backgroundColor: "#F6CB0D1A", width: "100%", padding: 10, borderRadius: 10 }} >
+              <Text style={{ color: '#997E06', fontSize: 16, fontWeight: 'bold' }}>
+                {state.currentLanguage === "en"
+                  ? "Tips for a good selfie:"
+                  : "Conseils pour une bonne photo selfie :"}
+              </Text>
+              <View style={{ paddingLeft: 10, paddingTop: 4 }}>
+                <Text style={{ color: '#997E06', fontSize: 14, fontWeight: 'bold' }}>
+                  {state.currentLanguage === "en"
+                    ? `• Remove glasses and hat \n• Look directly at the camera \n• Ensure good lighting \n`
+                    : `• Retirez vos lunettes et votre chapeau \n• Regardez directement la caméra \n• Assurez-vous d'une bonne luminosité \n`
+                  }
+                </Text>
+              </View>
+            </View>
+            <View style={{ height: 10 }} />
+            {isAllOrientationsCompleted() ? <>
+              <Button title={t('common.continue')} fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={async () => {
+                const value = {
+                  ...capturedImages,
+                  ...(idCardData?.country ? { country: idCardData.country } : {}),
+                  ...(idCardData?.documentType ? { documentType: idCardData.documentType } : {}),
+                }
+                console.log("value", JSON.stringify(truncateFields(value), null, 2));
+                onValueChange(value);
+                actions.nextComponent();
+              }} />
+            </> : (
+              <Button title={t('kyc.selfieCapture.captureButton')} fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={() => {
+                if (isAllOrientationsCompleted()) {
+
+                  actions.nextComponent();
+                } else {
+                  setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: '' }));
+                  setShowCamera(true);
+                }
+              }} />
+            )}
+
+          </View>
+        </ScrollView>
+
+        {error && (
+          <Text style={styles.errorText}>{error}</Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    paddingVertical: 10,
+  },
+  container: {
+    backgroundColor: 'white',
+    margin: 15,
+    borderRadius: 20,
+    paddingVertical: 20,
+    paddingHorizontal: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.35,
+    shadowRadius: 4.84,
+    elevation: 10,
+  },
+  containerCamera: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#000',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 20,
+    lineHeight: 22,
+    textAlign: 'center',
+  },
+  camera: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  attemptsText: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+  orientationsContainer: {
+  },
+  orientationContainer: {
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  orientationTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+  },
+  capturedImageContainer: {
+    alignItems: 'center',
+  },
+  capturedImage: {
+    width: 200,
+    height: 200,
+    borderRadius: 12,
+    marginBottom: 12,
+  },
+  captureButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#2DBD60',
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    marginTop: 8,
+  },
+  captureIcon: {
+    fontSize: 24,
+    marginRight: 8,
+  },
+  captureText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: 'white',
+  },
+  // Preview styles
+  previewContainer: {
+    flex: 1,
+    backgroundColor: '#000',
+    justifyContent: 'space-between',
+  },
+  previewHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingTop: 50,
+    paddingBottom: 16,
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backButtonText: {
+    color: 'white',
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  previewTitle: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  previewImageContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  previewImage: {
+    width: '100%',
+    height: '80%',
+    borderRadius: 16,
+  },
+  previewInstructions: {
+    color: 'white',
+    fontSize: 16,
+    textAlign: 'center',
+    paddingHorizontal: 20,
+    marginBottom: 20,
+  },
+  previewButtonsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingBottom: 40,
+    gap: 16,
+  },
+  retakeButton: {
+    flex: 1,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    alignItems: 'center',
+  },
+  retakeButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: 'white',
+  },
+  confirmButton: {
+    flex: 1,
+    backgroundColor: '#2DBD60',
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    alignItems: 'center',
+  },
+  confirmButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: 'white',
+  },
+  completionContainer: {
+    alignItems: 'center',
+    padding: 20,
+  },
+  completionText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#2DBD60',
+    marginBottom: 16,
+  },
+  retakeAllButton: {
+    backgroundColor: '#FF6B6B',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+  },
+  retakeAllButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: 'white',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    textAlign: 'center',
+    marginTop: 10,
+  },
+});