@oxyhq/services 5.17.17 → 5.18.0

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;

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

@@ -0,0 +1,126 @@
+import React, { useMemo } from 'react';
+import { View, Text, Animated } from 'react-native';
+import { GroupedSection } from '../index';
+import GroupedPillButtons from '../internal/GroupedPillButtons';
+import { createPaymentStyles } from './paymentStyles';
+import { PAYMENT_METHODS, getCurrencySymbol } from './constants';
+import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
+
+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 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}>Review Payment</Text>
+
+                <GroupedSection
+                    items={[
+                        {
+                            id: 'secure-payment',
+                            icon: 'shield-check',
+                            iconColor: colors.success || '#4BB543',
+                            title: 'Secure payment',
+                            subtitle: 'Your payment is protected by industry-standard encryption',
+                        },
+                        {
+                            id: 'amount',
+                            icon: 'cash',
+                            iconColor: colors.primary,
+                            title: 'Amount',
+                            subtitle: `${currencySymbol} ${amount}`,
+                        },
+                        {
+                            id: 'payment-method',
+                            icon: selectedMethod?.icon as any,
+                            iconColor: colors.primary,
+                            title: 'Payment Method',
+                            subtitle: selectedMethod?.label,
+                        },
+                        ...(paymentMethod === 'card' ? [{
+                            id: 'card-details',
+                            icon: 'card' as const,
+                            iconColor: colors.primary,
+                            title: 'Card',
+                            subtitle: cardDetails.number.replace(/.(?=.{4})/g, '*'),
+                        }] : []),
+                        ...(paymentMethod === 'oxy' ? [{
+                            id: 'oxy-balance',
+                            icon: 'wallet' as const,
+                            iconColor: colors.primary,
+                            title: 'Oxy Pay Account',
+                            subtitle: 'Balance: ⊜ 123.45',
+                        }] : []),
+                        ...(paymentMethod === 'faircoin' ? [{
+                            id: 'faircoin-wallet',
+                            icon: 'qr-code' as const,
+                            iconColor: colors.primary,
+                            title: 'FairCoin Wallet',
+                            subtitle: 'Paid via QR',
+                        }] : []),
+                    ]}
+                />
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: onBack,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: isPaying ? 'Processing...' : 'Pay Now',
+                        onPress: onPay,
+                        icon: 'checkmark',
+                        variant: 'primary',
+                        loading: isPaying,
+                    },
+                ]}
+                colors={colors}
+            />
+        </Animated.View>
+    );
+};
+
+export default PaymentReviewStep;

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

@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import { View, Text, Animated } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../internal/GroupedPillButtons';
+import { createPaymentStyles } from './paymentStyles';
+import type { PaymentColors, PaymentStepAnimations } from './types';
+
+interface PaymentSuccessStepProps {
+    colors: PaymentColors;
+    animations: PaymentStepAnimations;
+    onDone: () => void;
+}
+
+const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
+    colors,
+    animations,
+    onDone,
+}) => {
+    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="Payment complete"
+        >
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>Payment Complete</Text>
+
+                <View style={styles.successCard}>
+                    <View style={styles.successContent}>
+                        <Ionicons
+                            name="checkmark-circle"
+                            size={64}
+                            color={colors.success || '#4BB543'}
+                            style={styles.successIcon}
+                        />
+                        <Text style={styles.successMainTitle}>Payment Successful!</Text>
+                        <Text style={styles.successSubtitle}>Thank you for your payment.</Text>
+                        <View style={{ height: 18 }} />
+                        <Text style={styles.successMessage}>Your transaction has been processed successfully.</Text>
+                    </View>
+                </View>
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Done',
+                        onPress: onDone,
+                        icon: 'checkmark',
+                        variant: 'primary',
+                    },
+                ]}
+                colors={colors}
+            />
+        </Animated.View>
+    );
+};
+
+export default PaymentSuccessStep;

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

@@ -0,0 +1,159 @@
+import React, { 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 { createPaymentStyles } from './paymentStyles';
+import { getCurrencySymbol, CURRENCY_SYMBOLS } from './constants';
+import type { PaymentItem, PaymentColors, PaymentStepAnimations } from './types';
+
+interface PaymentSummaryStepProps {
+    paymentItems: PaymentItem[];
+    amount: string | number;
+    currency: string;
+    description?: string;
+    colors: PaymentColors;
+    animations: PaymentStepAnimations;
+    onClose: () => void;
+    onNext: () => void;
+}
+
+const getItemTypeIcon = (type: string): string => {
+    switch (type) {
+        case 'product': return 'cart-outline';
+        case 'subscription': return 'repeat-outline';
+        case 'service': return 'construct-outline';
+        case 'fee': return 'cash-outline';
+        default: return 'pricetag-outline';
+    }
+};
+
+const PaymentSummaryStep: React.FC<PaymentSummaryStepProps> = ({
+    paymentItems,
+    amount,
+    currency,
+    description,
+    colors,
+    animations,
+    onClose,
+    onNext,
+}) => {
+    const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+    const currencySymbol = getCurrencySymbol(currency);
+    const { fadeAnim, slideAnim, scaleAnim } = animations;
+
+    return (
+        <Animated.View
+            style={[
+                styles.stepContainer,
+                {
+                    opacity: fadeAnim,
+                    transform: [
+                        { translateY: slideAnim },
+                        { scale: scaleAnim },
+                    ],
+                },
+            ]}
+            accessibilityRole="none"
+            accessibilityLabel="Payment summary step"
+        >
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>Payment Summary</Text>
+
+                <View style={styles.summaryCard}>
+                    <View style={styles.summaryCardContent}>
+                        <Ionicons
+                            name="receipt-outline"
+                            size={64}
+                            color={colors.primary}
+                            style={styles.summaryCardIcon}
+                        />
+                        <Text style={styles.summaryCardMainTitle}>
+                            {paymentItems.length > 0 ? 'Order Summary' : 'Payment'}
+                        </Text>
+                        <Text style={styles.summaryCardSubtitle}>
+                            {paymentItems.length > 0 ? 'Review your payment details' : 'Complete your payment'}
+                        </Text>
+
+                        {paymentItems.length > 0 ? (
+                            <>
+                                <View style={styles.summaryCardItems}>
+                                    <GroupedSection
+                                        items={paymentItems.map((item, idx) => ({
+                                            id: `item-${idx}`,
+                                            icon: getItemTypeIcon(item.type) as any,
+                                            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>
+                                            ),
+                                        }))}
+                                    />
+                                </View>
+
+                                <View style={styles.summaryCardDivider} />
+
+                                <View style={styles.summaryCardTotalSection}>
+                                    <View style={styles.summaryCardTotalRow}>
+                                        <Text style={styles.summaryCardTotalLabel}>Subtotal</Text>
+                                        <Text style={styles.summaryCardTotalValue}>{currencySymbol} {amount}</Text>
+                                    </View>
+                                    <View style={styles.summaryCardTotalRow}>
+                                        <Text style={styles.summaryCardTotalLabel}>Tax</Text>
+                                        <Text style={styles.summaryCardTotalValue}>{currencySymbol} 0.00</Text>
+                                    </View>
+                                    <View style={styles.summaryCardTotalRow}>
+                                        <Text style={styles.summaryCardTotalLabel}>Total</Text>
+                                        <Text style={styles.summaryCardTotalValue}>{currencySymbol} {amount}</Text>
+                                    </View>
+                                </View>
+                            </>
+                        ) : (
+                            <>
+                                <View style={styles.summaryCardAmount}>
+                                    <Text style={styles.summaryCardAmountLabel}>Amount to Pay</Text>
+                                    <Text style={styles.summaryCardAmountValue}>{currencySymbol} {amount}</Text>
+                                    {description && (
+                                        <Text style={styles.summaryCardAmountDescription}>{description}</Text>
+                                    )}
+                                </View>
+
+                                <View style={styles.summaryCardDivider} />
+
+                                <View style={styles.summaryCardTotalSection}>
+                                    <View style={styles.summaryCardTotalRow}>
+                                        <Text style={styles.summaryCardTotalLabel}>Total</Text>
+                                        <Text style={styles.summaryCardTotalValue}>{currencySymbol} {amount}</Text>
+                                    </View>
+                                </View>
+                            </>
+                        )}
+                    </View>
+                </View>
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Close',
+                        onPress: onClose,
+                        icon: 'close',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Continue',
+                        onPress: onNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                    },
+                ]}
+                colors={colors}
+            />
+        </Animated.View>
+    );
+};
+
+export default PaymentSummaryStep;