@hexar/biometric-identity-sdk-react-native 1.0.31 → 1.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValidationProgress.d.ts","sourceRoot":"","sources":["../../src/components/ValidationProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAA2B,MAAM,oCAAoC,CAAC;AAE7G,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,
|
|
1
|
+
{"version":3,"file":"ValidationProgress.d.ts","sourceRoot":"","sources":["../../src/components/ValidationProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAA2B,MAAM,oCAAoC,CAAC;AAE7G,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmChE,CAAC;AAgCF,eAAe,kBAAkB,CAAC"}
|
|
@@ -48,77 +48,14 @@ const ValidationProgress = ({ progress, theme, language = 'en', }) => {
|
|
|
48
48
|
}
|
|
49
49
|
}, [language]);
|
|
50
50
|
const strings = (0, biometric_identity_sdk_core_1.getStrings)();
|
|
51
|
-
const getStatusText = () => {
|
|
52
|
-
if (progress < 80)
|
|
53
|
-
return strings.validation.checkingDocument || 'Extracting document data...';
|
|
54
|
-
if (progress < 85)
|
|
55
|
-
return strings.validation.checkingLiveness || 'Validating liveness...';
|
|
56
|
-
if (progress < 95)
|
|
57
|
-
return strings.validation.matchingFaces || 'Comparing faces...';
|
|
58
|
-
return strings.validation.almostDone || 'Validating document authenticity...';
|
|
59
|
-
};
|
|
60
51
|
return (react_1.default.createElement(react_native_1.View, { style: styles.container },
|
|
61
52
|
react_1.default.createElement(react_native_1.View, { style: styles.content },
|
|
62
53
|
react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: theme?.primaryColor || '#6366F1' }),
|
|
63
54
|
react_1.default.createElement(react_native_1.Text, { style: [styles.title, { color: theme?.textColor || '#000000' }] }, strings.validation.title || 'Validating Identity'),
|
|
64
|
-
react_1.default.createElement(react_native_1.Text, { style: [styles.statusText, { color: theme?.secondaryTextColor || '#6B7280' }] },
|
|
65
|
-
react_1.default.createElement(react_native_1.
|
|
66
|
-
react_1.default.createElement(react_native_1.View, { style: styles.progressBar },
|
|
67
|
-
react_1.default.createElement(react_native_1.View, { style: [
|
|
68
|
-
styles.progressFill,
|
|
69
|
-
{
|
|
70
|
-
width: `${progress}%`,
|
|
71
|
-
backgroundColor: theme?.primaryColor || '#6366F1',
|
|
72
|
-
},
|
|
73
|
-
] })),
|
|
74
|
-
react_1.default.createElement(react_native_1.Text, { style: [styles.progressText, { color: theme?.textColor || '#000000' }] },
|
|
75
|
-
Math.round(progress),
|
|
76
|
-
"%")),
|
|
77
|
-
react_1.default.createElement(react_native_1.View, { style: styles.stepsContainer },
|
|
78
|
-
react_1.default.createElement(ValidationStep, { icon: "\u2713", text: strings.validation.checkingDocument || 'OCR Extraction', completed: progress >= 80, theme: theme }),
|
|
79
|
-
react_1.default.createElement(ValidationStep, { icon: "\u2713", text: strings.validation.checkingLiveness || 'Liveness Detection', completed: progress >= 85, theme: theme }),
|
|
80
|
-
react_1.default.createElement(ValidationStep, { icon: "\u2713", text: strings.validation.matchingFaces || 'Face Matching', completed: progress >= 95, theme: theme }),
|
|
81
|
-
react_1.default.createElement(ValidationStep, { icon: "\u2713", text: strings.validation.checkingDocument || 'Document Validation', completed: progress >= 100, theme: theme })),
|
|
82
|
-
react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, strings.validation.almostDone || 'This may take a few seconds...'))));
|
|
55
|
+
react_1.default.createElement(react_native_1.Text, { style: [styles.statusText, { color: theme?.secondaryTextColor || '#6B7280' }] }, strings.validation.validatingDocumentAndFace || 'Validando documento y rostro...'),
|
|
56
|
+
react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, strings.validation.almostDone || 'Esto puede tardar unos segundos...'))));
|
|
83
57
|
};
|
|
84
58
|
exports.ValidationProgress = ValidationProgress;
|
|
85
|
-
const ValidationStep = ({ icon, text, completed, theme, }) => (react_1.default.createElement(react_native_1.View, { style: stepStyles.container },
|
|
86
|
-
react_1.default.createElement(react_native_1.View, { style: [
|
|
87
|
-
stepStyles.iconContainer,
|
|
88
|
-
completed && {
|
|
89
|
-
backgroundColor: theme?.successColor || '#10B981',
|
|
90
|
-
},
|
|
91
|
-
] }, completed && react_1.default.createElement(react_native_1.Text, { style: stepStyles.icon }, icon)),
|
|
92
|
-
react_1.default.createElement(react_native_1.Text, { style: [stepStyles.text, completed && stepStyles.textCompleted] }, text)));
|
|
93
|
-
const stepStyles = react_native_1.StyleSheet.create({
|
|
94
|
-
container: {
|
|
95
|
-
flexDirection: 'row',
|
|
96
|
-
alignItems: 'center',
|
|
97
|
-
marginVertical: 8,
|
|
98
|
-
},
|
|
99
|
-
iconContainer: {
|
|
100
|
-
width: 24,
|
|
101
|
-
height: 24,
|
|
102
|
-
borderRadius: 12,
|
|
103
|
-
backgroundColor: '#E5E7EB',
|
|
104
|
-
justifyContent: 'center',
|
|
105
|
-
alignItems: 'center',
|
|
106
|
-
marginRight: 12,
|
|
107
|
-
},
|
|
108
|
-
icon: {
|
|
109
|
-
color: '#FFFFFF',
|
|
110
|
-
fontSize: 14,
|
|
111
|
-
fontWeight: 'bold',
|
|
112
|
-
},
|
|
113
|
-
text: {
|
|
114
|
-
fontSize: 14,
|
|
115
|
-
color: '#9CA3AF',
|
|
116
|
-
},
|
|
117
|
-
textCompleted: {
|
|
118
|
-
color: '#111827',
|
|
119
|
-
fontWeight: '500',
|
|
120
|
-
},
|
|
121
|
-
});
|
|
122
59
|
const styles = react_native_1.StyleSheet.create({
|
|
123
60
|
container: {
|
|
124
61
|
flex: 1,
|
|
@@ -141,36 +78,11 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
141
78
|
marginBottom: 32,
|
|
142
79
|
textAlign: 'center',
|
|
143
80
|
},
|
|
144
|
-
progressBarContainer: {
|
|
145
|
-
width: '100%',
|
|
146
|
-
marginBottom: 32,
|
|
147
|
-
},
|
|
148
|
-
progressBar: {
|
|
149
|
-
width: '100%',
|
|
150
|
-
height: 8,
|
|
151
|
-
backgroundColor: '#E5E7EB',
|
|
152
|
-
borderRadius: 4,
|
|
153
|
-
overflow: 'hidden',
|
|
154
|
-
marginBottom: 8,
|
|
155
|
-
},
|
|
156
|
-
progressFill: {
|
|
157
|
-
height: '100%',
|
|
158
|
-
borderRadius: 4,
|
|
159
|
-
},
|
|
160
|
-
progressText: {
|
|
161
|
-
fontSize: 14,
|
|
162
|
-
fontWeight: '600',
|
|
163
|
-
textAlign: 'center',
|
|
164
|
-
},
|
|
165
|
-
stepsContainer: {
|
|
166
|
-
width: '100%',
|
|
167
|
-
marginTop: 24,
|
|
168
|
-
marginBottom: 32,
|
|
169
|
-
},
|
|
170
81
|
bottomText: {
|
|
171
82
|
fontSize: 14,
|
|
172
83
|
color: '#9CA3AF',
|
|
173
84
|
textAlign: 'center',
|
|
85
|
+
marginTop: 16,
|
|
174
86
|
},
|
|
175
87
|
});
|
|
176
88
|
exports.default = exports.ValidationProgress;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hexar/biometric-identity-sdk-react-native",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.32",
|
|
4
4
|
"description": "React Native wrapper for Biometric Identity SDK",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"clean": "rm -rf dist"
|
|
12
12
|
},
|
|
13
13
|
"peerDependencies": {
|
|
14
|
-
"@hexar/biometric-identity-sdk-core": ">=1.0.
|
|
14
|
+
"@hexar/biometric-identity-sdk-core": ">=1.0.21",
|
|
15
15
|
"react": ">=18.0.0",
|
|
16
16
|
"react-native": ">=0.70.0",
|
|
17
17
|
"react-native-permissions": ">=4.0.0",
|
|
@@ -31,13 +31,6 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
|
|
|
31
31
|
|
|
32
32
|
const strings = getStrings();
|
|
33
33
|
|
|
34
|
-
const getStatusText = () => {
|
|
35
|
-
if (progress < 80) return strings.validation.checkingDocument || 'Extracting document data...';
|
|
36
|
-
if (progress < 85) return strings.validation.checkingLiveness || 'Validating liveness...';
|
|
37
|
-
if (progress < 95) return strings.validation.matchingFaces || 'Comparing faces...';
|
|
38
|
-
return strings.validation.almostDone || 'Validating document authenticity...';
|
|
39
|
-
};
|
|
40
|
-
|
|
41
34
|
return (
|
|
42
35
|
<View style={styles.container}>
|
|
43
36
|
<View style={styles.content}>
|
|
@@ -51,123 +44,17 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
|
|
|
51
44
|
</Text>
|
|
52
45
|
|
|
53
46
|
<Text style={[styles.statusText, { color: theme?.secondaryTextColor || '#6B7280' }]}>
|
|
54
|
-
{
|
|
47
|
+
{strings.validation.validatingDocumentAndFace || 'Validando documento y rostro...'}
|
|
55
48
|
</Text>
|
|
56
49
|
|
|
57
|
-
{/* Progress Bar */}
|
|
58
|
-
<View style={styles.progressBarContainer}>
|
|
59
|
-
<View style={styles.progressBar}>
|
|
60
|
-
<View
|
|
61
|
-
style={[
|
|
62
|
-
styles.progressFill,
|
|
63
|
-
{
|
|
64
|
-
width: `${progress}%`,
|
|
65
|
-
backgroundColor: theme?.primaryColor || '#6366F1',
|
|
66
|
-
},
|
|
67
|
-
]}
|
|
68
|
-
/>
|
|
69
|
-
</View>
|
|
70
|
-
<Text style={[styles.progressText, { color: theme?.textColor || '#000000' }]}>
|
|
71
|
-
{Math.round(progress)}%
|
|
72
|
-
</Text>
|
|
73
|
-
</View>
|
|
74
|
-
|
|
75
|
-
{/* Validation Steps */}
|
|
76
|
-
<View style={styles.stepsContainer}>
|
|
77
|
-
<ValidationStep
|
|
78
|
-
icon="✓"
|
|
79
|
-
text={strings.validation.checkingDocument || 'OCR Extraction'}
|
|
80
|
-
completed={progress >= 80}
|
|
81
|
-
theme={theme}
|
|
82
|
-
/>
|
|
83
|
-
<ValidationStep
|
|
84
|
-
icon="✓"
|
|
85
|
-
text={strings.validation.checkingLiveness || 'Liveness Detection'}
|
|
86
|
-
completed={progress >= 85}
|
|
87
|
-
theme={theme}
|
|
88
|
-
/>
|
|
89
|
-
<ValidationStep
|
|
90
|
-
icon="✓"
|
|
91
|
-
text={strings.validation.matchingFaces || 'Face Matching'}
|
|
92
|
-
completed={progress >= 95}
|
|
93
|
-
theme={theme}
|
|
94
|
-
/>
|
|
95
|
-
<ValidationStep
|
|
96
|
-
icon="✓"
|
|
97
|
-
text={strings.validation.checkingDocument || 'Document Validation'}
|
|
98
|
-
completed={progress >= 100}
|
|
99
|
-
theme={theme}
|
|
100
|
-
/>
|
|
101
|
-
</View>
|
|
102
|
-
|
|
103
50
|
<Text style={styles.bottomText}>
|
|
104
|
-
{strings.validation.almostDone || '
|
|
51
|
+
{strings.validation.almostDone || 'Esto puede tardar unos segundos...'}
|
|
105
52
|
</Text>
|
|
106
53
|
</View>
|
|
107
54
|
</View>
|
|
108
55
|
);
|
|
109
56
|
};
|
|
110
57
|
|
|
111
|
-
interface ValidationStepProps {
|
|
112
|
-
icon: string;
|
|
113
|
-
text: string;
|
|
114
|
-
completed: boolean;
|
|
115
|
-
theme?: ThemeConfig;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
const ValidationStep: React.FC<ValidationStepProps> = ({
|
|
119
|
-
icon,
|
|
120
|
-
text,
|
|
121
|
-
completed,
|
|
122
|
-
theme,
|
|
123
|
-
}) => (
|
|
124
|
-
<View style={stepStyles.container}>
|
|
125
|
-
<View
|
|
126
|
-
style={[
|
|
127
|
-
stepStyles.iconContainer,
|
|
128
|
-
completed && {
|
|
129
|
-
backgroundColor: theme?.successColor || '#10B981',
|
|
130
|
-
},
|
|
131
|
-
]}
|
|
132
|
-
>
|
|
133
|
-
{completed && <Text style={stepStyles.icon}>{icon}</Text>}
|
|
134
|
-
</View>
|
|
135
|
-
<Text style={[stepStyles.text, completed && stepStyles.textCompleted]}>
|
|
136
|
-
{text}
|
|
137
|
-
</Text>
|
|
138
|
-
</View>
|
|
139
|
-
);
|
|
140
|
-
|
|
141
|
-
const stepStyles = StyleSheet.create({
|
|
142
|
-
container: {
|
|
143
|
-
flexDirection: 'row',
|
|
144
|
-
alignItems: 'center',
|
|
145
|
-
marginVertical: 8,
|
|
146
|
-
},
|
|
147
|
-
iconContainer: {
|
|
148
|
-
width: 24,
|
|
149
|
-
height: 24,
|
|
150
|
-
borderRadius: 12,
|
|
151
|
-
backgroundColor: '#E5E7EB',
|
|
152
|
-
justifyContent: 'center',
|
|
153
|
-
alignItems: 'center',
|
|
154
|
-
marginRight: 12,
|
|
155
|
-
},
|
|
156
|
-
icon: {
|
|
157
|
-
color: '#FFFFFF',
|
|
158
|
-
fontSize: 14,
|
|
159
|
-
fontWeight: 'bold',
|
|
160
|
-
},
|
|
161
|
-
text: {
|
|
162
|
-
fontSize: 14,
|
|
163
|
-
color: '#9CA3AF',
|
|
164
|
-
},
|
|
165
|
-
textCompleted: {
|
|
166
|
-
color: '#111827',
|
|
167
|
-
fontWeight: '500',
|
|
168
|
-
},
|
|
169
|
-
});
|
|
170
|
-
|
|
171
58
|
const styles = StyleSheet.create({
|
|
172
59
|
container: {
|
|
173
60
|
flex: 1,
|
|
@@ -190,36 +77,11 @@ const styles = StyleSheet.create({
|
|
|
190
77
|
marginBottom: 32,
|
|
191
78
|
textAlign: 'center',
|
|
192
79
|
},
|
|
193
|
-
progressBarContainer: {
|
|
194
|
-
width: '100%',
|
|
195
|
-
marginBottom: 32,
|
|
196
|
-
},
|
|
197
|
-
progressBar: {
|
|
198
|
-
width: '100%',
|
|
199
|
-
height: 8,
|
|
200
|
-
backgroundColor: '#E5E7EB',
|
|
201
|
-
borderRadius: 4,
|
|
202
|
-
overflow: 'hidden',
|
|
203
|
-
marginBottom: 8,
|
|
204
|
-
},
|
|
205
|
-
progressFill: {
|
|
206
|
-
height: '100%',
|
|
207
|
-
borderRadius: 4,
|
|
208
|
-
},
|
|
209
|
-
progressText: {
|
|
210
|
-
fontSize: 14,
|
|
211
|
-
fontWeight: '600',
|
|
212
|
-
textAlign: 'center',
|
|
213
|
-
},
|
|
214
|
-
stepsContainer: {
|
|
215
|
-
width: '100%',
|
|
216
|
-
marginTop: 24,
|
|
217
|
-
marginBottom: 32,
|
|
218
|
-
},
|
|
219
80
|
bottomText: {
|
|
220
81
|
fontSize: 14,
|
|
221
82
|
color: '#9CA3AF',
|
|
222
83
|
textAlign: 'center',
|
|
84
|
+
marginTop: 16,
|
|
223
85
|
},
|
|
224
86
|
});
|
|
225
87
|
|