zips-react-native-sdk-test
Version:
Lightweight ZIPS Payment Gateway SDK for React Native - Complete payment solution with card payments, wallet payments (AfrMoney & ZApp), netbanking, and native UI design
209 lines (208 loc) • 7.54 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Image, StyleSheet, Text, TouchableOpacity, View, Dimensions, } from 'react-native';
import { useGetBanks } from '../../tanstack-query/queries';
import { useNetBankingContext } from '../../context/NetBankingProvider';
import { useZipsContext } from '../../context/ZipsProvider';
import { BankShimmer } from '../ShimmerLoader';
const { width: screenWidth } = Dimensions.get('window');
// Function to determine number of columns based on screen width
const getResponsiveColumns = (screenWidth) => {
if (screenWidth < 350) {
return 2; // Very small screens (iPhone SE, etc.)
}
else if (screenWidth < 400) {
return 2; // Small screens
}
else {
return 3; // Normal and large screens
}
};
// Function to calculate bank item width based on columns
const getBankItemWidth = (screenWidth, columns) => {
const containerPadding = 32; // banksContainer padding (16 * 2)
const modalPadding = 32; // PaymentModal padding (16 * 2)
const itemMargin = 8; // margin between items
const totalHorizontalSpace = containerPadding + modalPadding + itemMargin * (columns - 1);
return (screenWidth - totalHorizontalSpace) / columns;
};
const NetBanking = () => {
var _a;
const { isPending, isError, data, refetch } = useGetBanks();
const banks = ((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data) || [];
const { setCurrentStep, setError } = useZipsContext();
const { setSelectedBank } = useNetBankingContext();
// Get responsive values
const columns = getResponsiveColumns(screenWidth);
const bankItemWidth = getBankItemWidth(screenWidth, columns);
const renderBankItem = (bank) => (_jsxs(TouchableOpacity, { style: [
styles.bankItem,
{
width: bankItemWidth,
minHeight: columns === 2 ? 140 : 120, // Taller for 2-column layout
},
], onPress: () => {
setSelectedBank(bank);
setCurrentStep('bank-account-input');
}, activeOpacity: 0.7, children: [_jsx(View, { style: [
styles.bankLogoContainer,
{
width: Math.min(bankItemWidth * 0.7, 64),
height: Math.min(bankItemWidth * 0.45, 44),
},
], children: _jsx(Image, { source: { uri: (bank === null || bank === void 0 ? void 0 : bank.bankLogo) || (bank === null || bank === void 0 ? void 0 : bank.logo) }, style: styles.bankLogo, resizeMode: "contain" }) }), _jsx(Text, { style: [styles.bankName, { fontSize: columns === 2 ? 11 : 12 }], numberOfLines: 2, children: (bank === null || bank === void 0 ? void 0 : bank.bankName) || (bank === null || bank === void 0 ? void 0 : bank.name) })] }, bank === null || bank === void 0 ? void 0 : bank.id));
return (_jsxs(View, { style: styles.banksSection, children: [_jsx(View, { style: styles.banksSectionHeader, children: _jsxs(View, { style: styles.header, children: [_jsx(TouchableOpacity, { onPress: () => {
setCurrentStep('method-selection');
}, style: styles.backButton, children: _jsx(Text, { style: styles.backButtonText, children: "\u2190 Back" }) }), _jsx(Text, { style: styles.title, children: "Select your bank" }), _jsx(View, { style: styles.placeholder })] }) }), _jsx(View, { style: styles.banksContainer, children: isPending ? (_jsx(BankShimmer, { count: columns === 2 ? 6 : 9 })) : isError ? (_jsxs(View, { style: styles.errorContainer, children: [_jsx(Text, { style: styles.errorText, children: "Failed to load banks" }), _jsx(TouchableOpacity, { onPress: () => refetch(), children: _jsx(Text, { style: styles.errorSubtext, children: "Please try again" }) })] })) : (_jsx(View, { style: [
styles.banksGrid,
{
justifyContent: columns === 2 ? 'space-around' : 'space-between',
},
], children: banks === null || banks === void 0 ? void 0 : banks.map(renderBankItem) })) })] }));
};
export default NetBanking;
const styles = StyleSheet.create({
// Bank Grid Styles - Enhanced for better spacing and responsiveness
banksSection: {
marginTop: 16,
},
banksSectionHeader: {
alignItems: 'center',
marginBottom: 20,
paddingHorizontal: 8,
},
banksTitle: {
fontSize: 18,
fontWeight: '600',
color: '#1F2937',
marginBottom: 4,
},
banksSubtitle: {
fontSize: 14,
color: '#6B7280',
fontWeight: '400',
},
banksContainer: {
backgroundColor: '#F8FAFC',
borderRadius: 16,
padding: 16,
},
banksGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
},
bankItem: {
alignItems: 'center',
padding: 12,
marginBottom: 12,
borderRadius: 16,
backgroundColor: '#FFFFFF',
borderWidth: 2,
borderColor: '#E5E7EB',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.08,
shadowRadius: 8,
elevation: 3,
justifyContent: 'center',
position: 'relative',
},
bankItemSelected: {
borderColor: '#007AFF',
backgroundColor: '#F8FAFF',
shadowColor: '#007AFF',
shadowOpacity: 0.25,
transform: [{ scale: 1.02 }],
},
bankLogoContainer: {
marginBottom: 12,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 8,
backgroundColor: '#F9FAFB',
},
bankLogo: {
width: '100%',
height: '100%',
},
bankName: {
fontWeight: '600',
color: '#374151',
textAlign: 'center',
lineHeight: 16,
marginBottom: 4,
},
bankLocation: {
fontSize: 10,
fontWeight: '400',
color: '#9CA3AF',
textAlign: 'center',
lineHeight: 12,
},
selectedIndicator: {
position: 'absolute',
top: 8,
right: 8,
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: '#007AFF',
justifyContent: 'center',
alignItems: 'center',
},
checkmark: {
color: '#FFFFFF',
fontSize: 14,
fontWeight: 'bold',
},
// Error States
errorContainer: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 40,
},
errorText: {
fontSize: 16,
fontWeight: '600',
color: '#EF4444',
marginBottom: 4,
},
errorSubtext: {
fontSize: 14,
color: '#6B7280',
textAlign: 'center',
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 24,
},
backButton: {
paddingVertical: 8,
paddingHorizontal: 12,
},
backButtonText: {
fontSize: 16,
color: '#2563eb',
fontWeight: '600',
},
title: {
fontSize: 20,
fontWeight: '700',
color: '#1e293b',
textAlign: 'center',
},
placeholder: {
width: 60,
},
subtitle: {
fontSize: 16,
color: '#64748b',
textAlign: 'center',
marginBottom: 30,
lineHeight: 24,
},
});