@oxyhq/services/lib/module/ui/components/OxyPayButton.js

Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀

"use strict";

import { useState } from 'react';
import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
import { fontFamilies } from '../styles/fonts';
import { useOxy } from '../context/OxyContext';
import OxyLogo from './OxyLogo';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 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 {
    showBottomSheet
  } = useOxy();
  const [buttonHeight, setButtonHeight] = useState(52);
  const handlePress = () => {
    showBottomSheet?.({
      screen: 'PaymentGateway',
      props: {
        amount,
        currency,
        paymentItems,
        description,
        onPaymentResult
      }
    });
  };
  // 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__*/_jsx(TouchableOpacity, {
    style: [styles.button, {
      backgroundColor,
      borderColor: textColor,
      borderWidth: 1
    }, disabled && styles.buttonDisabled, style],
    onPress: handlePress,
    disabled: disabled,
    activeOpacity: 0.85,
    onLayout: handleLayout,
    children: /*#__PURE__*/_jsxs(View, {
      style: styles.buttonContent,
      children: [/*#__PURE__*/_jsx(OxyLogo, {
        width: logoWidth,
        height: logoHeight,
        style: {
          marginRight: logoWidth * 0.12,
          marginTop: (fontSize - logoHeight) / 2
        },
        fillColor: textColor
      }), /*#__PURE__*/_jsx(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 = 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: fontFamilies.phudu,
    fontWeight: '700'
  }
});
export default OxyPayButton;
//# sourceMappingURL=OxyPayButton.js.map