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
239 lines (238 loc) • 11.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, Text, TouchableOpacity, StyleSheet, TextInput, Image, } from 'react-native';
import Toast from 'react-native-toast-message';
import { Button } from '../common/Button';
import { ShimmerButton } from '../common/Shimmer';
import { useNetBankingContext } from '../../context/NetBankingProvider';
import { useZipsContext } from '../../context/ZipsProvider';
import { useGetAccountDetails, useGetOtp, } from '../../tanstack-query/mutations';
export const BankAccountInput = () => {
var _a;
const { selectedBank, setAccountDetails, accountDetails } = useNetBankingContext();
const { setCurrentStep, paymentDetails } = useZipsContext();
const getAccountDetailsMutations = useGetAccountDetails();
const getOtpMutations = useGetOtp();
const handleGetOtp = async () => {
try {
await getOtpMutations.mutateAsync({
customerAccount: accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountNumber,
customerName: accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountName,
amount: (paymentDetails === null || paymentDetails === void 0 ? void 0 : paymentDetails.amount) || 0,
customerLocation: 'Gambia',
purpose: (accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.purpose) || 'Transfer',
}, {
onError: (err) => {
var _a, _b;
console.error('OTP Request Error:', JSON.stringify(err, null, 2));
Toast.show({
type: 'error',
text1: 'OTP Request Failed',
text2: ((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) ||
(err === null || err === void 0 ? void 0 : err.message) ||
'Failed to request OTP. Please try again.',
position: 'top',
visibilityTime: 4000,
});
},
onSuccess: (data) => {
var _a;
console.log('OTP fetched successfully:', data === null || data === void 0 ? void 0 : data.data);
if (((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.status) === 'Success') {
setAccountDetails((prev) => {
var _a;
return ({
...prev,
...(_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data,
});
});
setCurrentStep('otp-verification');
}
},
});
}
catch (error) {
// Handle error
}
};
const handleVerifyAccount = async () => {
try {
await getAccountDetailsMutations.mutateAsync({
accountNumber: accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountNumber,
}, {
onError: (err) => {
var _a, _b;
console.error('Account Verification Error:', JSON.stringify(err, null, 2));
Toast.show({
type: 'error',
text1: 'Account Verification Failed',
text2: ((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) ||
(err === null || err === void 0 ? void 0 : err.message) ||
'Failed to verify account. Please check the account number.',
position: 'top',
visibilityTime: 3000,
});
},
onSuccess: (data) => {
var _a;
console.log('Account details fetched successfully:', data === null || data === void 0 ? void 0 : data.data);
if (((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.status) === 'Success') {
setAccountDetails((prev) => {
var _a;
return ({
...prev,
...(_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data,
});
});
}
},
});
}
catch (error) {
// Handle error
}
};
return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.header, children: [_jsx(TouchableOpacity, { onPress: () => {
setAccountDetails((prev) => ({
...prev,
accountNumber: '',
}));
setCurrentStep('bank-selection');
}, style: styles.backButton, children: _jsx(Text, { style: styles.backButtonText, children: "\u2190 Back" }) }), _jsx(Text, { style: styles.title, children: "Bank Payment" }), _jsx(View, { style: styles.placeholder })] }), _jsxs(View, { style: styles.bankHeader, children: [_jsx(View, { style: styles.bankLogoContainer, children: _jsx(Image, { source: { uri: (selectedBank === null || selectedBank === void 0 ? void 0 : selectedBank.bankLogo) || (selectedBank === null || selectedBank === void 0 ? void 0 : selectedBank.logo) }, style: styles.bankLogo, resizeMode: "contain" }) }), _jsx(Text, { style: styles.bankName, children: (selectedBank === null || selectedBank === void 0 ? void 0 : selectedBank.bankName) || (selectedBank === null || selectedBank === void 0 ? void 0 : selectedBank.name) })] }), (accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountName) && (accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountNumber) ? (_jsxs(View, { style: styles.accountDetailsSection, children: [_jsx(Text, { style: styles.accountLabel, children: "Account Details" }), _jsxs(View, { style: styles.accountInfoContainer, children: [_jsx(Text, { style: styles.accountName, children: accountDetails.accountName }), _jsx(Text, { style: styles.accountNumber, children: accountDetails.accountNumber })] })] })) : (_jsxs(View, { style: styles.inputSection, children: [_jsx(Text, { style: styles.inputLabel, children: "Account number *" }), _jsx(TextInput, { style: [styles.input], placeholder: "Enter your account number", value: accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountNumber, onChangeText: (text) => {
// Only allow numeric input for account numbers
const numericText = text.replace(/[^0-9]/g, '');
setAccountDetails((prev) => ({
...prev,
accountNumber: numericText,
}));
}, keyboardType: "numeric", maxLength: 20, autoFocus: true, autoCorrect: false, autoCapitalize: "none", returnKeyType: "done", blurOnSubmit: true })] })), _jsx(View, { style: styles.actionSection, children: getAccountDetailsMutations.isPending ? (_jsx(ShimmerButton, {})) : !((accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountName) && (accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountNumber)) ? (_jsx(Button, { title: "Verify Account", onPress: handleVerifyAccount, disabled: !((_a = accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountNumber) === null || _a === void 0 ? void 0 : _a.trim()), variant: "default", size: "large", style: styles.verifyButton })) : (_jsx(Button, { title: "Continue", onPress: handleGetOtp, disabled: !((accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountName) && (accountDetails === null || accountDetails === void 0 ? void 0 : accountDetails.accountNumber)), variant: "success", size: "large", style: styles.verifyButton })) })] }));
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
paddingHorizontal: 16, // Reduced from 20 to match modal
paddingTop: 20, // Slightly reduced
},
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: 40,
},
bankLogoContainer: {
width: 80,
height: 80,
borderRadius: 12,
backgroundColor: '#F3F4F6',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 16,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 2,
},
bankLogo: {
width: 60,
height: 60,
},
bankName: {
fontSize: 18,
fontWeight: '600',
color: '#1F2937',
textAlign: 'center',
},
inputSection: {
marginBottom: 32,
},
inputLabel: {
fontSize: 16,
fontWeight: '500',
color: '#374151',
marginBottom: 8,
},
input: {
borderWidth: 1,
borderColor: '#D1D5DB',
borderRadius: 8,
paddingHorizontal: 16,
paddingVertical: 14,
fontSize: 16,
backgroundColor: '#FFFFFF',
color: '#1F2937',
},
inputError: {
borderColor: '#EF4444',
},
errorText: {
color: '#EF4444',
fontSize: 14,
marginTop: 3,
marginBottom: 8,
},
actionSection: {
marginBottom: 24,
},
verifyButton: {
backgroundColor: '#000000',
borderRadius: 8,
},
verifyButtonDisabled: {
backgroundColor: '#9CA3AF',
},
accountDetailsSection: {
backgroundColor: '#F8FAFC',
borderRadius: 12,
padding: 16,
marginBottom: 24,
borderWidth: 1,
borderColor: '#E5E7EB',
},
accountLabel: {
fontSize: 14,
fontWeight: '600',
color: '#6B7280',
marginBottom: 8,
textAlign: 'center',
},
accountInfoContainer: {
alignItems: 'center',
},
accountName: {
fontSize: 18,
fontWeight: '700',
color: '#1F2937',
marginBottom: 4,
textAlign: 'center',
},
accountNumber: {
fontSize: 16,
fontWeight: '500',
color: '#6B7280',
textAlign: 'center',
letterSpacing: 0.5,
},
});