@oxy.so/services 11.13.0 → 11.15.0

package/src/ui/screens/HelpSupportScreen.tsx

@@ -1,15 +1,17 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useContext } from 'react';
 import { View, Linking } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxy.so/bloom/toast';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
+import { OxySupportContext } from '../context/oxySupportContext';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
-const HelpSupportScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
+const HelpSupportScreen: React.FC<BaseScreenProps> = ({ navigate }) => {
   const { t } = useI18n();
+  const { onAskAlia, documentationUrl, aliaAvatar } = useContext(OxySupportContext);
 
   useSurfaceHeader({ title: t('help.title') || 'Help & Support' });
   const bloomTheme = useTheme();
@@ -23,27 +25,18 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     [t],
   );
 
-  const handleReportBug = useMemo(
-    () => () => {
-      Linking.openURL('mailto:bugs@oxy.so?subject=Bug Report').catch(() => {
-        toast.error(t('help.reportError') || 'Failed to open email client');
-      });
-    },
-    [t],
-  );
-
   const handleDocumentation = useMemo(
     () => () => {
-      Linking.openURL('https://developer.oxy.so/docs').catch(() => {
+      Linking.openURL(documentationUrl ?? 'https://oxy.so/developers/docs/').catch(() => {
         toast.error(t('help.linkError') || 'Failed to open link');
       });
     },
-    [t],
+    [t, documentationUrl],
   );
 
   const handleCommunity = useMemo(
     () => () => {
-      Linking.openURL('https://community.oxy.so').catch(() => {
+      Linking.openURL('https://t.me/OxyHQInc').catch(() => {
         toast.error(t('help.linkError') || 'Failed to open link');
       });
     },
@@ -52,7 +45,7 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
 
   const handleDevelopersPortal = useMemo(
     () => () => {
-      Linking.openURL('https://developer.oxy.so').catch(() => {
+      Linking.openURL('https://oxy.so/developers/').catch(() => {
         toast.error(t('help.linkError') || 'Failed to open link');
       });
     },
@@ -60,49 +53,62 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
   );
 
   return (
-    <>
-      <View className="px-screen-margin pb-space-24">
-        {/* Help Options */}
-        <SettingsListGroup title={t('help.options') || 'Get Help'}>
-          <SettingsListItem
+    <View className="px-screen-margin pb-space-24">
+      {/* Help Options */}
+      <GroupedSection title={t('help.options') || 'Get Help'}>
+        {onAskAlia ? (
+          <GroupedSectionItem
+            icon={aliaAvatar ?? <SettingsIcon name="star" color={bloomTheme.colors.primary} />}
+            title={t('help.alia.title')}
+            description={t('help.alia.subtitle')}
+            onPress={async () => {
+              try {
+                await onAskAlia();
+              } catch {
+                toast.error(t('help.alia.openError'));
+              }
+            }}
+          />
+        ) : (
+          <GroupedSectionItem
             icon={<SettingsIcon name="email" color={bloomTheme.colors.success} />}
             title={t('help.contact.title') || 'Contact Support'}
             description={t('help.contact.subtitle') || 'Get help from our support team'}
             onPress={handleContactSupport}
           />
-          <SettingsListItem
-            icon={<SettingsIcon name="bug" color={bloomTheme.colors.warning} />}
-            title={t('help.reportBug.title') || 'Report a Bug'}
-            description={t('help.reportBug.subtitle') || 'Help us improve by reporting issues'}
-            onPress={handleReportBug}
-          />
-        </SettingsListGroup>
+        )}
+        <GroupedSectionItem
+          icon={<SettingsIcon name="bug" color={bloomTheme.colors.warning} />}
+          title={t('help.reportBug.title') || 'Report a Bug'}
+          description={t('help.reportBug.subtitle') || 'Help us improve by reporting issues'}
+          onPress={() => navigate?.('ReportBug')}
+        />
+      </GroupedSection>
 
-        {/* Resources */}
-        <SettingsListGroup title={t('help.resources') || 'Resources'}>
-          <SettingsListItem
-            icon={<SettingsIcon name="file-document" color={bloomTheme.colors.textTertiary} />}
-            title={t('help.documentation.title') || 'Documentation'}
-            description={t('help.documentation.subtitle') || 'User guides and tutorials'}
-            onPress={handleDocumentation}
-          />
-          <SettingsListItem
-            icon={<SettingsIcon name="account-group" color={bloomTheme.colors.secondary} />}
-            title={t('help.community.title') || 'Community'}
-            description={t('help.community.subtitle') || 'Join our community'}
-            onPress={handleCommunity}
-          />
-          <SettingsListItem
-            icon={<SettingsIcon name="code-tags" color={bloomTheme.colors.error} />}
-            title={t('help.developersPortal.title') || 'Developers Portal'}
-            description={
-              t('help.developersPortal.subtitle') || 'API documentation and developer resources'
-            }
-            onPress={handleDevelopersPortal}
-          />
-        </SettingsListGroup>
-      </View>
-    </>
+      {/* Resources */}
+      <GroupedSection title={t('help.resources') || 'Resources'}>
+        <GroupedSectionItem
+          icon={<SettingsIcon name="file-document" color={bloomTheme.colors.textTertiary} />}
+          title={t('help.documentation.title') || 'Documentation'}
+          description={t('help.documentation.subtitle') || 'User guides and tutorials'}
+          onPress={handleDocumentation}
+        />
+        <GroupedSectionItem
+          icon={<SettingsIcon name="account-group" color={bloomTheme.colors.secondary} />}
+          title={t('help.community.title') || 'Community'}
+          description={t('help.community.subtitle') || 'Join our community'}
+          onPress={handleCommunity}
+        />
+        <GroupedSectionItem
+          icon={<SettingsIcon name="code-tags" color={bloomTheme.colors.error} />}
+          title={t('help.developersPortal.title') || 'Developers Portal'}
+          description={
+            t('help.developersPortal.subtitle') || 'API documentation and developer resources'
+          }
+          onPress={handleDevelopersPortal}
+        />
+      </GroupedSection>
+    </View>
   );
 };
 

package/src/ui/screens/HistoryViewScreen.tsx

@@ -2,14 +2,13 @@ import React, { useState, useCallback } from 'react';
 import { View } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxy.so/bloom/toast';
-import { Loading } from '@oxy.so/bloom/loading';
 import { Text } from '@oxy.so/bloom/typography';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { surfaces } from '@oxy.so/bloom/surfaces';
 import { createPlatformStorage } from '../utils/storageHelpers';
 
@@ -114,8 +113,8 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
   return (
     <>
       <View className="px-screen-margin pb-space-24">
-        <SettingsListGroup title={t('history.actions') || 'Actions'}>
-          <SettingsListItem
+        <GroupedSection title={t('history.actions') || 'Actions'}>
+          <GroupedSectionItem
             icon={<SettingsIcon name="clock-outline" color={bloomTheme.colors.warning} />}
             title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'}
             description={
@@ -124,28 +123,22 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
             onPress={handleDeleteLast15Minutes}
             disabled={isDeleting || history.length === 0}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="delete-outline" color={bloomTheme.colors.error} />}
             title={t('history.clearAll.title') || 'Clear All History'}
             description={t('history.clearAll.subtitle') || 'Remove all history entries'}
             onPress={handleClearAll}
             disabled={isDeleting || history.length === 0}
           />
-        </SettingsListGroup>
-        <SettingsListGroup title={t('history.recent') || 'Recent History'}>
-          {isLoading ? (
-            <Loading
-              size="lg"
-              color={bloomTheme.colors.text}
-              text={t('history.loading') || 'Loading history...'}
-            />
-          ) : history.length === 0 ? (
+        </GroupedSection>
+        <GroupedSection title={t('history.recent') || 'Recent History'}>
+          {isLoading ? null : history.length === 0 ? (
             <Text className="text-text-secondary text-center p-space-40">
               {t('history.empty') || 'No history yet'}
             </Text>
           ) : (
             history.map((item) => (
-              <SettingsListItem
+              <GroupedSectionItem
                 key={item.id}
                 icon={
                   <SettingsIcon
@@ -160,7 +153,7 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
               />
             ))
           )}
-        </SettingsListGroup>
+        </GroupedSection>
       </View>
     </>
   );

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -7,18 +7,19 @@ import Ionicons from '../icons/Ionicons';
 import { toast } from '@oxy.so/bloom/toast';
 import { Text } from '@oxy.so/bloom/typography';
 import { Search } from '@oxy.so/bloom/search';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { CountryFlag } from '@oxy.so/bloom/phone-input';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { SUPPORTED_LANGUAGES, getNativeLanguageName, type SupportedLanguage } from '@oxy.so/core';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { addLocale, removeLocale, setPrimaryLocale } from '../hooks/useLanguageManagement';
 import { useUpdateProfile } from '../hooks/mutations/useAccountMutations';
 
 interface LanguageSelectorScreenProps extends BaseScreenProps {}
 
-// Size (in dp) of the circular chip rendered as each row's leading icon.
-const CHIP_SIZE = 40;
+// Stable leading slot keeps all locale rows aligned.
+const FLAG_SLOT_SIZE = 40;
 // Trailing remove-affordance icon size (dp).
 const REMOVE_ICON_SIZE = 24;
 
@@ -33,10 +34,10 @@ const CATALOG_BY_CODE: ReadonlyMap<string, SupportedLanguage> = new Map(
  * The user picks one or more locales; the FIRST (primary) drives the app's UI
  * language. When signed in the ordered selection is persisted to the account
  * (`updateProfile({ languages })`, primary first) and every Oxy app follows it;
- * when signed out a single local override is stored on-device.
+ * when signed out the ordered selection is stored on-device.
  */
 const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
-  const { user, isAuthenticated, currentLanguage, currentLanguages, setLanguage } = useOxy();
+  const { user, isAuthenticated, currentLanguage, currentLanguages, setLanguages } = useOxy();
   const { t } = useI18n();
   const bloomTheme = useTheme();
   const updateProfile = useUpdateProfile();
@@ -86,7 +87,7 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
   const isBusy = isSubmitting || updateProfile.isPending;
 
   // Persist the next ordered selection. Signed-in accounts write the full
-  // ordered array; guests store only the primary locally.
+  // ordered array; guests persist the same ordered selection locally.
   const commitSelection = useCallback(
     async (next: string[], announceCode: string): Promise<void> => {
       if (isBusy || next.length === 0) {
@@ -95,9 +96,16 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
       setIsSubmitting(true);
       try {
         if (isAuthenticated && user?.id) {
-          await updateProfile.mutateAsync({ languages: next });
+          const saved = await updateProfile.mutateAsync({ languages: next });
+          if (
+            saved.languages?.length !== next.length ||
+            next.some((locale, index) => saved.languages?.[index] !== locale)
+          ) {
+            toast.error(t('language.saveFailed'));
+            return;
+          }
         } else {
-          await setLanguage(next[0]);
+          await setLanguages(next);
         }
         toast.success(t('language.changed', { lang: getNativeLanguageName(announceCode) }));
       } catch (error) {
@@ -113,17 +121,16 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
         setIsSubmitting(false);
       }
     },
-    [isAuthenticated, user?.id, updateProfile, setLanguage, t, isBusy],
+    [isAuthenticated, user?.id, updateProfile, setLanguages, t, isBusy],
   );
 
-  // Adding a locale: signed-in appends (non-primary); a guest can only hold a
-  // single locale, so the tapped locale becomes their primary.
+  // Adding appends a locale; choosing a selected row makes it primary.
   const handleAdd = useCallback(
     (code: string) => {
-      const next = isAuthenticated && user?.id ? addLocale(selected, code) : [code];
+      const next = addLocale(selected, code);
       void commitSelection(next, code);
     },
-    [isAuthenticated, user?.id, selected, commitSelection],
+    [selected, commitSelection],
   );
 
   const handleSetPrimary = useCallback(
@@ -148,11 +155,9 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
     [selected, commitSelection],
   );
 
-  const renderChip = (entry: SupportedLanguage) => (
-    <View className="bg-fill-secondary items-center justify-center" style={styles.chip}>
-      <Text className="text-text-secondary" style={styles.chipLabel}>
-        {entry.language.toUpperCase()}
-      </Text>
+  const renderFlag = (entry: SupportedLanguage) => (
+    <View style={styles.flagSlot}>
+      <CountryFlag iso2={entry.region} size={28} />
     </View>
   );
 
@@ -168,14 +173,14 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
       </View>
 
       {/* Selected locales — ordered, primary first. */}
-      <SettingsListGroup title={t('language.selected')}>
+      <GroupedSection title={t('language.selected')}>
         {selectedEntries.map((entry, index) => {
           const isPrimary = index === 0;
           const canRemove = selected.length > 1;
           return (
-            <SettingsListItem
+            <GroupedSectionItem
               key={entry.code}
-              icon={renderChip(entry)}
+              icon={renderFlag(entry)}
               title={entry.nativeName}
               description={entry.name}
               onPress={isPrimary ? undefined : () => handleSetPrimary(entry.code)}
@@ -214,14 +219,14 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
             />
           );
         })}
-      </SettingsListGroup>
+      </GroupedSection>
 
       {/* Available locales. */}
-      <SettingsListGroup title={t('language.available')}>
+      <GroupedSection title={t('language.available')}>
         {availableEntries.map((entry) => (
-          <SettingsListItem
+          <GroupedSectionItem
             key={entry.code}
-            icon={renderChip(entry)}
+            icon={renderFlag(entry)}
             title={entry.nativeName}
             description={entry.name}
             onPress={() => handleAdd(entry.code)}
@@ -237,21 +242,18 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
             showChevron={false}
           />
         ))}
-      </SettingsListGroup>
+      </GroupedSection>
     </View>
   );
 };
 
 // StyleSheet retained ONLY for measured layout (sizes / line metrics) — no colors.
 const styles = StyleSheet.create({
-  chip: {
-    width: CHIP_SIZE,
-    height: CHIP_SIZE,
-    borderRadius: CHIP_SIZE / 2,
-  },
-  chipLabel: {
-    fontSize: 13,
-    fontWeight: '600',
+  flagSlot: {
+    width: FLAG_SLOT_SIZE,
+    height: FLAG_SLOT_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   primaryBadge: {
     fontSize: 12,

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -2,11 +2,10 @@ import React, { useState, useCallback } from 'react';
 import { View, Linking } from 'react-native';
 import { toast } from '@oxy.so/bloom/toast';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { logger } from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
-import { Loading } from '@oxy.so/bloom/loading';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 
@@ -100,35 +99,26 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, init
   });
 
   // Deep-link entry: show loading state while the document opens.
-  if (documentType) {
-    return (
-      <Loading
-        size="lg"
-        color={bloomTheme.colors.text}
-        text={t('legal.opening') || 'Opening document...'}
-      />
-    );
-  }
 
   // Default: show the full list of policies & guidelines.
   return (
     <View className="px-screen-margin py-space-16">
-      <SettingsListGroup title={t('legal.policies') || 'Policies & Guidelines'}>
-        <SettingsListItem
+      <GroupedSection title={t('legal.policies') || 'Policies & Guidelines'}>
+        <GroupedSectionItem
           icon={<SettingsIcon name="shield-check" color={bloomTheme.colors.success} />}
           title={t('legal.privacyPolicy.title') || 'Privacy Policy'}
           description={t('legal.privacyPolicy.subtitle') || 'How we handle your data'}
           onPress={handleOpenPolicy('privacy')}
           disabled={loading}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="file-document" color={bloomTheme.colors.primary} />}
           title={t('legal.termsOfService.title') || 'Terms of Service'}
           description={t('legal.termsOfService.subtitle') || 'Terms and conditions of use'}
           onPress={handleOpenPolicy('terms')}
           disabled={loading}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="account-group" color={bloomTheme.colors.secondary} />}
           title={t('legal.communityGuidelines.title') || 'Community Guidelines'}
           description={
@@ -137,28 +127,28 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, init
           onPress={handleOpenPolicy('community')}
           disabled={loading}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="clock" color={bloomTheme.colors.warning} />}
           title={t('legal.dataRetention.title') || 'Data Retention Policy'}
           description={t('legal.dataRetention.subtitle') || 'How long we keep your data'}
           onPress={handleOpenPolicy('dataRetention')}
           disabled={loading}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="eye" color={bloomTheme.colors.info} />}
           title={t('legal.contentModeration.title') || 'Content Moderation Policy'}
           description={t('legal.contentModeration.subtitle') || 'How we moderate content'}
           onPress={handleOpenPolicy('contentModeration')}
           disabled={loading}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="heart" color={bloomTheme.colors.error} />}
           title={t('legal.childSafety.title') || 'Child Safety Policy'}
           description={t('legal.childSafety.subtitle') || 'Protecting minors on our platform'}
           onPress={handleOpenPolicy('childSafety')}
           disabled={loading}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="cookie" color={bloomTheme.colors.textTertiary} />}
           title={t('legal.cookiePolicy.title') || 'Cookie Policy'}
           description={
@@ -167,7 +157,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, init
           onPress={handleOpenPolicy('cookie')}
           disabled={loading}
         />
-      </SettingsListGroup>
+      </GroupedSection>
     </View>
   );
 };