Ichitux
1305 lines
45 KiB
TypeScript
1305 lines
45 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, Alert, TextInput, ScrollView, Image, ActivityIndicator, Modal, Pressable, useWindowDimensions } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import * as ImagePicker from 'expo-image-picker';
|
|
import { useAuth } from '../../hooks/useAuth';
|
|
import { useThemeContext } from '../../components/ThemeProvider';
|
|
import { useThemeStore, ThemeMode } from '../../store/themeStore';
|
|
import { spacing, borderRadius } from '../../constants/theme';
|
|
import api from '../../services/api';
|
|
|
|
const TABLET_MIN_WIDTH = 768;
|
|
|
|
const AVATARS = [
|
|
require('../../assets/avatars/avatar1.png'),
|
|
require('../../assets/avatars/avatar2.png'),
|
|
require('../../assets/avatars/avatar3.png'),
|
|
require('../../assets/avatars/avatar4.png'),
|
|
require('../../assets/avatars/avatar5.png'),
|
|
require('../../assets/avatars/avatar6.png'),
|
|
];
|
|
|
|
const COLOR_CIRCLES = [
|
|
require('../../assets/avatars/color1.png'),
|
|
require('../../assets/avatars/color2.png'),
|
|
require('../../assets/avatars/color3.png'),
|
|
require('../../assets/avatars/color4.png'),
|
|
require('../../assets/avatars/color5.png'),
|
|
require('../../assets/avatars/color6.png'),
|
|
];
|
|
|
|
function resolveAvatarUrl(url: string | null | undefined): number | null {
|
|
if (!url) return null;
|
|
const matchPreset = url.match(/^preset_avatar_(\d+)$/);
|
|
if (matchPreset) {
|
|
const idx = parseInt(matchPreset[1], 10);
|
|
if (idx >= 1 && idx <= 6) return AVATARS[idx - 1];
|
|
}
|
|
const matchColor = url.match(/^color_circle_(\d+)$/);
|
|
if (matchColor) {
|
|
const idx = parseInt(matchColor[1], 10);
|
|
if (idx >= 1 && idx <= 6) return COLOR_CIRCLES[idx - 1];
|
|
}
|
|
return null;
|
|
}
|
|
|
|
interface SearchHistoryItem {
|
|
id: number;
|
|
address: string;
|
|
latitude: number | null;
|
|
longitude: number | null;
|
|
created_at: string;
|
|
}
|
|
|
|
interface Address {
|
|
id: number;
|
|
address: string;
|
|
latitude: number | null;
|
|
longitude: number | null;
|
|
label: string;
|
|
is_default: number;
|
|
created_at: string;
|
|
}
|
|
|
|
const THEME_OPTIONS: { mode: ThemeMode; label: string; icon: string }[] = [
|
|
{ mode: 'system', label: 'Sistema', icon: 'phone-portrait-outline' },
|
|
{ mode: 'light', label: 'Claro', icon: 'sunny-outline' },
|
|
{ mode: 'dark', label: 'Oscuro', icon: 'moon-outline' },
|
|
];
|
|
|
|
export default function ProfileScreen() {
|
|
const router = useRouter();
|
|
const { width } = useWindowDimensions();
|
|
const isTablet = width >= TABLET_MIN_WIDTH;
|
|
const { user, isAuthenticated, isLoading, logout, isAdmin } = useAuth();
|
|
const { colors, isDark } = useThemeContext();
|
|
const themeMode = useThemeStore((s) => s.mode);
|
|
const setThemeMode = useThemeStore((s) => s.setMode);
|
|
|
|
const initialResolved = resolveAvatarUrl(user?.avatar_url);
|
|
const [firstName, setFirstName] = useState(user?.first_name || '');
|
|
const [lastName, setLastName] = useState(user?.last_name || '');
|
|
const [avatarUrl, setAvatarUrl] = useState(initialResolved ? '' : (user?.avatar_url || ''));
|
|
const [avatarLocalSource, setAvatarLocalSource] = useState<number | null>(initialResolved);
|
|
const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
|
|
|
|
// Avatar modal state
|
|
const [showAvatarModal, setShowAvatarModal] = useState(false);
|
|
const [avatarTab, setAvatarTab] = useState<'presets' | 'colors' | 'upload'>('presets');
|
|
|
|
// Config modal state
|
|
const [showConfig, setShowConfig] = useState(false);
|
|
const [configFirstName, setConfigFirstName] = useState('');
|
|
const [configLastName, setConfigLastName] = useState('');
|
|
const [configEmail, setConfigEmail] = useState('');
|
|
const [configCity, setConfigCity] = useState('');
|
|
const [configAddress, setConfigAddress] = useState('');
|
|
const [configSaving, setConfigSaving] = useState(false);
|
|
const [configFeedback, setConfigFeedback] = useState<{ type: 'ok' | 'err'; text: string } | null>(null);
|
|
|
|
// Addresses modal state
|
|
const [showAddresses, setShowAddresses] = useState(false);
|
|
const [addresses, setAddresses] = useState<Address[]>([]);
|
|
const [addressesLoading, setAddressesLoading] = useState(false);
|
|
const [showAddressForm, setShowAddressForm] = useState(false);
|
|
const [editingAddressId, setEditingAddressId] = useState<number | null>(null);
|
|
const [formAddress, setFormAddress] = useState('');
|
|
const [formLabel, setFormLabel] = useState('');
|
|
const [formDefault, setFormDefault] = useState(false);
|
|
const [formSaving, setFormSaving] = useState(false);
|
|
const [formError, setFormError] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (isAuthenticated) {
|
|
loadSearchHistory();
|
|
}
|
|
}, [isAuthenticated]);
|
|
|
|
useEffect(() => {
|
|
setFirstName(user?.first_name || '');
|
|
setLastName(user?.last_name || '');
|
|
const resolved = resolveAvatarUrl(user?.avatar_url);
|
|
if (resolved) {
|
|
setAvatarLocalSource(resolved);
|
|
setAvatarUrl('');
|
|
} else {
|
|
setAvatarLocalSource(null);
|
|
setAvatarUrl(user?.avatar_url || '');
|
|
}
|
|
}, [user]);
|
|
|
|
async function loadSearchHistory() {
|
|
try {
|
|
const res = await api.get('/search-history');
|
|
setSearchHistory(res.data);
|
|
} catch (err) {
|
|
console.error('Error loading search history:', err);
|
|
}
|
|
}
|
|
|
|
function openConfig() {
|
|
setConfigFirstName(user?.first_name || '');
|
|
setConfigLastName(user?.last_name || '');
|
|
setConfigEmail(user?.email || '');
|
|
setConfigCity(user?.city || '');
|
|
setConfigAddress(user?.address || '');
|
|
setConfigFeedback(null);
|
|
setShowConfig(true);
|
|
}
|
|
|
|
async function handleConfigSave() {
|
|
setConfigSaving(true);
|
|
setConfigFeedback(null);
|
|
try {
|
|
const res = await api.put('/users/me', {
|
|
first_name: configFirstName.trim() || null,
|
|
last_name: configLastName.trim() || null,
|
|
email: configEmail.trim() || null,
|
|
city: configCity.trim() || null,
|
|
address: configAddress.trim() || null,
|
|
});
|
|
const updated = res.data;
|
|
setFirstName(updated.first_name || '');
|
|
setLastName(updated.last_name || '');
|
|
setConfigFeedback({ type: 'ok', text: 'Perfil guardado.' });
|
|
setTimeout(() => setShowConfig(false), 1200);
|
|
} catch (err: any) {
|
|
setConfigFeedback({ type: 'err', text: err.message || 'Error al guardar' });
|
|
} finally {
|
|
setConfigSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handlePickImage() {
|
|
const result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
|
allowsEditing: true,
|
|
aspect: [1, 1],
|
|
quality: 0.8,
|
|
base64: true,
|
|
});
|
|
|
|
if (!result.canceled && result.assets[0]) {
|
|
const asset = result.assets[0];
|
|
if (asset.base64) {
|
|
const dataUri = `data:${asset.mimeType};base64,${asset.base64}`;
|
|
setAvatarLocalSource(null);
|
|
setAvatarUrl(dataUri);
|
|
setShowAvatarModal(false);
|
|
try {
|
|
await api.put('/users/me', { avatar_url: dataUri });
|
|
} catch (err) {
|
|
console.error('Error saving avatar:', err);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async function handleTakePhoto() {
|
|
const { status } = await ImagePicker.requestCameraPermissionsAsync();
|
|
if (status !== 'granted') {
|
|
Alert.alert('Permiso requerido', 'Necesitamos permiso para acceder a la cámara.');
|
|
return;
|
|
}
|
|
|
|
const result = await ImagePicker.launchCameraAsync({
|
|
allowsEditing: true,
|
|
aspect: [1, 1],
|
|
quality: 0.8,
|
|
base64: true,
|
|
});
|
|
|
|
if (!result.canceled && result.assets[0]) {
|
|
const asset = result.assets[0];
|
|
if (asset.base64) {
|
|
const dataUri = `data:${asset.mimeType};base64,${asset.base64}`;
|
|
setAvatarLocalSource(null);
|
|
setAvatarUrl(dataUri);
|
|
setShowAvatarModal(false);
|
|
try {
|
|
await api.put('/users/me', { avatar_url: dataUri });
|
|
} catch (err) {
|
|
console.error('Error saving avatar:', err);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async function handleSelectPresetAvatar(index: number) {
|
|
const avatarSource = AVATARS[index];
|
|
setAvatarUrl('');
|
|
setAvatarLocalSource(avatarSource);
|
|
setShowAvatarModal(false);
|
|
try {
|
|
await api.put('/users/me', { avatar_url: `preset_avatar_${index + 1}` });
|
|
} catch (err) {
|
|
console.error('Error saving avatar:', err);
|
|
}
|
|
}
|
|
|
|
async function handleSelectColor(index: number) {
|
|
const colorSource = COLOR_CIRCLES[index];
|
|
setAvatarUrl('');
|
|
setAvatarLocalSource(colorSource);
|
|
setShowAvatarModal(false);
|
|
try {
|
|
await api.put('/users/me', { avatar_url: `color_circle_${index + 1}` });
|
|
} catch (err) {
|
|
console.error('Error saving avatar:', err);
|
|
}
|
|
}
|
|
|
|
async function handleDeleteSearch(id: number) {
|
|
try {
|
|
await api.delete(`/search-history/${id}`);
|
|
setSearchHistory(prev => prev.filter(item => item.id !== id));
|
|
} catch (err) {
|
|
console.error('Error deleting search:', err);
|
|
}
|
|
}
|
|
|
|
// Addresses
|
|
async function loadAddresses() {
|
|
setAddressesLoading(true);
|
|
try {
|
|
const res = await api.get('/addresses');
|
|
setAddresses(res.data);
|
|
} catch (err) {
|
|
console.error('Error loading addresses:', err);
|
|
} finally {
|
|
setAddressesLoading(false);
|
|
}
|
|
}
|
|
|
|
function openAddresses() {
|
|
setShowAddresses(true);
|
|
loadAddresses();
|
|
}
|
|
|
|
function openAddAddressForm() {
|
|
setEditingAddressId(null);
|
|
setFormAddress('');
|
|
setFormLabel('');
|
|
setFormDefault(addresses.length === 0);
|
|
setFormError('');
|
|
setShowAddressForm(true);
|
|
}
|
|
|
|
function openEditAddressForm(addr: Address) {
|
|
setEditingAddressId(addr.id);
|
|
setFormAddress(addr.address);
|
|
setFormLabel(addr.label || '');
|
|
setFormDefault(Boolean(addr.is_default));
|
|
setFormError('');
|
|
setShowAddressForm(true);
|
|
}
|
|
|
|
async function handleAddressSave() {
|
|
const addr = formAddress.trim();
|
|
if (!addr) {
|
|
setFormError('La dirección es obligatoria');
|
|
return;
|
|
}
|
|
setFormSaving(true);
|
|
setFormError('');
|
|
try {
|
|
const url = editingAddressId ? `/api/addresses/${editingAddressId}` : '/api/addresses';
|
|
const method = editingAddressId ? 'PUT' : 'POST';
|
|
const res = await fetch(url, {
|
|
method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({
|
|
address: addr,
|
|
label: formLabel.trim(),
|
|
is_default: formDefault,
|
|
}),
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(() => ({}));
|
|
throw new Error(err.error || 'Error al guardar la dirección');
|
|
}
|
|
setShowAddressForm(false);
|
|
setEditingAddressId(null);
|
|
loadAddresses();
|
|
} catch (err: any) {
|
|
setFormError(err.message);
|
|
} finally {
|
|
setFormSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handleDeleteAddress(id: number) {
|
|
try {
|
|
const res = await fetch(`/api/addresses/${id}`, {
|
|
method: 'DELETE',
|
|
credentials: 'include',
|
|
});
|
|
if (res.ok) {
|
|
setAddresses(prev => prev.filter(a => a.id !== id));
|
|
}
|
|
} catch (err) {
|
|
console.error('Error deleting address:', err);
|
|
}
|
|
}
|
|
|
|
async function handleSetDefault(id: number) {
|
|
try {
|
|
const res = await fetch(`/api/addresses/${id}/default`, {
|
|
method: 'PUT',
|
|
credentials: 'include',
|
|
});
|
|
if (res.ok) {
|
|
loadAddresses();
|
|
}
|
|
} catch (err) {
|
|
console.error('Error setting default address:', err);
|
|
}
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
Alert.alert(
|
|
'Cerrar Sesión',
|
|
'¿Estás seguro que deseas cerrar sesión?',
|
|
[
|
|
{ text: 'Cancelar', style: 'cancel' },
|
|
{
|
|
text: 'Cerrar Sesión',
|
|
style: 'destructive',
|
|
onPress: async () => {
|
|
await logout();
|
|
router.replace('/auth/login');
|
|
}
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
const getThemeModeLabel = () => {
|
|
const opt = THEME_OPTIONS.find(o => o.mode === themeMode);
|
|
return opt?.label || 'Sistema';
|
|
};
|
|
|
|
const getThemeModeIcon = (): 'phone-portrait-outline' | 'sunny-outline' | 'moon-outline' => {
|
|
if (themeMode === 'light') return 'sunny-outline';
|
|
if (themeMode === 'dark') return 'moon-outline';
|
|
return 'phone-portrait-outline';
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: colors.background }]}>
|
|
<Text style={[styles.loadingText, { color: colors.textSecondary }]}>Cargando...</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (!isAuthenticated) {
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: colors.background }]}>
|
|
<View style={styles.authPrompt}>
|
|
<Ionicons name="person-outline" size={isTablet ? 80 : 64} color={colors.textSecondary} />
|
|
<Text style={[styles.authTitle, isTablet && styles.authTitleTablet, { color: colors.text }]}>Inicia Sesión</Text>
|
|
<Text style={[styles.authSubtitle, isTablet && styles.authSubtitleTablet, { color: colors.textSecondary }]}>
|
|
Inicia sesión para acceder a todas las funcionalidades
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={[styles.button, isTablet && styles.buttonTablet]}
|
|
onPress={() => router.push('/auth/login')}
|
|
>
|
|
<Text style={[styles.buttonText, isTablet && styles.buttonTextTablet]}>Iniciar Sesión</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.linkButton}
|
|
onPress={() => router.push('/auth/register')}
|
|
>
|
|
<Text style={[styles.linkText, { color: colors.primary }]}>Crear cuenta nueva</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
|
|
{/* Avatar Section */}
|
|
<View style={[styles.avatarSection, isTablet && styles.avatarSectionTablet, { backgroundColor: colors.card }]}>
|
|
<TouchableOpacity style={[styles.avatarContainer, isTablet && styles.avatarContainerTablet, { backgroundColor: colors.primaryContainer }]} onPress={() => setShowAvatarModal(true)}>
|
|
{avatarLocalSource ? (
|
|
<Image source={avatarLocalSource} style={[styles.avatarImage, isTablet && styles.avatarImageTablet]} />
|
|
) : avatarUrl ? (
|
|
<Image source={{ uri: avatarUrl }} style={[styles.avatarImage, isTablet && styles.avatarImageTablet]} />
|
|
) : (
|
|
<Ionicons name="person" size={isTablet ? 50 : 40} color={colors.primary} />
|
|
)}
|
|
<View style={styles.avatarOverlay}>
|
|
<Ionicons name="camera" size={24} color="white" />
|
|
</View>
|
|
</TouchableOpacity>
|
|
<Text style={[styles.editAvatarText, { color: colors.textSecondary }]}>Toca para cambiar foto</Text>
|
|
</View>
|
|
|
|
{/* Read-only Name Section */}
|
|
<View style={[styles.infoSection, isTablet && styles.infoSectionTablet, { backgroundColor: colors.card }]}>
|
|
<View style={[styles.infoCard, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
|
|
<Text style={[styles.infoLabel, { color: colors.textSecondary }]}>Nombre</Text>
|
|
<Text style={[styles.infoValue, { color: colors.text }]}>{firstName || '—'}</Text>
|
|
</View>
|
|
<View style={[styles.infoCard, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
|
|
<Text style={[styles.infoLabel, { color: colors.textSecondary }]}>Apellidos</Text>
|
|
<Text style={[styles.infoValue, { color: colors.text }]}>{lastName || '—'}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Menu Section */}
|
|
<View style={[styles.menuSection, isTablet && styles.menuSectionTablet, { backgroundColor: colors.card }]}>
|
|
{/* Theme Toggle */}
|
|
<View style={[styles.themeSection, { borderBottomColor: colors.border }]}>
|
|
<View style={styles.themeHeader}>
|
|
<Ionicons name={getThemeModeIcon()} size={24} color={colors.primary} />
|
|
<Text style={[styles.themeTitle, { color: colors.text }]}>Modo de pantalla</Text>
|
|
</View>
|
|
<View style={styles.themeOptions}>
|
|
{THEME_OPTIONS.map((opt) => (
|
|
<TouchableOpacity
|
|
key={opt.mode}
|
|
style={[
|
|
styles.themeOption,
|
|
{ backgroundColor: colors.surfaceLow, borderColor: colors.border },
|
|
themeMode === opt.mode && { backgroundColor: colors.primaryContainer, borderColor: colors.primary },
|
|
]}
|
|
onPress={() => setThemeMode(opt.mode)}
|
|
>
|
|
<Ionicons
|
|
name={opt.icon as any}
|
|
size={18}
|
|
color={themeMode === opt.mode ? colors.primary : colors.textSecondary}
|
|
/>
|
|
<Text
|
|
style={[
|
|
styles.themeOptionText,
|
|
{ color: themeMode === opt.mode ? colors.primary : colors.textSecondary },
|
|
themeMode === opt.mode && styles.themeOptionTextActive,
|
|
]}
|
|
>
|
|
{opt.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
<TouchableOpacity style={[styles.menuItem, { borderBottomColor: colors.border }]} onPress={openConfig}>
|
|
<Ionicons name="settings" size={24} color={colors.textSecondary} />
|
|
<Text style={[styles.menuText, { color: colors.text }]}>Configuración</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={[styles.menuItem, { borderBottomColor: colors.border }]} onPress={openAddresses}>
|
|
<Ionicons name="location" size={24} color={colors.primary} />
|
|
<Text style={[styles.menuText, { color: colors.text }]}>Mis Direcciones</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
|
|
{searchHistory.length > 0 && (
|
|
<View style={[styles.searchHistorySection, { backgroundColor: colors.surfaceLow, borderBottomColor: colors.border }]}>
|
|
<Text style={[styles.searchHistoryTitle, { color: colors.textSecondary }]}>Tus búsquedas recientes:</Text>
|
|
{searchHistory.map((item) => (
|
|
<View key={item.id} style={[styles.searchItem, { borderBottomColor: colors.border }]}>
|
|
<Text style={[styles.searchAddress, { color: colors.text }]}>{item.address}</Text>
|
|
<TouchableOpacity
|
|
onPress={() => handleDeleteSearch(item.id)}
|
|
style={styles.searchDelete}
|
|
>
|
|
<Ionicons name="close-circle" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
|
|
{isAdmin && (
|
|
<TouchableOpacity style={styles.menuItem}>
|
|
<Ionicons name="settings" size={24} color={colors.text} />
|
|
<Text style={[styles.menuText, { color: colors.text }]}>Panel Admin</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
|
|
{/* Logout Button */}
|
|
<TouchableOpacity style={[styles.logoutButton, isTablet && styles.logoutButtonTablet, { backgroundColor: colors.card, borderColor: colors.danger }]} onPress={handleLogout}>
|
|
<Ionicons name="log-out" size={20} color={colors.danger} />
|
|
<Text style={[styles.logoutText, { color: colors.danger }]}>Cerrar Sesión</Text>
|
|
</TouchableOpacity>
|
|
|
|
{/* Avatar Selection Modal */}
|
|
<Modal visible={showAvatarModal} animationType="slide" transparent>
|
|
<View style={styles.modalBackdrop}>
|
|
<View style={[styles.avatarModalContent, { backgroundColor: colors.card }]}>
|
|
<View style={[styles.modalHeader, { borderBottomColor: colors.border }]}>
|
|
<Text style={[styles.modalTitle, { color: colors.text }]}>Cambiar Avatar</Text>
|
|
<TouchableOpacity onPress={() => setShowAvatarModal(false)}>
|
|
<Ionicons name="close" size={24} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Tab Buttons */}
|
|
<View style={[styles.tabContainer, { borderBottomColor: colors.border }]}>
|
|
<TouchableOpacity
|
|
style={[styles.tabButton, avatarTab === 'presets' && { borderBottomWidth: 2, borderBottomColor: colors.primary }]}
|
|
onPress={() => setAvatarTab('presets')}
|
|
>
|
|
<Ionicons name="person" size={20} color={avatarTab === 'presets' ? colors.primary : colors.textSecondary} />
|
|
<Text style={[styles.tabText, avatarTab === 'presets' && { color: colors.primary, fontWeight: '600' }, { color: colors.textSecondary }]}>Prediseñado</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[styles.tabButton, avatarTab === 'colors' && { borderBottomWidth: 2, borderBottomColor: colors.primary }]}
|
|
onPress={() => setAvatarTab('colors')}
|
|
>
|
|
<Ionicons name="color-palette" size={20} color={avatarTab === 'colors' ? colors.primary : colors.textSecondary} />
|
|
<Text style={[styles.tabText, avatarTab === 'colors' && { color: colors.primary, fontWeight: '600' }, { color: colors.textSecondary }]}>Colores</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[styles.tabButton, avatarTab === 'upload' && { borderBottomWidth: 2, borderBottomColor: colors.primary }]}
|
|
onPress={() => setAvatarTab('upload')}
|
|
>
|
|
<Ionicons name="cloud-upload" size={20} color={avatarTab === 'upload' ? colors.primary : colors.textSecondary} />
|
|
<Text style={[styles.tabText, avatarTab === 'upload' && { color: colors.primary, fontWeight: '600' }, { color: colors.textSecondary }]}>Subir</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Tab Content */}
|
|
<ScrollView style={styles.tabContent}>
|
|
{avatarTab === 'presets' && (
|
|
<View style={styles.avatarGrid}>
|
|
{AVATARS.map((avatar, index) => (
|
|
<TouchableOpacity
|
|
key={index}
|
|
style={styles.avatarOption}
|
|
onPress={() => handleSelectPresetAvatar(index)}
|
|
>
|
|
<Image source={avatar} style={styles.avatarOptionImage} />
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
)}
|
|
|
|
{avatarTab === 'colors' && (
|
|
<View style={styles.avatarGrid}>
|
|
{COLOR_CIRCLES.map((color, index) => (
|
|
<TouchableOpacity
|
|
key={index}
|
|
style={styles.avatarOption}
|
|
onPress={() => handleSelectColor(index)}
|
|
>
|
|
<Image source={color} style={styles.avatarOptionImage} />
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
)}
|
|
|
|
{avatarTab === 'upload' && (
|
|
<View style={styles.uploadSection}>
|
|
<TouchableOpacity style={[styles.uploadOption, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]} onPress={handleTakePhoto}>
|
|
<View style={[styles.uploadIconContainer, { backgroundColor: colors.card }]}>
|
|
<Ionicons name="camera" size={32} color={colors.primary} />
|
|
</View>
|
|
<Text style={[styles.uploadOptionTitle, { color: colors.text }]}>Tomar foto</Text>
|
|
<Text style={[styles.uploadOptionSubtitle, { color: colors.textSecondary }]}>Usa la cámara de tu dispositivo</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={[styles.uploadOption, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]} onPress={handlePickImage}>
|
|
<View style={[styles.uploadIconContainer, { backgroundColor: colors.card }]}>
|
|
<Ionicons name="images" size={32} color={colors.primary} />
|
|
</View>
|
|
<Text style={[styles.uploadOptionTitle, { color: colors.text }]}>Elegir de galería</Text>
|
|
<Text style={[styles.uploadOptionSubtitle, { color: colors.textSecondary }]}>Selecciona una imagen existente</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
|
|
{/* Config Modal */}
|
|
<Modal visible={showConfig} animationType="slide" transparent>
|
|
<View style={styles.modalBackdrop}>
|
|
<View style={[styles.modalContent, { backgroundColor: colors.card }]}>
|
|
<View style={[styles.modalHeader, { borderBottomColor: colors.border }]}>
|
|
<Text style={[styles.modalTitle, { color: colors.text }]}>Configuración</Text>
|
|
<TouchableOpacity onPress={() => setShowConfig(false)}>
|
|
<Ionicons name="close" size={24} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<ScrollView style={styles.modalBody}>
|
|
<View style={styles.modalField}>
|
|
<Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Nombre</Text>
|
|
<TextInput
|
|
style={[styles.modalInput, { borderColor: colors.border, color: colors.text }]}
|
|
value={configFirstName}
|
|
onChangeText={setConfigFirstName}
|
|
placeholder="Tu nombre"
|
|
placeholderTextColor={colors.textSecondary}
|
|
editable={!configSaving}
|
|
/>
|
|
</View>
|
|
<View style={styles.modalField}>
|
|
<Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Apellidos</Text>
|
|
<TextInput
|
|
style={[styles.modalInput, { borderColor: colors.border, color: colors.text }]}
|
|
value={configLastName}
|
|
onChangeText={setConfigLastName}
|
|
placeholder="Tus apellidos"
|
|
placeholderTextColor={colors.textSecondary}
|
|
editable={!configSaving}
|
|
/>
|
|
</View>
|
|
<View style={styles.modalField}>
|
|
<Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Correo electrónico</Text>
|
|
<TextInput
|
|
style={[styles.modalInput, { borderColor: colors.border, color: colors.text }]}
|
|
value={configEmail}
|
|
onChangeText={setConfigEmail}
|
|
placeholder="tu@email.com"
|
|
placeholderTextColor={colors.textSecondary}
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
editable={!configSaving}
|
|
/>
|
|
</View>
|
|
<View style={styles.modalField}>
|
|
<Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Ciudad</Text>
|
|
<TextInput
|
|
style={[styles.modalInput, { borderColor: colors.border, color: colors.text }]}
|
|
value={configCity}
|
|
onChangeText={setConfigCity}
|
|
placeholder="Tu ciudad"
|
|
placeholderTextColor={colors.textSecondary}
|
|
editable={!configSaving}
|
|
/>
|
|
</View>
|
|
<View style={styles.modalField}>
|
|
<Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Dirección</Text>
|
|
<TextInput
|
|
style={[styles.modalInput, { borderColor: colors.border, color: colors.text }]}
|
|
value={configAddress}
|
|
onChangeText={setConfigAddress}
|
|
placeholder="Calle Mayor 1, Madrid"
|
|
placeholderTextColor={colors.textSecondary}
|
|
editable={!configSaving}
|
|
/>
|
|
</View>
|
|
|
|
{configFeedback && (
|
|
<View style={[styles.modalFeedback, configFeedback.type === 'ok' ? { backgroundColor: isDark ? '#1a3a1c' : '#eaf7ec', borderColor: isDark ? '#2a5a35' : '#cfead0' } : { backgroundColor: colors.dangerContainer, borderColor: isDark ? '#5a2020' : '#fecaca' }]}>
|
|
<Text style={[styles.modalFeedbackText, { color: colors.text }]}>{configFeedback.text}</Text>
|
|
</View>
|
|
)}
|
|
|
|
<View style={styles.modalActions}>
|
|
<TouchableOpacity
|
|
style={[styles.modalCancelBtn, { borderColor: colors.border }]}
|
|
onPress={() => setShowConfig(false)}
|
|
disabled={configSaving}
|
|
>
|
|
<Text style={[styles.modalCancelText, { color: colors.text }]}>Cancelar</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[styles.modalSaveBtn, configSaving && styles.modalSaveBtnDisabled]}
|
|
onPress={handleConfigSave}
|
|
disabled={configSaving}
|
|
>
|
|
{configSaving ? (
|
|
<ActivityIndicator color={colors.textInverse} />
|
|
) : (
|
|
<Text style={styles.modalSaveText}>Guardar</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
|
|
{/* Addresses Modal */}
|
|
<Modal visible={showAddresses} animationType="slide" transparent>
|
|
<View style={styles.modalBackdrop}>
|
|
<View style={[styles.modalContent, { backgroundColor: colors.card }]}>
|
|
<View style={[styles.modalHeader, { borderBottomColor: colors.border }]}>
|
|
<Text style={[styles.modalTitle, { color: colors.text }]}>Mis Direcciones</Text>
|
|
<TouchableOpacity onPress={() => { setShowAddresses(false); setShowAddressForm(false); }}>
|
|
<Ionicons name="close" size={24} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<ScrollView style={styles.modalBody}>
|
|
{showAddressForm ? (
|
|
<View>
|
|
<View style={styles.modalField}>
|
|
<Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Dirección</Text>
|
|
<TextInput
|
|
style={[styles.modalInput, { borderColor: colors.border, color: colors.text }]}
|
|
value={formAddress}
|
|
onChangeText={setFormAddress}
|
|
placeholder="Calle Mayor 1, Madrid"
|
|
placeholderTextColor={colors.textSecondary}
|
|
editable={!formSaving}
|
|
/>
|
|
</View>
|
|
<View style={styles.modalField}>
|
|
<Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Etiqueta (opcional)</Text>
|
|
<TextInput
|
|
style={[styles.modalInput, { borderColor: colors.border, color: colors.text }]}
|
|
value={formLabel}
|
|
onChangeText={setFormLabel}
|
|
placeholder="Ej: Casa, Trabajo, Segunda residencia"
|
|
placeholderTextColor={colors.textSecondary}
|
|
editable={!formSaving}
|
|
/>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={styles.addressDefaultCheckbox}
|
|
onPress={() => setFormDefault(!formDefault)}
|
|
disabled={formSaving}
|
|
>
|
|
<Ionicons
|
|
name={formDefault ? 'checkbox' : 'square-outline'}
|
|
size={22}
|
|
color={formDefault ? colors.primary : colors.textSecondary}
|
|
/>
|
|
<Text style={[styles.addressDefaultLabel, { color: colors.text }]}>Dirección predeterminada</Text>
|
|
</TouchableOpacity>
|
|
{formError ? (
|
|
<View style={[styles.modalFeedback, { backgroundColor: colors.dangerContainer, borderColor: isDark ? '#5a2020' : '#fecaca' }]}>
|
|
<Text style={[styles.modalFeedbackText, { color: colors.text }]}>{formError}</Text>
|
|
</View>
|
|
) : null}
|
|
<View style={styles.modalActions}>
|
|
<TouchableOpacity
|
|
style={[styles.modalCancelBtn, { borderColor: colors.border }]}
|
|
onPress={() => { setShowAddressForm(false); setFormError(''); }}
|
|
disabled={formSaving}
|
|
>
|
|
<Text style={[styles.modalCancelText, { color: colors.text }]}>Cancelar</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[styles.modalSaveBtn, formSaving && styles.modalSaveBtnDisabled]}
|
|
onPress={handleAddressSave}
|
|
disabled={formSaving}
|
|
>
|
|
{formSaving ? (
|
|
<ActivityIndicator color={colors.textInverse} />
|
|
) : (
|
|
<Text style={styles.modalSaveText}>{editingAddressId ? 'Actualizar' : 'Añadir'}</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View>
|
|
{addressesLoading ? (
|
|
<Text style={[styles.addressLoadingText, { color: colors.textSecondary }]}>Cargando direcciones...</Text>
|
|
) : (
|
|
<View style={styles.addressList}>
|
|
{user?.address ? (
|
|
<View style={[styles.addressItem, { borderColor: colors.primary, backgroundColor: isDark ? '#1a3a1c' : '#eaf7ec' }]}>
|
|
<View style={styles.addressItemInfo}>
|
|
<Text style={[styles.addressLabel, { color: colors.primary }]}>Dirección principal</Text>
|
|
<Text style={[styles.addressText, { color: colors.text }]}>{user.address}</Text>
|
|
<View style={[styles.addressBadge, { backgroundColor: colors.primary }]}>
|
|
<Text style={styles.addressBadgeText}>Predeterminada</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
) : null}
|
|
{addresses.map((addr) => (
|
|
<View key={addr.id} style={[styles.addressItem, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
|
|
<View style={styles.addressItemInfo}>
|
|
{addr.label ? <Text style={[styles.addressLabel, { color: colors.primary }]}>{addr.label}</Text> : null}
|
|
<Text style={[styles.addressText, { color: colors.text }]}>{addr.address}</Text>
|
|
<TouchableOpacity onPress={() => handleSetDefault(addr.id)}>
|
|
<Text style={[styles.addressSetDefault, { color: colors.primary }]}>Establecer como predeterminada</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={styles.addressItemActions}>
|
|
<TouchableOpacity style={styles.addressActionBtn} onPress={() => openEditAddressForm(addr)}>
|
|
<Ionicons name="pencil" size={18} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.addressActionBtn} onPress={() => handleDeleteAddress(addr.id)}>
|
|
<Ionicons name="close" size={18} color={colors.danger} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
<TouchableOpacity style={[styles.addressAddBtn, { borderColor: colors.border }]} onPress={openAddAddressForm}>
|
|
<Ionicons name="add" size={22} color={colors.primary} />
|
|
<Text style={[styles.addressAddBtnText, { color: colors.primary }]}>Añadir más</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
loadingText: {
|
|
textAlign: 'center',
|
|
marginTop: spacing.xxl,
|
|
},
|
|
authPrompt: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: spacing.xl,
|
|
},
|
|
authTitle: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
marginTop: spacing.lg,
|
|
},
|
|
authTitleTablet: {
|
|
fontSize: 32,
|
|
},
|
|
authSubtitle: {
|
|
fontSize: 16,
|
|
textAlign: 'center',
|
|
marginTop: spacing.sm,
|
|
marginBottom: spacing.xl,
|
|
},
|
|
authSubtitleTablet: {
|
|
fontSize: 18,
|
|
maxWidth: 400,
|
|
},
|
|
avatarSection: {
|
|
alignItems: 'center',
|
|
padding: spacing.xl,
|
|
},
|
|
avatarSectionTablet: {
|
|
paddingVertical: spacing.xxl,
|
|
},
|
|
avatarContainer: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
overflow: 'hidden',
|
|
},
|
|
avatarContainerTablet: {
|
|
width: 140,
|
|
height: 140,
|
|
borderRadius: 70,
|
|
},
|
|
avatarImage: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
},
|
|
avatarImageTablet: {
|
|
width: 140,
|
|
height: 140,
|
|
borderRadius: 70,
|
|
},
|
|
avatarOverlay: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
opacity: 0.8,
|
|
},
|
|
editAvatarText: {
|
|
marginTop: spacing.sm,
|
|
fontSize: 14,
|
|
},
|
|
infoSection: {
|
|
padding: spacing.lg,
|
|
marginTop: spacing.sm,
|
|
gap: spacing.md,
|
|
},
|
|
infoSectionTablet: {
|
|
maxWidth: 600,
|
|
alignSelf: 'center',
|
|
width: '100%',
|
|
},
|
|
infoCard: {
|
|
padding: spacing.md,
|
|
borderRadius: borderRadius.lg,
|
|
borderWidth: 1,
|
|
},
|
|
infoLabel: {
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.05,
|
|
marginBottom: 4,
|
|
},
|
|
infoValue: {
|
|
fontSize: 16,
|
|
fontWeight: '500',
|
|
},
|
|
menuSection: {
|
|
marginTop: spacing.sm,
|
|
},
|
|
menuSectionTablet: {
|
|
maxWidth: 600,
|
|
alignSelf: 'center',
|
|
width: '100%',
|
|
},
|
|
menuItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: spacing.md,
|
|
borderBottomWidth: 1,
|
|
},
|
|
menuText: {
|
|
flex: 1,
|
|
marginLeft: spacing.md,
|
|
fontSize: 16,
|
|
},
|
|
// Theme section
|
|
themeSection: {
|
|
padding: spacing.md,
|
|
borderBottomWidth: 1,
|
|
},
|
|
themeHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: spacing.md,
|
|
marginBottom: spacing.md,
|
|
},
|
|
themeTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '500',
|
|
},
|
|
themeOptions: {
|
|
flexDirection: 'row',
|
|
gap: spacing.sm,
|
|
},
|
|
themeOption: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: spacing.xs,
|
|
paddingVertical: spacing.sm + 2,
|
|
paddingHorizontal: spacing.sm,
|
|
borderRadius: borderRadius.md,
|
|
borderWidth: 1,
|
|
},
|
|
themeOptionText: {
|
|
fontSize: 13,
|
|
fontWeight: '500',
|
|
},
|
|
themeOptionTextActive: {
|
|
fontWeight: '700',
|
|
},
|
|
searchHistorySection: {
|
|
padding: spacing.md,
|
|
borderBottomWidth: 1,
|
|
},
|
|
searchHistoryTitle: {
|
|
fontSize: 14,
|
|
marginBottom: spacing.sm,
|
|
},
|
|
searchItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: spacing.sm,
|
|
borderBottomWidth: 1,
|
|
},
|
|
searchAddress: {
|
|
flex: 1,
|
|
fontSize: 14,
|
|
},
|
|
searchDelete: {
|
|
padding: spacing.xs,
|
|
},
|
|
button: {
|
|
backgroundColor: '#7fbf8f',
|
|
borderRadius: borderRadius.lg,
|
|
paddingVertical: spacing.md,
|
|
paddingHorizontal: spacing.xl,
|
|
},
|
|
buttonTablet: {
|
|
paddingVertical: spacing.lg,
|
|
paddingHorizontal: spacing.xl * 1.5,
|
|
},
|
|
buttonText: {
|
|
color: '#ffffff',
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
buttonTextTablet: {
|
|
fontSize: 18,
|
|
},
|
|
linkButton: {
|
|
marginTop: spacing.md,
|
|
},
|
|
linkText: {
|
|
fontSize: 14,
|
|
},
|
|
logoutButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
margin: spacing.xl,
|
|
padding: spacing.md,
|
|
borderRadius: borderRadius.lg,
|
|
borderWidth: 1,
|
|
},
|
|
logoutButtonTablet: {
|
|
maxWidth: 600,
|
|
alignSelf: 'center',
|
|
width: '100%',
|
|
},
|
|
logoutText: {
|
|
marginLeft: spacing.sm,
|
|
fontSize: 16,
|
|
fontWeight: '500',
|
|
},
|
|
// Modal styles
|
|
modalBackdrop: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
justifyContent: 'flex-end',
|
|
},
|
|
modalContent: {
|
|
borderTopLeftRadius: 20,
|
|
borderTopRightRadius: 20,
|
|
maxHeight: '90%',
|
|
},
|
|
modalHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: spacing.lg,
|
|
borderBottomWidth: 1,
|
|
},
|
|
modalTitle: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
},
|
|
modalBody: {
|
|
padding: spacing.lg,
|
|
},
|
|
modalField: {
|
|
marginBottom: spacing.md,
|
|
},
|
|
modalLabel: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
marginBottom: spacing.xs,
|
|
},
|
|
modalInput: {
|
|
borderWidth: 1,
|
|
borderRadius: borderRadius.lg,
|
|
padding: spacing.md,
|
|
fontSize: 16,
|
|
},
|
|
modalFeedback: {
|
|
padding: spacing.md,
|
|
borderRadius: borderRadius.lg,
|
|
marginBottom: spacing.md,
|
|
borderWidth: 1,
|
|
},
|
|
modalFeedbackText: {
|
|
fontSize: 14,
|
|
},
|
|
modalActions: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end',
|
|
gap: spacing.md,
|
|
marginTop: spacing.md,
|
|
},
|
|
modalCancelBtn: {
|
|
paddingVertical: spacing.md,
|
|
paddingHorizontal: spacing.lg,
|
|
borderRadius: borderRadius.lg,
|
|
borderWidth: 1,
|
|
},
|
|
modalCancelText: {
|
|
fontSize: 16,
|
|
},
|
|
modalSaveBtn: {
|
|
backgroundColor: '#7fbf8f',
|
|
paddingVertical: spacing.md,
|
|
paddingHorizontal: spacing.xl,
|
|
borderRadius: borderRadius.lg,
|
|
minWidth: 100,
|
|
alignItems: 'center',
|
|
},
|
|
modalSaveBtnDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
modalSaveText: {
|
|
color: '#ffffff',
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
// Avatar Modal styles
|
|
avatarModalContent: {
|
|
borderTopLeftRadius: 20,
|
|
borderTopRightRadius: 20,
|
|
maxHeight: '80%',
|
|
},
|
|
tabContainer: {
|
|
flexDirection: 'row',
|
|
borderBottomWidth: 1,
|
|
},
|
|
tabButton: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: spacing.md,
|
|
gap: spacing.xs,
|
|
},
|
|
tabText: {
|
|
fontSize: 14,
|
|
},
|
|
tabContent: {
|
|
padding: spacing.lg,
|
|
},
|
|
avatarGrid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
gap: spacing.md,
|
|
},
|
|
avatarOption: {
|
|
width: '30%',
|
|
aspectRatio: 1,
|
|
},
|
|
avatarOptionImage: {
|
|
width: '100%',
|
|
height: '100%',
|
|
borderRadius: borderRadius.lg,
|
|
},
|
|
uploadSection: {
|
|
gap: spacing.md,
|
|
},
|
|
uploadOption: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: spacing.md,
|
|
borderRadius: borderRadius.lg,
|
|
borderWidth: 1,
|
|
},
|
|
uploadIconContainer: {
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 28,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginRight: spacing.md,
|
|
},
|
|
uploadOptionTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
flex: 1,
|
|
},
|
|
uploadOptionSubtitle: {
|
|
fontSize: 13,
|
|
flex: 1,
|
|
},
|
|
// Addresses
|
|
addressLoadingText: {
|
|
textAlign: 'center',
|
|
fontSize: 14,
|
|
paddingVertical: spacing.lg,
|
|
},
|
|
addressList: {
|
|
gap: spacing.sm,
|
|
},
|
|
addressItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'space-between',
|
|
padding: spacing.md,
|
|
borderRadius: borderRadius.lg,
|
|
borderWidth: 1,
|
|
},
|
|
addressItemInfo: {
|
|
flex: 1,
|
|
gap: 2,
|
|
},
|
|
addressLabel: {
|
|
fontSize: 13,
|
|
fontWeight: '700',
|
|
textTransform: 'uppercase',
|
|
},
|
|
addressText: {
|
|
fontSize: 14,
|
|
},
|
|
addressBadge: {
|
|
alignSelf: 'flex-start',
|
|
borderRadius: borderRadius.full,
|
|
paddingHorizontal: spacing.sm,
|
|
paddingVertical: 2,
|
|
marginTop: 4,
|
|
},
|
|
addressBadgeText: {
|
|
color: '#ffffff',
|
|
fontSize: 11,
|
|
fontWeight: '700',
|
|
textTransform: 'uppercase',
|
|
},
|
|
addressSetDefault: {
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
marginTop: 4,
|
|
textDecorationLine: 'underline',
|
|
},
|
|
addressItemActions: {
|
|
flexDirection: 'row',
|
|
gap: spacing.xs,
|
|
marginLeft: spacing.sm,
|
|
},
|
|
addressActionBtn: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 8,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
addressAddBtn: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: spacing.sm,
|
|
padding: spacing.md,
|
|
marginTop: spacing.md,
|
|
borderWidth: 2,
|
|
borderStyle: 'dashed',
|
|
borderRadius: borderRadius.lg,
|
|
},
|
|
addressAddBtnText: {
|
|
fontSize: 15,
|
|
fontWeight: '600',
|
|
},
|
|
addressDefaultCheckbox: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: spacing.sm,
|
|
marginBottom: spacing.md,
|
|
},
|
|
addressDefaultLabel: {
|
|
fontSize: 14,
|
|
},
|
|
});
|