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
118 lines (117 loc) • 4.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
import { Button } from '../common/Button';
import { useNetBankingContext } from '../../context/NetBankingProvider';
import { useZipsContext } from '../../context/ZipsProvider';
export const AccountDetails = () => {
const { selectedBank, accountDetails } = useNetBankingContext();
const { setCurrentStep } = useZipsContext();
return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.header, children: [_jsx(TouchableOpacity, { onPress: () => setCurrentStep('bank-selection'), style: styles.backButton, children: _jsx(Text, { style: styles.backButtonText, children: "\u2190 Back" }) }), _jsx(Text, { style: styles.title, children: "Account Details" }), _jsx(View, { style: styles.placeholder })] }), _jsxs(View, { style: styles.bankHeader, children: [_jsx(View, { style: styles.bankLogoContainer, children: _jsx(Image, { source: { uri: selectedBank.logo }, style: styles.bankLogo, resizeMode: "contain" }) }), _jsx(Text, { style: styles.bankName, children: selectedBank.name })] }), _jsxs(View, { style: styles.detailsCard, children: [_jsx(Text, { style: styles.cardTitle, children: "Account Details" }), _jsxs(View, { style: styles.detailsGrid, children: [_jsxs(View, { style: styles.detailRow, children: [_jsx(Text, { style: styles.detailLabel, children: "Account Number:" }), _jsx(Text, { style: styles.detailValue, children: accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountNumber })] }), _jsxs(View, { style: styles.detailRow, children: [_jsx(Text, { style: styles.detailLabel, children: "Account Name:" }), _jsx(Text, { style: styles.detailValue, children: accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountName })] })] })] }), _jsx(View, { style: styles.actionSection, children: _jsx(Button, { title: "Continue", onPress: () => { }, variant: "success", size: "large", 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,
},
bankHeader: {
alignItems: 'center',
marginBottom: 32,
},
bankLogoContainer: {
width: 80,
height: 80,
borderRadius: 40,
backgroundColor: '#F3F4F6',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 12,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.1,
shadowRadius: 3.84,
elevation: 5,
},
bankLogo: {
width: 50,
height: 50,
},
bankName: {
fontSize: 18,
fontWeight: '600',
color: '#1F2937',
textAlign: 'center',
},
detailsCard: {
backgroundColor: '#F9FAFB',
borderRadius: 12,
padding: 20,
marginBottom: 32,
borderWidth: 1,
borderColor: '#E5E7EB',
},
cardTitle: {
fontSize: 18,
fontWeight: '600',
color: '#1F2937',
marginBottom: 16,
textAlign: 'center',
},
detailsGrid: {
gap: 12,
},
detailRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 8,
borderBottomWidth: 1,
borderBottomColor: '#E5E7EB',
},
detailLabel: {
fontSize: 14,
color: '#6B7280',
fontWeight: '500',
},
detailValue: {
fontSize: 16,
color: '#1F2937',
fontWeight: '600',
flex: 1,
textAlign: 'right',
},
actionSection: {
marginBottom: 32,
},
continueButton: {
backgroundColor: '#10B981',
},
});