@oxyhq/services/lib/commonjs/ui/components/payment/paymentStyles.js

OxyHQ Expo/React Native SDK — UI components, screens, and native features

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createPaymentStyles = void 0;
var _reactNative = require("react-native");
var _index = require("../../styles/index.js");
const createPaymentStyles = colors => _reactNative.StyleSheet.create({
  container: {
    flex: 1
  },
  content: {
    flex: 1,
    padding: 16
  },
  stepContainer: {
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    width: '100%'
  },
  section: {
    marginBottom: 24,
    width: '100%'
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.text,
    marginBottom: 12,
    fontFamily: _index.fontFamilies.interSemiBold
  },
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 32
  },
  errorText: {
    fontSize: 18,
    color: 'red',
    marginBottom: 24
  },
  // Summary card styles
  summaryCard: {
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 24,
    marginBottom: 24,
    alignItems: 'center',
    width: '100%'
  },
  summaryCardContent: {
    alignItems: 'center',
    width: '100%'
  },
  summaryCardIcon: {
    marginBottom: 8
  },
  summaryCardMainTitle: {
    fontFamily: _index.fontFamilies.interBold,
    fontWeight: 'bold',
    fontSize: 28,
    color: colors.text,
    marginBottom: 2,
    textAlign: 'center',
    letterSpacing: 0.5
  },
  summaryCardSubtitle: {
    fontSize: 16,
    color: colors.secondaryText,
    textAlign: 'center',
    marginBottom: 24,
    width: '100%'
  },
  summaryCardItems: {
    width: '100%',
    marginBottom: 16
  },
  summaryItemPrice: {
    color: colors.text,
    fontWeight: '600',
    fontSize: 16
  },
  summaryCardAmount: {
    alignItems: 'center',
    width: '100%',
    marginBottom: 16
  },
  summaryCardAmountLabel: {
    fontSize: 16,
    color: colors.secondaryText,
    textAlign: 'center',
    marginBottom: 8
  },
  summaryCardAmountValue: {
    fontSize: 32,
    fontWeight: 'bold',
    color: colors.text,
    textAlign: 'center',
    marginBottom: 8,
    fontFamily: _index.fontFamilies.interBold
  },
  summaryCardAmountDescription: {
    fontSize: 14,
    color: colors.secondaryText,
    textAlign: 'center',
    lineHeight: 20
  },
  summaryCardDivider: {
    height: 1,
    backgroundColor: colors.border,
    marginVertical: 16,
    width: '100%'
  },
  summaryCardTotalSection: {
    width: '100%',
    marginBottom: 8
  },
  summaryCardTotalRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 4
  },
  summaryCardTotalLabel: {
    fontSize: 16,
    color: colors.secondaryText,
    fontWeight: '500'
  },
  summaryCardTotalValue: {
    fontSize: 16,
    color: colors.text,
    fontWeight: '600'
  },
  // Card payment styles
  cardPaymentCard: {
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 24,
    marginBottom: 24,
    alignItems: 'center',
    width: '100%'
  },
  cardPaymentContent: {
    alignItems: 'center',
    width: '100%'
  },
  cardPaymentIcon: {
    marginBottom: 8
  },
  cardPaymentMainTitle: {
    fontFamily: _index.fontFamilies.interBold,
    fontWeight: 'bold',
    fontSize: 28,
    color: colors.text,
    marginBottom: 2,
    textAlign: 'center',
    letterSpacing: 0.5
  },
  cardPaymentSubtitle: {
    fontSize: 16,
    color: colors.secondaryText,
    textAlign: 'center',
    marginBottom: 24,
    width: '100%'
  },
  cardPaymentFields: {
    width: '100%',
    marginBottom: 16
  },
  cardPaymentWaiting: {
    fontSize: 14,
    color: colors.secondaryText,
    textAlign: 'center',
    marginBottom: 8
  },
  cardRowInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16
  },
  cardRowIcon: {
    marginRight: 8
  },
  cardRowText: {
    fontSize: 15,
    color: colors.secondaryText
  },
  cardFieldContainer: {
    marginBottom: 16
  },
  cardFieldRow: {
    flexDirection: 'row',
    gap: 12
  },
  cardFieldHalfLeft: {
    flex: 1,
    marginRight: 6
  },
  cardFieldHalfRight: {
    flex: 1,
    marginLeft: 6
  },
  // Oxy Pay styles
  oxyPayCard: {
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 24,
    marginBottom: 24,
    alignItems: 'center',
    width: '100%'
  },
  oxyPayContent: {
    alignItems: 'center',
    width: '100%'
  },
  oxyPayIcon: {
    marginBottom: 8
  },
  oxyPayMainTitle: {
    fontFamily: _index.fontFamilies.interBold,
    fontWeight: 'bold',
    fontSize: 28,
    color: colors.text,
    marginBottom: 2,
    textAlign: 'center',
    letterSpacing: 0.5
  },
  oxyPaySubtitle: {
    fontSize: 16,
    color: colors.secondaryText,
    textAlign: 'center',
    marginBottom: 8
  },
  oxyPayBalanceBox: {
    backgroundColor: colors.primary + '22',
    borderRadius: 12,
    padding: 8,
    marginTop: 8
  },
  oxyPayBalanceText: {
    color: colors.primary,
    fontWeight: '600'
  },
  oxyPayWaiting: {
    fontSize: 14,
    color: colors.secondaryText,
    textAlign: 'center',
    marginBottom: 8
  },
  // FairCoin styles
  faircoinCard: {
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 24,
    marginBottom: 24,
    alignItems: 'center',
    width: '100%'
  },
  faircoinContent: {
    alignItems: 'center',
    width: '100%'
  },
  faircoinIcon: {
    marginBottom: 8
  },
  faircoinMainTitle: {
    fontFamily: _index.fontFamilies.interBold,
    fontWeight: 'bold',
    fontSize: 28,
    color: '#1b1f0a',
    marginBottom: 2,
    textAlign: 'center',
    letterSpacing: 0.5
  },
  faircoinSubtitle: {
    color: '#1b1f0a',
    fontWeight: '700',
    fontSize: 17,
    marginBottom: 18,
    textAlign: 'center',
    letterSpacing: 0.2
  },
  faircoinScanText: {
    color: '#1b1f0a',
    fontWeight: '600',
    fontSize: 15,
    marginBottom: 8
  },
  faircoinQRCard: {
    width: 200,
    height: 200,
    backgroundColor: '#fff',
    borderRadius: 32,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 16,
    padding: 16,
    borderWidth: 3,
    borderColor: '#9ffb50',
    shadowColor: '#9ffb50',
    shadowOffset: {
      width: 0,
      height: 4
    },
    shadowOpacity: 0.25,
    shadowRadius: 12,
    elevation: 8,
    position: 'relative'
  },
  faircoinQRBadge: {
    position: 'absolute',
    bottom: 12,
    right: 12,
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 4,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2
  },
  faircoinTitle: {
    fontSize: 16,
    marginBottom: 8,
    color: colors.text,
    fontWeight: '600',
    textAlign: 'center'
  },
  faircoinAddress: {
    color: colors.secondaryText,
    fontSize: 13,
    textAlign: 'center',
    marginTop: 6,
    marginBottom: 2
  },
  faircoinButton: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'center',
    backgroundColor: colors.primary + '11',
    borderRadius: 16,
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginTop: 6,
    marginBottom: 2
  },
  faircoinButtonText: {
    color: colors.primary,
    fontWeight: '600',
    fontSize: 15
  },
  faircoinWaiting: {
    fontSize: 14,
    color: colors.secondaryText,
    textAlign: 'center',
    marginBottom: 8
  },
  faircoinPlaceholder: {
    fontSize: 13,
    color: colors.secondaryText,
    textAlign: 'center'
  },
  // Success styles
  successCard: {
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 24,
    marginBottom: 24,
    alignItems: 'center',
    width: '100%'
  },
  successContent: {
    alignItems: 'center',
    width: '100%'
  },
  successIcon: {
    marginBottom: 8
  },
  successMainTitle: {
    fontFamily: _index.fontFamilies.interBold,
    fontWeight: 'bold',
    fontSize: 28,
    color: colors.success || '#4BB543',
    marginBottom: 2,
    textAlign: 'center',
    letterSpacing: 0.5
  },
  successSubtitle: {
    fontSize: 16,
    color: colors.text,
    textAlign: 'center',
    marginBottom: 8,
    width: '100%'
  },
  successMessage: {
    fontSize: 14,
    color: colors.secondaryText,
    textAlign: 'center',
    marginBottom: 8
  }
});
exports.createPaymentStyles = createPaymentStyles;
//# sourceMappingURL=paymentStyles.js.map