@oxyhq/services

import { StyleSheet, Platform } from 'react-native'; import { fontFamilies } from '../../styles'; import type { PaymentColors } from './types'; export const createPaymentStyles = (colors: PaymentColors) => 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: 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: 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: 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: 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: 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: 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: 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, }, });