166 lines
4.0 KiB
TypeScript
166 lines
4.0 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useValidationsStore } from '../../stores/validations.store';
|
|
|
|
export default function ValidationCompleteScreen() {
|
|
const router = useRouter();
|
|
const { creditsRewarded, reset } = useValidationsStore();
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
reset();
|
|
};
|
|
}, []);
|
|
|
|
const handleContinue = () => {
|
|
router.replace('/');
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.content}>
|
|
<View style={styles.iconContainer}>
|
|
<Ionicons name="checkmark-circle" size={80} color="#28a745" />
|
|
</View>
|
|
|
|
<Text style={styles.title}>Gracias!</Text>
|
|
<Text style={styles.subtitle}>Tu validacion nos ayuda a mejorar</Text>
|
|
|
|
{creditsRewarded !== null && creditsRewarded > 0 && (
|
|
<View style={styles.rewardCard}>
|
|
<Ionicons name="gift" size={32} color="#f0ad4e" />
|
|
<View style={styles.rewardInfo}>
|
|
<Text style={styles.rewardLabel}>Recompensa</Text>
|
|
<Text style={styles.rewardValue}>+{creditsRewarded} credito</Text>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
<View style={styles.benefits}>
|
|
<Text style={styles.benefitsTitle}>Con tu ayuda:</Text>
|
|
<View style={styles.benefitItem}>
|
|
<Ionicons name="checkmark" size={20} color="#28a745" />
|
|
<Text style={styles.benefitText}>
|
|
Mejoramos la deteccion de productos
|
|
</Text>
|
|
</View>
|
|
<View style={styles.benefitItem}>
|
|
<Ionicons name="checkmark" size={20} color="#28a745" />
|
|
<Text style={styles.benefitText}>
|
|
Entrenamos mejor nuestros modelos
|
|
</Text>
|
|
</View>
|
|
<View style={styles.benefitItem}>
|
|
<Ionicons name="checkmark" size={20} color="#28a745" />
|
|
<Text style={styles.benefitText}>
|
|
Tu inventario sera mas preciso
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.footer}>
|
|
<TouchableOpacity style={styles.button} onPress={handleContinue}>
|
|
<Text style={styles.buttonText}>Continuar</Text>
|
|
<Ionicons name="arrow-forward" size={20} color="#fff" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#fff',
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: 24,
|
|
},
|
|
iconContainer: {
|
|
width: 120,
|
|
height: 120,
|
|
borderRadius: 60,
|
|
backgroundColor: '#e8f5e9',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: 24,
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
marginBottom: 8,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: '#666',
|
|
marginBottom: 24,
|
|
textAlign: 'center',
|
|
},
|
|
rewardCard: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: '#fff8e1',
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
marginBottom: 32,
|
|
width: '100%',
|
|
gap: 16,
|
|
},
|
|
rewardInfo: {
|
|
flex: 1,
|
|
},
|
|
rewardLabel: {
|
|
fontSize: 12,
|
|
color: '#666',
|
|
},
|
|
rewardValue: {
|
|
fontSize: 20,
|
|
fontWeight: 'bold',
|
|
color: '#f0ad4e',
|
|
},
|
|
benefits: {
|
|
width: '100%',
|
|
},
|
|
benefitsTitle: {
|
|
fontSize: 14,
|
|
color: '#666',
|
|
marginBottom: 12,
|
|
},
|
|
benefitItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
marginBottom: 8,
|
|
},
|
|
benefitText: {
|
|
fontSize: 14,
|
|
color: '#333',
|
|
flex: 1,
|
|
},
|
|
footer: {
|
|
padding: 16,
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#eee',
|
|
},
|
|
button: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#007AFF',
|
|
padding: 16,
|
|
borderRadius: 8,
|
|
gap: 8,
|
|
},
|
|
buttonText: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
});
|