359 lines
20 KiB
TypeScript
359 lines
20 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { View, Text, StyleSheet, Image, ScrollView, TouchableOpacity, TextInput, Platform, Alert, Switch } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import Animated, { FadeInUp, FadeInDown, FadeIn, FadeOut } from 'react-native-reanimated';
|
|
import * as ImagePicker from 'expo-image-picker';
|
|
import { COLORS, SPACING, TYPOGRAPHY, BORDER_RADIUS, SHADOWS } from '../../../constants/theme';
|
|
import { Card } from '../../../components/ui/Card';
|
|
import { Button } from '../../../components/ui/Button';
|
|
import { User, Settings, CreditCard, Bell, LogOut, ChevronRight, ChevronDown, Camera, Check, X, Plus, Languages, RefreshCw, FileText } from 'lucide-react-native';
|
|
import { useLanguage } from '../../../stores/LanguageContext';
|
|
import { useBarbearia } from '../../../stores/BarbeariaContext';
|
|
import { router, useLocalSearchParams } from 'expo-router';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
|
|
export default function ProfileScreen() {
|
|
const { t, language, setLanguage } = useLanguage();
|
|
const { barbearia } = useBarbearia();
|
|
const { slug } = useLocalSearchParams();
|
|
const colors = barbearia?.colors || COLORS;
|
|
const primaryColor = colors.primary;
|
|
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [name, setName] = useState('Cliente VIP');
|
|
const [email, setEmail] = useState('cliente@email.com');
|
|
const [phone, setPhone] = useState('(00) 00000-0000');
|
|
const [photo, setPhoto] = useState('https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=400');
|
|
const [cards, setCards] = useState([{ id: '1', last4: '4242', brand: 'Visa' }]);
|
|
|
|
// Accordion State
|
|
const [expandedSection, setExpandedSection] = useState<string | null>(null);
|
|
|
|
// Notification States
|
|
const [notifySms, setNotifySms] = useState(true);
|
|
const [notifyEmail, setNotifyEmail] = useState(true);
|
|
const [notifyReminder, setNotifyReminder] = useState(true);
|
|
|
|
// Carregar dados salvos localmente
|
|
useEffect(() => {
|
|
AsyncStorage.getItem('@barber_client_profile').then(data => {
|
|
if (data) {
|
|
const parsed = JSON.parse(data);
|
|
if (parsed.name) setName(parsed.name);
|
|
if (parsed.email) setEmail(parsed.email);
|
|
if (parsed.phone) setPhone(parsed.phone);
|
|
if (parsed.photo) setPhoto(parsed.photo);
|
|
if (parsed.cards) setCards(parsed.cards);
|
|
if (parsed.notifications) {
|
|
setNotifySms(parsed.notifications.sms);
|
|
setNotifyEmail(parsed.notifications.email);
|
|
setNotifyReminder(parsed.notifications.reminder);
|
|
}
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
const saveProfile = async (updates: any) => {
|
|
const current = {
|
|
name, email, phone, photo, cards,
|
|
notifications: { sms: notifySms, email: notifyEmail, reminder: notifyReminder },
|
|
...updates
|
|
};
|
|
await AsyncStorage.setItem('@barber_client_profile', JSON.stringify(current));
|
|
};
|
|
|
|
const handleSaveEdit = () => {
|
|
setIsEditing(false);
|
|
saveProfile({ name, email, phone });
|
|
};
|
|
|
|
const pickImage = async () => {
|
|
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
|
if (status !== 'granted') {
|
|
Alert.alert('Permissão necessária', 'Precisamos de acesso à sua galeria.');
|
|
return;
|
|
}
|
|
|
|
const result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
|
allowsEditing: true,
|
|
aspect: [1, 1],
|
|
quality: 0.5,
|
|
base64: true,
|
|
});
|
|
|
|
if (!result.canceled && result.assets[0].base64) {
|
|
const newPhoto = `data:image/jpeg;base64,${result.assets[0].base64}`;
|
|
setPhoto(newPhoto);
|
|
saveProfile({ photo: newPhoto });
|
|
}
|
|
};
|
|
|
|
const handleAddCard = () => {
|
|
if (Platform.OS === 'web') {
|
|
const last4 = window.prompt('Digite os 4 últimos dígitos do cartão:');
|
|
if (last4 && last4.length === 4) {
|
|
const newCard = { id: Math.random().toString(), last4, brand: 'Mastercard' };
|
|
const newCards = [...cards, newCard];
|
|
setCards(newCards);
|
|
saveProfile({ cards: newCards });
|
|
}
|
|
} else {
|
|
Alert.prompt('Novo Cartão', 'Digite os 4 últimos dígitos:', [
|
|
{ text: 'Cancelar', style: 'cancel' },
|
|
{
|
|
text: 'Adicionar',
|
|
onPress: (text) => {
|
|
if (text && text.length >= 4) {
|
|
const newCard = { id: Math.random().toString(), last4: text.slice(-4), brand: 'Mastercard' };
|
|
const newCards = [...cards, newCard];
|
|
setCards(newCards);
|
|
saveProfile({ cards: newCards });
|
|
}
|
|
}
|
|
}
|
|
]);
|
|
}
|
|
};
|
|
|
|
const removeCard = (id: string) => {
|
|
const newCards = cards.filter(c => c.id !== id);
|
|
setCards(newCards);
|
|
saveProfile({ cards: newCards });
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
router.replace(`/${slug}/(auth)/login`);
|
|
};
|
|
|
|
const handleClearCache = () => {
|
|
if (Platform.OS === 'web') {
|
|
window.alert('Dados sincronizados com sucesso!');
|
|
} else {
|
|
Alert.alert('Sucesso', 'Aplicativo sincronizado e cache limpo.');
|
|
}
|
|
};
|
|
|
|
// Calcula estatísticas reais baseadas no histórico do barbearia (simulação usando appointments globais)
|
|
const myAppointments = barbearia?.appointments?.filter(a => a.status === 'accepted') || [];
|
|
const cutsCount = myAppointments.length;
|
|
|
|
let points = 0;
|
|
myAppointments.forEach(a => {
|
|
points += (a.serviceIds.length * 5);
|
|
});
|
|
|
|
const displayCuts = cutsCount > 0 ? cutsCount : 0;
|
|
const displayPoints = points > 0 ? points : 0;
|
|
|
|
return (
|
|
<SafeAreaView style={[styles.container, { backgroundColor: colors.background }]}>
|
|
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: SPACING.xxl }}>
|
|
|
|
{/* Profile Header */}
|
|
<Animated.View entering={FadeInDown.duration(600)} style={styles.header}>
|
|
<TouchableOpacity onPress={pickImage} style={[styles.avatarContainer, { borderColor: primaryColor, ...(SHADOWS.glow(primaryColor) as any) }]}>
|
|
<Image source={{ uri: photo }} style={styles.avatar} />
|
|
<View style={[styles.editPhotoBadge, { backgroundColor: primaryColor }]}>
|
|
<Camera size={14} color={colors.background} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
{isEditing ? (
|
|
<Animated.View entering={FadeIn} style={styles.editForm}>
|
|
<TextInput style={[styles.input, { color: colors.text, borderColor: colors.divider, backgroundColor: colors.surface }]} value={name} onChangeText={setName} placeholder="Seu Nome" placeholderTextColor={colors.textMuted} />
|
|
<TextInput style={[styles.input, { color: colors.text, borderColor: colors.divider, backgroundColor: colors.surface }]} value={email} onChangeText={setEmail} placeholder="E-mail" keyboardType="email-address" placeholderTextColor={colors.textMuted} />
|
|
<TextInput style={[styles.input, { color: colors.text, borderColor: colors.divider, backgroundColor: colors.surface }]} value={phone} onChangeText={setPhone} placeholder="Telefone" placeholderTextColor={colors.textMuted} />
|
|
<View style={styles.editActions}>
|
|
<Button title="Cancelar" variant="ghost" onPress={() => setIsEditing(false)} style={{flex: 1}} textStyle={{color: colors.textMuted}} />
|
|
<Button title="Salvar" onPress={handleSaveEdit} style={{flex: 1, backgroundColor: primaryColor}} textStyle={{color: colors.background}} />
|
|
</View>
|
|
</Animated.View>
|
|
) : (
|
|
<Animated.View entering={FadeIn} style={{ alignItems: 'center' }}>
|
|
<Text style={[styles.userName, { color: colors.text }]}>{name}</Text>
|
|
<Text style={[styles.userEmail, { color: colors.textMuted }]}>{email}</Text>
|
|
<Text style={[styles.userEmail, { color: colors.textMuted, marginTop: -4 }]}>{phone}</Text>
|
|
<Button
|
|
title={t('profile.edit')}
|
|
variant="outline"
|
|
style={[styles.editButton, { borderColor: primaryColor }]}
|
|
textStyle={{ color: primaryColor }}
|
|
onPress={() => setIsEditing(true)}
|
|
/>
|
|
</Animated.View>
|
|
)}
|
|
</Animated.View>
|
|
|
|
{/* Stats */}
|
|
<Animated.View entering={FadeInUp.delay(200)} style={styles.statsRow}>
|
|
<Card style={[styles.statCard, { backgroundColor: colors.surface }]} variant="elevated">
|
|
<Text style={[styles.statNumber, { color: primaryColor }]}>{displayCuts}</Text>
|
|
<Text style={[styles.statLabel, { color: colors.textMuted }]}>{t('profile.cuts')}</Text>
|
|
</Card>
|
|
<Card style={[styles.statCard, { backgroundColor: colors.surface }]} variant="elevated">
|
|
<Text style={[styles.statNumber, { color: primaryColor }]}>{displayPoints}</Text>
|
|
<Text style={[styles.statLabel, { color: colors.textMuted }]}>{t('profile.points')}</Text>
|
|
<Text style={{fontSize: 9, color: primaryColor, marginTop: 4}}>+5 por serviço</Text>
|
|
</Card>
|
|
</Animated.View>
|
|
|
|
{/* Payment Methods Section */}
|
|
<Animated.View entering={FadeInUp.delay(300)} style={styles.section}>
|
|
<Text style={[styles.sectionTitle, { color: primaryColor }]}>Meus Cartões</Text>
|
|
{cards.map(card => (
|
|
<Card key={card.id} style={[styles.cardItem, { backgroundColor: colors.surface, borderColor: colors.divider }]} variant="outline">
|
|
<View style={styles.cardInfo}>
|
|
<CreditCard size={24} color={colors.textMuted} />
|
|
<View style={{ marginLeft: 12 }}>
|
|
<Text style={[styles.cardBrand, { color: colors.text }]}>{card.brand}</Text>
|
|
<Text style={[styles.cardNumber, { color: colors.textMuted }]}>**** **** **** {card.last4}</Text>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity onPress={() => removeCard(card.id)} style={{ padding: 8 }}>
|
|
<X size={20} color={COLORS.error} />
|
|
</TouchableOpacity>
|
|
</Card>
|
|
))}
|
|
<TouchableOpacity style={[styles.addCardBtn, { borderColor: primaryColor, backgroundColor: `${primaryColor}10` }]} onPress={handleAddCard}>
|
|
<Plus size={20} color={primaryColor} />
|
|
<Text style={{ color: primaryColor, fontWeight: 'bold', marginLeft: 8 }}>Adicionar Cartão</Text>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
|
|
{/* Menu Accordions */}
|
|
<View style={styles.menuSection}>
|
|
<Text style={[styles.sectionTitle, { color: primaryColor }]}>{t('profile.settings')}</Text>
|
|
|
|
{/* Notificações Accordion */}
|
|
<Animated.View entering={FadeInUp.delay(400)}>
|
|
<Card style={[styles.menuItem, { backgroundColor: colors.surface, borderColor: colors.divider }]} variant="outline">
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
style={styles.menuContent}
|
|
onPress={() => setExpandedSection(expandedSection === 'notifications' ? null : 'notifications')}
|
|
>
|
|
<View style={[styles.menuIconContainer, { backgroundColor: `${primaryColor}15` }]}>
|
|
<Bell size={20} color={primaryColor} />
|
|
</View>
|
|
<Text style={[styles.menuTitle, { color: colors.text }]}>{t('profile.notifications')}</Text>
|
|
{expandedSection === 'notifications' ? <ChevronDown size={20} color={colors.textMuted} /> : <ChevronRight size={20} color={colors.textMuted} />}
|
|
</TouchableOpacity>
|
|
|
|
{expandedSection === 'notifications' && (
|
|
<Animated.View entering={FadeInDown} style={[styles.accordionContent, { borderTopColor: colors.divider }]}>
|
|
<View style={styles.settingRow}>
|
|
<Text style={[styles.settingLabel, { color: colors.text }]}>Lembrete de Agendamento</Text>
|
|
<Switch value={notifyReminder} onValueChange={(v) => { setNotifyReminder(v); saveProfile({ notifications: { sms: notifySms, email: notifyEmail, reminder: v }}); }} trackColor={{ true: primaryColor }} />
|
|
</View>
|
|
<View style={styles.settingRow}>
|
|
<Text style={[styles.settingLabel, { color: colors.text }]}>Avisos via WhatsApp/SMS</Text>
|
|
<Switch value={notifySms} onValueChange={(v) => { setNotifySms(v); saveProfile({ notifications: { sms: v, email: notifyEmail, reminder: notifyReminder }}); }} trackColor={{ true: primaryColor }} />
|
|
</View>
|
|
<View style={styles.settingRow}>
|
|
<Text style={[styles.settingLabel, { color: colors.text }]}>Avisos via E-mail</Text>
|
|
<Switch value={notifyEmail} onValueChange={(v) => { setNotifyEmail(v); saveProfile({ notifications: { sms: notifySms, email: v, reminder: notifyReminder }}); }} trackColor={{ true: primaryColor }} />
|
|
</View>
|
|
</Animated.View>
|
|
)}
|
|
</Card>
|
|
</Animated.View>
|
|
|
|
{/* Configurações Accordion */}
|
|
<Animated.View entering={FadeInUp.delay(500)}>
|
|
<Card style={[styles.menuItem, { backgroundColor: colors.surface, borderColor: colors.divider, marginTop: SPACING.sm }]} variant="outline">
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
style={styles.menuContent}
|
|
onPress={() => setExpandedSection(expandedSection === 'settings' ? null : 'settings')}
|
|
>
|
|
<View style={[styles.menuIconContainer, { backgroundColor: `${primaryColor}15` }]}>
|
|
<Settings size={20} color={primaryColor} />
|
|
</View>
|
|
<Text style={[styles.menuTitle, { color: colors.text }]}>{t('profile.settings')}</Text>
|
|
{expandedSection === 'settings' ? <ChevronDown size={20} color={colors.textMuted} /> : <ChevronRight size={20} color={colors.textMuted} />}
|
|
</TouchableOpacity>
|
|
|
|
{expandedSection === 'settings' && (
|
|
<Animated.View entering={FadeInDown} style={[styles.accordionContent, { borderTopColor: colors.divider }]}>
|
|
|
|
<Text style={[styles.settingGroupTitle, { color: colors.textMuted }]}>Idioma do Aplicativo</Text>
|
|
<View style={styles.langRow}>
|
|
<TouchableOpacity style={[styles.langBtn, language === 'pt' ? { backgroundColor: primaryColor } : { backgroundColor: colors.surfaceLight }]} onPress={() => setLanguage('pt')}>
|
|
<Text style={[styles.langBtnText, language === 'pt' ? { color: colors.background } : { color: colors.text }]}>Português</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={[styles.langBtn, language === 'es' ? { backgroundColor: primaryColor } : { backgroundColor: colors.surfaceLight }]} onPress={() => setLanguage('es')}>
|
|
<Text style={[styles.langBtnText, language === 'es' ? { color: colors.background } : { color: colors.text }]}>Español</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<TouchableOpacity style={styles.actionRow} onPress={handleClearCache}>
|
|
<RefreshCw size={20} color={colors.textMuted} />
|
|
<Text style={[styles.actionRowText, { color: colors.text }]}>Sincronizar Dados / Limpar Cache</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.actionRow} onPress={() => { if(Platform.OS === 'web') window.alert('Termos de Uso e Privacidade'); else Alert.alert('Termos', '...'); }}>
|
|
<FileText size={20} color={colors.textMuted} />
|
|
<Text style={[styles.actionRowText, { color: colors.text }]}>Termos de Uso e Privacidade</Text>
|
|
</TouchableOpacity>
|
|
|
|
</Animated.View>
|
|
)}
|
|
</Card>
|
|
</Animated.View>
|
|
</View>
|
|
|
|
{/* Logout */}
|
|
<Animated.View entering={FadeInUp.delay(600)} style={styles.footer}>
|
|
<TouchableOpacity style={styles.logoutBtn} onPress={handleLogout}>
|
|
<LogOut size={20} color={COLORS.error} />
|
|
<Text style={[styles.logoutText, { color: COLORS.error }]}>{t('profile.logoutConfirm')}</Text>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1 },
|
|
header: { alignItems: 'center', padding: SPACING.xl, paddingTop: SPACING.xxl },
|
|
avatarContainer: { width: 104, height: 104, borderRadius: 52, borderWidth: 2, padding: 2, marginBottom: SPACING.lg },
|
|
avatar: { width: '100%', height: '100%', borderRadius: 50 },
|
|
editPhotoBadge: { position: 'absolute', bottom: 0, right: 0, width: 28, height: 28, borderRadius: 14, alignItems: 'center', justifyContent: 'center', borderWidth: 2, borderColor: COLORS.surface },
|
|
userName: { ...TYPOGRAPHY.h2, marginBottom: 4 },
|
|
userEmail: { ...TYPOGRAPHY.body, marginBottom: SPACING.xl },
|
|
editButton: { width: 160, minHeight: 44, borderWidth: 2 },
|
|
editForm: { width: '100%', maxWidth: 400, gap: SPACING.sm },
|
|
input: { padding: SPACING.md, borderRadius: BORDER_RADIUS.md, borderWidth: 1, ...TYPOGRAPHY.body },
|
|
editActions: { flexDirection: 'row', gap: SPACING.md, marginTop: SPACING.sm },
|
|
statsRow: { flexDirection: 'row', paddingHorizontal: SPACING.xl, gap: SPACING.md, marginBottom: SPACING.xxl },
|
|
statCard: { flex: 1, alignItems: 'center', padding: SPACING.lg },
|
|
statNumber: { ...TYPOGRAPHY.h1, marginBottom: 4 },
|
|
statLabel: { ...TYPOGRAPHY.caption },
|
|
section: { paddingHorizontal: SPACING.xl, marginBottom: SPACING.xl },
|
|
sectionTitle: { ...TYPOGRAPHY.h4, marginBottom: SPACING.md, fontWeight: '700' },
|
|
cardItem: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: SPACING.md, marginBottom: SPACING.sm, borderRadius: BORDER_RADIUS.md },
|
|
cardInfo: { flexDirection: 'row', alignItems: 'center' },
|
|
cardBrand: { ...TYPOGRAPHY.body, fontWeight: 'bold' },
|
|
cardNumber: { ...TYPOGRAPHY.caption, marginTop: 2 },
|
|
addCardBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: SPACING.md, borderRadius: BORDER_RADIUS.md, borderWidth: 1, borderStyle: 'dashed' },
|
|
menuSection: { paddingHorizontal: SPACING.xl, gap: SPACING.sm },
|
|
menuItem: { paddingVertical: SPACING.md, paddingHorizontal: SPACING.lg, borderRadius: BORDER_RADIUS.lg, overflow: 'hidden' },
|
|
menuContent: { flexDirection: 'row', alignItems: 'center' },
|
|
menuIconContainer: { width: 44, height: 44, borderRadius: BORDER_RADIUS.md, alignItems: 'center', justifyContent: 'center', marginRight: SPACING.md },
|
|
menuTitle: { flex: 1, ...TYPOGRAPHY.bodyLarge, fontWeight: '600' },
|
|
accordionContent: { marginTop: SPACING.md, paddingTop: SPACING.md, borderTopWidth: 1 },
|
|
settingRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: SPACING.sm },
|
|
settingLabel: { ...TYPOGRAPHY.body },
|
|
settingGroupTitle: { ...TYPOGRAPHY.caption, marginBottom: SPACING.sm, marginTop: SPACING.xs },
|
|
langRow: { flexDirection: 'row', gap: SPACING.sm, marginBottom: SPACING.lg },
|
|
langBtn: { flex: 1, paddingVertical: SPACING.sm, alignItems: 'center', borderRadius: BORDER_RADIUS.sm },
|
|
langBtnText: { ...TYPOGRAPHY.body, fontWeight: 'bold' },
|
|
actionRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: SPACING.md, gap: SPACING.md },
|
|
actionRowText: { ...TYPOGRAPHY.body },
|
|
footer: { padding: SPACING.xl, alignItems: 'center', marginTop: SPACING.lg },
|
|
logoutBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: SPACING.sm, paddingVertical: SPACING.md, paddingHorizontal: SPACING.xl, backgroundColor: 'rgba(239, 68, 68, 0.1)', borderRadius: BORDER_RADIUS.full, borderWidth: 1, borderColor: 'rgba(239, 68, 68, 0.3)' },
|
|
logoutText: { ...TYPOGRAPHY.body, fontWeight: '700' },
|
|
});
|