This commit is contained in:
Jamie Brunton committed 2025-12-30 22:56:30 +00:00
1 parent ed4c14afb8
commit acf9962503
7 files changed
+390 -48

No files matched your search

+5
View File
@@ -0,0 +1,5 @@
{
"plugins": [
"expo-asset"
]
}
+2 -1
View File
@@ -65,7 +65,8 @@
}
],
"@sentry/react-native",
"expo-font"
"expo-font",
"expo-asset"
],
"experiments": {
"typedRoutes": true
+19 -2
View File
@@ -392,8 +392,9 @@ export default function ProfileScreen() {
)}
</GlassCard>
{/* Restore Purchases Link */}
{/* Restore Purchases & Redeem Links */}
{!hasPremiumAccess && (
<View style={styles.subscriptionLinks}>
<TouchableOpacity
style={styles.restoreLink}
onPress={handleRestorePurchases}
@@ -403,6 +404,14 @@ export default function ProfileScreen() {
{isPurchasing ? "Restoring..." : "Restore Purchases"}
</Text>
</TouchableOpacity>
<Text style={styles.linkDivider}>|</Text>
<TouchableOpacity
style={styles.restoreLink}
onPress={() => router.push("/(app)/redeem")}
>
<Text style={styles.restoreLinkText}>Redeem Code</Text>
</TouchableOpacity>
</View>
)}
</Animated.View>
@@ -896,15 +905,23 @@ const styles = StyleSheet.create({
color: colors.text,
fontWeight: "600",
},
restoreLink: {
subscriptionLinks: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginTop: spacing.sm,
},
restoreLink: {
padding: spacing.sm,
},
restoreLinkText: {
...typography.caption1,
color: colors.textTertiary,
},
linkDivider: {
...typography.caption1,
color: colors.textTertiary,
},
versionContainer: {
alignItems: "center",
marginTop: spacing.lg,
+312
View File
@@ -0,0 +1,312 @@
import { useState } from "react";
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Alert,
KeyboardAvoidingView,
Platform,
ScrollView,
} from "react-native";
import { router } from "expo-router";
import Animated, {
FadeInDown,
FadeInUp,
} from "react-native-reanimated";
import { Ionicons } from "@expo/vector-icons";
import { GradientBackground, GlassCard, GlassButton, GlassInput } from "../../src/components/ui";
import { colors, spacing, radius, typography } from "../../src/theme";
export default function RedeemScreen() {
const [email, setEmail] = useState("");
const [code, setCode] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [isRedeemed, setIsRedeemed] = useState(false);
const [error, setError] = useState<string | null>(null);
const showError = (message: string) => {
setError(message);
if (Platform.OS !== 'web') {
Alert.alert("Error", message);
}
};
const clearError = () => setError(null);
const handleRedeem = async () => {
clearError();
if (!email.trim()) {
showError("Please enter your email address");
return;
}
if (!code.trim()) {
showError("Please enter your redemption code");
return;
}
// Basic email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email.trim())) {
showError("Please enter a valid email address");
return;
}
setIsLoading(true);
// TODO: Wire up to backend
// For now, just simulate a delay and show success
await new Promise(resolve => setTimeout(resolve, 1500));
setIsLoading(false);
setIsRedeemed(true);
};
// Success screen
if (isRedeemed) {
return (
<GradientBackground showAccent>
<View style={styles.centeredContainer}>
<Animated.View
entering={FadeInUp.duration(600).springify()}
style={styles.centeredContent}
>
<View style={styles.iconContainer}>
<Ionicons name="checkmark-circle" size={48} color={colors.success} />
</View>
<Text style={styles.title}>Code Redeemed!</Text>
<Text style={styles.subtitle}>
Your premium access has been activated for{'\n'}
<Text style={styles.emailHighlight}>{email}</Text>
</Text>
<Text style={styles.hint}>
Enjoy all premium question packs and features.
</Text>
<GlassButton
onPress={() => router.back()}
style={{ marginTop: spacing.lg }}
>
Back to Profile
</GlassButton>
</Animated.View>
</View>
</GradientBackground>
);
}
return (
<GradientBackground showAccent>
<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<ScrollView
contentContainerStyle={styles.scrollContent}
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}
>
<View style={styles.content}>
{/* Back Button */}
<Animated.View
entering={FadeInDown.delay(100).duration(600).springify()}
>
<TouchableOpacity
style={styles.backButton}
onPress={() => router.back()}
activeOpacity={0.7}
>
<Ionicons name="arrow-back" size={24} color={colors.text} />
</TouchableOpacity>
</Animated.View>
{/* Header */}
<Animated.View
entering={FadeInDown.delay(150).duration(600).springify()}
style={styles.headerContainer}
>
<View style={styles.logoContainer}>
<Ionicons name="gift" size={40} color={colors.primary} />
</View>
<Text style={styles.title}>Redeem Premium</Text>
<Text style={styles.subtitle}>
Enter your email and redemption code to unlock premium features
</Text>
</Animated.View>
{/* Form Card */}
<Animated.View
entering={FadeInDown.delay(200).duration(600).springify()}
style={styles.formContainer}
>
<GlassCard variant="elevated">
{/* Error Message */}
{error && (
<Animated.View
entering={FadeInDown.duration(200)}
style={styles.errorContainer}
>
<Ionicons name="alert-circle" size={18} color={colors.error} />
<Text style={styles.errorText}>{error}</Text>
</Animated.View>
)}
{/* Form Fields */}
<View style={styles.form}>
<GlassInput
placeholder="Enter your email"
value={email}
onChangeText={(text) => { clearError(); setEmail(text); }}
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
icon={<Ionicons name="mail-outline" size={20} color={colors.textTertiary} />}
/>
<GlassInput
placeholder="Enter redemption code"
value={code}
onChangeText={(text) => { clearError(); setCode(text.toUpperCase()); }}
autoCapitalize="characters"
autoCorrect={false}
icon={<Ionicons name="key-outline" size={20} color={colors.textTertiary} />}
/>
<GlassButton
onPress={handleRedeem}
loading={isLoading}
disabled={isLoading}
fullWidth
>
Redeem Code
</GlassButton>
</View>
</GlassCard>
</Animated.View>
{/* Info Text */}
<Animated.View
entering={FadeInDown.delay(250).duration(600).springify()}
style={styles.infoContainer}
>
<Ionicons name="information-circle-outline" size={16} color={colors.textTertiary} />
<Text style={styles.infoText}>
Redemption codes are provided through promotions and giveaways. Each code can only be used once.
</Text>
</Animated.View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</GradientBackground>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
centeredContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
centeredContent: {
alignItems: "center",
paddingHorizontal: spacing.lg,
},
scrollContent: {
flexGrow: 1,
},
content: {
flex: 1,
paddingHorizontal: spacing.lg,
paddingTop: 60,
paddingBottom: spacing.xl,
},
backButton: {
width: 44,
height: 44,
borderRadius: 22,
backgroundColor: colors.glass.background,
justifyContent: "center",
alignItems: "center",
marginBottom: spacing.lg,
},
headerContainer: {
alignItems: "center",
marginBottom: spacing.xl,
},
logoContainer: {
width: 80,
height: 80,
borderRadius: 40,
backgroundColor: colors.primaryLight,
justifyContent: "center",
alignItems: "center",
marginBottom: spacing.md,
},
iconContainer: {
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: colors.successLight,
justifyContent: "center",
alignItems: "center",
marginBottom: spacing.lg,
},
title: {
...typography.largeTitle,
color: colors.text,
marginBottom: spacing.xs,
textAlign: "center",
},
subtitle: {
...typography.body,
color: colors.textSecondary,
textAlign: "center",
},
emailHighlight: {
color: colors.primary,
fontWeight: "600",
},
hint: {
...typography.subhead,
color: colors.textSecondary,
textAlign: "center",
marginTop: spacing.md,
paddingHorizontal: spacing.md,
},
formContainer: {
marginBottom: spacing.lg,
},
errorContainer: {
flexDirection: "row",
alignItems: "center",
backgroundColor: colors.errorLight,
padding: spacing.md,
borderRadius: radius.md,
marginBottom: spacing.md,
gap: spacing.sm,
},
errorText: {
...typography.subhead,
color: colors.error,
flex: 1,
},
form: {
gap: spacing.sm,
},
infoContainer: {
flexDirection: "row",
alignItems: "flex-start",
paddingHorizontal: spacing.sm,
gap: spacing.sm,
},
infoText: {
...typography.caption1,
color: colors.textTertiary,
flex: 1,
lineHeight: 18,
},
});
+6
View File
@@ -0,0 +1,6 @@
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
+2
View File
@@ -21,9 +21,11 @@
"@sentry/react-native": "~6.10.0",
"@supabase/supabase-js": "^2.39.0",
"@tanstack/react-query": "^5.17.0",
"babel-preset-expo": "~12.0.0",
"base64-arraybuffer": "^1.0.2",
"expo": "~52.0.0",
"expo-apple-authentication": "~7.1.3",
"expo-asset": "~11.0.5",
"expo-blur": "~14.0.3",
"expo-build-properties": "^0.13.3",
"expo-clipboard": "~7.0.1",
+44 -45
View File
@@ -133,9 +133,11 @@
"@sentry/react-native": "~6.10.0",
"@supabase/supabase-js": "^2.39.0",
"@tanstack/react-query": "^5.17.0",
"babel-preset-expo": "~12.0.0",
"base64-arraybuffer": "^1.0.2",
"expo": "~52.0.0",
"expo-apple-authentication": "~7.1.3",
"expo-asset": "~11.0.5",
"expo-blur": "~14.0.3",
"expo-build-properties": "^0.13.3",
"expo-clipboard": "~7.0.1",
@@ -324,20 +326,6 @@
"react-native": "*"
}
},
"apps/mobile/node_modules/expo-constants": {
"version": "17.0.8",
"resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.0.8.tgz",
"integrity": "sha512-XfWRyQAf1yUNgWZ1TnE8pFBMqGmFP5Gb+SFSgszxDdOoheB/NI5D4p7q86kI2fvGyfTrxAe+D+74nZkfsGvUlg==",
"license": "MIT",
"dependencies": {
"@expo/config": "~10.0.11",
"@expo/env": "~0.4.2"
},
"peerDependencies": {
"expo": "*",
"react-native": "*"
}
},
"apps/mobile/node_modules/expo-file-system": {
"version": "18.0.12",
"resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.0.12.tgz",
@@ -7821,6 +7809,17 @@
"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
}
},
"node_modules/babel-plugin-react-compiler": {
"version": "19.0.0-beta-ebf51a3-20250411",
"resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-19.0.0-beta-ebf51a3-20250411.tgz",
"integrity": "sha512-q84bNR9JG1crykAlJUt5Ud0/5BUyMFuQww/mrwIQDFBaxsikqBDj3f/FNDsVd2iR26A1HvXKWPEIfgJDv8/V2g==",
"license": "MIT",
"optional": true,
"peer": true,
"dependencies": {
"@babel/types": "^7.26.0"
}
},
"node_modules/babel-plugin-react-native-web": {
"version": "0.19.13",
"resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.19.13.tgz",
@@ -9924,6 +9923,23 @@
"react-native": "*"
}
},
"node_modules/expo-asset": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/expo-asset/-/expo-asset-11.0.5.tgz",
"integrity": "sha512-TL60LmMBGVzs3NQcO8ylWqBumMh4sx0lmeJsn7+9C88fylGDhyyVnKZ1PyTXo9CVDBkndutZx2JUEQWM9BaiXw==",
"license": "MIT",
"dependencies": {
"@expo/image-utils": "^0.6.5",
"expo-constants": "~17.0.8",
"invariant": "^2.2.4",
"md5-file": "^3.2.3"
},
"peerDependencies": {
"expo": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/expo-build-properties": {
"version": "0.13.3",
"resolved": "https://registry.npmjs.org/expo-build-properties/-/expo-build-properties-0.13.3.tgz",
@@ -9937,6 +9953,20 @@
"expo": "*"
}
},
"node_modules/expo-constants": {
"version": "17.0.8",
"resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.0.8.tgz",
"integrity": "sha512-XfWRyQAf1yUNgWZ1TnE8pFBMqGmFP5Gb+SFSgszxDdOoheB/NI5D4p7q86kI2fvGyfTrxAe+D+74nZkfsGvUlg==",
"license": "MIT",
"dependencies": {
"@expo/config": "~10.0.11",
"@expo/env": "~0.4.2"
},
"peerDependencies": {
"expo": "*",
"react-native": "*"
}
},
"node_modules/expo-dev-client": {
"version": "5.0.20",
"resolved": "https://registry.npmjs.org/expo-dev-client/-/expo-dev-client-5.0.20.tgz",
@@ -10131,37 +10161,6 @@
"expo": "*"
}
},
"node_modules/expo/node_modules/expo-asset": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/expo-asset/-/expo-asset-11.0.5.tgz",
"integrity": "sha512-TL60LmMBGVzs3NQcO8ylWqBumMh4sx0lmeJsn7+9C88fylGDhyyVnKZ1PyTXo9CVDBkndutZx2JUEQWM9BaiXw==",
"license": "MIT",
"dependencies": {
"@expo/image-utils": "^0.6.5",
"expo-constants": "~17.0.8",
"invariant": "^2.2.4",
"md5-file": "^3.2.3"
},
"peerDependencies": {
"expo": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/expo/node_modules/expo-constants": {
"version": "17.0.8",
"resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.0.8.tgz",
"integrity": "sha512-XfWRyQAf1yUNgWZ1TnE8pFBMqGmFP5Gb+SFSgszxDdOoheB/NI5D4p7q86kI2fvGyfTrxAe+D+74nZkfsGvUlg==",
"license": "MIT",
"dependencies": {
"@expo/config": "~10.0.11",
"@expo/env": "~0.4.2"
},
"peerDependencies": {
"expo": "*",
"react-native": "*"
}
},
"node_modules/expo/node_modules/expo-file-system": {
"version": "18.0.12",
"resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.0.12.tgz",