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
166 lines (165 loc) • 6.67 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useZipsContext } from '../../context/ZipsProvider';
export const PaymentSuccess = () => {
var _a;
const { transactionDetails } = useZipsContext();
return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.successHeader, children: [_jsx(View, { style: styles.successIcon, children: _jsx(Text, { style: styles.checkmark, children: "\u2713" }) }), _jsx(Text, { style: styles.successText, children: "PAYMENT SUCCESSFUL" }), _jsx(TouchableOpacity, { style: styles.downloadButton, onPress: () => { }, children: _jsx(Text, { style: styles.downloadText, children: "Download" }) })] }), _jsxs(View, { style: styles.receiptCard, children: [_jsxs(View, { style: styles.receiptHeader, children: [_jsx(View, { style: styles.zipsBadge, children: _jsx(Text, { style: styles.zipsText, children: "ZIPS" }) }), _jsx(Text, { style: styles.receiptTitle, children: "ZIPS PAYMENT SOLUTION" })] }), _jsxs(View, { style: styles.receiptDetails, children: [_jsxs(View, { style: styles.detailRow, children: [_jsx(Text, { style: styles.detailLabel, children: "Reference No." }), _jsx(Text, { style: styles.detailValue, children: (transactionDetails === null || transactionDetails === void 0 ? void 0 : transactionDetails.referenceNumber) || '' })] }), _jsxs(View, { style: styles.detailRow, children: [_jsx(Text, { style: styles.detailLabel, children: "Date:" }), _jsx(Text, { style: styles.detailValue, children: (transactionDetails === null || transactionDetails === void 0 ? void 0 : transactionDetails.date) || '' }), _jsx(Text, { style: styles.detailLabel, children: "Time:" }), _jsx(Text, { style: styles.detailValue, children: (transactionDetails === null || transactionDetails === void 0 ? void 0 : transactionDetails.time) || '' })] }), _jsxs(View, { style: styles.amountRow, children: [_jsx(Text, { style: styles.amountLabel, children: "N/A" }), _jsxs(Text, { style: styles.amountValue, children: [transactionDetails === null || transactionDetails === void 0 ? void 0 : transactionDetails.currency, ' ', (_a = transactionDetails === null || transactionDetails === void 0 ? void 0 : transactionDetails.amount) === null || _a === void 0 ? void 0 : _a.toFixed(0)] })] }), _jsxs(View, { style: styles.paymentInfo, children: [_jsxs(View, { style: styles.infoRow, children: [_jsx(Text, { style: styles.infoLabel, children: "Paid To" }), _jsx(Text, { style: styles.infoValue, children: "N/A" })] }), _jsxs(View, { style: styles.infoRow, children: [_jsx(Text, { style: styles.infoLabel, children: "Paid By" }), _jsx(Text, { style: styles.infoValue, children: (transactionDetails === null || transactionDetails === void 0 ? void 0 : transactionDetails.accountName) || '' })] })] }), _jsx(Text, { style: styles.disclaimer, children: "Disclaimer: You are advised to download this receipt for your record." })] })] }), _jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => { }, children: _jsx(Text, { style: styles.closeButtonText, children: "Close" }) })] }));
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F3F4F6',
padding: 20,
justifyContent: 'center',
},
successHeader: {
alignItems: 'center',
marginBottom: 24,
},
successIcon: {
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: '#10B981',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 8,
},
checkmark: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: 'bold',
},
successText: {
fontSize: 12,
fontWeight: '600',
color: '#10B981',
letterSpacing: 0.5,
marginBottom: 16,
},
downloadButton: {
backgroundColor: '#1F2937',
paddingHorizontal: 16, // Reduced from 20
paddingVertical: 8,
borderRadius: 4,
},
downloadText: {
color: '#FFFFFF',
fontSize: 12,
fontWeight: '500',
},
receiptCard: {
backgroundColor: '#FFFFFF',
borderRadius: 8,
padding: 24,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
marginBottom: 24,
},
receiptHeader: {
alignItems: 'center',
marginBottom: 24,
paddingBottom: 16,
borderBottomWidth: 1,
borderBottomColor: '#E5E7EB',
},
zipsBadge: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: '#8B5CF6',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 8,
},
zipsText: {
color: '#FFFFFF',
fontSize: 12,
fontWeight: 'bold',
},
receiptTitle: {
fontSize: 14,
fontWeight: '600',
color: '#1F2937',
textAlign: 'center',
},
receiptDetails: {
gap: 12,
},
detailRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
detailLabel: {
fontSize: 12,
color: '#6B7280',
fontWeight: '500',
},
detailValue: {
fontSize: 12,
color: '#1F2937',
fontWeight: '600',
},
amountRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 8,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: '#E5E7EB',
marginVertical: 8,
},
amountLabel: {
fontSize: 14,
color: '#6B7280',
fontWeight: '500',
},
amountValue: {
fontSize: 16,
color: '#1F2937',
fontWeight: 'bold',
},
paymentInfo: {
gap: 8,
marginTop: 8,
},
infoRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
infoLabel: {
fontSize: 12,
color: '#6B7280',
fontWeight: '500',
},
infoValue: {
fontSize: 12,
color: '#1F2937',
fontWeight: '600',
},
disclaimer: {
fontSize: 10,
color: '#9CA3AF',
textAlign: 'center',
marginTop: 16,
lineHeight: 14,
},
closeButton: {
backgroundColor: '#6B7280',
paddingVertical: 12,
borderRadius: 6,
alignItems: 'center',
},
closeButtonText: {
color: '#FFFFFF',
fontSize: 14,
fontWeight: '500',
},
});