@oxyhq/services 6.9.44 → 6.9.46

package/src/ui/components/payment/PaymentSuccessStep.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { useMemo } from 'react';
 import { View, Text, Animated } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import GroupedPillButtons from '../internal/GroupedPillButtons';
+import { Button } from '@oxyhq/bloom/button';
 import { createPaymentStyles } from './paymentStyles';
 import type { PaymentColors, PaymentStepAnimations } from './types';
 import { useI18n } from '../../hooks/useI18n';
@@ -56,17 +56,9 @@ const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
                 </View>
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('payment.actions.done'),
-                        onPress: onDone,
-                        icon: 'checkmark',
-                        variant: 'primary',
-                    },
-                ]}
-                colors={colors}
-            />
+            <Button variant="primary" onPress={onDone} size="small" icon={<Ionicons name="checkmark" size={16} />} iconPosition="right">
+                {t('payment.actions.done')}
+            </Button>
         </Animated.View>
     );
 };

package/src/ui/components/payment/PaymentSummaryStep.tsx

@@ -2,8 +2,8 @@ import type React from 'react';
 import { useMemo } from 'react';
 import { View, Text, Animated } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { GroupedSection } from '../index';
-import GroupedPillButtons from '../internal/GroupedPillButtons';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { Button } from '@oxyhq/bloom/button';
 import { createPaymentStyles } from './paymentStyles';
 import { getCurrencySymbol, CURRENCY_SYMBOLS } from './constants';
 import type { PaymentItem, PaymentColors, PaymentStepAnimations } from './types';
@@ -81,20 +81,22 @@ const PaymentSummaryStep: React.FC<PaymentSummaryStepProps> = ({
                         {paymentItems.length > 0 ? (
                             <>
                                 <View style={styles.summaryCardItems}>
-                                    <GroupedSection
-                                        items={paymentItems.map((item, idx) => ({
-                                            id: `item-${idx}`,
-                                            icon: getItemTypeIcon(item.type),
-                                            iconColor: colors.primary,
-                                            title: `${item.type === 'product' && item.quantity ? `${item.quantity} × ` : ''}${item.name}${item.type === 'subscription' && item.period ? ` (${item.period})` : ''}`,
-                                            subtitle: item.description || `${item.currency ? (CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol} ${item.price * (item.quantity ?? 1)}`,
-                                            customContent: (
-                                                <Text style={styles.summaryItemPrice}>
-                                                    {item.currency ? (CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol} {item.price * (item.quantity ?? 1)}
-                                                </Text>
-                                            ),
-                                        }))}
-                                    />
+                                    <SettingsListGroup>
+                                        {paymentItems.map((item, idx) => (
+                                            <SettingsListItem
+                                                key={`item-${idx}`}
+                                                icon={<Ionicons name={getItemTypeIcon(item.type)} size={20} color={colors.primary} />}
+                                                title={`${item.type === 'product' && item.quantity ? `${item.quantity} \u00d7 ` : ''}${item.name}${item.type === 'subscription' && item.period ? ` (${item.period})` : ''}`}
+                                                description={item.description || `${item.currency ? (CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol} ${item.price * (item.quantity ?? 1)}`}
+                                                showChevron={false}
+                                                rightElement={
+                                                    <Text style={styles.summaryItemPrice}>
+                                                        {item.currency ? (CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol} {item.price * (item.quantity ?? 1)}
+                                                    </Text>
+                                                }
+                                            />
+                                        ))}
+                                    </SettingsListGroup>
                                 </View>
 
                                 <View style={styles.summaryCardDivider} />
@@ -138,23 +140,14 @@ const PaymentSummaryStep: React.FC<PaymentSummaryStepProps> = ({
                 </View>
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('payment.actions.close'),
-                        onPress: onClose,
-                        icon: 'close',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('payment.actions.continue'),
-                        onPress: onNext,
-                        icon: 'arrow-forward',
-                        variant: 'primary',
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                <Button variant="secondary" onPress={onClose} size="small" icon={<Ionicons name="close" size={16} />}>
+                    {t('payment.actions.close')}
+                </Button>
+                <Button variant="primary" onPress={onNext} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                    {t('payment.actions.continue')}
+                </Button>
+            </View>
         </Animated.View>
     );
 };

package/src/ui/constants/theme.ts

@@ -6,8 +6,8 @@
 
 import { Platform } from 'react-native';
 
-const tintColorLight = '#0a7ea4';
-const tintColorDark = '#fff';
+const tintColorLight = '#c46ede';
+const tintColorDark = '#d69ae8';
 
 export const Colors = {
   light: {

package/src/ui/context/hooks/useAuthOperations.ts

@@ -131,9 +131,10 @@ export const useAuthOperations = ({
           logger('Creating offline session');
         }
 
-        // Generate a local session ID using cryptographically secure randomness
-        const cryptoModule = 'expo-crypto';
-        const Crypto = await import(/* webpackIgnore: true */ cryptoModule);
+        // Generate a local session ID using cryptographically secure randomness.
+        // Literal-string import: Hermes/Metro require static strings, not variable
+        // expressions or webpackIgnore comments.
+        const Crypto = await import('expo-crypto');
         const localSessionId = `offline_${Crypto.getRandomUUID()}`;
         const localDeviceId = `device_${Crypto.getRandomUUID()}`;
         const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(); // 7 days

package/src/ui/screens/AccountCenterScreen.tsx

@@ -11,10 +11,10 @@ import { useCallback, useMemo } from 'react';
 import type { BaseScreenProps } from '../types/navigation';
 import { packageInfo } from '@oxyhq/core';
 import { toast } from '../../lib/sonner';
-import { confirmAction } from '../utils/confirmAction';
 import { fontFamilies } from '../styles/fonts';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import ProfileCard from '../components/ProfileCard';
-import Section from '../components/Section';
 import QuickActions from '../components/QuickActions';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
@@ -31,7 +31,6 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
-    // Use useOxy() hook for OxyContext values
     const { user, logout, isLoading, sessions, isAuthenticated, managedAccounts } = useOxy();
     const { t } = useI18n();
     const bloomTheme = useTheme();
@@ -39,8 +38,8 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     const normalizedTheme = normalizeTheme(theme);
     const dangerColor = bloomTheme.colors.error;
     const colors = Colors[normalizeColorScheme(colorScheme, normalizedTheme)];
+    const logoutPrompt = usePromptControl();
 
-    // Memoized logout handler - prevents unnecessary re-renders
     const handleLogout = useCallback(async () => {
         try {
             await logout();
@@ -55,14 +54,6 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
         }
     }, [logout, onClose, t]);
 
-    // Memoized confirm logout handler - prevents unnecessary re-renders
-    const confirmLogout = useCallback(() => {
-        confirmAction(
-            t('common.confirms.signOut') || 'Are you sure you want to sign out?',
-            handleLogout
-        );
-    }, [handleLogout, t]);
-
     if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
@@ -81,7 +72,6 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
 
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-            {/* Header with user profile */}
             {user && (
                 <ProfileCard
                     user={user}
@@ -93,8 +83,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
             )}
 
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
-                {/* Quick Actions */}
-                <Section title={t('accountCenter.sections.quickActions') || 'Quick Actions'} isFirst={true}>
+                <SettingsListGroup title={t('accountCenter.sections.quickActions') || 'Quick Actions'}>
                     <QuickActions
                         theme={normalizedTheme}
                         actions={useMemo(() => [
@@ -105,144 +94,58 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: colors.iconPersonalInfo, title: t('accountCenter.quickActions.billing') || 'Billing', onPress: () => navigate?.('PaymentGateway') }] : []),
                             ...(sessions && sessions.length > 1 ? [{ id: 'switch', icon: 'swap-horizontal', iconColor: colors.iconStorage, title: t('accountCenter.quickActions.switch') || 'Switch', onPress: () => navigate?.('AccountSwitcher') }] : []),
                         ], [user?.isPremium, sessions, navigate, t, colors])}
-
                     />
-                </Section>
+                </SettingsListGroup>
 
-                {/* Account Management */}
                 <SettingsListGroup title={t('accountCenter.sections.accountManagement') || 'Account Management'}>
-                    <SettingsListItem
-                        icon={<SettingsIcon name="account-circle" color={colors.iconSecurity} />}
-                        title={t('accountCenter.items.accountOverview.title') || 'Account Overview'}
-                        description={t('accountCenter.items.accountOverview.subtitle') || 'Complete account information'}
-                        onPress={() => navigate?.('AccountOverview')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="cog" color={colors.iconData} />}
-                        title={t('accountCenter.items.editProfile.title') || 'Edit Profile'}
-                        description={t('accountCenter.items.editProfile.subtitle') || 'Manage your profile and preferences'}
-                        onPress={() => navigate?.('AccountSettings')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="shield-check" color={colors.iconSecurity} />}
-                        title={t('accountCenter.items.manageSessions.title') || 'Manage Sessions'}
-                        description={t('accountCenter.items.manageSessions.subtitle') || 'Security and active devices'}
-                        onPress={() => navigate?.('SessionManagement')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="folder" color={colors.iconStorage} />}
-                        title={t('accountCenter.items.fileManagement.title') || 'File Management'}
-                        description={t('accountCenter.items.fileManagement.subtitle') || 'Upload, download, and manage your files'}
-                        onPress={() => navigate?.('FileManagement')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="star" color={colors.iconPayments} />}
-                        title={t('accountCenter.items.premium.title') || 'Oxy+ Subscriptions'}
-                        description={user?.isPremium ? (t('accountCenter.items.premium.manage') || 'Manage your premium plan') : (t('accountCenter.items.premium.upgrade') || 'Upgrade to premium features')}
-                        onPress={() => navigate?.('PremiumSubscription')}
-                    />
+                    <SettingsListItem icon={<SettingsIcon name="account-circle" color={colors.iconSecurity} />} title={t('accountCenter.items.accountOverview.title') || 'Account Overview'} description={t('accountCenter.items.accountOverview.subtitle') || 'Complete account information'} onPress={() => navigate?.('AccountOverview')} />
+                    <SettingsListItem icon={<SettingsIcon name="cog" color={colors.iconData} />} title={t('accountCenter.items.editProfile.title') || 'Edit Profile'} description={t('accountCenter.items.editProfile.subtitle') || 'Manage your profile and preferences'} onPress={() => navigate?.('AccountSettings')} />
+                    <SettingsListItem icon={<SettingsIcon name="shield-check" color={colors.iconSecurity} />} title={t('accountCenter.items.manageSessions.title') || 'Manage Sessions'} description={t('accountCenter.items.manageSessions.subtitle') || 'Security and active devices'} onPress={() => navigate?.('SessionManagement')} />
+                    <SettingsListItem icon={<SettingsIcon name="folder" color={colors.iconStorage} />} title={t('accountCenter.items.fileManagement.title') || 'File Management'} description={t('accountCenter.items.fileManagement.subtitle') || 'Upload, download, and manage your files'} onPress={() => navigate?.('FileManagement')} />
+                    <SettingsListItem icon={<SettingsIcon name="star" color={colors.iconPayments} />} title={t('accountCenter.items.premium.title') || 'Oxy+ Subscriptions'} description={user?.isPremium ? (t('accountCenter.items.premium.manage') || 'Manage your premium plan') : (t('accountCenter.items.premium.upgrade') || 'Upgrade to premium features')} onPress={() => navigate?.('PremiumSubscription')} />
                     {user?.isPremium ? (
-                        <SettingsListItem
-                            icon={<SettingsIcon name="credit-card" color={colors.iconPersonalInfo} />}
-                            title={t('accountCenter.items.billing.title') || 'Billing Management'}
-                            description={t('accountCenter.items.billing.subtitle') || 'Payment methods and invoices'}
-                            onPress={() => navigate?.('PaymentGateway')}
-                        />
+                        <SettingsListItem icon={<SettingsIcon name="credit-card" color={colors.iconPersonalInfo} />} title={t('accountCenter.items.billing.title') || 'Billing Management'} description={t('accountCenter.items.billing.subtitle') || 'Payment methods and invoices'} onPress={() => navigate?.('PaymentGateway')} />
                     ) : null}
                 </SettingsListGroup>
 
-                {/* Multi-Account Management */}
                 {sessions && sessions.length > 1 && (
                     <SettingsListGroup title={t('accountCenter.sections.multiAccount') || 'Multi-Account'}>
-                        <SettingsListItem
-                            icon={<SettingsIcon name="account-group" color={colors.iconStorage} />}
-                            title={t('accountCenter.items.switchAccount.title') || 'Switch Account'}
-                            description={t('accountCenter.items.switchAccount.subtitle', { count: sessions.length }) || `${sessions.length} accounts available`}
-                            onPress={() => navigate?.('AccountSwitcher')}
-                        />
-                        <SettingsListItem
-                            icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />}
-                            title={t('accountCenter.items.addAccount.title') || 'Add Another Account'}
-                            description={t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account'}
-                            onPress={() => navigate?.('OxyAuth')}
-                        />
+                        <SettingsListItem icon={<SettingsIcon name="account-group" color={colors.iconStorage} />} title={t('accountCenter.items.switchAccount.title') || 'Switch Account'} description={t('accountCenter.items.switchAccount.subtitle', { count: sessions.length }) || `${sessions.length} accounts available`} onPress={() => navigate?.('AccountSwitcher')} />
+                        <SettingsListItem icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />} title={t('accountCenter.items.addAccount.title') || 'Add Another Account'} description={t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account'} onPress={() => navigate?.('OxyAuth')} />
                     </SettingsListGroup>
                 )}
 
-                {/* Single Account Setup */}
                 {(!sessions || sessions.length <= 1) && (
                     <SettingsListGroup title={t('accountCenter.sections.addAccount') || 'Add Account'}>
-                        <SettingsListItem
-                            icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />}
-                            title={t('accountCenter.items.addAccount.title') || 'Add Another Account'}
-                            description={t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account'}
-                            onPress={() => navigate?.('OxyAuth')}
-                        />
+                        <SettingsListItem icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />} title={t('accountCenter.items.addAccount.title') || 'Add Another Account'} description={t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account'} onPress={() => navigate?.('OxyAuth')} />
                     </SettingsListGroup>
                 )}
 
-                {/* Managed Accounts */}
                 {isAuthenticated && (
                     <SettingsListGroup title="Managed Accounts">
-                        <SettingsListItem
-                            icon={<SettingsIcon name="account-switch" color={colors.iconStorage} />}
-                            title="Manage Identities"
-                            description={managedAccounts.length > 0
-                                ? `${managedAccounts.length} managed ${managedAccounts.length === 1 ? 'identity' : 'identities'}`
-                                : 'Sub-accounts you control'}
-                            onPress={() => navigate?.('AccountSwitcher')}
-                        />
-                        <SettingsListItem
-                            icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />}
-                            title="Create New Identity"
-                            description="Add a managed sub-account"
-                            onPress={() => navigate?.('CreateManagedAccount')}
-                        />
+                        <SettingsListItem icon={<SettingsIcon name="account-switch" color={colors.iconStorage} />} title="Manage Identities" description={managedAccounts.length > 0 ? `${managedAccounts.length} managed ${managedAccounts.length === 1 ? 'identity' : 'identities'}` : 'Sub-accounts you control'} onPress={() => navigate?.('AccountSwitcher')} />
+                        <SettingsListItem icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />} title="Create New Identity" description="Add a managed sub-account" onPress={() => navigate?.('CreateManagedAccount')} />
                     </SettingsListGroup>
                 )}
 
-                {/* Additional Options */}
                 <SettingsListGroup title={t('accountCenter.sections.moreOptions') || 'More Options'}>
                     {Platform.OS !== 'web' ? (
-                        <SettingsListItem
-                            icon={<SettingsIcon name="bell" color={colors.iconStorage} />}
-                            title={t('accountCenter.items.notifications.title') || 'Notifications'}
-                            description={t('accountCenter.items.notifications.subtitle') || 'Manage notification settings'}
-                            onPress={() => navigate?.('AccountSettings', { activeTab: 'notifications' })}
-                        />
+                        <SettingsListItem icon={<SettingsIcon name="bell" color={colors.iconStorage} />} title={t('accountCenter.items.notifications.title') || 'Notifications'} description={t('accountCenter.items.notifications.subtitle') || 'Manage notification settings'} onPress={() => navigate?.('AccountSettings', { activeTab: 'notifications' })} />
                     ) : null}
-                    <SettingsListItem
-                        icon={<SettingsIcon name="translate" color={colors.iconPersonalInfo} />}
-                        title={t('language.title') || 'Language'}
-                        description={t('language.subtitle') || 'Choose your preferred language'}
-                        onPress={() => navigate?.('LanguageSelector')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="help-circle" color={colors.iconSecurity} />}
-                        title={t('accountOverview.items.help.title') || 'Help & Support'}
-                        description={t('accountOverview.items.help.subtitle') || 'Get help and contact support'}
-                        onPress={() => navigate?.('HelpSupport')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="information" color="#8E8E93" />}
-                        title={t('accountCenter.items.appInfo.title') || 'App Information'}
-                        description={t('accountCenter.items.appInfo.subtitle') || 'Version and system details'}
-                        onPress={() => navigate?.('AppInfo')}
-                    />
+                    <SettingsListItem icon={<SettingsIcon name="translate" color={colors.iconPersonalInfo} />} title={t('language.title') || 'Language'} description={t('language.subtitle') || 'Choose your preferred language'} onPress={() => navigate?.('LanguageSelector')} />
+                    <SettingsListItem icon={<SettingsIcon name="help-circle" color={colors.iconSecurity} />} title={t('accountOverview.items.help.title') || 'Help & Support'} description={t('accountOverview.items.help.subtitle') || 'Get help and contact support'} onPress={() => navigate?.('HelpSupport')} />
+                    <SettingsListItem icon={<SettingsIcon name="information" color="#8E8E93" />} title={t('accountCenter.items.appInfo.title') || 'App Information'} description={t('accountCenter.items.appInfo.subtitle') || 'Version and system details'} onPress={() => navigate?.('AppInfo')} />
                 </SettingsListGroup>
 
-                {/* Sign Out Section */}
                 <SettingsListGroup>
                     <SettingsListItem
                         icon={<SettingsIcon name="logout" color={dangerColor} />}
                         title={isLoading ? (t('accountCenter.signingOut') || 'Signing out...') : (t('common.actions.signOut') || 'Sign Out')}
-                        onPress={confirmLogout}
+                        onPress={() => logoutPrompt.open()}
                         destructive={true}
                         showChevron={false}
                         disabled={isLoading}
-                        rightElement={isLoading ? (
-                            <ActivityIndicator color={dangerColor} size="small" />
-                        ) : undefined}
+                        rightElement={isLoading ? (<ActivityIndicator color={dangerColor} size="small" />) : undefined}
                     />
                 </SettingsListGroup>
 
@@ -252,32 +155,26 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                     </Text>
                 </View>
             </ScrollView>
+
+            <Prompt.Basic
+                control={logoutPrompt}
+                title={t('common.actions.signOut') || 'Sign Out'}
+                description={t('common.confirms.signOut') || 'Are you sure you want to sign out?'}
+                onConfirm={handleLogout}
+                confirmButtonCta={t('common.actions.signOut') || 'Sign Out'}
+                confirmButtonColor="negative"
+            />
         </View>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    scrollView: {
-        flex: 1,
-    },
+    container: { flex: 1 },
+    scrollView: { flex: 1 },
     scrollContainer: screenContentStyle,
-    versionContainer: {
-        alignItems: 'center',
-        marginTop: 20,
-        marginBottom: 20,
-    },
-    versionText: {
-        fontSize: 12,
-        fontFamily: fontFamilies.inter,
-    },
-    message: {
-        fontSize: 16,
-        textAlign: 'center',
-        marginTop: 24,
-    },
+    versionContainer: { alignItems: 'center', marginTop: 20, marginBottom: 20 },
+    versionText: { fontSize: 12, fontFamily: fontFamilies.inter },
+    message: { fontSize: 16, textAlign: 'center', marginTop: 24 },
 });
 
 export default AccountCenterScreen;