8c8dbebd17
- Enhance browse tab with improved navigation - Update home tab with new features - Refactor profile tab - Update paywall screen styling
443 lines
13 KiB
TypeScript
443 lines
13 KiB
TypeScript
/**
|
|
* TabataFit Paywall Screen
|
|
* Premium subscription purchase flow
|
|
*/
|
|
|
|
import React, { useMemo } from 'react'
|
|
import {
|
|
View,
|
|
StyleSheet,
|
|
ScrollView,
|
|
Pressable,
|
|
Text,
|
|
} from 'react-native'
|
|
import { useRouter } from 'expo-router'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { LinearGradient } from 'expo-linear-gradient'
|
|
import Ionicons from '@expo/vector-icons/Ionicons'
|
|
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useHaptics, usePurchases } from '@/src/shared/hooks'
|
|
import { useThemeColors, BRAND, GRADIENTS } from '@/src/shared/theme'
|
|
import type { ThemeColors } from '@/src/shared/theme/types'
|
|
import { SPACING } from '@/src/shared/constants/spacing'
|
|
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// FEATURES LIST
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
const PREMIUM_FEATURES = [
|
|
{ icon: 'musical-notes', key: 'music' },
|
|
{ icon: 'infinity', key: 'workouts' },
|
|
{ icon: 'stats-chart', key: 'stats' },
|
|
{ icon: 'flame', key: 'calories' },
|
|
{ icon: 'notifications', key: 'reminders' },
|
|
{ icon: 'close-circle', key: 'ads' },
|
|
]
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// COMPONENTS
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
interface PlanCardStyles {
|
|
planCard: object
|
|
planCardPressed: object
|
|
savingsBadge: object
|
|
savingsText: object
|
|
planInfo: object
|
|
planTitle: object
|
|
planPeriod: object
|
|
planPrice: object
|
|
checkmark: object
|
|
}
|
|
|
|
function PlanCard({
|
|
title,
|
|
price,
|
|
period,
|
|
savings,
|
|
isSelected,
|
|
onPress,
|
|
colors,
|
|
styles,
|
|
}: {
|
|
title: string
|
|
price: string
|
|
period: string
|
|
savings?: string
|
|
isSelected: boolean
|
|
onPress: () => void
|
|
colors: ThemeColors
|
|
styles: PlanCardStyles
|
|
}) {
|
|
const haptics = useHaptics()
|
|
|
|
const handlePress = () => {
|
|
haptics.selection()
|
|
onPress()
|
|
}
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={handlePress}
|
|
style={({ pressed }) => [
|
|
styles.planCard,
|
|
isSelected && { borderColor: BRAND.PRIMARY },
|
|
pressed && styles.planCardPressed,
|
|
{
|
|
backgroundColor: colors.bg.surface,
|
|
borderColor: isSelected ? BRAND.PRIMARY : colors.border.glass,
|
|
},
|
|
]}
|
|
>
|
|
{savings && (
|
|
<View style={styles.savingsBadge}>
|
|
<Text style={styles.savingsText}>{savings}</Text>
|
|
</View>
|
|
)}
|
|
<View style={styles.planInfo}>
|
|
<Text style={[styles.planTitle, { color: colors.text.primary }]}>
|
|
{title}
|
|
</Text>
|
|
<Text style={[styles.planPeriod, { color: colors.text.tertiary }]}>
|
|
{period}
|
|
</Text>
|
|
</View>
|
|
<Text style={[styles.planPrice, { color: BRAND.PRIMARY }]}>
|
|
{price}
|
|
</Text>
|
|
{isSelected && (
|
|
<View style={styles.checkmark}>
|
|
<Ionicons name="checkmark-circle" size={24} color={BRAND.PRIMARY} />
|
|
</View>
|
|
)}
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// MAIN SCREEN
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
export default function PaywallScreen() {
|
|
const { t } = useTranslation('screens')
|
|
const router = useRouter()
|
|
const insets = useSafeAreaInsets()
|
|
const haptics = useHaptics()
|
|
const colors = useThemeColors()
|
|
const styles = useMemo(() => createStyles(colors), [colors])
|
|
|
|
// Extract plan card styles for the child component
|
|
const planCardStyles = useMemo(
|
|
() => ({
|
|
planCard: styles.planCard,
|
|
planCardPressed: styles.planCardPressed,
|
|
savingsBadge: styles.savingsBadge,
|
|
savingsText: styles.savingsText,
|
|
planInfo: styles.planInfo,
|
|
planTitle: styles.planTitle,
|
|
planPeriod: styles.planPeriod,
|
|
planPrice: styles.planPrice,
|
|
checkmark: styles.checkmark,
|
|
}),
|
|
[styles],
|
|
)
|
|
|
|
const {
|
|
monthlyPackage,
|
|
annualPackage,
|
|
purchasePackage,
|
|
restorePurchases,
|
|
isLoading,
|
|
} = usePurchases()
|
|
|
|
const [selectedPlan, setSelectedPlan] = React.useState<'monthly' | 'annual'>('annual')
|
|
|
|
// Get prices from RevenueCat packages
|
|
const monthlyPrice = monthlyPackage?.product.priceString ?? '$4.99'
|
|
const annualPrice = annualPackage?.product.priceString ?? '$29.99'
|
|
const annualMonthlyEquivalent = annualPackage
|
|
? (annualPackage.product.price / 12).toFixed(2)
|
|
: '2.49'
|
|
|
|
const handlePurchase = async () => {
|
|
haptics.buttonTap()
|
|
const pkg = selectedPlan === 'monthly' ? monthlyPackage : annualPackage
|
|
if (!pkg) {
|
|
console.log('[Paywall] No package available for purchase')
|
|
return
|
|
}
|
|
|
|
const result = await purchasePackage(pkg)
|
|
if (result.success) {
|
|
haptics.workoutComplete()
|
|
router.back()
|
|
} else if (!result.cancelled) {
|
|
console.log('[Paywall] Purchase error:', result.error)
|
|
}
|
|
}
|
|
|
|
const handleRestore = async () => {
|
|
haptics.selection()
|
|
const restored = await restorePurchases()
|
|
if (restored) {
|
|
haptics.workoutComplete()
|
|
router.back()
|
|
}
|
|
}
|
|
|
|
const handleClose = () => {
|
|
haptics.selection()
|
|
router.back()
|
|
}
|
|
|
|
return (
|
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
|
{/* Close Button */}
|
|
<Pressable style={[styles.closeButton, { top: insets.top + SPACING[2] }]} onPress={handleClose}>
|
|
<Ionicons name="close" size={28} color={colors.text.secondary} />
|
|
</Pressable>
|
|
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={[
|
|
styles.scrollContent,
|
|
{ paddingBottom: insets.bottom + 100 },
|
|
]}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<Text style={styles.title}>TabataFit+</Text>
|
|
<Text style={styles.subtitle}>{t('paywall.subtitle')}</Text>
|
|
</View>
|
|
|
|
{/* Features Grid */}
|
|
<View style={styles.featuresGrid}>
|
|
{PREMIUM_FEATURES.map((feature) => (
|
|
<View key={feature.key} style={styles.featureItem}>
|
|
<View style={[styles.featureIcon, { backgroundColor: colors.glass.tinted.backgroundColor }]}>
|
|
<Ionicons name={feature.icon as any} size={22} color={BRAND.PRIMARY} />
|
|
</View>
|
|
<Text style={[styles.featureText, { color: colors.text.secondary }]}>
|
|
{t(`paywall.features.${feature.key}`)}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* Plan Selection */}
|
|
<View style={styles.plansContainer}>
|
|
<PlanCard
|
|
title={t('paywall.yearly')}
|
|
price={annualPrice}
|
|
period={t('paywall.perYear')}
|
|
savings={t('paywall.save50')}
|
|
isSelected={selectedPlan === 'annual'}
|
|
onPress={() => setSelectedPlan('annual')}
|
|
colors={colors}
|
|
styles={planCardStyles}
|
|
/>
|
|
<PlanCard
|
|
title={t('paywall.monthly')}
|
|
price={monthlyPrice}
|
|
period={t('paywall.perMonth')}
|
|
isSelected={selectedPlan === 'monthly'}
|
|
onPress={() => setSelectedPlan('monthly')}
|
|
colors={colors}
|
|
styles={planCardStyles}
|
|
/>
|
|
</View>
|
|
|
|
{/* Price Note */}
|
|
{selectedPlan === 'annual' && (
|
|
<Text style={[styles.priceNote, { color: colors.text.tertiary }]}>
|
|
{t('paywall.equivalent', { price: annualMonthlyEquivalent })}
|
|
</Text>
|
|
)}
|
|
|
|
{/* CTA Button */}
|
|
<Pressable
|
|
style={[styles.ctaButton, isLoading && styles.ctaButtonDisabled]}
|
|
onPress={handlePurchase}
|
|
disabled={isLoading}
|
|
>
|
|
<LinearGradient
|
|
colors={GRADIENTS.CTA}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={styles.ctaGradient}
|
|
>
|
|
<Text style={[styles.ctaText, { color: colors.text.primary }]}>
|
|
{isLoading ? t('paywall.processing') : t('paywall.subscribe')}
|
|
</Text>
|
|
</LinearGradient>
|
|
</Pressable>
|
|
|
|
{/* Restore & Terms */}
|
|
<View style={styles.footer}>
|
|
<Pressable onPress={handleRestore}>
|
|
<Text style={[styles.restoreText, { color: colors.text.tertiary }]}>
|
|
{t('paywall.restore')}
|
|
</Text>
|
|
</Pressable>
|
|
|
|
<Text style={[styles.termsText, { color: colors.text.tertiary }]}>
|
|
{t('paywall.terms')}
|
|
</Text>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// STYLES
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
function createStyles(colors: ThemeColors) {
|
|
return StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.bg.base,
|
|
},
|
|
closeButton: {
|
|
position: 'absolute',
|
|
top: SPACING[4],
|
|
right: SPACING[4],
|
|
width: 44,
|
|
height: 44,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 10,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
paddingHorizontal: SPACING[5],
|
|
paddingTop: SPACING[8],
|
|
},
|
|
header: {
|
|
alignItems: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 32,
|
|
fontWeight: '700',
|
|
color: colors.text.primary,
|
|
textAlign: 'center',
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: colors.text.secondary,
|
|
textAlign: 'center',
|
|
marginTop: SPACING[2],
|
|
},
|
|
featuresGrid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
marginTop: SPACING[6],
|
|
marginHorizontal: -SPACING[2],
|
|
},
|
|
featureItem: {
|
|
width: '33%',
|
|
alignItems: 'center',
|
|
paddingVertical: SPACING[3],
|
|
},
|
|
featureIcon: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 24,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: SPACING[2],
|
|
},
|
|
featureText: {
|
|
fontSize: 13,
|
|
textAlign: 'center',
|
|
},
|
|
plansContainer: {
|
|
marginTop: SPACING[6],
|
|
gap: SPACING[3],
|
|
},
|
|
planCard: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
borderRadius: RADIUS.LG,
|
|
padding: SPACING[4],
|
|
borderWidth: 2,
|
|
},
|
|
planCardPressed: {
|
|
opacity: 0.8,
|
|
},
|
|
savingsBadge: {
|
|
position: 'absolute',
|
|
top: -8,
|
|
right: SPACING[3],
|
|
backgroundColor: BRAND.PRIMARY,
|
|
paddingHorizontal: SPACING[2],
|
|
paddingVertical: 2,
|
|
borderRadius: RADIUS.SM,
|
|
},
|
|
savingsText: {
|
|
fontSize: 10,
|
|
fontWeight: '700',
|
|
color: colors.text.primary,
|
|
},
|
|
planInfo: {
|
|
flex: 1,
|
|
},
|
|
planTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
planPeriod: {
|
|
fontSize: 13,
|
|
marginTop: 2,
|
|
},
|
|
planPrice: {
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
},
|
|
checkmark: {
|
|
marginLeft: SPACING[2],
|
|
},
|
|
priceNote: {
|
|
fontSize: 13,
|
|
textAlign: 'center',
|
|
marginTop: SPACING[3],
|
|
},
|
|
ctaButton: {
|
|
borderRadius: RADIUS.LG,
|
|
overflow: 'hidden',
|
|
marginTop: SPACING[6],
|
|
},
|
|
ctaButtonDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
ctaGradient: {
|
|
paddingVertical: SPACING[4],
|
|
alignItems: 'center',
|
|
},
|
|
ctaText: {
|
|
fontSize: 17,
|
|
fontWeight: '600',
|
|
},
|
|
footer: {
|
|
marginTop: SPACING[5],
|
|
alignItems: 'center',
|
|
gap: SPACING[4],
|
|
},
|
|
restoreText: {
|
|
fontSize: 14,
|
|
},
|
|
termsText: {
|
|
fontSize: 11,
|
|
textAlign: 'center',
|
|
lineHeight: 18,
|
|
paddingHorizontal: SPACING[4],
|
|
},
|
|
})
|
|
}
|