@oxyhq/services 5.17.18 → 5.18.1

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;

package/src/ui/components/payment/constants.ts

@@ -0,0 +1,39 @@
+import type { PaymentMethod } from './types';
+
+export const PAYMENT_METHODS: PaymentMethod[] = [
+    { key: 'card', label: 'Credit/Debit Card', icon: 'card-outline', description: 'Pay securely with your credit or debit card.' },
+    { key: 'oxy', label: 'Oxy Pay', icon: 'wallet-outline', description: 'Use your Oxy Pay in-app balance.' },
+    { key: 'faircoin', label: 'FAIRWallet', icon: 'qr-code-outline', description: 'Pay with FairCoin by scanning a QR code.' },
+];
+
+export const CURRENCY_SYMBOLS: Record<string, string> = {
+    FAIR: '⊜',
+    INR: '₹',
+    USD: '$',
+    EUR: '€',
+    GBP: '£',
+    JPY: '¥',
+    CNY: '¥',
+    AUD: 'A$',
+    CAD: 'C$',
+};
+
+export const CURRENCY_NAMES: Record<string, string> = {
+    FAIR: 'FairCoin',
+    INR: 'Indian Rupee',
+    USD: 'US Dollar',
+    EUR: 'Euro',
+    GBP: 'British Pound',
+    JPY: 'Japanese Yen',
+    CNY: 'Chinese Yuan',
+    AUD: 'Australian Dollar',
+    CAD: 'Canadian Dollar',
+};
+
+export const getCurrencySymbol = (currency: string): string => {
+    return CURRENCY_SYMBOLS[currency.toUpperCase()] || currency;
+};
+
+export const getCurrencyName = (currency: string): string => {
+    return CURRENCY_NAMES[currency.toUpperCase()] || currency;
+};

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

@@ -0,0 +1,9 @@
+export { default as PaymentSummaryStep } from './PaymentSummaryStep';
+export { default as PaymentMethodStep } from './PaymentMethodStep';
+export { default as PaymentDetailsStep } from './PaymentDetailsStep';
+export { default as PaymentReviewStep } from './PaymentReviewStep';
+export { default as PaymentSuccessStep } from './PaymentSuccessStep';
+
+export { createPaymentStyles } from './paymentStyles';
+export { PAYMENT_METHODS, CURRENCY_SYMBOLS, CURRENCY_NAMES, getCurrencySymbol, getCurrencyName } from './constants';
+export type { PaymentItem, PaymentGatewayResult, CardDetails, PaymentMethod, PaymentStepAnimations, PaymentColors } from './types';