feat(settings): subscription section + __DEV__ plan-override toggle
- settings.tsx: real "Abo" row showing current plan (Free/Pro/Legend badge), taps open a sheet explaining subscriptions are managed on rebreak.org (Linking.openURL → /account; TODO: gate for iOS App-Store submission per Apple 3.1.1 — no in-app purchase flow) - debug.tsx: __DEV__-only plan-override toggle (free/pro/legend) via PATCH /api/admin/users/:id + invalidateMe(); shows admin-only hint on 403 - locales: settings.subscription_* keys (de + en) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chahinebrini
parent
bcc6e5cba1
commit
e9d34dbe78
@ -1,13 +1,16 @@
|
||||
import { useEffect } from 'react';
|
||||
import { View, Text, ScrollView, Pressable } from 'react-native';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, ScrollView, Pressable, Alert } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useColors } from '../lib/theme';
|
||||
import { useMe, invalidateMe, type Plan } from '../hooks/useMe';
|
||||
import { apiFetch } from '../lib/api';
|
||||
|
||||
export default function DebugScreen() {
|
||||
const router = useRouter();
|
||||
const colors = useColors();
|
||||
const { me } = useMe();
|
||||
|
||||
useEffect(() => {
|
||||
if (!__DEV__) {
|
||||
@ -91,6 +94,14 @@ export default function DebugScreen() {
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{me ? (
|
||||
<PlanOverrideToggle
|
||||
colors={colors}
|
||||
userId={me.id}
|
||||
currentPlan={me.plan}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<DebugStub
|
||||
title="LLM-Provider Toggle"
|
||||
subtitle="Phase C: aus app/urge.tsx hierher migrieren"
|
||||
@ -111,6 +122,129 @@ export default function DebugScreen() {
|
||||
);
|
||||
}
|
||||
|
||||
const PLANS: Plan[] = ['free', 'pro', 'legend'];
|
||||
|
||||
const PLAN_COLOR: Record<Plan, string> = {
|
||||
free: '#737373',
|
||||
pro: '#007AFF',
|
||||
legend: '#f59e0b',
|
||||
};
|
||||
|
||||
function PlanOverrideToggle({
|
||||
colors,
|
||||
userId,
|
||||
currentPlan,
|
||||
}: {
|
||||
colors: import('../lib/theme').ColorScheme;
|
||||
userId: string;
|
||||
currentPlan: Plan;
|
||||
}) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function switchPlan(plan: Plan) {
|
||||
if (plan === currentPlan) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
// PATCH /api/admin/users/:id requires admin privileges.
|
||||
// If the dev-user is not admin, this returns 403 — see alert below.
|
||||
await apiFetch(`/api/admin/users/${userId}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({ plan }),
|
||||
});
|
||||
invalidateMe();
|
||||
} catch (e: unknown) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
if (msg.includes('403')) {
|
||||
Alert.alert(
|
||||
'Kein Admin-Zugriff',
|
||||
'PATCH /api/admin/users/:id setzt Admin-Rechte voraus. Plan manuell im Admin-Panel flippen.',
|
||||
);
|
||||
} else {
|
||||
Alert.alert('Fehler', msg);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
padding: 14,
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 12 }}>
|
||||
<View
|
||||
style={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 11,
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="star-outline" size={18} color={colors.textMuted} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ fontSize: 14, color: colors.text, fontFamily: 'Nunito_700Bold' }}>
|
||||
Plan-Override (DEV)
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: colors.textMuted,
|
||||
fontFamily: 'Nunito_400Regular',
|
||||
marginTop: 3,
|
||||
lineHeight: 17,
|
||||
}}
|
||||
>
|
||||
PATCH /api/admin/users/:id — braucht Admin-Rechte
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={{ flexDirection: 'row', gap: 8 }}>
|
||||
{PLANS.map((plan) => {
|
||||
const isActive = plan === currentPlan;
|
||||
const accent = PLAN_COLOR[plan];
|
||||
return (
|
||||
<Pressable
|
||||
key={plan}
|
||||
onPress={() => switchPlan(plan)}
|
||||
disabled={loading || isActive}
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
backgroundColor: isActive ? accent : colors.surfaceElevated,
|
||||
opacity: loading ? 0.5 : pressed ? 0.7 : 1,
|
||||
})}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontFamily: 'Nunito_700Bold',
|
||||
color: isActive ? '#ffffff' : colors.textMuted,
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
>
|
||||
{plan}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function DebugStub({
|
||||
title,
|
||||
subtitle,
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import {
|
||||
Alert,
|
||||
Linking,
|
||||
Platform,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
@ -21,6 +22,114 @@ import { useLanguageStore, type AppLanguage } from '../stores/language';
|
||||
import { useUserPlan } from '../hooks/useUserPlan';
|
||||
import { AppHeader } from '../components/AppHeader';
|
||||
|
||||
// ─── Subscription Sheet ────────────────────────────────────────────────────
|
||||
|
||||
type SubscriptionSheetProps = {
|
||||
plan: 'free' | 'pro' | 'legend';
|
||||
colors: import('../lib/theme').ColorScheme;
|
||||
t: (key: string) => string;
|
||||
};
|
||||
|
||||
const PLAN_ACCENT: Record<string, string> = {
|
||||
free: '#737373',
|
||||
pro: '#007AFF',
|
||||
legend: '#f59e0b',
|
||||
};
|
||||
|
||||
function SubscriptionSheet({ plan, colors, t }: SubscriptionSheetProps) {
|
||||
const accentColor = PLAN_ACCENT[plan] ?? '#737373';
|
||||
const planLabel =
|
||||
plan === 'legend'
|
||||
? t('settings.subscription_plan_legend')
|
||||
: plan === 'pro'
|
||||
? t('settings.subscription_plan_pro')
|
||||
: t('settings.subscription_plan_free');
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 32,
|
||||
backgroundColor: colors.surface,
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 16 }}>
|
||||
<Ionicons name="star-outline" size={22} color={accentColor} />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
color: colors.text,
|
||||
fontFamily: 'Nunito_700Bold',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{t('settings.subscription_sheet_title')}
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 20,
|
||||
backgroundColor: accentColor + '22',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontFamily: 'Nunito_700Bold',
|
||||
color: accentColor,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
}}
|
||||
>
|
||||
{planLabel}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: colors.textMuted,
|
||||
fontFamily: 'Nunito_400Regular',
|
||||
lineHeight: 20,
|
||||
marginBottom: 24,
|
||||
}}
|
||||
>
|
||||
{t('settings.subscription_sheet_body')}
|
||||
</Text>
|
||||
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
// TODO: für iOS-Submission ggf. zu nicht-tippbarem Text degradieren
|
||||
// (Apple Guideline 3.1.1: externe Abo-Links können Review-Ablehnung triggern,
|
||||
// wenn sie als Kauf-Umgehung gewertet werden. Standalone-URL ohne Preis-Info
|
||||
// sollte ok sein, ist aber ungeprüft — bei Submission erneut prüfen.)
|
||||
Linking.openURL('https://rebreak.org/account');
|
||||
}}
|
||||
style={({ pressed }) => ({
|
||||
backgroundColor: accentColor,
|
||||
borderRadius: 14,
|
||||
paddingVertical: 14,
|
||||
alignItems: 'center',
|
||||
opacity: pressed ? 0.8 : 1,
|
||||
})}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: '#ffffff',
|
||||
fontFamily: 'Nunito_700Bold',
|
||||
}}
|
||||
>
|
||||
{t('settings.subscription_sheet_cta')}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Settings Screen ───────────────────────────────────────────────────────
|
||||
|
||||
type PickerOption<T extends string> = { value: T; label: string };
|
||||
@ -66,6 +175,7 @@ export default function SettingsScreen() {
|
||||
|
||||
// TrueSheet ref for Lyra-Voice picker (UISheetPresentationController bottom-sheet)
|
||||
const voiceSheetRef = useRef<TrueSheet>(null);
|
||||
const subscriptionSheetRef = useRef<TrueSheet>(null);
|
||||
|
||||
async function handleSignOut() {
|
||||
Alert.alert(t('auth.signOut'), '', [
|
||||
@ -182,7 +292,13 @@ export default function SettingsScreen() {
|
||||
icon: 'star-outline',
|
||||
label: t('settings.subscription'),
|
||||
sublabel: t('settings.subscription_desc'),
|
||||
soon: true,
|
||||
value:
|
||||
plan === 'legend'
|
||||
? t('settings.subscription_plan_legend')
|
||||
: plan === 'pro'
|
||||
? t('settings.subscription_plan_pro')
|
||||
: t('settings.subscription_plan_free'),
|
||||
onPress: () => subscriptionSheetRef.current?.present(),
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -472,6 +588,16 @@ export default function SettingsScreen() {
|
||||
</Text>
|
||||
</ScrollView>
|
||||
|
||||
<TrueSheet
|
||||
ref={subscriptionSheetRef}
|
||||
detents={['auto']}
|
||||
cornerRadius={20}
|
||||
grabber
|
||||
backgroundColor={colors.surface}
|
||||
>
|
||||
<SubscriptionSheet plan={plan} colors={colors} t={t} />
|
||||
</TrueSheet>
|
||||
|
||||
<TrueSheet
|
||||
ref={voiceSheetRef}
|
||||
detents={['auto', 1]}
|
||||
|
||||
@ -418,6 +418,12 @@
|
||||
"devices_desc": "Registrierte Geräte verwalten",
|
||||
"subscription": "Abonnement",
|
||||
"subscription_desc": "Plan & Upgrade-Pfad",
|
||||
"subscription_plan_free": "Free",
|
||||
"subscription_plan_pro": "Pro",
|
||||
"subscription_plan_legend": "Legend",
|
||||
"subscription_sheet_title": "Dein Abonnement",
|
||||
"subscription_sheet_body": "Du verwaltest dein Abo auf rebreak.org — dort kannst du upgraden, downgraden oder kündigen.",
|
||||
"subscription_sheet_cta": "Zu rebreak.org/account",
|
||||
"plan_free": "Free",
|
||||
"push_notifications": "Push-Benachrichtigungen",
|
||||
"streak_reminders": "Streak-Erinnerungen",
|
||||
|
||||
@ -418,6 +418,12 @@
|
||||
"devices_desc": "Manage registered devices",
|
||||
"subscription": "Subscription",
|
||||
"subscription_desc": "Plan & upgrade path",
|
||||
"subscription_plan_free": "Free",
|
||||
"subscription_plan_pro": "Pro",
|
||||
"subscription_plan_legend": "Legend",
|
||||
"subscription_sheet_title": "Your subscription",
|
||||
"subscription_sheet_body": "Manage your subscription at rebreak.org — upgrade, downgrade or cancel there.",
|
||||
"subscription_sheet_cta": "Go to rebreak.org/account",
|
||||
"plan_free": "Free",
|
||||
"push_notifications": "Push notifications",
|
||||
"streak_reminders": "Streak reminders",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user