@sanctum-key/react-native-sdk 1.0.48 → 1.0.50

package/src/components/KYCElements/CountrySelectionTemplate.tsx

@@ -6,6 +6,7 @@ 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
 
 interface CountrySelectionTemplateProps {
   component: TemplateComponent;
@@ -25,51 +26,23 @@ type ExtendedIDCardConfig = IDCardConfig & {
 };
 
 const ISO_TO_COUNTRY_NAME: Record<string, string> = { '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: Record<string, string> = { '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: Record<string, string> = { "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: Record<string, string> = {
-  '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: Record<string, string> = {
-  "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: React.FC<CountrySelectionTemplateProps> = ({
-  component,
-  value,
-  onValueChange,
-  error,
-  language = 'en',
-}) => {
+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]);
+  // 🚨 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 as ExtendedIDCardConfig | undefined; }, [idCardComponent]);
+  
   const [currentStep, setCurrentStep] = useState<SelectionStep>(() => {
     if (value?.code && value?.documentType) {
       if (value.region) return 'region';
@@ -77,11 +50,10 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
     }
     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);
-  
   const [searchQuery, setSearchQuery] = useState('');
 
   useEffect(() => {
@@ -89,28 +61,23 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
       setSelectedCountryCode(value.code);
       setSelectedDocumentType(value.documentType);
       setSelectedRegion(value.region || null);
-
       if (value.region) {
         setCurrentStep('region');
       } else {
         let regionsCheck = idCardConfig?.regionsByCountry?.[value.code]?.[value.documentType] || [];
-        
         if (regionsCheck.length === 0) {
           const rawCountryName = ISO_TO_COUNTRY_NAME[value.code] || value.code;
           const searchDocType = jsonDocMap[value.documentType] || value.documentType;
           const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING;
-          
           let countryMapping = baseMapping[rawCountryName];
           if (!countryMapping) {
             const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase());
             if (foundKey) countryMapping = baseMapping[foundKey];
           }
-
           if (countryMapping && countryMapping[searchDocType]) {
             regionsCheck = Object.keys(countryMapping[searchDocType]).filter(k => k !== 'root');
           }
         }
-
         if (Array.isArray(regionsCheck) && regionsCheck.length > 0) {
           setCurrentStep('region');
         } else {
@@ -126,16 +93,12 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
   }, [value?.code, value?.documentType, value?.region, idCardConfig]);
 
   useEffect(() => {
-    if (error) {
-      actions.updateComponentData(component.id, value);
-    }
+    if (error) { actions.updateComponentData(component.id, value); }
   }, []);
 
   const availableCountries = useMemo(() => {
     const explicitlyAllowed = idCardConfig?.selectedCountries || config.allowed_countries || [];
-    
     const configuredCodes = new Set(explicitlyAllowed);
-
     return Array.from(configuredCodes)
       .filter((code: string) => countryData[code])
       .map((code: string) => ({ code, ...countryData[code] }))
@@ -145,131 +108,86 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
   const filteredCountries = useMemo(() => {
     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 as any).regionMapping || REGION_MAPPING;
-    
     let countryMapping = baseMapping[rawCountryName];
     if (!countryMapping) {
       const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase());
       if (foundKey) countryMapping = baseMapping[foundKey];
     }
-
     if (countryMapping) {
-      const inverseDocMap: Record<string, string> = {
-        'identity_card': 'nationalId',
-        'passport': 'passport',
-        'drivers_licence': 'driversLicense',
-        'permanent_residence': 'residencePermit',
-        'health_insurance_card': 'healthInsuranceCard'
-      };
+      const inverseDocMap: Record<string, string> = { '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'];
   }, [selectedCountryCode, idCardConfig?.documentTypesByCountry]);
 
   const availableRegions = useMemo(() => {
     if (!selectedCountryCode || !selectedDocumentType) return [];
-
     let rawRegions: string[] = [];
-    
     if (idCardConfig?.regionsByCountry?.[selectedCountryCode]?.[selectedDocumentType]) {
       rawRegions = idCardConfig.regionsByCountry[selectedCountryCode][selectedDocumentType];
     }
-
     if (rawRegions.length === 0) {
       const rawCountryName = ISO_TO_COUNTRY_NAME[selectedCountryCode] || selectedCountryCode;
       const searchDocType = jsonDocMap[selectedDocumentType] || selectedDocumentType;
       const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING;
-      
       let countryMapping = baseMapping[rawCountryName];
       if (!countryMapping) {
         const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase());
         if (foundKey) countryMapping = baseMapping[foundKey];
       }
-
       if (countryMapping && countryMapping[searchDocType]) {
         rawRegions = Object.keys(countryMapping[searchDocType]).filter(k => k !== 'root');
       }
     }
-
     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 needsRegion = useMemo(() => { return availableRegions.length > 0; }, [availableRegions]);
+  const getLocalizedText = (text: LocalizedText): string => { return text[state.currentLanguage] || text.en || ''; };
 
-  const getLocalizedText = (text: LocalizedText): string => {
-    return text[state.currentLanguage] || text.en || '';
-  };
-
-  const handleCountrySelect = (countryCode: string) => {
-    setSelectedCountryCode(countryCode);
-    setSelectedDocumentType(null);
-    setSelectedRegion(null);
-  };
-
-  const handleDocumentTypeSelect = (docType: string) => {
-    setSelectedDocumentType(docType);
-    setSelectedRegion(null);
-  };
-
-  const handleRegionSelect = (regionValue: string) => {
-    setSelectedRegion(regionValue);
-  };
+  const handleCountrySelect = (countryCode: string) => { setSelectedCountryCode(countryCode); setSelectedDocumentType(null); setSelectedRegion(null); };
+  const handleDocumentTypeSelect = (docType: string) => { setSelectedDocumentType(docType); setSelectedRegion(null); };
+  const handleRegionSelect = (regionValue: string) => { setSelectedRegion(regionValue); };
 
   const finalizeSelection = (countryCode: string, docType: string, region: string | null) => {
     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 as keyof typeof countryMapping];
     const countryObj: Country & { documentType?: string; region?: string } = {
-      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);
+      setCurrentStep('documentType'); setSelectedRegion(null);
     } else if (currentStep === 'documentType') {
-      setCurrentStep('country');
-      setSelectedDocumentType(null);
-      setSelectedRegion(null);
-      setSearchQuery('');
+      setCurrentStep('country'); setSelectedDocumentType(null); setSelectedRegion(null); setSearchQuery('');
     } else if (currentStep === 'country') {
       actions.previousComponent();
     }
@@ -279,68 +197,33 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
     if (currentStep === 'country' && selectedCountryCode) {
       setCurrentStep('documentType');
     } else if (currentStep === 'documentType' && selectedDocumentType) {
-      if (needsRegion) {
-        setCurrentStep('region');
-      } else {
-        if (selectedCountryCode) {
-          finalizeSelection(selectedCountryCode, selectedDocumentType, null);
-        }
+      if (needsRegion) { setCurrentStep('region'); } else {
+        if (selectedCountryCode) { finalizeSelection(selectedCountryCode, selectedDocumentType, null); }
       }
     } else if (currentStep === 'region' && selectedRegion) {
-      if (selectedCountryCode && selectedDocumentType) {
-        finalizeSelection(selectedCountryCode, selectedDocumentType, selectedRegion);
-      }
+      if (selectedCountryCode && selectedDocumentType) { finalizeSelection(selectedCountryCode, selectedDocumentType, selectedRegion); }
     }
   };
 
   const renderCountrySelection = () => {
     return (
       <>
-        <TextInput 
-          style={styles.searchBar}
-          placeholder={state.currentLanguage === "en" ? "🔍 Search country..." : "🔍 Rechercher un pays..."}
-          placeholderTextColor="#94A3B8"
-          value={searchQuery}
-          onChangeText={setSearchQuery}
-          autoCorrect={false}
-        />
+        <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: Country & { code?: string }) => (
-            <TouchableOpacity
-              key={country.code}
-              style={[
-                styles.option,
-                selectedCountryCode === country.code && styles.selectedOption
-              ]}
-              onPress={() => handleCountrySelect(country.code!)}
-            >
+            <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 as string || '#2DBD60' }
-                ]}>
-                  <Text style={styles.checkmarkText}>✓</Text>
-                </View>
+                <View style={[styles.checkmark, { backgroundColor: component.ui.themeColor as string || '#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>
+            <Text style={styles.emptyText}>{state.currentLanguage === "en" ? "No matching countries found." : "Aucun pays trouvé."}</Text>
           )}
         </ScrollView>
       </>
@@ -348,10 +231,7 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
   };
 
   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: Record<string, { en: string; fr: string; icon?: string }> = {
       'nationalId': { en: 'National ID', fr: 'Carte nationale d\'identité', icon: '🏛️' },
       'passport': { en: 'Passport', fr: 'Passeport', icon: '📘' },
@@ -359,45 +239,22 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
       '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>
-        )}
+        {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)}
-              >
+              <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 as string || '#2DBD60' }
-                  ]}>
-                    <Text style={styles.checkmarkText}>✓</Text>
-                  </View>
+                  <View style={[styles.checkmark, { backgroundColor: component.ui.themeColor as string || '#2DBD60' }]}><Text style={styles.checkmarkText}>✓</Text></View>
                 )}
               </TouchableOpacity>
             );
@@ -413,32 +270,13 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
         <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
           {availableRegions.map((regionObj, index: number) => {
             return (
-              <TouchableOpacity
-                key={index}
-                style={[
-                  styles.option,
-                  selectedRegion === regionObj.value && styles.selectedOption
-                ]}
-                onPress={() => handleRegionSelect(regionObj.value)}
-              >
+              <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>
-                  {regionObj.value !== regionObj.label && (
-                     <Text style={styles.optionCode}>{regionObj.value}</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 as string || '#2DBD60' }
-                  ]}>
-                    <Text style={styles.checkmarkText}>✓</Text>
-                  </View>
+                  <View style={[styles.checkmark, { backgroundColor: component.ui.themeColor as string || '#2DBD60' }]}><Text style={styles.checkmarkText}>✓</Text></View>
                 )}
               </TouchableOpacity>
             );
@@ -450,31 +288,19 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
 
   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 Province/State" : "Sélectionnez la province/l'état";
-      default:
-        return '';
+      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 Province/State" : "Sélectionnez la province/l'état";
+      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 the issuing province or territory"
-          : "Sélectionnez la province ou le territoire de délivrance";
-      default:
-        return '';
+      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 the issuing province or territory" : "Sélectionnez la province ou le territoire de délivrance";
+      default: return '';
     }
   };
 
@@ -484,9 +310,7 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
     return 3;
   };
 
-  const getTotalSteps = (): number => {
-    return needsRegion ? 3 : 2;
-  };
+  const getTotalSteps = (): number => { return needsRegion ? 3 : 2; };
 
   const canGoNext = (): boolean => {
     if (currentStep === 'country') return selectedCountryCode !== null;
@@ -499,41 +323,18 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
     <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()}
-          />
+          <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>
-        )}
+        {error && (<Text style={styles.errorText}>{error}</Text>)}
       </View>
     </View>
   );