@oxyhq/services
Version:
117 lines (115 loc) • 3.64 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _fonts = require("../styles/fonts.js");
var _OxyLogo = _interopRequireDefault(require("./OxyLogo.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* A pre-styled button for OxyPay payments that opens the Payment Gateway
* - Only black or white by default, but can be customized with the color prop.
*/
const OxyPayButton = ({
style,
textStyle,
text = 'Pay',
disabled = false,
amount,
currency = 'FAIR',
paymentItems,
description,
onPaymentResult,
color,
variant = 'white'
}) => {
const [buttonHeight, setButtonHeight] = (0, _react.useState)(52);
const handlePress = () => {
console.warn('OxyPayButton: The bottom sheet payment flow has been removed. Provide a custom onPress handler.');
};
// Determine background and text color
const backgroundColor = color || (variant === 'black' ? '#111' : '#fff');
const textColor = variant === 'black' || color && isColorDark(color) ? '#fff' : '#1b1f0a';
// Responsive sizing
const logoWidth = Math.round(buttonHeight * 0.5); // 50% of button height
const logoHeight = Math.round(buttonHeight * 0.25); // 25% of button height
const fontSize = Math.round(buttonHeight * 0.35); // 35% of button height
const handleLayout = e => {
const h = e.nativeEvent.layout.height;
if (h && Math.abs(h - buttonHeight) > 1) setButtonHeight(h);
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: [styles.button, {
backgroundColor,
borderColor: textColor,
borderWidth: 1
}, disabled && styles.buttonDisabled, style],
onPress: handlePress,
disabled: disabled,
activeOpacity: 0.85,
onLayout: handleLayout,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.buttonContent,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyLogo.default, {
width: logoWidth,
height: logoHeight,
style: {
marginRight: logoWidth * 0.12,
marginTop: (fontSize - logoHeight) / 2
},
fillColor: textColor
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.text, {
color: textColor,
fontSize
}, textStyle],
children: text
})]
})
});
};
// Helper to determine if a color is dark (simple luminance check)
function isColorDark(hex) {
let c = hex.replace('#', '');
if (c.length === 3) c = c.split('').map(x => x + x).join('');
if (c.length !== 6) return false;
const r = Number.parseInt(c.substr(0, 2), 16);
const g = Number.parseInt(c.substr(2, 2), 16);
const b = Number.parseInt(c.substr(4, 2), 16);
// Perceived luminance
return 0.299 * r + 0.587 * g + 0.114 * b < 150;
}
const styles = _reactNative.StyleSheet.create({
button: {
padding: 14,
borderRadius: 35,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
minHeight: 52
},
buttonDisabled: {
opacity: 0.6
},
buttonContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
oxyLogo: {
// marginRight is set dynamically
},
centeredItem: {
justifyContent: 'center',
alignItems: 'center'
},
text: {
fontFamily: _fonts.fontFamilies.inter,
fontWeight: '700'
}
});
var _default = exports.default = OxyPayButton;
//# sourceMappingURL=OxyPayButton.js.map