791f432334
- Phase 0: Rename all Kine references to Tabata (types, files, imports, i18n, analytics events) - Phase 1: Add test coverage for tabataProgramStore, workoutProgramStore, and color utils (47 tests) - Phase 2: Remove all `any` types from production code with proper typed replacements - Phase 3: Replace ~60 raw console.* calls with __DEV__-gated logger utility - Phase 4: Verify .DS_Store housekeeping (already clean) 0 TypeScript errors, 583/583 tests passing.
261 lines
12 KiB
TypeScript
261 lines
12 KiB
TypeScript
/**
|
|
* Tabata Program Detail Screen
|
|
* Displays program overview, weeks, sessions, and progression for kiné programs
|
|
*/
|
|
|
|
import React from 'react'
|
|
import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native'
|
|
import { Stack, useRouter, useLocalSearchParams } from 'expo-router'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { Icon } from '@/src/shared/components/Icon'
|
|
|
|
import { useTabataProgramStore } from '@/src/shared/stores/tabataProgramStore'
|
|
import { getTabataProgramById, getTabataSessionsByWeek } from '@/src/shared/data/tabata'
|
|
import { canAccessProgram } from '@/src/shared/services/access'
|
|
import { useUserStore } from '@/src/shared/stores/userStore'
|
|
import type { TabataProgramId } from '@/src/shared/types/program'
|
|
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
|
import { SPACING } from '@/src/shared/constants/spacing'
|
|
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
|
import { TEXT, NAVY, GREEN, BORDER_COLORS, AMBER, DARK } from '@/src/shared/constants/colors'
|
|
import { withOpacity } from '@/src/shared/utils/color'
|
|
|
|
export default function TabataProgramDetailScreen() {
|
|
const { id } = useLocalSearchParams<{ id: string }>()
|
|
const router = useRouter()
|
|
const insets = useSafeAreaInsets()
|
|
|
|
const programId = id as TabataProgramId
|
|
const program = getTabataProgramById(programId)
|
|
|
|
const selectProgram = useTabataProgramStore(s => s.selectProgram)
|
|
const progress = useTabataProgramStore(s => s.programsProgress[programId])
|
|
const isWeekUnlocked = useTabataProgramStore(s => s.isWeekUnlocked)
|
|
const getCurrentSession = useTabataProgramStore(s => s.getCurrentSession)
|
|
const completion = useTabataProgramStore(s => s.getProgramCompletion(programId))
|
|
const getProgramStatus = useTabataProgramStore(s => s.getProgramStatus)
|
|
|
|
const isPremium = useUserStore(s => s.profile.subscription) !== 'free'
|
|
const canAccess = canAccessProgram(programId, isPremium)
|
|
const status = getProgramStatus(programId)
|
|
|
|
if (!program) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Stack.Screen options={{ headerShown: false }} />
|
|
<Text style={styles.errorText}>Programme non trouvé</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const handleStartProgram = () => {
|
|
selectProgram(programId)
|
|
const session = getCurrentSession(programId)
|
|
if (session) {
|
|
router.push(`/workout/${session.id}`)
|
|
}
|
|
}
|
|
|
|
const handleSessionPress = (sessionId: string) => {
|
|
router.push(`/workout/${sessionId}`)
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Stack.Screen
|
|
options={{
|
|
headerShown: true,
|
|
headerTitle: program.title,
|
|
headerStyle: { backgroundColor: NAVY[900] },
|
|
headerTintColor: TEXT.PRIMARY,
|
|
headerBackTitle: 'Retour',
|
|
}}
|
|
/>
|
|
|
|
<ScrollView style={styles.scrollView} contentContainerStyle={{ paddingBottom: insets.bottom + 100 }}>
|
|
{/* Program header */}
|
|
<View style={[styles.heroSection, { backgroundColor: withOpacity(program.accentColor, 0.12) }]}>
|
|
<View style={[styles.iconCircle, { backgroundColor: withOpacity(program.accentColor, 0.19) }]}>
|
|
<Icon name={program.icon as any} size={32} tintColor={program.accentColor} />
|
|
</View>
|
|
<Text style={styles.programTitle}>{program.title}</Text>
|
|
<Text style={styles.programDescription}>{program.description}</Text>
|
|
|
|
{/* Tier badge */}
|
|
<View style={[styles.tierBadge, { borderColor: program.accentColor }]}>
|
|
<Text style={[styles.tierBadgeText, { color: program.accentColor }]}>
|
|
{program.tier === 'free' ? 'GRATUIT' : 'PREMIUM'}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Stats row */}
|
|
<View style={styles.statsRow}>
|
|
<View style={styles.statItem}>
|
|
<Text style={styles.statValue}>{program.durationWeeks}</Text>
|
|
<Text style={styles.statLabel}>Semaines</Text>
|
|
</View>
|
|
<View style={styles.statItem}>
|
|
<Text style={styles.statValue}>{program.sessionsPerWeek}</Text>
|
|
<Text style={styles.statLabel}>Séances/sem</Text>
|
|
</View>
|
|
<View style={styles.statItem}>
|
|
<Text style={styles.statValue}>{program.totalSessions}</Text>
|
|
<Text style={styles.statLabel}>Séances</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Progress */}
|
|
{status === 'in-progress' && (
|
|
<View style={styles.progressSection}>
|
|
<View style={styles.progressBar}>
|
|
<View style={[styles.progressFill, { width: `${completion}%`, backgroundColor: program.accentColor }]} />
|
|
</View>
|
|
<Text style={styles.progressText}>{completion}% complété</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Principles */}
|
|
{program.principles.length > 0 && (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Principes</Text>
|
|
{program.principles.map((p, i) => (
|
|
<View key={i} style={styles.principleItem}>
|
|
<Text style={styles.principleBullet}>•</Text>
|
|
<Text style={styles.principleText}>{p}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
|
|
{/* Weeks */}
|
|
{program.weeks.map(week => {
|
|
const unlocked = isWeekUnlocked(programId, week.weekNumber)
|
|
return (
|
|
<View key={week.weekNumber} style={styles.weekSection}>
|
|
<View style={styles.weekHeader}>
|
|
<Text style={styles.weekTitle}>Semaine {week.weekNumber}: {week.title}</Text>
|
|
{week.isDeload && (
|
|
<View style={styles.deloadBadge}>
|
|
<Text style={styles.deloadText}>Décharge</Text>
|
|
</View>
|
|
)}
|
|
{!unlocked && (
|
|
<Icon name="lock" size={16} tintColor={TEXT.TERTIARY} />
|
|
)}
|
|
</View>
|
|
<Text style={styles.weekFocus}>{week.focus}</Text>
|
|
|
|
{/* Sessions */}
|
|
{week.sessions.map(session => {
|
|
const isCompleted = progress?.completedSessionIds.includes(session.id) ?? false
|
|
const sessionLocked = !unlocked
|
|
|
|
return (
|
|
<Pressable
|
|
key={session.id}
|
|
style={[styles.sessionCard, sessionLocked && styles.sessionCardLocked]}
|
|
onPress={() => !sessionLocked && canAccess && handleSessionPress(session.id)}
|
|
disabled={sessionLocked || !canAccess}
|
|
>
|
|
<View style={styles.sessionInfo}>
|
|
<View style={[styles.sessionDot, {
|
|
backgroundColor: isCompleted ? GREEN[500] : sessionLocked ? BORDER_COLORS.DIM : program.accentColor,
|
|
}]} />
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={[styles.sessionTitle, sessionLocked && { opacity: 0.4 }]}>
|
|
Séance {session.order}: {session.title}
|
|
</Text>
|
|
<Text style={styles.sessionMeta}>
|
|
{session.blocks.length} bloc{session.blocks.length > 1 ? 's' : ''} · {session.totalDuration} min · {session.calories} cal
|
|
</Text>
|
|
</View>
|
|
{isCompleted && <Icon name="checkmark.circle" size={20} tintColor={GREEN[500]} />}
|
|
{!canAccess && !sessionLocked && <Icon name="lock" size={16} tintColor={TEXT.TERTIARY} />}
|
|
</View>
|
|
</Pressable>
|
|
)
|
|
})}
|
|
</View>
|
|
)
|
|
})}
|
|
|
|
{/* Completion criteria */}
|
|
{program.completionCriteria.length > 0 && (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Critères de passage</Text>
|
|
{program.completionCriteria.map((c, i) => (
|
|
<View key={i} style={styles.principleItem}>
|
|
<Text style={styles.principleBullet}>✓</Text>
|
|
<Text style={styles.principleText}>{c}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
|
|
{/* CTA */}
|
|
<View style={[styles.ctaContainer, { paddingBottom: insets.bottom + SPACING[4] }]}>
|
|
{canAccess ? (
|
|
<Pressable style={[styles.ctaButton, { backgroundColor: program.accentColor }]} onPress={handleStartProgram}>
|
|
<Text style={styles.ctaText}>
|
|
{status === 'in-progress' ? 'Continuer le programme' : status === 'completed' ? 'Recommencer' : 'Commencer le programme'}
|
|
</Text>
|
|
</Pressable>
|
|
) : (
|
|
<Pressable style={[styles.ctaButton, { backgroundColor: GREEN[500] }]} onPress={() => router.push('/paywall')}>
|
|
<Text style={styles.ctaText}>Débloquer avec Premium</Text>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: NAVY[900] },
|
|
scrollView: { flex: 1 },
|
|
|
|
heroSection: { padding: SPACING[6], alignItems: 'center' },
|
|
iconCircle: { width: 64, height: 64, borderRadius: 32, alignItems: 'center', justifyContent: 'center', marginBottom: SPACING[3] },
|
|
programTitle: { ...TYPOGRAPHY.LARGE_TITLE, color: TEXT.PRIMARY, textAlign: 'center' },
|
|
programDescription: { ...TYPOGRAPHY.BODY, color: TEXT.SECONDARY, textAlign: 'center', marginTop: SPACING[2], lineHeight: 22 },
|
|
tierBadge: { marginTop: SPACING[3], paddingHorizontal: SPACING[2], paddingVertical: 3, borderRadius: RADIUS.SM, borderWidth: 1 },
|
|
tierBadgeText: { ...TYPOGRAPHY.LABEL },
|
|
|
|
statsRow: { flexDirection: 'row', marginTop: SPACING[6], gap: SPACING[8] },
|
|
statItem: { alignItems: 'center' },
|
|
statValue: { ...TYPOGRAPHY.TITLE_2, color: TEXT.PRIMARY },
|
|
statLabel: { ...TYPOGRAPHY.CAPTION_1, color: TEXT.TERTIARY, marginTop: 2 },
|
|
|
|
progressSection: { marginTop: SPACING[4], width: '100%' },
|
|
progressBar: { height: 4, borderRadius: RADIUS.PILL, backgroundColor: BORDER_COLORS.DIM, overflow: 'hidden' },
|
|
progressFill: { height: '100%', borderRadius: RADIUS.PILL },
|
|
progressText: { ...TYPOGRAPHY.CAPTION_1, color: TEXT.TERTIARY, marginTop: SPACING[1], textAlign: 'center' },
|
|
|
|
section: { paddingHorizontal: SPACING[5], marginTop: SPACING[6] },
|
|
sectionTitle: { ...TYPOGRAPHY.HEADLINE, color: TEXT.PRIMARY, marginBottom: SPACING[3] },
|
|
principleItem: { flexDirection: 'row', gap: SPACING[2], marginBottom: SPACING[2] },
|
|
principleBullet: { color: TEXT.TERTIARY, fontSize: 14 },
|
|
principleText: { ...TYPOGRAPHY.SUBHEADLINE, color: TEXT.SECONDARY, flex: 1, lineHeight: 20 },
|
|
|
|
weekSection: { paddingHorizontal: SPACING[5], marginTop: SPACING[6] },
|
|
weekHeader: { flexDirection: 'row', alignItems: 'center', gap: SPACING[2] },
|
|
weekTitle: { ...TYPOGRAPHY.TITLE_3, color: TEXT.PRIMARY, flex: 1 },
|
|
weekFocus: { ...TYPOGRAPHY.CAPTION_1, color: TEXT.TERTIARY, marginTop: SPACING[1], marginBottom: SPACING[3] },
|
|
deloadBadge: { backgroundColor: withOpacity(AMBER[500], 0.2), paddingHorizontal: SPACING[2], paddingVertical: 2, borderRadius: RADIUS.SM },
|
|
deloadText: { ...TYPOGRAPHY.LABEL, color: AMBER[500] },
|
|
|
|
sessionCard: { backgroundColor: NAVY[800], borderRadius: RADIUS.MD, padding: SPACING[3], marginBottom: SPACING[2], borderWidth: 1, borderColor: BORDER_COLORS.DIM },
|
|
sessionCardLocked: { opacity: 0.5 },
|
|
sessionInfo: { flexDirection: 'row', alignItems: 'center', gap: SPACING[3] },
|
|
sessionDot: { width: 8, height: 8, borderRadius: 4 },
|
|
sessionTitle: { ...TYPOGRAPHY.SUBHEADLINE, color: TEXT.PRIMARY },
|
|
sessionMeta: { ...TYPOGRAPHY.CAPTION_2, color: TEXT.TERTIARY, marginTop: 2 },
|
|
|
|
ctaContainer: { position: 'absolute', bottom: 0, left: 0, right: 0, paddingHorizontal: SPACING[5], paddingTop: SPACING[3], backgroundColor: DARK.SCRIM, borderTopWidth: 1, borderTopColor: BORDER_COLORS.DIM },
|
|
ctaButton: { height: 52, borderRadius: RADIUS.MD, alignItems: 'center', justifyContent: 'center' },
|
|
ctaText: { ...TYPOGRAPHY.BUTTON_MEDIUM, color: NAVY[900], letterSpacing: 0.5 },
|
|
errorText: { color: TEXT.SECONDARY, textAlign: 'center', marginTop: 100 },
|
|
})
|