@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/src/components/KYCElements/WelcomeTemplate.tsx

@@ -0,0 +1,289 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { TemplateComponent, WelcomeConfig, LocalizedText } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+import ShieldIcon from '../Svgs/Schield';
+
+interface WelcomeTemplateProps {
+  component: TemplateComponent;
+  value?: any;
+  onValueChange: (data: any) => void;
+  error?: string;
+  language?: string;
+}
+
+export const WelcomeTemplate: React.FC<WelcomeTemplateProps> = ({
+  component,
+  value,
+  onValueChange,
+  error,
+}) => {
+  const { t } = useI18n();
+  const { getLocalizedText, actions } = useTemplateKYCFlowContext();
+  const config = component.config as WelcomeConfig;
+
+  // Consentements cochés par défaut
+  const privacyConsent = true;
+  const termsConsent = true;
+  const [shouldProceed, setShouldProceed] = useState(false);
+
+  // Get localized text
+  const title = getLocalizedText(component.labels as LocalizedText);
+  const description = getLocalizedText(component.instructions as LocalizedText);
+  const welcomeMessage = config.welcomeMessage || description;
+  const buttonText = config.buttonText || getLocalizedText((component.ui as any).buttonText || { en: 'Get Started', fr: 'Commencer' });
+
+  // Passer à l'étape suivante après que les données sont mises à jour
+  useEffect(() => {
+    if (shouldProceed && value && value.consentGiven) {
+      // Petit délai pour s'assurer que le state est bien mis à jour
+      const timer = setTimeout(() => {
+        actions.nextComponent();
+        setShouldProceed(false);
+      }, 100);
+
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [value, shouldProceed, actions]);
+
+  const handleGetStarted = () => {
+    // Mark component as complete
+    const consentData = { consentGiven: true, privacyConsent, termsConsent };
+    onValueChange(consentData);
+    setShouldProceed(true);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+        {/* Icon Section */}
+        <View style={{ position: 'relative', width: 70 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: 60, height: 60, backgroundColor: '#2DBE60', borderRadius: 100 }}>
+            <ShieldIcon />
+          </View>
+          <View style={{ position: 'absolute', top: '60%', right: 0, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, backgroundColor: 'white', borderRadius: 100, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, shadowRadius: 1.84, elevation: 5 }}>
+            <Text style={{ fontSize: 20, color: '#2DBE60' }}>✓</Text>
+          </View>
+        </View>
+
+        {/* Title and Description */}
+        <View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', marginTop: 36 }}>
+          <Text style={styles.title}>{title}</Text>
+          {welcomeMessage && (
+            <Text style={styles.description}>
+              {welcomeMessage}
+            </Text>
+          )}
+        </View>
+
+        {/* Requirements List */}
+        {config.requirements && config.requirements.length > 0 && (
+          <View style={styles.requirementsSection}>
+            <Text style={styles.sectionTitle}>
+              {t('kyc.welcome.requirements') || `What you'll need:`}
+            </Text>
+            {config.requirements.map((requirement, index) => (
+              <View key={index} style={styles.requirementItem}>
+                <Text style={styles.checkmark}>✓</Text>
+                <Text style={styles.requirementText}>{requirement}</Text>
+              </View>
+            ))}
+          </View>
+        )}
+
+        {/* Estimated Time */}
+        {config.showEstimatedTime !== false && config.estimatedTime && (
+          <View style={styles.timeSection}>
+            <Text style={styles.timeLabel}>
+              {t('kyc.welcome.estimatedTime') || 'Estimated time:'}
+            </Text>
+            <Text style={styles.timeValue}>{config.estimatedTime}</Text>
+          </View>
+        )}
+
+        {/* Consent Options - Hidden by default as they're pre-checked */}
+        {(config.consentOptions?.showPrivacyPolicy || config.consentOptions?.showTermsOfService || config.consentOptions?.showMarketingConsent) && (
+          <View style={styles.consentSection}>
+            {config.consentOptions.showPrivacyPolicy && (
+              <View style={styles.consentItem}>
+                <View style={[styles.checkbox, styles.checkboxChecked]}>
+                  <Text style={styles.checkmarkSmall}>✓</Text>
+                </View>
+                <Text style={styles.consentText}>
+                  {t('kyc.welcome.privacyPolicy') || 'I agree to the Privacy Policy'}
+                </Text>
+              </View>
+            )}
+
+            {config.consentOptions.showTermsOfService && (
+              <View style={styles.consentItem}>
+                <View style={[styles.checkbox, styles.checkboxChecked]}>
+                  <Text style={styles.checkmarkSmall}>✓</Text>
+                </View>
+                <Text style={styles.consentText}>
+                  {t('kyc.welcome.termsOfService') || 'I agree to the Terms of Service'}
+                </Text>
+              </View>
+            )}
+
+            {config.consentOptions.showMarketingConsent && (
+              <View style={styles.consentItem}>
+                <View style={[styles.checkbox, styles.checkboxChecked]}>
+                  <Text style={styles.checkmarkSmall}>✓</Text>
+                </View>
+                <Text style={styles.consentText}>
+                  {t('kyc.welcome.marketingConsent') || 'I agree to receive marketing communications'}
+                </Text>
+              </View>
+            )}
+          </View>
+        )}
+
+        {error && (
+          <View style={styles.errorContainer}>
+            <Text style={styles.errorText}>{error}</Text>
+          </View>
+        )}
+
+        {/* Get Started Button */}
+        <Button
+          title={buttonText}
+          fullWidth
+          onPress={handleGetStarted}
+          style={{ paddingVertical: 20, marginTop: 36 }}
+        />
+
+        <View style={{ height: 12 }} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    backgroundColor: 'white',
+    marginHorizontal: 12,
+    marginTop: 12,
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 1.84,
+    elevation: 3,
+    maxWidth: 760,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  requirementsSection: {
+    backgroundColor: '#F9FAFB',
+    padding: 12,
+    borderRadius: 12,
+    width: '100%',
+    marginTop: 24,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: 'black',
+    marginBottom: 12,
+    textAlign: 'left',
+  },
+  requirementItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  checkmark: {
+    fontSize: 18,
+    color: '#2DBD60',
+    marginRight: 12,
+    fontWeight: 'bold',
+  },
+  requirementText: {
+    flex: 1,
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'left',
+    lineHeight: 22,
+  },
+  timeSection: {
+    backgroundColor: '#F9FAFB',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 16,
+    alignItems: 'center',
+    width: '100%',
+  },
+  timeLabel: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 4,
+  },
+  timeValue: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#2DBD60',
+  },
+  consentSection: {
+    width: '100%',
+    marginTop: 24,
+  },
+  consentItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  checkbox: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderColor: '#ddd',
+    borderRadius: 4,
+    marginRight: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkboxChecked: {
+    backgroundColor: '#2DBD60',
+    borderColor: '#2DBD60',
+  },
+  checkmarkSmall: {
+    fontSize: 14,
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  consentText: {
+    flex: 1,
+    fontSize: 15,
+    color: '#333',
+    lineHeight: 22,
+  },
+  errorContainer: {
+    backgroundColor: '#fee',
+    padding: 12,
+    borderRadius: 8,
+    marginTop: 16,
+    width: '100%',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    textAlign: 'center',
+  },
+});

package/src/components/TemplateKYCExample.tsx

@@ -2,8 +2,11 @@ import React from 'react';
 import { View, SafeAreaView } from 'react-native';
 import { TemplateKYCFlow } from './TemplateKYCFlowRefactored';
 import { KYCTemplate, VerificationState } from '../types/KYC.types';
+import { KycEnvironment } from '../types/env.types';
+
+
+
 
-// Template JSON basé sur votre exemple
 const advancedVerificationTemplate: KYCTemplate = {
   id: 1,
   name: {
@@ -103,74 +106,7 @@ const advancedVerificationTemplate: KYCTemplate = {
         allowed_formats: ["jpg", "png"],
         max_size_mb: 5,
         document_types: ["drivers_licence", "passport", "drivers_licence", "national_id"],
-        bbox_configs: {
-          drivers_licence: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          passport: {
-            xMin: 15,
-            yMin: 130,
-            xMax: 375,
-            yMax: 350,
-            borderColor: "#007AFF",
-            borderWidth: 4,
-            cornerRadius: 8
-          },
-          identity_card: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          health_insurance_card: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          national_id: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#5856D6",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          permanent_residence: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-
 
-          work_permit: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-
-        }
       } as const
     },
     {
@@ -197,34 +133,21 @@ const advancedVerificationTemplate: KYCTemplate = {
         orientations: ["center", "left", "right"]
       } as const
     },
-    // {
-    //   id: 4,
-    //   type: "file_upload" as const,
-    //   order: 6,
-    //   labels: {
-    //     en: "Upload proof of address",
-    //     fr: "Téléversez un justificatif de domicile"
-    //   },
-    //   instructions: {
-    //     en: "Upload a recent utility bill or bank statement (PDF, JPG, PNG).",
-    //     fr: "Téléversez une facture récente ou un relevé bancaire (PDF, JPG, PNG)."
-    //   },
-    //   ui: {
-    //     icon: "file-upload-icon.png",
-    //     themeColor: "#2DBD60",
-    //     buttonText: { en: "Upload", fr: "Téléverser" }
-    //   },
-    //   config: {
-    //     allowed_formats: ["pdf", "jpg", "png"],
-    //     max_size_mb: 10,
-    //     required: true
-    //   } as const
-    // },
-
   ]
 };
 
-export const TemplateKYCExample: React.FC<{ onComplete: (data: VerificationState) => void, onCancel: () => void, onError: (error: string) => void, language: string, API_KEY: string|undefined }> = ({ onComplete, onCancel, onError, language, API_KEY }) => {
+export const TemplateKYCExample: React.FC<{
+  onComplete: (data: VerificationState) => void;
+  onCancel: () => void;
+  onError: (error: string) => void;
+  language: string;
+  API_KEY?: string;
+  templateId?: string;
+  template?: KYCTemplate;
+  env?: KycEnvironment;
+  existingSessionId?: string;
+  initialStep?: number;
+}> = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template, env = 'PRODUCTION', existingSessionId, initialStep }) => {
   const handleComplete = (data: VerificationState) => {
     console.log('KYC Template completed with data:', data);
     onComplete(data);
@@ -238,24 +161,30 @@ export const TemplateKYCExample: React.FC<{ onComplete: (data: VerificationState
 
   const handleError = (error: string) => {
     console.error('KYC Template error:', error);
-    // Gérer l'erreur
+    onError(error);
   };
-  // console.log('API_KEY', API_KEY);
+
+  // Transform backend template to SDK format
+  // Determine which template to use: prefer templateId for dynamic loading, then template prop, then fallback to hardcoded
+  const templateToUse = templateId ? undefined : (template || advancedVerificationTemplate);
 
   return (
-    <SafeAreaView style={{ flex: 1 , paddingVertical:25}}>
-    <View style={{ flex: 1 }}>
-      <TemplateKYCFlow
-        template={advancedVerificationTemplate}
-        onComplete={handleComplete}
-        onError={handleError}
-        onCancel={handleCancel}
-        language={language} // ou "en" pour l'anglais
-        API_KEY={API_KEY}
-      />
-    </View>
-  </SafeAreaView>
+    <SafeAreaView style={{ flex: 1, paddingVertical: 25 }}>
+      <View style={{ flex: 1 }}>
+        <TemplateKYCFlow
+          template={templateToUse}
+          templateId={templateId}
+          onComplete={handleComplete}
+          onError={handleError}
+          onCancel={handleCancel}
+          language={language} // ou "en" pour l'anglais
+          API_KEY={API_KEY}
+          env={env}
+          existingSessionId={existingSessionId}
+          initialStep={initialStep}
+        />
+      </View>
+    </SafeAreaView>
   );
 };
 
-