@oxyhq/services 5.11.12 → 5.12.1

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -13,12 +13,13 @@ import { useOxy } from '../context/OxyContext';
 import { useThemeColors } from '../styles';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
-import { Header, GroupedSection } from '../components';
+import { Header, Section, GroupedSection } from '../components';
+import { useI18n } from '../hooks/useI18n';
 
 // Supported languages with their metadata
 const SUPPORTED_LANGUAGES = [
     {
-        id: 'en',
+        id: 'en-US',
         name: 'English',
         nativeName: 'English',
         flag: '🇺🇸',
@@ -26,7 +27,7 @@ const SUPPORTED_LANGUAGES = [
         color: '#007AFF',
     },
     {
-        id: 'es',
+        id: 'es-ES',
         name: 'Spanish',
         nativeName: 'Español',
         flag: '🇪🇸',
@@ -34,7 +35,15 @@ const SUPPORTED_LANGUAGES = [
         color: '#FF3B30',
     },
     {
-        id: 'fr',
+        id: 'ca-ES',
+        name: 'Catalan',
+        nativeName: 'Català',
+        flag: '🇪🇸',
+        icon: 'language-outline',
+        color: '#0CA678',
+    },
+    {
+        id: 'fr-FR',
         name: 'French',
         nativeName: 'Français',
         flag: '🇫🇷',
@@ -42,7 +51,7 @@ const SUPPORTED_LANGUAGES = [
         color: '#5856D6',
     },
     {
-        id: 'de',
+        id: 'de-DE',
         name: 'German',
         nativeName: 'Deutsch',
         flag: '🇩🇪',
@@ -50,7 +59,7 @@ const SUPPORTED_LANGUAGES = [
         color: '#FF9500',
     },
     {
-        id: 'it',
+        id: 'it-IT',
         name: 'Italian',
         nativeName: 'Italiano',
         flag: '🇮🇹',
@@ -58,7 +67,7 @@ const SUPPORTED_LANGUAGES = [
         color: '#34C759',
     },
     {
-        id: 'pt',
+        id: 'pt-PT',
         name: 'Portuguese',
         nativeName: 'Português',
         flag: '🇵🇹',
@@ -66,7 +75,7 @@ const SUPPORTED_LANGUAGES = [
         color: '#AF52DE',
     },
     {
-        id: 'ja',
+        id: 'ja-JP',
         name: 'Japanese',
         nativeName: '日本語',
         flag: '🇯🇵',
@@ -74,7 +83,7 @@ const SUPPORTED_LANGUAGES = [
         color: '#FF2D92',
     },
     {
-        id: 'ko',
+        id: 'ko-KR',
         name: 'Korean',
         nativeName: '한국어',
         flag: '🇰🇷',
@@ -82,7 +91,7 @@ const SUPPORTED_LANGUAGES = [
         color: '#32D74B',
     },
     {
-        id: 'zh',
+        id: 'zh-CN',
         name: 'Chinese',
         nativeName: '中文',
         flag: '🇨🇳',
@@ -90,7 +99,7 @@ const SUPPORTED_LANGUAGES = [
         color: '#FF9F0A',
     },
     {
-        id: 'ar',
+        id: 'ar-SA',
         name: 'Arabic',
         nativeName: 'العربية',
         flag: '🇸🇦',
@@ -103,10 +112,12 @@ interface LanguageSelectorScreenProps extends BaseScreenProps { }
 
 const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
     goBack,
+    onClose,
     theme,
     navigate,
 }) => {
-    const { user, currentLanguage, setLanguage } = useOxy();
+    const { user, currentLanguage, setLanguage, oxyServices, isAuthenticated } = useOxy();
+    const { t } = useI18n();
     const colors = useThemeColors(theme);
     const [isLoading, setIsLoading] = useState(false);
 
@@ -118,14 +129,24 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
         setIsLoading(true);
 
         try {
-            // Use OxyContext to set language (this handles storage and app-wide updates)
+            // If signed in, persist preference to backend user settings
+            if (isAuthenticated && user?.id) {
+                try {
+                    await oxyServices.updateProfile({ language: languageId });
+                } catch (e: any) {
+                    console.warn('Failed to update language on server, falling back to local storage', e);
+                }
+            }
+
+            // Always persist locally for immediate UX and for guests
             await setLanguage(languageId);
 
             const selectedLang = SUPPORTED_LANGUAGES.find(lang => lang.id === languageId);
-            toast.success(`Language changed to ${selectedLang?.name || languageId}`);
+            toast.success(t('language.changed', { lang: selectedLang?.name || languageId }));
 
             setIsLoading(false);
-            goBack();
+            // Close the bottom sheet if possible; otherwise, go back
+            if (onClose) onClose(); else goBack();
 
         } catch (error) {
             console.error('Error saving language preference:', error);
@@ -139,46 +160,76 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
         id: language.id,
         title: language.name,
         subtitle: language.nativeName,
-        icon: language.icon,
-        iconColor: language.color,
-        selected: currentLanguage === language.id,
-        onPress: () => handleLanguageSelect(language.id),
-        customContent: (
-            <View style={styles.languageFlag}>
+        customIcon: (
+            <View style={[styles.languageFlag, { backgroundColor: `${language.color}20` }]}>
                 <Text style={styles.flagEmoji}>{language.flag}</Text>
             </View>
         ),
+        iconColor: language.color,
+        selected: currentLanguage === language.id,
+        onPress: () => handleLanguageSelect(language.id),
+        dense: true,
     }));
 
     return (
-        <View style={[styles.container, { backgroundColor: colors.background }]}>
+        <View style={[styles.container, { backgroundColor: '#f2f2f2' }]}>
             <Header
-                title="Language"
-                subtitle="Choose your preferred language"
+                title={t('language.title')}
+                subtitle={t('language.subtitle')}
                 theme={theme}
-                onBack={goBack}
+                onBack={onClose || goBack}
+                variant="minimal"
                 elevation="subtle"
             />
 
             <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-                <View style={styles.section}>
-                    <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
-                        Available Languages
-                    </Text>
+                {/* Current selection */}
+                {currentLanguage && (
+                    <Section title={t('language.current')} theme={theme} isFirst={true}>
+                        {(() => {
+                            const current = SUPPORTED_LANGUAGES.find(lang => lang.id === currentLanguage);
+                            if (!current) return null;
+                            return (
+                                <GroupedSection
+                                    items={[
+                                        {
+                                            id: `current-${current.id}`,
+                                            title: current.name,
+                                            subtitle: current.nativeName,
+                                            customIcon: (
+                                                <View style={[styles.languageFlag, { backgroundColor: `${current.color}20` }]}>
+                                                    <Text style={styles.flagEmoji}>{current.flag}</Text>
+                                                </View>
+                                            ),
+                                            iconColor: current.color,
+                                            selected: false,
+                                            showChevron: false,
+                                            dense: true,
+                                            disabled: true,
+                                        },
+                                    ]}
+                                    theme={theme}
+                                />
+                            );
+                        })()}
+                    </Section>
+                )}
+
+                {/* Available languages */}
+                <Section title={t('language.available')} theme={theme}>
                     <Text style={[styles.sectionDescription, { color: colors.secondaryText }]}>
-                        Select your preferred language. Changes will be applied across the entire application.
+                        {t('language.subtitle')}
                     </Text>
-
                     <View style={styles.languageList}>
                         <GroupedSection
                             items={languageItems}
                             theme={theme}
                         />
                     </View>
-                </View>
+                </Section>
 
-                {/* Information section */}
-                <View style={styles.infoSection}>
+                {/* Information */}
+                <Section theme={theme}>
                     <View style={[styles.infoCard, {
                         backgroundColor: colors.inputBackground,
                         borderColor: colors.border
@@ -196,38 +247,7 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
                             • You can change this setting anytime
                         </Text>
                     </View>
-                </View>
-
-                {/* Current selection indicator */}
-                {currentLanguage && (
-                    <View style={styles.currentSection}>
-                        <Text style={[styles.currentLabel, { color: colors.secondaryText }]}>
-                            Current Language
-                        </Text>
-                        <View style={[styles.currentLanguage, {
-                            backgroundColor: colors.inputBackground,
-                            borderColor: colors.primary
-                        }]}>
-                            {(() => {
-                                const current = SUPPORTED_LANGUAGES.find(lang => lang.id === currentLanguage);
-                                return current ? (
-                                    <>
-                                        <Text style={styles.currentFlag}>{current.flag}</Text>
-                                        <View style={styles.currentInfo}>
-                                            <Text style={[styles.currentName, { color: colors.text }]}>
-                                                {current.name}
-                                            </Text>
-                                            <Text style={[styles.currentNative, { color: colors.secondaryText }]}>
-                                                {current.nativeName}
-                                            </Text>
-                                        </View>
-                                        <Ionicons name="checkmark-circle" size={20} color={colors.primary} />
-                                    </>
-                                ) : null;
-                            })()}
-                        </View>
-                    </View>
-                )}
+                </Section>
             </ScrollView>
         </View>
     );
@@ -258,12 +278,14 @@ const styles = StyleSheet.create({
         marginTop: 8,
     },
     languageFlag: {
+        width: 38,
+        height: 38,
+        borderRadius: 19,
         alignItems: 'center',
         justifyContent: 'center',
-        marginRight: 8,
     },
     flagEmoji: {
-        fontSize: 24,
+        fontSize: 18,
     },
     infoSection: {
         marginBottom: 24,
@@ -303,9 +325,16 @@ const styles = StyleSheet.create({
         borderWidth: 2,
     },
     currentFlag: {
-        fontSize: 24,
+        width: 38,
+        height: 38,
+        borderRadius: 19,
+        alignItems: 'center',
+        justifyContent: 'center',
         marginRight: 12,
     },
+    currentFlagEmoji: {
+        fontSize: 18,
+    },
     currentInfo: {
         flex: 1,
     },
@@ -319,4 +348,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default LanguageSelectorScreen;
+export default LanguageSelectorScreen;

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -280,7 +280,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         if (onPaymentResult) {
             onPaymentResult({ success: true });
         }
-        navigate('AccountOverviewScreen');
+        navigate('AccountOverview');
     }, [onPaymentResult, navigate]);
 
     // Handle close/cancel: return failure result if payment is not completed
@@ -343,14 +343,14 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         RNIap.initConnection()
             .then(() => RNIap.getProducts({ skus: IAP_PRODUCT_IDS }))
             .then(setIapProducts)
-            .catch(e => setIapError(e.message))
+            .catch((e: any) => setIapError(e.message))
             .finally(() => setIapLoading(false));
-        purchaseUpdateSub = RNIap.purchaseUpdatedListener((purchase) => {
+        purchaseUpdateSub = RNIap.purchaseUpdatedListener((purchase: any) => {
             setIapPurchase(purchase);
             setSuccess(true);
             nextStep();
         });
-        purchaseErrorSub = RNIap.purchaseErrorListener((err) => {
+        purchaseErrorSub = RNIap.purchaseErrorListener((err: any) => {
             setIapError(err.message);
         });
         return () => {
@@ -1616,4 +1616,4 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
     },
 });
 
-export default PaymentGatewayScreen; 
+export default PaymentGatewayScreen;