@oxyhq/services
Version:
73 lines (72 loc) • 2.29 kB
JavaScript
"use strict";
import React, { useMemo } from 'react';
import { View, Text, Animated } from 'react-native';
import { GroupedSection } from "../index.js";
import GroupedPillButtons from "../internal/GroupedPillButtons.js";
import { FAIRWalletIcon } from "../icon/index.js";
import { createPaymentStyles } from "./paymentStyles.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PaymentMethodStep = ({
availablePaymentMethods,
selectedMethod,
onSelectMethod,
colors,
animations,
onBack,
onNext
}) => {
const styles = useMemo(() => createPaymentStyles(colors), [colors]);
const {
fadeAnim,
slideAnim,
scaleAnim
} = animations;
return /*#__PURE__*/_jsxs(Animated.View, {
style: [styles.stepContainer, {
opacity: fadeAnim,
transform: [{
translateY: slideAnim
}, {
scale: scaleAnim
}]
}],
accessibilityRole: "none",
accessibilityLabel: "Choose payment method step",
children: [/*#__PURE__*/_jsxs(View, {
style: styles.section,
children: [/*#__PURE__*/_jsx(Text, {
style: styles.sectionTitle,
children: "Choose Payment Method"
}), /*#__PURE__*/_jsx(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' ? /*#__PURE__*/_jsx(FAIRWalletIcon, {
size: 20
}) : undefined
}))
})]
}), /*#__PURE__*/_jsx(GroupedPillButtons, {
buttons: [{
text: 'Back',
onPress: onBack,
icon: 'arrow-back',
variant: 'transparent'
}, {
text: 'Continue',
onPress: onNext,
icon: 'arrow-forward',
variant: 'primary'
}],
colors: colors
})]
});
};
export default PaymentMethodStep;
//# sourceMappingURL=PaymentMethodStep.js.map