@oxyhq/services 5.17.18 → 5.18.1

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

@@ -0,0 +1,294 @@
+import React, { useState, useCallback } from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    StyleSheet,
+    Modal,
+    ActivityIndicator,
+    KeyboardAvoidingView,
+    Platform,
+} from 'react-native';
+import OxyIcon from '../icon/OxyIcon';
+
+interface DeleteAccountModalProps {
+    visible: boolean;
+    username: string;
+    onClose: () => void;
+    onDelete: (password: string) => Promise<void>;
+    colors: {
+        background: string;
+        text: string;
+        secondaryText: string;
+        border: string;
+        danger: string;
+        inputBackground: string;
+    };
+    t: (key: string, params?: Record<string, string>) => string | undefined;
+}
+
+const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
+    visible,
+    username,
+    onClose,
+    onDelete,
+    colors,
+    t,
+}) => {
+    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 handleDelete = useCallback(async () => {
+        if (!isValid) return;
+
+        setError(null);
+        setIsDeleting(true);
+
+        try {
+            await onDelete(password);
+            // Modal will be closed by parent on success
+        } catch (err: any) {
+            setError(err?.message || t('deleteAccount.error') || 'Failed to delete account');
+        } finally {
+            setIsDeleting(false);
+        }
+    }, [isValid, password, onDelete, t]);
+
+    const handleClose = useCallback(() => {
+        if (isDeleting) return;
+        setPassword('');
+        setConfirmUsername('');
+        setError(null);
+        onClose();
+    }, [isDeleting, onClose]);
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="fade"
+            onRequestClose={handleClose}
+        >
+            <KeyboardAvoidingView
+                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                style={styles.overlay}
+            >
+                <TouchableOpacity
+                    style={styles.backdrop}
+                    activeOpacity={1}
+                    onPress={handleClose}
+                />
+                <View style={[styles.modal, { backgroundColor: colors.background }]}>
+                    <View style={styles.header}>
+                        <OxyIcon name="alert" size={32} color={colors.danger} />
+                        <Text style={[styles.title, { color: colors.danger }]}>
+                            {t('deleteAccount.title') || 'Delete Account'}
+                        </Text>
+                    </View>
+
+                    <Text style={[styles.warning, { color: colors.text }]}>
+                        {t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
+                    </Text>
+
+                    {error && (
+                        <View style={[styles.errorContainer, { backgroundColor: colors.danger + '20' }]}>
+                            <Text style={[styles.errorText, { color: colors.danger }]}>
+                                {error}
+                            </Text>
+                        </View>
+                    )}
+
+                    <View style={styles.inputGroup}>
+                        <Text style={[styles.label, { color: colors.secondaryText }]}>
+                            {t('deleteAccount.passwordLabel') || 'Enter your password'}
+                        </Text>
+                        <View style={[styles.inputContainer, { borderColor: colors.border, backgroundColor: colors.inputBackground }]}>
+                            <TextInput
+                                style={[styles.input, { color: colors.text }]}
+                                value={password}
+                                onChangeText={setPassword}
+                                placeholder={t('deleteAccount.passwordPlaceholder') || 'Password'}
+                                placeholderTextColor={colors.secondaryText}
+                                secureTextEntry={!showPassword}
+                                autoCapitalize="none"
+                                editable={!isDeleting}
+                            />
+                            <TouchableOpacity
+                                onPress={() => setShowPassword(!showPassword)}
+                                style={styles.eyeButton}
+                            >
+                                <OxyIcon
+                                    name={showPassword ? 'eye-off' : 'eye'}
+                                    size={20}
+                                    color={colors.secondaryText}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+
+                    <View style={styles.inputGroup}>
+                        <Text style={[styles.label, { color: colors.secondaryText }]}>
+                            {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
+                        </Text>
+                        <TextInput
+                            style={[
+                                styles.input,
+                                styles.confirmInput,
+                                {
+                                    borderColor: confirmUsername === username ? '#34C759' : colors.border,
+                                    backgroundColor: colors.inputBackground,
+                                    color: colors.text,
+                                },
+                            ]}
+                            value={confirmUsername}
+                            onChangeText={setConfirmUsername}
+                            placeholder={username}
+                            placeholderTextColor={colors.secondaryText}
+                            autoCapitalize="none"
+                            autoCorrect={false}
+                            editable={!isDeleting}
+                        />
+                    </View>
+
+                    <View style={styles.buttons}>
+                        <TouchableOpacity
+                            style={[styles.button, styles.cancelButton, { borderColor: colors.border }]}
+                            onPress={handleClose}
+                            disabled={isDeleting}
+                        >
+                            <Text style={[styles.buttonText, { color: colors.text }]}>
+                                {t('common.cancel') || 'Cancel'}
+                            </Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            style={[
+                                styles.button,
+                                styles.deleteButton,
+                                { backgroundColor: isValid ? colors.danger : colors.danger + '50' },
+                            ]}
+                            onPress={handleDelete}
+                            disabled={!isValid || isDeleting}
+                        >
+                            {isDeleting ? (
+                                <ActivityIndicator color="#fff" size="small" />
+                            ) : (
+                                <Text style={styles.deleteButtonText}>
+                                    {t('deleteAccount.confirm') || 'Delete Forever'}
+                                </Text>
+                            )}
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </KeyboardAvoidingView>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    modal: {
+        width: '90%',
+        maxWidth: 400,
+        borderRadius: 16,
+        padding: 24,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 8,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 16,
+        gap: 12,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: '700',
+    },
+    warning: {
+        fontSize: 14,
+        lineHeight: 20,
+        marginBottom: 20,
+    },
+    errorContainer: {
+        padding: 12,
+        borderRadius: 8,
+        marginBottom: 16,
+    },
+    errorText: {
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    inputGroup: {
+        marginBottom: 16,
+    },
+    label: {
+        fontSize: 13,
+        marginBottom: 8,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderRadius: 8,
+    },
+    input: {
+        flex: 1,
+        fontSize: 16,
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+    },
+    confirmInput: {
+        borderWidth: 1,
+        borderRadius: 8,
+    },
+    eyeButton: {
+        padding: 12,
+    },
+    buttons: {
+        flexDirection: 'row',
+        gap: 12,
+        marginTop: 8,
+    },
+    button: {
+        flex: 1,
+        paddingVertical: 14,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    cancelButton: {
+        borderWidth: 1,
+    },
+    deleteButton: {
+        minHeight: 48,
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    deleteButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#fff',
+    },
+});
+
+export default DeleteAccountModal;

package/src/ui/components/modals/index.ts

@@ -0,0 +1 @@
+export { default as DeleteAccountModal } from './DeleteAccountModal';

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

@@ -0,0 +1,222 @@
+import React, { 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 TextField from '../TextField';
+import { FAIRWalletIcon } from '../icon';
+import { createPaymentStyles } from './paymentStyles';
+import { toast } from '../../../lib/sonner';
+import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
+
+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 { fadeAnim, slideAnim, scaleAnim } = animations;
+
+    const handleCopyAddress = () => {
+        Clipboard.setString(faircoinAddress);
+        toast('Address copied to clipboard!');
+    };
+
+    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' ? 'Card Details' :
+                        paymentMethod === 'oxy' ? 'Oxy Pay' :
+                            paymentMethod === 'faircoin' ? 'FairCoin Payment' : 'Payment Details'}
+                </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}>Credit Card</Text>
+                            <Text style={styles.cardPaymentSubtitle}>Enter your card details securely</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}>We accept Visa, Mastercard, and more</Text>
+                                </View>
+                                <TextField
+                                    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}
+                                    style={styles.cardFieldContainer}
+                                    left={<Ionicons name="card-outline" size={18} color={colors.primary} />}
+                                    accessibilityLabel="Card number"
+                                    accessibilityHint="Enter your 16-digit card number"
+                                />
+                                <View style={styles.cardFieldRow}>
+                                    <TextField
+                                        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}
+                                        style={styles.cardFieldHalfLeft}
+                                        left={<Ionicons name="calendar-outline" size={16} color={colors.primary} />}
+                                        accessibilityLabel="Expiry date"
+                                        accessibilityHint="Enter expiry date in MM/YY format"
+                                    />
+                                    <TextField
+                                        value={cardDetails.cvv}
+                                        onChangeText={text => {
+                                            const formatted = text.replace(/\D/g, '');
+                                            onCardDetailsChange({ ...cardDetails, cvv: formatted });
+                                        }}
+                                        placeholder="123"
+                                        keyboardType="numeric"
+                                        maxLength={4}
+                                        style={styles.cardFieldHalfRight}
+                                        left={<Ionicons name="lock-closed-outline" size={16} color={colors.primary} />}
+                                        accessibilityLabel="CVV"
+                                        accessibilityHint="Enter 3 or 4 digit security code"
+                                    />
+                                </View>
+                            </View>
+
+                            <View style={{ height: 18 }} />
+                            <Text style={styles.cardPaymentWaiting}>Ready to process payment...</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}>Oxy Pay</Text>
+                            <Text style={styles.oxyPaySubtitle}>Pay with your in-app wallet</Text>
+                            <View style={styles.oxyPayBalanceBox}>
+                                <Text style={styles.oxyPayBalanceText}>Balance: ⊜ 123.45</Text>
+                            </View>
+                            <View style={{ height: 18 }} />
+                            <Text style={styles.oxyPayWaiting}>Ready to process payment...</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}>Pay with FairCoin</Text>
+                            {!isMobile && QRCodeComponent ? (
+                                <>
+                                    <Text style={styles.faircoinScanText}>Scan to Pay</Text>
+                                    <View style={styles.faircoinQRCard}>
+                                        <QRCodeComponent value={faircoinAddress} size={qrSize - 32} />
+                                        <View style={styles.faircoinQRBadge}>
+                                            <FAIRWalletIcon size={28} />
+                                        </View>
+                                    </View>
+                                </>
+                            ) : (
+                                <>
+                                    <Text style={styles.faircoinTitle}>Use the options below to pay with FAIRWallet</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="Open in FAIRWallet"
+                                    >
+                                        <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
+                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>Open in FAIRWallet</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="Copy FairCoin address"
+                                    >
+                                        <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
+                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>Copy Address</Text>
+                                    </TouchableOpacity>
+                                </>
+                            )}
+                            <View style={{ height: 18 }} />
+                            <Text style={styles.faircoinWaiting}>Waiting for payment...</Text>
+                        </View>
+                    </View>
+                )}
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: onBack,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Continue',
+                        onPress: onNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                        disabled: paymentMethod === 'card' && !isCardValid,
+                    },
+                ]}
+                colors={colors}
+            />
+        </Animated.View>
+    );
+};
+
+export default PaymentDetailsStep;

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

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import { View, Text, Animated } from 'react-native';
+import { GroupedSection } from '../index';
+import GroupedPillButtons from '../internal/GroupedPillButtons';
+import { FAIRWalletIcon } from '../icon';
+import { createPaymentStyles } from './paymentStyles';
+import type { PaymentMethod, PaymentColors, PaymentStepAnimations } from './types';
+
+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 { 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}>Choose Payment Method</Text>
+
+                <GroupedSection
+                    items={availablePaymentMethods.map(method => ({
+                        id: method.key,
+                        icon: method.key === 'faircoin' ? undefined : method.icon,
+                        iconColor: method.key === 'card' ? '#007AFF' :
+                            method.key === 'oxy' ? '#32D74B' :
+                                method.key === 'faircoin' ? '#9ffb50' : colors.primary,
+                        title: method.label,
+                        subtitle: method.description,
+                        onPress: () => onSelectMethod(method.key),
+                        selected: selectedMethod === method.key,
+                        showChevron: false,
+                        customIcon: method.key === 'faircoin' ? (
+                            <FAIRWalletIcon size={20} />
+                        ) : undefined,
+                    }))}
+                />
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: onBack,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Continue',
+                        onPress: onNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                    },
+                ]}
+                colors={colors}
+            />
+        </Animated.View>
+    );
+};
+
+export default PaymentMethodStep;