@test-web/react-native-sdk 1.0.0

package/src/screens/DocumentCaptureFront.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import getStyles from '../styles/DocumentCaptureStyles';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+import Loader from '../components/common/Loader';
+
+export default function DocumentCaptureFront() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation();
+  const [loading, setLoading] = useState(false);
+
+  const takePhoto = async () => {
+    try {
+      setLoading(true);
+      // Static implementation - simulate photo capture
+      setTimeout(() => {
+        setLoading(false);
+        // Navigate to BackDocumentAdvice after capturing front
+        navigation.navigate('BackDocumentAdvice' as never);
+      }, 1000);
+    } catch (error) {
+      console.error('Error taking photo:', error);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.topLabel}>Document Front Side</Text>
+
+      {/* Camera placeholder */}
+      <View style={StyleSheet.absoluteFill}>
+        <View
+          style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}
+        ></View>
+      </View>
+
+      {/* Card overlay placeholder */}
+      <View
+        style={[
+          styles.cardoverlay,
+          {
+            borderWidth: 2,
+            borderColor: '#fff',
+            backgroundColor: 'transparent',
+          },
+        ]}
+      />
+
+      <Text style={styles.bottomLabel}>
+        Position your document fully within the frame
+      </Text>
+
+      <View style={styles.buttonplace}>
+        <TouchableOpacity style={styles.captureButton} onPress={takePhoto} />
+      </View>
+
+      {loading && <Loader />}
+    </View>
+  );
+}

package/src/screens/FrontDocumentAdvice.tsx

@@ -0,0 +1,52 @@
+import { useNavigation } from '@react-navigation/native';
+import { Image, ScrollView, View } from 'react-native';
+import Button from '../components/ui/Button';
+import ThemedText from '../components/ui/ThemedText';
+import getStyles from '../styles/DocumentAdviceStyles';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+import { useMemo } from 'react';
+
+export default function FrontDocumentAdvice() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const navigation = useNavigation();
+
+  const styles = useMemo(
+    () => getStyles(theme, orientation),
+    [theme, orientation]
+  );
+
+  const handleRedirect = () => {
+    navigation.navigate('DocumentCaptureFront' as never);
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <ThemedText style={styles.maintitle} type="title">
+        Capture Your ID Front
+      </ThemedText>
+
+      {/* Placeholder for ID card image */}
+      <View
+        style={[
+          styles.idcard,
+          {
+            backgroundColor: '#f0f0f0',
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
+        ]}
+      >
+        <ThemedText>ID Front Image</ThemedText>
+      </View>
+
+      <Button
+        title="Take a photo"
+        style={styles.buttonplace}
+        textStyle={styles.button}
+        onPress={handleRedirect}
+      />
+    </ScrollView>
+  );
+}

package/src/screens/LocationPermission.tsx

@@ -0,0 +1,74 @@
+import { useNavigation } from '@react-navigation/native';
+import * as React from 'react';
+import { ScrollView, Text, View, PermissionsAndroid, Platform } from 'react-native';
+import Button from '../components/ui/Button';
+import ThemedText from '../components/ui/ThemedText';
+import { useTheme } from '../context/ThemeContext';
+import getStyles from '../styles/PermissionStyle';
+import { useOrientation } from '../hooks/useOrientation';
+
+export default function LocationPermission() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation();
+
+  const requestLocationPermission = async () => {
+    if (Platform.OS === 'android') {
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+          {
+            title: 'Location Permission',
+            message: 'This app needs access to your location.',
+            buttonPositive: 'OK',
+          }
+        );
+        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+          if (navigation.canGoBack()) {
+            navigation.goBack();
+          } else {
+            navigation.navigate('VerifyIdentity' as never);
+          }
+        }
+      } catch (err) {
+        console.warn(err);
+      }
+    } else {
+      // For iOS, navigate directly (implement iOS permission separately)
+      if (navigation.canGoBack()) {
+        navigation.goBack();
+      } else {
+        navigation.navigate('VerifyIdentity' as never);
+      }
+    }
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <ThemedText style={styles.maintitle} type="title">
+        Location Access Required
+      </ThemedText>
+
+      <View style={{ padding: 20 }}>
+        <Text
+          style={{
+            color: theme.colors.text,
+            textAlign: 'center',
+            marginBottom: 20,
+          }}
+        >
+          This app needs access to your location to function correctly. Please
+          grant location permission.
+        </Text>
+      </View>
+
+      <Button
+        title="Grant Permission"
+        style={styles.buttonplace}
+        textStyle={styles.button}
+        onPress={requestLocationPermission}
+      />
+    </ScrollView>
+  );
+}

package/src/screens/MrzAdvice.tsx

@@ -0,0 +1,52 @@
+import { useNavigation } from '@react-navigation/native';
+import { ScrollView, View } from 'react-native';
+import Button from '../components/ui/Button';
+import ThemedText from '../components/ui/ThemedText';
+import getStyles from '../styles/BarcodeAdviceStyles';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+import { useMemo } from 'react';
+
+export default function MrzAdvice() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const navigation = useNavigation();
+
+  const styles = useMemo(
+    () => getStyles(theme, orientation),
+    [theme, orientation]
+  );
+
+  const handleRedirect = () => {
+    navigation.navigate('MrzCapture' as never);
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <ThemedText style={styles.maintitle} type="title">
+        Scan the MRZ of your ID
+      </ThemedText>
+
+      {/* Placeholder for MRZ image */}
+      <View
+        style={[
+          styles.idcard,
+          {
+            backgroundColor: '#f0f0f0',
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
+        ]}
+      >
+        <ThemedText>MRZ Zone Image</ThemedText>
+      </View>
+
+      <Button
+        title="Scan"
+        style={styles.buttonplace}
+        textStyle={styles.button}
+        onPress={handleRedirect}
+      />
+    </ScrollView>
+  );
+}

package/src/screens/MrzCapture.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+import getStyles from '../styles/ScannerStyles';
+import Loader from '../components/common/Loader';
+
+export default function MrzCapture() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation();
+  const [loading, setLoading] = useState(false);
+
+  // Static implementation - simulate MRZ scanning
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(true);
+      setTimeout(() => {
+        setLoading(false);
+        navigation.navigate('ThankYou' as never);
+      }, 2000);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [navigation]);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.topLabel}>Align the MRZ code in the box</Text>
+
+      {/* Camera placeholder */}
+      <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
+        <Text
+          style={{
+            color: '#fff',
+            textAlign: 'center',
+            marginTop: 200,
+            fontSize: 16,
+          }}
+        >
+          MRZ Scanner (Static)
+        </Text>
+      </View>
+
+      {/* MRZ overlay box */}
+      <View
+        style={{
+          position: 'absolute',
+          top: '40%',
+          alignSelf: 'center',
+          width: 380,
+          height: 78,
+          borderWidth: 2,
+          borderColor: '#00ff00',
+          backgroundColor: 'transparent',
+        }}
+      />
+
+      {loading && <Loader />}
+    </View>
+  );
+}

package/src/screens/NoCameraFound.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { ScrollView, Text, View, Platform, StyleSheet } from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+
+export default function NoCameraFound() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const [hasCamera, setHasCamera] = React.useState(true);
+
+  React.useEffect(() => {
+    if (Platform.OS === 'android') {
+      const hasCameraOnAndroid = true;
+      setHasCamera(hasCameraOnAndroid);
+    } else {
+      setHasCamera(true);
+    }
+  }, []);
+
+  return (
+    <ScrollView
+      contentContainerStyle={[
+        styles.container,
+        { backgroundColor: theme.colors.background },
+      ]}
+    >
+      <View style={{ padding: 20 }}>
+        {!hasCamera && (
+          <Text
+            style={{
+              color: theme.colors.text,
+              textAlign: 'center',
+              marginBottom: 20,
+              fontSize: 18,
+            }}
+          >
+            No camera found on this device. This feature requires a camera to
+            function.
+          </Text>
+        )}
+        {hasCamera && (
+          <Text
+            style={{
+              color: theme.colors.text,
+              textAlign: 'center',
+              marginBottom: 20,
+              fontSize: 18,
+            }}
+          >
+            Camera is available on this device.
+          </Text>
+        )}
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/screens/RetakeSelfie.tsx

@@ -0,0 +1,56 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import * as React from 'react';
+import { ScrollView, Text, View } from 'react-native';
+import Button from '../components/ui/Button';
+import { useTheme } from '../context/ThemeContext';
+import getStyles from '../styles/RetakeStyles';
+import { useOrientation } from '../hooks/useOrientation';
+
+interface RouteParams {
+  errorMessage?: string;
+}
+
+export default function RetakeSelfie() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation();
+  const route = useRoute();
+  const params = route.params as RouteParams | undefined;
+  const errorMessage = params?.errorMessage;
+
+  const handleRetake = () => {
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    } else {
+      navigation.navigate('SelfieCapture' as never);
+    }
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Text style={styles.title}>
+        Sorry we were unable to register your selfie.
+      </Text>
+      <Text style={styles.subtitle}>Please try again</Text>
+      <Text style={styles.errorMessage}>
+        Error: {errorMessage || 'Failed to verify selfie. Please try again.'}
+      </Text>
+      <Text style={styles.guideTitle}>Guide for Perfect Selfie Capture</Text>
+      <View style={styles.guideList}>
+        <Text style={styles.bullet}>
+          • Please bring your face close to the camera.
+        </Text>
+        <Text style={styles.bullet}>
+          • Please ensure your face covers the frame.
+        </Text>
+      </View>
+      <Button
+        title="Retake"
+        style={styles.buttonplace}
+        textStyle={styles.button}
+        onPress={handleRetake}
+      />
+    </ScrollView>
+  );
+}

package/src/screens/SelectDocuments.tsx

@@ -0,0 +1,250 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  Alert,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import Button from '../components/ui/Button';
+import ThemedText from '../components/ui/ThemedText';
+import getStyles from '../styles/SelectDocumentsStyles';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+import { useIDM } from '../context/IDMConfigurationContext';
+import { useKeyboard } from '../context/KeyboardContext';
+
+// Static country data for demo
+const STATIC_COUNTRIES = [
+  {
+    label: 'United States',
+    value: 'US',
+    metadata: [
+      { type: 'DL', id: '1' },
+      { type: 'PP', id: '2' },
+      { type: 'NI', id: '3' },
+    ],
+  },
+  {
+    label: 'Canada',
+    value: 'CA',
+    metadata: [
+      { type: 'DL', id: '4' },
+      { type: 'PP', id: '5' },
+    ],
+  },
+  {
+    label: 'United Kingdom',
+    value: 'GB',
+    metadata: [
+      { type: 'DL', id: '6' },
+      { type: 'PP', id: '7' },
+      { type: 'NI', id: '8' },
+    ],
+  },
+];
+
+// Document type labels mapping
+const DOCUMENT_LABELS: Record<string, string> = {
+  DL: "Driver's License",
+  PP: 'Passport',
+  NI: 'National ID',
+  PC: 'Passport Card',
+  GC: 'Green Card',
+};
+
+export default function SelectDocuments() {
+  const { theme } = useTheme();
+  const { isKeyboardVisible } = useKeyboard();
+  const { idmConf, updateIDMConf } = useIDM();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation();
+  const [filteredCountries, setFilteredCountries] = useState<any[]>(STATIC_COUNTRIES);
+  const [search, setSearch] = useState('');
+  const [selectedCountry, setSelectedCountry] = useState<string | null>(null);
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const [selectedIdType, setSelectedIdType] = useState<string | null>(null);
+  const [idTypeDropdownVisible, setIdTypeDropdownVisible] = useState(false);
+
+  // Memoize ID card types based on selected country
+  const idCardTypes = useMemo(() => {
+    if (!selectedCountry) return [];
+    const country = STATIC_COUNTRIES.find((c) => c.value === selectedCountry);
+    return country?.metadata.map((doc) => ({
+      label: DOCUMENT_LABELS[doc.type] || doc.type,
+      value: doc.type,
+    })) || [];
+  }, [selectedCountry]);
+
+  // Memoize selected country label
+  const selectedCountryLabel = useMemo(() => {
+    return STATIC_COUNTRIES.find((c) => c.value === selectedCountry)?.label;
+  }, [selectedCountry]);
+
+  // Memoize selected ID type label
+  const selectedIdTypeLabel = useMemo(() => {
+    return idCardTypes.find((i) => i.value === selectedIdType)?.label;
+  }, [idCardTypes, selectedIdType]);
+
+  const toggleDropdown = useCallback(() => {
+    setDropdownVisible((prev) => !prev);
+    setIdTypeDropdownVisible(false);
+  }, []);
+
+  const toggleIdTypeDropdown = useCallback(() => {
+    setIdTypeDropdownVisible((prev) => !prev);
+    setDropdownVisible(false);
+  }, []);
+
+  const selectCountry = useCallback((value: string) => {
+    setSelectedCountry(value);
+    setDropdownVisible(false);
+    setSearch('');
+    setSelectedIdType(null);
+    setFilteredCountries(STATIC_COUNTRIES);
+
+    const selectedCountryData = STATIC_COUNTRIES.find((c) => c.value === value);
+    updateIDMConf({ selectedCountryDetails: selectedCountryData || null });
+  }, [updateIDMConf]);
+
+  const selectIdType = useCallback((value: string) => {
+    setSelectedIdType(value);
+    const selectedCountryData = STATIC_COUNTRIES.find((c) => c.value === selectedCountry);
+    updateIDMConf({
+      selectedCountryDetails: {
+        ...selectedCountryData,
+        selectedMetaData: selectedCountryData?.metadata?.find((c) => c.type === value),
+      },
+    });
+    setIdTypeDropdownVisible(false);
+  }, [selectedCountry, updateIDMConf]);
+
+  const handleContinue = useCallback(() => {
+    if (!selectedCountry || !selectedIdType) {
+      Alert.alert('Missing Fields', 'Please select both country and ID card type.');
+      return;
+    }
+    navigation.navigate('FrontDocumentAdvice' as never);
+  }, [selectedCountry, selectedIdType, navigation]);
+
+  const handleSearch = useCallback((text: string) => {
+    setSearch(text);
+    const filtered = STATIC_COUNTRIES.filter((c) =>
+      c.label.toLowerCase().includes(text.toLowerCase())
+    );
+    setFilteredCountries(filtered);
+  }, []);
+
+  const closeDropdowns = useCallback(() => {
+    setDropdownVisible(false);
+    setIdTypeDropdownVisible(false);
+  }, []);
+
+  return (
+    <View style={{ flex: 1, backgroundColor: theme.colors.background }}>
+      <Pressable style={{ flex: 1 }} onPress={closeDropdowns}>
+        <ScrollView
+          contentContainerStyle={styles.container}
+          keyboardShouldPersistTaps="handled"
+        >
+          <View>
+            <ThemedText style={styles.maintitle} type="title">
+              ID Issuer Country
+            </ThemedText>
+
+            <View style={{ marginHorizontal: 20, marginBottom: 20 }}>
+              <Pressable style={styles.dropdownTrigger} onPress={toggleDropdown}>
+                <Text
+                  style={{
+                    color: selectedCountry ? theme.colors.text : theme.colors.subtitle,
+                  }}
+                >
+                  {selectedCountryLabel || 'Select a country'}
+                </Text>
+                <Text style={styles.downArrow}>▼</Text>
+              </Pressable>
+              {dropdownVisible && (
+                <View style={[styles.dropdownList, { maxHeight: 300 }]}>
+                  <TextInput
+                    value={search}
+                    onChangeText={handleSearch}
+                    placeholder="Search country..."
+                    placeholderTextColor={theme.colors.subtitle}
+                    style={styles.searchbox}
+                  />
+                  <ScrollView nestedScrollEnabled>
+                    {filteredCountries.map((item) => (
+                      <Pressable
+                        key={item.value}
+                        onPress={() => selectCountry(item.value)}
+                        style={styles.dropdownItem}
+                      >
+                        <Text style={styles.dopDownLable}>{item.label}</Text>
+                      </Pressable>
+                    ))}
+                  </ScrollView>
+                </View>
+              )}
+            </View>
+
+            <View>
+              <ThemedText style={styles.maintitle} type="title">
+                Select ID Card Type
+              </ThemedText>
+
+              <View style={{ marginHorizontal: 20, marginBottom: 20 }}>
+                <Pressable style={styles.dropdownTrigger} onPress={toggleIdTypeDropdown}>
+                  <Text
+                    style={{
+                      color: selectedIdType ? theme.colors.text : theme.colors.subtitle,
+                    }}
+                  >
+                    {selectedIdTypeLabel || 'Select ID Card Type'}
+                  </Text>
+                  <Text style={styles.downArrow}>▼</Text>
+                </Pressable>
+                {idTypeDropdownVisible && (
+                  <View style={[styles.dropdownList, { maxHeight: 200 }]}>
+                    <ScrollView nestedScrollEnabled>
+                      {idCardTypes.length > 0 ? (
+                        idCardTypes.map((item) => (
+                          <Pressable
+                            key={item.value}
+                            onPress={() => selectIdType(item.value)}
+                            style={styles.dropdownItem}
+                          >
+                            <Text style={styles.dopDownLable}>{item.label}</Text>
+                          </Pressable>
+                        ))
+                      ) : (
+                        <View style={styles.dropdownItem}>
+                          <Text style={styles.dopDownLable}>
+                            {selectedCountry
+                              ? 'No ID types available for this country'
+                              : 'Please select a country first'}
+                          </Text>
+                        </View>
+                      )}
+                    </ScrollView>
+                  </View>
+                )}
+              </View>
+            </View>
+          </View>
+
+          {!isKeyboardVisible && (
+            <Button
+              title="Continue"
+              style={styles.buttonplace}
+              textStyle={styles.button}
+              onPress={handleContinue}
+            />
+          )}
+        </ScrollView>
+      </Pressable>
+    </View>
+  );
+}