291 lines
10 KiB
TypeScript
291 lines
10 KiB
TypeScript
/**
|
|
* TabataFit Profile Screen
|
|
* React Native + SwiftUI Islands — wired to shared data
|
|
*/
|
|
|
|
import { View, StyleSheet, ScrollView, Text as RNText } from 'react-native'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { LinearGradient } from 'expo-linear-gradient'
|
|
import { BlurView } from 'expo-blur'
|
|
import Ionicons from '@expo/vector-icons/Ionicons'
|
|
import {
|
|
Host,
|
|
List,
|
|
Section,
|
|
Switch,
|
|
Text,
|
|
LabeledContent,
|
|
DateTimePicker,
|
|
Button,
|
|
} from '@expo/ui/swift-ui'
|
|
|
|
import { useMemo } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useUserStore } from '@/src/shared/stores'
|
|
import { requestNotificationPermissions, usePurchases } from '@/src/shared/hooks'
|
|
import { StyledText } from '@/src/shared/components/StyledText'
|
|
|
|
import { useThemeColors, BRAND, GRADIENTS } from '@/src/shared/theme'
|
|
import type { ThemeColors } from '@/src/shared/theme/types'
|
|
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
|
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
|
|
|
const FONTS = {
|
|
LARGE_TITLE: 34,
|
|
TITLE_2: 22,
|
|
HEADLINE: 17,
|
|
SUBHEADLINE: 15,
|
|
CAPTION_1: 12,
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// MAIN SCREEN
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
export default function ProfileScreen() {
|
|
const { t } = useTranslation('screens')
|
|
const insets = useSafeAreaInsets()
|
|
const colors = useThemeColors()
|
|
const styles = useMemo(() => createStyles(colors), [colors])
|
|
const profile = useUserStore((s) => s.profile)
|
|
const settings = useUserStore((s) => s.settings)
|
|
const updateSettings = useUserStore((s) => s.updateSettings)
|
|
const { restorePurchases } = usePurchases()
|
|
|
|
const isPremium = profile.subscription !== 'free'
|
|
const planLabel = isPremium ? 'TabataFit+' : 'Free'
|
|
|
|
const handleRestore = async () => {
|
|
await restorePurchases()
|
|
}
|
|
|
|
const handleReminderToggle = async (enabled: boolean) => {
|
|
if (enabled) {
|
|
const granted = await requestNotificationPermissions()
|
|
if (!granted) return
|
|
}
|
|
updateSettings({ reminders: enabled })
|
|
}
|
|
|
|
const handleTimeChange = (date: Date) => {
|
|
const hh = String(date.getHours()).padStart(2, '0')
|
|
const mm = String(date.getMinutes()).padStart(2, '0')
|
|
updateSettings({ reminderTime: `${hh}:${mm}` })
|
|
}
|
|
|
|
// Build initial date string for the picker (today at reminderTime)
|
|
const today = new Date()
|
|
const [rh, rm] = settings.reminderTime.split(':').map(Number)
|
|
const pickerDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), rh, rm)
|
|
const pickerInitial = pickerDate.toISOString()
|
|
|
|
const settingsHeight = settings.reminders ? 430 : 385
|
|
|
|
return (
|
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Header */}
|
|
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
|
|
{t('profile.title')}
|
|
</StyledText>
|
|
|
|
{/* Profile Card */}
|
|
<View style={styles.profileCard}>
|
|
<BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
|
|
<View style={styles.avatarContainer}>
|
|
<LinearGradient
|
|
colors={GRADIENTS.CTA}
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color="#FFFFFF">
|
|
{profile.name[0]}
|
|
</StyledText>
|
|
</View>
|
|
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
|
|
{profile.name}
|
|
</StyledText>
|
|
<StyledText size={FONTS.SUBHEADLINE} color={colors.text.tertiary}>
|
|
{profile.email}
|
|
</StyledText>
|
|
{isPremium && (
|
|
<View style={styles.premiumBadge}>
|
|
<Ionicons name="star" size={12} color={BRAND.PRIMARY} />
|
|
<StyledText size={FONTS.CAPTION_1} weight="semibold" color={colors.text.primary}>
|
|
{planLabel}
|
|
</StyledText>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Subscription */}
|
|
{isPremium && (
|
|
<View style={styles.subscriptionCard}>
|
|
<LinearGradient
|
|
colors={GRADIENTS.CTA}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
<View style={styles.subscriptionContent}>
|
|
<Ionicons name="ribbon" size={24} color="#FFFFFF" />
|
|
<View style={styles.subscriptionInfo}>
|
|
<StyledText size={FONTS.HEADLINE} weight="bold" color="#FFFFFF">
|
|
{planLabel}
|
|
</StyledText>
|
|
<StyledText size={FONTS.CAPTION_1} color="rgba(255,255,255,0.8)">
|
|
{t('profile.memberSince', { date: profile.joinDate })}
|
|
</StyledText>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* SwiftUI Island: Subscription Section */}
|
|
<Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: 60, marginTop: -20 }}>
|
|
<List listStyle="insetGrouped" scrollEnabled={false}>
|
|
<Section title={t('profile.sectionSubscription')}>
|
|
<Button
|
|
variant="borderless"
|
|
onPress={handleRestore}
|
|
color={colors.text.primary}
|
|
>
|
|
{t('profile.restorePurchases')}
|
|
</Button>
|
|
</Section>
|
|
</List>
|
|
</Host>
|
|
|
|
{/* SwiftUI Island: Settings */}
|
|
<Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: settingsHeight }}>
|
|
<List listStyle="insetGrouped" scrollEnabled={false}>
|
|
<Section title={t('profile.sectionWorkout')}>
|
|
<Switch
|
|
label={t('profile.hapticFeedback')}
|
|
value={settings.haptics}
|
|
onValueChange={(v) => updateSettings({ haptics: v })}
|
|
color={BRAND.PRIMARY}
|
|
/>
|
|
<Switch
|
|
label={t('profile.soundEffects')}
|
|
value={settings.soundEffects}
|
|
onValueChange={(v) => updateSettings({ soundEffects: v })}
|
|
color={BRAND.PRIMARY}
|
|
/>
|
|
<Switch
|
|
label={t('profile.voiceCoaching')}
|
|
value={settings.voiceCoaching}
|
|
onValueChange={(v) => updateSettings({ voiceCoaching: v })}
|
|
color={BRAND.PRIMARY}
|
|
/>
|
|
</Section>
|
|
<Section title={t('profile.sectionNotifications')}>
|
|
<Switch
|
|
label={t('profile.dailyReminders')}
|
|
value={settings.reminders}
|
|
onValueChange={handleReminderToggle}
|
|
color={BRAND.PRIMARY}
|
|
/>
|
|
{settings.reminders && (
|
|
<LabeledContent label={t('profile.reminderTime')}>
|
|
<DateTimePicker
|
|
displayedComponents="hourAndMinute"
|
|
variant="compact"
|
|
initialDate={pickerInitial}
|
|
onDateSelected={handleTimeChange}
|
|
color={BRAND.PRIMARY}
|
|
/>
|
|
</LabeledContent>
|
|
)}
|
|
</Section>
|
|
</List>
|
|
</Host>
|
|
|
|
{/* Version */}
|
|
<StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary} style={styles.versionText}>
|
|
{t('profile.version')}
|
|
</StyledText>
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// STYLES
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
function createStyles(colors: ThemeColors) {
|
|
return StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.bg.base,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
|
},
|
|
|
|
// Profile Card
|
|
profileCard: {
|
|
borderRadius: RADIUS.GLASS_CARD,
|
|
overflow: 'hidden',
|
|
marginBottom: SPACING[6],
|
|
marginTop: SPACING[4],
|
|
alignItems: 'center',
|
|
paddingVertical: SPACING[6],
|
|
borderWidth: 1,
|
|
borderColor: colors.border.glass,
|
|
...colors.shadow.md,
|
|
},
|
|
avatarContainer: {
|
|
width: 80,
|
|
height: 80,
|
|
borderRadius: 40,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: SPACING[3],
|
|
overflow: 'hidden',
|
|
},
|
|
premiumBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(255, 107, 53, 0.15)',
|
|
paddingHorizontal: SPACING[3],
|
|
paddingVertical: SPACING[1],
|
|
borderRadius: RADIUS.FULL,
|
|
marginTop: SPACING[3],
|
|
gap: SPACING[1],
|
|
},
|
|
|
|
// Subscription Card
|
|
subscriptionCard: {
|
|
height: 80,
|
|
borderRadius: RADIUS.LG,
|
|
overflow: 'hidden',
|
|
marginBottom: SPACING[6],
|
|
...colors.shadow.BRAND_GLOW,
|
|
},
|
|
subscriptionContent: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: SPACING[4],
|
|
gap: SPACING[3],
|
|
},
|
|
subscriptionInfo: {
|
|
flex: 1,
|
|
},
|
|
|
|
// Version Text
|
|
versionText: {
|
|
textAlign: 'center',
|
|
marginTop: SPACING[6],
|
|
},
|
|
})
|
|
}
|