@sanctum-key/react-native-sdk 1.0.18 → 1.0.20

package/src/components/KYCElements/CountrySelectionTemplate.tsx

@@ -23,6 +23,9 @@ type ExtendedIDCardConfig = IDCardConfig & {
   instructionsByDocumentType?: Record<string, LocalizedText>;
 };
 
+// Standard ISO 3166-2:CA codes for Canadian provinces and territories
+const CANADIAN_PROVINCES = ['AB', 'BC', 'MB', 'NB', 'NL', 'NT', 'NS', 'NU', 'ON', 'PE', 'QC', 'SK', 'YT'];
+
 export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> = ({
   component,
   value,
@@ -58,11 +61,17 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
       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) {
+        // Check config regions OR enforce Canadian provinces for non-passports
+        let regionsCheck = idCardConfig?.regionsByCountry?.[value.code]?.[value.documentType] || [];
+        if (regionsCheck.length === 0 && value.code === 'CA' && value.documentType !== 'passport') {
+          regionsCheck = CANADIAN_PROVINCES;
+        }
+
+        if (Array.isArray(regionsCheck) && regionsCheck.length > 0) {
           setCurrentStep('region');
         } else {
           setCurrentStep('documentType');
@@ -78,7 +87,7 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
 
   useEffect(() => {
     if (error) {
-      actions.updateComponentData(component.id, value); 
+      actions.updateComponentData(component.id, value);
     }
   }, []);
 
@@ -96,10 +105,19 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
   }, [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] : [];
+    if (!selectedCountryCode || !selectedDocumentType) return [];
+    
+    let regions: string[] = [];
+    if (idCardConfig?.regionsByCountry?.[selectedCountryCode]?.[selectedDocumentType]) {
+      regions = idCardConfig.regionsByCountry[selectedCountryCode][selectedDocumentType];
+    }
+
+    
+    if (regions.length === 0 && selectedCountryCode === 'CA' && selectedDocumentType !== 'passport') {
+      regions = CANADIAN_PROVINCES;
+    }
+
+    return Array.isArray(regions) ? regions : [];
   }, [selectedCountryCode, selectedDocumentType, idCardConfig?.regionsByCountry]);
 
   const needsRegion = useMemo(() => {
@@ -110,20 +128,17 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
     return text[state.currentLanguage] || text.en || '';
   };
 
-  // 1. Only highlights the country
   const handleCountrySelect = (countryCode: string) => {
     setSelectedCountryCode(countryCode);
     setSelectedDocumentType(null);
     setSelectedRegion(null);
   };
 
-  // 2. Only highlights the document type
   const handleDocumentTypeSelect = (docType: string) => {
     setSelectedDocumentType(docType);
     setSelectedRegion(null);
   };
 
-  // 3. Only highlights the region
   const handleRegionSelect = (region: string) => {
     setSelectedRegion(region);
   };
@@ -142,9 +157,9 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
     };
 
     onValueChange(countryObj);
-    
+
     setTimeout(() => {
-      actions.nextComponent(countryObj); 
+      actions.nextComponent(countryObj);
     }, 100);
   };
 
@@ -323,7 +338,7 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
       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";
+        return state.currentLanguage === "en" ? "Select Province/State" : "Sélectionnez la province/l'état";
       default:
         return '';
     }
@@ -334,13 +349,13 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
       case 'country':
         return getLocalizedText(component.instructions as LocalizedText);
       case 'documentType':
-        return state.currentLanguage === "en" 
+        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";
+          ? "Select the issuing province or territory"
+          : "Sélectionnez la province ou le territoire de délivrance";
       default:
         return '';
     }
@@ -368,7 +383,7 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
       <View style={styles.container}>
         <View style={styles.progressContainer}>
           <Text style={styles.progressText}>
-            {state.currentLanguage === "en" 
+            {state.currentLanguage === "en"
               ? `Step ${getProgressStep()} of ${getTotalSteps()}`
               : `Étape ${getProgressStep()} sur ${getTotalSteps()}`}
           </Text>
@@ -387,9 +402,8 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
             onPress={handleBack}
             variant={currentStep === 'country' ? "secondary" : "outline"}
             size="large"
-            style={{ flex: 1, marginRight: 8 }} 
+            style={{ flex: 1, marginRight: 8 }}
           />
-          
           <Button
             title={state.currentLanguage === "en" ? "Next" : "Suivant"}
             onPress={handleNext}
@@ -409,118 +423,24 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
 };
 
 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',
-  },
+  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' },
 });