@oxyhq/services
Version:
309 lines (308 loc) • 13.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _vectorIcons = require("@expo/vector-icons");
var _GroupedPillButtons = _interopRequireDefault(require("../internal/GroupedPillButtons.js"));
var _TextField = _interopRequireDefault(require("../TextField.js"));
var _index = require("../icon/index.js");
var _paymentStyles = require("./paymentStyles.js");
var _sonner = require("../../../lib/sonner");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const PaymentDetailsStep = ({
paymentMethod,
cardDetails,
onCardDetailsChange,
colors,
animations,
faircoinAddress,
isMobile,
qrSize,
onBack,
onNext,
QRCodeComponent
}) => {
const styles = (0, _react.useMemo)(() => (0, _paymentStyles.createPaymentStyles)(colors), [colors]);
const {
fadeAnim,
slideAnim,
scaleAnim
} = animations;
const handleCopyAddress = () => {
_reactNative.Clipboard.setString(faircoinAddress);
(0, _sonner.toast)('Address copied to clipboard!');
};
const handleOpenFairWallet = () => {
const url = `fairwallet://pay?address=${faircoinAddress}`;
_reactNative.Linking.openURL(url);
};
const isCardValid = cardDetails.number && cardDetails.expiry && cardDetails.cvv;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
style: [styles.stepContainer, {
opacity: fadeAnim,
transform: [{
translateY: slideAnim
}, {
scale: scaleAnim
}]
}],
accessibilityRole: "none",
accessibilityLabel: "Enter payment details step",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.section,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.sectionTitle,
children: paymentMethod === 'card' ? 'Card Details' : paymentMethod === 'oxy' ? 'Oxy Pay' : paymentMethod === 'faircoin' ? 'FairCoin Payment' : 'Payment Details'
}), paymentMethod === 'card' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.cardPaymentCard,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.cardPaymentContent,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "card-outline",
size: 64,
color: colors.primary,
style: styles.cardPaymentIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.cardPaymentMainTitle,
children: "Credit Card"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.cardPaymentSubtitle,
children: "Enter your card details securely"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.cardPaymentFields,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.cardRowInfo,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "card-outline",
size: 24,
color: colors.primary,
style: styles.cardRowIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.cardRowText,
children: "We accept Visa, Mastercard, and more"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "card-outline",
size: 18,
color: colors.primary
}),
accessibilityLabel: "Card number",
accessibilityHint: "Enter your 16-digit card number"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.cardFieldRow,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "calendar-outline",
size: 16,
color: colors.primary
}),
accessibilityLabel: "Expiry date",
accessibilityHint: "Enter expiry date in MM/YY format"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "lock-closed-outline",
size: 16,
color: colors.primary
}),
accessibilityLabel: "CVV",
accessibilityHint: "Enter 3 or 4 digit security code"
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
height: 18
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.cardPaymentWaiting,
children: "Ready to process payment..."
})]
})
}), paymentMethod === 'oxy' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.oxyPayCard,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.oxyPayContent,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "wallet-outline",
size: 64,
color: colors.primary,
style: styles.oxyPayIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.oxyPayMainTitle,
children: "Oxy Pay"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.oxyPaySubtitle,
children: "Pay with your in-app wallet"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.oxyPayBalanceBox,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.oxyPayBalanceText,
children: "Balance: \u229C 123.45"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
height: 18
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.oxyPayWaiting,
children: "Ready to process payment..."
})]
})
}), paymentMethod === 'faircoin' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.faircoinCard,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.faircoinContent,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.FAIRWalletIcon, {
size: 64,
style: styles.faircoinIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.faircoinMainTitle,
children: "FAIRWallet"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.faircoinSubtitle,
children: "Pay with FairCoin"
}), !isMobile && QRCodeComponent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.faircoinScanText,
children: "Scan to Pay"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.faircoinQRCard,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(QRCodeComponent, {
value: faircoinAddress,
size: qrSize - 32
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.faircoinQRBadge,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.FAIRWalletIcon, {
size: 28
})
})]
})]
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.faircoinTitle,
children: "Use the options below to pay with FAIRWallet"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.faircoinAddress,
children: faircoinAddress
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_index.FAIRWalletIcon, {
size: 20,
style: {
marginRight: 8
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.faircoinButtonText, {
color: '#1b1f0a',
fontWeight: 'bold',
fontSize: 16
}],
children: "Open in FAIRWallet"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_index.FAIRWalletIcon, {
size: 20,
style: {
marginRight: 8
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.faircoinButtonText, {
color: '#1b1f0a',
fontWeight: 'bold',
fontSize: 16
}],
children: "Copy Address"
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
height: 18
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.faircoinWaiting,
children: "Waiting for payment..."
})]
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
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
})]
});
};
var _default = exports.default = PaymentDetailsStep;
//# sourceMappingURL=PaymentDetailsStep.js.map