@oxy.so/services 1.0.0

package/src/ui/components/oauthNavigation.ts

@@ -0,0 +1,114 @@
+/**
+ * Platform navigation for the third-party "Sign in with Oxy" OAuth flow.
+ *
+ * Kept out of `OxySignInButton` so the button's routing logic can be unit-tested
+ * without driving a real browser navigation (jsdom's `location.assign` is
+ * non-configurable and cannot be spied). Both entry points hand a fully-built
+ * `auth.oxy.so/authorize` URL to the platform — never FedCM, an SSO bounce, or
+ * an Oxy session cookie.
+ */
+
+import { Linking } from 'react-native';
+import { logger, persistOAuthReturnPath } from '@oxy.so/core';
+
+/** Minimal shape of the optional `expo-web-browser` auth-session result. */
+interface WebBrowserAuthResult {
+    type?: string;
+    url?: string;
+}
+
+/** Minimal shape of the optional `expo-web-browser` native module we depend on. */
+interface WebBrowserModule {
+    openAuthSessionAsync?: (url: string, redirectUrl: string) => Promise<WebBrowserAuthResult>;
+}
+
+/** Outcome of opening the authorize URL on native. */
+export interface OpenAuthorizeResult {
+    /**
+     * The deep-link URL the auth session returned to (carries `?code=…&state=…`)
+     * when `expo-web-browser` observed it, else `null`. `null` means the RP must
+     * complete the exchange from its own deep-link handler (e.g. after the
+     * `Linking.openURL` fallback, which cannot observe the return URL).
+     */
+    redirectUrl: string | null;
+}
+
+export interface OpenAuthorizeOptions {
+    /**
+     * Whether to fall back to `Linking.openURL` when an in-app auth session is
+     * unavailable. Explicit-consent callers disable this because they must
+     * observe and validate the callback before reporting success.
+     * @default true
+     */
+    allowExternalFallback?: boolean;
+}
+
+/**
+ * Web: hand the TOP-LEVEL document to the OAuth authorize URL (a full-page
+ * redirect, not a popup) so the RP returns to its registered `redirect_uri`.
+ * No-op where `location` is unavailable (SSR / non-browser hosts).
+ *
+ * Records the current page first. `redirect_uri` is a registered apex origin
+ * (see `normalizeOAuthRedirectUri`), so the IdP always returns the tab to `/`,
+ * and the return handlers restore this path. Doing it here rather than at each
+ * call site is deliberate: every web authorize redirect — silent restore,
+ * interactive sign-in, the passkey hub — funnels through this function, so a
+ * new flow cannot forget to preserve the page the visitor came from.
+ */
+export function redirectToAuthorize(url: string): void {
+    const location = (globalThis as { location?: Location }).location;
+    if (!location) return;
+    persistOAuthReturnPath(`${location.pathname}${location.search}${location.hash}`);
+    location.assign(url);
+}
+
+/**
+ * Native: open the authorize URL in an in-app auth session via the optional
+ * `expo-web-browser` module (`openAuthSessionAsync` returns to `redirectUri`),
+ * degrading to `Linking.openURL` when the module is not installed — the same
+ * dynamic-import-with-fallback pattern services uses for haptics/netinfo.
+ *
+ * Returns the deep-link URL the session came back to when it can be observed, so
+ * the caller can hand `?code=…&state=…` back to the RP for the token exchange.
+ */
+export async function openAuthorizeUrlNative(
+    url: string,
+    redirectUri: string,
+    options: OpenAuthorizeOptions = {},
+): Promise<OpenAuthorizeResult> {
+    try {
+        const mod = (await import('expo-web-browser')) as unknown as WebBrowserModule;
+        if (mod && typeof mod.openAuthSessionAsync === 'function') {
+            const result = await mod.openAuthSessionAsync(url, redirectUri);
+            const redirectUrl =
+                result && result.type === 'success' && typeof result.url === 'string'
+                    ? result.url
+                    : null;
+            return { redirectUrl };
+        }
+    } catch (error) {
+        logger.warn(
+            'OxySignInButton: expo-web-browser auth session failed; falling back to Linking.openURL',
+            { component: 'oauthNavigation' },
+            error,
+        );
+    }
+
+    if (options.allowExternalFallback === false) {
+        return { redirectUrl: null };
+    }
+
+    // Fallback: Linking cannot observe the return URL, so the RP completes the
+    // exchange from its own deep-link handler. A rejected openURL (e.g. an
+    // unregistered scheme) must not throw out of the sign-in flow.
+    try {
+        await Linking.openURL(url);
+    } catch (error) {
+        logger.warn(
+            'OxySignInButton: Linking.openURL rejected the authorize URL',
+            { component: 'oauthNavigation' },
+            error,
+        );
+    }
+    return { redirectUrl: null };
+}

package/src/ui/components/passkeyHubPopup.ts

@@ -0,0 +1,28 @@
+/**
+ * Popup opener for the cross-origin passkey hub (b2).
+ *
+ * On a non-Oxy web origin (e.g. mention.earth) a WebAuthn ceremony can't run
+ * locally — the credential's RP ID is bound to `oxy.so`. Instead,
+ * `AccountDialogController.startPasskeyHubSignIn` opens a popup at the
+ * auth.oxy.so passkey hub, where the SAME ceremony IS a first-party operation.
+ *
+ * Kept in its own module (mirroring `oauthNavigation.ts`'s
+ * `redirectToAuthorize`) so `window.open` sits behind a plain function the
+ * controller wiring in `OxyContext` can inject without touching `window`
+ * itself, and so a test can substitute a fake opener.
+ */
+
+import type { PopupWindowHandle } from '@oxy.so/core';
+
+/**
+ * Open a new, EMPTY popup window. Must be called SYNCHRONOUSLY from within a
+ * user-gesture handler (before any `await`) — opening it after an async call
+ * loses the gesture attribution and the browser silently blocks it. Returns
+ * `null` when blocked, or when there is no DOM `window` (native/SSR — the
+ * hub-popup flow does not apply there).
+ */
+export function openPasskeyHubPopup(): PopupWindowHandle | null {
+    const win = (globalThis as { window?: Window }).window;
+    if (!win) return null;
+    return win.open('', '_blank', 'width=420,height=640');
+}

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

@@ -0,0 +1,232 @@
+import type React from 'react';
+import { useMemo } from 'react';
+import { View, Text, Animated, TouchableOpacity, Clipboard, Linking } from 'react-native';
+import Ionicons from '../../icons/Ionicons';
+import { Button } from '@oxy.so/bloom/button';
+import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
+import FAIRWalletIcon from '../icon/FAIRWalletIcon';
+import { createPaymentStyles } from './paymentStyles';
+import { toast } from '@oxy.so/bloom/toast';
+import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
+import { useI18n } from '../../hooks/useI18n';
+
+interface PaymentDetailsStepProps {
+    paymentMethod: string;
+    cardDetails: CardDetails;
+    onCardDetailsChange: (details: CardDetails) => void;
+    colors: PaymentColors;
+    animations: PaymentStepAnimations;
+    faircoinAddress: string;
+    isMobile: boolean;
+    qrSize: number;
+    onBack: () => void;
+    onNext: () => void;
+    QRCodeComponent?: React.ComponentType<{ value?: string; size?: number }>;
+}
+
+const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
+    paymentMethod,
+    cardDetails,
+    onCardDetailsChange,
+    colors,
+    animations,
+    faircoinAddress,
+    isMobile,
+    qrSize,
+    onBack,
+    onNext,
+    QRCodeComponent,
+}) => {
+    const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+    const { t } = useI18n();
+    const { fadeAnim, slideAnim, scaleAnim } = animations;
+
+    const handleCopyAddress = () => {
+        Clipboard.setString(faircoinAddress);
+        toast(t('payment.details.addressCopied'));
+    };
+
+    const handleOpenFairWallet = () => {
+        const url = `fairwallet://pay?address=${faircoinAddress}`;
+        Linking.openURL(url);
+    };
+
+    const isCardValid = cardDetails.number && cardDetails.expiry && cardDetails.cvv;
+
+    return (
+        <Animated.View
+            style={[
+                styles.stepContainer,
+                {
+                    opacity: fadeAnim,
+                    transform: [
+                        { translateY: slideAnim },
+                        { scale: scaleAnim },
+                    ],
+                },
+            ]}
+            accessibilityRole="none"
+            accessibilityLabel="Enter payment details step"
+        >
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>
+                    {paymentMethod === 'card' ? t('payment.details.cardDetails') :
+                        paymentMethod === 'oxy' ? t('payment.details.oxyPay') :
+                            paymentMethod === 'faircoin' ? t('payment.details.faircoinPayment') : t('payment.details.paymentDetails')}
+                </Text>
+
+                {paymentMethod === 'card' && (
+                    <View style={styles.cardPaymentCard}>
+                        <View style={styles.cardPaymentContent}>
+                            <Ionicons name="card-outline" size={64} color={colors.primary} style={styles.cardPaymentIcon} />
+                            <Text style={styles.cardPaymentMainTitle}>{t('payment.details.creditCard')}</Text>
+                            <Text style={styles.cardPaymentSubtitle}>{t('payment.details.enterCardSecurely')}</Text>
+
+                            <View style={styles.cardPaymentFields}>
+                                <View style={styles.cardRowInfo}>
+                                    <Ionicons name="card-outline" size={24} color={colors.primary} style={styles.cardRowIcon} />
+                                    <Text style={styles.cardRowText}>{t('payment.details.acceptedCards')}</Text>
+                                </View>
+                                <TextField>
+                                    <TextFieldInput
+                                        floatingLabel
+                                        label={t('payment.details.cardNumber')}
+                                        value={cardDetails.number}
+                                        onChangeText={text => {
+                                            const formatted = text.replace(/\s/g, '').replace(/(\d{4})/g, '$1 ').trim();
+                                            onCardDetailsChange({ ...cardDetails, number: formatted });
+                                        }}
+                                        placeholder="1234 5678 9012 3456"
+                                        keyboardType="numeric"
+                                        maxLength={19}
+                                        accessibilityLabel="Card number"
+                                        accessibilityHint="Enter your 16-digit card number"
+                                    />
+                                </TextField>
+                                <View style={styles.cardFieldRow}>
+                                    <View style={styles.cardFieldHalfLeft}>
+                                        <TextField>
+                                            <TextFieldInput
+                                                floatingLabel
+                                                label={t('payment.details.expiry')}
+                                                value={cardDetails.expiry}
+                                                onChangeText={text => {
+                                                    const formatted = text.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2');
+                                                    onCardDetailsChange({ ...cardDetails, expiry: formatted });
+                                                }}
+                                                placeholder="MM/YY"
+                                                maxLength={5}
+                                                accessibilityLabel="Expiry date"
+                                                accessibilityHint="Enter expiry date in MM/YY format"
+                                            />
+                                        </TextField>
+                                    </View>
+                                    <View style={styles.cardFieldHalfRight}>
+                                        <TextField>
+                                            <TextFieldInput
+                                                floatingLabel
+                                                label="CVV"
+                                                value={cardDetails.cvv}
+                                                onChangeText={text => {
+                                                    const formatted = text.replace(/\D/g, '');
+                                                    onCardDetailsChange({ ...cardDetails, cvv: formatted });
+                                                }}
+                                                placeholder="123"
+                                                keyboardType="numeric"
+                                                maxLength={4}
+                                                accessibilityLabel="CVV"
+                                                accessibilityHint="Enter 3 or 4 digit security code"
+                                            />
+                                        </TextField>
+                                    </View>
+                                </View>
+                            </View>
+
+                            <View style={{ height: 18 }} />
+                            <Text style={styles.cardPaymentWaiting}>{t('payment.details.readyToProcess')}</Text>
+                        </View>
+                    </View>
+                )}
+
+                {paymentMethod === 'oxy' && (
+                    <View style={styles.oxyPayCard}>
+                        <View style={styles.oxyPayContent}>
+                            <Ionicons name="wallet-outline" size={64} color={colors.primary} style={styles.oxyPayIcon} />
+                            <Text style={styles.oxyPayMainTitle}>{t('payment.details.oxyPay')}</Text>
+                            <Text style={styles.oxyPaySubtitle}>{t('payment.details.payWithWallet')}</Text>
+                            <View style={styles.oxyPayBalanceBox}>
+                                <Text style={styles.oxyPayBalanceText}>{t('payment.details.balance', { balance: '⊜ 123.45' })}</Text>
+                            </View>
+                            <View style={{ height: 18 }} />
+                            <Text style={styles.oxyPayWaiting}>{t('payment.details.readyToProcess')}</Text>
+                        </View>
+                    </View>
+                )}
+
+                {paymentMethod === 'faircoin' && (
+                    <View style={styles.faircoinCard}>
+                        <View style={styles.faircoinContent}>
+                            <FAIRWalletIcon size={64} style={styles.faircoinIcon} />
+                            <Text style={styles.faircoinMainTitle}>FAIRWallet</Text>
+                            <Text style={styles.faircoinSubtitle}>{t('payment.details.payWithFairCoin')}</Text>
+                            {!isMobile && QRCodeComponent ? (
+                                <>
+                                    <Text style={styles.faircoinScanText}>{t('payment.details.scanToPay')}</Text>
+                                    <View style={styles.faircoinQRCard}>
+                                        <QRCodeComponent value={faircoinAddress} size={qrSize - 32} />
+                                        <View style={styles.faircoinQRBadge}>
+                                            <FAIRWalletIcon size={28} />
+                                        </View>
+                                    </View>
+                                </>
+                            ) : (
+                                <>
+                                    <Text style={styles.faircoinTitle}>{t('payment.details.fairWalletInstructions')}</Text>
+                                    <Text style={styles.faircoinAddress}>{faircoinAddress}</Text>
+                                    <TouchableOpacity
+                                        style={[styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 12, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]}
+                                        onPress={handleOpenFairWallet}
+                                        accessibilityRole="button"
+                                        accessibilityLabel={t('payment.details.openInFairWallet')}
+                                    >
+                                        <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
+                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>{t('payment.details.openInFairWallet')}</Text>
+                                    </TouchableOpacity>
+                                    <TouchableOpacity
+                                        style={[styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 10, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]}
+                                        onPress={handleCopyAddress}
+                                        accessibilityRole="button"
+                                        accessibilityLabel={t('payment.details.copyAddress')}
+                                    >
+                                        <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
+                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>{t('payment.details.copyAddress')}</Text>
+                                    </TouchableOpacity>
+                                </>
+                            )}
+                            <View style={{ height: 18 }} />
+                            <Text style={styles.faircoinWaiting}>{t('payment.details.waitingForPayment')}</Text>
+                        </View>
+                    </View>
+                )}
+            </View>
+
+            <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>
+    );
+};
+
+export default PaymentDetailsStep;

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

@@ -0,0 +1,90 @@
+import type React from 'react';
+import { useMemo } from 'react';
+import { View, Text, Animated } from 'react-native';
+import Ionicons from '../../icons/Ionicons';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { Button } from '@oxy.so/bloom/button';
+import FAIRWalletIcon from '../icon/FAIRWalletIcon';
+import { createPaymentStyles } from './paymentStyles';
+import type { PaymentMethod, PaymentColors, PaymentStepAnimations } from './types';
+import { useI18n } from '../../hooks/useI18n';
+
+interface PaymentMethodStepProps {
+    availablePaymentMethods: PaymentMethod[];
+    selectedMethod: string;
+    onSelectMethod: (method: string) => void;
+    colors: PaymentColors;
+    animations: PaymentStepAnimations;
+    onBack: () => void;
+    onNext: () => void;
+}
+
+const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
+    availablePaymentMethods,
+    selectedMethod,
+    onSelectMethod,
+    colors,
+    animations,
+    onBack,
+    onNext,
+}) => {
+    const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+    const { t } = useI18n();
+    const { fadeAnim, slideAnim, scaleAnim } = animations;
+
+    return (
+        <Animated.View
+            style={[
+                styles.stepContainer,
+                {
+                    opacity: fadeAnim,
+                    transform: [
+                        { translateY: slideAnim },
+                        { scale: scaleAnim },
+                    ],
+                },
+            ]}
+            accessibilityRole="none"
+            accessibilityLabel="Choose payment method step"
+        >
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>{t('payment.method.title')}</Text>
+
+                <SettingsListGroup>
+                    {availablePaymentMethods.map(method => {
+                        const iconColor = method.key === 'card' ? '#007AFF' :
+                            method.key === 'oxy' ? '#32D74B' :
+                                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>
+
+            <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>
+    );
+};
+
+export default PaymentMethodStep;

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

@@ -0,0 +1,125 @@
+import type React from 'react';
+import { useMemo } from 'react';
+import { View, Text, Animated, ActivityIndicator } from 'react-native';
+import Ionicons from '../../icons/Ionicons';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { Button } from '@oxy.so/bloom/button';
+import { createPaymentStyles } from './paymentStyles';
+import { PAYMENT_METHODS, getCurrencySymbol } from './constants';
+import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
+import { useI18n } from '../../hooks/useI18n';
+
+interface PaymentReviewStepProps {
+    amount: string | number;
+    currency: string;
+    paymentMethod: string;
+    cardDetails: CardDetails;
+    colors: PaymentColors;
+    animations: PaymentStepAnimations;
+    isPaying: boolean;
+    onBack: () => void;
+    onPay: () => void;
+}
+
+const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
+    amount,
+    currency,
+    paymentMethod,
+    cardDetails,
+    colors,
+    animations,
+    isPaying,
+    onBack,
+    onPay,
+}) => {
+    const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+    const { t } = useI18n();
+    const currencySymbol = getCurrencySymbol(currency);
+    const { fadeAnim, slideAnim, scaleAnim } = animations;
+
+    const selectedMethod = PAYMENT_METHODS.find(m => m.key === paymentMethod);
+
+    return (
+        <Animated.View
+            style={[
+                styles.stepContainer,
+                {
+                    opacity: fadeAnim,
+                    transform: [
+                        { translateY: slideAnim },
+                        { scale: scaleAnim },
+                    ],
+                },
+            ]}
+            accessibilityRole="none"
+            accessibilityLabel="Review payment step"
+        >
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>{t('payment.review.title')}</Text>
+
+                <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>
+
+            <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>
+    );
+};
+
+export default PaymentReviewStep;

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

@@ -0,0 +1,66 @@
+import type React from 'react';
+import { useMemo } from 'react';
+import { View, Text, Animated } from 'react-native';
+import Ionicons from '../../icons/Ionicons';
+import { Button } from '@oxy.so/bloom/button';
+import { createPaymentStyles } from './paymentStyles';
+import type { PaymentColors, PaymentStepAnimations } from './types';
+import { useI18n } from '../../hooks/useI18n';
+
+interface PaymentSuccessStepProps {
+    colors: PaymentColors;
+    animations: PaymentStepAnimations;
+    onDone: () => void;
+}
+
+const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
+    colors,
+    animations,
+    onDone,
+}) => {
+    const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+    const { t } = useI18n();
+    const { fadeAnim, slideAnim, scaleAnim } = animations;
+
+    return (
+        <Animated.View
+            style={[
+                styles.stepContainer,
+                {
+                    opacity: fadeAnim,
+                    transform: [
+                        { translateY: slideAnim },
+                        { scale: scaleAnim },
+                    ],
+                },
+            ]}
+            accessibilityRole="none"
+            accessibilityLabel="Payment complete"
+        >
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>{t('payment.success.title')}</Text>
+
+                <View style={styles.successCard}>
+                    <View style={styles.successContent}>
+                        <Ionicons
+                            name="checkmark-circle"
+                            size={64}
+                            color={colors.success}
+                            style={styles.successIcon}
+                        />
+                        <Text style={styles.successMainTitle}>{t('payment.success.heading')}</Text>
+                        <Text style={styles.successSubtitle}>{t('payment.success.thanks')}</Text>
+                        <View style={{ height: 18 }} />
+                        <Text style={styles.successMessage}>{t('payment.success.processed')}</Text>
+                    </View>
+                </View>
+            </View>
+
+            <Button variant="primary" onPress={onDone} size="small" icon={<Ionicons name="checkmark" size={16} />} iconPosition="right">
+                {t('payment.actions.done')}
+            </Button>
+        </Animated.View>
+    );
+};
+
+export default PaymentSuccessStep;