@oxyhq/services 6.9.45 → 6.9.46

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

@@ -1,8 +1,9 @@
 import type React from 'react';
 import { useMemo } from 'react';
-import { View, Text, Animated } from 'react-native';
-import { GroupedSection } from '../index';
-import GroupedPillButtons from '../internal/GroupedPillButtons';
+import { View, Text, Animated, ActivityIndicator } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { Button } from '@oxyhq/bloom/button';
 import { createPaymentStyles } from './paymentStyles';
 import { PAYMENT_METHODS, getCurrencySymbol } from './constants';
 import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
@@ -56,72 +57,67 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
             <View style={styles.section}>
                 <Text style={styles.sectionTitle}>{t('payment.review.title')}</Text>
 
-                <GroupedSection
-                    items={[
-                        {
-                            id: 'secure-payment',
-                            icon: 'shield-check',
-                            iconColor: colors.success || '#4BB543',
-                            title: t('payment.review.securePayment'),
-                            subtitle: t('payment.review.securePaymentDesc'),
-                        },
-                        {
-                            id: 'amount',
-                            icon: 'cash',
-                            iconColor: colors.primary,
-                            title: t('payment.review.amount'),
-                            subtitle: `${currencySymbol} ${amount}`,
-                        },
-                        {
-                            id: 'payment-method',
-                            icon: selectedMethod?.icon,
-                            iconColor: colors.primary,
-                            title: t('payment.review.paymentMethod'),
-                            subtitle: selectedMethod ? t(`payment.methods.${selectedMethod.key}.label`) : undefined,
-                        },
-                        ...(paymentMethod === 'card' ? [{
-                            id: 'card-details',
-                            icon: 'card' as const,
-                            iconColor: colors.primary,
-                            title: t('payment.review.card'),
-                            subtitle: cardDetails.number.replace(/.(?=.{4})/g, '*'),
-                        }] : []),
-                        ...(paymentMethod === 'oxy' ? [{
-                            id: 'oxy-balance',
-                            icon: 'wallet' as const,
-                            iconColor: colors.primary,
-                            title: t('payment.review.oxyPayAccount'),
-                            subtitle: t('payment.details.balance', { balance: '⊜ 123.45' }),
-                        }] : []),
-                        ...(paymentMethod === 'faircoin' ? [{
-                            id: 'faircoin-wallet',
-                            icon: 'qr-code' as const,
-                            iconColor: colors.primary,
-                            title: t('payment.review.faircoinWallet'),
-                            subtitle: t('payment.review.paidViaQR'),
-                        }] : []),
-                    ]}
-                />
+                <SettingsListGroup>
+                    <SettingsListItem
+                        icon={<Ionicons name="shield-checkmark" size={20} color={colors.success || '#4BB543'} />}
+                        title={t('payment.review.securePayment')}
+                        description={t('payment.review.securePaymentDesc')}
+                        showChevron={false}
+                    />
+                    <SettingsListItem
+                        icon={<Ionicons name="cash-outline" size={20} color={colors.primary} />}
+                        title={t('payment.review.amount')}
+                        description={`${currencySymbol} ${amount}`}
+                        showChevron={false}
+                    />
+                    <SettingsListItem
+                        icon={selectedMethod ? <Ionicons name={selectedMethod.icon} size={20} color={colors.primary} /> : undefined}
+                        title={t('payment.review.paymentMethod')}
+                        description={selectedMethod ? t(`payment.methods.${selectedMethod.key}.label`) : undefined}
+                        showChevron={false}
+                    />
+                    {paymentMethod === 'card' ? (
+                        <SettingsListItem
+                            icon={<Ionicons name="card-outline" size={20} color={colors.primary} />}
+                            title={t('payment.review.card')}
+                            description={cardDetails.number.replace(/.(?=.{4})/g, '*')}
+                            showChevron={false}
+                        />
+                    ) : null}
+                    {paymentMethod === 'oxy' ? (
+                        <SettingsListItem
+                            icon={<Ionicons name="wallet-outline" size={20} color={colors.primary} />}
+                            title={t('payment.review.oxyPayAccount')}
+                            description={t('payment.details.balance', { balance: '⊜ 123.45' })}
+                            showChevron={false}
+                        />
+                    ) : null}
+                    {paymentMethod === 'faircoin' ? (
+                        <SettingsListItem
+                            icon={<Ionicons name="qr-code-outline" size={20} color={colors.primary} />}
+                            title={t('payment.review.faircoinWallet')}
+                            description={t('payment.review.paidViaQR')}
+                            showChevron={false}
+                        />
+                    ) : null}
+                </SettingsListGroup>
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('payment.actions.back'),
-                        onPress: onBack,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: isPaying ? t('payment.review.processing') : t('payment.review.payNow'),
-                        onPress: onPay,
-                        icon: 'checkmark',
-                        variant: 'primary',
-                        loading: isPaying,
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                <Button variant="secondary" onPress={onBack} size="small" disabled={isPaying} icon={<Ionicons name="arrow-back" size={16} />}>
+                    {t('payment.actions.back')}
+                </Button>
+                <Button
+                    variant="primary"
+                    onPress={onPay}
+                    size="small"
+                    disabled={isPaying}
+                    icon={isPaying ? <ActivityIndicator size="small" color="#FFFFFF" /> : <Ionicons name="checkmark" size={16} />}
+                    iconPosition="right"
+                >
+                    {isPaying ? t('payment.review.processing') : t('payment.review.payNow')}
+                </Button>
+            </View>
         </Animated.View>
     );
 };

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/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

@@ -15,7 +15,6 @@ 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';
@@ -84,7 +83,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
             )}
 
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
-                <Section title={t('accountCenter.sections.quickActions') || 'Quick Actions'} isFirst={true}>
+                <SettingsListGroup title={t('accountCenter.sections.quickActions') || 'Quick Actions'}>
                     <QuickActions
                         theme={normalizedTheme}
                         actions={useMemo(() => [
@@ -96,7 +95,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             ...(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>
 
                 <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')} />

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -14,13 +14,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { BaseScreenProps } from '../types/navigation';
 import OxyLogo from '../components/OxyLogo';
 import Avatar from '../components/Avatar';
-import OxyIcon from '../components/icon/OxyIcon';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
 import * as Prompt from '@oxyhq/bloom/prompt';
 import { usePromptControl } from '@oxyhq/bloom/prompt';
-import { Section, GroupedSection, GroupedItem } from '../components';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -365,78 +363,59 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                     ) : null}
                 </SettingsListGroup>
 
-                {/* Additional Accounts - kept with GroupedSection due to custom avatar content */}
+                {/* Additional Accounts */}
                 {showMoreAccounts && (
-                    <Section title={`${t('accountOverview.sections.additionalAccounts') || 'Additional Accounts'}${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`} >
+                    <SettingsListGroup title={`${t('accountOverview.sections.additionalAccounts') || 'Additional Accounts'}${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`}>
                         {loadingAdditionalAccounts ? (
-                            <GroupedSection
-                                items={[
-                                    {
-                                        id: 'loading-accounts',
-                                        icon: 'sync',
-                                        iconColor: baseThemeColors.iconSecurity,
-                                        title: t('accountOverview.loadingAdditional.title') || 'Loading accounts...',
-                                        subtitle: t('accountOverview.loadingAdditional.subtitle') || 'Please wait while we load your additional accounts',
-                                        customContent: (
-                                            <View style={styles.loadingContainer}>
-                                                <ActivityIndicator size="small" color={baseThemeColors.iconSecurity} />
-                                                <Text style={styles.loadingText}>{t('accountOverview.loadingAdditional.title') || 'Loading accounts...'}</Text>
-                                            </View>
-                                        ),
-                                    },
-                                ]}
-
+                            <SettingsListItem
+                                icon={<SettingsIcon name="sync" color={baseThemeColors.iconSecurity} />}
+                                title={t('accountOverview.loadingAdditional.title') || 'Loading accounts...'}
+                                description={t('accountOverview.loadingAdditional.subtitle') || 'Please wait while we load your additional accounts'}
+                                rightElement={
+                                    <View style={styles.loadingContainer}>
+                                        <ActivityIndicator size="small" color={baseThemeColors.iconSecurity} />
+                                    </View>
+                                }
+                                showChevron={false}
                             />
                         ) : additionalAccountsData.length > 0 ? (
-                            <GroupedSection
-                                items={additionalAccountsData.map((account, index) => ({
-                                    id: `account-${account.id}`,
-                                    icon: 'account',
-                                    iconColor: baseThemeColors.iconData,
-                                    title: typeof account.name === 'object'
+                            additionalAccountsData.map((account) => (
+                                <SettingsListItem
+                                    key={`account-${account.id}`}
+                                    icon={
+                                        <View style={styles.userIcon}>
+                                            {account.avatar ? (
+                                                <Image
+                                                    source={{ uri: oxyServices.getFileDownloadUrl(account.avatar, 'thumb') }}
+                                                    style={styles.accountAvatarImage}
+                                                />
+                                            ) : (
+                                                <View style={styles.accountAvatarFallback}>
+                                                    <Text style={styles.accountAvatarText}>
+                                                        {account.username?.charAt(0).toUpperCase() || '?'}
+                                                    </Text>
+                                                </View>
+                                            )}
+                                        </View>
+                                    }
+                                    title={typeof account.name === 'object'
                                         ? account.name?.full || account.name?.first || account.username
-                                        : account.name || account.username,
-                                    subtitle: account.email || account.username,
-                                    onPress: () => {
+                                        : account.name || account.username}
+                                    description={account.email || account.username}
+                                    onPress={() => {
                                         toast.info(t('accountOverview.items.accountSwitcher.switchPrompt', { username: account.username }) || `Switch to ${account.username}?`);
-                                    },
-                                    customContent: (
-                                        <>
-                                            <View style={styles.userIcon}>
-                                                {account.avatar ? (
-                                                    <Image
-                                                        source={{ uri: oxyServices.getFileDownloadUrl(account.avatar, 'thumb') }}
-                                                        style={styles.accountAvatarImage}
-                                                    />
-                                                ) : (
-                                                    <View style={styles.accountAvatarFallback}>
-                                                        <Text style={styles.accountAvatarText}>
-                                                            {account.username?.charAt(0).toUpperCase() || '?'}
-                                                        </Text>
-                                                    </View>
-                                                )}
-                                            </View>
-                                            <OxyIcon name="chevron-forward" size={16} color="#ccc" />
-                                        </>
-                                    ),
-                                }))}
-
-                            />
+                                    }}
+                                />
+                            ))
                         ) : (
-                            <GroupedSection
-                                items={[
-                                    {
-                                        id: 'no-accounts',
-                                        icon: 'account-outline',
-                                        iconColor: '#ccc',
-                                        title: t('accountOverview.additional.noAccounts.title') || 'No other accounts',
-                                        subtitle: t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them',
-                                    },
-                                ]}
-
+                            <SettingsListItem
+                                icon={<SettingsIcon name="account-outline" color="#ccc" />}
+                                title={t('accountOverview.additional.noAccounts.title') || 'No other accounts'}
+                                description={t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them'}
+                                showChevron={false}
                             />
                         )}
-                    </Section>
+                    </SettingsListGroup>
                 )}
 
                 {/* Account Management */}