@sanctum-key/react-native-sdk 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelection.js","sourceRoot":"","sources":["../../../src/components/KYCElements/CountrySelection.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';\nimport { KYCElement, KYCElementOption } from '../../types/KYC.types';\n\ninterface CountrySelectionProps {\n  element: KYCElement;\n  value?: string;\n  onValueChange: (value: string) => void;\n  error?: string;\n}\n\nconst defaultCountries: KYCElementOption[] = [\n  { value: 'FR', label: 'France', icon: '🇫🇷' },\n  { value: 'BE', label: 'Belgique', icon: '🇧🇪' },\n  { value: 'LU', label: 'Luxembourg', icon: '🇱🇺' },\n  { value: 'DE', label: 'Allemagne', icon: '🇩🇪' },\n  { value: 'IT', label: 'Italie', icon: '🇮🇹' },\n  { value: 'ES', label: 'Espagne', icon: '🇪🇸' },\n  { value: 'PT', label: 'Portugal', icon: '🇵🇹' },\n  { value: 'AT', label: 'Autriche', icon: '🇦🇹' },\n  { value: 'CH', label: 'Suisse', icon: '🇨🇭' },\n  { value: 'NL', label: 'Pays-Bas', icon: '🇳🇱' },\n  { value: 'OTHER', label: 'Autre', icon: '🌍' },\n];\n\nexport const CountrySelection: React.FC<CountrySelectionProps> = ({\n  element,\n  value,\n  onValueChange,\n  error,\n}) => {\n  const countries = element.options || defaultCountries;\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>{element.title}</Text>\n      <Text style={styles.description}>{element.description}</Text>\n      \n      <ScrollView style={styles.optionsContainer} showsVerticalScrollIndicator={false}>\n        {countries.map((country) => (\n          <TouchableOpacity\n            key={country.value}\n            style={[\n              styles.option,\n              value === country.value && styles.selectedOption\n            ]}\n            onPress={() => onValueChange(country.value)}\n          >\n            <Text style={styles.optionIcon}>{country.icon}</Text>\n            <View style={styles.optionContent}>\n              <Text style={[\n                styles.optionLabel,\n                value === country.value && styles.selectedOptionLabel\n              ]}>\n                {country.label}\n              </Text>\n              {country.description && (\n                <Text style={styles.optionDescription}>{country.description}</Text>\n              )}\n            </View>\n            {value === country.value && (\n              <View style={styles.checkmark}>\n                <Text style={styles.checkmarkText}>✓</Text>\n              </View>\n            )}\n          </TouchableOpacity>\n        ))}\n      </ScrollView>\n\n      {error && (\n        <Text style={styles.errorText}>{error}</Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 16,\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  optionsContainer: {\n    flex: 1,\n  },\n  option: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    padding: 16,\n    backgroundColor: 'white',\n    borderRadius: 12,\n    marginBottom: 12,\n    borderWidth: 2,\n    borderColor: '#e5e5e5',\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.1,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  selectedOption: {\n    borderColor: '#4CAF50',\n    backgroundColor: '#f0f9f0',\n  },\n  optionIcon: {\n    fontSize: 32,\n    marginRight: 16,\n  },\n  optionContent: {\n    flex: 1,\n  },\n  optionLabel: {\n    fontSize: 18,\n    fontWeight: '600',\n    color: '#333',\n  },\n  selectedOptionLabel: {\n    color: '#4CAF50',\n  },\n  optionDescription: {\n    fontSize: 14,\n    color: '#666',\n    marginTop: 4,\n  },\n  checkmark: {\n    width: 24,\n    height: 24,\n    borderRadius: 12,\n    backgroundColor: '#4CAF50',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  checkmarkText: {\n    color: 'white',\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n  errorText: {\n    color: '#dc2626',\n    fontSize: 14,\n    marginTop: 8,},\n  buttonContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: 24,\n    gap: 10,\n  },\n  button: {\n    flex: 1,\n    padding: 12,\n    backgroundColor: '#4CAF50',\n    textAlign: 'center',\n  },\n  buttonText: {\n    color: 'white',\n    fontSize: 16,\n    fontWeight: 'bold',\n    textAlign: 'center',\n  },\n\n}); "]}

package/build/components/KYCElements/CountrySelectionTemplate.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TemplateComponent, Country } from '../../types/KYC.types';
+interface CountrySelectionTemplateProps {
+    component: TemplateComponent;
+    value?: any;
+    onValueChange: (value: Country & {
+        documentType?: string;
+        region?: string;
+    }) => void;
+    error?: string;
+    language?: string;
+}
+export declare const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps>;
+export {};
+//# sourceMappingURL=CountrySelectionTemplate.d.ts.map

package/build/components/KYCElements/CountrySelectionTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelectionTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/KYCElements/CountrySelectionTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAyC,OAAO,EAAgB,MAAM,uBAAuB,CAAC;AAMxH,UAAU,6BAA6B;IACrC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG;QAAE,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAWD,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA+X5E,CAAC"}

package/build/components/KYCElements/CountrySelectionTemplate.js

@@ -0,0 +1,438 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { countryMapping } from '../../config/region_mapping';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { Button } from '../ui/Button';
+import { countryData } from '../../config/countriesData';
+export const CountrySelectionTemplate = ({ component, value, onValueChange, error, language = 'en', }) => {
+    const config = component.config;
+    const { actions, state } = useTemplateKYCFlowContext();
+    const idCardComponent = useMemo(() => {
+        return state.template.components.find(c => c.type === 'id_card');
+    }, [state.template.components]);
+    const idCardConfig = useMemo(() => {
+        return idCardComponent?.config;
+    }, [idCardComponent]);
+    const [currentStep, setCurrentStep] = useState(() => {
+        if (value?.code && value?.documentType) {
+            if (value.region)
+                return 'region';
+            return 'documentType';
+        }
+        return 'country';
+    });
+    const [selectedCountryCode, setSelectedCountryCode] = useState(value?.code || null);
+    const [selectedDocumentType, setSelectedDocumentType] = useState(value?.documentType || null);
+    const [selectedRegion, setSelectedRegion] = useState(value?.region || null);
+    useEffect(() => {
+        if (value?.code && value?.documentType) {
+            setSelectedCountryCode(value.code);
+            setSelectedDocumentType(value.documentType);
+            setSelectedRegion(value.region || null);
+            if (value.region) {
+                setCurrentStep('region');
+            }
+            else {
+                const needsRegionCheck = value.code && value.documentType && idCardConfig?.regionsByCountry?.[value.code]?.[value.documentType];
+                if (needsRegionCheck && Array.isArray(needsRegionCheck) && needsRegionCheck.length > 0) {
+                    setCurrentStep('region');
+                }
+                else {
+                    setCurrentStep('documentType');
+                }
+            }
+        }
+        else {
+            setSelectedCountryCode(null);
+            setSelectedDocumentType(null);
+            setSelectedRegion(null);
+            setCurrentStep('country');
+        }
+    }, [value?.code, value?.documentType, value?.region, idCardConfig]);
+    useEffect(() => {
+        if (error) {
+            actions.updateComponentData(component.id, value);
+        }
+    }, []);
+    const availableCountries = useMemo(() => {
+        const countries = idCardConfig?.selectedCountries || config.allowed_countries || Object.keys(countryData);
+        return countries
+            .filter((code) => countryData[code])
+            .map((code) => ({ code, ...countryData[code] }))
+            .sort((a, b) => a.name.localeCompare(b.name));
+    }, [idCardConfig?.selectedCountries, config.allowed_countries]);
+    const availableDocumentTypes = useMemo(() => {
+        if (!selectedCountryCode || !idCardConfig?.documentTypesByCountry)
+            return [];
+        return idCardConfig.documentTypesByCountry[selectedCountryCode] || [];
+    }, [selectedCountryCode, idCardConfig?.documentTypesByCountry]);
+    const availableRegions = useMemo(() => {
+        if (!selectedCountryCode || !selectedDocumentType || !idCardConfig?.regionsByCountry)
+            return [];
+        const regions = idCardConfig.regionsByCountry[selectedCountryCode];
+        if (!regions)
+            return [];
+        return Array.isArray(regions[selectedDocumentType]) ? regions[selectedDocumentType] : [];
+    }, [selectedCountryCode, selectedDocumentType, idCardConfig?.regionsByCountry]);
+    const needsRegion = useMemo(() => {
+        return availableRegions.length > 0;
+    }, [availableRegions]);
+    const getLocalizedText = (text) => {
+        return text[state.currentLanguage] || text.en || '';
+    };
+    // 1. Only highlights the country
+    const handleCountrySelect = (countryCode) => {
+        setSelectedCountryCode(countryCode);
+        setSelectedDocumentType(null);
+        setSelectedRegion(null);
+    };
+    // 2. Only highlights the document type
+    const handleDocumentTypeSelect = (docType) => {
+        setSelectedDocumentType(docType);
+        setSelectedRegion(null);
+    };
+    // 3. Only highlights the region
+    const handleRegionSelect = (region) => {
+        setSelectedRegion(region);
+    };
+    const finalizeSelection = (countryCode, docType, region) => {
+        const country = countryData[countryCode];
+        if (!country)
+            return;
+        const mapping = countryMapping[countryCode];
+        const countryObj = {
+            code: countryCode,
+            ...country,
+            regionMapping: mapping,
+            documentType: docType,
+            region: region || undefined,
+        };
+        onValueChange(countryObj);
+        setTimeout(() => {
+            actions.nextComponent(countryObj);
+        }, 100);
+    };
+    const handleBack = () => {
+        if (currentStep === 'region') {
+            setCurrentStep('documentType');
+            setSelectedRegion(null);
+        }
+        else if (currentStep === 'documentType') {
+            setCurrentStep('country');
+            setSelectedDocumentType(null);
+            setSelectedRegion(null);
+        }
+        else if (currentStep === 'country') {
+            actions.previousComponent();
+        }
+    };
+    const handleNext = () => {
+        if (currentStep === 'country' && selectedCountryCode) {
+            setCurrentStep('documentType');
+        }
+        else if (currentStep === 'documentType' && selectedDocumentType) {
+            if (needsRegion) {
+                setCurrentStep('region');
+            }
+            else {
+                if (selectedCountryCode) {
+                    finalizeSelection(selectedCountryCode, selectedDocumentType, null);
+                }
+            }
+        }
+        else if (currentStep === 'region' && selectedRegion) {
+            if (selectedCountryCode && selectedDocumentType) {
+                finalizeSelection(selectedCountryCode, selectedDocumentType, selectedRegion);
+            }
+        }
+    };
+    const renderCountrySelection = () => {
+        return (<>
+        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
+          {availableCountries.map((country) => (<TouchableOpacity key={country.code} style={[
+                    styles.option,
+                    selectedCountryCode === country.code && styles.selectedOption
+                ]} onPress={() => handleCountrySelect(country.code)}>
+              <Text style={styles.flag}>{country.flag}</Text>
+              <View style={styles.optionContent}>
+                <Text style={[
+                    styles.optionName,
+                    selectedCountryCode === country.code && styles.selectedOptionName
+                ]}>
+                  {state.currentLanguage === "en" ? country.name_en : country.name}
+                </Text>
+                <Text style={styles.optionCode}>{country.code}</Text>
+              </View>
+              {selectedCountryCode === country.code && (<View style={[
+                        styles.checkmark,
+                        { backgroundColor: component.ui.themeColor || '#2DBD60' }
+                    ]}>
+                  <Text style={styles.checkmarkText}>✓</Text>
+                </View>)}
+            </TouchableOpacity>))}
+        </ScrollView>
+      </>);
+    };
+    const renderDocumentTypeSelection = () => {
+        const instructions = selectedDocumentType && idCardConfig?.instructionsByDocumentType?.[selectedDocumentType]
+            ? getLocalizedText(idCardConfig.instructionsByDocumentType[selectedDocumentType])
+            : null;
+        const documentTypeLabels = {
+            'nationalId': { en: 'National ID', fr: 'Carte nationale d\'identité', icon: '🏛️' },
+            'passport': { en: 'Passport', fr: 'Passeport', icon: '📘' },
+            'driversLicense': { en: 'Driver\'s License', fr: 'Permis de conduire', icon: '🚗' },
+            'residencePermit': { en: 'Residence Permit', fr: 'Permis de séjour', icon: '🏠' },
+            'healthInsuranceCard': { en: 'Health Insurance Card', fr: 'Carte d\'assurance maladie', icon: '🗳️' },
+        };
+        return (<>
+        {instructions && (<View style={styles.infoBox}>
+            <Text style={styles.infoText}>{instructions}</Text>
+          </View>)}
+        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
+          {availableDocumentTypes.map((docType) => {
+                const label = documentTypeLabels[docType];
+                const displayName = label ? (state.currentLanguage === "en" ? label.en : label.fr) : docType;
+                const icon = label?.icon || '📄';
+                return (<TouchableOpacity key={docType} style={[
+                        styles.option,
+                        selectedDocumentType === docType && styles.selectedOption
+                    ]} onPress={() => handleDocumentTypeSelect(docType)}>
+                <Text style={styles.flag}>{icon}</Text>
+                <View style={styles.optionContent}>
+                  <Text style={[
+                        styles.optionName,
+                        selectedDocumentType === docType && styles.selectedOptionName
+                    ]}>
+                    {displayName}
+                  </Text>
+                </View>
+                {selectedDocumentType === docType && (<View style={[
+                            styles.checkmark,
+                            { backgroundColor: component.ui.themeColor || '#2DBD60' }
+                        ]}>
+                    <Text style={styles.checkmarkText}>✓</Text>
+                  </View>)}
+              </TouchableOpacity>);
+            })}
+        </ScrollView>
+      </>);
+    };
+    const renderRegionSelection = () => {
+        return (<>
+        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
+          {availableRegions.map((region, index) => {
+                const regionLabel = typeof region === 'string' ? region : String(region);
+                return (<TouchableOpacity key={index} style={[
+                        styles.option,
+                        selectedRegion === regionLabel && styles.selectedOption
+                    ]} onPress={() => handleRegionSelect(regionLabel)}>
+                <View style={styles.optionContent}>
+                  <Text style={[
+                        styles.optionName,
+                        selectedRegion === regionLabel && styles.selectedOptionName
+                    ]}>
+                    {regionLabel}
+                  </Text>
+                </View>
+                {selectedRegion === regionLabel && (<View style={[
+                            styles.checkmark,
+                            { backgroundColor: component.ui.themeColor || '#2DBD60' }
+                        ]}>
+                    <Text style={styles.checkmarkText}>✓</Text>
+                  </View>)}
+              </TouchableOpacity>);
+            })}
+        </ScrollView>
+      </>);
+    };
+    const getStepTitle = () => {
+        switch (currentStep) {
+            case 'country':
+                return getLocalizedText(component.labels);
+            case 'documentType':
+                return state.currentLanguage === "en" ? "Select Document Type" : "Sélectionnez le type de document";
+            case 'region':
+                return state.currentLanguage === "en" ? "Select Region" : "Sélectionnez la région";
+            default:
+                return '';
+        }
+    };
+    const getStepDescription = () => {
+        switch (currentStep) {
+            case 'country':
+                return getLocalizedText(component.instructions);
+            case 'documentType':
+                return state.currentLanguage === "en"
+                    ? "Choose the type of document you want to use"
+                    : "Choisissez le type de document que vous souhaitez utiliser";
+            case 'region':
+                return state.currentLanguage === "en"
+                    ? "Select your region"
+                    : "Sélectionnez votre région";
+            default:
+                return '';
+        }
+    };
+    const getProgressStep = () => {
+        if (currentStep === 'country')
+            return 1;
+        if (currentStep === 'documentType')
+            return 2;
+        return 3;
+    };
+    const getTotalSteps = () => {
+        return needsRegion ? 3 : 2;
+    };
+    const canGoNext = () => {
+        if (currentStep === 'country')
+            return selectedCountryCode !== null;
+        if (currentStep === 'documentType')
+            return selectedDocumentType !== null;
+        if (currentStep === 'region')
+            return selectedRegion !== null;
+        return false;
+    };
+    return (<View style={styles.root}>
+      <View style={styles.container}>
+        <View style={styles.progressContainer}>
+          <Text style={styles.progressText}>
+            {state.currentLanguage === "en"
+            ? `Step ${getProgressStep()} of ${getTotalSteps()}`
+            : `Étape ${getProgressStep()} sur ${getTotalSteps()}`}
+          </Text>
+        </View>
+
+        <Text style={styles.title}>{getStepTitle()}</Text>
+        <Text style={styles.description}>{getStepDescription()}</Text>
+
+        {currentStep === 'country' && renderCountrySelection()}
+        {currentStep === 'documentType' && renderDocumentTypeSelection()}
+        {currentStep === 'region' && renderRegionSelection()}
+
+        <View style={styles.buttonContainer}>
+          <Button title={state.currentLanguage === "en" ? "Back" : "Retour"} onPress={handleBack} variant={currentStep === 'country' ? "secondary" : "outline"} size="large" style={{ flex: 1, marginRight: 8 }}/>
+          
+          <Button title={state.currentLanguage === "en" ? "Next" : "Suivant"} onPress={handleNext} variant="primary" size="large" style={{ flex: 1 }} disabled={!canGoNext()}/>
+        </View>
+
+        {error && (<Text style={styles.errorText}>{error}</Text>)}
+      </View>
+    </View>);
+};
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+        maxWidth: 760,
+        width: '100%',
+    },
+    container: {
+        backgroundColor: 'white',
+        margin: 10,
+        borderRadius: 10,
+        paddingVertical: 16,
+        paddingHorizontal: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.35,
+        shadowRadius: 4.84,
+        elevation: 10,
+    },
+    progressContainer: {
+        marginBottom: 16,
+        alignItems: 'center',
+    },
+    progressText: {
+        fontSize: 14,
+        color: '#666',
+        fontWeight: '500',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#333',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    description: {
+        fontSize: 16,
+        color: '#666',
+        textAlign: 'center',
+        marginBottom: 24,
+        lineHeight: 22,
+    },
+    listContainer: {
+        maxHeight: 400,
+        marginBottom: 24,
+    },
+    option: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        backgroundColor: '#F8F9FA',
+        borderRadius: 12,
+        marginBottom: 12,
+        borderWidth: 2,
+        borderColor: '#E9ECEF',
+        minHeight: 64,
+    },
+    selectedOption: {
+        borderColor: '#2DBD60',
+        backgroundColor: '#F0F9F0',
+    },
+    flag: {
+        fontSize: 32,
+        marginRight: 16,
+    },
+    optionContent: {
+        flex: 1,
+    },
+    optionName: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#333',
+    },
+    selectedOptionName: {
+        color: '#2DBD60',
+    },
+    optionCode: {
+        fontSize: 14,
+        color: '#666',
+        marginTop: 4,
+        fontWeight: '500',
+    },
+    checkmark: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    checkmarkText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    infoBox: {
+        backgroundColor: '#F9FAFB',
+        padding: 12,
+        borderRadius: 12,
+        marginBottom: 16,
+    },
+    infoText: {
+        fontSize: 14,
+        color: '#666',
+        lineHeight: 20,
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        marginTop: 24,
+        gap: 12,
+    },
+    errorText: {
+        color: '#dc2626',
+        fontSize: 14,
+        marginTop: 8,
+        textAlign: 'center',
+    },
+});
+//# sourceMappingURL=CountrySelectionTemplate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelectionTemplate.js","sourceRoot":"","sources":["../../../src/components/KYCElements/CountrySelectionTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useMemo, useEffect } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';\nimport { TemplateComponent, CountrySelectionConfig, LocalizedText, Country, IDCardConfig } from '../../types/KYC.types';\nimport { countryMapping } from '../../config/region_mapping';\nimport { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';\nimport { Button } from '../ui/Button';\nimport { countryData } from '../../config/countriesData';\n\ninterface CountrySelectionTemplateProps {\n  component: TemplateComponent;\n  value?: any;\n  onValueChange: (value: Country & { documentType?: string; region?: string }) => void;\n  error?: string;\n  language?: string;\n}\n\ntype SelectionStep = 'country' | 'documentType' | 'region';\n\ntype ExtendedIDCardConfig = IDCardConfig & {\n  selectedCountries?: string[];\n  documentTypesByCountry?: Record<string, string[]>;\n  regionsByCountry?: Record<string, Record<string, string[]>>;\n  instructionsByDocumentType?: Record<string, LocalizedText>;\n};\n\nexport const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> = ({\n  component,\n  value,\n  onValueChange,\n  error,\n  language = 'en',\n}) => {\n  const config = component.config as CountrySelectionConfig;\n  const { actions, state } = useTemplateKYCFlowContext();\n\n  const idCardComponent = useMemo(() => {\n    return state.template.components.find(c => c.type === 'id_card');\n  }, [state.template.components]);\n\n  const idCardConfig = useMemo(() => {\n    return idCardComponent?.config as ExtendedIDCardConfig | undefined;\n  }, [idCardComponent]);\n\n  const [currentStep, setCurrentStep] = useState<SelectionStep>(() => {\n    if (value?.code && value?.documentType) {\n      if (value.region) return 'region';\n      return 'documentType';\n    }\n    return 'country';\n  });\n\n  const [selectedCountryCode, setSelectedCountryCode] = useState<string | null>(value?.code || null);\n  const [selectedDocumentType, setSelectedDocumentType] = useState<string | null>(value?.documentType || null);\n  const [selectedRegion, setSelectedRegion] = useState<string | null>(value?.region || null);\n\n  useEffect(() => {\n    if (value?.code && value?.documentType) {\n      setSelectedCountryCode(value.code);\n      setSelectedDocumentType(value.documentType);\n      setSelectedRegion(value.region || null);\n      if (value.region) {\n        setCurrentStep('region');\n      } else {\n        const needsRegionCheck = value.code && value.documentType && idCardConfig?.regionsByCountry?.[value.code]?.[value.documentType];\n        if (needsRegionCheck && Array.isArray(needsRegionCheck) && needsRegionCheck.length > 0) {\n          setCurrentStep('region');\n        } else {\n          setCurrentStep('documentType');\n        }\n      }\n    } else {\n      setSelectedCountryCode(null);\n      setSelectedDocumentType(null);\n      setSelectedRegion(null);\n      setCurrentStep('country');\n    }\n  }, [value?.code, value?.documentType, value?.region, idCardConfig]);\n\n  useEffect(() => {\n    if (error) {\n      actions.updateComponentData(component.id, value); \n    }\n  }, []);\n\n  const availableCountries = useMemo(() => {\n    const countries = idCardConfig?.selectedCountries || config.allowed_countries || Object.keys(countryData);\n    return countries\n      .filter((code: string) => countryData[code])\n      .map((code: string) => ({ code, ...countryData[code] }))\n      .sort((a: Country & { code?: string }, b: Country & { code?: string }) => a.name.localeCompare(b.name));\n  }, [idCardConfig?.selectedCountries, config.allowed_countries]);\n\n  const availableDocumentTypes = useMemo(() => {\n    if (!selectedCountryCode || !idCardConfig?.documentTypesByCountry) return [];\n    return idCardConfig.documentTypesByCountry[selectedCountryCode] || [];\n  }, [selectedCountryCode, idCardConfig?.documentTypesByCountry]);\n\n  const availableRegions = useMemo(() => {\n    if (!selectedCountryCode || !selectedDocumentType || !idCardConfig?.regionsByCountry) return [];\n    const regions = idCardConfig.regionsByCountry[selectedCountryCode];\n    if (!regions) return [];\n    return Array.isArray(regions[selectedDocumentType]) ? regions[selectedDocumentType] : [];\n  }, [selectedCountryCode, selectedDocumentType, idCardConfig?.regionsByCountry]);\n\n  const needsRegion = useMemo(() => {\n    return availableRegions.length > 0;\n  }, [availableRegions]);\n\n  const getLocalizedText = (text: LocalizedText): string => {\n    return text[state.currentLanguage] || text.en || '';\n  };\n\n  // 1. Only highlights the country\n  const handleCountrySelect = (countryCode: string) => {\n    setSelectedCountryCode(countryCode);\n    setSelectedDocumentType(null);\n    setSelectedRegion(null);\n  };\n\n  // 2. Only highlights the document type\n  const handleDocumentTypeSelect = (docType: string) => {\n    setSelectedDocumentType(docType);\n    setSelectedRegion(null);\n  };\n\n  // 3. Only highlights the region\n  const handleRegionSelect = (region: string) => {\n    setSelectedRegion(region);\n  };\n\n  const finalizeSelection = (countryCode: string, docType: string, region: string | null) => {\n    const country = countryData[countryCode];\n    if (!country) return;\n\n    const mapping = countryMapping[countryCode as keyof typeof countryMapping];\n    const countryObj: Country & { documentType?: string; region?: string } = {\n      code: countryCode,\n      ...country,\n      regionMapping: mapping,\n      documentType: docType,\n      region: region || undefined,\n    };\n\n    onValueChange(countryObj);\n    \n    setTimeout(() => {\n      actions.nextComponent(countryObj); \n    }, 100);\n  };\n\n  const handleBack = () => {\n    if (currentStep === 'region') {\n      setCurrentStep('documentType');\n      setSelectedRegion(null);\n    } else if (currentStep === 'documentType') {\n      setCurrentStep('country');\n      setSelectedDocumentType(null);\n      setSelectedRegion(null);\n    } else if (currentStep === 'country') {\n      actions.previousComponent();\n    }\n  };\n\n  const handleNext = () => {\n    if (currentStep === 'country' && selectedCountryCode) {\n      setCurrentStep('documentType');\n    } else if (currentStep === 'documentType' && selectedDocumentType) {\n      if (needsRegion) {\n        setCurrentStep('region');\n      } else {\n        if (selectedCountryCode) {\n          finalizeSelection(selectedCountryCode, selectedDocumentType, null);\n        }\n      }\n    } else if (currentStep === 'region' && selectedRegion) {\n      if (selectedCountryCode && selectedDocumentType) {\n        finalizeSelection(selectedCountryCode, selectedDocumentType, selectedRegion);\n      }\n    }\n  };\n\n  const renderCountrySelection = () => {\n    return (\n      <>\n        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>\n          {availableCountries.map((country: Country & { code?: string }) => (\n            <TouchableOpacity\n              key={country.code}\n              style={[\n                styles.option,\n                selectedCountryCode === country.code && styles.selectedOption\n              ]}\n              onPress={() => handleCountrySelect(country.code!)}\n            >\n              <Text style={styles.flag}>{country.flag}</Text>\n              <View style={styles.optionContent}>\n                <Text style={[\n                  styles.optionName,\n                  selectedCountryCode === country.code && styles.selectedOptionName\n                ]}>\n                  {state.currentLanguage === \"en\" ? country.name_en : country.name}\n                </Text>\n                <Text style={styles.optionCode}>{country.code}</Text>\n              </View>\n              {selectedCountryCode === country.code && (\n                <View style={[\n                  styles.checkmark,\n                  { backgroundColor: component.ui.themeColor as string || '#2DBD60' }\n                ]}>\n                  <Text style={styles.checkmarkText}>✓</Text>\n                </View>\n              )}\n            </TouchableOpacity>\n          ))}\n        </ScrollView>\n      </>\n    );\n  };\n\n  const renderDocumentTypeSelection = () => {\n    const instructions = selectedDocumentType && idCardConfig?.instructionsByDocumentType?.[selectedDocumentType]\n      ? getLocalizedText(idCardConfig.instructionsByDocumentType[selectedDocumentType])\n      : null;\n\n    const documentTypeLabels: Record<string, { en: string; fr: string; icon?: string }> = {\n      'nationalId': { en: 'National ID', fr: 'Carte nationale d\\'identité', icon: '🏛️' },\n      'passport': { en: 'Passport', fr: 'Passeport', icon: '📘' },\n      'driversLicense': { en: 'Driver\\'s License', fr: 'Permis de conduire', icon: '🚗' },\n      'residencePermit': { en: 'Residence Permit', fr: 'Permis de séjour', icon: '🏠' },\n      'healthInsuranceCard': { en: 'Health Insurance Card', fr: 'Carte d\\'assurance maladie', icon: '🗳️' },\n    };\n\n    return (\n      <>\n        {instructions && (\n          <View style={styles.infoBox}>\n            <Text style={styles.infoText}>{instructions}</Text>\n          </View>\n        )}\n        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>\n          {availableDocumentTypes.map((docType: string) => {\n            const label = documentTypeLabels[docType];\n            const displayName = label ? (state.currentLanguage === \"en\" ? label.en : label.fr) : docType;\n            const icon = label?.icon || '📄';\n\n            return (\n              <TouchableOpacity\n                key={docType}\n                style={[\n                  styles.option,\n                  selectedDocumentType === docType && styles.selectedOption\n                ]}\n                onPress={() => handleDocumentTypeSelect(docType)}\n              >\n                <Text style={styles.flag}>{icon}</Text>\n                <View style={styles.optionContent}>\n                  <Text style={[\n                    styles.optionName,\n                    selectedDocumentType === docType && styles.selectedOptionName\n                  ]}>\n                    {displayName}\n                  </Text>\n                </View>\n                {selectedDocumentType === docType && (\n                  <View style={[\n                    styles.checkmark,\n                    { backgroundColor: component.ui.themeColor as string || '#2DBD60' }\n                  ]}>\n                    <Text style={styles.checkmarkText}>✓</Text>\n                  </View>\n                )}\n              </TouchableOpacity>\n            );\n          })}\n        </ScrollView>\n      </>\n    );\n  };\n\n  const renderRegionSelection = () => {\n    return (\n      <>\n        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>\n          {availableRegions.map((region: string, index: number) => {\n            const regionLabel = typeof region === 'string' ? region : String(region);\n            return (\n              <TouchableOpacity\n                key={index}\n                style={[\n                  styles.option,\n                  selectedRegion === regionLabel && styles.selectedOption\n                ]}\n                onPress={() => handleRegionSelect(regionLabel)}\n              >\n                <View style={styles.optionContent}>\n                  <Text style={[\n                    styles.optionName,\n                    selectedRegion === regionLabel && styles.selectedOptionName\n                  ]}>\n                    {regionLabel}\n                  </Text>\n                </View>\n                {selectedRegion === regionLabel && (\n                  <View style={[\n                    styles.checkmark,\n                    { backgroundColor: component.ui.themeColor as string || '#2DBD60' }\n                  ]}>\n                    <Text style={styles.checkmarkText}>✓</Text>\n                  </View>\n                )}\n              </TouchableOpacity>\n            );\n          })}\n        </ScrollView>\n      </>\n    );\n  };\n\n  const getStepTitle = (): string => {\n    switch (currentStep) {\n      case 'country':\n        return getLocalizedText(component.labels as LocalizedText);\n      case 'documentType':\n        return state.currentLanguage === \"en\" ? \"Select Document Type\" : \"Sélectionnez le type de document\";\n      case 'region':\n        return state.currentLanguage === \"en\" ? \"Select Region\" : \"Sélectionnez la région\";\n      default:\n        return '';\n    }\n  };\n\n  const getStepDescription = (): string => {\n    switch (currentStep) {\n      case 'country':\n        return getLocalizedText(component.instructions as LocalizedText);\n      case 'documentType':\n        return state.currentLanguage === \"en\" \n          ? \"Choose the type of document you want to use\"\n          : \"Choisissez le type de document que vous souhaitez utiliser\";\n      case 'region':\n        return state.currentLanguage === \"en\"\n          ? \"Select your region\"\n          : \"Sélectionnez votre région\";\n      default:\n        return '';\n    }\n  };\n\n  const getProgressStep = (): number => {\n    if (currentStep === 'country') return 1;\n    if (currentStep === 'documentType') return 2;\n    return 3;\n  };\n\n  const getTotalSteps = (): number => {\n    return needsRegion ? 3 : 2;\n  };\n\n  const canGoNext = (): boolean => {\n    if (currentStep === 'country') return selectedCountryCode !== null;\n    if (currentStep === 'documentType') return selectedDocumentType !== null;\n    if (currentStep === 'region') return selectedRegion !== null;\n    return false;\n  };\n\n  return (\n    <View style={styles.root}>\n      <View style={styles.container}>\n        <View style={styles.progressContainer}>\n          <Text style={styles.progressText}>\n            {state.currentLanguage === \"en\" \n              ? `Step ${getProgressStep()} of ${getTotalSteps()}`\n              : `Étape ${getProgressStep()} sur ${getTotalSteps()}`}\n          </Text>\n        </View>\n\n        <Text style={styles.title}>{getStepTitle()}</Text>\n        <Text style={styles.description}>{getStepDescription()}</Text>\n\n        {currentStep === 'country' && renderCountrySelection()}\n        {currentStep === 'documentType' && renderDocumentTypeSelection()}\n        {currentStep === 'region' && renderRegionSelection()}\n\n        <View style={styles.buttonContainer}>\n          <Button\n            title={state.currentLanguage === \"en\" ? \"Back\" : \"Retour\"}\n            onPress={handleBack}\n            variant={currentStep === 'country' ? \"secondary\" : \"outline\"}\n            size=\"large\"\n            style={{ flex: 1, marginRight: 8 }} \n          />\n          \n          <Button\n            title={state.currentLanguage === \"en\" ? \"Next\" : \"Suivant\"}\n            onPress={handleNext}\n            variant=\"primary\"\n            size=\"large\"\n            style={{ flex: 1 }}\n            disabled={!canGoNext()}\n          />\n        </View>\n\n        {error && (\n          <Text style={styles.errorText}>{error}</Text>\n        )}\n      </View>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  root: {\n    flex: 1,\n    maxWidth: 760,\n    width: '100%',\n  },\n  container: {\n    backgroundColor: 'white',\n    margin: 10,\n    borderRadius: 10,\n    paddingVertical: 16,\n    paddingHorizontal: 16,\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.35,\n    shadowRadius: 4.84,\n    elevation: 10,\n  },\n  progressContainer: {\n    marginBottom: 16,\n    alignItems: 'center',\n  },\n  progressText: {\n    fontSize: 14,\n    color: '#666',\n    fontWeight: '500',\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  listContainer: {\n    maxHeight: 400,\n    marginBottom: 24,\n  },\n  option: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    padding: 16,\n    backgroundColor: '#F8F9FA',\n    borderRadius: 12,\n    marginBottom: 12,\n    borderWidth: 2,\n    borderColor: '#E9ECEF',\n    minHeight: 64,\n  },\n  selectedOption: {\n    borderColor: '#2DBD60',\n    backgroundColor: '#F0F9F0',\n  },\n  flag: {\n    fontSize: 32,\n    marginRight: 16,\n  },\n  optionContent: {\n    flex: 1,\n  },\n  optionName: {\n    fontSize: 18,\n    fontWeight: '600',\n    color: '#333',\n  },\n  selectedOptionName: {\n    color: '#2DBD60',\n  },\n  optionCode: {\n    fontSize: 14,\n    color: '#666',\n    marginTop: 4,\n    fontWeight: '500',\n  },\n  checkmark: {\n    width: 24,\n    height: 24,\n    borderRadius: 12,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  checkmarkText: {\n    color: 'white',\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n  infoBox: {\n    backgroundColor: '#F9FAFB',\n    padding: 12,\n    borderRadius: 12,\n    marginBottom: 16,\n  },\n  infoText: {\n    fontSize: 14,\n    color: '#666',\n    lineHeight: 20,\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    marginTop: 24,\n    gap: 12,\n  },\n  errorText: {\n    color: '#dc2626',\n    fontSize: 14,\n    marginTop: 8,\n    textAlign: 'center',\n  },\n});"]}

package/build/components/KYCElements/DocumentTypeSelection.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { KYCElement } from '../../types/KYC.types';
+interface DocumentTypeSelectionProps {
+    element: KYCElement;
+    value?: string;
+    onValueChange: (value: string) => void;
+    error?: string;
+}
+export declare const DocumentTypeSelection: React.FC<DocumentTypeSelectionProps>;
+export {};
+//# sourceMappingURL=DocumentTypeSelection.d.ts.map

package/build/components/KYCElements/DocumentTypeSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentTypeSelection.d.ts","sourceRoot":"","sources":["../../../src/components/KYCElements/DocumentTypeSelection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AAErE,UAAU,0BAA0B;IAClC,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6BD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAiDtE,CAAC"}