@oxyhq/services 6.9.13 → 6.9.15

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

@@ -0,0 +1,65 @@
+"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 vector_icons_1 = require("@expo/vector-icons");
+const GroupedPillButtons_1 = __importDefault(require("../internal/GroupedPillButtons"));
+const TextField_1 = __importDefault(require("../TextField"));
+const icon_1 = require("../icon");
+const paymentStyles_1 = require("./paymentStyles");
+const sonner_1 = require("../../../lib/sonner");
+const useI18n_1 = require("../../hooks/useI18n");
+const PaymentDetailsStep = ({ paymentMethod, cardDetails, onCardDetailsChange, colors, animations, faircoinAddress, isMobile, qrSize, onBack, onNext, QRCodeComponent, }) => {
+    const styles = (0, react_1.useMemo)(() => (0, paymentStyles_1.createPaymentStyles)(colors), [colors]);
+    const { t } = (0, useI18n_1.useI18n)();
+    const { fadeAnim, slideAnim, scaleAnim } = animations;
+    const handleCopyAddress = () => {
+        react_native_1.Clipboard.setString(faircoinAddress);
+        (0, sonner_1.toast)(t('payment.details.addressCopied'));
+    };
+    const handleOpenFairWallet = () => {
+        const url = `fairwallet://pay?address=${faircoinAddress}`;
+        react_native_1.Linking.openURL(url);
+    };
+    const isCardValid = cardDetails.number && cardDetails.expiry && cardDetails.cvv;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [
+            styles.stepContainer,
+            {
+                opacity: fadeAnim,
+                transform: [
+                    { translateY: slideAnim },
+                    { scale: scaleAnim },
+                ],
+            },
+        ], accessibilityRole: "none", accessibilityLabel: "Enter payment details step", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: paymentMethod === 'card' ? t('payment.details.cardDetails') :
+                            paymentMethod === 'oxy' ? t('payment.details.oxyPay') :
+                                paymentMethod === 'faircoin' ? t('payment.details.faircoinPayment') : t('payment.details.paymentDetails') }), paymentMethod === 'card' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.cardPaymentCard, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.cardPaymentContent, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "card-outline", size: 64, color: colors.primary, style: styles.cardPaymentIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardPaymentMainTitle, children: t('payment.details.creditCard') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardPaymentSubtitle, children: t('payment.details.enterCardSecurely') }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.cardPaymentFields, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.cardRowInfo, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "card-outline", size: 24, color: colors.primary, style: styles.cardRowIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardRowText, children: t('payment.details.acceptedCards') })] }), (0, jsx_runtime_1.jsx)(TextField_1.default, { 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: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "card-outline", size: 18, color: colors.primary }), accessibilityLabel: "Card number", accessibilityHint: "Enter your 16-digit card number" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.cardFieldRow, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { 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: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "calendar-outline", size: 16, color: colors.primary }), accessibilityLabel: "Expiry date", accessibilityHint: "Enter expiry date in MM/YY format" }), (0, jsx_runtime_1.jsx)(TextField_1.default, { 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: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "lock-closed-outline", size: 16, color: colors.primary }), accessibilityLabel: "CVV", accessibilityHint: "Enter 3 or 4 digit security code" })] })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height: 18 } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardPaymentWaiting, children: t('payment.details.readyToProcess') })] }) })), paymentMethod === 'oxy' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.oxyPayCard, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.oxyPayContent, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "wallet-outline", size: 64, color: colors.primary, style: styles.oxyPayIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.oxyPayMainTitle, children: t('payment.details.oxyPay') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.oxyPaySubtitle, children: t('payment.details.payWithWallet') }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.oxyPayBalanceBox, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.oxyPayBalanceText, children: t('payment.details.balance', { balance: '⊜ 123.45' }) }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height: 18 } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.oxyPayWaiting, children: t('payment.details.readyToProcess') })] }) })), paymentMethod === 'faircoin' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.faircoinCard, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.faircoinContent, children: [(0, jsx_runtime_1.jsx)(icon_1.FAIRWalletIcon, { size: 64, style: styles.faircoinIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.faircoinMainTitle, children: "FAIRWallet" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.faircoinSubtitle, children: t('payment.details.payWithFairCoin') }), !isMobile && QRCodeComponent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.faircoinScanText, children: t('payment.details.scanToPay') }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.faircoinQRCard, children: [(0, jsx_runtime_1.jsx)(QRCodeComponent, { value: faircoinAddress, size: qrSize - 32 }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.faircoinQRBadge, children: (0, jsx_runtime_1.jsx)(icon_1.FAIRWalletIcon, { size: 28 }) })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.faircoinTitle, children: t('payment.details.fairWalletInstructions') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.faircoinAddress, children: faircoinAddress }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 12, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }], onPress: handleOpenFairWallet, accessibilityRole: "button", accessibilityLabel: t('payment.details.openInFairWallet'), children: [(0, jsx_runtime_1.jsx)(icon_1.FAIRWalletIcon, { size: 20, style: { marginRight: 8 } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }], children: t('payment.details.openInFairWallet') })] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 10, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }], onPress: handleCopyAddress, accessibilityRole: "button", accessibilityLabel: t('payment.details.copyAddress'), children: [(0, jsx_runtime_1.jsx)(icon_1.FAIRWalletIcon, { size: 20, style: { marginRight: 8 } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }], children: t('payment.details.copyAddress') })] })] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height: 18 } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.faircoinWaiting, children: t('payment.details.waitingForPayment') })] }) }))] }), (0, jsx_runtime_1.jsx)(GroupedPillButtons_1.default, { buttons: [
+                    {
+                        text: t('payment.actions.back'),
+                        onPress: onBack,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: t('payment.actions.continue'),
+                        onPress: onNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                        disabled: paymentMethod === 'card' && !isCardValid,
+                    },
+                ], colors: colors })] }));
+};
+exports.default = PaymentDetailsStep;

package/src/ui/components/payment/PaymentMethodStep.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+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;
+}
+declare const PaymentMethodStep: React.FC<PaymentMethodStepProps>;
+export default PaymentMethodStep;

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

@@ -0,0 +1,54 @@
+"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 index_1 = require("../index");
+const GroupedPillButtons_1 = __importDefault(require("../internal/GroupedPillButtons"));
+const icon_1 = require("../icon");
+const paymentStyles_1 = require("./paymentStyles");
+const useI18n_1 = require("../../hooks/useI18n");
+const PaymentMethodStep = ({ availablePaymentMethods, selectedMethod, onSelectMethod, colors, animations, onBack, onNext, }) => {
+    const styles = (0, react_1.useMemo)(() => (0, paymentStyles_1.createPaymentStyles)(colors), [colors]);
+    const { t } = (0, useI18n_1.useI18n)();
+    const { fadeAnim, slideAnim, scaleAnim } = animations;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [
+            styles.stepContainer,
+            {
+                opacity: fadeAnim,
+                transform: [
+                    { translateY: slideAnim },
+                    { scale: scaleAnim },
+                ],
+            },
+        ], accessibilityRole: "none", accessibilityLabel: "Choose payment method step", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: t('payment.method.title') }), (0, jsx_runtime_1.jsx)(index_1.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: t(`payment.methods.${method.key}.label`),
+                            subtitle: t(`payment.methods.${method.key}.description`),
+                            onPress: () => onSelectMethod(method.key),
+                            selected: selectedMethod === method.key,
+                            showChevron: false,
+                            customIcon: method.key === 'faircoin' ? ((0, jsx_runtime_1.jsx)(icon_1.FAIRWalletIcon, { size: 20 })) : undefined,
+                        })) })] }), (0, jsx_runtime_1.jsx)(GroupedPillButtons_1.default, { buttons: [
+                    {
+                        text: t('payment.actions.back'),
+                        onPress: onBack,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: t('payment.actions.continue'),
+                        onPress: onNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                    },
+                ], colors: colors })] }));
+};
+exports.default = PaymentMethodStep;

package/src/ui/components/payment/PaymentReviewStep.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+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;
+}
+declare const PaymentReviewStep: React.FC<PaymentReviewStepProps>;
+export default PaymentReviewStep;

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

@@ -0,0 +1,88 @@
+"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 index_1 = require("../index");
+const GroupedPillButtons_1 = __importDefault(require("../internal/GroupedPillButtons"));
+const paymentStyles_1 = require("./paymentStyles");
+const constants_1 = require("./constants");
+const useI18n_1 = require("../../hooks/useI18n");
+const PaymentReviewStep = ({ amount, currency, paymentMethod, cardDetails, colors, animations, isPaying, onBack, onPay, }) => {
+    const styles = (0, react_1.useMemo)(() => (0, paymentStyles_1.createPaymentStyles)(colors), [colors]);
+    const { t } = (0, useI18n_1.useI18n)();
+    const currencySymbol = (0, constants_1.getCurrencySymbol)(currency);
+    const { fadeAnim, slideAnim, scaleAnim } = animations;
+    const selectedMethod = constants_1.PAYMENT_METHODS.find(m => m.key === paymentMethod);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [
+            styles.stepContainer,
+            {
+                opacity: fadeAnim,
+                transform: [
+                    { translateY: slideAnim },
+                    { scale: scaleAnim },
+                ],
+            },
+        ], accessibilityRole: "none", accessibilityLabel: "Review payment step", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: t('payment.review.title') }), (0, jsx_runtime_1.jsx)(index_1.GroupedSection, { items: [
+                            {
+                                id: 'secure-payment',
+                                icon: 'shield-check',
+                                iconColor: colors.success || '#4BB543',
+                                title: t('payment.review.securePayment'),
+                                subtitle: t('payment.review.securePaymentDesc'),
+                            },
+                            {
+                                id: 'amount',
+                                icon: 'cash',
+                                iconColor: colors.primary,
+                                title: t('payment.review.amount'),
+                                subtitle: `${currencySymbol} ${amount}`,
+                            },
+                            {
+                                id: 'payment-method',
+                                icon: selectedMethod?.icon,
+                                iconColor: colors.primary,
+                                title: t('payment.review.paymentMethod'),
+                                subtitle: selectedMethod ? t(`payment.methods.${selectedMethod.key}.label`) : undefined,
+                            },
+                            ...(paymentMethod === 'card' ? [{
+                                    id: 'card-details',
+                                    icon: 'card',
+                                    iconColor: colors.primary,
+                                    title: t('payment.review.card'),
+                                    subtitle: cardDetails.number.replace(/.(?=.{4})/g, '*'),
+                                }] : []),
+                            ...(paymentMethod === 'oxy' ? [{
+                                    id: 'oxy-balance',
+                                    icon: 'wallet',
+                                    iconColor: colors.primary,
+                                    title: t('payment.review.oxyPayAccount'),
+                                    subtitle: t('payment.details.balance', { balance: '⊜ 123.45' }),
+                                }] : []),
+                            ...(paymentMethod === 'faircoin' ? [{
+                                    id: 'faircoin-wallet',
+                                    icon: 'qr-code',
+                                    iconColor: colors.primary,
+                                    title: t('payment.review.faircoinWallet'),
+                                    subtitle: t('payment.review.paidViaQR'),
+                                }] : []),
+                        ] })] }), (0, jsx_runtime_1.jsx)(GroupedPillButtons_1.default, { buttons: [
+                    {
+                        text: t('payment.actions.back'),
+                        onPress: onBack,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: isPaying ? t('payment.review.processing') : t('payment.review.payNow'),
+                        onPress: onPay,
+                        icon: 'checkmark',
+                        variant: 'primary',
+                        loading: isPaying,
+                    },
+                ], colors: colors })] }));
+};
+exports.default = PaymentReviewStep;

package/src/ui/components/payment/PaymentSuccessStep.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+import type { PaymentColors, PaymentStepAnimations } from './types';
+interface PaymentSuccessStepProps {
+    colors: PaymentColors;
+    animations: PaymentStepAnimations;
+    onDone: () => void;
+}
+declare const PaymentSuccessStep: React.FC<PaymentSuccessStepProps>;
+export default PaymentSuccessStep;

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

@@ -0,0 +1,35 @@
+"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 vector_icons_1 = require("@expo/vector-icons");
+const GroupedPillButtons_1 = __importDefault(require("../internal/GroupedPillButtons"));
+const paymentStyles_1 = require("./paymentStyles");
+const useI18n_1 = require("../../hooks/useI18n");
+const PaymentSuccessStep = ({ colors, animations, onDone, }) => {
+    const styles = (0, react_1.useMemo)(() => (0, paymentStyles_1.createPaymentStyles)(colors), [colors]);
+    const { t } = (0, useI18n_1.useI18n)();
+    const { fadeAnim, slideAnim, scaleAnim } = animations;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [
+            styles.stepContainer,
+            {
+                opacity: fadeAnim,
+                transform: [
+                    { translateY: slideAnim },
+                    { scale: scaleAnim },
+                ],
+            },
+        ], accessibilityRole: "none", accessibilityLabel: "Payment complete", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: t('payment.success.title') }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.successCard, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.successContent, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "checkmark-circle", size: 64, color: colors.success || '#4BB543', style: styles.successIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.successMainTitle, children: t('payment.success.heading') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.successSubtitle, children: t('payment.success.thanks') }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height: 18 } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.successMessage, children: t('payment.success.processed') })] }) })] }), (0, jsx_runtime_1.jsx)(GroupedPillButtons_1.default, { buttons: [
+                    {
+                        text: t('payment.actions.done'),
+                        onPress: onDone,
+                        icon: 'checkmark',
+                        variant: 'primary',
+                    },
+                ], colors: colors })] }));
+};
+exports.default = PaymentSuccessStep;

package/src/ui/components/payment/PaymentSummaryStep.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+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;
+}
+declare const PaymentSummaryStep: React.FC<PaymentSummaryStepProps>;
+export default PaymentSummaryStep;

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

@@ -0,0 +1,60 @@
+"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 vector_icons_1 = require("@expo/vector-icons");
+const index_1 = require("../index");
+const GroupedPillButtons_1 = __importDefault(require("../internal/GroupedPillButtons"));
+const paymentStyles_1 = require("./paymentStyles");
+const constants_1 = require("./constants");
+const useI18n_1 = require("../../hooks/useI18n");
+const getItemTypeIcon = (type) => {
+    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 = ({ paymentItems, amount, currency, description, colors, animations, onClose, onNext, }) => {
+    const styles = (0, react_1.useMemo)(() => (0, paymentStyles_1.createPaymentStyles)(colors), [colors]);
+    const { t } = (0, useI18n_1.useI18n)();
+    const currencySymbol = (0, constants_1.getCurrencySymbol)(currency);
+    const { fadeAnim, slideAnim, scaleAnim } = animations;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [
+            styles.stepContainer,
+            {
+                opacity: fadeAnim,
+                transform: [
+                    { translateY: slideAnim },
+                    { scale: scaleAnim },
+                ],
+            },
+        ], accessibilityRole: "none", accessibilityLabel: "Payment summary step", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: t('payment.summary.title') }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.summaryCard, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryCardContent, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "receipt-outline", size: 64, color: colors.primary, style: styles.summaryCardIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.summaryCardMainTitle, children: paymentItems.length > 0 ? t('payment.summary.orderSummary') : t('payment.summary.payment') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.summaryCardSubtitle, children: paymentItems.length > 0 ? t('payment.summary.reviewDetails') : t('payment.summary.completePayment') }), paymentItems.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.summaryCardItems, children: (0, jsx_runtime_1.jsx)(index_1.GroupedSection, { items: paymentItems.map((item, idx) => ({
+                                                    id: `item-${idx}`,
+                                                    icon: getItemTypeIcon(item.type),
+                                                    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 ? (constants_1.CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol} ${item.price * (item.quantity ?? 1)}`,
+                                                    customContent: ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.summaryItemPrice, children: [item.currency ? (constants_1.CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol, " ", item.price * (item.quantity ?? 1)] })),
+                                                })) }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.summaryCardDivider }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryCardTotalSection, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryCardTotalRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.summaryCardTotalLabel, children: t('payment.summary.subtotal') }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.summaryCardTotalValue, children: [currencySymbol, " ", amount] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryCardTotalRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.summaryCardTotalLabel, children: t('payment.summary.tax') }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.summaryCardTotalValue, children: [currencySymbol, " 0.00"] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryCardTotalRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.summaryCardTotalLabel, children: t('payment.summary.total') }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.summaryCardTotalValue, children: [currencySymbol, " ", amount] })] })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryCardAmount, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.summaryCardAmountLabel, children: t('payment.summary.amountToPay') }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.summaryCardAmountValue, children: [currencySymbol, " ", amount] }), description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.summaryCardAmountDescription, children: description }))] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.summaryCardDivider }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.summaryCardTotalSection, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.summaryCardTotalRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.summaryCardTotalLabel, children: t('payment.summary.total') }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.summaryCardTotalValue, children: [currencySymbol, " ", amount] })] }) })] }))] }) })] }), (0, jsx_runtime_1.jsx)(GroupedPillButtons_1.default, { buttons: [
+                    {
+                        text: t('payment.actions.close'),
+                        onPress: onClose,
+                        icon: 'close',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: t('payment.actions.continue'),
+                        onPress: onNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                    },
+                ], colors: colors })] }));
+};
+exports.default = PaymentSummaryStep;

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

@@ -0,0 +1,6 @@
+import type { PaymentMethod } from './types';
+export declare const PAYMENT_METHODS: PaymentMethod[];
+export declare const CURRENCY_SYMBOLS: Record<string, string>;
+export declare const CURRENCY_NAMES: Record<string, string>;
+export declare const getCurrencySymbol: (currency: string) => string;
+export declare const getCurrencyName: (currency: string) => string;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrencyName = exports.getCurrencySymbol = exports.CURRENCY_NAMES = exports.CURRENCY_SYMBOLS = exports.PAYMENT_METHODS = void 0;
+exports.PAYMENT_METHODS = [
+    { 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.' },
+];
+exports.CURRENCY_SYMBOLS = {
+    FAIR: '⊜',
+    INR: '₹',
+    USD: '$',
+    EUR: '€',
+    GBP: '£',
+    JPY: '¥',
+    CNY: '¥',
+    AUD: 'A$',
+    CAD: 'C$',
+};
+exports.CURRENCY_NAMES = {
+    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',
+};
+const getCurrencySymbol = (currency) => {
+    return exports.CURRENCY_SYMBOLS[currency.toUpperCase()] || currency;
+};
+exports.getCurrencySymbol = getCurrencySymbol;
+const getCurrencyName = (currency) => {
+    return exports.CURRENCY_NAMES[currency.toUpperCase()] || currency;
+};
+exports.getCurrencyName = getCurrencyName;

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

@@ -0,0 +1,8 @@
+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';

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrencyName = exports.getCurrencySymbol = exports.CURRENCY_NAMES = exports.CURRENCY_SYMBOLS = exports.PAYMENT_METHODS = exports.createPaymentStyles = exports.PaymentSuccessStep = exports.PaymentReviewStep = exports.PaymentDetailsStep = exports.PaymentMethodStep = exports.PaymentSummaryStep = void 0;
+var PaymentSummaryStep_1 = require("./PaymentSummaryStep");
+Object.defineProperty(exports, "PaymentSummaryStep", { enumerable: true, get: function () { return __importDefault(PaymentSummaryStep_1).default; } });
+var PaymentMethodStep_1 = require("./PaymentMethodStep");
+Object.defineProperty(exports, "PaymentMethodStep", { enumerable: true, get: function () { return __importDefault(PaymentMethodStep_1).default; } });
+var PaymentDetailsStep_1 = require("./PaymentDetailsStep");
+Object.defineProperty(exports, "PaymentDetailsStep", { enumerable: true, get: function () { return __importDefault(PaymentDetailsStep_1).default; } });
+var PaymentReviewStep_1 = require("./PaymentReviewStep");
+Object.defineProperty(exports, "PaymentReviewStep", { enumerable: true, get: function () { return __importDefault(PaymentReviewStep_1).default; } });
+var PaymentSuccessStep_1 = require("./PaymentSuccessStep");
+Object.defineProperty(exports, "PaymentSuccessStep", { enumerable: true, get: function () { return __importDefault(PaymentSuccessStep_1).default; } });
+var paymentStyles_1 = require("./paymentStyles");
+Object.defineProperty(exports, "createPaymentStyles", { enumerable: true, get: function () { return paymentStyles_1.createPaymentStyles; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "PAYMENT_METHODS", { enumerable: true, get: function () { return constants_1.PAYMENT_METHODS; } });
+Object.defineProperty(exports, "CURRENCY_SYMBOLS", { enumerable: true, get: function () { return constants_1.CURRENCY_SYMBOLS; } });
+Object.defineProperty(exports, "CURRENCY_NAMES", { enumerable: true, get: function () { return constants_1.CURRENCY_NAMES; } });
+Object.defineProperty(exports, "getCurrencySymbol", { enumerable: true, get: function () { return constants_1.getCurrencySymbol; } });
+Object.defineProperty(exports, "getCurrencyName", { enumerable: true, get: function () { return constants_1.getCurrencyName; } });