@transfergratis/react-native-sdk 0.1.22 → 0.1.24

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

@@ -103,74 +103,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
     },
     {
@@ -224,7 +157,15 @@ const advancedVerificationTemplate: KYCTemplate = {
   ]
 };
 
-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;
+}> = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template }) => {
   const handleComplete = (data: VerificationState) => {
     console.log('KYC Template completed with data:', data);
     onComplete(data);
@@ -238,14 +179,18 @@ export const TemplateKYCExample: React.FC<{ onComplete: (data: VerificationState
 
   const handleError = (error: string) => {
     console.error('KYC Template error:', error);
-    // Gérer l'erreur
+    onError(error);
   };
 
+  // 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}
+        template={templateToUse}
+        templateId={templateId}
         onComplete={handleComplete}
         onError={handleError}
         onCancel={handleCancel}

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, ActivityIndicator, Dimensions, Alert } from 'react-native';
+import React, { useEffect } from 'react';
+import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, ActivityIndicator, Dimensions, ScrollView, Platform } from 'react-native';
 import { KYCTemplate, VerificationState } from '../types/KYC.types';
 import { TemplateKYCFlowProvider, useTemplateKYCFlowContext } from '../hooks/useTemplateKYCFlow';
 import { useI18n } from '../hooks/useI18n';
+import { showAlert } from '../utils/platformAlert';
 import { IDCardCapture } from './KYCElements/IDCardCapture';
 import { SelfieCaptureTemplate } from './KYCElements/SelfieCaptureTemplate';
 import { FileUploadTemplate } from './KYCElements/FileUploadTemplate';
@@ -11,18 +12,22 @@ import { CountrySelectionTemplate } from './KYCElements/CountrySelectionTemplate
 import { InitializationStep } from './KYCElements/InitializationStep';
 import { ReviewSubmitTemplate } from './KYCElements/ReviewSubmitTemplate';
 import { VerificationProgressTemplate } from './KYCElements/VerificationProgressTemplate';
+import { useTemplateLoader } from '../hooks/useTemplateLoader';
+import { WelcomeTemplate } from './KYCElements/WelcomeTemplate';
 
 interface TemplateKYCFlowProps {
-  template: KYCTemplate;
+  template?: KYCTemplate;        // Format SDK direct (existing, now optional)
+  templateId?: string;           // New: ID to load from API
   onComplete?: (data: VerificationState) => void;
   onError?: (error: string) => void;
   language?: string;
   onCancel?: () => void;
-  API_KEY?: string;
+  API_KEY?: string;              // Required if templateId is used
 }
 
 export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
-  template,
+  template: providedTemplate,
+  templateId,
   onComplete,
   onError,
   language = 'fr',
@@ -30,9 +35,33 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
   API_KEY,
 }) => {
   const { t } = useI18n();
+  const { template: loadedTemplate, isLoading, error, loadTemplate } = useTemplateLoader();
+
+  // Validate props
+  useEffect(() => {
+    if (!providedTemplate && !templateId) {
+      const errorMsg = 'Either template or templateId must be provided';
+      onError?.(errorMsg);
+      return;
+    }
+
+    if (templateId && !API_KEY) {
+      // Try to load without API key (will use token authentication)
+      loadTemplate(templateId);
+    } else if (templateId && API_KEY) {
+      loadTemplate(templateId, API_KEY);
+    }
+  }, [templateId, API_KEY, providedTemplate, loadTemplate, onError]);
+
+  // Handle loading errors
+  useEffect(() => {
+    if (error) {
+      onError?.(error);
+    }
+  }, [error, onError]);
 
   const OnCancel = () => {
-    Alert.alert(
+    showAlert(
       t('kyc.cancelConfirmation.title'),
       t('kyc.cancelConfirmation.message'),
       [
@@ -46,6 +75,46 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
       ]
     );
   };
+
+  // Determine which template to use
+  const template = providedTemplate || loadedTemplate;
+
+  // Show loading state while fetching template
+  if (templateId && isLoading && !template) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#2DBD60" />
+        <Text style={styles.loadingText}>{t('common.loading') || 'Loading template...'}</Text>
+      </View>
+    );
+  }
+
+  // Show error state if template failed to load
+  if (templateId && error && !template) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>{error}</Text>
+        <TouchableOpacity
+          style={styles.retryButton}
+          onPress={() => loadTemplate(templateId, API_KEY)}
+        >
+          <Text style={styles.retryButtonText}>{t('common.retry') || 'Retry'}</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  // Show error if no template available
+  if (!template) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>
+          {t('errors.unknownError') || 'Template not available'}
+        </Text>
+      </View>
+    );
+  }
+
   return (
     <TemplateKYCFlowProvider
       template={template}
@@ -97,6 +166,9 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
     }
 
     switch (currentComponent.type) {
+      case 'welcome':
+        return <WelcomeTemplate {...commonProps} />;
+
       case 'id_card':
         return <IDCardCapture {...commonProps} />;
 
@@ -166,9 +238,14 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
         ) : null}
 
         {/* Contenu principal */}
-        <View style={styles.content}>
+        <ScrollView 
+          style={styles.scrollView}
+          contentContainerStyle={styles.content}
+          showsVerticalScrollIndicator={Platform.OS === 'web'}
+          bounces={false}
+        >
           {renderCurrentComponent()}
-        </View>
+        </ScrollView>
 
         {state.isProcessing && (
           <View style={styles.processingContainer}>
@@ -253,11 +330,13 @@ const styles = StyleSheet.create({
     color: '#666',
     lineHeight: 20,
   },
-  content: {
+  scrollView: {
     flex: 1,
-    // justifyContent: 'center',
+  },
+  content: {
+    flexGrow: 1,
     alignItems: 'center',
-    // paddingTop: Dimensions.get('window').height > 760 ? 12 : 0,
+    paddingBottom: 20, // Add padding for better mobile scrolling
   },
   navigation: {
     flexDirection: 'row',
@@ -316,4 +395,35 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     marginBottom: 10,
   },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  loadingText: {
+    marginTop: 16,
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    padding: 20,
+  },
+  retryButton: {
+    marginTop: 20,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    backgroundColor: '#2DBD60',
+    borderRadius: 8,
+  },
+  retryButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });