@transfergratis/react-native-sdk 0.1.22 → 0.1.24

package/build/components/KYCElements/WelcomeTemplate.js

@@ -0,0 +1,243 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+import ShieldIcon from '../Svgs/Schield';
+export const WelcomeTemplate = ({ component, value, onValueChange, error, }) => {
+    const { t } = useI18n();
+    const { getLocalizedText, actions } = useTemplateKYCFlowContext();
+    const config = component.config;
+    // 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);
+    const description = getLocalizedText(component.instructions);
+    const welcomeMessage = config.welcomeMessage || description;
+    const buttonText = config.buttonText || getLocalizedText(component.ui.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',
+    },
+});
+//# sourceMappingURL=WelcomeTemplate.js.map

package/build/components/KYCElements/WelcomeTemplate.js.map

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

package/build/components/TemplateKYCExample.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import { VerificationState } from '../types/KYC.types';
+import { KYCTemplate, VerificationState } from '../types/KYC.types';
 export declare const TemplateKYCExample: React.FC<{
     onComplete: (data: VerificationState) => void;
     onCancel: () => void;
     onError: (error: string) => void;
     language: string;
-    API_KEY: string | undefined;
+    API_KEY?: string;
+    templateId?: string;
+    template?: KYCTemplate;
 }>;
 //# sourceMappingURL=TemplateKYCExample.d.ts.map

package/build/components/TemplateKYCExample.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateKYCExample.d.ts","sourceRoot":"","sources":["../../src/components/TemplateKYCExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAe,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AA+NpE,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,UAAU,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,GAAC,SAAS,CAAA;CAAE,CA+B/L,CAAC"}
+{"version":3,"file":"TemplateKYCExample.d.ts","sourceRoot":"","sources":["../../src/components/TemplateKYCExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AA4JpE,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,UAAU,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC;CACxB,CAmCA,CAAC"}

package/build/components/TemplateKYCExample.js

@@ -101,71 +101,6 @@ const advancedVerificationTemplate = {
                 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
-                    },
-                }
             }
         },
         {
@@ -217,7 +152,7 @@ const advancedVerificationTemplate = {
         // },
     ]
 };
-export const TemplateKYCExample = ({ onComplete, onCancel, onError, language, API_KEY }) => {
+export const TemplateKYCExample = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template }) => {
     const handleComplete = (data) => {
         console.log('KYC Template completed with data:', data);
         onComplete(data);
@@ -229,11 +164,13 @@ export const TemplateKYCExample = ({ onComplete, onCancel, onError, language, AP
     };
     const handleError = (error) => {
         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} onComplete={handleComplete} onError={handleError} onCancel={handleCancel} language={language} // ou "en" pour l'anglais
+      <TemplateKYCFlow template={templateToUse} templateId={templateId} onComplete={handleComplete} onError={handleError} onCancel={handleCancel} language={language} // ou "en" pour l'anglais
      API_KEY={API_KEY}/>
     </View>
   </SafeAreaView>);

package/build/components/TemplateKYCExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateKYCExample.js","sourceRoot":"","sources":["../../src/components/TemplateKYCExample.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, SafeAreaView } from 'react-native';\nimport { TemplateKYCFlow } from './TemplateKYCFlowRefactored';\nimport { KYCTemplate, VerificationState } from '../types/KYC.types';\n\n// Template JSON basé sur votre exemple\nconst advancedVerificationTemplate: KYCTemplate = {\n  id: 1,\n  name: {\n    en: \"Advanced Verification\",\n    fr: \"Vérification Avancée\"\n  },\n  description: {\n    en: \"Extended identity verification flow\",\n    fr: \"Processus de vérification d'identité étendu\"\n  },\n  version: \"1.1.0\",\n  components: [\n    {\n      id: 5,\n      type: \"location\" as const,\n      order: 1,\n      labels: {\n        en: \"Enable your location\",\n        fr: \"Activez votre localisation\"\n      },\n      instructions: {\n        en: \"We need your GPS location for compliance purposes.\",\n        fr: \"Nous avons besoin de votre localisation GPS pour des raisons réglementaires.\"\n      },\n      ui: {\n        icon: \"location-icon.png\",\n        themeColor: \"#2DBD60\",\n        buttonText: { en: \"Enable Location\", fr: \"Activer la localisation\" }\n      },\n      config: {\n        accuracy: \"high\",\n        required: true\n      } as const\n    },\n    {\n      id: 6,\n      type: \"country_selection\" as const,\n      order: 2,\n      labels: {\n        en: \"Select your country\",\n        fr: \"Sélectionnez votre pays\"\n      },\n      instructions: {\n        en: \"Choose your country of residence.\",\n        fr: \"Choisissez votre pays de résidence.\"\n      },\n      ui: {\n        icon: \"country-icon.png\",\n        themeColor: \"#2DBD60\",\n        buttonText: { en: \"Confirm\", fr: \"Confirmer\" }\n      },\n      config: {\n        allowed_countries: [\"CM\", \"NG\", \"CI\", \"KE\", \"GH\"],\n        default_country: \"CM\",\n        required: true\n      } as const\n    },\n    {\n      id: 1,\n      type: \"id_card\" as const,\n      order: 3,\n      templateId: 1,\n      labels: {\n        front: {\n          en: \"Upload front of ID card\",\n          fr: \"Téléversez le recto de votre carte d'identité\"\n        },\n        back: {\n          en: \"Upload back of ID card\",\n          fr: \"Téléversez le verso de votre carte d'identité\"\n        },\n      },\n      instructions: {\n        front: {\n          en: \"Take a clear photo of the front of your ID.\",\n          fr: \"Prenez une photo nette du recto de votre pièce.\"\n        },\n        back: {\n          en: \"Take a clear photo of the back of your ID.\",\n          fr: \"Prenez une photo nette du verso de votre pièce.\"\n        },\n      },\n      ui: {\n        front: {\n          icon: \"id-card-icon.png\",\n          themeColor: \"#2DBD60\",\n          buttonText: { en: \"Next\", fr: \"Suivant\" }\n        },\n        back: {\n          icon: \"id-card-icon.png\",\n          themeColor: \"#2DBD60\",\n          buttonText: { en: \"Next\", fr: \"Suivant\" }\n        },\n      },\n      config: {\n        sides: [\"front\", \"back\"],\n        allowed_formats: [\"jpg\", \"png\"],\n        max_size_mb: 5,\n        document_types: [\"drivers_licence\", \"passport\", \"drivers_licence\", \"national_id\"],\n        bbox_configs: {\n          drivers_licence: {\n            xMin: 20,\n            yMin: 140,\n            xMax: 370,\n            yMax: 340,\n            borderColor: \"#2DBD60\",\n            borderWidth: 4,\n            cornerRadius: 12\n          },\n          passport: {\n            xMin: 15,\n            yMin: 130,\n            xMax: 375,\n            yMax: 350,\n            borderColor: \"#007AFF\",\n            borderWidth: 4,\n            cornerRadius: 8\n          },\n          identity_card: {\n            xMin: 20,\n            yMin: 140,\n            xMax: 370,\n            yMax: 340,\n            borderColor: \"#2DBD60\",\n            borderWidth: 4,\n            cornerRadius: 12\n          },\n          health_insurance_card: {\n            xMin: 20,\n            yMin: 140,\n            xMax: 370,\n            yMax: 340,\n            borderColor: \"#2DBD60\",\n            borderWidth: 4,\n            cornerRadius: 12\n          },\n          national_id: {\n            xMin: 20,\n            yMin: 140,\n            xMax: 370,\n            yMax: 340,\n            borderColor: \"#5856D6\",\n            borderWidth: 4,\n            cornerRadius: 12\n          },\n          permanent_residence: {\n            xMin: 20,\n            yMin: 140,\n            xMax: 370,\n            yMax: 340,\n            borderColor: \"#2DBD60\",\n            borderWidth: 4,\n            cornerRadius: 12\n          },\n\n\n          work_permit: {\n            xMin: 20,\n            yMin: 140,\n            xMax: 370,\n            yMax: 340,\n            borderColor: \"#2DBD60\",\n            borderWidth: 4,\n            cornerRadius: 12\n          },\n\n        }\n      } as const\n    },\n    {\n      id: 3,\n      type: \"selfie\" as const,\n      order: 5,\n      templateId: 1,\n      labels: {\n        en: \"Take selfies from different angles\",\n        fr: \"Prenez des selfies sous différents angles\"\n      },\n      instructions: {\n        en: \"Take selfies from front, left, and right angles.\",\n        fr: \"Prenez des selfies de face, profil gauche et profil droit.\"\n      },\n      ui: {\n        icon: \"selfie-icon.png\",\n        themeColor: \"#2DBD60\",\n        buttonText: { en: \"Next\", fr: \"Suivant\" }\n      },\n      config: {\n        liveness_check: true,\n        max_attempts: 3,\n        orientations: [\"center\", \"left\", \"right\"]\n      } as const\n    },\n    // {\n    //   id: 4,\n    //   type: \"file_upload\" as const,\n    //   order: 6,\n    //   labels: {\n    //     en: \"Upload proof of address\",\n    //     fr: \"Téléversez un justificatif de domicile\"\n    //   },\n    //   instructions: {\n    //     en: \"Upload a recent utility bill or bank statement (PDF, JPG, PNG).\",\n    //     fr: \"Téléversez une facture récente ou un relevé bancaire (PDF, JPG, PNG).\"\n    //   },\n    //   ui: {\n    //     icon: \"file-upload-icon.png\",\n    //     themeColor: \"#2DBD60\",\n    //     buttonText: { en: \"Upload\", fr: \"Téléverser\" }\n    //   },\n    //   config: {\n    //     allowed_formats: [\"pdf\", \"jpg\", \"png\"],\n    //     max_size_mb: 10,\n    //     required: true\n    //   } as const\n    // },\n\n  ]\n};\n\nexport 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 }) => {\n  const handleComplete = (data: VerificationState) => {\n    console.log('KYC Template completed with data:', data);\n    onComplete(data);\n    // Ici vous pouvez envoyer les données à votre API\n  };\n\n  const handleCancel = () => {\n    console.log('KYC Template flow cancelled');\n    onCancel();\n  };\n\n  const handleError = (error: string) => {\n    console.error('KYC Template error:', error);\n    // Gérer l'erreur\n  };\n\n  return (\n    <SafeAreaView style={{ flex: 1 , paddingVertical:25}}>\n    <View style={{ flex: 1 }}>\n      <TemplateKYCFlow\n        template={advancedVerificationTemplate}\n        onComplete={handleComplete}\n        onError={handleError}\n        onCancel={handleCancel}\n        language={language} // ou \"en\" pour l'anglais\n        API_KEY={API_KEY}\n      />\n    </View>\n  </SafeAreaView>\n  );\n};\n\n "]}
+{"version":3,"file":"TemplateKYCExample.js","sourceRoot":"","sources":["../../src/components/TemplateKYCExample.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, SafeAreaView } from 'react-native';\nimport { TemplateKYCFlow } from './TemplateKYCFlowRefactored';\nimport { KYCTemplate, VerificationState } from '../types/KYC.types';\n\n// Template JSON basé sur votre exemple\nconst advancedVerificationTemplate: KYCTemplate = {\n  id: 1,\n  name: {\n    en: \"Advanced Verification\",\n    fr: \"Vérification Avancée\"\n  },\n  description: {\n    en: \"Extended identity verification flow\",\n    fr: \"Processus de vérification d'identité étendu\"\n  },\n  version: \"1.1.0\",\n  components: [\n    {\n      id: 5,\n      type: \"location\" as const,\n      order: 1,\n      labels: {\n        en: \"Enable your location\",\n        fr: \"Activez votre localisation\"\n      },\n      instructions: {\n        en: \"We need your GPS location for compliance purposes.\",\n        fr: \"Nous avons besoin de votre localisation GPS pour des raisons réglementaires.\"\n      },\n      ui: {\n        icon: \"location-icon.png\",\n        themeColor: \"#2DBD60\",\n        buttonText: { en: \"Enable Location\", fr: \"Activer la localisation\" }\n      },\n      config: {\n        accuracy: \"high\",\n        required: true\n      } as const\n    },\n    {\n      id: 6,\n      type: \"country_selection\" as const,\n      order: 2,\n      labels: {\n        en: \"Select your country\",\n        fr: \"Sélectionnez votre pays\"\n      },\n      instructions: {\n        en: \"Choose your country of residence.\",\n        fr: \"Choisissez votre pays de résidence.\"\n      },\n      ui: {\n        icon: \"country-icon.png\",\n        themeColor: \"#2DBD60\",\n        buttonText: { en: \"Confirm\", fr: \"Confirmer\" }\n      },\n      config: {\n        allowed_countries: [\"CM\", \"NG\", \"CI\", \"KE\", \"GH\"],\n        default_country: \"CM\",\n        required: true\n      } as const\n    },\n    {\n      id: 1,\n      type: \"id_card\" as const,\n      order: 3,\n      templateId: 1,\n      labels: {\n        front: {\n          en: \"Upload front of ID card\",\n          fr: \"Téléversez le recto de votre carte d'identité\"\n        },\n        back: {\n          en: \"Upload back of ID card\",\n          fr: \"Téléversez le verso de votre carte d'identité\"\n        },\n      },\n      instructions: {\n        front: {\n          en: \"Take a clear photo of the front of your ID.\",\n          fr: \"Prenez une photo nette du recto de votre pièce.\"\n        },\n        back: {\n          en: \"Take a clear photo of the back of your ID.\",\n          fr: \"Prenez une photo nette du verso de votre pièce.\"\n        },\n      },\n      ui: {\n        front: {\n          icon: \"id-card-icon.png\",\n          themeColor: \"#2DBD60\",\n          buttonText: { en: \"Next\", fr: \"Suivant\" }\n        },\n        back: {\n          icon: \"id-card-icon.png\",\n          themeColor: \"#2DBD60\",\n          buttonText: { en: \"Next\", fr: \"Suivant\" }\n        },\n      },\n      config: {\n        sides: [\"front\", \"back\"],\n        allowed_formats: [\"jpg\", \"png\"],\n        max_size_mb: 5,\n        document_types: [\"drivers_licence\", \"passport\", \"drivers_licence\", \"national_id\"],\n         \n      } as const\n    },\n    {\n      id: 3,\n      type: \"selfie\" as const,\n      order: 5,\n      templateId: 1,\n      labels: {\n        en: \"Take selfies from different angles\",\n        fr: \"Prenez des selfies sous différents angles\"\n      },\n      instructions: {\n        en: \"Take selfies from front, left, and right angles.\",\n        fr: \"Prenez des selfies de face, profil gauche et profil droit.\"\n      },\n      ui: {\n        icon: \"selfie-icon.png\",\n        themeColor: \"#2DBD60\",\n        buttonText: { en: \"Next\", fr: \"Suivant\" }\n      },\n      config: {\n        liveness_check: true,\n        max_attempts: 3,\n        orientations: [\"center\", \"left\", \"right\"]\n      } as const\n    },\n    // {\n    //   id: 4,\n    //   type: \"file_upload\" as const,\n    //   order: 6,\n    //   labels: {\n    //     en: \"Upload proof of address\",\n    //     fr: \"Téléversez un justificatif de domicile\"\n    //   },\n    //   instructions: {\n    //     en: \"Upload a recent utility bill or bank statement (PDF, JPG, PNG).\",\n    //     fr: \"Téléversez une facture récente ou un relevé bancaire (PDF, JPG, PNG).\"\n    //   },\n    //   ui: {\n    //     icon: \"file-upload-icon.png\",\n    //     themeColor: \"#2DBD60\",\n    //     buttonText: { en: \"Upload\", fr: \"Téléverser\" }\n    //   },\n    //   config: {\n    //     allowed_formats: [\"pdf\", \"jpg\", \"png\"],\n    //     max_size_mb: 10,\n    //     required: true\n    //   } as const\n    // },\n\n  ]\n};\n\nexport const TemplateKYCExample: React.FC<{ \n  onComplete: (data: VerificationState) => void; \n  onCancel: () => void; \n  onError: (error: string) => void; \n  language: string; \n  API_KEY?: string;\n  templateId?: string;\n  template?: KYCTemplate;\n}> = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template }) => {\n  const handleComplete = (data: VerificationState) => {\n    console.log('KYC Template completed with data:', data);\n    onComplete(data);\n    // Ici vous pouvez envoyer les données à votre API\n  };\n\n  const handleCancel = () => {\n    console.log('KYC Template flow cancelled');\n    onCancel();\n  };\n\n  const handleError = (error: string) => {\n    console.error('KYC Template error:', error);\n    onError(error);\n  };\n\n  // Determine which template to use: prefer templateId for dynamic loading, then template prop, then fallback to hardcoded\n  const templateToUse = templateId ? undefined : (template || advancedVerificationTemplate);\n\n  return (\n    <SafeAreaView style={{ flex: 1 , paddingVertical:25}}>\n    <View style={{ flex: 1 }}>\n      <TemplateKYCFlow\n        template={templateToUse}\n        templateId={templateId}\n        onComplete={handleComplete}\n        onError={handleError}\n        onCancel={handleCancel}\n        language={language} // ou \"en\" pour l'anglais\n        API_KEY={API_KEY}\n      />\n    </View>\n  </SafeAreaView>\n  );\n};\n\n "]}

package/build/components/TemplateKYCFlowRefactored.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { KYCTemplate, VerificationState } from '../types/KYC.types';
 interface TemplateKYCFlowProps {
-    template: KYCTemplate;
+    template?: KYCTemplate;
+    templateId?: string;
     onComplete?: (data: VerificationState) => void;
     onError?: (error: string) => void;
     language?: string;

package/build/components/TemplateKYCFlowRefactored.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateKYCFlowRefactored.d.ts","sourceRoot":"","sources":["../../src/components/TemplateKYCFlowRefactored.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAYpE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqC1D,CAAC"}
+{"version":3,"file":"TemplateKYCFlowRefactored.d.ts","sourceRoot":"","sources":["../../src/components/TemplateKYCFlowRefactored.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAepE,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsG1D,CAAC"}

package/build/components/TemplateKYCFlowRefactored.js

@@ -1,7 +1,8 @@
-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 { 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';
@@ -10,10 +11,34 @@ import { CountrySelectionTemplate } from './KYCElements/CountrySelectionTemplate
 import { InitializationStep } from './KYCElements/InitializationStep';
 import { ReviewSubmitTemplate } from './KYCElements/ReviewSubmitTemplate';
 import { VerificationProgressTemplate } from './KYCElements/VerificationProgressTemplate';
-export const TemplateKYCFlow = ({ template, onComplete, onError, language = 'fr', onCancel, API_KEY, }) => {
+import { useTemplateLoader } from '../hooks/useTemplateLoader';
+import { WelcomeTemplate } from './KYCElements/WelcomeTemplate';
+export const TemplateKYCFlow = ({ template: providedTemplate, templateId, onComplete, onError, language = 'fr', onCancel, 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(t('kyc.cancelConfirmation.title'), t('kyc.cancelConfirmation.message'), [
+        showAlert(t('kyc.cancelConfirmation.title'), t('kyc.cancelConfirmation.message'), [
             { text: t('kyc.cancelConfirmation.cancelButton'), style: 'cancel' },
             {
                 text: t('kyc.cancelConfirmation.confirmButton'),
@@ -23,6 +48,32 @@ export const TemplateKYCFlow = ({ template, onComplete, onError, language = 'fr'
             },
         ]);
     };
+    // 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} onComplete={onComplete} onError={onError} onCancel={OnCancel} initialLanguage={language} apiKey={API_KEY}>
       <TemplateKYCFlowContent onCancel={OnCancel}/>
     </TemplateKYCFlowProvider>);
@@ -51,6 +102,8 @@ const TemplateKYCFlowContent = ({ onCancel }) => {
             return <InitializationStep session={state.session}/>;
         }
         switch (currentComponent.type) {
+            case 'welcome':
+                return <WelcomeTemplate {...commonProps}/>;
             case 'id_card':
                 return <IDCardCapture {...commonProps}/>;
             case 'selfie':
@@ -103,9 +156,9 @@ const TemplateKYCFlowContent = ({ onCancel }) => {
           </View>) : 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}>
             <Text style={styles.processingText}>{t('common.loading')}</Text>
@@ -184,11 +237,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',
@@ -247,5 +302,36 @@ 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',
+    },
 });
 //# sourceMappingURL=TemplateKYCFlowRefactored.js.map