@oxyhq/services 6.9.45 → 6.10.1

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -1,17 +1,14 @@
 import type React from 'react';
 import { useState, useCallback } from 'react';
-import { View, Text, TextInput, TouchableOpacity } from 'react-native';
-import * as Dialog from '@oxyhq/bloom/dialog';
-import type { DialogControlProps } from '@oxyhq/bloom/dialog';
-import * as Prompt from '@oxyhq/bloom/prompt';
+import { View, Text, TextInput } from 'react-native';
+import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
 import OxyIcon from '../icon/OxyIcon';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { Loading } from '@oxyhq/bloom/loading';
 
 interface DeleteAccountModalProps {
     control: DialogControlProps;
     username: string;
-    onDelete: (password: string) => Promise<void>;
+    onDelete: (confirmText: string) => Promise<void>;
     t: (key: string, params?: Record<string, string>) => string | undefined;
 }
 
@@ -22,13 +19,11 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
     t,
 }) => {
     const theme = useTheme();
-    const [password, setPassword] = useState('');
     const [confirmUsername, setConfirmUsername] = useState('');
     const [isDeleting, setIsDeleting] = useState(false);
     const [error, setError] = useState<string | null>(null);
-    const [showPassword, setShowPassword] = useState(false);
 
-    const isValid = password.length > 0 && confirmUsername === username;
+    const isValid = confirmUsername === username;
 
     const handleDelete = useCallback(async () => {
         if (!isValid) return;
@@ -37,108 +32,78 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
         setIsDeleting(true);
 
         try {
-            await onDelete(password);
+            await onDelete(confirmUsername);
             // Dialog will be closed by parent on success
         } catch (err: unknown) {
             setError((err instanceof Error ? err.message : null) || t('deleteAccount.error') || 'Failed to delete account');
         } finally {
             setIsDeleting(false);
         }
-    }, [isValid, password, onDelete, t]);
+    }, [isValid, confirmUsername, onDelete, t]);
 
     const handleCleanup = useCallback(() => {
         if (isDeleting) return;
-        setPassword('');
         setConfirmUsername('');
         setError(null);
-        setShowPassword(false);
     }, [isDeleting]);
 
     return (
-        <Dialog.Outer control={control} onClose={handleCleanup}>
-            <Dialog.Handle />
-            <Dialog.ScrollableInner label="Delete Account">
-                <View className="flex-row items-center mb-4 gap-3">
-                    <OxyIcon name="alert" size={32} color={theme.colors.error} />
-                    <Text className="text-destructive text-xl font-bold">
-                        {t('deleteAccount.title') || 'Delete Account'}
-                    </Text>
-                </View>
-
-                <Text className="text-foreground text-sm leading-5 mb-5">
-                    {t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
+        <Dialog
+            control={control}
+            onClose={handleCleanup}
+            label="Delete Account"
+            actions={[
+                {
+                    label: t('deleteAccount.confirm') || 'Delete Forever',
+                    color: 'destructive',
+                    onPress: handleDelete,
+                    disabled: !isValid || isDeleting,
+                    shouldCloseOnPress: false,
+                },
+                { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+            ]}
+        >
+            <View className="flex-row items-center mb-4 gap-3">
+                <OxyIcon name="alert" size={32} color={theme.colors.error} />
+                <Text className="text-destructive text-xl font-bold">
+                    {t('deleteAccount.title') || 'Delete Account'}
                 </Text>
+            </View>
 
-                {error && (
-                    <View
-                        className="p-3 rounded-lg mb-4"
-                        style={{ backgroundColor: `${theme.colors.error}20` }}
-                    >
-                        <Text className="text-destructive text-sm text-center">
-                            {error}
-                        </Text>
-                    </View>
-                )}
+            <Text className="text-foreground text-sm leading-5 mb-5">
+                {t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
+            </Text>
 
-                <View className="mb-4">
-                    <Text className="text-muted-foreground text-[13px] mb-2">
-                        {t('deleteAccount.passwordLabel') || 'Enter your password'}
+            {error && (
+                <View
+                    className="p-3 rounded-lg mb-4"
+                    style={{ backgroundColor: `${theme.colors.error}20` }}
+                >
+                    <Text className="text-destructive text-sm text-center">
+                        {error}
                     </Text>
-                    <View className="flex-row items-center border border-border bg-background rounded-lg">
-                        <TextInput
-                            className="text-foreground flex-1 text-base py-3 px-4"
-                            value={password}
-                            onChangeText={setPassword}
-                            placeholder={t('deleteAccount.passwordPlaceholder') || 'Password'}
-                            placeholderTextColor={theme.colors.textSecondary}
-                            secureTextEntry={!showPassword}
-                            autoCapitalize="none"
-                            editable={!isDeleting}
-                        />
-                        <TouchableOpacity
-                            onPress={() => setShowPassword(!showPassword)}
-                            className="p-3"
-                        >
-                            <OxyIcon
-                                name={showPassword ? 'eye-off' : 'eye'}
-                                size={20}
-                                color={theme.colors.textSecondary}
-                            />
-                        </TouchableOpacity>
-                    </View>
                 </View>
+            )}
 
-                <View className="mb-4">
-                    <Text className="text-muted-foreground text-[13px] mb-2">
-                        {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
-                    </Text>
-                    <TextInput
-                        className="text-foreground bg-background text-base py-3 px-4 border rounded-lg"
-                        style={{
-                            borderColor: confirmUsername === username ? theme.colors.success : theme.colors.border,
-                        }}
-                        value={confirmUsername}
-                        onChangeText={setConfirmUsername}
-                        placeholder={username}
-                        placeholderTextColor={theme.colors.textSecondary}
-                        autoCapitalize="none"
-                        autoCorrect={false}
-                        editable={!isDeleting}
-                    />
-                </View>
-
-                <Prompt.Actions>
-                    <Prompt.Action
-                        onPress={handleDelete}
-                        color="negative"
-                        cta={isDeleting ? undefined : (t('deleteAccount.confirm') || 'Delete Forever')}
-                        disabled={!isValid || isDeleting}
-                        shouldCloseOnPress={false}
-                    />
-                    <Prompt.Cancel cta={t('common.cancel') || 'Cancel'} />
-                </Prompt.Actions>
-            </Dialog.ScrollableInner>
-        </Dialog.Outer>
+            <View className="mb-4">
+                <Text className="text-muted-foreground text-[13px] mb-2">
+                    {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
+                </Text>
+                <TextInput
+                    className="text-foreground bg-background text-base py-3 px-4 border rounded-lg"
+                    style={{
+                        borderColor: confirmUsername === username ? theme.colors.success : theme.colors.border,
+                    }}
+                    value={confirmUsername}
+                    onChangeText={setConfirmUsername}
+                    placeholder={username}
+                    placeholderTextColor={theme.colors.textSecondary}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    editable={!isDeleting}
+                />
+            </View>
+        </Dialog>
     );
 };
 

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

@@ -2,11 +2,11 @@ import type React from 'react';
 import { useMemo } from 'react';
 import { View, Text, Animated, TouchableOpacity, Clipboard, Linking } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import GroupedPillButtons from '../internal/GroupedPillButtons';
+import { Button } from '@oxyhq/bloom/button';
 import TextField from '../TextField';
 import { FAIRWalletIcon } from '../icon';
 import { createPaymentStyles } from './paymentStyles';
-import { toast } from '../../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
 import { useI18n } from '../../hooks/useI18n';
 
@@ -200,24 +200,21 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
                 )}
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('payment.actions.back'),
-                        onPress: onBack,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('payment.actions.continue'),
-                        onPress: onNext,
-                        icon: 'arrow-forward',
-                        variant: 'primary',
-                        disabled: paymentMethod === 'card' && !isCardValid,
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                <Button variant="secondary" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                    {t('payment.actions.back')}
+                </Button>
+                <Button
+                    variant="primary"
+                    onPress={onNext}
+                    size="small"
+                    icon={<Ionicons name="arrow-forward" size={16} />}
+                    iconPosition="right"
+                    disabled={paymentMethod === 'card' && !isCardValid}
+                >
+                    {t('payment.actions.continue')}
+                </Button>
+            </View>
         </Animated.View>
     );
 };

package/src/ui/components/payment/PaymentMethodStep.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 { Ionicons } from '@expo/vector-icons';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { Button } from '@oxyhq/bloom/button';
 import { FAIRWalletIcon } from '../icon';
 import { createPaymentStyles } from './paymentStyles';
 import type { PaymentMethod, PaymentColors, PaymentStepAnimations } from './types';
@@ -49,42 +50,39 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
             <View style={styles.section}>
                 <Text style={styles.sectionTitle}>{t('payment.method.title')}</Text>
 
-                <GroupedSection
-                    items={availablePaymentMethods.map(method => ({
-                        id: method.key,
-                        icon: method.key === 'faircoin' ? undefined : method.icon,
-                        iconColor: method.key === 'card' ? '#007AFF' :
+                <SettingsListGroup>
+                    {availablePaymentMethods.map(method => {
+                        const iconColor = method.key === 'card' ? '#007AFF' :
                             method.key === 'oxy' ? '#32D74B' :
-                                method.key === 'faircoin' ? '#9ffb50' : colors.primary,
-                        title: t(`payment.methods.${method.key}.label`),
-                        subtitle: t(`payment.methods.${method.key}.description`),
-                        onPress: () => onSelectMethod(method.key),
-                        selected: selectedMethod === method.key,
-                        showChevron: false,
-                        customIcon: method.key === 'faircoin' ? (
-                            <FAIRWalletIcon size={20} />
-                        ) : undefined,
-                    }))}
-                />
+                                method.key === 'faircoin' ? '#9ffb50' : colors.primary;
+                        const iconElement = method.key === 'faircoin'
+                            ? <FAIRWalletIcon size={20} />
+                            : <Ionicons name={method.icon} size={20} color={iconColor} />;
+                        return (
+                            <SettingsListItem
+                                key={method.key}
+                                icon={iconElement}
+                                title={t(`payment.methods.${method.key}.label`)}
+                                description={t(`payment.methods.${method.key}.description`)}
+                                onPress={() => onSelectMethod(method.key)}
+                                showChevron={false}
+                                rightElement={selectedMethod === method.key ? (
+                                    <Ionicons name="checkmark-circle" size={20} color={colors.primary} />
+                                ) : undefined}
+                            />
+                        );
+                    })}
+                </SettingsListGroup>
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('payment.actions.back'),
-                        onPress: onBack,
-                        icon: 'arrow-back',
-                        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={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                    {t('payment.actions.back')}
+                </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/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} />}
+                        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';
@@ -45,7 +45,7 @@ const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
                         <Ionicons
                             name="checkmark-circle"
                             size={64}
-                            color={colors.success || '#4BB543'}
+                            color={colors.success}
                             style={styles.successIcon}
                         />
                         <Text style={styles.successMainTitle}>{t('payment.success.heading')}</Text>
@@ -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>
     );
 };