@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/OxyAuthScreen.js

@@ -0,0 +1,431 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const socket_io_client_1 = __importDefault(require("socket.io-client"));
+const styles_1 = require("../styles");
+const OxyContext_1 = require("../context/OxyContext");
+const react_native_qrcode_svg_1 = __importDefault(require("react-native-qrcode-svg"));
+const OxyLogo_1 = __importDefault(require("../components/OxyLogo"));
+const core_1 = require("@oxyhq/core");
+const debug = (0, core_1.createDebugLogger)('OxyAuthScreen');
+const OXY_ACCOUNTS_WEB_URL = 'https://accounts.oxy.so';
+const OXY_AUTH_WEB_URL = 'https://auth.oxy.so';
+// Auth session expiration (5 minutes)
+const AUTH_SESSION_EXPIRY_MS = 5 * 60 * 1000;
+// Polling interval (fallback if socket fails)
+const POLLING_INTERVAL_MS = 3000;
+const resolveAuthWebBaseUrl = (baseURL, authWebUrl) => {
+    if (authWebUrl) {
+        return authWebUrl;
+    }
+    try {
+        const url = new URL(baseURL);
+        if (url.port === '3001') {
+            url.port = '3000';
+            return url.origin;
+        }
+        if (url.hostname.startsWith('api.')) {
+            url.hostname = `auth.${url.hostname.slice(4)}`;
+            return url.origin;
+        }
+    }
+    catch {
+        // Ignore parsing errors, fall back to default.
+    }
+    return OXY_AUTH_WEB_URL;
+};
+const resolveAuthRedirectUri = async (authRedirectUri) => {
+    if (authRedirectUri) {
+        return authRedirectUri;
+    }
+    try {
+        const initialUrl = await react_native_1.Linking.getInitialURL();
+        if (!initialUrl) {
+            return null;
+        }
+        const parsed = new URL(initialUrl);
+        parsed.search = '';
+        parsed.hash = '';
+        return parsed.toString();
+    }
+    catch {
+        return null;
+    }
+};
+const getRedirectParams = (url) => {
+    try {
+        const parsed = new URL(url);
+        const sessionId = parsed.searchParams.get('session_id') ?? undefined;
+        const error = parsed.searchParams.get('error') ?? undefined;
+        if (!sessionId && !error) {
+            return null;
+        }
+        return { sessionId, error };
+    }
+    catch {
+        return null;
+    }
+};
+const OxyAuthScreen = ({ navigate, goBack, onAuthenticated, theme, }) => {
+    const themeValue = (theme === 'light' || theme === 'dark') ? theme : 'light';
+    const colors = (0, styles_1.useThemeColors)(themeValue);
+    const { oxyServices, signIn, switchSession } = (0, OxyContext_1.useOxy)();
+    const [authSession, setAuthSession] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [isWaiting, setIsWaiting] = (0, react_1.useState)(false);
+    const [connectionType, setConnectionType] = (0, react_1.useState)('socket');
+    const socketRef = (0, react_1.useRef)(null);
+    const pollingIntervalRef = (0, react_1.useRef)(null);
+    const isProcessingRef = (0, react_1.useRef)(false);
+    const linkingHandledRef = (0, react_1.useRef)(false);
+    // Handle successful authorization
+    const handleAuthSuccess = (0, react_1.useCallback)(async (sessionId) => {
+        if (isProcessingRef.current)
+            return;
+        isProcessingRef.current = true;
+        try {
+            // Switch to the new session (this will get token, user data, and update state)
+            if (switchSession) {
+                const user = await switchSession(sessionId);
+                if (onAuthenticated) {
+                    onAuthenticated(user);
+                }
+            }
+            else {
+                // Fallback if switchSession not available (shouldn't happen, but for safety)
+                await oxyServices.getTokenBySession(sessionId);
+                const user = await oxyServices.getUserBySession(sessionId);
+                if (onAuthenticated) {
+                    onAuthenticated(user);
+                }
+            }
+        }
+        catch (err) {
+            debug.error('Error completing auth:', err);
+            setError('Authorization successful but failed to complete sign in. Please try again.');
+            isProcessingRef.current = false;
+        }
+    }, [oxyServices, switchSession, onAuthenticated]);
+    // Connect to socket for real-time updates
+    const connectSocket = (0, react_1.useCallback)((sessionToken) => {
+        const baseURL = oxyServices.getBaseURL();
+        // Connect to the auth-session namespace (no authentication required)
+        const socket = (0, socket_io_client_1.default)(`${baseURL}/auth-session`, {
+            transports: ['websocket', 'polling'],
+            reconnection: true,
+            reconnectionAttempts: 3,
+            reconnectionDelay: 1000,
+        });
+        socketRef.current = socket;
+        socket.on('connect', () => {
+            debug.log('Auth socket connected');
+            // Join the room for this session token
+            socket.emit('join', sessionToken);
+            setConnectionType('socket');
+        });
+        socket.on('joined', () => {
+            debug.log('Joined auth session room');
+        });
+        socket.on('auth_update', (payload) => {
+            debug.log('Auth update received:', payload);
+            if (payload.status === 'authorized' && payload.sessionId) {
+                cleanup();
+                handleAuthSuccess(payload.sessionId);
+            }
+            else if (payload.status === 'cancelled') {
+                cleanup();
+                setError('Authorization was denied.');
+            }
+            else if (payload.status === 'expired') {
+                cleanup();
+                setError('Session expired. Please try again.');
+            }
+        });
+        socket.on('connect_error', (err) => {
+            debug.log('Socket connection error, falling back to polling:', (err instanceof Error ? err.message : null));
+            // Fall back to polling if socket fails
+            socket.disconnect();
+            startPolling(sessionToken);
+        });
+        socket.on('disconnect', () => {
+            debug.log('Auth socket disconnected');
+        });
+    }, [oxyServices, handleAuthSuccess]);
+    // Start polling for authorization (fallback)
+    const startPolling = (0, react_1.useCallback)((sessionToken) => {
+        setConnectionType('polling');
+        pollingIntervalRef.current = setInterval(async () => {
+            if (isProcessingRef.current)
+                return;
+            try {
+                const response = await oxyServices.makeRequest('GET', `/auth/session/status/${sessionToken}`, undefined, { cache: false });
+                if (response.authorized && response.sessionId) {
+                    cleanup();
+                    handleAuthSuccess(response.sessionId);
+                }
+                else if (response.status === 'cancelled') {
+                    cleanup();
+                    setError('Authorization was denied.');
+                }
+                else if (response.status === 'expired') {
+                    cleanup();
+                    setError('Session expired. Please try again.');
+                }
+            }
+            catch (err) {
+                // Silent fail for polling - will retry
+                debug.log('Auth polling error:', err);
+            }
+        }, POLLING_INTERVAL_MS);
+    }, [oxyServices, handleAuthSuccess]);
+    // Cleanup socket and polling
+    const cleanup = (0, react_1.useCallback)(() => {
+        setIsWaiting(false);
+        if (socketRef.current) {
+            socketRef.current.disconnect();
+            socketRef.current = null;
+        }
+        if (pollingIntervalRef.current) {
+            clearInterval(pollingIntervalRef.current);
+            pollingIntervalRef.current = null;
+        }
+    }, []);
+    // Generate a new auth session
+    const generateAuthSession = (0, react_1.useCallback)(async () => {
+        setIsLoading(true);
+        setError(null);
+        isProcessingRef.current = false;
+        try {
+            // Generate a unique session token for this auth request
+            const sessionToken = generateSessionToken();
+            const expiresAt = Date.now() + AUTH_SESSION_EXPIRY_MS;
+            // Register the auth session with the server
+            await oxyServices.makeRequest('POST', '/auth/session/create', {
+                sessionToken,
+                expiresAt,
+                appId: react_native_1.Platform.OS, // Identifier for requesting app
+            }, { cache: false });
+            setAuthSession({ sessionToken, expiresAt });
+            setIsWaiting(true);
+            // Try socket first, will fall back to polling if needed
+            connectSocket(sessionToken);
+        }
+        catch (err) {
+            setError((err instanceof Error ? err.message : null) || 'Failed to create auth session');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [oxyServices, connectSocket]);
+    // Generate a random session token
+    const generateSessionToken = () => {
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < 32; i++) {
+            result += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+        return result;
+    };
+    // Clean up on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            cleanup();
+        };
+    }, [cleanup]);
+    // Initialize auth session
+    (0, react_1.useEffect)(() => {
+        generateAuthSession();
+    }, []);
+    // Check if session expired
+    (0, react_1.useEffect)(() => {
+        if (authSession && Date.now() > authSession.expiresAt) {
+            cleanup();
+            setAuthSession(null);
+            setError('Session expired. Please try again.');
+        }
+    }, [authSession, cleanup]);
+    // Build the QR code data
+    const getQRData = () => {
+        if (!authSession)
+            return '';
+        // Format: oxyauth://{sessionToken}
+        return `oxyauth://${authSession.sessionToken}`;
+    };
+    // Open Oxy Auth web flow
+    const handleOpenAuth = (0, react_1.useCallback)(async () => {
+        if (!authSession)
+            return;
+        const authBaseUrl = resolveAuthWebBaseUrl(oxyServices.getBaseURL(), oxyServices.config?.authWebUrl);
+        const webUrl = new URL('/authorize', authBaseUrl);
+        webUrl.searchParams.set('token', authSession.sessionToken);
+        const redirectUri = await resolveAuthRedirectUri(oxyServices.config?.authRedirectUri);
+        if (redirectUri) {
+            webUrl.searchParams.set('redirect_uri', redirectUri);
+        }
+        try {
+            await react_native_1.Linking.openURL(webUrl.toString());
+        }
+        catch (err) {
+            setError('Unable to open Oxy Auth. Please try again or use the QR code.');
+        }
+    }, [authSession, oxyServices]);
+    // Refresh session
+    const handleRefresh = (0, react_1.useCallback)(() => {
+        cleanup();
+        generateAuthSession();
+    }, [generateAuthSession, cleanup]);
+    const handleAuthRedirect = (0, react_1.useCallback)((url) => {
+        const params = getRedirectParams(url);
+        if (!params) {
+            return;
+        }
+        if (params.error) {
+            cleanup();
+            setError('Authorization was denied.');
+            return;
+        }
+        if (params.sessionId) {
+            cleanup();
+            handleAuthSuccess(params.sessionId);
+        }
+    }, [cleanup, handleAuthSuccess]);
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS === 'web') {
+            return;
+        }
+        const subscription = react_native_1.Linking.addEventListener('url', ({ url }) => {
+            linkingHandledRef.current = true;
+            handleAuthRedirect(url);
+        });
+        react_native_1.Linking.getInitialURL()
+            .then((url) => {
+            if (url && !linkingHandledRef.current) {
+                handleAuthRedirect(url);
+            }
+        })
+            .catch(() => {
+            // Ignore linking errors; auth will still resolve via socket/polling.
+        });
+        return () => {
+            subscription.remove();
+        };
+    }, [handleAuthRedirect]);
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: colors.background }], children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: colors.primary }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.loadingText, { color: colors.secondaryText }], children: "Preparing sign in..." })] }));
+    }
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: colors.background }], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.errorText, { color: colors.error }], children: error }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.button, { backgroundColor: colors.primary }], onPress: handleRefresh, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.buttonText, children: "Try Again" }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: colors.background }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [(0, jsx_runtime_1.jsx)(OxyLogo_1.default, { width: 48, height: 48 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, { color: colors.text }], children: "Sign in with Oxy" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.subtitle, { color: colors.secondaryText }], children: "Use your Oxy identity to sign in securely" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.qrContainer, { backgroundColor: colors.inputBackground, borderColor: colors.border }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.qrWrapper, children: (0, jsx_runtime_1.jsx)(react_native_qrcode_svg_1.default, { value: getQRData(), size: 200, backgroundColor: "white", color: "black" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.qrHint, { color: colors.secondaryText }], children: "Scan with Oxy Accounts app" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.dividerContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.divider, { backgroundColor: colors.border }] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.dividerText, { color: colors.secondaryText }], children: "or" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.divider, { backgroundColor: colors.border }] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.button, { backgroundColor: colors.primary }], onPress: handleOpenAuth, children: [(0, jsx_runtime_1.jsx)(OxyLogo_1.default, { width: 20, height: 20, fillColor: "white", style: styles.buttonIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.buttonText, children: "Open Oxy Auth" })] }), isWaiting && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.statusContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: colors.primary }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.statusText, { color: colors.secondaryText }], children: "Waiting for authorization..." })] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.footer, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.footerText, { color: colors.secondaryText }], children: ["Don't have Oxy Accounts?", ' '] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => react_native_1.Linking.openURL(OXY_ACCOUNTS_WEB_URL), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.footerLink, { color: colors.primary }], children: "Get it here" }) })] }), goBack && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.cancelButton, onPress: goBack, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.cancelText, { color: colors.secondaryText }], children: "Cancel" }) }))] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    header: {
+        alignItems: 'center',
+        marginBottom: 32,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginTop: 16,
+    },
+    subtitle: {
+        fontSize: 14,
+        marginTop: 8,
+        textAlign: 'center',
+    },
+    qrContainer: {
+        padding: 24,
+        borderRadius: 16,
+        borderWidth: 1,
+        alignItems: 'center',
+    },
+    qrWrapper: {
+        padding: 16,
+        backgroundColor: 'white',
+        borderRadius: 12,
+    },
+    qrHint: {
+        marginTop: 16,
+        fontSize: 12,
+    },
+    dividerContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginVertical: 24,
+        width: '100%',
+    },
+    divider: {
+        flex: 1,
+        height: 1,
+    },
+    dividerText: {
+        marginHorizontal: 16,
+        fontSize: 14,
+    },
+    button: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 16,
+        paddingHorizontal: 24,
+        borderRadius: 12,
+        width: '100%',
+    },
+    buttonIcon: {
+        marginRight: 10,
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    statusContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 24,
+    },
+    statusText: {
+        marginLeft: 8,
+        fontSize: 14,
+    },
+    footer: {
+        flexDirection: 'row',
+        marginTop: 32,
+    },
+    footerText: {
+        fontSize: 14,
+    },
+    footerLink: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    cancelButton: {
+        marginTop: 16,
+        padding: 12,
+    },
+    cancelText: {
+        fontSize: 14,
+    },
+    loadingText: {
+        marginTop: 16,
+        fontSize: 14,
+    },
+    errorText: {
+        fontSize: 14,
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+});
+exports.default = OxyAuthScreen;

package/src/ui/screens/PaymentGatewayScreen.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+import type { PaymentItem, PaymentGatewayResult } from '../components/payment';
+export type { PaymentItem, PaymentGatewayResult };
+interface PaymentGatewayScreenProps extends BaseScreenProps {
+    onPaymentResult?: (result: PaymentGatewayResult) => void;
+    amount: string | number;
+    currency?: string;
+    onClose?: () => void;
+    paymentItems?: PaymentItem[];
+    description?: string;
+}
+declare const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps>;
+export default PaymentGatewayScreen;

package/src/ui/screens/PaymentGatewayScreen.js

@@ -0,0 +1,171 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const styles_1 = require("../styles");
+const themeUtils_1 = require("../utils/themeUtils");
+const GroupedPillButtons_1 = __importDefault(require("../components/internal/GroupedPillButtons"));
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useI18n_1 = require("../hooks/useI18n");
+const react_native_qrcode_svg_1 = __importDefault(require("react-native-qrcode-svg"));
+const payment_1 = require("../components/payment");
+const getUniqueItemTypes = (items) => {
+    const types = items.map(item => item.type);
+    return Array.from(new Set(types));
+};
+const PaymentGatewayScreen = (props) => {
+    const { navigate, goBack, theme, onPaymentResult, amount, currency = 'FAIR', onClose, paymentItems = [], description = '', } = props;
+    // DEV ENFORCEMENT: Only allow one type of payment item
+    if (process.env.NODE_ENV !== 'production' && paymentItems.length > 0) {
+        const uniqueTypes = getUniqueItemTypes(paymentItems);
+        if (uniqueTypes.length > 1) {
+            throw new Error(`PaymentGatewayScreen: paymentItems contains mixed types (${uniqueTypes.join(', ')}). Only one type is allowed per payment.`);
+        }
+    }
+    // Step states
+    const [currentStep, setCurrentStep] = (0, react_1.useState)(0);
+    const [paymentMethod, setPaymentMethod] = (0, react_1.useState)('card');
+    const [cardDetails, setCardDetails] = (0, react_1.useState)({ number: '', expiry: '', cvv: '' });
+    const [isPaying, setIsPaying] = (0, react_1.useState)(false);
+    // Animations
+    const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const slideAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const scaleAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const progressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.2)).current;
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const colors = (0, styles_1.useThemeColors)(normalizedTheme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme);
+    const { t } = (0, useI18n_1.useI18n)();
+    const styles = (0, react_1.useMemo)(() => (0, payment_1.createPaymentStyles)(colors), [colors]);
+    // Determine if the payment is for a recurring item (subscription)
+    const isRecurring = paymentItems.length > 0 && paymentItems[0].type === 'subscription';
+    // Filter payment methods: remove 'faircoin' if recurring
+    const availablePaymentMethods = (0, react_1.useMemo)(() => {
+        if (isRecurring) {
+            return payment_1.PAYMENT_METHODS.filter(m => m.key !== 'faircoin');
+        }
+        return payment_1.PAYMENT_METHODS;
+    }, [isRecurring]);
+    // Animation transitions
+    const animateTransition = (0, react_1.useCallback)((nextStep) => {
+        react_native_1.Animated.timing(scaleAnim, {
+            toValue: 0.95,
+            duration: 150,
+            useNativeDriver: react_native_1.Platform.OS !== 'web',
+        }).start();
+        react_native_1.Animated.timing(fadeAnim, {
+            toValue: 0,
+            duration: 200,
+            useNativeDriver: react_native_1.Platform.OS !== 'web',
+        }).start(() => {
+            setCurrentStep(nextStep);
+            slideAnim.setValue(-50);
+            scaleAnim.setValue(0.95);
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.timing(fadeAnim, {
+                    toValue: 1,
+                    duration: 300,
+                    useNativeDriver: react_native_1.Platform.OS !== 'web',
+                }),
+                react_native_1.Animated.spring(slideAnim, {
+                    toValue: 0,
+                    tension: 80,
+                    friction: 8,
+                    useNativeDriver: react_native_1.Platform.OS !== 'web',
+                }),
+                react_native_1.Animated.spring(scaleAnim, {
+                    toValue: 1,
+                    tension: 80,
+                    friction: 8,
+                    useNativeDriver: react_native_1.Platform.OS !== 'web',
+                })
+            ]).start();
+        });
+    }, [fadeAnim, slideAnim, scaleAnim]);
+    const nextStep = (0, react_1.useCallback)(() => {
+        if (currentStep < 4) {
+            react_native_1.Animated.timing(progressAnim, {
+                toValue: (currentStep + 2) / 5,
+                duration: 300,
+                useNativeDriver: false,
+            }).start();
+            animateTransition(currentStep + 1);
+        }
+    }, [currentStep, progressAnim, animateTransition]);
+    const prevStep = (0, react_1.useCallback)(() => {
+        if (currentStep > 0) {
+            react_native_1.Animated.timing(progressAnim, {
+                toValue: (currentStep) / 5,
+                duration: 300,
+                useNativeDriver: false,
+            }).start();
+            animateTransition(currentStep - 1);
+        }
+    }, [currentStep, progressAnim, animateTransition]);
+    // Pay handler - TODO: Replace with actual payment API
+    const handlePay = (0, react_1.useCallback)(() => {
+        setIsPaying(true);
+        setTimeout(() => {
+            setIsPaying(false);
+            nextStep();
+        }, 1500);
+    }, [nextStep]);
+    const handleDone = (0, react_1.useCallback)(() => {
+        if (onPaymentResult) {
+            onPaymentResult({ success: true });
+        }
+        navigate?.('AccountOverview');
+    }, [onPaymentResult, navigate]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        if (onPaymentResult) {
+            onPaymentResult({ success: false, error: 'cancelled' });
+        }
+        if (onClose) {
+            onClose();
+        }
+        else if (goBack) {
+            goBack();
+        }
+    }, [onPaymentResult, onClose, goBack]);
+    // Validate amount
+    if (!amount || Number.isNaN(Number(amount)) || Number(amount) <= 0) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.errorContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.errorText, children: t('payment.errors.invalidAmount') }), (0, jsx_runtime_1.jsx)(GroupedPillButtons_1.default, { buttons: [
+                        {
+                            text: t('payment.actions.close'),
+                            onPress: handleClose,
+                            icon: 'close',
+                            variant: 'primary',
+                        },
+                    ], colors: colors })] }));
+    }
+    // FairCoin address - TODO: Replace with dynamic address from backend
+    const faircoinAddress = 'f1abc1234FAIRCOINADDRESS';
+    const { width: windowWidth } = (0, react_native_1.useWindowDimensions)();
+    const isMobile = windowWidth < 600;
+    const qrSize = !isMobile
+        ? Math.min(windowWidth * 0.3, 220)
+        : Math.min(windowWidth * 0.8, 300);
+    const animations = { fadeAnim, slideAnim, scaleAnim };
+    const renderCurrentStep = () => {
+        switch (currentStep) {
+            case 0:
+                return ((0, jsx_runtime_1.jsx)(payment_1.PaymentSummaryStep, { paymentItems: paymentItems, amount: amount, currency: currency, description: description, colors: colors, animations: animations, onClose: handleClose, onNext: nextStep }));
+            case 1:
+                return ((0, jsx_runtime_1.jsx)(payment_1.PaymentMethodStep, { availablePaymentMethods: availablePaymentMethods, selectedMethod: paymentMethod, onSelectMethod: setPaymentMethod, colors: colors, animations: animations, onBack: prevStep, onNext: nextStep }));
+            case 2:
+                return ((0, jsx_runtime_1.jsx)(payment_1.PaymentDetailsStep, { paymentMethod: paymentMethod, cardDetails: cardDetails, onCardDetailsChange: setCardDetails, colors: colors, animations: animations, faircoinAddress: faircoinAddress, isMobile: isMobile, qrSize: qrSize, onBack: prevStep, onNext: nextStep, QRCodeComponent: react_native_qrcode_svg_1.default }));
+            case 3:
+                return ((0, jsx_runtime_1.jsx)(payment_1.PaymentReviewStep, { amount: amount, currency: currency, paymentMethod: paymentMethod, cardDetails: cardDetails, colors: colors, animations: animations, isPaying: isPaying, onBack: prevStep, onPay: handlePay }));
+            case 4:
+                return ((0, jsx_runtime_1.jsx)(payment_1.PaymentSuccessStep, { colors: colors, animations: animations, onDone: handleDone }));
+            default:
+                return null;
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.content, showsVerticalScrollIndicator: false, children: renderCurrentStep() }) }));
+};
+exports.default = PaymentGatewayScreen;

package/src/ui/screens/PremiumSubscriptionScreen.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+declare const PremiumSubscriptionScreen: React.FC<BaseScreenProps>;
+export default PremiumSubscriptionScreen;