@transfergratis/react-native-sdk 0.1.23 → 0.1.25

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,11 +11,38 @@ 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';
+import { EmailVerificationTemplate } from './KYCElements/EmailVerificationTemplate';
+import { PhoneVerificationTemplate } from './KYCElements/PhoneVerificationTemplate';
+import { PersonalInformationTemplate } from './KYCElements/PersonalInformationTemplate';
+import { AdditionalDocumentsTemplate } from './KYCElements/AdditionalDocumentsTemplate';
+export const TemplateKYCFlow = ({ template: providedTemplate, templateId, onComplete, onError, language = 'fr', onCancel, API_KEY, env = 'PRODUCTION', existingSessionId, initialStep, }) => {
     const { t } = useI18n();
-    // console.log('API_KEY', API_KEY);
+    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'),
@@ -24,7 +52,33 @@ export const TemplateKYCFlow = ({ template, onComplete, onError, language = 'fr'
             },
         ]);
     };
-    return (<TemplateKYCFlowProvider template={template} onComplete={onComplete} onError={onError} onCancel={OnCancel} initialLanguage={language} apiKey={API_KEY}>
+    // 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} env={env} existingSessionId={existingSessionId} initialStep={initialStep}>
       <TemplateKYCFlowContent onCancel={OnCancel}/>
     </TemplateKYCFlowProvider>);
 };
@@ -52,6 +106,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':
@@ -64,6 +120,14 @@ const TemplateKYCFlowContent = ({ onCancel }) => {
                 return <CountrySelectionTemplate {...commonProps}/>;
             case 'review_submit':
                 return <ReviewSubmitTemplate {...commonProps}/>;
+            case 'email_verification':
+                return <EmailVerificationTemplate {...commonProps}/>;
+            case 'phone_verification':
+                return <PhoneVerificationTemplate {...commonProps}/>;
+            case 'personal_information':
+                return <PersonalInformationTemplate {...commonProps}/>;
+            case 'additional_documents':
+                return <AdditionalDocumentsTemplate {...commonProps}/>;
             case 'verification_progress':
                 return <VerificationProgressTemplate {...commonProps}/>;
             default:
@@ -104,9 +168,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>
@@ -185,11 +249,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',
@@ -248,5 +314,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

package/build/components/TemplateKYCFlowRefactored.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateKYCFlowRefactored.js","sourceRoot":"","sources":["../../src/components/TemplateKYCFlowRefactored.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, ActivityIndicator, Dimensions, Alert } from 'react-native';\nimport { KYCTemplate, VerificationState } from '../types/KYC.types';\nimport { TemplateKYCFlowProvider, useTemplateKYCFlowContext } from '../hooks/useTemplateKYCFlow';\nimport { useI18n } from '../hooks/useI18n';\nimport { IDCardCapture } from './KYCElements/IDCardCapture';\nimport { SelfieCaptureTemplate } from './KYCElements/SelfieCaptureTemplate';\nimport { FileUploadTemplate } from './KYCElements/FileUploadTemplate';\nimport { LocationCaptureTemplate } from './KYCElements/LocationCaptureTemplate';\nimport { CountrySelectionTemplate } from './KYCElements/CountrySelectionTemplate';\nimport { InitializationStep } from './KYCElements/InitializationStep';\nimport { ReviewSubmitTemplate } from './KYCElements/ReviewSubmitTemplate';\nimport { VerificationProgressTemplate } from './KYCElements/VerificationProgressTemplate';\n\ninterface TemplateKYCFlowProps {\n  template: KYCTemplate;\n  onComplete?: (data: VerificationState) => void;\n  onError?: (error: string) => void;\n  language?: string;\n  onCancel?: () => void;\n  API_KEY?: string;\n}\n\nexport const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({\n  template,\n  onComplete,\n  onError,\n  language = 'fr',\n  onCancel,\n  API_KEY,\n}) => {\n  const { t } = useI18n();\n  // console.log('API_KEY', API_KEY);\n  const OnCancel = () => {\n    Alert.alert(\n      t('kyc.cancelConfirmation.title'),\n      t('kyc.cancelConfirmation.message'),\n      [\n        { text: t('kyc.cancelConfirmation.cancelButton'), style: 'cancel' },\n        {\n          text: t('kyc.cancelConfirmation.confirmButton'),\n          onPress: () => {\n            onCancel?.();\n          }\n        },\n      ]\n    );\n  };\n  return (\n    <TemplateKYCFlowProvider\n      template={template}\n      onComplete={onComplete}\n      onError={onError}\n      onCancel={OnCancel}\n      initialLanguage={language}\n      apiKey={API_KEY}\n    >\n      <TemplateKYCFlowContent onCancel={OnCancel} />\n    </TemplateKYCFlowProvider>\n  );\n};\n\nconst TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel }) => {\n  const {\n    state,\n    actions,\n    currentComponent,\n    progress,\n  } = useTemplateKYCFlowContext();\n\n  const { t } = useI18n();\n\n  const updateComponentData = (componentId: number, data: unknown) => {\n    actions.updateComponentData(componentId, data);\n  };\n\n  if (!currentComponent) {\n    return (\n      <View style={styles.container}>\n        <Text style={styles.errorText}>{t('errors.unknownError')}</Text>\n      </View>\n    );\n  }\n\n  // Rendu du composant actuel\n  const renderCurrentComponent = () => {\n    const commonProps = {\n      component: currentComponent,\n      value: state.componentData[currentComponent.id],\n      onValueChange: (data: unknown) => updateComponentData(currentComponent.id, data),\n      error: state.errors[currentComponent.id],\n      language: state.currentLanguage,\n    };\n\n    if (!state.session.isInitialized) {\n      return <InitializationStep session={state.session} />\n    }\n\n    switch (currentComponent.type) {\n      case 'id_card':\n        return <IDCardCapture {...commonProps} />;\n\n      case 'selfie':\n        return <SelfieCaptureTemplate {...commonProps} />;\n\n      case 'file_upload':\n        return <FileUploadTemplate {...commonProps} />;\n\n      case 'location':\n        return <LocationCaptureTemplate {...commonProps} />;\n\n      case 'country_selection':\n        return <CountrySelectionTemplate {...commonProps} />;\n\n      case 'review_submit':\n        return <ReviewSubmitTemplate {...commonProps} />;\n\n      case 'verification_progress':\n        return <VerificationProgressTemplate {...commonProps} />;\n\n      default:\n        return (\n          <View style={styles.unsupportedContainer}>\n            <Text style={styles.unsupportedText}>\n              {t('errors.unknownError')}: {currentComponent.type}\n            </Text>\n          </View>\n        );\n    }\n  };\n\n  return (\n    <View style={{ flex: 1, position: 'relative' }}>\n      {state.isProcessing && (\n        <View style={styles.processingContainer}>\n          <Text style={styles.processingText}>{t('common.loading')}</Text>\n          <ActivityIndicator size=\"large\" color=\"#fff\" />\n        </View>\n      )}\n      <SafeAreaView style={styles.container}>\n        {/* Header avec informations sur l'étape */}\n\n        {(state.showCustomStepper && state.session.isInitialized) ? (\n          <View style={styles.header}>\n            <Text style={styles.progressText}>\n              {t('kyc.step', { current: state.currentComponentIndex + 1, total: state.template.components.length })}\n            </Text>\n            <View style={styles.progressContainer}>\n              <View style={styles.progressBar}>\n                <View\n                  style={[\n                    styles.progressFill,\n                    { width: `${progress}%` }\n                  ]}\n                />\n              </View>\n\n            </View>\n\n            <View style={{ position: 'absolute', right: 12, top: 12 }}>\n              <TouchableOpacity onPress={onCancel} disabled={!onCancel} style={{ opacity: onCancel ? 1 : 0.5 }}>\n                <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#333' }}>{`X`}</Text>\n              </TouchableOpacity>\n            </View>\n          </View>\n        ) : null}\n\n        {/* Contenu principal */}\n        <View style={styles.content}>\n          {renderCurrentComponent()}\n        </View>\n\n        {state.isProcessing && (\n          <View style={styles.processingContainer}>\n            <Text style={styles.processingText}>{t('common.loading')}</Text>\n            <ActivityIndicator size=\"large\" color=\"#fff\" />\n          </View>\n        )}\n      </SafeAreaView>\n    </View>\n\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n\n  },\n  header: {\n    backgroundColor: 'white',\n    paddingVertical: 20,\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n    borderBottomColor: '#e0e0e0',\n    marginHorizontal: 12,\n    marginTop: 12,\n    // shadow\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.15,\n    shadowRadius: 1.84,\n    elevation: 5,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 8,\n  },\n  description: {\n    fontSize: 16,\n    color: '#666',\n    marginBottom: 20,\n  },\n  progressContainer: {\n    // marginBottom: 20,\n  },\n  progressBar: {\n    height: 8,\n    backgroundColor: '#e0e0e0',\n    borderRadius: 4,\n    overflow: 'hidden',\n  },\n  progressFill: {\n    height: '100%',\n    backgroundColor: '#2DBD60',\n    borderRadius: 4,\n  },\n  progressText: {\n    fontSize: 14,\n    color: 'black',\n    fontWeight: '600',\n    textAlign: 'left',\n    marginBottom: 8,\n  },\n  stepInfo: {\n    backgroundColor: '#f8f9fa',\n    padding: 16,\n    borderRadius: 8,\n    borderLeftWidth: 4,\n    borderLeftColor: '#2DBD60',\n  },\n  stepTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    color: '#333',\n    marginBottom: 8,\n  },\n  stepDescription: {\n    fontSize: 14,\n    color: '#666',\n    lineHeight: 20,\n  },\n  content: {\n    flex: 1,\n    // justifyContent: 'center',\n    alignItems: 'center',\n    // paddingTop: Dimensions.get('window').height > 760 ? 12 : 0,\n  },\n  navigation: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 20,\n    backgroundColor: 'white',\n    borderTopWidth: 1,\n    borderTopColor: '#e0e0e0',\n  },\n  navButton: {\n    paddingHorizontal: 24,\n    paddingVertical: 12,\n    borderRadius: 8,\n    minWidth: 100,\n    alignItems: 'center',\n  },\n  primaryButton: {\n    backgroundColor: '#2DBD60',\n  },\n  navButtonText: {\n    fontSize: 16,\n    fontWeight: '600',\n    color: 'white',\n  },\n  errorText: {\n    color: '#dc2626',\n    fontSize: 16,\n    textAlign: 'center',\n    margin: 20,\n  },\n  unsupportedContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n  },\n  unsupportedText: {\n    fontSize: 16,\n    color: '#666',\n    textAlign: 'center',\n  },\n  processingContainer: {\n    position: 'absolute',\n    flex: 1,\n    width: Dimensions.get('window').width,\n    height: Dimensions.get('window').height,\n    backgroundColor: 'rgba(0, 0, 0, 0.5)',\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 10000000,\n  },\n  processingText: {\n    fontSize: 16,\n    color: '#fff',\n    textAlign: 'center',\n    fontWeight: 'bold',\n    marginBottom: 10,\n  },\n}); "]}
+{"version":3,"file":"TemplateKYCFlowRefactored.js","sourceRoot":"","sources":["../../src/components/TemplateKYCFlowRefactored.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\nimport { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, ActivityIndicator, Dimensions, ScrollView, Platform } from 'react-native';\nimport { KYCTemplate, VerificationState } from '../types/KYC.types';\nimport { TemplateKYCFlowProvider, useTemplateKYCFlowContext } from '../hooks/useTemplateKYCFlow';\nimport { useI18n } from '../hooks/useI18n';\nimport { showAlert } from '../utils/platformAlert';\nimport { IDCardCapture } from './KYCElements/IDCardCapture';\nimport { SelfieCaptureTemplate } from './KYCElements/SelfieCaptureTemplate';\nimport { FileUploadTemplate } from './KYCElements/FileUploadTemplate';\nimport { LocationCaptureTemplate } from './KYCElements/LocationCaptureTemplate';\nimport { CountrySelectionTemplate } from './KYCElements/CountrySelectionTemplate';\nimport { InitializationStep } from './KYCElements/InitializationStep';\nimport { ReviewSubmitTemplate } from './KYCElements/ReviewSubmitTemplate';\nimport { VerificationProgressTemplate } from './KYCElements/VerificationProgressTemplate';\nimport { useTemplateLoader } from '../hooks/useTemplateLoader';\nimport { WelcomeTemplate } from './KYCElements/WelcomeTemplate';\nimport { EmailVerificationTemplate } from './KYCElements/EmailVerificationTemplate';\nimport { PhoneVerificationTemplate } from './KYCElements/PhoneVerificationTemplate';\nimport { PersonalInformationTemplate } from './KYCElements/PersonalInformationTemplate';\nimport { AdditionalDocumentsTemplate } from './KYCElements/AdditionalDocumentsTemplate';\nimport { KycEnvironment } from '../types/env.types';\n\ninterface TemplateKYCFlowProps {\n  template?: KYCTemplate;        // Format SDK direct (existing, now optional)\n  templateId?: string;           // New: ID to load from API\n  onComplete?: (data: VerificationState) => void;\n  onError?: (error: string) => void;\n  language?: string;\n  onCancel?: () => void;\n  API_KEY?: string;              // Required if templateId is used\n  env?: KycEnvironment;           // Environment mode: PRODUCTION or SANDBOX\n  existingSessionId?: string;\n  initialStep?: number;          // Initial step index to resume verification\n}\n\nexport const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({\n  template: providedTemplate,\n  templateId,\n  onComplete,\n  onError,\n  language = 'fr',\n  onCancel,\n  API_KEY,\n  env = 'PRODUCTION',\n  existingSessionId,\n  initialStep,\n}) => {\n  const { t } = useI18n();\n  const { template: loadedTemplate, isLoading, error, loadTemplate } = useTemplateLoader();\n\n  // Validate props\n  useEffect(() => {\n    if (!providedTemplate && !templateId) {\n      const errorMsg = 'Either template or templateId must be provided';\n      onError?.(errorMsg);\n      return;\n    }\n\n    if (templateId && !API_KEY) {\n      // Try to load without API key (will use token authentication)\n      loadTemplate(templateId);\n    } else if (templateId && API_KEY) {\n      loadTemplate(templateId, API_KEY);\n    }\n  }, [templateId, API_KEY, providedTemplate, loadTemplate, onError]);\n\n  // Handle loading errors\n  useEffect(() => {\n    if (error) {\n      onError?.(error);\n    }\n  }, [error, onError]);\n\n  const OnCancel = () => {\n    showAlert(\n      t('kyc.cancelConfirmation.title'),\n      t('kyc.cancelConfirmation.message'),\n      [\n        { text: t('kyc.cancelConfirmation.cancelButton'), style: 'cancel' },\n        {\n          text: t('kyc.cancelConfirmation.confirmButton'),\n          onPress: () => {\n            onCancel?.();\n          }\n        },\n      ]\n    );\n  };\n\n  // Determine which template to use\n  const template = providedTemplate || loadedTemplate;\n\n  // Show loading state while fetching template\n  if (templateId && isLoading && !template) {\n    return (\n      <View style={styles.loadingContainer}>\n        <ActivityIndicator size=\"large\" color=\"#2DBD60\" />\n        <Text style={styles.loadingText}>{t('common.loading') || 'Loading template...'}</Text>\n      </View>\n    );\n  }\n\n  // Show error state if template failed to load\n  if (templateId && error && !template) {\n    return (\n      <View style={styles.errorContainer}>\n        <Text style={styles.errorText}>{error}</Text>\n        <TouchableOpacity\n          style={styles.retryButton}\n          onPress={() => loadTemplate(templateId, API_KEY)}\n        >\n          <Text style={styles.retryButtonText}>{t('common.retry') || 'Retry'}</Text>\n        </TouchableOpacity>\n      </View>\n    );\n  }\n\n  // Show error if no template available\n  if (!template) {\n    return (\n      <View style={styles.errorContainer}>\n        <Text style={styles.errorText}>\n          {t('errors.unknownError') || 'Template not available'}\n        </Text>\n      </View>\n    );\n  }\n\n  return (\n    <TemplateKYCFlowProvider\n      template={template}\n      onComplete={onComplete}\n      onError={onError}\n      onCancel={OnCancel}\n      initialLanguage={language}\n      apiKey={API_KEY}\n      env={env}\n      existingSessionId={existingSessionId}\n      initialStep={initialStep}\n    >\n      <TemplateKYCFlowContent onCancel={OnCancel} />\n    </TemplateKYCFlowProvider>\n  );\n};\n\nconst TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel }) => {\n  const {\n    state,\n    actions,\n    currentComponent,\n    progress,\n  } = useTemplateKYCFlowContext();\n\n  const { t } = useI18n();\n\n  const updateComponentData = (componentId: number, data: unknown) => {\n    actions.updateComponentData(componentId, data);\n  };\n\n  if (!currentComponent) {\n    return (\n      <View style={styles.container}>\n        <Text style={styles.errorText}>{t('errors.unknownError')}</Text>\n      </View>\n    );\n  }\n\n  // Rendu du composant actuel\n  const renderCurrentComponent = () => {\n    const commonProps = {\n      component: currentComponent,\n      value: state.componentData[currentComponent.id],\n      onValueChange: (data: unknown) => updateComponentData(currentComponent.id, data),\n      error: state.errors[currentComponent.id],\n      language: state.currentLanguage,\n    };\n\n    if (!state.session.isInitialized) {\n      return <InitializationStep session={state.session} />\n    }\n\n    switch (currentComponent.type) {\n      case 'welcome':\n        return <WelcomeTemplate {...commonProps} />;\n\n      case 'id_card':\n        return <IDCardCapture {...commonProps} />;\n\n      case 'selfie':\n        return <SelfieCaptureTemplate {...commonProps} />;\n\n      case 'file_upload':\n        return <FileUploadTemplate {...commonProps} />;\n\n      case 'location':\n        return <LocationCaptureTemplate {...commonProps} />;\n\n      case 'country_selection':\n        return <CountrySelectionTemplate {...commonProps} />;\n\n      case 'review_submit':\n        return <ReviewSubmitTemplate {...commonProps} />;\n\n      case 'email_verification':\n        return <EmailVerificationTemplate {...commonProps} />;\n\n      case 'phone_verification':\n        return <PhoneVerificationTemplate {...commonProps} />;\n\n      case 'personal_information':\n        return <PersonalInformationTemplate {...commonProps} />;\n\n      case 'additional_documents':\n        return <AdditionalDocumentsTemplate {...commonProps} />;\n\n      case 'verification_progress':\n        return <VerificationProgressTemplate {...commonProps} />;\n\n      default:\n        return (\n          <View style={styles.unsupportedContainer}>\n            <Text style={styles.unsupportedText}>\n              {t('errors.unknownError')}: {currentComponent.type}\n            </Text>\n          </View>\n        );\n    }\n  };\n\n  return (\n    <View style={{ flex: 1, position: 'relative' }}>\n      {state.isProcessing && (\n        <View style={styles.processingContainer}>\n          <Text style={styles.processingText}>{t('common.loading')}</Text>\n          <ActivityIndicator size=\"large\" color=\"#fff\" />\n        </View>\n      )}\n      <SafeAreaView style={styles.container}>\n        {/* Header avec informations sur l'étape */}\n\n        {(state.showCustomStepper && state.session.isInitialized) ? (\n          <View style={styles.header}>\n            <Text style={styles.progressText}>\n              {t('kyc.step', { current: state.currentComponentIndex + 1, total: state.template.components.length })}\n            </Text>\n            <View style={styles.progressContainer}>\n              <View style={styles.progressBar}>\n                <View\n                  style={[\n                    styles.progressFill,\n                    { width: `${progress}%` }\n                  ]}\n                />\n              </View>\n\n            </View>\n\n            <View style={{ position: 'absolute', right: 12, top: 12 }}>\n              <TouchableOpacity onPress={onCancel} disabled={!onCancel} style={{ opacity: onCancel ? 1 : 0.5 }}>\n                <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#333' }}>{`X`}</Text>\n              </TouchableOpacity>\n            </View>\n          </View>\n        ) : null}\n\n        {/* Contenu principal */}\n        <ScrollView\n          style={styles.scrollView}\n          contentContainerStyle={styles.content}\n          showsVerticalScrollIndicator={Platform.OS === 'web'}\n          bounces={false}\n        >\n          {renderCurrentComponent()}\n        </ScrollView>\n\n        {state.isProcessing && (\n          <View style={styles.processingContainer}>\n            <Text style={styles.processingText}>{t('common.loading')}</Text>\n            <ActivityIndicator size=\"large\" color=\"#fff\" />\n          </View>\n        )}\n      </SafeAreaView>\n    </View>\n\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n\n  },\n  header: {\n    backgroundColor: 'white',\n    paddingVertical: 20,\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n    borderBottomColor: '#e0e0e0',\n    marginHorizontal: 12,\n    marginTop: 12,\n    // shadow\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.15,\n    shadowRadius: 1.84,\n    elevation: 5,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 8,\n  },\n  description: {\n    fontSize: 16,\n    color: '#666',\n    marginBottom: 20,\n  },\n  progressContainer: {\n    // marginBottom: 20,\n  },\n  progressBar: {\n    height: 8,\n    backgroundColor: '#e0e0e0',\n    borderRadius: 4,\n    overflow: 'hidden',\n  },\n  progressFill: {\n    height: '100%',\n    backgroundColor: '#2DBD60',\n    borderRadius: 4,\n  },\n  progressText: {\n    fontSize: 14,\n    color: 'black',\n    fontWeight: '600',\n    textAlign: 'left',\n    marginBottom: 8,\n  },\n  stepInfo: {\n    backgroundColor: '#f8f9fa',\n    padding: 16,\n    borderRadius: 8,\n    borderLeftWidth: 4,\n    borderLeftColor: '#2DBD60',\n  },\n  stepTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    color: '#333',\n    marginBottom: 8,\n  },\n  stepDescription: {\n    fontSize: 14,\n    color: '#666',\n    lineHeight: 20,\n  },\n  scrollView: {\n    flex: 1,\n  },\n  content: {\n    flexGrow: 1,\n    alignItems: 'center',\n    paddingBottom: 20, // Add padding for better mobile scrolling\n  },\n  navigation: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 20,\n    backgroundColor: 'white',\n    borderTopWidth: 1,\n    borderTopColor: '#e0e0e0',\n  },\n  navButton: {\n    paddingHorizontal: 24,\n    paddingVertical: 12,\n    borderRadius: 8,\n    minWidth: 100,\n    alignItems: 'center',\n  },\n  primaryButton: {\n    backgroundColor: '#2DBD60',\n  },\n  navButtonText: {\n    fontSize: 16,\n    fontWeight: '600',\n    color: 'white',\n  },\n  errorText: {\n    color: '#dc2626',\n    fontSize: 16,\n    textAlign: 'center',\n    margin: 20,\n  },\n  unsupportedContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n  },\n  unsupportedText: {\n    fontSize: 16,\n    color: '#666',\n    textAlign: 'center',\n  },\n  processingContainer: {\n    position: 'absolute',\n    flex: 1,\n    width: Dimensions.get('window').width,\n    height: Dimensions.get('window').height,\n    backgroundColor: 'rgba(0, 0, 0, 0.5)',\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 10000000,\n  },\n  processingText: {\n    fontSize: 16,\n    color: '#fff',\n    textAlign: 'center',\n    fontWeight: 'bold',\n    marginBottom: 10,\n  },\n  loadingContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#f5f5f5',\n  },\n  loadingText: {\n    marginTop: 16,\n    fontSize: 16,\n    color: '#666',\n    textAlign: 'center',\n  },\n  errorContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#f5f5f5',\n    padding: 20,\n  },\n  retryButton: {\n    marginTop: 20,\n    paddingHorizontal: 24,\n    paddingVertical: 12,\n    backgroundColor: '#2DBD60',\n    borderRadius: 8,\n  },\n  retryButtonText: {\n    color: '#fff',\n    fontSize: 16,\n    fontWeight: '600',\n  },\n}); "]}

package/build/components/example/DynamicTemplateExample.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * Example component demonstrating how to use dynamic template loading
+ *
+ * This example shows two ways to use templates:
+ * 1. With templateId - loads template dynamically from backend API
+ * 2. With direct template object - uses hardcoded template (backward compatibility)
+ */
+export declare const DynamicTemplateExample: React.FC;
+//# sourceMappingURL=DynamicTemplateExample.d.ts.map

package/build/components/example/DynamicTemplateExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicTemplateExample.d.ts","sourceRoot":"","sources":["../../../src/components/example/DynamicTemplateExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EA8J1C,CAAC"}

package/build/components/example/DynamicTemplateExample.js

@@ -0,0 +1,241 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, SafeAreaView, TextInput, TouchableOpacity, ScrollView } from 'react-native';
+import { TemplateKYCFlow } from '../TemplateKYCFlowRefactored';
+/**
+ * Example component demonstrating how to use dynamic template loading
+ *
+ * This example shows two ways to use templates:
+ * 1. With templateId - loads template dynamically from backend API
+ * 2. With direct template object - uses hardcoded template (backward compatibility)
+ */
+export const DynamicTemplateExample = () => {
+    const [templateId, setTemplateId] = useState('');
+    const [apiKey, setApiKey] = useState('');
+    const [showFlow, setShowFlow] = useState(false);
+    const [language, setLanguage] = useState('en');
+    const handleComplete = (data) => {
+        console.log('KYC Verification completed:', data);
+        setShowFlow(false);
+        alert('Verification completed successfully!');
+    };
+    const handleError = (error) => {
+        console.error('KYC Error:', error);
+        alert(`Error: ${error}`);
+        setShowFlow(false);
+    };
+    const handleCancel = () => {
+        console.log('KYC Flow cancelled');
+        setShowFlow(false);
+    };
+    const startFlow = () => {
+        if (!templateId.trim()) {
+            alert('Please enter a template ID');
+            return;
+        }
+        setShowFlow(true);
+    };
+    if (showFlow) {
+        return (<SafeAreaView style={styles.container}>
+        <TemplateKYCFlow templateId={templateId} API_KEY={apiKey || undefined} language={language} onComplete={handleComplete} onError={handleError} onCancel={handleCancel}/>
+      </SafeAreaView>);
+    }
+    return (<SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
+        <Text style={styles.title}>Dynamic Template KYC Example</Text>
+        <Text style={styles.subtitle}>
+          Load a KYC template dynamically from the backend API
+        </Text>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>Template ID *</Text>
+          <TextInput style={styles.input} placeholder="e.g., free-style" value={templateId} onChangeText={setTemplateId} autoCapitalize="none" autoCorrect={false}/>
+          <Text style={styles.hint}>
+            Enter the template ID to load from the backend API
+          </Text>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>API Key (Optional)</Text>
+          <TextInput style={styles.input} placeholder="Your API key" value={apiKey} onChangeText={setApiKey} autoCapitalize="none" autoCorrect={false} secureTextEntry/>
+          <Text style={styles.hint}>
+            If not provided, the SDK will use token-based authentication
+          </Text>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>Language</Text>
+          <View style={styles.languageContainer}>
+            <TouchableOpacity style={[
+            styles.languageButton,
+            language === 'en' && styles.languageButtonActive,
+        ]} onPress={() => setLanguage('en')}>
+              <Text style={[
+            styles.languageButtonText,
+            language === 'en' && styles.languageButtonTextActive,
+        ]}>
+                English
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={[
+            styles.languageButton,
+            language === 'fr' && styles.languageButtonActive,
+        ]} onPress={() => setLanguage('fr')}>
+              <Text style={[
+            styles.languageButtonText,
+            language === 'fr' && styles.languageButtonTextActive,
+        ]}>
+                Français
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <TouchableOpacity style={[styles.button, !templateId.trim() && styles.buttonDisabled]} onPress={startFlow} disabled={!templateId.trim()}>
+          <Text style={styles.buttonText}>Start KYC Verification</Text>
+        </TouchableOpacity>
+
+        <View style={styles.infoSection}>
+          <Text style={styles.infoTitle}>Usage Example:</Text>
+          <Text style={styles.code}>
+            {`<TemplateKYCFlow
+  templateId="free-style"
+  API_KEY="your-api-key"
+  language="fr"
+  onComplete={handleComplete}
+  onError={handleError}
+  onCancel={handleCancel}
+/>`}
+          </Text>
+        </View>
+
+        <View style={styles.infoSection}>
+          <Text style={styles.infoTitle}>Notes:</Text>
+          <Text style={styles.infoText}>
+            • Template ID is required to load from backend{'\n'}
+            • API Key is optional but recommended for production{'\n'}
+            • The SDK will automatically transform the backend template format to SDK format{'\n'}
+            • Templates are cached for 5 minutes to improve performance{'\n'}
+            • You can also use a direct template object for backward compatibility
+          </Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#f5f5f5',
+    },
+    scrollView: {
+        flex: 1,
+    },
+    content: {
+        padding: 20,
+        paddingBottom: 40,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#333',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 32,
+        textAlign: 'center',
+    },
+    section: {
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 8,
+    },
+    input: {
+        backgroundColor: 'white',
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 8,
+        padding: 12,
+        fontSize: 16,
+        color: '#333',
+    },
+    hint: {
+        fontSize: 12,
+        color: '#999',
+        marginTop: 4,
+    },
+    languageContainer: {
+        flexDirection: 'row',
+        gap: 12,
+    },
+    languageButton: {
+        flex: 1,
+        padding: 12,
+        backgroundColor: 'white',
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    languageButtonActive: {
+        backgroundColor: '#2DBD60',
+        borderColor: '#2DBD60',
+    },
+    languageButtonText: {
+        fontSize: 16,
+        color: '#666',
+        fontWeight: '500',
+    },
+    languageButtonTextActive: {
+        color: 'white',
+        fontWeight: '600',
+    },
+    button: {
+        backgroundColor: '#2DBD60',
+        padding: 16,
+        borderRadius: 8,
+        alignItems: 'center',
+        marginTop: 8,
+        marginBottom: 32,
+    },
+    buttonDisabled: {
+        backgroundColor: '#ccc',
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    infoSection: {
+        backgroundColor: 'white',
+        padding: 16,
+        borderRadius: 8,
+        marginBottom: 16,
+    },
+    infoTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 8,
+    },
+    code: {
+        fontFamily: 'monospace',
+        fontSize: 12,
+        color: '#555',
+        backgroundColor: '#f5f5f5',
+        padding: 12,
+        borderRadius: 4,
+        overflow: 'hidden',
+    },
+    infoText: {
+        fontSize: 14,
+        color: '#666',
+        lineHeight: 20,
+    },
+});
+//# sourceMappingURL=DynamicTemplateExample.js.map

package/build/components/example/DynamicTemplateExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicTemplateExample.js","sourceRoot":"","sources":["../../../src/components/example/DynamicTemplateExample.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { View, Text, StyleSheet, SafeAreaView, TextInput, TouchableOpacity, ScrollView } from 'react-native';\nimport { TemplateKYCFlow } from '../TemplateKYCFlowRefactored';\nimport { VerificationState } from '../../types/KYC.types';\n\n/**\n * Example component demonstrating how to use dynamic template loading\n * \n * This example shows two ways to use templates:\n * 1. With templateId - loads template dynamically from backend API\n * 2. With direct template object - uses hardcoded template (backward compatibility)\n */\nexport const DynamicTemplateExample: React.FC = () => {\n  const [templateId, setTemplateId] = useState<string>('');\n  const [apiKey, setApiKey] = useState<string>('');\n  const [showFlow, setShowFlow] = useState<boolean>(false);\n  const [language, setLanguage] = useState<'en' | 'fr'>('en');\n\n  const handleComplete = (data: VerificationState) => {\n    console.log('KYC Verification completed:', data);\n    setShowFlow(false);\n    alert('Verification completed successfully!');\n  };\n\n  const handleError = (error: string) => {\n    console.error('KYC Error:', error);\n    alert(`Error: ${error}`);\n    setShowFlow(false);\n  };\n\n  const handleCancel = () => {\n    console.log('KYC Flow cancelled');\n    setShowFlow(false);\n  };\n\n  const startFlow = () => {\n    if (!templateId.trim()) {\n      alert('Please enter a template ID');\n      return;\n    }\n    setShowFlow(true);\n  };\n\n  if (showFlow) {\n    return (\n      <SafeAreaView style={styles.container}>\n        <TemplateKYCFlow\n          templateId={templateId}\n          API_KEY={apiKey || undefined}\n          language={language}\n          onComplete={handleComplete}\n          onError={handleError}\n          onCancel={handleCancel}\n        />\n      </SafeAreaView>\n    );\n  }\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>\n        <Text style={styles.title}>Dynamic Template KYC Example</Text>\n        <Text style={styles.subtitle}>\n          Load a KYC template dynamically from the backend API\n        </Text>\n\n        <View style={styles.section}>\n          <Text style={styles.label}>Template ID *</Text>\n          <TextInput\n            style={styles.input}\n            placeholder=\"e.g., free-style\"\n            value={templateId}\n            onChangeText={setTemplateId}\n            autoCapitalize=\"none\"\n            autoCorrect={false}\n          />\n          <Text style={styles.hint}>\n            Enter the template ID to load from the backend API\n          </Text>\n        </View>\n\n        <View style={styles.section}>\n          <Text style={styles.label}>API Key (Optional)</Text>\n          <TextInput\n            style={styles.input}\n            placeholder=\"Your API key\"\n            value={apiKey}\n            onChangeText={setApiKey}\n            autoCapitalize=\"none\"\n            autoCorrect={false}\n            secureTextEntry\n          />\n          <Text style={styles.hint}>\n            If not provided, the SDK will use token-based authentication\n          </Text>\n        </View>\n\n        <View style={styles.section}>\n          <Text style={styles.label}>Language</Text>\n          <View style={styles.languageContainer}>\n            <TouchableOpacity\n              style={[\n                styles.languageButton,\n                language === 'en' && styles.languageButtonActive,\n              ]}\n              onPress={() => setLanguage('en')}\n            >\n              <Text\n                style={[\n                  styles.languageButtonText,\n                  language === 'en' && styles.languageButtonTextActive,\n                ]}\n              >\n                English\n              </Text>\n            </TouchableOpacity>\n            <TouchableOpacity\n              style={[\n                styles.languageButton,\n                language === 'fr' && styles.languageButtonActive,\n              ]}\n              onPress={() => setLanguage('fr')}\n            >\n              <Text\n                style={[\n                  styles.languageButtonText,\n                  language === 'fr' && styles.languageButtonTextActive,\n                ]}\n              >\n                Français\n              </Text>\n            </TouchableOpacity>\n          </View>\n        </View>\n\n        <TouchableOpacity\n          style={[styles.button, !templateId.trim() && styles.buttonDisabled]}\n          onPress={startFlow}\n          disabled={!templateId.trim()}\n        >\n          <Text style={styles.buttonText}>Start KYC Verification</Text>\n        </TouchableOpacity>\n\n        <View style={styles.infoSection}>\n          <Text style={styles.infoTitle}>Usage Example:</Text>\n          <Text style={styles.code}>\n            {`<TemplateKYCFlow\n  templateId=\"free-style\"\n  API_KEY=\"your-api-key\"\n  language=\"fr\"\n  onComplete={handleComplete}\n  onError={handleError}\n  onCancel={handleCancel}\n/>`}\n          </Text>\n        </View>\n\n        <View style={styles.infoSection}>\n          <Text style={styles.infoTitle}>Notes:</Text>\n          <Text style={styles.infoText}>\n            • Template ID is required to load from backend{'\\n'}\n            • API Key is optional but recommended for production{'\\n'}\n            • The SDK will automatically transform the backend template format to SDK format{'\\n'}\n            • Templates are cached for 5 minutes to improve performance{'\\n'}\n            • You can also use a direct template object for backward compatibility\n          </Text>\n        </View>\n      </ScrollView>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  scrollView: {\n    flex: 1,\n  },\n  content: {\n    padding: 20,\n    paddingBottom: 40,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 8,\n    textAlign: 'center',\n  },\n  subtitle: {\n    fontSize: 16,\n    color: '#666',\n    marginBottom: 32,\n    textAlign: 'center',\n  },\n  section: {\n    marginBottom: 24,\n  },\n  label: {\n    fontSize: 16,\n    fontWeight: '600',\n    color: '#333',\n    marginBottom: 8,\n  },\n  input: {\n    backgroundColor: 'white',\n    borderWidth: 1,\n    borderColor: '#ddd',\n    borderRadius: 8,\n    padding: 12,\n    fontSize: 16,\n    color: '#333',\n  },\n  hint: {\n    fontSize: 12,\n    color: '#999',\n    marginTop: 4,\n  },\n  languageContainer: {\n    flexDirection: 'row',\n    gap: 12,\n  },\n  languageButton: {\n    flex: 1,\n    padding: 12,\n    backgroundColor: 'white',\n    borderWidth: 1,\n    borderColor: '#ddd',\n    borderRadius: 8,\n    alignItems: 'center',\n  },\n  languageButtonActive: {\n    backgroundColor: '#2DBD60',\n    borderColor: '#2DBD60',\n  },\n  languageButtonText: {\n    fontSize: 16,\n    color: '#666',\n    fontWeight: '500',\n  },\n  languageButtonTextActive: {\n    color: 'white',\n    fontWeight: '600',\n  },\n  button: {\n    backgroundColor: '#2DBD60',\n    padding: 16,\n    borderRadius: 8,\n    alignItems: 'center',\n    marginTop: 8,\n    marginBottom: 32,\n  },\n  buttonDisabled: {\n    backgroundColor: '#ccc',\n  },\n  buttonText: {\n    color: 'white',\n    fontSize: 16,\n    fontWeight: '600',\n  },\n  infoSection: {\n    backgroundColor: 'white',\n    padding: 16,\n    borderRadius: 8,\n    marginBottom: 16,\n  },\n  infoTitle: {\n    fontSize: 16,\n    fontWeight: '600',\n    color: '#333',\n    marginBottom: 8,\n  },\n  code: {\n    fontFamily: 'monospace',\n    fontSize: 12,\n    color: '#555',\n    backgroundColor: '#f5f5f5',\n    padding: 12,\n    borderRadius: 4,\n    overflow: 'hidden',\n  },\n  infoText: {\n    fontSize: 14,\n    color: '#666',\n    lineHeight: 20,\n  },\n});"]}

package/build/config/KYCConfig.d.ts

@@ -0,0 +1,14 @@
+import { BackendEnvironment } from '../types/env.types';
+declare class KYCConfig {
+    private static instance;
+    private backendEnvironment;
+    private backendUrls;
+    private constructor();
+    static getInstance(): KYCConfig;
+    setBackendEnvironment(env: BackendEnvironment): void;
+    getBackendUrl(): string;
+    getBackendEnvironment(): BackendEnvironment;
+}
+declare const _default: KYCConfig;
+export default _default;
+//# sourceMappingURL=KYCConfig.d.ts.map

package/build/config/KYCConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KYCConfig.d.ts","sourceRoot":"","sources":["../../src/config/KYCConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,cAAM,SAAS;IACX,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAY;IACnC,OAAO,CAAC,kBAAkB,CAAoC;IAE9D,OAAO,CAAC,WAAW,CAGjB;IAEF,OAAO;WAEO,WAAW,IAAI,SAAS;IAO/B,qBAAqB,CAAC,GAAG,EAAE,kBAAkB;IAI7C,aAAa,IAAI,MAAM;IAIvB,qBAAqB,IAAI,kBAAkB;CAGrD;;AAED,wBAAuC"}

package/build/config/KYCConfig.js

@@ -0,0 +1,26 @@
+class KYCConfig {
+    static instance;
+    backendEnvironment = 'PRODUCTION';
+    backendUrls = {
+        PRODUCTION: 'https://service.sanctumkey.com/api/v1',
+        TEST: 'https://test-service.sanctumkey.com/api/v1', // Placeholder URL
+    };
+    constructor() { }
+    static getInstance() {
+        if (!KYCConfig.instance) {
+            KYCConfig.instance = new KYCConfig();
+        }
+        return KYCConfig.instance;
+    }
+    setBackendEnvironment(env) {
+        this.backendEnvironment = env;
+    }
+    getBackendUrl() {
+        return this.backendUrls[this.backendEnvironment];
+    }
+    getBackendEnvironment() {
+        return this.backendEnvironment;
+    }
+}
+export default KYCConfig.getInstance();
+//# sourceMappingURL=KYCConfig.js.map

package/build/config/KYCConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KYCConfig.js","sourceRoot":"","sources":["../../src/config/KYCConfig.ts"],"names":[],"mappings":"AAEA,MAAM,SAAS;IACH,MAAM,CAAC,QAAQ,CAAY;IAC3B,kBAAkB,GAAuB,YAAY,CAAC;IAEtD,WAAW,GAAuC;QACtD,UAAU,EAAE,uCAAuC;QACnD,IAAI,EAAE,4CAA4C,EAAE,kBAAkB;KACzE,CAAC;IAEF,gBAAwB,CAAC;IAElB,MAAM,CAAC,WAAW;QACrB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;YACtB,SAAS,CAAC,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC;QACzC,CAAC;QACD,OAAO,SAAS,CAAC,QAAQ,CAAC;IAC9B,CAAC;IAEM,qBAAqB,CAAC,GAAuB;QAChD,IAAI,CAAC,kBAAkB,GAAG,GAAG,CAAC;IAClC,CAAC;IAEM,aAAa;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACrD,CAAC;IAEM,qBAAqB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;CACJ;AAED,eAAe,SAAS,CAAC,WAAW,EAAE,CAAC","sourcesContent":["import { BackendEnvironment } from '../types/env.types';\n\nclass KYCConfig {\n    private static instance: KYCConfig;\n    private backendEnvironment: BackendEnvironment = 'PRODUCTION';\n\n    private backendUrls: Record<BackendEnvironment, string> = {\n        PRODUCTION: 'https://service.sanctumkey.com/api/v1',\n        TEST: 'https://test-service.sanctumkey.com/api/v1', // Placeholder URL\n    };\n\n    private constructor() { }\n\n    public static getInstance(): KYCConfig {\n        if (!KYCConfig.instance) {\n            KYCConfig.instance = new KYCConfig();\n        }\n        return KYCConfig.instance;\n    }\n\n    public setBackendEnvironment(env: BackendEnvironment) {\n        this.backendEnvironment = env;\n    }\n\n    public getBackendUrl(): string {\n        return this.backendUrls[this.backendEnvironment];\n    }\n\n    public getBackendEnvironment(): BackendEnvironment {\n        return this.backendEnvironment;\n    }\n}\n\nexport default KYCConfig.getInstance();\n"]}