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
194 lines (193 loc) • 6.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, Text, TouchableOpacity, StyleSheet, Image, Dimensions, } from 'react-native';
import { Button } from '../common/Button';
import { wallets } from '../../constants/wallets';
import { useWalletContext } from '../../context/WalletProvider';
import { useZipsContext } from '../../context/ZipsProvider';
const { width: screenWidth } = Dimensions.get('window');
// Function to calculate wallet item width for 2-column layout
const getWalletItemWidth = (screenWidth) => {
const containerPadding = 32; // walletsContainer padding (16 * 2)
const modalPadding = 32; // PaymentModal padding (16 * 2)
const itemMargin = 12; // margin between items
const totalHorizontalSpace = containerPadding + modalPadding + itemMargin;
return (screenWidth - totalHorizontalSpace) / 2;
};
export const WalletSelection = ({}) => {
const { paymentDetails, setCurrentStep } = useZipsContext();
const { selectedWallet, setSelectedWallet } = useWalletContext();
const walletItemWidth = getWalletItemWidth(screenWidth);
const renderWalletItem = (wallet) => (_jsxs(TouchableOpacity, { style: [
styles.walletItem,
{
width: walletItemWidth,
minHeight: 140,
},
!wallet.isActive && styles.disabledWallet,
], onPress: () => wallet.isActive && setSelectedWallet(wallet), disabled: !wallet.isActive, activeOpacity: 0.7, children: [_jsx(View, { style: styles.walletLogoContainer, children: typeof wallet.logo === 'string' && wallet.logo.startsWith('http') ? (_jsx(Image, { source: { uri: wallet.logo }, style: styles.walletLogo, resizeMode: "contain" })) : (_jsx(Text, { style: styles.logoText, children: wallet.logo })) }), _jsx(Text, { style: styles.walletName, numberOfLines: 2, children: wallet.name }), _jsx(Text, { style: styles.walletDescription, numberOfLines: 2, children: wallet.description }), !wallet.isActive && (_jsx(View, { style: styles.comingSoonBadge, children: _jsx(Text, { style: styles.comingSoonText, children: "Coming Soon" }) }))] }, wallet.id));
return (_jsxs(View, { style: styles.container, 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 Wallet" }), _jsx(View, { style: styles.placeholder })] }), _jsx(Text, { style: styles.subtitle, children: "Choose your preferred wallet to continue" }), _jsx(View, { style: styles.walletsContainer, children: _jsx(View, { style: styles.walletsGrid, children: wallets === null || wallets === void 0 ? void 0 : wallets.map(renderWalletItem) }) }), selectedWallet && (_jsxs(View, { style: styles.continueSection, children: [_jsxs(Text, { style: styles.selectedWalletText, children: ["Selected: ", selectedWallet.name] }), _jsx(Button, { title: "Continue with Wallet", onPress: () => {
setCurrentStep('wallet-input');
}, style: styles.continueButton })] }))] }));
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
paddingHorizontal: 16,
paddingTop: 20,
},
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,
},
walletsContainer: {
backgroundColor: '#F8FAFC',
borderRadius: 16,
padding: 16,
flex: 1,
},
walletsGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
walletItem: {
alignItems: 'center',
padding: 16,
marginBottom: 16,
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',
},
walletItemSelected: {
borderColor: '#007AFF',
backgroundColor: '#F8FAFF',
shadowColor: '#007AFF',
shadowOpacity: 0.25,
transform: [{ scale: 1.02 }],
},
disabledWallet: {
opacity: 0.6,
backgroundColor: '#f1f5f9',
},
walletLogoContainer: {
width: 64,
height: 64,
marginBottom: 12,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 12,
backgroundColor: '#F9FAFB',
borderWidth: 1,
borderColor: '#E5E7EB',
},
walletLogo: {
width: 48,
height: 48,
},
logoText: {
fontSize: 32,
},
walletName: {
fontSize: 16,
fontWeight: '600',
color: '#1e293b',
marginBottom: 6,
textAlign: 'center',
lineHeight: 20,
},
walletDescription: {
fontSize: 12,
color: '#64748b',
textAlign: 'center',
lineHeight: 16,
paddingHorizontal: 4,
},
selectedIndicator: {
position: 'absolute',
top: 8,
right: 8,
width: 24,
height: 24,
backgroundColor: '#007AFF',
borderRadius: 12,
alignItems: 'center',
justifyContent: 'center',
},
checkmark: {
color: '#FFFFFF',
fontSize: 14,
fontWeight: 'bold',
},
comingSoonBadge: {
position: 'absolute',
top: 8,
left: 8,
backgroundColor: '#fef3c7',
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 6,
},
comingSoonText: {
fontSize: 10,
color: '#92400e',
fontWeight: '600',
},
continueSection: {
paddingTop: 20,
paddingBottom: 20,
borderTopWidth: 1,
borderTopColor: '#e2e8f0',
},
selectedWalletText: {
fontSize: 16,
color: '#1e293b',
fontWeight: '600',
textAlign: 'center',
marginBottom: 16,
},
continueButton: {
backgroundColor: '#3b82f6',
borderRadius: 8,
},
});