mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-10-31 18:19:43 +00:00
1667 lines
68 KiB
TypeScript
Executable File
1667 lines
68 KiB
TypeScript
Executable File
import { View, Text, StyleSheet, TouchableOpacity, Alert, ScrollView, Platform, useWindowDimensions, TextInput, Modal, ActivityIndicator, Linking, Switch, ActionSheetIOS } from "react-native";
|
|
import { Image } from "expo-image";
|
|
import { useState, useMemo, useEffect } from "react";
|
|
import { useAuthStore, useMatchStore, useMessageStore, usePacksStore, useSubscriptionStore } from "../../src/store";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
import Animated, { FadeInDown } from "react-native-reanimated";
|
|
import { supabase } from "../../src/lib/supabase";
|
|
import { resetSwipeTutorial } from "../../src/lib/swipeTutorialSeen";
|
|
import { resetMatchesTutorial } from "../../src/lib/matchesTutorialSeen";
|
|
import * as ImagePicker from 'expo-image-picker';
|
|
import * as FileSystem from 'expo-file-system';
|
|
import { decode } from 'base64-arraybuffer';
|
|
import {
|
|
isBiometricAvailable,
|
|
isBiometricEnabled,
|
|
setBiometricEnabled,
|
|
getBiometricType,
|
|
} from "../../src/lib/biometricAuth";
|
|
import { router } from "expo-router";
|
|
import { GradientBackground, GlassCard } from "../../src/components/ui";
|
|
import { FeedbackModal } from "../../src/components/FeedbackModal";
|
|
import { Paywall } from "../../src/components/Paywall";
|
|
import { Events } from "../../src/lib/analytics";
|
|
import { colors, gradients, spacing, radius, typography, shadows } from "../../src/theme";
|
|
|
|
const MAX_CONTENT_WIDTH = 500;
|
|
|
|
export default function ProfileScreen() {
|
|
const { user, partner, couple, signOut, fetchCouple, fetchUser } = useAuthStore();
|
|
const { clearMatches } = useMatchStore();
|
|
const { clearMessages } = useMessageStore();
|
|
const { clearPacks, fetchPacks } = usePacksStore();
|
|
const { subscription, restorePurchases, isPurchasing } = useSubscriptionStore();
|
|
const { width } = useWindowDimensions();
|
|
const isWideScreen = width > MAX_CONTENT_WIDTH;
|
|
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
const [deleteConfirmText, setDeleteConfirmText] = useState("");
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
const [showFeedbackModal, setShowFeedbackModal] = useState(false);
|
|
const [isResettingProgress, setIsResettingProgress] = useState(false);
|
|
const [showPaywall, setShowPaywall] = useState(false);
|
|
const [showExplicit, setShowExplicit] = useState(user?.show_explicit_content ?? true);
|
|
const [isUpdatingExplicit, setIsUpdatingExplicit] = useState(false);
|
|
const [biometricAvailable, setBiometricAvailable] = useState(false);
|
|
const [biometricEnabled, setBiometricEnabledState] = useState(false);
|
|
const [biometricType, setBiometricType] = useState("Face ID");
|
|
const [isUpdatingBiometric, setIsUpdatingBiometric] = useState(false);
|
|
const [isEditingName, setIsEditingName] = useState(false);
|
|
const [newName, setNewName] = useState(user?.name || "");
|
|
const [isUpdatingName, setIsUpdatingName] = useState(false);
|
|
const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
|
|
|
|
// Check if user or partner has premium access
|
|
const hasPremiumAccess = useMemo(() => {
|
|
return user?.is_premium || partner?.is_premium || subscription.isProUser;
|
|
}, [user?.is_premium, partner?.is_premium, subscription.isProUser]);
|
|
|
|
// Update newName when user changes
|
|
useEffect(() => {
|
|
if (user?.name) {
|
|
setNewName(user.name);
|
|
}
|
|
}, [user?.name]);
|
|
|
|
// Check biometric availability on mount
|
|
useEffect(() => {
|
|
const checkBiometric = async () => {
|
|
const available = await isBiometricAvailable();
|
|
setBiometricAvailable(available);
|
|
|
|
if (available) {
|
|
const enabled = await isBiometricEnabled();
|
|
setBiometricEnabledState(enabled);
|
|
|
|
const type = await getBiometricType();
|
|
setBiometricType(type);
|
|
}
|
|
};
|
|
|
|
checkBiometric();
|
|
}, []);
|
|
|
|
// Check if it's the user's own subscription (vs partner's)
|
|
const isOwnSubscription = user?.is_premium && subscription.isProUser;
|
|
|
|
// Format expiration date
|
|
const formatExpirationDate = (date: Date | null) => {
|
|
if (!date) return "Never";
|
|
return date.toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
};
|
|
|
|
const handleRestorePurchases = async () => {
|
|
const restored = await restorePurchases();
|
|
if (restored) {
|
|
Alert.alert("Success", "Your purchases have been restored!");
|
|
} else {
|
|
Alert.alert("No Purchases Found", "No previous purchases found to restore.");
|
|
}
|
|
};
|
|
|
|
const handleExplicitToggle = async (value: boolean) => {
|
|
if (!user?.id) return;
|
|
|
|
setShowExplicit(value);
|
|
setIsUpdatingExplicit(true);
|
|
|
|
try {
|
|
const { error } = await supabase
|
|
.from('profiles')
|
|
.update({
|
|
show_explicit_content: value,
|
|
updated_at: new Date().toISOString(),
|
|
})
|
|
.eq('id', user.id);
|
|
|
|
if (error) throw error;
|
|
|
|
// Refresh user data and packs to reflect the change
|
|
await fetchUser();
|
|
await fetchPacks();
|
|
Events.profileUpdated(["show_explicit_content"]);
|
|
} catch (error) {
|
|
// Revert on error
|
|
setShowExplicit(!value);
|
|
Alert.alert("Error", "Failed to update preference. Please try again.");
|
|
} finally {
|
|
setIsUpdatingExplicit(false);
|
|
}
|
|
};
|
|
|
|
const handleBiometricToggle = async (value: boolean) => {
|
|
setBiometricEnabledState(value);
|
|
setIsUpdatingBiometric(true);
|
|
|
|
try {
|
|
await setBiometricEnabled(value);
|
|
} catch (error) {
|
|
// Revert on error
|
|
setBiometricEnabledState(!value);
|
|
Alert.alert("Error", `Failed to ${value ? "enable" : "disable"} ${biometricType}. Please try again.`);
|
|
} finally {
|
|
setIsUpdatingBiometric(false);
|
|
}
|
|
};
|
|
|
|
const handleUpdateName = async () => {
|
|
if (!user?.id) return;
|
|
|
|
const trimmedName = newName.trim();
|
|
if (!trimmedName) {
|
|
Alert.alert("Error", "Name cannot be empty");
|
|
return;
|
|
}
|
|
|
|
if (trimmedName === user.name) {
|
|
setIsEditingName(false);
|
|
return;
|
|
}
|
|
|
|
setIsUpdatingName(true);
|
|
|
|
try {
|
|
const { error } = await supabase
|
|
.from('profiles')
|
|
.update({
|
|
name: trimmedName,
|
|
updated_at: new Date().toISOString(),
|
|
})
|
|
.eq('id', user.id);
|
|
|
|
if (error) throw error;
|
|
|
|
await fetchUser();
|
|
setIsEditingName(false);
|
|
Events.profileUpdated(["name"]);
|
|
} catch (error) {
|
|
Alert.alert("Error", "Failed to update name. Please try again.");
|
|
setNewName(user.name || "");
|
|
} finally {
|
|
setIsUpdatingName(false);
|
|
}
|
|
};
|
|
|
|
const handleCancelEditName = () => {
|
|
setNewName(user?.name || "");
|
|
setIsEditingName(false);
|
|
};
|
|
|
|
const handleAvatarPress = () => {
|
|
if (Platform.OS === 'ios') {
|
|
ActionSheetIOS.showActionSheetWithOptions(
|
|
{
|
|
options: ['Cancel', 'Take Photo', 'Choose from Library'],
|
|
cancelButtonIndex: 0,
|
|
},
|
|
(buttonIndex) => {
|
|
if (buttonIndex === 1) {
|
|
pickAvatar('camera');
|
|
} else if (buttonIndex === 2) {
|
|
pickAvatar('library');
|
|
}
|
|
}
|
|
);
|
|
} else {
|
|
Alert.alert(
|
|
'Change Profile Photo',
|
|
'Choose an option',
|
|
[
|
|
{ text: 'Cancel', style: 'cancel' },
|
|
{ text: 'Take Photo', onPress: () => pickAvatar('camera') },
|
|
{ text: 'Choose from Library', onPress: () => pickAvatar('library') },
|
|
]
|
|
);
|
|
}
|
|
};
|
|
|
|
const pickAvatar = async (source: 'camera' | 'library') => {
|
|
try {
|
|
let result: ImagePicker.ImagePickerResult;
|
|
|
|
if (source === 'camera') {
|
|
const { status } = await ImagePicker.requestCameraPermissionsAsync();
|
|
if (status !== 'granted') {
|
|
Alert.alert('Permission Denied', 'Camera access is required to take a photo.');
|
|
return;
|
|
}
|
|
result = await ImagePicker.launchCameraAsync({
|
|
mediaTypes: ['images'],
|
|
allowsEditing: true,
|
|
aspect: [1, 1],
|
|
quality: 0.8,
|
|
});
|
|
} else {
|
|
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
|
if (status !== 'granted') {
|
|
Alert.alert('Permission Denied', 'Photo library access is required to choose a photo.');
|
|
return;
|
|
}
|
|
result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ['images'],
|
|
allowsEditing: true,
|
|
aspect: [1, 1],
|
|
quality: 0.8,
|
|
});
|
|
}
|
|
|
|
if (!result.canceled && result.assets[0]) {
|
|
await uploadAvatar(result.assets[0].uri);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error picking avatar:', error);
|
|
Alert.alert('Error', 'Failed to pick image. Please try again.');
|
|
}
|
|
};
|
|
|
|
const uploadAvatar = async (uri: string) => {
|
|
if (!user?.id) return;
|
|
|
|
setIsUploadingAvatar(true);
|
|
|
|
try {
|
|
let fileBody;
|
|
let ext = 'jpg';
|
|
|
|
if (Platform.OS === 'web') {
|
|
const response = await fetch(uri);
|
|
const blob = await response.blob();
|
|
fileBody = blob;
|
|
|
|
if (blob.type === 'image/png') ext = 'png';
|
|
else if (blob.type === 'image/webp') ext = 'webp';
|
|
} else {
|
|
const base64 = await FileSystem.readAsStringAsync(uri, { encoding: FileSystem.EncodingType.Base64 });
|
|
fileBody = decode(base64);
|
|
|
|
const uriExt = uri.split('.').pop()?.toLowerCase();
|
|
if (uriExt && ['jpg', 'jpeg', 'png', 'webp'].includes(uriExt)) {
|
|
ext = uriExt === 'jpeg' ? 'jpg' : uriExt;
|
|
}
|
|
}
|
|
|
|
const fileName = `${user.id}/${Date.now()}.${ext}`;
|
|
const contentType = `image/${ext === 'jpg' ? 'jpeg' : ext}`;
|
|
|
|
// Upload to storage
|
|
const { error: uploadError } = await supabase.storage
|
|
.from('avatars')
|
|
.upload(fileName, fileBody, {
|
|
contentType,
|
|
upsert: true,
|
|
});
|
|
|
|
if (uploadError) throw uploadError;
|
|
|
|
// Get public URL
|
|
const { data: { publicUrl } } = supabase.storage
|
|
.from('avatars')
|
|
.getPublicUrl(fileName);
|
|
|
|
// Update profile with avatar URL
|
|
const { error: updateError } = await supabase
|
|
.from('profiles')
|
|
.update({
|
|
avatar_url: publicUrl,
|
|
updated_at: new Date().toISOString(),
|
|
})
|
|
.eq('id', user.id);
|
|
|
|
if (updateError) throw updateError;
|
|
|
|
// Refresh user data
|
|
await fetchUser();
|
|
Events.avatarUploaded();
|
|
} catch (error) {
|
|
console.error('Error uploading avatar:', error);
|
|
Alert.alert('Error', 'Failed to upload photo. Please try again.');
|
|
} finally {
|
|
setIsUploadingAvatar(false);
|
|
}
|
|
};
|
|
|
|
const handleManageSubscription = () => {
|
|
Linking.openURL("https://apps.apple.com/account/subscriptions");
|
|
};
|
|
|
|
const handleDeleteRelationship = async () => {
|
|
if (deleteConfirmText !== "DELETE") return;
|
|
|
|
setIsDeleting(true);
|
|
try {
|
|
const { error } = await supabase.functions.invoke("delete-relationship", {
|
|
method: "DELETE",
|
|
});
|
|
|
|
if (error) throw error;
|
|
|
|
// Clear local stores
|
|
clearMatches();
|
|
clearMessages();
|
|
clearPacks();
|
|
|
|
// Refresh user data (will also clear couple/partner since couple_id is now null)
|
|
await useAuthStore.getState().fetchUser();
|
|
|
|
Events.relationshipEnded();
|
|
setShowDeleteModal(false);
|
|
setDeleteConfirmText("");
|
|
Alert.alert("Success", "All relationship data has been deleted.");
|
|
} catch (error) {
|
|
Alert.alert("Error", "Failed to delete relationship data. Please try again.");
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
};
|
|
|
|
const handleUnpair = async () => {
|
|
Alert.alert(
|
|
"Unpair Partner",
|
|
"Are you sure you want to unpair? This cannot be undone.",
|
|
[
|
|
{ text: "Cancel", style: "cancel" },
|
|
{
|
|
text: "Unpair",
|
|
style: "destructive",
|
|
onPress: async () => {
|
|
try {
|
|
await supabase.functions.invoke("manage-couple", {
|
|
method: "DELETE",
|
|
});
|
|
await fetchCouple();
|
|
} catch (error) {
|
|
Alert.alert("Error", "Failed to unpair");
|
|
}
|
|
},
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
const handleResetProgress = async () => {
|
|
Alert.alert(
|
|
"Reset Progress",
|
|
"This will delete all your swipes, matches, and chat messages. You'll stay connected with your partner and can start fresh. This cannot be undone.",
|
|
[
|
|
{ text: "Cancel", style: "cancel" },
|
|
{
|
|
text: "Reset",
|
|
style: "destructive",
|
|
onPress: async () => {
|
|
setIsResettingProgress(true);
|
|
try {
|
|
const { error } = await supabase.functions.invoke("reset-couple-progress", {
|
|
method: "DELETE",
|
|
});
|
|
|
|
if (error) throw error;
|
|
|
|
// Clear local stores
|
|
clearMatches();
|
|
clearMessages();
|
|
|
|
Alert.alert("Success", "Your progress has been reset. You can now start swiping again!");
|
|
} catch (error) {
|
|
Alert.alert("Error", "Failed to reset progress. Please try again.");
|
|
} finally {
|
|
setIsResettingProgress(false);
|
|
}
|
|
},
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
const handleSignOut = () => {
|
|
Alert.alert(
|
|
"Sign Out",
|
|
"Are you sure you want to sign out?",
|
|
[
|
|
{ text: "Cancel", style: "cancel" },
|
|
{
|
|
text: "Sign Out",
|
|
style: "destructive",
|
|
onPress: signOut,
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
return (
|
|
<GradientBackground>
|
|
<ScrollView
|
|
style={styles.container}
|
|
contentContainerStyle={[
|
|
styles.contentContainer,
|
|
isWideScreen && styles.contentContainerWide,
|
|
]}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Header */}
|
|
<Animated.View
|
|
entering={FadeInDown.delay(100).duration(500)}
|
|
style={styles.header}
|
|
>
|
|
<Text style={styles.title}>Profile</Text>
|
|
</Animated.View>
|
|
|
|
{/* Profile Card */}
|
|
<Animated.View
|
|
entering={FadeInDown.delay(200).duration(500)}
|
|
style={styles.profileSection}
|
|
>
|
|
<GlassCard variant="elevated">
|
|
<View style={styles.profileContent}>
|
|
<TouchableOpacity
|
|
onPress={handleAvatarPress}
|
|
disabled={isUploadingAvatar}
|
|
activeOpacity={0.7}
|
|
style={styles.avatarTouchable}
|
|
>
|
|
<LinearGradient
|
|
colors={gradients.primary as [string, string]}
|
|
style={styles.avatarGradient}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
>
|
|
{user?.avatar_url ? (
|
|
<Image
|
|
source={{ uri: user.avatar_url }}
|
|
style={styles.avatarImage}
|
|
cachePolicy="disk"
|
|
transition={200}
|
|
/>
|
|
) : (
|
|
<View style={styles.avatarInner}>
|
|
<Text style={styles.avatarText}>
|
|
{user?.name?.[0]?.toUpperCase() || "U"}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</LinearGradient>
|
|
{isUploadingAvatar ? (
|
|
<View style={styles.avatarOverlay}>
|
|
<ActivityIndicator size="large" color={colors.text} />
|
|
</View>
|
|
) : (
|
|
<View style={styles.avatarEditBadge}>
|
|
<Ionicons name="camera" size={14} color={colors.text} />
|
|
</View>
|
|
)}
|
|
</TouchableOpacity>
|
|
<View style={styles.profileInfo}>
|
|
{isEditingName ? (
|
|
<View style={styles.editNameContainer}>
|
|
<TextInput
|
|
style={styles.nameInput}
|
|
value={newName}
|
|
onChangeText={setNewName}
|
|
placeholder="Enter your name"
|
|
placeholderTextColor={colors.textTertiary}
|
|
autoFocus
|
|
editable={!isUpdatingName}
|
|
onSubmitEditing={handleUpdateName}
|
|
returnKeyType="done"
|
|
/>
|
|
<View style={styles.editNameButtons}>
|
|
<TouchableOpacity
|
|
style={styles.cancelEditButton}
|
|
onPress={handleCancelEditName}
|
|
disabled={isUpdatingName}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Ionicons name="close" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.saveEditButton}
|
|
onPress={handleUpdateName}
|
|
disabled={isUpdatingName}
|
|
activeOpacity={0.7}
|
|
>
|
|
{isUpdatingName ? (
|
|
<ActivityIndicator size="small" color={colors.text} />
|
|
) : (
|
|
<Ionicons name="checkmark" size={20} color={colors.text} />
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<TouchableOpacity
|
|
style={styles.nameContainer}
|
|
onPress={() => setIsEditingName(true)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.name}>{user?.name || "User"}</Text>
|
|
<View style={styles.editNameIcon}>
|
|
<Ionicons name="pencil" size={14} color={colors.textTertiary} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
)}
|
|
<Text style={styles.email}>{user?.email}</Text>
|
|
</View>
|
|
</View>
|
|
</GlassCard>
|
|
</Animated.View>
|
|
|
|
{/* Partner Section */}
|
|
<Animated.View
|
|
entering={FadeInDown.delay(300).duration(500)}
|
|
style={styles.section}
|
|
>
|
|
<Text style={styles.sectionTitle}>Partner</Text>
|
|
<GlassCard>
|
|
{partner ? (
|
|
<View style={styles.rowContainer}>
|
|
<View style={styles.rowLeft}>
|
|
<LinearGradient
|
|
colors={gradients.primary as [string, string]}
|
|
style={styles.partnerIconGradient}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
>
|
|
<Ionicons name="heart" size={20} color={colors.text} />
|
|
</LinearGradient>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValue}>
|
|
{partner.name || partner.email || 'Your partner'}
|
|
</Text>
|
|
<Text style={styles.rowLabel}>Connected</Text>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={handleUnpair}
|
|
style={styles.unlinkButton}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Ionicons name="unlink-outline" size={18} color={colors.textTertiary} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
) : couple ? (
|
|
<TouchableOpacity
|
|
style={styles.rowContainer}
|
|
onPress={() => router.push("/(app)/pairing")}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.rowLeft}>
|
|
<LinearGradient
|
|
colors={gradients.primary as [string, string]}
|
|
style={styles.partnerIconGradient}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
>
|
|
<Ionicons name="hourglass-outline" size={20} color={colors.text} />
|
|
</LinearGradient>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValue}>Waiting for partner</Text>
|
|
<Text style={styles.rowLabel}>Tap to view invite code</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.chevronContainer}>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
) : (
|
|
<TouchableOpacity
|
|
style={styles.rowContainer}
|
|
onPress={() => router.push("/(app)/pairing")}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.rowLeft}>
|
|
<View style={styles.emptyPartnerIcon}>
|
|
<Ionicons name="heart-outline" size={20} color={colors.textTertiary} />
|
|
</View>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValueMuted}>Not paired yet</Text>
|
|
<Text style={styles.rowLabel}>Tap to connect</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.chevronContainer}>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
)}
|
|
</GlassCard>
|
|
</Animated.View>
|
|
|
|
{/* Subscription Section */}
|
|
<Animated.View
|
|
entering={FadeInDown.delay(350).duration(500)}
|
|
style={styles.section}
|
|
>
|
|
<Text style={styles.sectionTitle}>Subscription</Text>
|
|
<GlassCard>
|
|
{hasPremiumAccess ? (
|
|
<View style={styles.rowContainer}>
|
|
<View style={styles.rowLeft}>
|
|
<LinearGradient
|
|
colors={gradients.primary as [string, string]}
|
|
style={styles.partnerIconGradient}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
>
|
|
<Ionicons name="star" size={20} color={colors.text} />
|
|
</LinearGradient>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValue}>Pro Member</Text>
|
|
<Text style={styles.rowLabel}>
|
|
{isOwnSubscription
|
|
? `Renews ${formatExpirationDate(subscription.expirationDate)}`
|
|
: "Via partner's subscription"
|
|
}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
{isOwnSubscription && (
|
|
<TouchableOpacity
|
|
style={styles.manageButton}
|
|
onPress={handleManageSubscription}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.manageButtonText}>Manage</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
) : (
|
|
<TouchableOpacity
|
|
style={styles.rowContainer}
|
|
onPress={() => setShowPaywall(true)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.rowLeft}>
|
|
<View style={styles.emptyPartnerIcon}>
|
|
<Ionicons name="star-outline" size={20} color={colors.textTertiary} />
|
|
</View>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValueMuted}>Free Plan</Text>
|
|
<Text style={styles.rowLabel}>Upgrade to unlock all packs</Text>
|
|
</View>
|
|
</View>
|
|
<LinearGradient
|
|
colors={gradients.primary as [string, string]}
|
|
style={styles.upgradeButton}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 0 }}
|
|
>
|
|
<Text style={styles.upgradeButtonText}>Upgrade</Text>
|
|
</LinearGradient>
|
|
</TouchableOpacity>
|
|
)}
|
|
</GlassCard>
|
|
|
|
{/* Restore Purchases Link */}
|
|
{!hasPremiumAccess && (
|
|
<TouchableOpacity
|
|
style={styles.restoreLink}
|
|
onPress={handleRestorePurchases}
|
|
disabled={isPurchasing}
|
|
>
|
|
<Text style={styles.restoreLinkText}>
|
|
{isPurchasing ? "Restoring..." : "Restore Purchases"}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</Animated.View>
|
|
|
|
{/* Preferences Section */}
|
|
<Animated.View
|
|
entering={FadeInDown.delay(375).duration(500)}
|
|
style={styles.section}
|
|
>
|
|
<Text style={styles.sectionTitle}>Preferences</Text>
|
|
<GlassCard>
|
|
<View style={styles.rowContainer}>
|
|
<View style={styles.rowLeft}>
|
|
<LinearGradient
|
|
colors={gradients.primary as [string, string]}
|
|
style={styles.partnerIconGradient}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
>
|
|
<Ionicons name="flame" size={20} color={colors.text} />
|
|
</LinearGradient>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValue}>Explicit Content</Text>
|
|
<Text style={styles.rowLabel}>Show 18+ question packs</Text>
|
|
</View>
|
|
</View>
|
|
<Switch
|
|
value={showExplicit}
|
|
onValueChange={handleExplicitToggle}
|
|
disabled={isUpdatingExplicit}
|
|
trackColor={{ false: colors.glass.border, true: colors.primaryLight }}
|
|
thumbColor={showExplicit ? colors.primary : colors.textTertiary}
|
|
ios_backgroundColor={colors.glass.border}
|
|
/>
|
|
</View>
|
|
{biometricAvailable && (
|
|
<>
|
|
<View style={styles.preferencesDivider} />
|
|
<View style={styles.rowContainer}>
|
|
<View style={styles.rowLeft}>
|
|
<LinearGradient
|
|
colors={gradients.primary as [string, string]}
|
|
style={styles.partnerIconGradient}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
>
|
|
<Ionicons
|
|
name={biometricType === "Face ID" || biometricType === "Face Recognition" ? "scan-outline" : "finger-print-outline"}
|
|
size={20}
|
|
color={colors.text}
|
|
/>
|
|
</LinearGradient>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValue}>{biometricType}</Text>
|
|
<Text style={styles.rowLabel}>Require unlock when opening app</Text>
|
|
</View>
|
|
</View>
|
|
<Switch
|
|
value={biometricEnabled}
|
|
onValueChange={handleBiometricToggle}
|
|
disabled={isUpdatingBiometric}
|
|
trackColor={{ false: colors.glass.border, true: colors.primaryLight }}
|
|
thumbColor={biometricEnabled ? colors.primary : colors.textTertiary}
|
|
ios_backgroundColor={colors.glass.border}
|
|
/>
|
|
</View>
|
|
</>
|
|
)}
|
|
</GlassCard>
|
|
</Animated.View>
|
|
|
|
{/* Account Section */}
|
|
<Animated.View
|
|
entering={FadeInDown.delay(425).duration(500)}
|
|
style={styles.section}
|
|
>
|
|
<Text style={styles.sectionTitle}>Account</Text>
|
|
<GlassCard>
|
|
<TouchableOpacity
|
|
style={styles.signOutRow}
|
|
onPress={handleSignOut}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.rowLeft}>
|
|
<View style={styles.signOutIcon}>
|
|
<Ionicons name="log-out-outline" size={20} color={colors.error} />
|
|
</View>
|
|
<Text style={styles.signOutText}>Sign Out</Text>
|
|
</View>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.error} />
|
|
</TouchableOpacity>
|
|
</GlassCard>
|
|
</Animated.View>
|
|
|
|
{/* Support Section */}
|
|
<Animated.View
|
|
entering={FadeInDown.delay(475).duration(500)}
|
|
style={styles.section}
|
|
>
|
|
<Text style={styles.sectionTitle}>Support</Text>
|
|
<GlassCard>
|
|
<TouchableOpacity
|
|
style={styles.rowContainer}
|
|
onPress={() => setShowFeedbackModal(true)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.rowLeft}>
|
|
<LinearGradient
|
|
colors={gradients.primary as [string, string]}
|
|
style={styles.partnerIconGradient}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
>
|
|
<Ionicons name="chatbubble-ellipses-outline" size={20} color={colors.text} />
|
|
</LinearGradient>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValue}>Send Feedback</Text>
|
|
<Text style={styles.rowLabel}>Report bugs or request features</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.chevronContainer}>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</GlassCard>
|
|
</Animated.View>
|
|
|
|
{/* Reset Progress Section - Only show if in a couple */}
|
|
{couple && (
|
|
<Animated.View
|
|
entering={FadeInDown.delay(500).duration(500)}
|
|
style={styles.section}
|
|
>
|
|
<Text style={styles.resetSectionTitle}>Reset Progress</Text>
|
|
<GlassCard style={styles.resetCard}>
|
|
<View style={styles.resetContent}>
|
|
<View style={styles.resetInfo}>
|
|
<View style={styles.resetIconContainer}>
|
|
<Ionicons name="refresh" size={20} color={colors.warning} />
|
|
</View>
|
|
<View style={styles.resetTextContainer}>
|
|
<Text style={styles.resetTitle}>Start Fresh</Text>
|
|
<Text style={styles.resetDescription}>
|
|
Delete all swipes, matches, and chats while keeping your partner connection.
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={[styles.resetButton, isResettingProgress && styles.resetButtonDisabled]}
|
|
onPress={handleResetProgress}
|
|
disabled={isResettingProgress}
|
|
activeOpacity={0.7}
|
|
>
|
|
{isResettingProgress ? (
|
|
<ActivityIndicator size="small" color={colors.warning} />
|
|
) : (
|
|
<>
|
|
<Ionicons name="refresh-outline" size={16} color={colors.warning} />
|
|
<Text style={styles.resetButtonText}>Reset</Text>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</GlassCard>
|
|
</Animated.View>
|
|
)}
|
|
|
|
{/* Debug Section - Only show in development builds */}
|
|
{__DEV__ && (
|
|
<Animated.View
|
|
entering={FadeInDown.delay(couple ? 550 : 500).duration(500)}
|
|
style={styles.section}
|
|
>
|
|
<Text style={styles.debugSectionTitle}>Debug</Text>
|
|
<GlassCard style={styles.debugCard}>
|
|
<TouchableOpacity
|
|
style={styles.rowContainer}
|
|
onPress={async () => {
|
|
await resetSwipeTutorial();
|
|
Alert.alert("Success", "Swipe tutorial has been reset. It will show again next time you visit the swipe screen.");
|
|
}}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.rowLeft}>
|
|
<View style={styles.debugIcon}>
|
|
<Ionicons name="refresh" size={20} color={colors.warning} />
|
|
</View>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValue}>Reset Swipe Tutorial</Text>
|
|
<Text style={styles.rowLabel}>Show the tutorial again</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.chevronContainer}>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
<View style={styles.preferencesDivider} />
|
|
<TouchableOpacity
|
|
style={styles.rowContainer}
|
|
onPress={async () => {
|
|
await resetMatchesTutorial();
|
|
Alert.alert("Success", "Matches tutorial has been reset. It will show again next time you visit the matches screen.");
|
|
}}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.rowLeft}>
|
|
<View style={styles.debugIcon}>
|
|
<Ionicons name="heart" size={20} color={colors.warning} />
|
|
</View>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValue}>Reset Matches Tutorial</Text>
|
|
<Text style={styles.rowLabel}>Show the tutorial again</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.chevronContainer}>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
<View style={styles.preferencesDivider} />
|
|
<TouchableOpacity
|
|
style={styles.rowContainer}
|
|
onPress={async () => {
|
|
if (!user?.id) return;
|
|
try {
|
|
const { error } = await supabase
|
|
.from('profiles')
|
|
.update({ onboarding_completed: false })
|
|
.eq('id', user.id);
|
|
if (error) throw error;
|
|
await fetchUser();
|
|
Alert.alert("Success", "Onboarding has been reset. You will see the onboarding flow on next app launch.");
|
|
} catch (error) {
|
|
Alert.alert("Error", "Failed to reset onboarding.");
|
|
}
|
|
}}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.rowLeft}>
|
|
<View style={styles.debugIcon}>
|
|
<Ionicons name="school-outline" size={20} color={colors.warning} />
|
|
</View>
|
|
<View style={styles.rowTextContainer}>
|
|
<Text style={styles.rowValue}>Reset Onboarding</Text>
|
|
<Text style={styles.rowLabel}>Show onboarding flow again</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.chevronContainer}>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</GlassCard>
|
|
</Animated.View>
|
|
)}
|
|
|
|
{/* Danger Zone - Only show if in a couple */}
|
|
{couple && (
|
|
<Animated.View
|
|
entering={FadeInDown.delay(600).duration(500)}
|
|
style={styles.section}
|
|
>
|
|
<Text style={styles.dangerSectionTitle}>Danger Zone</Text>
|
|
<GlassCard style={styles.dangerCard}>
|
|
<View style={styles.dangerContent}>
|
|
<View style={styles.dangerInfo}>
|
|
<View style={styles.dangerIconContainer}>
|
|
<Ionicons name="warning" size={20} color={colors.error} />
|
|
</View>
|
|
<View style={styles.dangerTextContainer}>
|
|
<Text style={styles.dangerTitle}>Delete All Data</Text>
|
|
<Text style={styles.dangerDescription}>
|
|
Permanently delete your relationship including all matches, chats, and shared photos.
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={styles.dangerButton}
|
|
onPress={() => setShowDeleteModal(true)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Ionicons name="trash-outline" size={16} color={colors.error} />
|
|
<Text style={styles.dangerButtonText}>Delete</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</GlassCard>
|
|
</Animated.View>
|
|
)}
|
|
|
|
{/* Version */}
|
|
<Animated.View
|
|
entering={FadeInDown.delay(couple ? 650 : 525).duration(500)}
|
|
style={styles.versionContainer}
|
|
>
|
|
<View style={styles.versionBadge}>
|
|
<Ionicons name="heart" size={12} color={colors.primary} />
|
|
<Text style={styles.version}>Sauci v1.0.0</Text>
|
|
</View>
|
|
</Animated.View>
|
|
|
|
<View style={styles.bottomSpacer} />
|
|
</ScrollView>
|
|
|
|
{/* Feedback Modal */}
|
|
<FeedbackModal
|
|
visible={showFeedbackModal}
|
|
onClose={() => setShowFeedbackModal(false)}
|
|
/>
|
|
|
|
{/* Paywall Modal */}
|
|
<Paywall
|
|
visible={showPaywall}
|
|
onClose={() => setShowPaywall(false)}
|
|
/>
|
|
|
|
{/* Delete Confirmation Modal */}
|
|
<Modal
|
|
visible={showDeleteModal}
|
|
transparent
|
|
animationType="fade"
|
|
onRequestClose={() => !isDeleting && setShowDeleteModal(false)}
|
|
>
|
|
<View style={styles.modalOverlay}>
|
|
<View style={styles.modalContent}>
|
|
<View style={styles.modalHeader}>
|
|
<View style={styles.modalIconContainer}>
|
|
<Ionicons name="warning" size={32} color={colors.error} />
|
|
</View>
|
|
<Text style={styles.modalTitle}>Delete All Data?</Text>
|
|
</View>
|
|
|
|
<Text style={styles.modalDescription}>
|
|
This action cannot be undone. This will permanently delete:
|
|
</Text>
|
|
|
|
<View style={styles.deleteList}>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="heart-dislike" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>Your couple connection</Text>
|
|
</View>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="checkmark-circle" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>All matches and responses</Text>
|
|
</View>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="chatbubbles" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>All chat messages</Text>
|
|
</View>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="images" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>All shared photos</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Text style={styles.confirmLabel}>
|
|
Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
|
|
</Text>
|
|
|
|
<TextInput
|
|
style={styles.confirmInput}
|
|
value={deleteConfirmText}
|
|
onChangeText={setDeleteConfirmText}
|
|
placeholder="Type DELETE"
|
|
placeholderTextColor={colors.textTertiary}
|
|
autoCapitalize="characters"
|
|
autoCorrect={false}
|
|
editable={!isDeleting}
|
|
/>
|
|
|
|
<View style={styles.modalButtons}>
|
|
<TouchableOpacity
|
|
style={styles.cancelButton}
|
|
onPress={() => {
|
|
setShowDeleteModal(false);
|
|
setDeleteConfirmText("");
|
|
}}
|
|
disabled={isDeleting}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.cancelButtonText}>Cancel</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.confirmDeleteButton,
|
|
deleteConfirmText !== "DELETE" && styles.confirmDeleteButtonDisabled,
|
|
]}
|
|
onPress={handleDeleteRelationship}
|
|
disabled={deleteConfirmText !== "DELETE" || isDeleting}
|
|
activeOpacity={0.7}
|
|
>
|
|
{isDeleting ? (
|
|
<ActivityIndicator size="small" color={colors.text} />
|
|
) : (
|
|
<>
|
|
<Ionicons name="trash" size={16} color={colors.text} />
|
|
<Text style={styles.confirmDeleteButtonText}>Delete</Text>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
</GradientBackground>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
contentContainer: {
|
|
paddingBottom: Platform.OS === 'ios' ? 100 : 80,
|
|
},
|
|
contentContainerWide: {
|
|
alignSelf: 'center',
|
|
width: '100%',
|
|
maxWidth: MAX_CONTENT_WIDTH,
|
|
},
|
|
header: {
|
|
paddingTop: 60,
|
|
paddingHorizontal: spacing.lg,
|
|
paddingBottom: spacing.lg,
|
|
},
|
|
title: {
|
|
...typography.title1,
|
|
color: colors.text,
|
|
},
|
|
profileSection: {
|
|
paddingHorizontal: spacing.lg,
|
|
marginBottom: spacing.xl,
|
|
},
|
|
profileContent: {
|
|
alignItems: "center",
|
|
paddingVertical: spacing.lg,
|
|
},
|
|
avatarGradient: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
...shadows.lg,
|
|
},
|
|
avatarInner: {
|
|
width: 90,
|
|
height: 90,
|
|
borderRadius: 45,
|
|
backgroundColor: colors.background,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
avatarText: {
|
|
fontSize: 36,
|
|
fontWeight: "bold",
|
|
color: colors.text,
|
|
},
|
|
avatarTouchable: {
|
|
position: "relative",
|
|
},
|
|
avatarImage: {
|
|
width: 96,
|
|
height: 96,
|
|
borderRadius: 48,
|
|
},
|
|
avatarOverlay: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
borderRadius: 50,
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
avatarEditBadge: {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
right: 0,
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
backgroundColor: colors.primary,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderWidth: 3,
|
|
borderColor: colors.background,
|
|
},
|
|
profileInfo: {
|
|
alignItems: "center",
|
|
marginTop: spacing.lg,
|
|
},
|
|
nameContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: spacing.xs,
|
|
},
|
|
name: {
|
|
...typography.title2,
|
|
color: colors.text,
|
|
marginBottom: spacing.xs,
|
|
},
|
|
editNameIcon: {
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: 12,
|
|
backgroundColor: colors.glass.background,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginBottom: spacing.xs,
|
|
},
|
|
editNameContainer: {
|
|
width: "100%",
|
|
alignItems: "center",
|
|
gap: spacing.sm,
|
|
},
|
|
nameInput: {
|
|
...typography.title2,
|
|
color: colors.text,
|
|
textAlign: "center",
|
|
backgroundColor: colors.glass.background,
|
|
borderRadius: radius.md,
|
|
borderWidth: 1,
|
|
borderColor: colors.primary,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.sm,
|
|
minWidth: 200,
|
|
},
|
|
editNameButtons: {
|
|
flexDirection: "row",
|
|
gap: spacing.sm,
|
|
},
|
|
cancelEditButton: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
backgroundColor: colors.glass.background,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
borderColor: colors.glass.border,
|
|
},
|
|
saveEditButton: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
backgroundColor: colors.primary,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
email: {
|
|
...typography.subhead,
|
|
color: colors.textSecondary,
|
|
},
|
|
section: {
|
|
paddingHorizontal: spacing.lg,
|
|
marginBottom: spacing.lg,
|
|
},
|
|
sectionTitle: {
|
|
...typography.caption1,
|
|
color: colors.textTertiary,
|
|
textTransform: "uppercase",
|
|
letterSpacing: 1.5,
|
|
marginBottom: spacing.sm,
|
|
marginLeft: spacing.xs,
|
|
},
|
|
rowContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
},
|
|
rowLeft: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
flex: 1,
|
|
},
|
|
partnerIconGradient: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
emptyPartnerIcon: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
backgroundColor: colors.glass.background,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
rowTextContainer: {
|
|
marginLeft: spacing.md,
|
|
flex: 1,
|
|
},
|
|
rowValue: {
|
|
...typography.body,
|
|
color: colors.text,
|
|
fontWeight: "600",
|
|
},
|
|
rowValueMuted: {
|
|
...typography.body,
|
|
color: colors.textSecondary,
|
|
},
|
|
rowLabel: {
|
|
...typography.caption1,
|
|
color: colors.textTertiary,
|
|
marginTop: 2,
|
|
},
|
|
preferencesDivider: {
|
|
height: 1,
|
|
backgroundColor: colors.glass.border,
|
|
marginVertical: spacing.md,
|
|
},
|
|
unlinkButton: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
backgroundColor: colors.glass.background,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
chevronContainer: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: 14,
|
|
backgroundColor: colors.glass.background,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
signOutRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
},
|
|
signOutIcon: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
backgroundColor: colors.errorLight,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
signOutText: {
|
|
...typography.body,
|
|
color: colors.error,
|
|
fontWeight: "600",
|
|
marginLeft: spacing.md,
|
|
},
|
|
// Subscription styles
|
|
manageButton: {
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.sm,
|
|
borderRadius: radius.md,
|
|
backgroundColor: colors.glass.background,
|
|
borderWidth: 1,
|
|
borderColor: colors.glass.border,
|
|
},
|
|
manageButtonText: {
|
|
...typography.subhead,
|
|
color: colors.primary,
|
|
fontWeight: "600",
|
|
},
|
|
upgradeButton: {
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.sm,
|
|
borderRadius: radius.md,
|
|
},
|
|
upgradeButtonText: {
|
|
...typography.subhead,
|
|
color: colors.text,
|
|
fontWeight: "600",
|
|
},
|
|
restoreLink: {
|
|
alignItems: "center",
|
|
marginTop: spacing.sm,
|
|
padding: spacing.sm,
|
|
},
|
|
restoreLinkText: {
|
|
...typography.caption1,
|
|
color: colors.textTertiary,
|
|
},
|
|
versionContainer: {
|
|
alignItems: "center",
|
|
marginTop: spacing.lg,
|
|
},
|
|
versionBadge: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: colors.glass.background,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.sm,
|
|
borderRadius: radius.full,
|
|
gap: spacing.xs,
|
|
},
|
|
version: {
|
|
...typography.caption1,
|
|
color: colors.textTertiary,
|
|
},
|
|
bottomSpacer: {
|
|
height: spacing.lg,
|
|
},
|
|
// Debug styles
|
|
debugSectionTitle: {
|
|
...typography.caption1,
|
|
color: colors.warning,
|
|
textTransform: "uppercase",
|
|
letterSpacing: 1.5,
|
|
marginBottom: spacing.sm,
|
|
marginLeft: spacing.xs,
|
|
},
|
|
debugCard: {
|
|
borderColor: 'rgba(243, 156, 18, 0.3)',
|
|
borderWidth: 1,
|
|
},
|
|
debugIcon: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
backgroundColor: colors.warningLight,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
// Reset Progress styles
|
|
resetSectionTitle: {
|
|
...typography.caption1,
|
|
color: colors.warning,
|
|
textTransform: "uppercase",
|
|
letterSpacing: 1.5,
|
|
marginBottom: spacing.sm,
|
|
marginLeft: spacing.xs,
|
|
},
|
|
resetCard: {
|
|
borderColor: 'rgba(243, 156, 18, 0.3)',
|
|
borderWidth: 1,
|
|
},
|
|
resetContent: {
|
|
gap: spacing.md,
|
|
},
|
|
resetInfo: {
|
|
flexDirection: "row",
|
|
alignItems: "flex-start",
|
|
},
|
|
resetIconContainer: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
backgroundColor: colors.warningLight,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
resetTextContainer: {
|
|
flex: 1,
|
|
marginLeft: spacing.md,
|
|
},
|
|
resetTitle: {
|
|
...typography.headline,
|
|
color: colors.text,
|
|
marginBottom: spacing.xs,
|
|
},
|
|
resetDescription: {
|
|
...typography.subhead,
|
|
color: colors.textSecondary,
|
|
lineHeight: 20,
|
|
},
|
|
resetButton: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: colors.warningLight,
|
|
paddingVertical: spacing.sm,
|
|
paddingHorizontal: spacing.md,
|
|
borderRadius: radius.md,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(243, 156, 18, 0.3)',
|
|
gap: spacing.xs,
|
|
alignSelf: "flex-end",
|
|
},
|
|
resetButtonDisabled: {
|
|
opacity: 0.5,
|
|
},
|
|
resetButtonText: {
|
|
...typography.subhead,
|
|
color: colors.warning,
|
|
fontWeight: "600",
|
|
},
|
|
// Danger Zone styles
|
|
dangerSectionTitle: {
|
|
...typography.caption1,
|
|
color: colors.error,
|
|
textTransform: "uppercase",
|
|
letterSpacing: 1.5,
|
|
marginBottom: spacing.sm,
|
|
marginLeft: spacing.xs,
|
|
},
|
|
dangerCard: {
|
|
borderColor: 'rgba(231, 76, 60, 0.3)',
|
|
borderWidth: 1,
|
|
},
|
|
dangerContent: {
|
|
gap: spacing.md,
|
|
},
|
|
dangerInfo: {
|
|
flexDirection: "row",
|
|
alignItems: "flex-start",
|
|
},
|
|
dangerIconContainer: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
backgroundColor: colors.errorLight,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
dangerTextContainer: {
|
|
flex: 1,
|
|
marginLeft: spacing.md,
|
|
},
|
|
dangerTitle: {
|
|
...typography.headline,
|
|
color: colors.text,
|
|
marginBottom: spacing.xs,
|
|
},
|
|
dangerDescription: {
|
|
...typography.subhead,
|
|
color: colors.textSecondary,
|
|
lineHeight: 20,
|
|
},
|
|
dangerButton: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: colors.errorLight,
|
|
paddingVertical: spacing.sm,
|
|
paddingHorizontal: spacing.md,
|
|
borderRadius: radius.md,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(231, 76, 60, 0.3)',
|
|
gap: spacing.xs,
|
|
alignSelf: "flex-end",
|
|
},
|
|
dangerButtonText: {
|
|
...typography.subhead,
|
|
color: colors.error,
|
|
fontWeight: "600",
|
|
},
|
|
// Modal styles
|
|
modalOverlay: {
|
|
flex: 1,
|
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: spacing.lg,
|
|
},
|
|
modalContent: {
|
|
backgroundColor: colors.backgroundLight,
|
|
borderRadius: radius.xl,
|
|
padding: spacing.lg,
|
|
width: "100%",
|
|
maxWidth: 400,
|
|
borderWidth: 1,
|
|
borderColor: colors.glass.border,
|
|
},
|
|
modalHeader: {
|
|
alignItems: "center",
|
|
marginBottom: spacing.lg,
|
|
},
|
|
modalIconContainer: {
|
|
width: 64,
|
|
height: 64,
|
|
borderRadius: 32,
|
|
backgroundColor: colors.errorLight,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginBottom: spacing.md,
|
|
},
|
|
modalTitle: {
|
|
...typography.title2,
|
|
color: colors.text,
|
|
textAlign: "center",
|
|
},
|
|
modalDescription: {
|
|
...typography.body,
|
|
color: colors.textSecondary,
|
|
textAlign: "center",
|
|
marginBottom: spacing.md,
|
|
},
|
|
deleteList: {
|
|
backgroundColor: colors.glass.background,
|
|
borderRadius: radius.md,
|
|
padding: spacing.md,
|
|
marginBottom: spacing.lg,
|
|
gap: spacing.sm,
|
|
},
|
|
deleteListItem: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: spacing.sm,
|
|
},
|
|
deleteListText: {
|
|
...typography.subhead,
|
|
color: colors.textSecondary,
|
|
},
|
|
confirmLabel: {
|
|
...typography.subhead,
|
|
color: colors.textSecondary,
|
|
marginBottom: spacing.sm,
|
|
},
|
|
confirmKeyword: {
|
|
color: colors.error,
|
|
fontWeight: "bold",
|
|
},
|
|
confirmInput: {
|
|
backgroundColor: colors.glass.background,
|
|
borderRadius: radius.md,
|
|
borderWidth: 1,
|
|
borderColor: colors.glass.border,
|
|
padding: spacing.md,
|
|
...typography.body,
|
|
color: colors.text,
|
|
marginBottom: spacing.lg,
|
|
},
|
|
modalButtons: {
|
|
flexDirection: "row",
|
|
gap: spacing.md,
|
|
},
|
|
cancelButton: {
|
|
flex: 1,
|
|
backgroundColor: colors.glass.background,
|
|
paddingVertical: spacing.md,
|
|
borderRadius: radius.md,
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
borderColor: colors.glass.border,
|
|
},
|
|
cancelButtonText: {
|
|
...typography.body,
|
|
color: colors.textSecondary,
|
|
fontWeight: "600",
|
|
},
|
|
confirmDeleteButton: {
|
|
flex: 1,
|
|
backgroundColor: colors.error,
|
|
paddingVertical: spacing.md,
|
|
borderRadius: radius.md,
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
gap: spacing.xs,
|
|
},
|
|
confirmDeleteButtonDisabled: {
|
|
backgroundColor: colors.glass.background,
|
|
opacity: 0.5,
|
|
},
|
|
confirmDeleteButtonText: {
|
|
...typography.body,
|
|
color: colors.text,
|
|
fontWeight: "600",
|
|
},
|
|
});
|