@sanctum-key/react-native-sdk 1.0.49 → 1.0.51

package/build/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sanctum-key/react-native-sdk",
-    "version": "1.0.49",
+    "version": "1.0.51",
     "description": "Sanctum Key React Native SDK",
     "main": "build/src/index.js",
     "types": "build/src/index.d.ts",

package/build/src/components/KYCElements/CountrySelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CountrySelection.d.ts","sourceRoot":"","sources":["../../../../src/components/KYCElements/CountrySelection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AAErE,UAAU,qBAAqB;IAC7B,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;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2G5D,CAAC"}
+{"version":3,"file":"CountrySelection.d.ts","sourceRoot":"","sources":["../../../../src/components/KYCElements/CountrySelection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AAIrE,UAAU,qBAAqB;IAC7B,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;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoH5D,CAAC"}

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

@@ -1,9 +1,18 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, FlatList, TextInput } from 'react-native';
+import { sdkLogger } from '../../utils/logger';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 export const CountrySelection = ({ element, value, onValueChange, error, }) => {
     const countries = element.options || [];
-    console.log(`Countries options: ${countries}`);
     const [searchQuery, setSearchQuery] = useState('');
+    const { state } = useTemplateKYCFlowContext();
+    useEffect(() => {
+        if (state.session?.session_id) {
+            sdkLogger.info("User started country selection step", {
+                availableCountriesCount: countries.length
+            });
+        }
+    }, [state.session?.session_id, countries.length]);
     // Filter countries based on user input
     const filteredCountries = useMemo(() => {
         if (!searchQuery.trim())
@@ -16,11 +25,13 @@ export const CountrySelection = ({ element, value, onValueChange, error, }) => {
         return (<TouchableOpacity style={[
                 styles.option,
                 isSelected && styles.selectedOption
-            ]} onPress={() => onValueChange(country.value)} activeOpacity={0.7} 
+            ]} onPress={() => {
+                sdkLogger.info("User selected country", { countryCode: country.value }); // 🚨 LOG
+                onValueChange(country.value);
+            }} activeOpacity={0.7} 
         // Accessibility Enhancements
         accessible={true} accessibilityRole="button" accessibilityState={{ selected: isSelected }} accessibilityLabel={`${country.label}. ${isSelected ? 'Selected' : 'Unselected'}.`} accessibilityHint={`Tap to select ${country.label} as your country`}>
         <Text style={styles.optionIcon}>{country.icon}</Text>
-        
         <View style={styles.optionContent}>
           <Text style={[
                 styles.optionLabel,
@@ -30,7 +41,6 @@ export const CountrySelection = ({ element, value, onValueChange, error, }) => {
           </Text>
           {country.description && (<Text style={styles.optionDescription}>{country.description}</Text>)}
         </View>
-
         {isSelected && (<View style={styles.checkmark}>
             <Text style={styles.checkmarkText}>✓</Text>
           </View>)}
@@ -40,7 +50,7 @@ export const CountrySelection = ({ element, value, onValueChange, error, }) => {
       <View style={styles.headerContainer}>
         <Text style={styles.title} accessibilityRole="header">{element.title}</Text>
         <Text style={styles.description}>{element.description}</Text>
-        
+
         {/* Search Bar */}
         <TextInput style={styles.searchInput} placeholder="Rechercher un pays..." placeholderTextColor="#999" value={searchQuery} onChangeText={setSearchQuery} clearButtonMode="while-editing" // Adds a clear 'x' on iOS
      
@@ -53,111 +63,26 @@ export const CountrySelection = ({ element, value, onValueChange, error, }) => {
      initialNumToRender={15} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews={true} accessibilityRole="list" ListEmptyComponent={<Text style={styles.emptyText} accessibilityRole="text">
             Aucun pays configuré ou trouvé.
           </Text>}/>
-
       {error && (<Text style={styles.errorText} accessibilityRole="alert">{error}</Text>)}
     </View>);
 };
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#fff',
-    },
-    headerContainer: {
-        paddingHorizontal: 16,
-        paddingTop: 16,
-        paddingBottom: 8,
-    },
-    title: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        color: '#333',
-        marginBottom: 8,
-        textAlign: 'center',
-    },
-    description: {
-        fontSize: 16,
-        color: '#666',
-        textAlign: 'center',
-        marginBottom: 16,
-        lineHeight: 22,
-    },
-    searchInput: {
-        backgroundColor: '#f5f5f5',
-        borderRadius: 10,
-        padding: 12,
-        fontSize: 16,
-        color: '#333',
-        borderWidth: 1,
-        borderColor: '#e5e5e5',
-        marginBottom: 8,
-    },
-    listContent: {
-        paddingHorizontal: 16,
-        paddingBottom: 24,
-    },
-    emptyText: {
-        textAlign: 'center',
-        color: '#999',
-        marginTop: 20,
-        fontSize: 16,
-    },
-    option: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 16,
-        backgroundColor: 'white',
-        borderRadius: 12,
-        marginBottom: 12,
-        borderWidth: 2,
-        borderColor: '#e5e5e5',
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.05,
-        shadowRadius: 3.84,
-        elevation: 3,
-    },
-    selectedOption: {
-        borderColor: '#4CAF50',
-        backgroundColor: '#f0f9f0',
-    },
-    optionIcon: {
-        fontSize: 32,
-        marginRight: 16,
-    },
-    optionContent: {
-        flex: 1,
-    },
-    optionLabel: {
-        fontSize: 18,
-        fontWeight: '600',
-        color: '#333',
-    },
-    selectedOptionLabel: {
-        color: '#4CAF50',
-    },
-    optionDescription: {
-        fontSize: 14,
-        color: '#666',
-        marginTop: 4,
-    },
-    checkmark: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-        backgroundColor: '#4CAF50',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    checkmarkText: {
-        color: 'white',
-        fontSize: 16,
-        fontWeight: 'bold',
-    },
-    errorText: {
-        color: '#dc2626',
-        fontSize: 14,
-        margin: 16,
-        textAlign: 'center',
-    },
+    container: { flex: 1, backgroundColor: '#fff', },
+    headerContainer: { paddingHorizontal: 16, paddingTop: 16, paddingBottom: 8, },
+    title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center', },
+    description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22, },
+    searchInput: { backgroundColor: '#f5f5f5', borderRadius: 10, padding: 12, fontSize: 16, color: '#333', borderWidth: 1, borderColor: '#e5e5e5', marginBottom: 8, },
+    listContent: { paddingHorizontal: 16, paddingBottom: 24, },
+    emptyText: { textAlign: 'center', color: '#999', marginTop: 20, fontSize: 16, },
+    option: { flexDirection: 'row', alignItems: 'center', padding: 16, backgroundColor: 'white', borderRadius: 12, marginBottom: 12, borderWidth: 2, borderColor: '#e5e5e5', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.05, shadowRadius: 3.84, elevation: 3, },
+    selectedOption: { borderColor: '#4CAF50', backgroundColor: '#f0f9f0', },
+    optionIcon: { fontSize: 32, marginRight: 16, },
+    optionContent: { flex: 1, },
+    optionLabel: { fontSize: 18, fontWeight: '600', color: '#333', },
+    selectedOptionLabel: { color: '#4CAF50', },
+    optionDescription: { fontSize: 14, color: '#666', marginTop: 4, },
+    checkmark: { width: 24, height: 24, borderRadius: 12, backgroundColor: '#4CAF50', justifyContent: 'center', alignItems: 'center', },
+    checkmarkText: { color: 'white', fontSize: 16, fontWeight: 'bold', },
+    errorText: { color: '#dc2626', fontSize: 14, margin: 16, textAlign: 'center', },
 });
 //# sourceMappingURL=CountrySelection.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CountrySelection.js","sourceRoot":"","sources":["../../../../src/components/KYCElements/CountrySelection.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, FlatList, TextInput } 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\nexport const CountrySelection: React.FC<CountrySelectionProps> = ({\n  element,\n  value,\n  onValueChange,\n  error,\n}) => {\n  const countries = element.options || [];\n  console.log(`Countries options: ${countries}`)\n\n  const [searchQuery, setSearchQuery] = useState('');\n\n  // Filter countries based on user input\n  const filteredCountries = useMemo(() => {\n    if (!searchQuery.trim()) return countries;\n    return countries.filter(country =>\n      country.label.toLowerCase().includes(searchQuery.toLowerCase())\n    );\n  }, [countries, searchQuery]);\n\n  // Extract the render logic into a separate function for FlatList performance\n  const renderCountry = ({ item: country }: { item: KYCElementOption }) => {\n    const isSelected = value === country.value;\n\n    return (\n      <TouchableOpacity\n        style={[\n          styles.option,\n          isSelected && styles.selectedOption\n        ]}\n        onPress={() => onValueChange(country.value)}\n        activeOpacity={0.7}\n        // Accessibility Enhancements\n        accessible={true}\n        accessibilityRole=\"button\"\n        accessibilityState={{ selected: isSelected }}\n        accessibilityLabel={`${country.label}. ${isSelected ? 'Selected' : 'Unselected'}.`}\n        accessibilityHint={`Tap to select ${country.label} as your country`}\n      >\n        <Text style={styles.optionIcon}>{country.icon}</Text>\n        \n        <View style={styles.optionContent}>\n          <Text style={[\n            styles.optionLabel,\n            isSelected && styles.selectedOptionLabel\n          ]}>\n            {country.label}\n          </Text>\n          {country.description && (\n            <Text style={styles.optionDescription}>{country.description}</Text>\n          )}\n        </View>\n\n        {isSelected && (\n          <View style={styles.checkmark}>\n            <Text style={styles.checkmarkText}>✓</Text>\n          </View>\n        )}\n      </TouchableOpacity>\n    );\n  };\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.headerContainer}>\n        <Text style={styles.title} accessibilityRole=\"header\">{element.title}</Text>\n        <Text style={styles.description}>{element.description}</Text>\n        \n        {/* Search Bar */}\n        <TextInput\n          style={styles.searchInput}\n          placeholder=\"Rechercher un pays...\"\n          placeholderTextColor=\"#999\"\n          value={searchQuery}\n          onChangeText={setSearchQuery}\n          clearButtonMode=\"while-editing\" // Adds a clear 'x' on iOS\n          // Accessibility for Search\n          accessibilityRole=\"search\"\n          accessibilityLabel=\"Search countries\"\n          accessibilityHint=\"Type to filter the list of configured countries below\"\n        />\n      </View>\n\n      <FlatList\n        data={filteredCountries}\n        keyExtractor={(item) => item.value}\n        renderItem={renderCountry}\n        showsVerticalScrollIndicator={true} // Enable scroll indicator for better UX visibility\n        contentContainerStyle={styles.listContent}\n        keyboardShouldPersistTaps=\"handled\"\n        keyboardDismissMode=\"on-drag\" // 🚨 UX FIX: Hides keyboard naturally when user starts scrolling\n        initialNumToRender={15}\n        maxToRenderPerBatch={20}\n        windowSize={5}\n        removeClippedSubviews={true}\n        accessibilityRole=\"list\"\n        ListEmptyComponent={\n          <Text style={styles.emptyText} accessibilityRole=\"text\">\n            Aucun pays configuré ou trouvé.\n          </Text>\n        }\n      />\n\n      {error && (\n        <Text style={styles.errorText} accessibilityRole=\"alert\">{error}</Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#fff',\n  },\n  headerContainer: {\n    paddingHorizontal: 16,\n    paddingTop: 16,\n    paddingBottom: 8,\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: 16,\n    lineHeight: 22,\n  },\n  searchInput: {\n    backgroundColor: '#f5f5f5',\n    borderRadius: 10,\n    padding: 12,\n    fontSize: 16,\n    color: '#333',\n    borderWidth: 1,\n    borderColor: '#e5e5e5',\n    marginBottom: 8,\n  },\n  listContent: {\n    paddingHorizontal: 16,\n    paddingBottom: 24,\n  },\n  emptyText: {\n    textAlign: 'center',\n    color: '#999',\n    marginTop: 20,\n    fontSize: 16,\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: { width: 0, height: 2 },\n    shadowOpacity: 0.05,\n    shadowRadius: 3.84,\n    elevation: 3,\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    margin: 16,\n    textAlign: 'center',\n  },\n});"]}
+{"version":3,"file":"CountrySelection.js","sourceRoot":"","sources":["../../../../src/components/KYCElements/CountrySelection.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useMemo, useEffect } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, FlatList, TextInput } from 'react-native';\nimport { KYCElement, KYCElementOption } from '../../types/KYC.types';\nimport { sdkLogger } from '../../utils/logger'; \nimport { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow'; \n\ninterface CountrySelectionProps {\n  element: KYCElement;\n  value?: string;\n  onValueChange: (value: string) => void;\n  error?: string;\n}\n\nexport const CountrySelection: React.FC<CountrySelectionProps> = ({\n  element,\n  value,\n  onValueChange,\n  error,\n}) => {\n  const countries = element.options || [];\n  const [searchQuery, setSearchQuery] = useState('');\n  \n  const { state } = useTemplateKYCFlowContext();\n\n  useEffect(() => {\n    if (state.session?.session_id) {\n      sdkLogger.info(\"User started country selection step\", { \n        availableCountriesCount: countries.length \n      });\n    }\n  }, [state.session?.session_id, countries.length]);\n\n  // Filter countries based on user input\n  const filteredCountries = useMemo(() => {\n    if (!searchQuery.trim()) return countries;\n    return countries.filter(country =>\n      country.label.toLowerCase().includes(searchQuery.toLowerCase())\n    );\n  }, [countries, searchQuery]);\n\n  // Extract the render logic into a separate function for FlatList performance\n  const renderCountry = ({ item: country }: { item: KYCElementOption }) => {\n    const isSelected = value === country.value;\n\n    return (\n      <TouchableOpacity\n        style={[\n          styles.option,\n          isSelected && styles.selectedOption\n        ]}\n        onPress={() => {\n          sdkLogger.info(\"User selected country\", { countryCode: country.value }); // 🚨 LOG\n          onValueChange(country.value);\n        }}\n        activeOpacity={0.7}\n        // Accessibility Enhancements\n        accessible={true}\n        accessibilityRole=\"button\"\n        accessibilityState={{ selected: isSelected }}\n        accessibilityLabel={`${country.label}. ${isSelected ? 'Selected' : 'Unselected'}.`}\n        accessibilityHint={`Tap to select ${country.label} as your country`}\n      >\n        <Text style={styles.optionIcon}>{country.icon}</Text>\n        <View style={styles.optionContent}>\n          <Text style={[\n            styles.optionLabel,\n            isSelected && styles.selectedOptionLabel\n          ]}>\n            {country.label}\n          </Text>\n          {country.description && (\n            <Text style={styles.optionDescription}>{country.description}</Text>\n          )}\n        </View>\n        {isSelected && (\n          <View style={styles.checkmark}>\n            <Text style={styles.checkmarkText}>✓</Text>\n          </View>\n        )}\n      </TouchableOpacity>\n    );\n  };\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.headerContainer}>\n        <Text style={styles.title} accessibilityRole=\"header\">{element.title}</Text>\n        <Text style={styles.description}>{element.description}</Text>\n\n        {/* Search Bar */}\n        <TextInput\n          style={styles.searchInput}\n          placeholder=\"Rechercher un pays...\"\n          placeholderTextColor=\"#999\"\n          value={searchQuery}\n          onChangeText={setSearchQuery}\n          clearButtonMode=\"while-editing\" // Adds a clear 'x' on iOS\n          \n          // Accessibility for Search\n          accessibilityRole=\"search\"\n          accessibilityLabel=\"Search countries\"\n          accessibilityHint=\"Type to filter the list of configured countries below\"\n        />\n      </View>\n\n      <FlatList\n        data={filteredCountries}\n        keyExtractor={(item) => item.value}\n        renderItem={renderCountry}\n        showsVerticalScrollIndicator={true} // Enable scroll indicator for better UX visibility\n        contentContainerStyle={styles.listContent}\n        keyboardShouldPersistTaps=\"handled\"\n        keyboardDismissMode=\"on-drag\" // 🚨 UX FIX: Hides keyboard naturally when user starts scrolling\n        initialNumToRender={15}\n        maxToRenderPerBatch={20}\n        windowSize={5}\n        removeClippedSubviews={true}\n        accessibilityRole=\"list\"\n        ListEmptyComponent={\n          <Text style={styles.emptyText} accessibilityRole=\"text\">\n            Aucun pays configuré ou trouvé.\n          </Text>\n        }\n      />\n      {error && (\n        <Text style={styles.errorText} accessibilityRole=\"alert\">{error}</Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { flex: 1, backgroundColor: '#fff', },\n  headerContainer: { paddingHorizontal: 16, paddingTop: 16, paddingBottom: 8, },\n  title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center', },\n  description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22, },\n  searchInput: { backgroundColor: '#f5f5f5', borderRadius: 10, padding: 12, fontSize: 16, color: '#333', borderWidth: 1, borderColor: '#e5e5e5', marginBottom: 8, },\n  listContent: { paddingHorizontal: 16, paddingBottom: 24, },\n  emptyText: { textAlign: 'center', color: '#999', marginTop: 20, fontSize: 16, },\n  option: { flexDirection: 'row', alignItems: 'center', padding: 16, backgroundColor: 'white', borderRadius: 12, marginBottom: 12, borderWidth: 2, borderColor: '#e5e5e5', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.05, shadowRadius: 3.84, elevation: 3, },\n  selectedOption: { borderColor: '#4CAF50', backgroundColor: '#f0f9f0', },\n  optionIcon: { fontSize: 32, marginRight: 16, },\n  optionContent: { flex: 1, },\n  optionLabel: { fontSize: 18, fontWeight: '600', color: '#333', },\n  selectedOptionLabel: { color: '#4CAF50', },\n  optionDescription: { fontSize: 14, color: '#666', marginTop: 4, },\n  checkmark: { width: 24, height: 24, borderRadius: 12, backgroundColor: '#4CAF50', justifyContent: 'center', alignItems: 'center', },\n  checkmarkText: { color: 'white', fontSize: 16, fontWeight: 'bold', },\n  errorText: { color: '#dc2626', fontSize: 14, margin: 16, textAlign: 'center', },\n});"]}

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

@@ -1 +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;AAOxH,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;AAuCD,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAqe5E,CAAC"}
+{"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;AAQxH,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;AAeD,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAqT5E,CAAC"}

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

@@ -5,40 +5,21 @@ import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { Button } from '../ui/Button';
 import { countryData } from '../../config/countriesData';
 import REGION_MAPPING from '../../config/region_mapping.json';
+import { sdkLogger } from '../../utils/logger'; // 🚨 IMPORT SDK LOGGER
 const ISO_TO_COUNTRY_NAME = { 'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada', 'FR': 'France', 'GH': 'Ghana', 'ZA': 'South Africa', 'GB': 'Britain', 'CI': 'Ivory Coast', 'SN': 'Senegal', 'TG': 'Togo', 'ML': 'Mali' };
-const jsonDocMap = {
-    'nationalId': 'identity_card',
-    'national_id': 'identity_card',
-    'passport': 'passport',
-    'driversLicense': 'drivers_licence',
-    'drivers_licence': 'drivers_licence',
-    'residencePermit': 'permanent_residence',
-    'healthInsuranceCard': 'health_insurance_card'
-};
-const SUB_REGION_CODES = {
-    "Alberta": "AB",
-    "British Columbia": "BC",
-    "Manitoba": "MB",
-    "New Brunswick": "NB",
-    "Newfoundland and Labrador": "NL",
-    "Northwest Territories": "NT",
-    "Nova Scotia": "NS",
-    "Nunavut": "NU",
-    "Ontario": "ON",
-    "Prince Edward Island": "PE",
-    "Quebec": "QC",
-    "Saskatchewan": "SK",
-    "Yukon": "YT"
-};
+const jsonDocMap = { 'nationalId': 'identity_card', 'national_id': 'identity_card', 'passport': 'passport', 'driversLicense': 'drivers_licence', 'drivers_licence': 'drivers_licence', 'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card' };
+const SUB_REGION_CODES = { "Alberta": "AB", "British Columbia": "BC", "Manitoba": "MB", "New Brunswick": "NB", "Newfoundland and Labrador": "NL", "Northwest Territories": "NT", "Nova Scotia": "NS", "Nunavut": "NU", "Ontario": "ON", "Prince Edward Island": "PE", "Quebec": "QC", "Saskatchewan": "SK", "Yukon": "YT" };
 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]);
+    // 🚨 LOG: Track when the user reaches this step
+    useEffect(() => {
+        if (state.session?.session_id) {
+            sdkLogger.info("User started country and document selection step");
+        }
+    }, [state.session?.session_id]);
+    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)
@@ -107,18 +88,14 @@ export const CountrySelectionTemplate = ({ component, value, onValueChange, erro
         if (!searchQuery.trim())
             return availableCountries;
         const cleanQuery = searchQuery.toLowerCase().trim();
-        return availableCountries.filter(country => country.name.toLowerCase().includes(cleanQuery) ||
-            country.name_en.toLowerCase().includes(cleanQuery) ||
-            country.code.toLowerCase().includes(cleanQuery));
+        return availableCountries.filter(country => country.name.toLowerCase().includes(cleanQuery) || country.name_en.toLowerCase().includes(cleanQuery) || country.code.toLowerCase().includes(cleanQuery));
     }, [searchQuery, availableCountries]);
     const availableDocumentTypes = useMemo(() => {
         if (!selectedCountryCode)
             return [];
-        // Check if custom layout configuration explicitly defined items for it
         if (idCardConfig?.documentTypesByCountry?.[selectedCountryCode]) {
             return idCardConfig.documentTypesByCountry[selectedCountryCode];
         }
-        // Default Fallback: Query mapping matrix dynamically
         const rawCountryName = ISO_TO_COUNTRY_NAME[selectedCountryCode] || selectedCountryCode;
         const baseMapping = REGION_MAPPING.regionMapping || REGION_MAPPING;
         let countryMapping = baseMapping[rawCountryName];
@@ -128,13 +105,7 @@ export const CountrySelectionTemplate = ({ component, value, onValueChange, erro
                 countryMapping = baseMapping[foundKey];
         }
         if (countryMapping) {
-            const inverseDocMap = {
-                'identity_card': 'nationalId',
-                'passport': 'passport',
-                'drivers_licence': 'driversLicense',
-                'permanent_residence': 'residencePermit',
-                'health_insurance_card': 'healthInsuranceCard'
-            };
+            const inverseDocMap = { 'identity_card': 'nationalId', 'passport': 'passport', 'drivers_licence': 'driversLicense', 'permanent_residence': 'residencePermit', 'health_insurance_card': 'healthInsuranceCard' };
             return Object.keys(countryMapping).map(key => inverseDocMap[key] || key);
         }
         return ['nationalId', 'passport', 'driversLicense'];
@@ -162,47 +133,32 @@ export const CountrySelectionTemplate = ({ component, value, onValueChange, erro
         }
         if (!Array.isArray(rawRegions))
             return [];
-        return rawRegions.sort((a, b) => a.localeCompare(b)).map(region => ({
-            label: region,
-            value: SUB_REGION_CODES[region] || region
-        }));
+        return rawRegions.sort((a, b) => a.localeCompare(b)).map(region => ({ label: region, value: SUB_REGION_CODES[region] || region }));
     }, [selectedCountryCode, selectedDocumentType, idCardConfig?.regionsByCountry]);
-    const needsRegion = useMemo(() => {
-        return availableRegions.length > 0;
-    }, [availableRegions]);
-    const getLocalizedText = (text) => {
-        return text[state.currentLanguage] || text.en || '';
-    };
-    const handleCountrySelect = (countryCode) => {
-        setSelectedCountryCode(countryCode);
-        setSelectedDocumentType(null);
-        setSelectedRegion(null);
-    };
-    const handleDocumentTypeSelect = (docType) => {
-        setSelectedDocumentType(docType);
-        setSelectedRegion(null);
-    };
-    const handleRegionSelect = (regionValue) => {
-        setSelectedRegion(regionValue);
-    };
+    const needsRegion = useMemo(() => { return availableRegions.length > 0; }, [availableRegions]);
+    const getLocalizedText = (text) => { return text[state.currentLanguage] || text.en || ''; };
+    const handleCountrySelect = (countryCode) => { setSelectedCountryCode(countryCode); setSelectedDocumentType(null); setSelectedRegion(null); };
+    const handleDocumentTypeSelect = (docType) => { setSelectedDocumentType(docType); setSelectedRegion(null); };
+    const handleRegionSelect = (regionValue) => { setSelectedRegion(regionValue); };
     const finalizeSelection = (countryCode, docType, region) => {
         const country = countryData[countryCode];
         if (!country)
             return;
+        // 🚨 LOG: Final payload successfully selected
+        sdkLogger.info("User finalized document configuration", {
+            countryCode,
+            documentType: docType,
+            region: region || 'none'
+        });
         const mapping = countryMapping[countryCode];
         const countryObj = {
-            code: countryCode,
-            ...country,
-            regionMapping: mapping,
-            documentType: docType,
-            region: region || undefined,
+            code: countryCode, ...country, regionMapping: mapping, documentType: docType, region: region || undefined,
         };
         onValueChange(countryObj);
-        setTimeout(() => {
-            actions.nextComponent(countryObj);
-        }, 100);
+        setTimeout(() => { actions.nextComponent(countryObj); }, 100);
     };
     const handleBack = () => {
+        sdkLogger.info("User navigated back in document selection", { fromStep: currentStep }); // 🚨 LOG
         if (currentStep === 'region') {
             setCurrentStep('documentType');
             setSelectedRegion(null);
@@ -241,40 +197,20 @@ export const CountrySelectionTemplate = ({ component, value, onValueChange, erro
         return (<>
         <TextInput style={styles.searchBar} placeholder={state.currentLanguage === "en" ? "🔍 Search country..." : "🔍 Rechercher un pays..."} placeholderTextColor="#94A3B8" value={searchQuery} onChangeText={setSearchQuery} autoCorrect={false}/>
         <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
-          {filteredCountries.map((country) => (<TouchableOpacity key={country.code} style={[
-                    styles.option,
-                    selectedCountryCode === country.code && styles.selectedOption
-                ]} onPress={() => handleCountrySelect(country.code)}>
+          {filteredCountries.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.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>)}
+              {selectedCountryCode === country.code && (<View style={[styles.checkmark, { backgroundColor: component.ui.themeColor || '#2DBD60' }]}><Text style={styles.checkmarkText}>✓</Text></View>)}
             </TouchableOpacity>))}
-          
-          {filteredCountries.length === 0 && (<Text style={styles.emptyText}>
-              {state.currentLanguage === "en" ? "No matching countries found." : "Aucun pays trouvé."}
-            </Text>)}
+          {filteredCountries.length === 0 && (<Text style={styles.emptyText}>{state.currentLanguage === "en" ? "No matching countries found." : "Aucun pays trouvé."}</Text>)}
         </ScrollView>
       </>);
     };
     const renderDocumentTypeSelection = () => {
-        const instructions = selectedDocumentType && idCardConfig?.instructionsByDocumentType?.[selectedDocumentType]
-            ? getLocalizedText(idCardConfig.instructionsByDocumentType[selectedDocumentType])
-            : null;
+        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: '📘' },
@@ -283,33 +219,18 @@ export const CountrySelectionTemplate = ({ component, value, onValueChange, erro
             'healthInsuranceCard': { en: 'Health Insurance Card', fr: 'Carte d\'assurance maladie', icon: '🗳️' },
         };
         return (<>
-        {instructions && (<View style={styles.infoBox}>
-            <Text style={styles.infoText}>{instructions}</Text>
-          </View>)}
+        {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)}>
+                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>
+                  <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>)}
+                {selectedDocumentType === docType && (<View style={[styles.checkmark, { backgroundColor: component.ui.themeColor || '#2DBD60' }]}><Text style={styles.checkmarkText}>✓</Text></View>)}
               </TouchableOpacity>);
             })}
         </ScrollView>
@@ -319,25 +240,12 @@ export const CountrySelectionTemplate = ({ component, value, onValueChange, erro
         return (<>
         <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
           {availableRegions.map((regionObj, index) => {
-                return (<TouchableOpacity key={index} style={[
-                        styles.option,
-                        selectedRegion === regionObj.value && styles.selectedOption
-                    ]} onPress={() => handleRegionSelect(regionObj.value)}>
+                return (<TouchableOpacity key={index} style={[styles.option, selectedRegion === regionObj.value && styles.selectedOption]} onPress={() => handleRegionSelect(regionObj.value)}>
                 <View style={styles.optionContent}>
-                  <Text style={[
-                        styles.optionName,
-                        selectedRegion === regionObj.value && styles.selectedOptionName
-                    ]}>
-                    {regionObj.label}
-                  </Text>
+                  <Text style={[styles.optionName, selectedRegion === regionObj.value && styles.selectedOptionName]}>{regionObj.label}</Text>
                   {regionObj.value !== regionObj.label && (<Text style={styles.optionCode}>{regionObj.value}</Text>)}
                 </View>
-                {selectedRegion === regionObj.value && (<View style={[
-                            styles.checkmark,
-                            { backgroundColor: component.ui.themeColor || '#2DBD60' }
-                        ]}>
-                    <Text style={styles.checkmarkText}>✓</Text>
-                  </View>)}
+                {selectedRegion === regionObj.value && (<View style={[styles.checkmark, { backgroundColor: component.ui.themeColor || '#2DBD60' }]}><Text style={styles.checkmarkText}>✓</Text></View>)}
               </TouchableOpacity>);
             })}
         </ScrollView>
@@ -345,30 +253,18 @@ export const CountrySelectionTemplate = ({ component, value, onValueChange, erro
     };
     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 Province/State" : "Sélectionnez la province/l'état";
-            default:
-                return '';
+            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 Province/State" : "Sélectionnez la province/l'état";
+            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 the issuing province or territory"
-                    : "Sélectionnez la province ou le territoire de délivrance";
-            default:
-                return '';
+            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 the issuing province or territory" : "Sélectionnez la province ou le territoire de délivrance";
+            default: return '';
         }
     };
     const getProgressStep = () => {
@@ -378,9 +274,7 @@ export const CountrySelectionTemplate = ({ component, value, onValueChange, erro
             return 2;
         return 3;
     };
-    const getTotalSteps = () => {
-        return needsRegion ? 3 : 2;
-    };
+    const getTotalSteps = () => { return needsRegion ? 3 : 2; };
     const canGoNext = () => {
         if (currentStep === 'country')
             return selectedCountryCode !== null;
@@ -393,25 +287,17 @@ export const CountrySelectionTemplate = ({ component, value, onValueChange, erro
     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>
+          <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>);