5888aac08e
Simplify Home, Activity, Profile, Complete, Player, and Program screens to work with the new Supabase-driven data layer. Update root and tab layouts. Add Settings, Terms, and Zone routes. Add OfflineBanner component and progressStore. Update all player sub-components to use the refreshed design system tokens.
107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
/**
|
|
* TabataFit Terms of Service Screen
|
|
* Features: F-027, F-029, F-100, F-129
|
|
*/
|
|
|
|
import { useMemo } from 'react'
|
|
import { View, StyleSheet, ScrollView } from 'react-native'
|
|
import { Stack } from 'expo-router'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { StyledText } from '@/src/shared/components/StyledText'
|
|
import { useThemeColors } 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'
|
|
import { NAVY, BORDER_COLORS, GREEN } from '@/src/shared/constants/colors'
|
|
|
|
const SECTIONS = [
|
|
'acceptance',
|
|
'service',
|
|
'subscriptions',
|
|
'cancellation',
|
|
'liability',
|
|
'contact',
|
|
] as const
|
|
|
|
export default function TermsScreen() {
|
|
const { t } = useTranslation()
|
|
const colors = useThemeColors()
|
|
const insets = useSafeAreaInsets()
|
|
const styles = useMemo(() => createStyles(colors), [colors])
|
|
|
|
return (
|
|
<>
|
|
<Stack.Screen
|
|
options={{
|
|
headerShown: true,
|
|
headerStyle: { backgroundColor: colors.bg.base },
|
|
headerShadowVisible: false,
|
|
headerTitle: t('screens:terms.title'),
|
|
headerTintColor: colors.text.primary,
|
|
headerBackButtonDisplayMode: 'minimal',
|
|
}}
|
|
/>
|
|
<ScrollView
|
|
style={styles.container}
|
|
contentContainerStyle={[
|
|
styles.content,
|
|
{ paddingBottom: insets.bottom + SPACING[8] },
|
|
]}
|
|
contentInsetAdjustmentBehavior="automatic"
|
|
>
|
|
<StyledText preset="CAPTION_1" style={styles.lastUpdated}>
|
|
{t('screens:terms.lastUpdated')}
|
|
</StyledText>
|
|
|
|
{SECTIONS.map((section) => (
|
|
<View key={section} style={styles.section}>
|
|
<StyledText preset="HEADING_2" style={styles.sectionTitle}>
|
|
{t(`screens:terms.${section}.title`)}
|
|
</StyledText>
|
|
<StyledText preset="BODY" style={styles.sectionContent}>
|
|
{t(`screens:terms.${section}.content`)}
|
|
</StyledText>
|
|
</View>
|
|
))}
|
|
|
|
<StyledText preset="CAPTION_1" style={styles.email}>
|
|
support@tabatafit.app
|
|
</StyledText>
|
|
</ScrollView>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function createStyles(colors: ThemeColors) {
|
|
return StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.bg.base,
|
|
},
|
|
content: {
|
|
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
|
paddingTop: SPACING[4],
|
|
gap: SPACING[6],
|
|
},
|
|
lastUpdated: {
|
|
color: colors.text.tertiary,
|
|
},
|
|
section: {
|
|
gap: SPACING[2],
|
|
},
|
|
sectionTitle: {
|
|
color: colors.text.primary,
|
|
},
|
|
sectionContent: {
|
|
color: colors.text.secondary,
|
|
lineHeight: 24,
|
|
},
|
|
email: {
|
|
color: GREEN[500],
|
|
textAlign: 'center',
|
|
marginTop: SPACING[4],
|
|
},
|
|
})
|
|
}
|