zips-react-native-sdk-test/lib/components/PaymentModal.js

Lightweight ZIPS Payment Gateway SDK for React Native - Complete payment solution with card payments, wallet payments (AfrMoney & ZApp), netbanking, and native UI design

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, Modal, SafeAreaView, KeyboardAvoidingView, Platform, StyleSheet, ScrollView, } from 'react-native';
import Toast from 'react-native-toast-message';
import { PaymentHeader, PaymentMethodSelection, BankAccountInput, AccountDetails, OTPVerification, PaymentSuccess, CardInput, CardConfirmation, WalletSelection, WalletInput, WalletConfirmation, } from './PaymentModal/';
import { getDefaultCurrency } from '../utils/helpers';
import { useZipsContext } from '../context/ZipsProvider';
import NetBanking from './PaymentModal/NetBanking';
export default function PaymentModal({ visible, onClose }) {
    const { paymentDetails, environment, currentStep } = useZipsContext();
    const renderStep = () => {
        switch (currentStep) {
            case 'method-selection':
                return _jsx(PaymentMethodSelection, {});
            case 'bank-selection':
                return _jsx(NetBanking, {});
            case 'card-input':
                return _jsx(CardInput, {});
            case 'card-confirmation':
                return _jsx(CardConfirmation, {});
            case 'wallet-selection':
                return _jsx(WalletSelection, {});
            case 'wallet-input':
                return _jsx(WalletInput, {});
            case 'wallet-confirmation':
                return _jsx(WalletConfirmation, {});
            case 'bank-account-input':
                return _jsx(BankAccountInput, {});
            case 'account-details':
                return _jsx(AccountDetails, {});
            case 'otp-verification':
                return _jsx(OTPVerification, {});
            case 'payment-success':
                return _jsx(PaymentSuccess, {});
            default:
                return _jsx(PaymentMethodSelection, {});
        }
    };
    return (_jsx(Modal, { visible: visible, animationType: "slide", presentationStyle: "pageSheet", onRequestClose: onClose, children: _jsxs(SafeAreaView, { style: styles.container, children: [_jsxs(KeyboardAvoidingView, { style: styles.keyboardAvoidingView, behavior: Platform.OS === 'ios' ? 'padding' : 'height', keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : 20, children: [_jsx(PaymentHeader, { onClose: onClose, amount: paymentDetails.amount, currency: paymentDetails.currency || getDefaultCurrency(), description: paymentDetails.description, environment: environment }), _jsx(View, { style: styles.content, children: _jsx(ScrollView, { style: styles.scrollContent, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", contentContainerStyle: styles.scrollContentContainer, children: renderStep() }) })] }), _jsx(Toast, {})] }) }));
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    keyboardAvoidingView: {
        flex: 1,
    },
    content: {
        flex: 1,
        paddingHorizontal: 16,
        paddingVertical: 8,
    },
    scrollContent: {
        flex: 1,
    },
    scrollContentContainer: {
        flexGrow: 1,
        paddingBottom: 20,
    },
});