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
179 lines (178 loc) • 7.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Button } from '../common/Button';
import { useCardContext } from '../../context/CardProvider';
import { useZipsContext } from '../../context/ZipsProvider';
import { getDefaultCurrency } from '../../utils/helpers';
export const CardConfirmation = ({}) => {
const { paymentDetails, setCurrentStep } = useZipsContext();
const { cardInformation, setCardInformation, isLoading } = useCardContext();
const getCardType = (number) => {
if (number.startsWith('4'))
return 'Visa';
if (number.startsWith('5') || number.startsWith('2'))
return 'Mastercard';
if (number.startsWith('3'))
return 'American Express';
return 'Card';
};
const maskCardNumber = (number) => {
return '**** **** **** ' + number.slice(-4);
};
const formatAmount = (amount, currency) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency || 'GMD',
}).format(amount);
};
const cardType = getCardType(cardInformation.cardNumber);
return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.header, children: [_jsx(TouchableOpacity, { onPress: () => {
setCurrentStep('card-input');
}, style: styles.backButton, children: _jsx(Text, { style: styles.backButtonText, children: "\u2190 Back" }) }), _jsx(Text, { style: styles.title, children: "Confirm Payment" }), _jsx(View, { style: styles.placeholder })] }), _jsx(Text, { style: styles.subtitle, children: "Review your card details before proceeding" }), _jsxs(View, { style: styles.amountCard, children: [_jsx(Text, { style: styles.amountLabel, children: "Payment Amount" }), _jsx(Text, { style: styles.amount, children: formatAmount(paymentDetails === null || paymentDetails === void 0 ? void 0 : paymentDetails.amount, (paymentDetails === null || paymentDetails === void 0 ? void 0 : paymentDetails.currency) || getDefaultCurrency()) })] }), _jsxs(View, { style: styles.cardDetailsCard, children: [_jsxs(View, { style: styles.cardHeader, children: [_jsx(Text, { style: styles.cardHeaderText, children: "Payment Method" }), _jsxs(View, { style: styles.cardTypeContainer, children: [_jsx(Text, { style: styles.cardIcon, children: "\uD83D\uDCB3" }), _jsx(Text, { style: styles.cardType, children: cardType })] })] }), _jsxs(View, { style: styles.cardInfo, children: [_jsxs(View, { style: styles.cardInfoRow, children: [_jsx(Text, { style: styles.cardInfoLabel, children: "Card Number" }), _jsx(Text, { style: styles.cardInfoValue, children: maskCardNumber(cardInformation === null || cardInformation === void 0 ? void 0 : cardInformation.cardNumber) })] }), _jsxs(View, { style: styles.cardInfoRow, children: [_jsx(Text, { style: styles.cardInfoLabel, children: "Cardholder Name" }), _jsx(Text, { style: styles.cardInfoValue, children: cardInformation === null || cardInformation === void 0 ? void 0 : cardInformation.cardholderName })] }), _jsxs(View, { style: styles.cardInfoRow, children: [_jsx(Text, { style: styles.cardInfoLabel, children: "Expiry" }), _jsxs(Text, { style: styles.cardInfoValue, children: [cardInformation === null || cardInformation === void 0 ? void 0 : cardInformation.expiryMonth, "/", cardInformation === null || cardInformation === void 0 ? void 0 : cardInformation.expiryYear] })] })] })] }), _jsxs(View, { style: styles.securityNotice, children: [_jsx(Text, { style: styles.securityIcon, children: "\uD83D\uDD10" }), _jsxs(View, { style: styles.securityTextContainer, children: [_jsx(Text, { style: styles.securityTitle, children: "Secure Payment" }), _jsx(Text, { style: styles.securityDescription, children: "Your payment is processed securely using bank-level encryption" })] })] }), _jsxs(View, { style: styles.actionSection, children: [_jsx(Button, { title: isLoading ? 'Processing...' : 'Confirm & Pay', onPress: () => { }, style: styles.confirmButton, disabled: isLoading }), _jsx(TouchableOpacity, { style: styles.backButton, onPress: () => { }, disabled: isLoading, children: _jsx(Text, { style: [styles.backButtonText, isLoading && styles.disabledText], children: "Back to Edit Card" }) })] })] }));
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
paddingHorizontal: 16,
paddingTop: 20,
},
header: {
alignItems: 'center',
marginBottom: 32,
},
title: {
fontSize: 24,
fontWeight: '700',
color: '#1F2937',
marginBottom: 8,
},
subtitle: {
fontSize: 16,
color: '#6B7280',
textAlign: 'center',
},
placeholder: {
width: 60,
},
amountCard: {
backgroundColor: '#F8FAFC',
borderRadius: 16,
padding: 20,
alignItems: 'center',
marginBottom: 24,
borderWidth: 1,
borderColor: '#E2E8F0',
},
amountLabel: {
fontSize: 14,
color: '#64748B',
fontWeight: '500',
marginBottom: 8,
},
amount: {
fontSize: 32,
fontWeight: '800',
color: '#1F2937',
},
cardDetailsCard: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
borderWidth: 1,
borderColor: '#E2E8F0',
marginBottom: 24,
overflow: 'hidden',
},
cardHeader: {
backgroundColor: '#F1F5F9',
paddingHorizontal: 20,
paddingVertical: 16,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
cardHeaderText: {
fontSize: 16,
fontWeight: '600',
color: '#374151',
},
cardTypeContainer: {
flexDirection: 'row',
alignItems: 'center',
},
cardIcon: {
fontSize: 20,
marginRight: 8,
},
cardType: {
fontSize: 14,
fontWeight: '600',
color: '#007AFF',
},
cardInfo: {
padding: 20,
},
cardInfoRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 16,
},
cardInfoLabel: {
fontSize: 14,
color: '#6B7280',
fontWeight: '500',
},
cardInfoValue: {
fontSize: 16,
color: '#1F2937',
fontWeight: '600',
},
securityNotice: {
flexDirection: 'row',
backgroundColor: '#F0F9FF',
borderRadius: 12,
padding: 16,
marginBottom: 32,
borderWidth: 1,
borderColor: '#BAE6FD',
},
securityIcon: {
fontSize: 24,
marginRight: 12,
},
securityTextContainer: {
flex: 1,
},
securityTitle: {
fontSize: 16,
fontWeight: '600',
color: '#0369A1',
marginBottom: 4,
},
securityDescription: {
fontSize: 14,
color: '#0284C7',
lineHeight: 18,
},
actionSection: {
marginBottom: 24,
},
confirmButton: {
backgroundColor: '#10B981',
borderRadius: 12,
},
backButton: {
alignItems: 'center',
paddingVertical: 12,
marginTop: 16,
},
backButtonText: {
fontSize: 16,
color: '#6B7280',
fontWeight: '500',
},
disabledText: {
color: '#9CA3AF',
},
});