@oxyhq/services 5.11.11 → 5.12.0

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -19,6 +19,7 @@ import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
+import { useI18n } from '../hooks/useI18n';
 
 interface SubscriptionPlan {
     id: string;
@@ -79,6 +80,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const [currentAppPackage, setCurrentAppPackage] = useState<string>('mention'); // Default to mention for demo
 
     const isDarkTheme = theme === 'dark';
+    const { t } = useI18n();
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
     const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
     const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
@@ -403,14 +405,14 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
             const selectedPlan = mockPlans.find(plan => plan.id === planId);
             if (!selectedPlan?.applicableApps.includes(currentAppPackage)) {
                 console.log(`❌ Subscription blocked: Plan "${selectedPlan?.name}" not available for app "${currentAppPackage}"`);
-                toast.error(`This plan is not available for the current app (${currentAppPackage})`);
+                toast.error(t('premium.toasts.planUnavailable', { app: currentAppPackage }) || `This plan is not available for the current app (${currentAppPackage})`);
                 return;
             }
 
             // Special restriction for Mention+ plan - only available in mention app
             if (planId === 'mention-plus' && currentAppPackage !== 'mention') {
                 console.log(`❌ Subscription blocked: Mention+ plan requires app to be "mention", current app is "${currentAppPackage}"`);
-                toast.error('Mention+ is only available in the Mention app');
+                toast.error(t('premium.toasts.mentionOnly') || 'Mention+ is only available in the Mention app');
                 return;
             }
 
@@ -421,7 +423,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
             // Mock payment processing
             await new Promise(resolve => setTimeout(resolve, 2000));
 
-            toast.success('Subscription activated successfully!');
+            toast.success(t('premium.toasts.activated') || 'Subscription activated successfully!');
 
             // Mock subscription update
             setSubscription({
@@ -438,7 +440,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
         } catch (error) {
             console.error('Payment failed:', error);
-            toast.error('Payment failed. Please try again.');
+            toast.error(t('premium.toasts.paymentFailed') || 'Payment failed. Please try again.');
         } finally {
             setProcessingPayment(false);
         }
@@ -446,7 +448,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     const handleCancelSubscription = () => {
         confirmAction(
-            'Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your current billing period.',
+            t('premium.confirms.cancelSub') || 'Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your current billing period.',
             async () => {
                 try {
                     // Mock cancellation
@@ -454,9 +456,9 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         ...prev,
                         cancelAtPeriodEnd: true
                     } : null);
-                    toast.success('Subscription will be canceled at the end of the billing period');
+                    toast.success(t('premium.toasts.willCancel') || 'Subscription will be canceled at the end of the billing period');
                 } catch (error) {
-                    toast.error('Failed to cancel subscription');
+                    toast.error(t('premium.toasts.cancelFailed') || 'Failed to cancel subscription');
                 }
             }
         );
@@ -468,9 +470,9 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 ...prev,
                 cancelAtPeriodEnd: false
             } : null);
-            toast.success('Subscription reactivated successfully');
+            toast.success(t('premium.toasts.reactivated') || 'Subscription reactivated successfully');
         } catch (error) {
-            toast.error('Failed to reactivate subscription');
+            toast.error(t('premium.toasts.reactivateFailed') || 'Failed to reactivate subscription');
         }
     };
 
@@ -525,11 +527,11 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
             );
 
             const feature = individualFeatures.find(f => f.id === featureId);
-            toast.success(`Subscribed to ${feature?.name} successfully!`);
+            toast.success((t('premium.toasts.featureSubscribed', { name: feature?.name ?? '' }) ?? `Subscribed to ${feature?.name} successfully!`));
 
         } catch (error) {
             console.error('Feature subscription failed:', error);
-            toast.error('Feature subscription failed. Please try again.');
+            toast.error(t('premium.toasts.featureSubscribeFailed') || 'Feature subscription failed. Please try again.');
         } finally {
             setProcessingPayment(false);
         }
@@ -538,7 +540,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const handleFeatureUnsubscribe = async (featureId: string) => {
         const feature = individualFeatures.find(f => f.id === featureId);
         confirmAction(
-            `Are you sure you want to unsubscribe from ${feature?.name}?`,
+            (t('premium.confirms.unsubscribeFeature', { name: feature?.name ?? '' }) ?? `Are you sure you want to unsubscribe from ${feature?.name}?`),
             async () => {
                 try {
                     setIndividualFeatures(prev =>
@@ -548,9 +550,9 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                                 : f
                         )
                     );
-                    toast.success(`Unsubscribed from ${feature?.name}`);
+                    toast.success((t('premium.toasts.featureUnsubscribed', { name: feature?.name ?? '' }) ?? `Unsubscribed from ${feature?.name}`));
                 } catch (error) {
-                    toast.error('Failed to unsubscribe from feature');
+                    toast.error(t('premium.toasts.featureUnsubscribeFailed') || 'Failed to unsubscribe from feature');
                 }
             }
         );
@@ -575,9 +577,9 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     <Ionicons name="arrow-back" size={24} color={textColor} />
                 </TouchableOpacity>
                 <View style={styles.headerTitleContainer}>
-                    <Text style={[styles.headerTitle, { color: textColor }]}>Oxy+ Subscriptions</Text>
+                    <Text style={[styles.headerTitle, { color: textColor }]}>{t('premium.title') || 'Oxy+ Subscriptions'}</Text>
                     <Text style={[styles.currentAppText, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                        for {getAppDisplayName(currentAppPackage)}
+                        {t('premium.forApp', { app: getAppDisplayName(currentAppPackage) }) || `for ${getAppDisplayName(currentAppPackage)}`}
                     </Text>
                 </View>
                 {onClose && (
@@ -602,7 +604,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
         return (
             <View style={styles.section}>
-                <Text style={[styles.sectionTitle, { color: textColor }]}>Current Subscription</Text>
+                <Text style={[styles.sectionTitle, { color: textColor }]}>{t('premium.current.title') || 'Current Subscription'}</Text>
 
                 <View style={[styles.currentSubscriptionCard, { backgroundColor: secondaryBackgroundColor, borderColor }]}>
                     <View style={styles.subscriptionHeader}>
@@ -620,14 +622,14 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     </View>
 
                     <Text style={[styles.subscriptionDetail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                        Renews on {new Date(subscription.currentPeriodEnd).toLocaleDateString()}
+                        {t('premium.current.renewsOn', { date: new Date(subscription.currentPeriodEnd).toLocaleDateString() }) || `Renews on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`}
                     </Text>
 
                     {subscription.cancelAtPeriodEnd && (
                         <View style={styles.cancelNotice}>
                             <Ionicons name="warning" size={16} color={warningColor} />
                             <Text style={[styles.cancelText, { color: warningColor }]}>
-                                Subscription will cancel on {new Date(subscription.currentPeriodEnd).toLocaleDateString()}
+                                {t('premium.current.willCancelOn', { date: new Date(subscription.currentPeriodEnd).toLocaleDateString() }) || `Subscription will cancel on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`}
                             </Text>
                         </View>
                     )}
@@ -638,14 +640,14 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                                 style={[styles.actionButton, { backgroundColor: successColor }]}
                                 onPress={handleReactivateSubscription}
                             >
-                                <Text style={styles.actionButtonText}>Reactivate</Text>
+                                <Text style={styles.actionButtonText}>{t('premium.actions.reactivate') || 'Reactivate'}</Text>
                             </TouchableOpacity>
                         ) : (
                             <TouchableOpacity
                                 style={[styles.actionButton, { backgroundColor: dangerColor }]}
                                 onPress={handleCancelSubscription}
                             >
-                                <Text style={styles.actionButtonText}>Cancel Subscription</Text>
+                                <Text style={styles.actionButtonText}>{t('premium.actions.cancelSubBtn') || 'Cancel Subscription'}</Text>
                             </TouchableOpacity>
                         )}
 
@@ -653,7 +655,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             style={[styles.actionButton, styles.secondaryButton, { borderColor }]}
 
                         >
-                            <Text style={[styles.actionButtonText, { color: textColor }]}>Manage Billing</Text>
+                            <Text style={[styles.actionButtonText, { color: textColor }]}>{t('premium.actions.manageBilling') || 'Manage Billing'}</Text>
                         </TouchableOpacity>
                     </View>
                 </View>
@@ -675,7 +677,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         styles.billingOptionText,
                         { color: billingInterval === 'month' ? '#FFFFFF' : textColor }
                     ]}>
-                        Monthly
+                        {t('premium.billing.monthly') || 'Monthly'}
                     </Text>
                 </TouchableOpacity>
 
@@ -690,14 +692,14 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         styles.billingOptionText,
                         { color: billingInterval === 'year' ? '#FFFFFF' : textColor }
                     ]}>
-                        Yearly
+                        {t('premium.billing.yearly') || 'Yearly'}
                     </Text>
                 </TouchableOpacity>
             </View>
 
             {billingInterval === 'year' && (
                 <Text style={[styles.savingsText, { color: successColor }]}>
-                    💰 Save 20% with yearly billing
+                    {t('premium.billing.saveYearly') || '💰 Save 20% with yearly billing'}
                 </Text>
             )}
         </View>
@@ -712,12 +714,12 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
         const getAppScopeText = () => {
             if (plan.appScope === 'ecosystem') {
-                return 'Works across all Oxy apps';
+                return t('premium.plan.scope.allApps') || 'Works across all Oxy apps';
             } else if (isAppSpecific) {
                 const appName = plan.applicableApps[0];
-                return `Exclusive to ${appName} app`;
+                return t('premium.plan.scope.exclusive', { app: appName }) || `Exclusive to ${appName} app`;
             } else {
-                return `Available in: ${plan.applicableApps.join(', ')}`;
+                return t('premium.plan.scope.availableIn', { apps: plan.applicableApps.join(', ') }) || `Available in: ${plan.applicableApps.join(', ')}`;
             }
         };
 
@@ -726,7 +728,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 const requiredApp = plan.applicableApps[0];
                 return {
                     available: false,
-                    reason: `Only available in ${requiredApp} app`
+                    reason: t('premium.plan.scope.exclusive', { app: requiredApp }) || `Only available in ${requiredApp} app`
                 };
             }
             return { available: true, reason: null };
@@ -756,7 +758,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         backgroundColor: isAvailableForCurrentApp ? successColor : warningColor
                     }]}>
                         <Text style={styles.appSpecificText}>
-                            {isAvailableForCurrentApp ? 'App Exclusive' : 'Not Available'}
+                            {isAvailableForCurrentApp ? (t('premium.plan.badge.appExclusive') || 'App Exclusive') : (t('premium.plan.badge.notAvailable') || 'Not Available')}
                         </Text>
                     </View>
                 )}
@@ -781,7 +783,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         {pricing.formatted}
                     </Text>
                     <Text style={[styles.planInterval, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                        per {pricing.interval}
+                        {t('premium.plan.perInterval', { interval: pricing.interval }) || `per ${pricing.interval}`}
                     </Text>
                 </View>
 
@@ -796,12 +798,12 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 {isCurrentPlan ? (
                     <View style={[styles.currentPlanButton, { backgroundColor: successColor }]}>
-                        <Text style={styles.currentPlanText}>Current Plan</Text>
+                        <Text style={styles.currentPlanText}>{t('premium.plan.current') || 'Current Plan'}</Text>
                     </View>
                 ) : !availability.available ? (
                     <View style={[styles.unavailablePlanButton, { backgroundColor: isDarkTheme ? '#444444' : '#E0E0E0' }]}>
                         <Text style={[styles.unavailablePlanText, { color: isDarkTheme ? '#888888' : '#999999' }]}>
-                            Not Available in Current App
+                            {t('premium.plan.notAvailableInApp') || 'Not Available in Current App'}
                         </Text>
                     </View>
                 ) : (
@@ -820,7 +822,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                                 styles.selectPlanText,
                                 { color: plan.isPopular ? '#FFFFFF' : textColor }
                             ]}>
-                                Subscribe to {plan.name}
+                                {t('premium.actions.subscribeTo', { name: plan.name }) || `Subscribe to ${plan.name}`}
                             </Text>
                         )}
                     </TouchableOpacity>
@@ -843,7 +845,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         styles.tabText,
                         { color: activeTab === 'plans' ? primaryColor : textColor }
                     ]}>
-                        Full Plans
+                        {t('premium.tabs.plans') || 'Full Plans'}
                     </Text>
                 </TouchableOpacity>
 
@@ -858,7 +860,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         styles.tabText,
                         { color: activeTab === 'features' ? primaryColor : textColor }
                     ]}>
-                        Individual Features
+                        {t('premium.tabs.features') || 'Individual Features'}
                     </Text>
                 </TouchableOpacity>
             </View>
@@ -895,9 +897,9 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
         const getAppScopeText = () => {
             if (feature.appScope === 'ecosystem') {
-                return 'Available across all Oxy apps';
+                return t('premium.feature.scope.allApps');
             } else {
-                return `Available in: ${feature.applicableApps.join(', ')}`;
+                return t('premium.feature.scope.availableIn', { apps: feature.applicableApps.join(', ') }) || `Available in: ${feature.applicableApps.join(', ')}`;
             }
         };
 
@@ -943,7 +945,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             {pricing.formatted}
                         </Text>
                         <Text style={[styles.featureInterval, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                            per {pricing.interval}
+                            {t('premium.plan.perInterval', { interval: pricing.interval }) || `per ${pricing.interval}`}
                         </Text>
                     </View>
                 )}
@@ -951,19 +953,19 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 {isIncludedInCurrentPlan ? (
                     <View style={[styles.includedInPlanButton, { backgroundColor: primaryColor }]}>
                         <Ionicons name="checkmark-circle" size={16} color="#FFFFFF" />
-                        <Text style={styles.includedInPlanText}>Included in your plan</Text>
+                        <Text style={styles.includedInPlanText}>{t('premium.feature.includedInPlan') || 'Included in your plan'}</Text>
                     </View>
                 ) : isSubscribed ? (
                     <View style={styles.featureActions}>
                         <View style={[styles.subscribedButton, { backgroundColor: successColor }]}>
                             <Ionicons name="checkmark" size={16} color="#FFFFFF" />
-                            <Text style={styles.subscribedText}>Subscribed</Text>
+                            <Text style={styles.subscribedText}>{t('premium.feature.subscribed') || 'Subscribed'}</Text>
                         </View>
                         <TouchableOpacity
                             style={[styles.unsubscribeButton, { borderColor: dangerColor }]}
                             onPress={() => handleFeatureUnsubscribe(feature.id)}
                         >
-                            <Text style={[styles.unsubscribeText, { color: dangerColor }]}>Unsubscribe</Text>
+                            <Text style={[styles.unsubscribeText, { color: dangerColor }]}>{t('premium.actions.unsubscribe') || 'Unsubscribe'}</Text>
                         </TouchableOpacity>
                     </View>
                 ) : canPurchase ? (
@@ -975,7 +977,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         {processingPayment ? (
                             <ActivityIndicator color="#FFFFFF" size="small" />
                         ) : (
-                            <Text style={styles.subscribeFeatureText}>Subscribe</Text>
+                            <Text style={styles.subscribeFeatureText}>{t('premium.actions.subscribe') || 'Subscribe'}</Text>
                         )}
                     </TouchableOpacity>
                 ) : (
@@ -1064,7 +1066,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         return (
             <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
                 <ActivityIndicator size="large" color={primaryColor} />
-                <Text style={[styles.loadingText, { color: textColor }]}>Loading subscription plans...</Text>
+                <Text style={[styles.loadingText, { color: textColor }]}>{t('premium.loading') || 'Loading subscription plans...'}</Text>
             </View>
         );
     }
@@ -1079,9 +1081,9 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 {!subscription && (
                     <View style={styles.section}>
-                        <Text style={[styles.sectionTitle, { color: textColor }]}>Choose Your Plan</Text>
+                        <Text style={[styles.sectionTitle, { color: textColor }]}>{t('premium.choosePlan') || 'Choose Your Plan'}</Text>
                         <Text style={[styles.sectionSubtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                            Unlock premium features and take your experience to the next level
+                            {t('premium.choosePlanSubtitle') || 'Unlock premium features and take your experience to the next level'}
                         </Text>
                     </View>
                 )}
@@ -1093,7 +1095,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 {activeTab === 'plans' ? (
                     <View style={styles.section}>
                         {!subscription && (
-                            <Text style={[styles.sectionTitle, { color: textColor }]}>Available Plans</Text>
+                            <Text style={[styles.sectionTitle, { color: textColor }]}>{t('premium.availablePlans') || 'Available Plans'}</Text>
                         )}
 
                         {plans.map(renderPlanCard)}
@@ -1104,15 +1106,15 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 {/* Features Comparison */}
                 <View style={styles.section}>
-                    <Text style={[styles.sectionTitle, { color: textColor }]}>Why Go Premium?</Text>
+                    <Text style={[styles.sectionTitle, { color: textColor }]}>{t('premium.why') || 'Why Go Premium?'}</Text>
 
                     <View style={[styles.benefitsCard, { backgroundColor: secondaryBackgroundColor, borderColor }]}>
                         <View style={styles.benefitItem}>
                             <Ionicons name="flash" size={24} color={primaryColor} />
                             <View style={styles.benefitContent}>
-                                <Text style={[styles.benefitTitle, { color: textColor }]}>Enhanced Performance</Text>
+                                <Text style={[styles.benefitTitle, { color: textColor }]}>{t('premium.benefits.performance.title') || 'Enhanced Performance'}</Text>
                                 <Text style={[styles.benefitDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                    Faster processing and priority access to our servers
+                                    {t('premium.benefits.performance.desc') || 'Faster processing and priority access to our servers'}
                                 </Text>
                             </View>
                         </View>
@@ -1120,9 +1122,9 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         <View style={styles.benefitItem}>
                             <Ionicons name="shield-checkmark" size={24} color={successColor} />
                             <View style={styles.benefitContent}>
-                                <Text style={[styles.benefitTitle, { color: textColor }]}>Advanced Security</Text>
+                                <Text style={[styles.benefitTitle, { color: textColor }]}>{t('premium.benefits.security.title') || 'Advanced Security'}</Text>
                                 <Text style={[styles.benefitDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                    Enhanced encryption and security features
+                                    {t('premium.benefits.security.desc') || 'Enhanced encryption and security features'}
                                 </Text>
                             </View>
                         </View>
@@ -1130,9 +1132,9 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         <View style={styles.benefitItem}>
                             <Ionicons name="headset" size={24} color={warningColor} />
                             <View style={styles.benefitContent}>
-                                <Text style={[styles.benefitTitle, { color: textColor }]}>Priority Support</Text>
+                                <Text style={[styles.benefitTitle, { color: textColor }]}>{t('premium.benefits.support.title') || 'Priority Support'}</Text>
                                 <Text style={[styles.benefitDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                    Get help faster with our premium support team
+                                    {t('premium.benefits.support.desc') || 'Get help faster with our premium support team'}
                                 </Text>
                             </View>
                         </View>

package/src/ui/screens/ProfileScreen.tsx

@@ -8,6 +8,7 @@ import Avatar from '../components/Avatar';
 import { FollowButton } from '../components';
 import { useFollow } from '../hooks/useFollow';
 import { Ionicons } from '@expo/vector-icons';
+import { useI18n } from '../hooks/useI18n';
 
 interface ProfileScreenProps extends BaseScreenProps {
     userId: string;
@@ -42,6 +43,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
 
     const colors = useThemeColors(theme);
     const styles = createStyles(colors);
+    const { t } = useI18n();
 
     // Check if current user is viewing their own profile
     const isOwnProfile = currentUser && currentUser.id === userId;
@@ -205,7 +207,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                                 style={styles.actionButton}
                                 onPress={() => navigate?.('EditProfile')}
                             >
-                                <Text style={styles.actionButtonText}>Edit Profile</Text>
+                                <Text style={styles.actionButtonText}>{t('editProfile.title') || 'Edit Profile'}</Text>
                             </TouchableOpacity>
                         ) : (
                             <FollowButton
@@ -226,14 +228,16 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                         <Text style={[styles.subText, { color: colors.secondaryText }]}>@{profile.username}</Text>
                     )}
                     {/* Bio placeholder */}
-                    <Text style={[styles.bio, { color: colors.text }]}>{profile?.bio || 'This user has no bio yet.'}</Text>
+                    <Text style={[styles.bio, { color: colors.text }]}>{profile?.bio || (t('profile.noBio') || 'This user has no bio yet.')}</Text>
 
                     {/* Info Grid Row */}
                     <View style={styles.infoGrid}>
                         {profile?.createdAt && (
                             <View style={styles.infoGridItem}>
                                 <Ionicons name="calendar-outline" size={16} color={colors.secondaryText} style={{ marginRight: 6 }} />
-                                <Text style={[styles.infoGridText, { color: colors.secondaryText }]}>Joined {new Date(profile.createdAt).toLocaleDateString()}</Text>
+                                <Text style={[styles.infoGridText, { color: colors.secondaryText }]}>
+                                    {t('profile.joinedOn', { date: new Date(profile.createdAt).toLocaleDateString() }) || `Joined ${new Date(profile.createdAt).toLocaleDateString()}`}
+                                </Text>
                             </View>
                         )}
                         {profile?.location && (
@@ -269,7 +273,9 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                         {profile?.birthday && (
                             <View style={styles.infoGridItem}>
                                 <Ionicons name="gift-outline" size={16} color={colors.secondaryText} style={{ marginRight: 6 }} />
-                                <Text style={[styles.infoGridText, { color: colors.secondaryText }]}>Born {new Date(profile.birthday).toLocaleDateString()}</Text>
+                                <Text style={[styles.infoGridText, { color: colors.secondaryText }]}>
+                                    {t('profile.bornOn', { date: new Date(profile.birthday).toLocaleDateString() }) || `Born ${new Date(profile.birthday).toLocaleDateString()}`}
+                                </Text>
                             </View>
                         )}
                         {links.length > 0 && (
@@ -283,7 +289,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                                 </Text>
                                 {links.length > 1 && (
                                     <Text style={[styles.linksMore, { color: colors.secondaryText }]}>
-                                        + {links.length - 1} more
+                                        {t('profile.more', { count: links.length - 1 }) || `+ ${links.length - 1} more`}
                                     </Text>
                                 )}
                             </TouchableOpacity>
@@ -295,7 +301,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                     <View style={styles.statsRow}>
                         <View style={styles.statItem}>
                             <Text style={[styles.karmaAmount, { color: colors.primary }]}>{karmaTotal !== null && karmaTotal !== undefined ? karmaTotal : '--'}</Text>
-                            <Text style={[styles.karmaLabel, { color: colors.secondaryText }]}>Karma</Text>
+                            <Text style={[styles.karmaLabel, { color: colors.secondaryText }]}>{t('profile.karma') || 'Karma'}</Text>
                         </View>
                         <View style={styles.statItem}>
                             {isLoadingCounts ? (
@@ -303,7 +309,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                             ) : (
                                 <Text style={[styles.karmaAmount, { color: colors.text }]}>{followerCount !== null ? followerCount : '--'}</Text>
                             )}
-                            <Text style={[styles.karmaLabel, { color: colors.secondaryText }]}>Followers</Text>
+                            <Text style={[styles.karmaLabel, { color: colors.secondaryText }]}>{t('profile.followers') || 'Followers'}</Text>
                         </View>
                         <View style={styles.statItem}>
                             {isLoadingCounts ? (
@@ -311,7 +317,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                             ) : (
                                 <Text style={[styles.karmaAmount, { color: colors.text }]}>{followingCount !== null ? followingCount : '--'}</Text>
                             )}
-                            <Text style={[styles.karmaLabel, { color: colors.secondaryText }]}>Following</Text>
+                            <Text style={[styles.karmaLabel, { color: colors.secondaryText }]}>{t('profile.following') || 'Following'}</Text>
                         </View>
                     </View>
                 </View>

package/src/ui/screens/RecoverAccountScreen.tsx

@@ -1,11 +1,13 @@
 import type React from 'react';
 import { useState, useRef, useCallback } from 'react';
+import { useI18n } from '../hooks/useI18n';
 import type { BaseScreenProps } from '../navigation/types';
 import { useThemeColors } from '../styles';
 import StepBasedScreen, { type StepConfig } from '../components/StepBasedScreen';
 import RecoverRequestStep from './steps/RecoverRequestStep';
 import RecoverVerifyStep from './steps/RecoverVerifyStep';
 import RecoverSuccessStep from './steps/RecoverSuccessStep';
+import RecoverResetPasswordStep from './steps/RecoverResetPasswordStep';
 
 // Constants
 const PIN_LENGTH = 6;
@@ -18,10 +20,13 @@ const RecoverAccountScreen: React.FC<BaseScreenProps> = ({
     oxyServices,
 }) => {
     const colors = useThemeColors(theme);
+    const { t } = useI18n();
 
     // Form state
     const [identifier, setIdentifier] = useState('');
     const [verificationCode, setVerificationCode] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const [errorMessage, setErrorMessage] = useState('');
     const [successMessage, setSuccessMessage] = useState('');
@@ -48,20 +53,21 @@ const RecoverAccountScreen: React.FC<BaseScreenProps> = ({
             component: RecoverVerifyStep,
             canProceed: () => verificationCode.length === PIN_LENGTH,
             onEnter: () => {
-                // Simulate sending verification code
-                setIsLoading(true);
-                setTimeout(() => {
-                    setIsLoading(false);
-                    setSuccessMessage('A 6-digit code has been sent to your email or phone.');
-                }, 1000);
+                setIsLoading(false);
+                setSuccessMessage(t('recover.enterCode'));
             },
         },
+        {
+            id: 'reset',
+            component: RecoverResetPasswordStep,
+            canProceed: () => true,
+        },
         {
             id: 'success',
             component: RecoverSuccessStep,
             canProceed: () => true,
             onEnter: () => {
-                setSuccessMessage('Your account has been verified! You can now reset your password.');
+                setSuccessMessage(t('recover.resetSuccess'));
             },
         },
     ];
@@ -93,6 +99,21 @@ const RecoverAccountScreen: React.FC<BaseScreenProps> = ({
             setSuccessMessage,
             isLoading,
             setIsLoading,
+            identifier,
+        },
+        // Reset step
+        {
+            identifier,
+            verificationCode,
+            password,
+            confirmPassword,
+            setPassword,
+            setConfirmPassword,
+            errorMessage,
+            setErrorMessage,
+            isLoading,
+            setIsLoading,
+            oxyServices,
         },
         // Success step
         {
@@ -117,4 +138,4 @@ const RecoverAccountScreen: React.FC<BaseScreenProps> = ({
 
 
 
-export default RecoverAccountScreen; 
+export default RecoverAccountScreen;