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
198 lines (197 loc) • 7.43 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 { useWalletContext } from '../../context/WalletProvider';
import { useZipsContext } from '../../context/ZipsProvider';
export const WalletConfirmation = ({}) => {
const { paymentDetails } = useZipsContext();
const { selectedWallet, walletInformation, isLoading, error } = useWalletContext();
const formatAmount = (amt) => {
return new Intl.NumberFormat('en-GM', {
style: 'currency',
currency: (paymentDetails === null || paymentDetails === void 0 ? void 0 : paymentDetails.currency) || 'GMD',
minimumFractionDigits: 2,
}).format(amt);
};
const maskPhoneNumber = (phone) => {
// Show only last 3 digits: +220****234
if (phone.length >= 7) {
const lastThree = phone.slice(-3);
const country = phone.startsWith('+220') ? '+220' : '';
return `${country}****${lastThree}`;
}
return phone;
};
const getWalletIcon = () => {
return selectedWallet.logo;
};
const getConfirmationMessage = () => {
switch (selectedWallet.id) {
case 'afrmoney':
return 'You will receive a prompt on your AfrMoney app to authorize this payment.';
case 'zapp':
return 'You will receive a notification on your ZApp to complete the payment.';
default:
return 'You will receive a notification on your wallet app to complete the payment.';
}
};
return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.header, children: [_jsx(TouchableOpacity, { onPress: () => { }, 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 })] }), _jsxs(View, { style: styles.confirmationCard, children: [_jsxs(View, { style: styles.walletSection, children: [_jsx(View, { style: styles.walletIcon, children: _jsx(Text, { style: styles.walletIconText, children: getWalletIcon() }) }), _jsxs(View, { style: styles.walletDetails, children: [_jsx(Text, { style: styles.walletName, children: selectedWallet.name }), _jsx(Text, { style: styles.walletPhone, children: maskPhoneNumber(walletInformation === null || walletInformation === void 0 ? void 0 : walletInformation.phoneNumber) })] })] }), _jsx(View, { style: styles.divider }), _jsxs(View, { style: styles.paymentDetails, children: [_jsx(Text, { style: styles.paymentLabel, children: "Payment Amount" }), _jsx(Text, { style: styles.paymentAmount, children: formatAmount(paymentDetails === null || paymentDetails === void 0 ? void 0 : paymentDetails.amount) })] }), _jsx(View, { style: styles.divider }), _jsx(View, { style: styles.infoSection, children: _jsx(Text, { style: styles.infoText, children: getConfirmationMessage() }) })] }), _jsxs(View, { style: styles.securityNotice, children: [_jsxs(View, { style: styles.securityHeader, children: [_jsx(Text, { style: styles.securityIcon, children: "\uD83D\uDD12" }), _jsx(Text, { style: styles.securityTitle, children: "Secure Payment" })] }), _jsxs(Text, { style: styles.securityText, children: ["Your payment will be processed securely through ", selectedWallet.name, ". You can cancel the transaction from your wallet app if needed."] })] }), _jsx(View, { style: styles.actionButtons, children: _jsx(Button, { title: isLoading ? 'Processing...' : 'Confirm Payment', onPress: () => { }, disabled: isLoading, style: styles.confirmButton, textStyle: styles.confirmButtonText }) }), _jsx(View, { style: styles.helpSection, children: _jsxs(Text, { style: styles.helpText, children: ["Having trouble? Make sure your ", selectedWallet.name, " app is installed and you're logged in."] }) })] }));
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
paddingHorizontal: 20,
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,
},
confirmationCard: {
backgroundColor: '#f8fafc',
borderRadius: 16,
padding: 20,
marginBottom: 24,
borderWidth: 1,
borderColor: '#e2e8f0',
},
walletSection: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 20,
},
walletIcon: {
width: 56,
height: 56,
backgroundColor: '#ffffff',
borderRadius: 28,
alignItems: 'center',
justifyContent: 'center',
marginRight: 16,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
walletIconText: {
fontSize: 28,
},
walletDetails: {
flex: 1,
},
walletName: {
fontSize: 20,
fontWeight: '600',
color: '#1e293b',
marginBottom: 4,
},
walletPhone: {
fontSize: 16,
color: '#64748b',
fontFamily: 'monospace',
},
divider: {
height: 1,
backgroundColor: '#e2e8f0',
marginVertical: 16,
},
paymentDetails: {
alignItems: 'center',
paddingVertical: 8,
},
paymentLabel: {
fontSize: 14,
color: '#64748b',
marginBottom: 4,
textTransform: 'uppercase',
letterSpacing: 0.5,
},
paymentAmount: {
fontSize: 32,
fontWeight: '700',
color: '#059669',
},
infoSection: {
paddingVertical: 8,
},
infoText: {
fontSize: 16,
color: '#475569',
textAlign: 'center',
lineHeight: 24,
},
securityNotice: {
backgroundColor: '#f0f9ff',
borderRadius: 12,
padding: 16,
marginBottom: 24,
borderWidth: 1,
borderColor: '#bae6fd',
},
securityHeader: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8,
},
securityIcon: {
fontSize: 20,
marginRight: 8,
},
securityTitle: {
fontSize: 16,
fontWeight: '600',
color: '#0369a1',
},
securityText: {
fontSize: 14,
color: '#0369a1',
lineHeight: 20,
},
actionButtons: {
marginBottom: 20,
},
confirmButton: {
backgroundColor: '#059669',
borderRadius: 12,
paddingVertical: 16,
},
confirmButtonText: {
fontSize: 18,
fontWeight: '600',
},
helpSection: {
backgroundColor: '#fffbeb',
borderRadius: 8,
padding: 12,
borderWidth: 1,
borderColor: '#fde68a',
},
helpText: {
fontSize: 14,
color: '#92400e',
textAlign: 'center',
lineHeight: 20,
},
});