@oxyhq/services
Version:
303 lines (302 loc) • 11.2 kB
JavaScript
"use strict";
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.js";
import TextField from "../TextField.js";
import { FAIRWalletIcon } from "../icon/index.js";
import { createPaymentStyles } from "./paymentStyles.js";
import { toast } from '../../../lib/sonner';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const PaymentDetailsStep = ({
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 /*#__PURE__*/_jsxs(Animated.View, {
style: [styles.stepContainer, {
opacity: fadeAnim,
transform: [{
translateY: slideAnim
}, {
scale: scaleAnim
}]
}],
accessibilityRole: "none",
accessibilityLabel: "Enter payment details step",
children: [/*#__PURE__*/_jsxs(View, {
style: styles.section,
children: [/*#__PURE__*/_jsx(Text, {
style: styles.sectionTitle,
children: paymentMethod === 'card' ? 'Card Details' : paymentMethod === 'oxy' ? 'Oxy Pay' : paymentMethod === 'faircoin' ? 'FairCoin Payment' : 'Payment Details'
}), paymentMethod === 'card' && /*#__PURE__*/_jsx(View, {
style: styles.cardPaymentCard,
children: /*#__PURE__*/_jsxs(View, {
style: styles.cardPaymentContent,
children: [/*#__PURE__*/_jsx(Ionicons, {
name: "card-outline",
size: 64,
color: colors.primary,
style: styles.cardPaymentIcon
}), /*#__PURE__*/_jsx(Text, {
style: styles.cardPaymentMainTitle,
children: "Credit Card"
}), /*#__PURE__*/_jsx(Text, {
style: styles.cardPaymentSubtitle,
children: "Enter your card details securely"
}), /*#__PURE__*/_jsxs(View, {
style: styles.cardPaymentFields,
children: [/*#__PURE__*/_jsxs(View, {
style: styles.cardRowInfo,
children: [/*#__PURE__*/_jsx(Ionicons, {
name: "card-outline",
size: 24,
color: colors.primary,
style: styles.cardRowIcon
}), /*#__PURE__*/_jsx(Text, {
style: styles.cardRowText,
children: "We accept Visa, Mastercard, and more"
})]
}), /*#__PURE__*/_jsx(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: /*#__PURE__*/_jsx(Ionicons, {
name: "card-outline",
size: 18,
color: colors.primary
}),
accessibilityLabel: "Card number",
accessibilityHint: "Enter your 16-digit card number"
}), /*#__PURE__*/_jsxs(View, {
style: styles.cardFieldRow,
children: [/*#__PURE__*/_jsx(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: /*#__PURE__*/_jsx(Ionicons, {
name: "calendar-outline",
size: 16,
color: colors.primary
}),
accessibilityLabel: "Expiry date",
accessibilityHint: "Enter expiry date in MM/YY format"
}), /*#__PURE__*/_jsx(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: /*#__PURE__*/_jsx(Ionicons, {
name: "lock-closed-outline",
size: 16,
color: colors.primary
}),
accessibilityLabel: "CVV",
accessibilityHint: "Enter 3 or 4 digit security code"
})]
})]
}), /*#__PURE__*/_jsx(View, {
style: {
height: 18
}
}), /*#__PURE__*/_jsx(Text, {
style: styles.cardPaymentWaiting,
children: "Ready to process payment..."
})]
})
}), paymentMethod === 'oxy' && /*#__PURE__*/_jsx(View, {
style: styles.oxyPayCard,
children: /*#__PURE__*/_jsxs(View, {
style: styles.oxyPayContent,
children: [/*#__PURE__*/_jsx(Ionicons, {
name: "wallet-outline",
size: 64,
color: colors.primary,
style: styles.oxyPayIcon
}), /*#__PURE__*/_jsx(Text, {
style: styles.oxyPayMainTitle,
children: "Oxy Pay"
}), /*#__PURE__*/_jsx(Text, {
style: styles.oxyPaySubtitle,
children: "Pay with your in-app wallet"
}), /*#__PURE__*/_jsx(View, {
style: styles.oxyPayBalanceBox,
children: /*#__PURE__*/_jsx(Text, {
style: styles.oxyPayBalanceText,
children: "Balance: \u229C 123.45"
})
}), /*#__PURE__*/_jsx(View, {
style: {
height: 18
}
}), /*#__PURE__*/_jsx(Text, {
style: styles.oxyPayWaiting,
children: "Ready to process payment..."
})]
})
}), paymentMethod === 'faircoin' && /*#__PURE__*/_jsx(View, {
style: styles.faircoinCard,
children: /*#__PURE__*/_jsxs(View, {
style: styles.faircoinContent,
children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
size: 64,
style: styles.faircoinIcon
}), /*#__PURE__*/_jsx(Text, {
style: styles.faircoinMainTitle,
children: "FAIRWallet"
}), /*#__PURE__*/_jsx(Text, {
style: styles.faircoinSubtitle,
children: "Pay with FairCoin"
}), !isMobile && QRCodeComponent ? /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Text, {
style: styles.faircoinScanText,
children: "Scan to Pay"
}), /*#__PURE__*/_jsxs(View, {
style: styles.faircoinQRCard,
children: [/*#__PURE__*/_jsx(QRCodeComponent, {
value: faircoinAddress,
size: qrSize - 32
}), /*#__PURE__*/_jsx(View, {
style: styles.faircoinQRBadge,
children: /*#__PURE__*/_jsx(FAIRWalletIcon, {
size: 28
})
})]
})]
}) : /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Text, {
style: styles.faircoinTitle,
children: "Use the options below to pay with FAIRWallet"
}), /*#__PURE__*/_jsx(Text, {
style: styles.faircoinAddress,
children: faircoinAddress
}), /*#__PURE__*/_jsxs(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",
children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
size: 20,
style: {
marginRight: 8
}
}), /*#__PURE__*/_jsx(Text, {
style: [styles.faircoinButtonText, {
color: '#1b1f0a',
fontWeight: 'bold',
fontSize: 16
}],
children: "Open in FAIRWallet"
})]
}), /*#__PURE__*/_jsxs(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",
children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
size: 20,
style: {
marginRight: 8
}
}), /*#__PURE__*/_jsx(Text, {
style: [styles.faircoinButtonText, {
color: '#1b1f0a',
fontWeight: 'bold',
fontSize: 16
}],
children: "Copy Address"
})]
})]
}), /*#__PURE__*/_jsx(View, {
style: {
height: 18
}
}), /*#__PURE__*/_jsx(Text, {
style: styles.faircoinWaiting,
children: "Waiting for payment..."
})]
})
})]
}), /*#__PURE__*/_jsx(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
})]
});
};
export default PaymentDetailsStep;
//# sourceMappingURL=PaymentDetailsStep.js.map