@sanctum-key/react-native-sdk 1.0.0

package/src/components/KYCElements/CountrySelectionTemplate.tsx

@@ -0,0 +1,526 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { TemplateComponent, CountrySelectionConfig, LocalizedText, Country, IDCardConfig } from '../../types/KYC.types';
+import { countryMapping } from '../../config/region_mapping';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { Button } from '../ui/Button';
+import { countryData } from '../../config/countriesData';
+
+interface CountrySelectionTemplateProps {
+  component: TemplateComponent;
+  value?: any;
+  onValueChange: (value: Country & { documentType?: string; region?: string }) => void;
+  error?: string;
+  language?: string;
+}
+
+type SelectionStep = 'country' | 'documentType' | 'region';
+
+type ExtendedIDCardConfig = IDCardConfig & {
+  selectedCountries?: string[];
+  documentTypesByCountry?: Record<string, string[]>;
+  regionsByCountry?: Record<string, Record<string, string[]>>;
+  instructionsByDocumentType?: Record<string, LocalizedText>;
+};
+
+export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> = ({
+  component,
+  value,
+  onValueChange,
+  error,
+  language = 'en',
+}) => {
+  const config = component.config as CountrySelectionConfig;
+  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 as ExtendedIDCardConfig | undefined;
+  }, [idCardComponent]);
+
+  const [currentStep, setCurrentStep] = useState<SelectionStep>(() => {
+    if (value?.code && value?.documentType) {
+      if (value.region) return 'region';
+      return 'documentType';
+    }
+    return 'country';
+  });
+
+  const [selectedCountryCode, setSelectedCountryCode] = useState<string | null>(value?.code || null);
+  const [selectedDocumentType, setSelectedDocumentType] = useState<string | null>(value?.documentType || null);
+  const [selectedRegion, setSelectedRegion] = useState<string | null>(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: string) => countryData[code])
+      .map((code: string) => ({ code, ...countryData[code] }))
+      .sort((a: Country & { code?: string }, b: Country & { code?: string }) => 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: LocalizedText): string => {
+    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);
+  };
+
+  const finalizeSelection = (countryCode: string, docType: string, region: string | null) => {
+    const country = countryData[countryCode];
+    if (!country) return;
+
+    const mapping = countryMapping[countryCode as keyof typeof countryMapping];
+    const countryObj: Country & { documentType?: string; region?: string } = {
+      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: Country & { code?: string }) => (
+            <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 as string || '#2DBD60' }
+                ]}>
+                  <Text style={styles.checkmarkText}>✓</Text>
+                </View>
+              )}
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </>
+    );
+  };
+
+  const renderDocumentTypeSelection = () => {
+    const instructions = selectedDocumentType && idCardConfig?.instructionsByDocumentType?.[selectedDocumentType]
+      ? getLocalizedText(idCardConfig.instructionsByDocumentType[selectedDocumentType])
+      : null;
+
+    const documentTypeLabels: Record<string, { en: string; fr: string; icon?: string }> = {
+      '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: string) => {
+            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 as string || '#2DBD60' }
+                  ]}>
+                    <Text style={styles.checkmarkText}>✓</Text>
+                  </View>
+                )}
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </>
+    );
+  };
+
+  const renderRegionSelection = () => {
+    return (
+      <>
+        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
+          {availableRegions.map((region: string, index: number) => {
+            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 as string || '#2DBD60' }
+                  ]}>
+                    <Text style={styles.checkmarkText}>✓</Text>
+                  </View>
+                )}
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </>
+    );
+  };
+
+  const getStepTitle = (): string => {
+    switch (currentStep) {
+      case 'country':
+        return getLocalizedText(component.labels as LocalizedText);
+      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 = (): string => {
+    switch (currentStep) {
+      case 'country':
+        return getLocalizedText(component.instructions as LocalizedText);
+      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 = (): number => {
+    if (currentStep === 'country') return 1;
+    if (currentStep === 'documentType') return 2;
+    return 3;
+  };
+
+  const getTotalSteps = (): number => {
+    return needsRegion ? 3 : 2;
+  };
+
+  const canGoNext = (): boolean => {
+    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',
+  },
+});

package/src/components/KYCElements/DocumentTypeSelection.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { KYCElement, KYCElementOption } from '../../types/KYC.types';
+
+interface DocumentTypeSelectionProps {
+  element: KYCElement;
+  value?: string;
+  onValueChange: (value: string) => void;
+  error?: string;
+}
+
+const defaultDocumentTypes: KYCElementOption[] = [
+  { 
+    value: 'passport', 
+    label: 'Passeport', 
+    icon: '📘',
+    description: 'Document de voyage officiel'
+  },
+  { 
+    value: 'id_card', 
+    label: 'Carte d\'identité', 
+    icon: '🆔',
+    description: 'Carte d\'identité nationale'
+  },
+  { 
+    value: 'drivers_license', 
+    label: 'Permis de conduire', 
+    icon: '🚗',
+    description: 'Permis de conduire valide'
+  },
+  { 
+    value: 'other', 
+    label: 'Autre document', 
+    icon: '📄',
+    description: 'Autre document d\'identité officiel'
+  },
+];
+
+export const DocumentTypeSelection: React.FC<DocumentTypeSelectionProps> = ({
+  element,
+  value,
+  onValueChange,
+  error,
+}) => {
+  const documentTypes = element.options || defaultDocumentTypes;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{element.title}</Text>
+      <Text style={styles.description}>{element.description}</Text>
+      
+      <ScrollView style={styles.optionsContainer} showsVerticalScrollIndicator={false}>
+        {documentTypes.map((docType) => (
+          <TouchableOpacity
+            key={docType.value}
+            style={[
+              styles.option,
+              value === docType.value && styles.selectedOption
+            ]}
+            onPress={() => onValueChange(docType.value)}
+          >
+            <Text style={styles.optionIcon}>{docType.icon}</Text>
+            <View style={styles.optionContent}>
+              <Text style={[
+                styles.optionLabel,
+                value === docType.value && styles.selectedOptionLabel
+              ]}>
+                {docType.label}
+              </Text>
+              {docType.description && (
+                <Text style={styles.optionDescription}>{docType.description}</Text>
+              )}
+            </View>
+            {value === docType.value && (
+              <View style={styles.checkmark}>
+                <Text style={styles.checkmarkText}>✓</Text>
+              </View>
+            )}
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+
+      {error && (
+        <Text style={styles.errorText}>{error}</Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  optionsContainer: {
+    flex: 1,
+  },
+  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.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  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,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+});