@pagamio/frontend-commons-lib/lib/pagamio-drawer/TopUpWalletDrawer/TopUpWalletContent.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Label, Radio, TextInput } from 'flowbite-react';
import { BsBank } from 'react-icons/bs';
import { FaCreditCard, FaMobileAlt } from 'react-icons/fa';
import { useState } from 'react';
import Button from '../../components/ui/Button';
const TopUpWalletContent = ({ isSubmitting, handleCloseDrawer, handleProcessPayment }) => {
    const [amount, setAmount] = useState('');
    const [paymentMethod, setPaymentMethod] = useState('eft');
    const [mobileProvider, setMobileProvider] = useState('mtn');
    const handleSubmit = async (e) => {
        e.preventDefault();
        const data = {
            amount,
            paymentMethod,
            mobileProvider,
        };
        handleProcessPayment(data);
    };
    return (_jsxs("div", { children: [_jsx("div", { className: "px-5 pt-5", children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { className: "mb-5", children: [_jsx(Label, { htmlFor: "amount", value: "Amount (ZAR)" }), _jsx(TextInput, { id: "amount", type: "number", value: amount, onChange: (e) => setAmount(e.target.value), placeholder: "Enter amount in Rands", required: true, min: "1", step: "0.01", theme: {
                                        field: {
                                            base: 'mt-1 w-full',
                                            input: {
                                                base: 'w-full h-[39px] !bg-transparent border-gray-300 text-gray-900',
                                            },
                                        },
                                    } })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Label, { value: "Select Payment Method" }), _jsxs("div", { className: "grid grid-cols-1 gap-4", children: [_jsxs("button", { type: "button", className: `flex w-full cursor-pointer items-center justify-between rounded-lg border p-4 hover:bg-gray-50 ${paymentMethod === 'eft' ? 'border-primary-500 bg-primary-500/5' : 'border-gray-200'}`, onClick: () => setPaymentMethod('eft'), children: [_jsxs("div", { className: "flex items-center space-x-3", children: [_jsx(Radio, { id: "eft", name: "paymentMethod", value: "eft", checked: paymentMethod === 'eft', onChange: () => setPaymentMethod('eft'), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "eft", className: "mb-0 cursor-pointer", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(FaCreditCard, { className: "text-primary" }), "Credit/Debit Card (EFT)"] }) }), _jsx("p", { className: "text-xs text-gray-500", children: "Instant transfer via secure payment" })] })] }), _jsx(BsBank, { className: "h-6 w-6 text-gray-400" })] }), _jsxs("button", { type: "button", className: `flex w-full cursor-pointer items-center justify-between rounded-lg border p-4 hover:bg-gray-50 ${paymentMethod === 'mobile_money' ? 'border-primary-500 bg-primary-500/5' : 'border-gray-200'}`, onClick: () => setPaymentMethod('mobile_money'), children: [_jsxs("div", { className: "flex items-center space-x-3", children: [_jsx(Radio, { id: "mobile_money", name: "paymentMethod", value: "mobile_money", checked: paymentMethod === 'mobile_money', onChange: () => setPaymentMethod('mobile_money'), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "mobile_money", className: "mb-0 cursor-pointer", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(FaMobileAlt, { className: "text-primary" }), "Mobile Money"] }) }), _jsx("p", { className: "text-xs text-gray-500", children: "Pay using mobile wallet" })] })] }), _jsx("div", { className: "flex h-6 w-6 items-center justify-center text-gray-400", children: _jsx(FaMobileAlt, {}) })] })] })] }), paymentMethod === 'mobile_money' && (_jsxs("div", { className: "space-y-3 mt-5", children: [_jsx(Label, { value: "Select Mobile Provider" }), _jsx("div", { className: "grid grid-cols-1 gap-3", children: [
                                        { id: 'mtn', name: 'MTN' },
                                        { id: 'vodacom', name: 'Vodacom' },
                                        { id: 'cell_c', name: 'Cell C' },
                                        { id: 'telkom', name: 'Telkom' },
                                    ].map((provider) => (_jsxs("button", { type: "button", className: `flex w-full cursor-pointer items-center rounded-lg border p-3 hover:bg-gray-50 ${mobileProvider === provider.id ? 'border-primary-500 bg-primary-500/5' : 'border-gray-200'}`, onClick: () => setMobileProvider(provider.id), children: [_jsx(Radio, { id: provider.id, name: "mobileProvider", value: provider.id, checked: mobileProvider === provider.id, onChange: () => setMobileProvider(provider.id), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsx(Label, { htmlFor: provider.id, className: "ml-2 cursor-pointer", children: provider.name })] }, provider.id))) })] }))] }) }), _jsxs("div", { className: "flex border-t bg-white", style: {
                    height: '50px',
                    position: 'fixed',
                    bottom: 0,
                    zIndex: 100,
                    width: '420px',
                }, children: [_jsx(Button, { className: "w-full flex-1 h-full rounded-none", disabled: isSubmitting, onClick: handleCloseDrawer, children: "Cancel" }), _jsx(Button, { className: "text-white flex-1 h-full rounded-none", disabled: isSubmitting, type: "submit", onClick: handleSubmit, children: "Continue to Payment" })] })] }));
};
export default TopUpWalletContent;